-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
660 lines (652 loc) · 41.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
<!DOCTYPE html>
<html lang=en>
<head>
<title>Overview</title>
</head>
<body>
<hr>
<h1>web-components-toolbox</h1>
<h2>Setup</h2>
<ol>
<li>git submodule update --init --recursive --force</li>
<li>npm install</li>
<li>npm run serve</li>
<li>note: on windows systems you may need to run: "git config --system core.longpaths true"</li>
</ol>
<br>
<script>
var headerFooterQuery = 'login=./src/es/components/msrc/login/default-/default-.html&logo=./src/es/components/atoms/logo/default-/default-.html&nav=./src/es/components/molecules/navigation/default-/default-.html&footer=./src/es/components/organisms/footer/default-/default-.html'
</script>
<h1>Atoms</h1>
<h3>Flatpickr</h3>
<div id=flatpickr></div>
<script>
document.querySelector('#flatpickr').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/flatpickr/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/atoms/flatpickr/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>IconMdx</h3>
<div id=iconMdx></div>
<script>
document.querySelector('#iconMdx').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/iconMdx/IconMdx.html">"icon mdx" Page</a> / <a href=./src/es/components/atoms/iconMdx/IconMdx.html>"icon mdx" Plain</a></li>
</ul>
`
</script>
<h3>Select</h3>
<div id=select></div>
<script>
document.querySelector('#select').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/select/Select.html">"select" Page</a> / <a href=./src/es/components/atoms/select/Select.html>"select" Plain</a></li>
</ul>
`
</script>
<h3>Button</h3>
<div id=button></div>
<script>
document.querySelector('#button').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/button/primary-/primary-.html">"primary-" Page</a> / <a href=./src/es/components/atoms/button/primary-/primary-.html>"primary-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/button/secondary-/secondary-.html">"secondary-" Page</a> / <a href=./src/es/components/atoms/button/secondary-/secondary-.html>"secondary-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/button/tertiary-/tertiary-.html">"tertiary-" Page</a> / <a href=./src/es/components/atoms/button/tertiary-/tertiary-.html>"tertiary-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/button/quaternary-/quaternary-.html">"quaternary-" Page</a> / <a href=./src/es/components/atoms/button/quaternary-/quaternary-.html>"quaternary-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/button/download-/download-.html">"download-" Page</a> / <a href=./src/es/components/atoms/button/download-/download-.html>"download-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/button/category-/category-.html">"category-" Page</a> / <a href=./src/es/components/atoms/button/category-/category-.html>"category-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/button/category-teaser-/category-teaser-.html">"category-teaser-" Page</a> / <a href=./src/es/components/atoms/button/category-teaser-/category-teaser-.html>"category-teaser-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/button/square-/square-.html">"square-" Page</a> / <a href=./src/es/components/atoms/button/square-/square-.html>"square-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/button/action-/action-.html">"action-" Page</a> / <a href=./src/es/components/atoms/button/action-/action-.html>"action-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/button/transparent-/transparent-.html">"transparent-" Page</a> / <a href=./src/es/components/atoms/button/transparent-/transparent-.html>"transparent-" Plain</a></li>
</ul>
`
</script>
<h3>Scroll To Top </h3>
<div id=scrollToTop></div>
<script>
document.querySelector('#scrollToTop').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/scrollToTop/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/atoms/scrollToTop/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>DateSelect</h3>
<div id=date-select></div>
<script>
document.querySelector('#date-select').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/dateSelect/primary-/primary-.html">"primary-" Page</a> / <a href=./src/es/components/atoms/dateSelect/primary-/primary-.html>"primary-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/dateSelect/secondary-/secondary-.html">"secondary-" Page</a> / <a href=./src/es/components/atoms/dateSelect/secondary-/secondary-.html>"secondary-" Plain</a></li>
</ul>
`
</script>
<h3>Picture</h3>
<div id=picture></div>
<script>
document.querySelector('#picture').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/picture/scale-up-/scale-up-.html">"scale-up-" Page</a> / <a href=./src/es/components/atoms/picture/scale-up-/scale-up-.html>"scale-up-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/picture/overflow-/overflow-.html">"overflow-" Page</a> / <a href=./src/es/components/atoms/picture/overflow-/overflow-.html>"overflow-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/picture/overflow-scale-up-/overflow-scale-up-.html">"overflow-scale-up-" Page</a> / <a href=./src/es/components/atoms/picture/overflow-scale-up-/overflow-scale-up-.html>"overflow-scale-up-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/teaser/tile-/tile-.html">"teaser-" Page</a> / <a href=./src/es/components/molecules/teaser/tile-/tile-.html>"teaser-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/picture/cover-/cover-.html">"cover-" Page</a> / <a href=./src/es/components/atoms/picture/cover-/cover-.html>"cover-" Plain</a></li>
</ul>
`
</script>
<h3>Video</h3>
<div id=video></div>
<script>
document.querySelector('#video').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/video/Video.html">old preview</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/video/crop-/crop-.html">"crop-" Page</a> / <a href=./src/es/components/atoms/picture/crop-/crop-.html>"crop-" Plain</a></li>
</ul>
`
</script>
<h3>Iframe</h3>
<div id=iframe></div>
<script>
document.querySelector('#iframe').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/iframe/Iframe.html">"Iframe" Page</a> / <a href=./src/es/components/atoms/iframe/Iframe.html>"Iframe" Plain</a></li>
</ul>
`
</script>
<h3>Emotion Pictures</h3>
<div id=emotion-pictures></div>
<script>
document.querySelector('#emotion-pictures').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/emotionPictures/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/atoms/emotionPictures/default-/default-.html>"default-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/emotionPictures/with-title-/with-title-.html">"with-title-" Page</a> / <a href=./src/es/components/atoms/emotionPictures/with-title-/with-title-.html>"with-title-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/emotionPictures/with-button-/with-button-.html">"with-button-" Page</a> / <a href=./src/es/components/atoms/emotionPictures/with-button-/with-button-.html>"with-button-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/emotionPictures/with-video-/with-video-.html">"with-video-" Page</a> / <a href=./src/es/components/atoms/emotionPictures/with-video-/with-video-.html>"with-video-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/emotionPictures/with-logo-/with-logo-.html">"with-logo-" Page</a> / <a href=./src/es/components/atoms/emotionPictures/with-logo-/with-logo-.html>"with-logo-" Plain</a></li>
</ul>
`
</script>
<h3>Google Map</h3>
<div id=google-map></div>
<script>
document.querySelector('#google-map').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/googleMaps/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/atoms/googleMaps/default-/default-.html>"default-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/googleMaps/iframe-/iframe-.html">"iframe-" Page</a> / <a href=./src/es/components/atoms/googleMaps/iframe-/iframe-.html>"iframe-" Plain</a></li>
</ul>
`
</script>
<h3>Hotspot</h3>
<div id=hotspot></div>
<script>
document.querySelector('#hotspot').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/hotspot/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/atoms/hotspot/default-/default-.html>"default-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/hotspot/helper-/helper-.html">"helper-" Page</a> / <a href=./src/es/components/atoms/hotspot/helper-/helper-.html>"helper-" Plain</a></li>
</ul>
`
</script>
<h3>User Profile</h3>
<div id=user-profile></div>
<script>
document.querySelector('#user-profile').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/userProfile/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/atoms/userProfile/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>Basket</h3>
<div id=basket></div>
<script>
document.querySelector('#basket').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/basket/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/atoms/basket/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>Tooltip</h3>
<div id=tooltip></div>
<script>
document.querySelector('#tooltip').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/tooltip/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/atoms/tooltip/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>OneTrust Cookie Banner</h3>
<div id=onetrust></div>
<script>
document.querySelector('#onetrust').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/onetrust/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/atoms/onetrust/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>Ascii Captcha</h3>
<div id=asciiCaptcha></div>
<script>
document.querySelector('#asciiCaptcha').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/asciiCaptcha/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/atoms/asciiCaptcha/default-/default-.html>"default-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/asciiCaptcha/invert-/invert-.html">"invert-" Page</a> / <a href=./src/es/components/atoms/asciiCaptcha/invert-/invert-.html>"invert-" Plain</a></li>
</ul>
`
</script>
<h3>Auvious</h3>
<div id=auvious></div>
<script>
document.querySelector('#auvious').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/atoms/auvious/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/atoms/auvious/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h1>Molecules</h1>
<h3>LoadTemplateTag</h3>
<div id=load-template-tag></div>
<script>
document.querySelector('#load-template-tag').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/loadTemplateTag/LoadTemplateTag.html">"LoadTemplateTag" Page</a> / <a href=./src/es/components/molecules/loadTemplateTag/LoadTemplateTag.html>"LoadTemplateTag" Plain</a></li>
</ul>
`
</script>
<h3>LoadTemplateTagClickMore</h3>
<div id=m-load-template-tag-click-more></div>
<script>
document.querySelector('#m-load-template-tag-click-more').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/loadTemplateTagClickMore/LoadTemplateTagClickMore.html">"LoadTemplateTagClickMore" Page</a> / <a href=./src/es/components/molecules/loadTemplateTagClickMore/LoadTemplateTagClickMore.html>"LoadTemplateTagClickMore" Plain</a></li>
</ul>
`
</script>
<h3>ProductCard</h3>
<div id=product-card></div>
<script>
document.querySelector('#product-card').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/productCard/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/productCard/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>System Notification</h3>
<div id=system-notification></div>
<script>
document.querySelector('#system-notification').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/systemNotification/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/systemNotification/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>Tabs</h3>
<div id=tabs></div>
<script>
document.querySelector('#tabs').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/tabs/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/tabs/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>Teaser</h3>
<div id=teaser></div>
<script>
document.querySelector('#teaser').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/teaser/tile-/tile-.html">"tile-" Page</a> / <a href=./src/es/components/molecules/teaser/tile-/tile-.html>"tile-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/teaser/tile-text-center-/tile-text-center-.html">"tile-text-center-" Page</a> / <a href=./src/es/components/molecules/teaser/tile-text-center-/tile-text-center-.html>"tile-text-center-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/teaser/tile-rounded-/tile-rounded-.html">"tile-rounded-" Page</a> / <a href=./src/es/components/molecules/teaser/tile-rounded-/tile-rounded-.html>"tile-rounded-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/teaser/overlay-/overlay-.html">"overlay-" Page</a> / <a href=./src/es/components/molecules/teaser/overlay-/overlay-.html>"overlay-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/teaser/overlay-top-/overlay-top-.html">"overlay-top-" Page</a> / <a href=./src/es/components/molecules/teaser/overlay-top-/overlay-top-.html>"overlay-top-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/teaser/download-/download-.html">"download-" Page</a> / <a href=./src/es/components/molecules/teaser/download-/download-.html>"download-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/teaser/round-/round-.html">"round-" Page</a> / <a href=./src/es/components/molecules/teaser/round-/round-.html>"round-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/teaser/plain-/plain-.html">"plain-" Page</a> / <a href=./src/es/components/molecules/teaser/plain-/plain-.html>"plain-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/teaser/plainer-/plainer-.html">"plainer-" Page</a> / <a href=./src/es/components/molecules/teaser/plainer-/plainer-.html>"plain-" Plain</a></li>
</ul>
`
</script>
<h3>Flockler</h3>
<div id=flockler></div>
<script>
document.querySelector('#flockler').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/flockler/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/flockler/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>Form</h3>
<div id=form></div>
<script>
document.querySelector('#form').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/form/Form.html">"form" Page</a> / <a href=./src/es/components/molecules/form/Form.html>"form" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/form/FormTwo.html">"formTwo" Page</a> / <a href=./src/es/components/molecules/form/FormTwo.html>"formTwo" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/formZadb/FormZadb.html">"formZadb" Page</a> / <a href=./src/es/components/molecules/formZadb/FormZadb.html>"formZadb" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/formOrderItem/default-/default-.html">"form order item" Page</a> / <a href=./src/es/components/molecules/formOrderItem/default-/default-.html>"form order item" Plain</a></li>
</ul>
`
</script>
<h3>SimpleForm</h3>
<div id=simple-form></div>
<script>
document.querySelector('#simple-form').innerHTML = /* HTML */`
<ul>
<li>
<a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/simpleForm/default-/default-.html">"default-" Page</a> /
<a href=./src/es/components/molecules/simpleForm/default-/default-.html>"default-" Plain</a>
</li>
<li>
<a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/simpleForm/default-/login.html">"default-" login Page</a> /
<a href=./src/es/components/molecules/simpleForm/default-/login.html>"default-" login Plain</a>
</li>
<li>
<a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/simpleForm/default-/conditional.html">"default-" conditional Page</a> /
<a href=./src/es/components/molecules/simpleForm/default-/conditional.html>"default-" conditional Plain</a>
</li>
<li>
<a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/simpleForm/default-/filePreview.html">"default-" filePreview Page</a> /
<a href=./src/es/components/molecules/simpleForm/default-/filePreview.html>"default-" filePreview Plain</a>
</li>
<li>
<a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/simpleForm/default-/formValidation.html">"default-" formValidation Page</a> /
<a href=./src/es/components/molecules/simpleForm/default-/formValidation.html>"default-" formValidation Plain</a>
</li>
</ul>
`
</script>
<h3>Details</h3>
<div id=details></div>
<script>
document.querySelector('#details').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/details/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/details/default-/default-.html>"default-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/details/default-icon-right-/default-icon-right-.html">"default-icon-right-" Page</a> / <a href=./src/es/components/molecules/details/default-icon-right-/default-icon-right-.html>"default-icon-right-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/details/menu-single-/menu-single-.html">"menu-single-" Page</a> / <a href=./src/es/components/molecules/details/menu-single-/menu-single-.html>"menu-single-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/details/menu-portion-/menu-portion-.html">"menu-portion-" Page</a> / <a href=./src/es/components/molecules/details/menu-portion-/menu-portion-.html>"menu-portion-" Plain</a></li>
</ul>
`
</script>
<h3>PictureText</h3>
<div id=pictureText></div>
<script>
document.querySelector('#pictureText').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/pictureText/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/pictureText/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>Picture With Picture</h3>
<div id=pictureWithPicture></div>
<script>
document.querySelector('#pictureWithPicture').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/pictureWithPicture/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/pictureWithPicture/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>Carousel !!!deprecated!!!</h3>
<div id=carousel></div>
<script>
document.querySelector('#carousel').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/carousel/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/carousel/default-/default-.html>"default-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/carousel/portrait-/portrait-.html">"portrait-" Page</a> / <a href=./src/es/components/molecules/carousel/portrait-/portrait-.html>"portrait-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/carousel/emotion-/emotion-.html">"emotion-" Page</a> / <a href=./src/es/components/molecules/carousel/emotion-/emotion-.html>"emotion-" Plain</a></li>
</ul>
`
</script>
<h3>CarouselTwo</h3>
<div id=carouselTwo></div>
<script>
document.querySelector('#carouselTwo').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/carouselTwo/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/carouselTwo/default-/default-.html>"default-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/carouselTwo/thumbnail-/thumbnail-.html">"thumbnail-" Page</a> / <a href=./src/es/components/molecules/carouselTwo/thumbnail-/thumbnail-.html>"thumbnail-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/carouselTwo/teaser-/teaser-.html">"teaser-" Page</a> / <a href=./src/es/components/molecules/carouselTwo/teaser-/teaser-.html>"teaser-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/carouselTwo/seperate-nav-/seperate-nav-.html">"seperate-nav-" Page</a> / <a href=./src/es/components/molecules/carouselTwo/seperate-nav-/seperate-nav-.html>"seperate-nav-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/carouselTwo/image-/image-.html">"Image-" Page</a> / <a href=./src/es/components/molecules/carouselTwo/image-/image-.html>"Image-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/carouselTwo/3-column-/3-column-.html">"3-column-" Page</a> / <a href=./src/es/components/molecules/carouselTwo/3-column-/3-column-.html>"3-column-" Plain</a></li>
</ul>
`
</script>
<h3>HistoryGallery</h3>
<div id=historyGallery></div>
<script>
document.querySelector('#historyGallery').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/historyGallery/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/historyGallery/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>EmotionCarousel</h3>
<div id=emotionCarousel></div>
<script>
document.querySelector('#emotionCarousel').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/emotionCarousel/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/emotionCarousel/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>ImageMitHotspot</h3>
<div id=imageMitHotspot></div>
<script>
document.querySelector('#imageMitHotspot').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/imageHotspot/ImageHotspot.html">"default-" Page</a> / <a href=./src/es/components/molecules/imageHotspot/ImageHotspot.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>MetaHeader</h3>
<div id=metaheader></div>
<script>
document.querySelector('#metaheader').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/metaHeader/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/metaHeader/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>Product List</h3>
<div id=product-list></div>
<script>
document.querySelector('#product-list').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/productList/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/productList/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>Product</h3>
<div id=product></div>
<script>
document.querySelector('#product').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/product/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/product/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>Basket Control</h3>
<div id=basket-control></div>
<script>
document.querySelector('#basket-control').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/basketControl/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/basketControl/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>Favorite</h3>
<div id=favorite></div>
<script>
document.querySelector('#favorite').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/favorite/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/favorite/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>Dialog</h3>
<div id=dialog></div>
<script>
document.querySelector('#dialog').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/dialog/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/dialog/default-/default-.html>"default-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/dialog/top-slide-in-/top-slide-in-.html">"top-slide-in-" Page</a> / <a href=./src/es/components/molecules/dialog/top-slide-in-/top-slide-in-.html>"top-slide-in-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/dialog/left-slide-in-/left-slide-in-.html">"left-slide-in-" Page</a> / <a href=./src/es/components/molecules/dialog/left-slide-in-/left-slide-in-.html>"left-slide-in-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/dialog/left-slide-in-without-background-/left-slide-in-without-background-.html">"left-slide-in-without-background-" Page</a> / <a href=./src/es/components/molecules/dialog/left-slide-in-without-background-/left-slide-in-without-background-.html>"left-slide-in-without-background-" Plain</a></li>
</ul>
`
</script>
<h3>DialogClipboard</h3>
<div id=dialogClipboard></div>
<script>
document.querySelector('#dialogClipboard').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/dialogClipboard/DialogClipboard.html">"DialogClipboard" Page</a> / <a href=./src/es/components/molecules/dialogClipboard/DialogClipboard.html>"DialogClipboard" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/dialogClipboard/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/dialogClipboard/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>MobileDesktopSwitch</h3>
<div id=mobileDesktopSwitch></div>
<script>
document.querySelector('#mobileDesktopSwitch').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/mobileDesktopSwitch/default-/default-.html">"MobileDesktopSwitch" Page</a> / <a href=./src/es/components/molecules/mobileDesktopSwitch/default-/default-.html>"MobileDesktopSwitch" Plain</a></li>
</ul>
`
</script>
<h1>Organisms</h1>
<h3>Wrapper</h3>
<div id=wrapper></div>
<script>
document.querySelector('#wrapper').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/teaser/tile-/tile-.html">"wrapper-teaser-" Page</a> / <a href=./src/es/components/molecules/teaser/tile-/tile-.html>"wrapper-teaser-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/organisms/wrapper/teaser-/teaser-.html">"wrapper-teaser-" + "picture-first-mobile" + "picture-last-mobile" Page</a> / <a href=./src/es/components/organisms/wrapper/teaser-/teaser-.html>"wrapper-teaser-" + "picture-first-mobile" + "picture-last-mobile" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/organisms/wrapper/teaser-recipe-/teaser-recipe-.html">"wrapper-teaser-recipe-" Page</a> / <a href=./src/es/components/organisms/wrapper/teaser-recipe-/teaser-recipe-.html>"wrapper-teaser-recipe-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/organisms/wrapper/no-calc-column-width-/no-calc-column-width-.html">"wrapper-no-calc-column-width-" Page</a> / <a href=./src/es/components/organisms/wrapper/no-calc-column-width-/no-calc-column-width-.html>"wrapper-no-calc-column-width-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/organisms/wrapper/text-/text-.html">"wrapper-text-" Page</a> / <a href=./src/es/components/organisms/wrapper/text-/text-.html>"wrapper-text-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/organisms/wrapper/text-center-/text-center-.html">"wrapper-text-center-" Page</a> / <a href=./src/es/components/organisms/wrapper/text-center-/text-center-.html>"wrapper-text-center-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/organisms/wrapper/text-picture-cover-/text-picture-cover-.html">"wrapper-text-picture-cover-" Page</a> / <a href=./src/es/components/organisms/wrapper/text-picture-cover-/text-picture-cover-.html>"wrapper-text-picture-cover-" Plain</a></li>
</ul>
`
</script>
<h3>Modal</h3>
<div id=modal></div>
<script>
document.querySelector('#modal').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/organisms/modal/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/organisms/modal/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>Grid</h3>
<div id=grid></div>
<script>
document.querySelector('#grid').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/organisms/grid/2colums2rows-/2colums2rows-.html">"2colums2rows-" Page</a> / <a href=./src/es/components/organisms/grid/2colums2rows-/2colums2rows-.html>"2colums2rows-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/organisms/grid/432-auto-colums-auto-rows-/432-auto-colums-auto-rows-.html">"432-auto-colums-auto-rows-" Page</a> / <a href=./src/es/components/organisms/grid/432-auto-colums-auto-rows-/432-auto-colums-auto-rows-.html>"432-auto-colums-auto-rows-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/organisms/grid/12er-/12er-.html">"12er-" Page</a> / <a href=./src/es/components/organisms/grid/12er-/12er-.html>"12er-" Plain</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/organisms/grid/grid.html">auto grid Page</a> / <a href=./src/es/components/organisms/grid/grid.html>auto grid Plain</a></li>
</ul>
`
</script>
<h3>FormValidation</h3>
<div id=form-validation></div>
<script>
document.querySelector('#form-validation').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/organisms/formValidation/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/organisms/formValidation/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h1>Pages</h1>
<h3>Pages</h3>
<div id=pages></div>
<script>
document.querySelector('#pages').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=../../../../src/es/components/pages/Home.html">"mandant preview" Page</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=../../../../src/es/components/pages/Home.html#testAnchor">"anchor preview" Page</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=../../../../src/es/components/pages/Home.html#der-bessere-weg">"m-details (accordion) open on anchor preview" Page</a></li>
</ul>
`
</script>
<h3>Generator Pages</h3>
<div id=generator-pages></div>
<script>
document.querySelector('#generator-pages').innerHTML = /* HTML */`<generator-download-template-preview template-uri="./src/es/components/pages/generator/" href="./docs/Template.html?${headerFooterQuery}"></generator-download-template-preview>`
// load web component
Promise.all([
import('./generator/templates/component/downloadTemplatePreview/DownloadTemplatePreview.js').then(module => ['generator-download-template-preview', module.default])
]).then(elements => elements.forEach(element => {
// don't define already existing customElements
if (element && !customElements.get(element[0])) customElements.define(...element)
}))
</script>
<h1>Contentful</h1>
<h3>Contentful News</h3>
<div id=contentful></div>
<script>
document.querySelector('#contentful').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/contentful/newsList/default-/default-.html">"default-" Page</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/contentful/newsList/default-/pagination-default-.html">"default-" Page with Pagination</a></li>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/contentful/newsList/default-/pagination-filter-default-.html">"default-" Page with Pagination and Tag Filter</a></li>
</ul>
`
</script>
<h1>msrc</h1>
<h3>Storefinder</h3>
<div id=storeFinder></div>
<script>
document.querySelector('#storeFinder').innerHTML = /* HTML */`
<ul>
<li><a href="./src/es/components/msrc/storeFinder/default-/default-.html">"default-" Plain, must be in light DOM!!!! without shadow dom around</a></li>
</ul>
`
</script>
<h3>Product List</h3>
<div id=productList></div>
<script>
document.querySelector('#productList').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/msrc/productList/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/msrc/productList/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h3>Recipe List</h3>
<div id=recipeList></div>
<script>
document.querySelector('#recipeList').innerHTML = /* HTML */`
<ul>
<li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/recipeList/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/recipeList/default-/default-.html>"default-" Plain</a></li>
</ul>
`
</script>
<h1>mcs digital campaign factory</h1>
<h3>Widget</h3>
<div id=widget></div>
<script>
document.querySelector('#widget').innerHTML = /* HTML */`
<ul>
<li><a href="./src/es/components/mcs/widget/default-/default-.html">"default-" Plain, must be in light DOM!!!! without shadow dom around</a></li>
</ul>
`
</script>
</body>
<script>
const ul = document.createElement('ul')
ul.classList.add('overview')
document.body.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach(node => {
const li = document.createElement('li')
const a = document.createElement('a')
li.appendChild(a)
// add a direct link to the folder
const folderLink = location.href.replace(location.hash, '') + 'src' + node.nextElementSibling.nextElementSibling.querySelector('[href]')?.getAttribute('href').split('/src').filter(str => str.includes(node.textContent.replace(/\s/, '').toLowerCase()))[0]?.match(new RegExp('.*?' + node.textContent.replace(/\s/, '').toLowerCase(), 'g'))
if (!folderLink.includes('undefined')) {
const folderA = document.createElement('a')
folderA.setAttribute('href', folderLink)
folderA.setAttribute('target', '_blank')
folderA.innerHTML = ' 👉 folder'
li.appendChild(folderA)
}
let id
node.setAttribute('id', (id = node.textContent.replace(/\s/, '')))
a.setAttribute('href', `#${id}`)
let clone
a.appendChild((clone = node.cloneNode(true)))
clone.removeAttribute('id')
ul.appendChild(li)
})
document.body.prepend(ul)
</script>
<style>
.overview {
font-size: 0.7em;
display: flex;
flex-wrap: wrap;
gap: 1em;
align-items: baseline;
list-style: none;
}
.overview h1,
.overview h2,
.overview h3,
.overview h4,
.overview h5,
.overview h6 {
margin: 0;
}
.overview>li:has(h1) {
width: 100%;
}
.overview>li:has(h1)+* {
align-items: baseline;
display: flex;
margin-left: 3em;
}
.overview>li:has(h1)+*::before {
content: '→';
margin-right: 1em;
}
</style>
</html>