comand-component-library 4.0.2 → 4.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (50) hide show
  1. package/README.md +32 -32
  2. package/dist/comand-component-library.js +3264 -1450
  3. package/dist/comand-component-library.umd.cjs +3 -4
  4. package/dist/index.html +16 -16
  5. package/dist/style.css +1 -1
  6. package/dist/styles/demopage-only.css +4 -0
  7. package/dist/styles/templates/casual.css +3 -0
  8. package/package.json +4 -4
  9. package/src/App.vue +2117 -0
  10. package/src/ComponentLibrary.vue +150 -586
  11. package/src/assets/data/fake-select-options.json +3 -2
  12. package/src/assets/data/form-elements.json +1 -1
  13. package/src/assets/styles/global-styles.scss +17 -4
  14. package/src/componentSettingsDataAndControls.vue +705 -0
  15. package/src/components/CmdAddressData.vue +1 -2
  16. package/src/components/CmdBox.vue +60 -42
  17. package/src/components/CmdCopyrightInformation.vue +5 -3
  18. package/src/components/CmdFakeSelect.vue +138 -67
  19. package/src/components/CmdFancyBox.vue +2 -2
  20. package/src/components/CmdFormElement.vue +53 -27
  21. package/src/components/CmdGoogleMaps.vue +5 -0
  22. package/src/components/CmdHeadline.vue +13 -5
  23. package/src/components/CmdIcon.vue +6 -2
  24. package/src/components/CmdImage.vue +6 -1
  25. package/src/components/CmdImageGallery.vue +15 -4
  26. package/src/components/CmdInputGroup.vue +76 -24
  27. package/src/components/CmdListOfLinks.vue +20 -7
  28. package/src/components/CmdListOfRequirements.vue +10 -18
  29. package/src/components/CmdLoginForm.vue +14 -2
  30. package/src/components/CmdMainNavigation.vue +5 -1
  31. package/src/components/CmdMultistepFormProgressBar.vue +12 -7
  32. package/src/components/CmdOpeningHoursItem.vue +1 -3
  33. package/src/components/CmdPagination.vue +5 -1
  34. package/src/components/CmdSiteFooter.vue +11 -1
  35. package/src/components/CmdSiteHeader.vue +1 -0
  36. package/src/components/CmdSlideButton.vue +7 -1
  37. package/src/components/CmdSlideshow.vue +33 -5
  38. package/src/components/CmdSocialNetworks.vue +18 -13
  39. package/src/components/CmdSocialNetworksItem.vue +5 -1
  40. package/src/components/CmdSystemMessage.vue +7 -1
  41. package/src/components/CmdTabs.vue +5 -5
  42. package/src/components/CmdTextImageBlock.vue +11 -2
  43. package/src/components/CmdThumbnailScroller.vue +22 -4
  44. package/src/components/CmdTooltip.vue +49 -14
  45. package/src/components/CmdTooltipForFormElements.vue +96 -0
  46. package/src/components/CmdUploadForm.vue +25 -20
  47. package/src/components/CmdWidthLimitationWrapper.vue +1 -1
  48. package/src/components/ComponentSettings.vue +1 -1
  49. package/src/main.js +1 -1
  50. package/src/assets/data/accordion.json +0 -45
package/src/App.vue ADDED
@@ -0,0 +1,2117 @@
1
+ <!--suppress HtmlUnknownTarget, NpmUsedModulesInstalled, JSUnresolvedVariable -->
2
+ <template>
3
+ <div :id="templateId">
4
+ <!-- begin #page-wrapper -->
5
+ <div id="page-wrapper">
6
+ <a id="anchor-back-to-top"></a>
7
+ <CmdSidebar
8
+ :cmdHeadline="{headlineText: 'Site Settings', headlineLevel: 3, textAlign: 'center'}"
9
+ :openSidebar="openSidebar"
10
+ @toggle-sidebar="setOpenStatus"
11
+ >
12
+ <template #open>
13
+ <CmdBoxWrapper
14
+ :boxesPerRow="[1]"
15
+ :allowMultipleExpandedBoxes="false"
16
+ :allowUserToToggleOrientation="false"
17
+ :openBoxesByDefault="openBoxes"
18
+ :useGap="false"
19
+ >
20
+ <template v-slot="slotProps">
21
+ <CmdBox
22
+ :use-slots="['body']"
23
+ :collapsible="true"
24
+ :cmdHeadline="{headlineText: 'Template Settings', headlineLevel: 4, headlineIcon: {iconClass: 'icon-settings-template'}}"
25
+ :openCollapsedBox="slotProps.boxIsOpen(0)"
26
+ @toggleCollapse="slotProps.boxToggled(0, $event)"
27
+ >
28
+ <template v-slot:body>
29
+ <label for="select-template">
30
+ <span>Select template</span>
31
+ <select id="select-template" v-model="selectedTemplate">
32
+ <option value="blank">Blank</option>
33
+ <option value="business">Business</option>
34
+ <option value="casual">Casual</option>
35
+ <option value="dating">Dating</option>
36
+ <option value="influencer">Influencer</option>
37
+ </select>
38
+ </label>
39
+ </template>
40
+ </CmdBox>
41
+ <CmdBox
42
+ :use-slots="['body']"
43
+ :collapsible="true"
44
+ :cmdHeadline="{headlineText: 'Components', headlineLevel: 4, headlineIcon: {iconClass: 'icon-settings-component'}}"
45
+ :openCollapsedBox="slotProps.boxIsOpen(1)"
46
+ @toggleCollapse="slotProps.boxToggled(1, $event)"
47
+ >
48
+ <template v-slot:body>
49
+ <ul>
50
+ <li><a href="#section-address-data">Address Data</a></li>
51
+ <li><a href="#section-advanced-form-elements">Advanced Form Elements</a></li>
52
+ <li><a href="#section-bank-account-data">Bank Account Data</a></li>
53
+ <li><a href="#section-boxes">Boxes</a></li>
54
+ <li><a href="#section-breadcrumbs">Breadcrumbs</a></li>
55
+ <li><a href="#section-cookie-disclaimer">Cookie-Disclaimer</a></li>
56
+ <li><a href="#section-headlines">Headlines</a></li>
57
+ <li><a href="#section-fancybox">Fancybox</a></li>
58
+ </ul>
59
+ <ul>
60
+ <li><a href="#section-forms">Forms</a></li>
61
+ <li><a href="#section-google-maps">Google-Maps&trade;</a></li>
62
+ <li><a href="#section-headlines">Headlines</a></li>
63
+ <li><a href="#section-icons">Icons</a></li>
64
+ <li><a href="#section-image">Image</a></li>
65
+ <li><a href="#section-image-gallery">Image Gallery</a></li>
66
+ <li><a href="#section-image-zoom">Image-Zoom</a></li>
67
+ <li><a href="#section-list-of-links">List Of Links</a></li>
68
+ </ul>
69
+ <ul>
70
+ <li><a href="#section-login-form">Login Form</a></li>
71
+ <li><a href="#section-main-navigation">Main-Navigation</a></li>
72
+ <li><a href="#section-multistep-form-progress-bar">Multistepform-Progressbar</a></li>
73
+ <li><a href="#section-opening-hours">Opening Hours</a></li>
74
+ <li><a href="#section-pagination">Pagination</a></li>
75
+ <li><a href="#section-site-footer">Site Footer</a></li>
76
+ <li><a href="#section-site-header">Site Header</a></li>
77
+ <li><a href="#section-site-search">Site Search</a></li>
78
+ <li><a href="#section-slideshow">Slideshow</a></li>
79
+ </ul>
80
+ <ul>
81
+ <li><a href="#section-social-networks">Social Networks</a></li>
82
+ <li><a href="#section-switch-language">Switch Language</a></li>
83
+ <li><a href="#section-system-message">System-Message</a></li>
84
+ <li><a href="#section-tables">Tables</a></li>
85
+ <li><a href="#section-tabs">Tabs</a></li>
86
+ <li><a href="#section-text-image-block">Text Image Block</a></li>
87
+ <li><a href="#section-thumbnail-scroller">Thumbnail-Scroller</a></li>
88
+ <li><a href="#section-toggle-darkmode">ToggleDarkMode</a></li>
89
+ <li><a href="#section-tooltip">Tooltip</a></li>
90
+ <li><a href="#section-upload-form">Upload-Form</a></li>
91
+ </ul>
92
+ </template>
93
+ </CmdBox>
94
+ </template>
95
+ </CmdBoxWrapper>
96
+ <dl class="comand-versions">
97
+ <dt>Frontend-Framework Version:</dt>
98
+ <dd>{{ packageJson.dependencies['comand-frontend-framework'].replace("^", "") }}</dd>
99
+ <dt>Component-Library Version:</dt>
100
+ <dd>{{ packageJson.version }}</dd>
101
+ </dl>
102
+ </template>
103
+ <template #closed>
104
+ <div class="closed-sidebar">
105
+ <a href="#" class="button primary" title="Open Template Settings" @click.prevent="openBox(0)">
106
+ <span class="icon-settings-template"></span>
107
+ </a>
108
+ <a href="#" class="button primary" title="Open Template Settings"
109
+ @click.prevent="openBox(1)">
110
+ <span class="icon-settings-component"></span>
111
+ </a>
112
+ </div>
113
+ </template>
114
+ </CmdSidebar>
115
+ <!-- begin site-header --------------------------------------------------------------------------------------------------------------------------------------------------->
116
+ <CmdSiteHeader :sticky="true">
117
+ <template v-slot:top-header>
118
+ <!-- begin list-of-links --------------------------------------------------------------------------------------------------------------------------------------------------->
119
+ <CmdListOfLinks
120
+ :links="listOfLinksData"
121
+ orientation="horizontal"
122
+ align="right"
123
+ />
124
+ <!-- end list-of-links --------------------------------------------------------------------------------------------------------------------------------------------------->
125
+ </template>
126
+ <template v-slot:logo>
127
+ <!-- begin company-logo --------------------------------------------------------------------------------------------------------------------------------------------------->
128
+ <CmdCompanyLogo
129
+ :link="companyLogoData.link"
130
+ altText="CoManD Logo"
131
+ :pathDefaultLogo="companyLogoData.pathDefaultLogo"
132
+ :pathDarkmodeLogo="companyLogoData.pathDarkmodeLogo"
133
+ />
134
+ <!-- end company-logo --------------------------------------------------------------------------------------------------------------------------------------------------->
135
+ </template>
136
+ </CmdSiteHeader>
137
+ <!-- end site-header --------------------------------------------------------------------------------------------------------------------------------------------------->
138
+ <main>
139
+ <!-- begin address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
140
+ <a id="section-address-data"></a>
141
+ <CmdWidthLimitationWrapper>
142
+ <h2 class="headline-demopage">Address Data</h2>
143
+ <div class="flex-container">
144
+ <CmdAddressData
145
+ :addressData="addressData"
146
+ :linkGoogleMaps="false"
147
+ :cmdHeadline="{headlineText: 'With label texts and icons', headlineLevel: 3}"
148
+ />
149
+ <CmdAddressData
150
+ :addressData="addressData"
151
+ :linkGoogleMaps="false"
152
+ :show-label-texts="false"
153
+ :cmdHeadline="{headlineText: 'With label icons only', headlineLevel: 3}"
154
+ />
155
+ <CmdAddressData
156
+ :addressData="addressData"
157
+ :linkGoogleMaps="false"
158
+ :show-label-icons="false"
159
+ :cmdHeadline="{headlineText: 'With label texts', headlineLevel: 3}"
160
+ />
161
+ <CmdAddressData
162
+ :addressData="addressData"
163
+ :linkGoogleMaps="false"
164
+ :showLabels="false"
165
+ :cmdHeadline="{headlineText: 'Without labels', headlineLevel: 3}"
166
+ />
167
+ <CmdAddressData
168
+ :addressData="addressData"
169
+ :linkGoogleMaps="true"
170
+ :showIconsOnly="true"
171
+ :cmdHeadline="{headlineText: 'Linked icons only', headlineLevel: 3}"
172
+ />
173
+ </div>
174
+ </CmdWidthLimitationWrapper>
175
+ <!-- end address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
176
+
177
+ <!-- begin advanced form elements --------------------------------------------------------------------------------------------------------------------------------------------------->
178
+ <a id="section-advanced-form-elements"></a>
179
+ <CmdWidthLimitationWrapper>
180
+ <a id="anchor-advanced-form-elements"></a>
181
+ <h2 class="headline-demopage">Advanced Form Elements</h2>
182
+ <h3>Form elements status:</h3>
183
+ <div class="flex-container">
184
+ <ul class="list-status">
185
+ <li><a href="#" @click.prevent="setStatus('', false)"
186
+ :class="{'active' : validationStatus === '' && disabledStatus === false}"
187
+ id="status-default">Default</a></li>
188
+ <li class="error">
189
+ <a href="#" @click.prevent="setStatus('error', false)"
190
+ :class="{'active' : validationStatus === 'error'}" id="status-error">Error</a></li>
191
+ <li><a href="#" @click.prevent="setStatus('warning', false)"
192
+ :class="{'active' : validationStatus === 'warning'}" id="status-warning">Warning</a>
193
+ </li>
194
+ <li><a href="#" @click.prevent="setStatus('success', false)"
195
+ :class="{'active' : validationStatus === 'success'}" id="status-success">Success</a>
196
+ </li>
197
+ <li><a href="#" @click.prevent="setStatus('info', false)"
198
+ :class="{'active' : validationStatus === 'info'}" id="status-info">Info</a></li>
199
+ <li><a href="#" @click.prevent="setStatus('', true)"
200
+ :class="{'active' : disabledStatus === true}" id="status-disabled">Disabled</a></li>
201
+ </ul>
202
+ </div>
203
+
204
+ <!-- begin cmd-form-filters -->
205
+ <CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName"/>
206
+ <!-- end cmd-form-filters -->
207
+
208
+ <CmdForm :use-fieldset="false" id="advanced-form-elements" novalidate="novalidate">
209
+ <fieldset class="grid-container-create-columns">
210
+ <legend>Legend</legend>
211
+ <h2>Form Element-Component</h2>
212
+ <div class="flex-container">
213
+ <CmdFormElement labelText="Input (type text):"
214
+ element="input"
215
+ type="text"
216
+ :status="validationStatus"
217
+ :disabled="disabledStatus"
218
+ placeholder="Type in text"
219
+ tooltipText="This is a tooltip"
220
+ v-bind="{useCustomTooltip: false}"
221
+ />
222
+ <CmdFormElement labelText="Input for selectbox:"
223
+ element="select"
224
+ required="required"
225
+ :status="validationStatus"
226
+ :disabled="disabledStatus"
227
+ v-model="selectedOption"
228
+ :selectOptions="selectOptionsData"
229
+ />
230
+ <CmdFormElement labelText="Input for datalist:"
231
+ element="input"
232
+ type="text"
233
+ :status="validationStatus"
234
+ :disabled="disabledStatus"
235
+ placeholder="Type in option"
236
+ :datalist="datalist"
237
+ tooltipText="This is a tooltip"
238
+ />
239
+ </div>
240
+ <CmdFormElement labelText="Input (type search (without search-button)):"
241
+ element="input"
242
+ type="search"
243
+ :status="validationStatus"
244
+ :disabled="disabledStatus"
245
+ :showSearchButton="false"
246
+ placeholder="Search"
247
+ tooltipText="This is a tooltip"
248
+ v-bind="{useCustomTooltip: false}"
249
+ />
250
+ <CmdFormElement labelText="Input (type search (with search-button)):"
251
+ element="input"
252
+ type="search"
253
+ :status="validationStatus"
254
+ :disabled="disabledStatus"
255
+ placeholder="Search"
256
+ tooltipText="This is a tooltip"
257
+ v-bind="{useCustomTooltip: false}"
258
+ />
259
+ <h2>Inputfields in Columns</h2>
260
+ <div class="flex-container">
261
+ <CmdFormElement element="input"
262
+ type="text"
263
+ minlength="5"
264
+ id="inputfield1"
265
+ placeholder="This is placeholder text"
266
+ v-model="inputField1"
267
+ tooltipText="This is a tooltip!"
268
+ :status="validationStatus"
269
+ :disabled="disabledStatus">
270
+ <template v-slot:labeltext>
271
+ <span v-html="'Label with <a href=\'#\'>Link</a> given by slot'"></span>
272
+ </template>
273
+ </CmdFormElement>
274
+ <CmdFormElement element="input"
275
+ labelText="Label for inputfield (required, with tooltip):"
276
+ type="text"
277
+ required="required"
278
+ minlength="5"
279
+ id="inputfield-required"
280
+ placeholder="This is placeholder text"
281
+ v-model="inputFieldRequired"
282
+ tooltipText="This is a tooltip!"
283
+ :status="validationStatus"
284
+ :disabled="disabledStatus"
285
+ />
286
+ <CmdFormElement element="input"
287
+ labelText="Label for inputfield (with pattern):"
288
+ type="text"
289
+ id="inputfield-pattern"
290
+ placeholder="This is placeholder text"
291
+ pattern="/\d/"
292
+ v-model="inputFieldPattern"
293
+ tooltipText="This is a tooltip!"
294
+ :status="validationStatus"
295
+ :disabled="disabledStatus"
296
+ />
297
+ </div>
298
+ <!-- begin inputfield in two columns -->
299
+ <div class="flex-container">
300
+ <CmdFormElement labelText="Label for inputfield (with icon):"
301
+ element="input"
302
+ type="text"
303
+ id="inputfield-username"
304
+ fieldIconClass="icon-user-profile"
305
+ placeholder="Type in username"
306
+ tooltipText="This is a tooltip!"
307
+ maxlength="100"
308
+ v-model="inputUsername"
309
+ :status="validationStatus"
310
+ :disabled="disabledStatus"
311
+ />
312
+ <CmdFormElement element="input"
313
+ labelText="Label for password-field:"
314
+ type="password"
315
+ minlength="8"
316
+ maxlength="255"
317
+ id="inputfield-password"
318
+ fieldIconClass="icon-security-settings"
319
+ placeholder="Type in password"
320
+ tooltipText="This is a tooltip!"
321
+ :customRequirements="customRequirements"
322
+ v-model="inputPassword"
323
+ :status="validationStatus"
324
+ :disabled="disabledStatus"
325
+ />
326
+ </div>
327
+ <!-- end inputfield in two columns -->
328
+
329
+ <CmdFormElement element="input"
330
+ labelText="Label (inline) for inputfield (number):"
331
+ :displayLabelInline="true"
332
+ type="number"
333
+ id="inputfield-number"
334
+ required="required"
335
+ min="0"
336
+ max="9"
337
+ v-model="inputNumber"
338
+ :customRequirements="[customRequirements[2]]"
339
+ :status="validationStatus"
340
+ :disabled="disabledStatus"
341
+ />
342
+ <CmdFormElement element="input"
343
+ labelText="Label (inline) for inputfield (date):"
344
+ :displayLabelInline="true"
345
+ type="date"
346
+ id="inputfield-date"
347
+ v-model="inputDate"
348
+ :status="validationStatus"
349
+ :disabled="disabledStatus"
350
+ />
351
+ <CmdFormElement element="input"
352
+ labelText="Label (inline) for inputfield (search) without search-button:"
353
+ :displayLabelInline="true"
354
+ type="search"
355
+ id="inputfield-search-without-searchbutton"
356
+ placeholder="Keyword(s)"
357
+ v-model="inputSearch"
358
+ :showSearchButton="false"
359
+ :status="validationStatus"
360
+ :disabled="disabledStatus"
361
+ />
362
+ <CmdFormElement element="input"
363
+ labelText="Label (inline) for inputfield (search):"
364
+ :displayLabelInline="true"
365
+ type="search"
366
+ id="inputfield-search-with-searchbutton"
367
+ placeholder="Keyword(s)"
368
+ v-model="inputSearch"
369
+ :status="validationStatus"
370
+ :disabled="disabledStatus"
371
+ />
372
+ <CmdFormElement element="textarea"
373
+ labelText="Label for textarea:"
374
+ id="textarea"
375
+ minlength="1"
376
+ maxlength="100"
377
+ placeholder="Type in your message"
378
+ v-model="textarea"
379
+ :status="validationStatus"
380
+ :disabled="disabledStatus"
381
+ />
382
+ <hr/>
383
+ <h2>Fake Selects</h2>
384
+ <div class="flex-container">
385
+ <!-- type === default: normal selectbox (with optional icons) -->
386
+ <CmdFakeSelect labelText="Default selectbox:"
387
+ :status="validationStatus"
388
+ :disabled="disabledStatus"
389
+ :selectData="fakeSelectOptionsData"
390
+ v-model="fakeSelectDefault"
391
+ :required="true"
392
+ defaultOptionName="Select an option:"
393
+ title="Title for FakeSelect"
394
+ />
395
+ <CmdFakeSelect labelText="Default selectbox with icons:"
396
+ :status="validationStatus"
397
+ :disabled="disabledStatus"
398
+ :selectData="fakeSelectOptionsWithIconsData"
399
+ v-model="fakeSelectDefaultWithIcons"
400
+ defaultOptionName="Select an option:"
401
+ />
402
+ <!-- type === checkboxOptions: selectbox with checkboxes for each option -->
403
+ <CmdFakeSelect labelText="Selectbox with checkboxes:"
404
+ :status="validationStatus"
405
+ :disabled="disabledStatus"
406
+ :selectData="fakeSelectOptionsData"
407
+ v-model="fakeSelectCheckbox"
408
+ defaultOptionName="Options:"
409
+ :required="true"
410
+ id="selectbox-with-checkboxes"
411
+ type="checkboxOptions"
412
+ :useCustomTooltip="true"
413
+ />
414
+ <CmdFakeSelect labelText="Selectbox with filters:"
415
+ :status="validationStatus"
416
+ :disabled="disabledStatus"
417
+ :selectData="fakeSelectFilterOptionsData"
418
+ v-model="fakeSelectFilters"
419
+ defaultOptionName="Filters:"
420
+ id="selectbox-with-filters"
421
+ type="checkboxOptions"
422
+ :useCustomTooltip="true"
423
+ />
424
+ <CmdFakeSelect labelText="Selectbox with slot-content:"
425
+ :status="validationStatus"
426
+ :disabled="disabledStatus"
427
+ type="content"
428
+ defaultOptionName="HTML-Content:">
429
+ <ul class="custom-fake-select-content">
430
+ <li>
431
+ <div>
432
+ <h3>Headline</h3>
433
+ <p>Some content inside a paragraph</p>
434
+ </div>
435
+ <img
436
+ src="media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg"
437
+ alt="image"/>
438
+ </li>
439
+ </ul>
440
+ </CmdFakeSelect>
441
+ <CmdFakeSelect labelText="Selectbox with country flags:"
442
+ :status="validationStatus"
443
+ :disabled="disabledStatus"
444
+ :selectData="fakeSelectCountriesData"
445
+ v-model="selectedCountry"
446
+ defaultOptionName="Select country:"
447
+ type="country"
448
+ />
449
+ <CmdFakeSelect labelText="Selectbox with colors:"
450
+ :status="validationStatus"
451
+ :disabled="disabledStatus"
452
+ :selectData="fakeSelectColorsData"
453
+ v-model="selectedColor"
454
+ required="required"
455
+ type="color"
456
+ />
457
+ </div>
458
+
459
+ <hr/>
460
+
461
+ <!-- begin progress bar -->
462
+ <h2>Progress Bar [native]</h2>
463
+ <CmdProgressBar
464
+ labelText="Progress Bar (with optional output):"
465
+ id="progress-bar2"
466
+ max="100"
467
+ />
468
+ <!-- end progress bar -->
469
+
470
+ <!-- begin slider -->
471
+ <h2>Slider [native]</h2>
472
+ <div class="label" :class="validationStatus">
473
+ <span class="label-text">Single-Slider (with in- and output):</span>
474
+ <span class="flex-container no-flex">
475
+ <label for="range-value">
476
+ <span class="label-text">
477
+ <span>Range Value</span>
478
+ </span>
479
+ <input
480
+ type="number"
481
+ :class="validationStatus"
482
+ v-model="rangeValue"
483
+ :disabled="disabledStatus"
484
+ min="0"
485
+ max="100"
486
+ id="range-value"
487
+ />
488
+ </label>
489
+ <label for="range-slider">
490
+ <span class="label-text hidden">
491
+ <span>Range Value</span>
492
+ </span>
493
+ <input
494
+ type="range"
495
+ class="range-slider"
496
+ id="range-slider"
497
+ v-model="rangeValue"
498
+ :disabled="disabledStatus"
499
+ min="0"
500
+ max="100"
501
+ />
502
+ </label>
503
+ </span>
504
+ </div>
505
+ <!-- end slider -->
506
+
507
+ <hr/>
508
+
509
+ <!-- begin toggle-switch-radio with switch-label (colored) -->
510
+ <h2>Toggle-Switches</h2>
511
+ <h3>Switches without switch-labels</h3>
512
+ <CmdFormElement
513
+ element="input"
514
+ type="checkbox"
515
+ id="toggle-switch-checkbox"
516
+ v-model="switchButtonCheckboxToggleSwitch"
517
+ labelText="Labeltext for Toggle-Switch without Switch-Label"
518
+ :toggleSwitch="true"
519
+ :status="validationStatus"
520
+ :disabled="disabledStatus"
521
+ />
522
+ <CmdFormElement
523
+ element="input"
524
+ type="checkbox"
525
+ id="toggle-switch-checkbox-colored"
526
+ v-model="switchButtonCheckboxToggleSwitchColored"
527
+ labelText="Labeltext for colored Toggle-Switch without Switch-Label"
528
+ :toggleSwitch="true"
529
+ :colored="true"
530
+ :status="validationStatus"
531
+ :disabled="disabledStatus"
532
+ />
533
+ <h3>Switches with switch-labels</h3>
534
+ <CmdFormElement element="input"
535
+ type="checkbox"
536
+ id="toggle-switch-checkbox-switch-label"
537
+ v-model="switchButtonCheckbox"
538
+ labelText="Labeltext for Toggle-Switch with Switch-Label"
539
+ inputValue="checkbox1"
540
+ onLabel="Label on"
541
+ offLabel="Label off"
542
+ :toggleSwitch="true"
543
+ :status="validationStatus"
544
+ :disabled="disabledStatus"
545
+ />
546
+ <CmdFormElement element="input"
547
+ type="checkbox"
548
+ id="toggle-switch-checkbox-switch-label-colored"
549
+ v-model="switchButtonCheckbox"
550
+ inputValue="checkbox2"
551
+ labelText="Labeltext for Toggle-Switch (Checkbox, colored)"
552
+ onLabel="Label on"
553
+ offLabel="Label off"
554
+ :colored="true"
555
+ :toggleSwitch="true"
556
+ :status="validationStatus"
557
+ :disabled="disabledStatus"
558
+ />
559
+ <CmdFormElement element="input"
560
+ type="radio"
561
+ name="radiogroup"
562
+ id="toggle-switch-radio1"
563
+ v-model="switchButtonRadio"
564
+ onLabel="Label on"
565
+ offLabel="Label off"
566
+ :colored="true"
567
+ :toggleSwitch="true"
568
+ :status="validationStatus"
569
+ :disabled="disabledStatus"
570
+ inputValue="radio1"
571
+ labelText="Labeltext for Toggle-Switch (Radio, colored) #1"
572
+ />
573
+ <CmdFormElement element="input"
574
+ type="radio"
575
+ name="radiogroup"
576
+ id="toggle-switch-radio2"
577
+ v-model="switchButtonRadio"
578
+ onLabel="Label on"
579
+ offLabel="Label off"
580
+ :colored="true"
581
+ :toggleSwitch="true"
582
+ :status="validationStatus"
583
+ :disabled="disabledStatus"
584
+ inputValue="radio2"
585
+ labelText="Labeltext for Toggle-Switch (Radio, colored) #2"
586
+ />
587
+ <!-- end toggle-switch-radio with switch-label (colored) -->
588
+
589
+ <!-- begin checkboxes and radiobuttons -->
590
+ <CmdFormElement element="input"
591
+ labelText="Label for (required) checkbox with boolean"
592
+ type="checkbox"
593
+ required="required"
594
+ id="checkbox-required-with-boolean"
595
+ v-model="checkboxRequiredValue"
596
+ :status="validationStatus"
597
+ :disabled="disabledStatus"
598
+ />
599
+ <p>
600
+ checkbox (required) with boolean: {{ checkboxRequiredValue }}<br/>
601
+ checkbox with boolean: {{ checkboxValue }}<br/>
602
+ checkboxes with values: {{ checkboxValues }}
603
+ </p>
604
+
605
+ <h3>Toggle Dark-Mode</h3>
606
+ <a id="section-toggle-darkmode"></a>
607
+ <h4>Toggle Dark-Mode (with label, not styled)</h4>
608
+ <CmdToggleDarkMode :showLabel="true"/>
609
+ <h4>Toggle Dark-Mode (without label, styled)</h4>
610
+ <CmdToggleDarkMode :showLabel="false" :use-styled-layout="true"/>
611
+ <h4>Toggle Dark-Mode (styled as button)</h4>
612
+ <CmdToggleDarkMode :styledAsButton="true"/>
613
+
614
+ <h2>Checkboxes and Radiobuttons</h2>
615
+ <h3>Checkboxes [native]</h3>
616
+ <div class="label inline">
617
+ <span class="label-text">Label for native checkboxes:</span>
618
+ <div class="flex-container no-flex">
619
+ <CmdFormElement element="input"
620
+ labelText="Label for checkbox with boolean"
621
+ type="checkbox"
622
+ id="checkbox-with-boolean"
623
+ v-model="checkboxValue"
624
+ :status="validationStatus"
625
+ :disabled="disabledStatus"
626
+ />
627
+ <CmdFormElement element="input"
628
+ labelText="Label for checkbox with value"
629
+ v-model="checkboxValues"
630
+ inputValue="checkboxValue1"
631
+ type="checkbox"
632
+ id="checkbox-with-value-1"
633
+ :status="validationStatus"
634
+ :disabled="disabledStatus"
635
+ />
636
+ <CmdFormElement element="input"
637
+ labelText="Label for checkbox with value"
638
+ v-model="checkboxValues"
639
+ inputValue="checkboxValue2"
640
+ type="checkbox"
641
+ id="checkbox-with-value-2"
642
+ :status="validationStatus"
643
+ :disabled="disabledStatus"
644
+ />
645
+ <CmdFormElement element="input"
646
+ v-model="checkboxValues"
647
+ inputValue="checkboxValue3"
648
+ type="checkbox"
649
+ id="checkbox-with-value-3"
650
+ :status="validationStatus"
651
+ :disabled="disabledStatus">
652
+ <template v-slot:labeltext>
653
+ Labeltext with <a href="#">link</a> given by slot
654
+ </template>
655
+ </CmdFormElement>
656
+ </div>
657
+ </div>
658
+ <h3>Checkboxes (replaced)</h3>
659
+ <div class="label inline">
660
+ <span class="label-text">Label for Replaced Input-Type-Checkbox:</span>
661
+ <div class="flex-container no-flex">
662
+ <CmdFormElement element="input"
663
+ labelText="Label for replaced checkbox"
664
+ type="checkbox"
665
+ :replaceInputType="true"
666
+ id="inputfield9"
667
+ v-model="replacedCheckboxValue"
668
+ inputValue="checkboxValue1"
669
+ :status="validationStatus"
670
+ :disabled="disabledStatus"
671
+ />
672
+ <CmdFormElement element="input"
673
+ labelText="Label for replaced checkbox"
674
+ v-model="replacedCheckboxValue"
675
+ inputValue="checkboxValue2"
676
+ type="checkbox"
677
+ :replaceInputType="true"
678
+ id="inputfield10"
679
+ :status="validationStatus"
680
+ :disabled="disabledStatus"
681
+ />
682
+ </div>
683
+ </div>
684
+ <h3>Radiobuttons [native]</h3>
685
+ <div class="label inline">
686
+ <span class="label-text">Label for native radiobuttons:</span>
687
+ <div class="flex-container no-flex">
688
+ <CmdFormElement element="input"
689
+ labelText="Label for native radiobutton"
690
+ type="radio"
691
+ id="inputfield11"
692
+ name="radiogroup"
693
+ inputValue="radiobuttonValue1"
694
+ v-model="radiobuttonValue"
695
+ :status="validationStatus"
696
+ :disabled="disabledStatus"
697
+ />
698
+ <CmdFormElement element="input"
699
+ labelText="Label for native radiobutton"
700
+ type="radio"
701
+ id="inputfield12"
702
+ name="radiogroup"
703
+ inputValue="radiobuttonValue2"
704
+ v-model="radiobuttonValue"
705
+ :status="validationStatus"
706
+ :disabled="disabledStatus"
707
+ />
708
+ </div>
709
+ </div>
710
+ <p>
711
+ Radiobuttons with values: {{ radiobuttonValue }}
712
+ </p>
713
+ <h3>Radiobuttons (replaced)</h3>
714
+ <div class="label inline">
715
+ <span class="label-text">Label for Replaced Input-Type-Radio:</span>
716
+ <div class="flex-container no-flex">
717
+ <CmdFormElement element="input"
718
+ labelText="Label for replaced radiobutton"
719
+ type="radio"
720
+ :replaceInputType="true"
721
+ id="inputfield13"
722
+ name="replaced-radiogroup"
723
+ inputValue="radiobuttonValue1"
724
+ v-model="replacedRadiobuttonValue"
725
+ :status="validationStatus"
726
+ :disabled="disabledStatus"
727
+ />
728
+ <CmdFormElement element="input"
729
+ labelText="Label for replaced radiobutton"
730
+ type="radio"
731
+ :replaceInputType="true"
732
+ id="inputfield14"
733
+ name="replaced-radiogroup"
734
+ inputValue="radiobuttonValue2"
735
+ v-model="replacedRadiobuttonValue"
736
+ :status="validationStatus"
737
+ :disabled="disabledStatus"
738
+ />
739
+ </div>
740
+ </div>
741
+ <!-- end checkboxes and radiobuttons -->
742
+
743
+ <!-- begin input-groups -->
744
+ <h2>Input-Groups</h2>
745
+ <h3>Input Group with Radiobuttons [native]</h3>
746
+ <CmdInputGroup
747
+ labelText="Group label for radio-group given by slot:"
748
+ :useSlot="true"
749
+ :status="validationStatus"
750
+ :disabled="disabledStatus"
751
+ >
752
+ <CmdFormElement element="input"
753
+ labelText="Label for radiobutton"
754
+ type="radio"
755
+ id="input-group-radiobutton"
756
+ name="radiogroup2"
757
+ inputValue="radiobuttonValue1"
758
+ v-model="inputGroupRadio"
759
+ :status="validationStatus"
760
+ :disabled="disabledStatus"
761
+ />
762
+ <CmdFormElement element="input"
763
+ labelText="Label for radiobutton"
764
+ type="radio"
765
+ id="input-group-radiobutton"
766
+ name="radiogroup2"
767
+ inputValue="radiobuttonValue2"
768
+ v-model="inputGroupRadio"
769
+ :status="validationStatus"
770
+ :disabled="disabledStatus"
771
+ />
772
+ </CmdInputGroup>
773
+ <dl>
774
+ <dt>Selected value(s):</dt>
775
+ <dd>
776
+ <output>{{ inputGroupRadio }}</output>
777
+ </dd>
778
+ </dl>
779
+ <CmdInputGroup
780
+ labelText="Grouplabel for radio-group given by property:"
781
+ :required="true"
782
+ :inputElements="idForReplacedInputsInInputGroup('radio-group')"
783
+ inputTypes="radio"
784
+ v-model="inputGroupCheckbox"
785
+ :status="validationStatus"
786
+ :disabled="disabledStatus"
787
+ />
788
+ <dl>
789
+ <dt>Selected value:</dt>
790
+ <dd>
791
+ <output>{{ inputGroupCheckbox }}</output>
792
+ </dd>
793
+ </dl>
794
+ <h3>Input Group with Checkboxes/Radiobuttons (replaced)</h3>
795
+ <CmdInputGroup
796
+ labelText="Grouplabel for radio-group styled as replaced-input-type:"
797
+ :inputElements="idForReplacedInputsInInputGroup('replaced-radio-group')"
798
+ inputTypes="radio"
799
+ v-model="inputGroupValueReplaceInputTypeRadio"
800
+ :replaceInputType="true"
801
+ :status="validationStatus"
802
+ :disabled="disabledStatus"
803
+ />
804
+ <dl>
805
+ <dt>Selected value:</dt>
806
+ <dd>
807
+ <output>{{ inputGroupValueReplaceInputTypeRadio }}</output>
808
+ </dd>
809
+ </dl>
810
+ <CmdInputGroup
811
+ labelText="Grouplabel for checkbox-group styled as replaced-input-type:"
812
+ :inputElements="idForReplacedInputsInInputGroup('checkbox-group')"
813
+ inputTypes="checkbox"
814
+ v-model="inputGroupValueReplaceInputTypeCheckbox"
815
+ :replaceInputType="true"
816
+ :required="true"
817
+ :status="validationStatus"
818
+ :disabled="disabledStatus"
819
+ />
820
+ <dl>
821
+ <dt>Selected value(s):</dt>
822
+ <dd>
823
+ <output>{{ inputGroupValueReplaceInputTypeCheckbox }}</output>
824
+ </dd>
825
+ </dl>
826
+ <h3>Input Groups with Checkboxes/
827
+ Radiobuttons (toggle-switches)</h3>
828
+ <CmdInputGroup
829
+ labelText="Grouplabel for checkbox-group styled as toggle-switches:"
830
+ :inputElements="idForReplacedInputsInInputGroup('checkbox-group-toggle-switch')"
831
+ inputTypes="checkbox"
832
+ v-model="inputGroupValueToggleSwitchCheckbox"
833
+ :toggleSwitch="true"
834
+ required="required"
835
+ :status="validationStatus"
836
+ :disabled="disabledStatus"
837
+ />
838
+ <dl>
839
+ <dt>Selected value(s):</dt>
840
+ <dd>
841
+ <output>{{ inputGroupValueToggleSwitchCheckbox }}</output>
842
+ </dd>
843
+ </dl>
844
+ <CmdInputGroup
845
+ labelText="Grouplabel for radio-group styled as toggle-switches:"
846
+ :inputElements="idForReplacedInputsInInputGroup('radio-group-toggle-switch')"
847
+ inputTypes="radio"
848
+ v-model="inputGroupValueToggleSwitchRadio"
849
+ :toggleSwitch="true"
850
+ required="required"
851
+ :status="validationStatus"
852
+ :disabled="disabledStatus"
853
+ />
854
+ <dl>
855
+ <dt>Selected value(s):</dt>
856
+ <dd>
857
+ <output>{{ inputGroupValueToggleSwitchRadio }}</output>
858
+ </dd>
859
+ </dl>
860
+ <CmdInputGroup
861
+ labelText="Grouplabel for radio-group given by property styled as multiple-switch:"
862
+ :inputElements="idForReplacedInputsInInputGroup('radio-group-multiple-switch')"
863
+ inputTypes="radio"
864
+ :multipleSwitch="true"
865
+ v-model="inputGroupValue3"
866
+ :status="validationStatus"
867
+ :disabled="disabledStatus"
868
+ />
869
+ <dl>
870
+ <dt>Selected value(s):</dt>
871
+ <dd>
872
+ <output>{{ inputGroupValue3 }}</output>
873
+ </dd>
874
+ </dl>
875
+ <CmdInputGroup
876
+ labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally):"
877
+ :inputElements="inputGroupCheckboxes"
878
+ inputTypes="checkbox"
879
+ :multipleSwitch="true"
880
+ :required="true"
881
+ v-model="inputGroupValue4"
882
+ :stretchHorizontally="true"
883
+ :status="validationStatus"
884
+ :disabled="disabledStatus"
885
+ />
886
+ <dl>
887
+ <dt>Selected value(s):</dt>
888
+ <dd>
889
+ <output>{{ inputGroupValue4 }}</output>
890
+ </dd>
891
+ </dl>
892
+ </fieldset>
893
+ <!-- end fieldset -->
894
+ <div class="button-wrapper">
895
+ <small><sup>*</sup>values will not be submitted with the form!</small>
896
+ <CmdFormElement element="button"
897
+ :nativeButton="{text: 'Submit-button from component'}"
898
+ type="submit"
899
+ id="submitbutton"
900
+ name="submitbutton"
901
+ :disabled="disabledStatus"
902
+ />
903
+ <button type="submit" :disabled="disabledStatus">
904
+ <span class="icon-check"></span>
905
+ <span>Native submit-button</span>
906
+ </button>
907
+ </div>
908
+ </CmdForm>
909
+ </CmdWidthLimitationWrapper>
910
+ <!-- end advanced form elements ----------------------------------------------------------------------------------------------------------------------------------------------------->
911
+
912
+ <!-- begin back to top button ----------------------------------------------------------------------------------------------------------------------------------------------------->
913
+ <CmdBackToTopButton href="#anchor-back-to-top" scroll-container="#page-wrapper"/>
914
+ <!-- end back to top button ----------------------------------------------------------------------------------------------------------------------------------------------------->
915
+
916
+ <!-- begin bank account data ----------------------------------------------------------------------------------------------------------------------------------------------------->
917
+ <a id="section-bank-account-data"></a>
918
+ <CmdWidthLimitationWrapper>
919
+ <h2 class="headline-demopage">Bank Account Data</h2>
920
+ <CmdBankAccountData :account-data="bankAccountData"
921
+ :cmd-headline="{ headlineText: 'Bank Account', headlineLevel: 3}"
922
+ :allow-copy-by-click="true"/>
923
+ </CmdWidthLimitationWrapper>
924
+ <!-- end bank account data ------------------------------------------------------------------------------------------------------------------------------------------------------->
925
+
926
+ <!-- begin boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
927
+ <a id="section-boxes"></a>
928
+ <CmdWidthLimitationWrapper>
929
+ <h2 class="headline-demopage">Boxes</h2>
930
+ <CmdBoxWrapper :useFlexbox="true"
931
+ :cmdHeadline="{headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3}"
932
+ :use-gap="true">
933
+ <CmdBox v-for="index in 14"
934
+ :key="index"
935
+ textBody="Content"
936
+ :cmd-headline="{headlineText: 'Headline ' + index, headlineLevel: 4}"/>
937
+ </CmdBoxWrapper>
938
+ <CmdBoxWrapper :useFlexbox="true"
939
+ :use-gap="true"
940
+ :cmdHeadline="{headlineText: 'Different examples of content-boxes (in BoxWrapper)', headlineLevel: 3}">
941
+ <CmdBox
942
+ :stretch-vertically="false"
943
+ :cmdHeadline="{headlineText: 'Box with cutoff text', headlineLevel: 4}"
944
+ :useSlots="['body']"
945
+ :cutoff-text-lines="4"
946
+ >
947
+ <template v-slot:body>
948
+ This is a long text that is cutoff after a specific number of lines that can be defined
949
+ by
950
+ the property 'cutoffTextLines' and be toggled by a link below.
951
+ </template>
952
+ </CmdBox>
953
+ <CmdBox :useSlots="['header', 'body', 'footer']">
954
+ <template v-slot:header>
955
+ <h4>
956
+ Texts given by slots
957
+ </h4>
958
+ </template>
959
+ <template v-slot:body>
960
+ <p>
961
+ This content with paragraphs inside is placed inside the box-body.
962
+ </p>
963
+ <p>
964
+ <strong>Header, Content/Body and Footer of this box are given by slots.</strong>
965
+ </p>
966
+ </template>
967
+ <template v-slot:footer>
968
+ <p>
969
+ Footer content
970
+ </p>
971
+ </template>
972
+ </CmdBox>
973
+ <CmdBox :useSlots="['header', 'body']" :use-default-padding="false">
974
+ <template v-slot:header>
975
+ <h4>
976
+ Box with links
977
+ </h4>
978
+ </template>
979
+ <template v-slot:body>
980
+ <ul class="navigation">
981
+ <li><a href="#" @click.prevent="">Link name 1</a></li>
982
+ <li><a href="#" @click.prevent="">Link name 2</a></li>
983
+ <li><a href="#" @click.prevent="">Link name 3</a></li>
984
+ <li><a href="#" @click.prevent="">Link name 4</a></li>
985
+ </ul>
986
+ </template>
987
+ <!-- will not be displayed, because useSlots-property does not contain 'footer' in array -->
988
+ <template v-slot:footer>
989
+ <p>
990
+ footer content
991
+ </p>
992
+ </template>
993
+ </CmdBox>
994
+ <CmdBox
995
+ :use-default-padding="false"
996
+ :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}"
997
+ :image="{src: 'media/images/content-images/landscape-medium.jpg', altText: 'ALternative text'}"
998
+ textBody="This is some text given by property."
999
+ :collapsible="true"
1000
+ />
1001
+ <CmdBox
1002
+ :useSlots="['header', 'body']"
1003
+ :use-default-padding="false"
1004
+ :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}"
1005
+ :collapsible="true">
1006
+ <template v-slot:header>
1007
+ <h4>
1008
+ Collapsible box with image
1009
+ </h4>
1010
+ </template>
1011
+ <template v-slot:body>
1012
+ <img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
1013
+ </template>
1014
+ </CmdBox>
1015
+ <CmdBox :useSlots="['header', 'body', 'footer']" :use-default-padding="false">
1016
+ <template v-slot:header>
1017
+ <h4>
1018
+ Box with image and content
1019
+ </h4>
1020
+ </template>
1021
+ <template v-slot:body>
1022
+ <img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
1023
+ <div class="default-padding">
1024
+ <h4>Headline</h4>
1025
+ <p>This is some text information i.e a short-text for a news teaser.</p>
1026
+ </div>
1027
+ </template>
1028
+ <template v-slot:footer>
1029
+ <p>
1030
+ <a href="#">Read more&hellip;</a>
1031
+ </p>
1032
+ </template>
1033
+ </CmdBox>
1034
+ </CmdBoxWrapper>
1035
+ <h3>Product boxes</h3>
1036
+ <div class="grid-container-create-columns">
1037
+ <div class="grid-small-item" v-for="(product, index) in boxProductData" :key="index">
1038
+ <CmdBox boxType="product" :product="product" :cmdHeadline="{headlineLevel: 4}"/>
1039
+ </div>
1040
+ </div>
1041
+ <h3>User boxes</h3>
1042
+ <CmdBoxWrapper :boxesPerRow="[5, 2, 1]" :useRowViewAsDefault="true" :useGap="true">
1043
+ <template v-slot="slotProps">
1044
+ <CmdBox
1045
+ v-for="index in boxUserData.length"
1046
+ :key="index" boxType="user"
1047
+ :user="boxUserData[index - 1]"
1048
+ :cmdHeadline="{headlineLevel: 5}"
1049
+ :rowView="slotProps.rowView"
1050
+ />
1051
+ </template>
1052
+ </CmdBoxWrapper>
1053
+ <h3>Product boxes (collapsible)</h3>
1054
+ <CmdBoxWrapper :boxesPerRow="[5, 2, 1]"
1055
+ :useRowViewAsDefault="true"
1056
+ :allowMultipleExpandedBoxes="false"
1057
+ :useGap="true">
1058
+ <template v-slot="slotProps">
1059
+ <CmdBox
1060
+ v-for="index in boxProductData.length"
1061
+ :key="index"
1062
+ boxType="content"
1063
+ :collapsible="true"
1064
+ :useSlots="['body']"
1065
+ :cmdHeadline="{headlineText: 'Box ' + index, headlineLevel: 5}"
1066
+ :rowView="slotProps.rowView"
1067
+ :openCollapsedBox="slotProps.boxIsOpen(index - 1)"
1068
+ @toggleCollapse="slotProps.boxToggled(index - 1, $event)"
1069
+ >
1070
+ <template #body>{{slotProps.currentOpenBox}}<br />Content {{ index }}</template>
1071
+ </CmdBox>
1072
+ </template>
1073
+ </CmdBoxWrapper>
1074
+ </CmdWidthLimitationWrapper>
1075
+ <!-- end boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
1076
+
1077
+ <!-- begin breadcrumbs ------------------------------------------------------------------------------------------------------------------------------------------------------->
1078
+ <a id="section-breadcrumbs"></a>
1079
+ <CmdWidthLimitationWrapper inner-component="div">
1080
+ <h2 class="headline-demopage">Breadcrumbs</h2>
1081
+ <CmdBreadcrumbs :breadcrumbLinks="breadcrumbData" breadcrumbLabel="You are here:"/>
1082
+ </CmdWidthLimitationWrapper>
1083
+ <!-- end breadcrumbs ------------------------------------------------------------------------------------------------------------------------------------------------------->
1084
+
1085
+ <!-- begin cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1086
+ <a id="section-cookie-disclaimer"></a>
1087
+ <CmdWidthLimitationWrapper>
1088
+ <h2 class="headline-demopage">Cookie Disclaimer</h2>
1089
+ <a class="button" href="#" @click.prevent="fancyBoxCookieDisclaimer = true">
1090
+ <span>Open Cookie Disclaimer</span>
1091
+ </a>
1092
+ </CmdWidthLimitationWrapper>
1093
+ <!-- end cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1094
+
1095
+ <!-- begin headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
1096
+ <a id="section-headlines"></a>
1097
+ <CmdWidthLimitationWrapper>
1098
+ <h2 class="headline-demopage">Headlines</h2>
1099
+ <CmdHeadline :headlineIcon="{iconClass: 'icon-home'}" pre-headline-text="Pre-headline"
1100
+ headlineText="Headline level 1" :headlineLevel="1"/>
1101
+ <CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 2" :headlineLevel="2" />
1102
+ <CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 3" :headlineLevel="3"/>
1103
+ <CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 4" :headlineLevel="4"/>
1104
+ <CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 5" :headlineLevel="5"/>
1105
+ <CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 6" :headlineLevel="6"/>
1106
+ <CmdHeadline pre-headline-text="Pre-headline" headlineText="Headline level 1 (center)"
1107
+ text-align="center" :headlineLevel="1"/>
1108
+ <CmdHeadline pre-headline-text="Pre-headline" headlineText="Headline level 1 (right)"
1109
+ text-align="right"
1110
+ :headlineLevel="1"/>
1111
+ </CmdWidthLimitationWrapper>
1112
+ <!-- end headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
1113
+
1114
+ <!-- begin forms ------------------------------------------------------------------------------------------------------------------------------------------------------->
1115
+ <a id="section-forms"></a>
1116
+ <CmdWidthLimitationWrapper>
1117
+ <h2 class="headline-demopage">Forms</h2>
1118
+ <h3>Form elements given by data</h3>
1119
+ <CmdForm
1120
+ :useFieldset="true"
1121
+ :useSlot="false"
1122
+ textLegend="Legend"
1123
+ id="form-component"
1124
+ novalidate="novalidate"
1125
+ :formElements="formElementsData"
1126
+ @submit="doConsoleLog"
1127
+ />
1128
+ <h3>Form elements given by slot</h3>
1129
+ <CmdForm
1130
+ :use-fieldset="true"
1131
+ textLegend="Legend"
1132
+ id="form-component"
1133
+ novalidate="novalidate"
1134
+ @submit="doConsoleLog"
1135
+ >
1136
+ <CmdFormElement
1137
+ element="input"
1138
+ text="text"
1139
+ name="input-text"
1140
+ labelText="Text input"
1141
+ placeholder="Text input"
1142
+ />
1143
+ <CmdFormElement
1144
+ element="input"
1145
+ text="number"
1146
+ labelText="Number input"
1147
+ name="input-number"
1148
+ modelValue="1"
1149
+ />
1150
+ <CmdFormElement
1151
+ element="input"
1152
+ text="password"
1153
+ labelText="Password input"
1154
+ name="password-number"
1155
+ placeholder="Password input"
1156
+ />
1157
+ </CmdForm>
1158
+ </CmdWidthLimitationWrapper>
1159
+ <!-- end forms ------------------------------------------------------------------------------------------------------------------------------------------------------->
1160
+
1161
+ <!-- begin fancybox ------------------------------------------------------------------------------------------------------------------------------------------------------->
1162
+ <a id="section-fancybox"></a>
1163
+ <CmdWidthLimitationWrapper>
1164
+ <h2 class="headline-demopage">Fancybox</h2>
1165
+ <h3>FancyBox with text</h3>
1166
+ <a href="#" @click.prevent="showFancyBox('text','Some text', 'FancyBox with text')">Open FancyBox
1167
+ with
1168
+ text</a>
1169
+ <h3>FancyBox with large image given by url</h3>
1170
+ <a href="#"
1171
+ @click.prevent="showFancyBox('url', 'media/images/demo-images/large/landscape-01.jpg', 'FancyBox with large image given by url')"
1172
+ title="Open FancyBox with large image given by url"
1173
+ style="display: inline-flex;"
1174
+ >
1175
+ <img src="media/images/demo-images/small/landscape-01.jpg" alt="Alternative text"/>
1176
+ </a>
1177
+ <h3>FancyBox with large image given by property</h3>
1178
+ <a href="#"
1179
+ @click.prevent="showFancyBox('image', {large:'media/images/demo-images/large/landscape-02.jpg'}, 'FancyBox with large image given by property')"
1180
+ title="Open FancyBox with large image given by property"
1181
+ style="display: inline-flex;"
1182
+ >
1183
+ <img src="media/images/demo-images/small/landscape-02.jpg" alt="Alternative text"/>
1184
+ </a>
1185
+ <h3>FancyBox with image as object give by property</h3>
1186
+ <a href="#"
1187
+ @click.prevent="showFancyBox('image', {
1188
+ small: 'media/images/demo-images/medium/landscape-03.jpg',
1189
+ medium: 'media/images/demo-images/medium/landscape-03.jpg',
1190
+ large: 'media/images/demo-images/large/landscape-03.jpg'
1191
+ }, 'FancyBox with large image given by property')"
1192
+ title="Open FancyBox with large image given by property"
1193
+ style="display: inline-flex;"
1194
+ >
1195
+ <img src="media/images/demo-images/small/landscape-03.jpg" alt="Alternative text"/>
1196
+ </a>
1197
+
1198
+ </CmdWidthLimitationWrapper>
1199
+ <!-- end fancybox ------------------------------------------------------------------------------------------------------------------------------------------------------->
1200
+
1201
+ <!-- begin google-maps ------------------------------------------------------------------------------------------------------------------------------------------------------->
1202
+ <a id="section-google-maps"></a>
1203
+ <CmdWidthLimitationWrapper>
1204
+ <h2 class="headline-demopage">Google Maps&trade;</h2>
1205
+ <CmdGoogleMaps :address="addressData"/>
1206
+ </CmdWidthLimitationWrapper>
1207
+ <!-- end google-maps ------------------------------------------------------------------------------------------------------------------------------------------------------->
1208
+
1209
+ <!-- begin icons ------------------------------------------------------------------------------------------------------------------------------------------------------->
1210
+ <a id="section-icons"></a>
1211
+ <CmdWidthLimitationWrapper>
1212
+ <h2 class="headline-demopage">Icons</h2>
1213
+ <ul>
1214
+ <li><span>Icon from local iconfont</span>
1215
+ <CmdIcon iconClass="icon-home"/>
1216
+ </li>
1217
+ <li><span>Icon from iconify-api (icomoon-font)</span>
1218
+ <CmdIcon iconClass="icomoon-free:home"/>
1219
+ </li>
1220
+ <li><span>Icon from iconify-api (bootstrap-font)</span>
1221
+ <CmdIcon iconClass="bi:house-fill"/>
1222
+ </li>
1223
+ <li><span>Icon from iconify-api (material-design-font)</span>
1224
+ <CmdIcon iconClass="mdi:home"/>
1225
+ </li>
1226
+ <li><span>Icon from iconify-api (font-awesome-solid-font)</span>
1227
+ <CmdIcon iconClass="fa6-solid:house-chimney"/>
1228
+ </li>
1229
+ </ul>
1230
+ </CmdWidthLimitationWrapper>
1231
+ <!-- end icons ------------------------------------------------------------------------------------------------------------------------------------------------------->
1232
+
1233
+ <!-- begin images ------------------------------------------------------------------------------------------------------------------------------------------------------->
1234
+ <a id="section-image"></a>
1235
+ <CmdWidthLimitationWrapper>
1236
+ <h2 class="headline-demopage">Image</h2>
1237
+ <div class="flex-container">
1238
+ <CmdImage :image="imageData[0].image" :figcaption="imageData[0].figcaption"/>
1239
+ <CmdImage :image="imageData[1].image" :figcaption="imageData[1].figcaption"/>
1240
+ </div>
1241
+ </CmdWidthLimitationWrapper>
1242
+ <!-- end images ------------------------------------------------------------------------------------------------------------------------------------------------------->
1243
+
1244
+ <!-- begin image-gallery------------------------------------------------------------------------------------------------------------------------------------------------------->
1245
+ <a id="section-image-gallery"></a>
1246
+ <CmdWidthLimitationWrapper>
1247
+ <h2 class="headline-demopage">Image-Gallery</h2>
1248
+ <CmdImageGallery :images="imageGalleryData"/>
1249
+ </CmdWidthLimitationWrapper>
1250
+ <!-- end image-gallery ------------------------------------------------------------------------------------------------------------------------------------------------------->
1251
+
1252
+ <!-- begin image-zoom ------------------------------------------------------------------------------------------------------------------------------------------------------->
1253
+ <a id="section-image-zoom"></a>
1254
+ <CmdWidthLimitationWrapper>
1255
+ <h2 class="headline-demopage">Image-Zoom</h2>
1256
+ <CmdImageZoom
1257
+ :imageSmall="imageData[2].image"
1258
+ :imageLarge="imageData[3].image"
1259
+ />
1260
+ </CmdWidthLimitationWrapper>
1261
+ <!-- end image-zoom ------------------------------------------------------------------------------------------------------------------------------------------------------->
1262
+
1263
+ <!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
1264
+ <a id="section-list-of-links"></a>
1265
+ <CmdWidthLimitationWrapper>
1266
+ <h2 class="headline-demopage">List Of Links</h2>
1267
+ <h3>Vertical</h3>
1268
+ <CmdListOfLinks :links="listOfLinksData"/>
1269
+ <h3>Horizontal (aligned left, with headline)</h3>
1270
+ <CmdListOfLinks
1271
+ orientation="horizontal"
1272
+ align="left"
1273
+ :links="listOfLinksData"
1274
+ :cmdHeadline="{
1275
+ headlineText: 'Headline',
1276
+ headlineLevel: 5
1277
+ }"
1278
+ />
1279
+ <h3>Horizontal (aligned center)</h3>
1280
+ <CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData"/>
1281
+ <h3>Horizontal (aligned right)</h3>
1282
+ <CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData"
1283
+ @click="clickOnListOfLinks"/>
1284
+ <h3>Large icons</h3>
1285
+ <CmdListOfLinks orientation="horizontal" :links="listOfLinksData" :largeIcons="true"/>
1286
+ </CmdWidthLimitationWrapper>
1287
+ <!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
1288
+
1289
+ <!-- begin login-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
1290
+ <a id="section-login-form"></a>
1291
+ <CmdWidthLimitationWrapper>
1292
+ <h2 class="headline-demopage">Login Form</h2>
1293
+ <CmdForm :use-validation="true" :use-fieldset="false">
1294
+ <CmdLoginForm v-model="loginData" textLegendLoginForm="Please log in"/>
1295
+ </CmdForm>
1296
+ <p>LoginData: {{ loginData }}</p>
1297
+ </CmdWidthLimitationWrapper>
1298
+ <!-- end login-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
1299
+
1300
+ <!-- begin main-navigation ------------------------------------------------------------------------------------------------------------------------------------------------------->
1301
+ <a id="section-main-navigation"></a>
1302
+ <CmdWidthLimitationWrapper>
1303
+ <h2 class="headline-demopage">Main Navigation</h2>
1304
+ <CmdMainNavigation
1305
+ :stretchMainItems="false"
1306
+ :persistOnMobile="false"
1307
+ :navigationEntries="navigationData.navigationEntries"
1308
+ />
1309
+ </CmdWidthLimitationWrapper>
1310
+ <!-- end main-navigation ------------------------------------------------------------------------------------------------------------------------------------------------------->
1311
+
1312
+ <!-- begin multistep-form-progress-bar ------------------------------------------------------------------------------------------------------------------------------------------------------->
1313
+ <a id="section-multistep-form-progress-bar"></a>
1314
+ <CmdWidthLimitationWrapper>
1315
+ <h2 class="headline-demopage">Multistepform-Progressbar</h2>
1316
+ <h3>Steps with icons</h3>
1317
+ <CmdMultistepFormProgressBar
1318
+ :multisteps="multistepsData.withIcon"
1319
+ separatorIconClass="icon-single-arrow-right"
1320
+ @click="showPageMultistep = $event.index + 1"
1321
+ />
1322
+ <div>
1323
+ <p>Page {{ showPageMultistep }}</p>
1324
+ </div>
1325
+ <h3>Steps with number</h3>
1326
+ <CmdMultistepFormProgressBar
1327
+ :showStepNumber="true"
1328
+ :multisteps="multistepsData.withoutIcon"
1329
+ separatorIconClass="icon-single-arrow-right"
1330
+ @click="showPageMultistep = $event.index + 1"
1331
+ />
1332
+ <div>
1333
+ <p>Page {{ showPageMultistep }}</p>
1334
+ </div>
1335
+ </CmdWidthLimitationWrapper>
1336
+ <!-- end multistep-form-progress-bar ------------------------------------------------------------------------------------------------------------------------------------------------------->
1337
+
1338
+ <!-- begin newsletter-subscription ------------------------------------------------------------------------------------------------------------------------------------------------------->
1339
+ <a id="section-newsletter-subscription"></a>
1340
+ <CmdWidthLimitationWrapper>
1341
+ <h2 class="headline-demopage">Newsletter Subscription</h2>
1342
+ <CmdForm textLegend="Stay-up-to-date" :use-fieldset="false">
1343
+ <CmdNewsletterSubscription v-model="newsletter" buttonType="submit"
1344
+ @buttonClick="submitNewsletterRegistration"/>
1345
+ </CmdForm>
1346
+ </CmdWidthLimitationWrapper>
1347
+ <!-- end newsletter-subscription ------------------------------------------------------------------------------------------------------------------------------------------------------->
1348
+
1349
+ <!-- begin opening-hours ------------------------------------------------------------------------------------------------------------------------------------------------------->
1350
+ <a id="section-opening-hours"></a>
1351
+ <CmdWidthLimitationWrapper>
1352
+ <h2 class="headline-demopage">Opening Hours</h2>
1353
+ <CmdOpeningHours
1354
+ :openingHours="openingHoursData"
1355
+ :cmdHeadline="{headlineText: 'Opening hours', headlineLevel: 6}"
1356
+ textHolidaysClosed="Closed on holidays"
1357
+ textMiscInfo="Miscellaneous information"
1358
+ :checkInterval="0"
1359
+ />
1360
+ </CmdWidthLimitationWrapper>
1361
+ <!-- end opening-hours ------------------------------------------------------------------------------------------------------------------------------------------------------->
1362
+
1363
+ <!-- begin pagination ------------------------------------------------------------------------------------------------------------------------------------------------------->
1364
+ <a id="section-pagination"></a>
1365
+ <CmdWidthLimitationWrapper>
1366
+ <h2 class="headline-demopage">Pagination</h2>
1367
+ <h3>Link-view</h3>
1368
+ <div>
1369
+ <p>Page {{ showPagePager }}</p>
1370
+ </div>
1371
+ <CmdPagination
1372
+ :pages="4"
1373
+ :itemsPerPage="1"
1374
+ @click="showPagePager = $event"
1375
+ />
1376
+ <h3>Button-view</h3>
1377
+ <div>
1378
+ <p>Page {{ showPagePager }}</p>
1379
+ </div>
1380
+ <CmdPagination
1381
+ :pages="4"
1382
+ :itemsPerPage="1"
1383
+ link-type="button"
1384
+ @click="showPagePager = $event"
1385
+ />
1386
+ </CmdWidthLimitationWrapper>
1387
+ <!-- end pagination ------------------------------------------------------------------------------------------------------------------------------------------------------->
1388
+
1389
+ <!-- begin site-footer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1390
+ <a id="section-site-footer"></a>
1391
+ <CmdWidthLimitationWrapper>
1392
+ <h2 class="headline-demopage">Site Footer</h2>
1393
+ <CmdSiteFooter>
1394
+ Slotcontent
1395
+ </CmdSiteFooter>
1396
+ </CmdWidthLimitationWrapper>
1397
+ <!-- end site-footer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1398
+
1399
+ <!-- begin site-header ------------------------------------------------------------------------------------------------------------------------------------------------------->
1400
+ <a id="section-site-header"></a>
1401
+ <CmdWidthLimitationWrapper>
1402
+ <h2 class="headline-demopage">Site Header</h2>
1403
+ <h3>Header with navigation below logo</h3>
1404
+ <CmdSiteHeader
1405
+ :cmdMainNavigation="navigationData"
1406
+ :cmdCompanyLogo="companyLogoData"
1407
+ :sticky="false"
1408
+ />
1409
+ <h3>Header with navigation inline with logo</h3>
1410
+ <CmdSiteHeader
1411
+ :cmdMainNavigation="navigationData"
1412
+ :cmdCompanyLogo="companyLogoData"
1413
+ :sticky="false"
1414
+ :navigation-inline="true"
1415
+ />
1416
+ <h3>Header with top-header-links, logo and navigation given by slot</h3>
1417
+ <CmdSiteHeader :sticky="false">
1418
+ <template v-slot:topheader>
1419
+ <CmdListOfLinks
1420
+ :links="listOfLinksData"
1421
+ orientation="horizontal"
1422
+ align="right"
1423
+ />
1424
+ </template>
1425
+ <template v-slot:logo>
1426
+ <CmdCompanyLogo
1427
+ :link="companyLogoData.link"
1428
+ altText="CoManD Logo"
1429
+ :pathDefaultLogo="companyLogoData.pathDefaultLogo"
1430
+ :pathDarkmodeLogo="companyLogoData.pathDarkmodeLogo"
1431
+ />
1432
+ </template>
1433
+ <template v-slot:navigation>
1434
+ <CmdMainNavigation
1435
+ :stretchMainItems="false"
1436
+ :persistOnMobile="false"
1437
+ :navigationEntries="navigationData.navigationEntries"
1438
+ />
1439
+ </template>
1440
+ </CmdSiteHeader>
1441
+ </CmdWidthLimitationWrapper>
1442
+ <!-- end site-header ------------------------------------------------------------------------------------------------------------------------------------------------------->
1443
+
1444
+ <!-- begin site-search ------------------------------------------------------------------------------------------------------------------------------------------------------->
1445
+ <a id="section-site-search"></a>
1446
+ <CmdWidthLimitationWrapper>
1447
+ <h2 class="headline-demopage">Site Search</h2>
1448
+ <CmdSiteSearch
1449
+ v-model:modelValueInput1="siteSearchInput1"
1450
+ v-model:modelValueInput2="siteSearchInput2"
1451
+ v-model:modelValueRadius="radius"
1452
+ v-model:modelValueSearchFilters="filters"
1453
+ @search="siteSearchOutput"
1454
+ textLegend="Search"
1455
+ :cmdFakeSelect="siteSearchFilters"
1456
+ />
1457
+ </CmdWidthLimitationWrapper>
1458
+ <!-- end site-search ------------------------------------------------------------------------------------------------------------------------------------------------------->
1459
+
1460
+ <!-- begin slideshow ------------------------------------------------------------------------------------------------------------------------------------------------------->
1461
+ <a id="section-slideshow"></a>
1462
+ <CmdWidthLimitationWrapper>
1463
+ <h2 class="headline-demopage">Slideshow</h2>
1464
+ <CmdSlideshow
1465
+ :slideshow-items="slideshowData"
1466
+ :showCounter="true"
1467
+ :autoplay="true"
1468
+ />
1469
+ </CmdWidthLimitationWrapper>
1470
+ <!-- end slideshow ------------------------------------------------------------------------------------------------------------------------------------------------------->
1471
+
1472
+ <!-- begin social-networks ------------------------------------------------------------------------------------------------------------------------------------------------------->
1473
+ <a id="section-social-networks"></a>
1474
+ <CmdWidthLimitationWrapper>
1475
+ <h2 class="headline-demopage">Social Networks</h2>
1476
+ <h3>With user confirmation (buttons without gap)</h3>
1477
+ <CmdSocialNetworks
1478
+ :networks="socialNetworksData"
1479
+ :userMustAcceptDataPrivacy="true"
1480
+ :useGap="false"
1481
+ />
1482
+ <h3>Without user confirmation (buttons with gap, text aligned right)</h3>
1483
+ <CmdSocialNetworks
1484
+ :networks="socialNetworksData"
1485
+ :userMustAcceptDataPrivacy="false"
1486
+ />
1487
+ <h3>Without user confirmation (buttons with gap, text aligned left)</h3>
1488
+ <CmdSocialNetworks
1489
+ :networks="socialNetworksData"
1490
+ :userMustAcceptDataPrivacy="false"
1491
+ textAlign="left"
1492
+ />
1493
+ </CmdWidthLimitationWrapper>
1494
+ <!-- end social-networks ------------------------------------------------------------------------------------------------------------------------------------------------------->
1495
+
1496
+ <!-- begin switch-language ------------------------------------------------------------------------------------------------------------------------------------------------------->
1497
+ <a id="section-switch-language"></a>
1498
+ <CmdWidthLimitationWrapper>
1499
+ <h2 class="headline-demopage">Switch Language</h2>
1500
+ <CmdSwitchLanguage
1501
+ :languages="languagesData"
1502
+ @click="doSomething"
1503
+ />
1504
+ </CmdWidthLimitationWrapper>
1505
+ <!-- end switch-language ------------------------------------------------------------------------------------------------------------------------------------------------------->
1506
+
1507
+ <!-- begin system-message ------------------------------------------------------------------------------------------------------------------------------------------------------->
1508
+ <a id="section-system-message"></a>
1509
+ <CmdWidthLimitationWrapper>
1510
+ <h2 class="headline-demopage">System Message</h2>
1511
+ <CmdSystemMessage validationStatus="error"
1512
+ :fullWidth="true"
1513
+ systemMessage="This is an error message!"
1514
+ :iconMessage="{iconClass: 'icon-error-circle', show: true}">
1515
+ <ul>
1516
+ <li>Error #1</li>
1517
+ <li>Error #2</li>
1518
+ <li>Error #3</li>
1519
+ </ul>
1520
+ </CmdSystemMessage>
1521
+ <CmdSystemMessage validationStatus="warning"
1522
+ :fullWidth="true"
1523
+ systemMessage="This is a warning message!">
1524
+ <p>This is additional text!</p>
1525
+ </CmdSystemMessage>
1526
+ <CmdSystemMessage validationStatus="success"
1527
+ :fullWidth="true"
1528
+ systemMessage="This is a success message!"
1529
+ :iconMessage="{iconClass: 'icon-check-circle', show: true}">
1530
+ <p>This is additional text!</p>
1531
+ </CmdSystemMessage>
1532
+ <CmdSystemMessage validationStatus="info"
1533
+ :fullWidth="true"
1534
+ systemMessage="This is an info message!"
1535
+ :iconMessage="{iconClass: 'icon-info-circle', show: true}">
1536
+ <p>This is additional text!</p>
1537
+ </CmdSystemMessage>
1538
+ </CmdWidthLimitationWrapper>
1539
+ <!-- end system-message ------------------------------------------------------------------------------------------------------------------------------------------------------->
1540
+
1541
+ <!-- begin tables ------------------------------------------------------------------------------------------------------------------------------------------------------->
1542
+ <a id="section-tables"></a>
1543
+ <CmdWidthLimitationWrapper>
1544
+ <h2 class="headline-demopage">Tables</h2>
1545
+ <h3>Table as wide as its content (with caption)</h3>
1546
+ <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
1547
+ :table-data="tableDataSmall"/>
1548
+ <h3>Table as wide as its content (without caption)</h3>
1549
+ <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
1550
+ :caption="{ text: 'Hidden caption', show: false}" :table-data="tableDataSmall"/>
1551
+ <h3>Table as wide as possible</h3>
1552
+ <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
1553
+ :table-data="tableDataLarge"/>
1554
+ </CmdWidthLimitationWrapper>
1555
+ <!-- end tables ------------------------------------------------------------------------------------------------------------------------------------------------------->
1556
+
1557
+ <!-- begin tabs ------------------------------------------------------------------------------------------------------------------------------------------------------->
1558
+ <a id="section-tabs"></a>
1559
+ <CmdWidthLimitationWrapper>
1560
+ <h2 class="headline-demopage">Tabs</h2>
1561
+ <h3>Tabs with content from json-file</h3>
1562
+ <CmdTabs :stretchTabs="false" :tabs="tabsData"/>
1563
+ <h3>Tabs with HTML-content (given by slot))</h3>
1564
+ <CmdTabs :stretchTabs="true" :tabs="[{name: 'Tab 1'}, {name: 'Tab 2'}, {name: 'Tab 3'}]"
1565
+ :useSlot="true">
1566
+ <template v-slot:tab-content-0>
1567
+ <h4>Tab 1 headline</h4>
1568
+ <p>Content</p>
1569
+ </template>
1570
+ <template v-slot:tab-content-1>
1571
+ <h4>Tab 2</h4>
1572
+ <p>Content</p>
1573
+ <p>Content</p>
1574
+ </template>
1575
+ <template v-slot:tab-content-2>
1576
+ <h4>Tab 3</h4>
1577
+ <p>Content</p>
1578
+ <p>Content</p>
1579
+ <p>Content</p>
1580
+ </template>
1581
+ </CmdTabs>
1582
+ </CmdWidthLimitationWrapper>
1583
+ <!-- end tabs ------------------------------------------------------------------------------------------------------------------------------------------------------->
1584
+
1585
+ <!-- begin text-image-block ------------------------------------------------------------------------------------------------------------------------------------------------------->
1586
+ <a id="section-text-image-block"></a>
1587
+ <CmdWidthLimitationWrapper>
1588
+ <h2 class="headline-demopage">Text-Image-Block</h2>
1589
+ <div class="flex-container">
1590
+ <CmdTextImageBlock
1591
+ :cmdHeadline="{headlineText: 'Text-Image-Block with image', headlineLevel: 3}"
1592
+ :cmdImage='{
1593
+ "image": {
1594
+ "src": "/media/images/demo-images/large/landscape-01.jpg",
1595
+ "alt": "alternative text",
1596
+ "tooltip": "tooltip"
1597
+ },
1598
+ "figcaption": {
1599
+ "text": "figcaption",
1600
+ "position": "bottom",
1601
+ "textAlign": "center",
1602
+ "show": true
1603
+ }
1604
+ }'
1605
+ htmlContent="Text given as text only"
1606
+ />
1607
+ <CmdTextImageBlock
1608
+ :cmdHeadline="{headlineText: 'Headline', headlineLevel: 3}"
1609
+ htmlContent="<p>Text given as html-content</p>"
1610
+ />
1611
+ </div>
1612
+ </CmdWidthLimitationWrapper>
1613
+ <!-- end text-image-block ------------------------------------------------------------------------------------------------------------------------------------------------------->
1614
+
1615
+ <!-- begin thumbnail-scroller ------------------------------------------------------------------------------------------------------------------------------------------------------->
1616
+ <a id="section-thumbnail-scroller"></a>
1617
+ <CmdWidthLimitationWrapper>
1618
+ <h2 class="headline-demopage">Thumbnail-Scroller</h2>
1619
+ <div class="inline-size">
1620
+ <h3>Thumbnail-Scroller with images (opens fancybox)</h3>
1621
+
1622
+ <CmdThumbnailScroller
1623
+ :thumbnail-scroller-items="thumbnailScrollerImagesData"
1624
+ />
1625
+ <h3>Thumbnail-Scroller with text (opens url)</h3>
1626
+ <CmdThumbnailScroller
1627
+ :thumbnail-scroller-items="thumbnailScrollerTextData"
1628
+ contentType="text"
1629
+ executeOnClick="url"
1630
+ :fullWidth="true"
1631
+ />
1632
+ <h3>Thumbnail-Scroller with text (emits click-event)</h3>
1633
+ <CmdThumbnailScroller
1634
+ :thumbnail-scroller-items="thumbnailScrollerTextData"
1635
+ contentType="text"
1636
+ executeOnClick="emit"
1637
+ @click="onClick"
1638
+ :largeIcons="true"
1639
+ :fullWidth="true"
1640
+ />
1641
+ </div>
1642
+ </CmdWidthLimitationWrapper>
1643
+ <!-- end thumbnail-scroller ------------------------------------------------------------------------------------------------------------------------------------------------------->
1644
+
1645
+ <!-- begin tooltip ------------------------------------------------------------------------------------------------------------------------------------------------------->
1646
+ <a id="section-tooltip"></a>
1647
+ <CmdWidthLimitationWrapper>
1648
+ <h2 class="headline-demopage">Tooltip</h2>
1649
+ <p>
1650
+ <a href="#" @click.prevent id="show-on-hover">Show tooltip on hover!</a><br/>
1651
+ <a href="#" @click.prevent id="show-with-delay">Show tooltip on hover with delay!</a><br/>
1652
+ <a href="#" @click.prevent id="show-on-click" title="Native tooltip">Show tooltip on click!</a>
1653
+ </p>
1654
+ <CmdTooltip related-id="show-on-hover">
1655
+ Tooltip on hover
1656
+ </CmdTooltip>
1657
+ <CmdTooltip :delay-to-show-tooltip="2000" related-id="show-with-delay">
1658
+ Tooltip on hover with delay
1659
+ </CmdTooltip>
1660
+ <CmdTooltip related-id="show-on-click" :toggle-visibility-by-click="true">
1661
+ Tooltip on click
1662
+ </CmdTooltip>
1663
+ </CmdWidthLimitationWrapper>
1664
+ <!-- end tooltip ------------------------------------------------------------------------------------------------------------------------------------------------------->
1665
+
1666
+ <!-- begin upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
1667
+ <a id="section-upload-form"></a>
1668
+ <CmdWidthLimitationWrapper>
1669
+ <h2 class="headline-demopage">Upload-Form</h2>
1670
+ <h3>Simple mode</h3>
1671
+ <CmdUploadForm :enableDragAndDrop="true"
1672
+ :allowedFileExtensions="['jpg', 'png']"
1673
+ :allowMultipleFileUploads="true"
1674
+ :advancedMode="false"
1675
+ textLegend="Simple upload form"
1676
+ @error="showError"
1677
+ :uploadOptions="{url: 'http://localhost:8888'}"
1678
+ />
1679
+ <h3>Advanced mode</h3>
1680
+ <CmdUploadForm :cmdHeadlineFieldset="{headlineText: 'Select files to upload', headlineLevel: 3}"
1681
+ :enableDragAndDrop="true"
1682
+ :allowedFileExtensions="['jpg', 'png']"
1683
+ :allowMultipleFileUploads="true"
1684
+ textLegend="Advanced upload form"
1685
+ :uploadOptions="{url: 'http://localhost:8888'}"
1686
+ />
1687
+ </CmdWidthLimitationWrapper>
1688
+ <!-- end upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
1689
+ </main>
1690
+
1691
+ <!-- begin copyright-information ------------------------------------------------------------------------------------------------------------------------------------------------------->
1692
+ <CmdCopyrightInformation/>
1693
+ <!-- end copyright-information ------------------------------------------------------------------------------------------------------------------------------------------------------->
1694
+
1695
+ <!-- begin fancy-box ------------------------------------------------------------------------------------------------------------------------------------------------------->
1696
+ <CmdFancyBox
1697
+ :show="fancyBoxCookieDisclaimer"
1698
+ :fancyboxOptions="{}"
1699
+ :allowEscapeKey="false"
1700
+ :cmdHeadline="{show: true, headlineText: 'Cookie Disclaimer', headlineLevel: 2}"
1701
+ ariaLabelText="Cookie Disclaimer"
1702
+ >
1703
+ <!-- begin cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1704
+ <CmdCookieDisclaimer
1705
+ :cookieOptions="cookieDisclaimerData"
1706
+ buttonLabelAcceptAllCookies="Accept all cookies"
1707
+ buttonLabelAcceptCurrentSettings="Accept current settings"
1708
+ @closeCookieDisclaimer="closeCookieDisclaimer"
1709
+ v-model="acceptedCookies"
1710
+ :cmdHeadlineCookieDisclaimer="{ show: false }">
1711
+ <template #privacy-text>
1712
+ <p>
1713
+ <strong>
1714
+ By browsing this web site you accept the usage and saving of anonymous data!
1715
+ </strong>
1716
+ </p>
1717
+ </template>
1718
+ </CmdCookieDisclaimer>
1719
+ <!-- end cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1720
+ </CmdFancyBox>
1721
+ <!-- end fancy-box ------------------------------------------------------------------------------------------------------------------------------------------------------->
1722
+ </div><!-- end #page-wrapper -->
1723
+ </div>
1724
+ </template>
1725
+
1726
+ <script>
1727
+ // import used example data
1728
+ import addressData from '@/assets/data/address-data.json'
1729
+ import bankAccountData from '@/assets/data/bank-account-data.json'
1730
+ import boxUserData from '@/assets/data/box-user.json'
1731
+ import boxProductData from '@/assets/data/box-product.json'
1732
+ import breadcrumbData from '@/assets/data/breadcrumbs.json'
1733
+ import companyLogoData from '@/assets/data/company-logo.json'
1734
+ import cookieDisclaimerData from '@/assets/data/cookie-disclaimer.json'
1735
+ import fakeSelectColorsData from '@/assets/data/fake-select-colors.json'
1736
+ import fakeSelectCountriesData from '@/assets/data/fake-select-countries.json'
1737
+ import fakeSelectFilterOptionsData from '@/assets/data/fake-select-filter-options.json'
1738
+ import fakeSelectOptionsData from '@/assets/data/fake-select-options.json'
1739
+ import fakeSelectOptionsWithIconsData from '@/assets/data/fake-select-options-with-icons.json'
1740
+ import formElementsData from '@/assets/data/form-elements.json'
1741
+ import imageData from '@/assets/data/image.json'
1742
+ import imageGalleryData from '@/assets/data/image-gallery.json'
1743
+ import inputGroupRadiobuttonsData from '@/assets/data/input-group-radiobuttons.json'
1744
+ import inputGroupReplacedRadiobuttonsData from '@/assets/data/input-group-replaced-radiobuttons.json'
1745
+ import inputGroupToggleSwitchRadiobuttonsData from '@/assets/data/input-group-toggle-switch-radiobuttons.json'
1746
+ import listOfLinksData from '@/assets/data/list-of-links.json'
1747
+ import languagesData from '@/assets/data/switch-language.json'
1748
+ import multistepsData from '@/assets/data/multistep-form-progress-bar.json'
1749
+ import navigationData from '@/assets/data/main-navigation.json'
1750
+ import openingHoursData from '@/assets/data/opening-hours.json'
1751
+ import selectOptionsData from '@/assets/data/select-options.json'
1752
+ import socialNetworksData from '@/assets/data/social-networks-page-by-json.json'
1753
+ import slideshowData from '@/assets/data/slideshow.json'
1754
+ import tabsData from '@/assets/data/tabs.json'
1755
+ import tableDataSmall from '@/assets/data/table-small.json'
1756
+ import tableDataLarge from '@/assets/data/table-large.json'
1757
+ import thumbnailScrollerImagesData from '@/assets/data/thumbnail-scroller-images.json'
1758
+ import thumbnailScrollerTextData from '@/assets/data/thumbnail-scroller-text.json'
1759
+
1760
+ import packageJson from '../package.json'
1761
+
1762
+ import {openFancyBox} from "@/components/CmdFancyBox.vue"
1763
+
1764
+ // import external functions
1765
+ import * as functions from "@/mixins/FieldValidation.js"
1766
+
1767
+ import {localizedTime} from "./components/CmdOpeningHours.vue"
1768
+
1769
+ export default {
1770
+ name: "App",
1771
+ data() {
1772
+ return {
1773
+ selectedTemplate: "blank",
1774
+ acceptedCookies: ["google-maps"],
1775
+ showTooltip: false,
1776
+ disabledStatus: undefined,
1777
+ validationStatus: "",
1778
+ loginData: {
1779
+ username: "",
1780
+ password: ""
1781
+ },
1782
+ newsletter: {
1783
+ subscription: "",
1784
+ email: ""
1785
+ },
1786
+ inputFieldPattern: "",
1787
+ inputSearch: "",
1788
+ textarea: "",
1789
+ inputGroupRadio: "radiobuttonValue1",
1790
+ inputGroupCheckbox: "website",
1791
+ inputGroupValueReplaceInputTypeRadio: "phone",
1792
+ inputGroupValueReplaceInputTypeCheckbox: ["phone"],
1793
+ inputGroupValueToggleSwitchCheckbox: ["phone"],
1794
+ inputGroupValueToggleSwitchRadio: "phone",
1795
+ inputGroupValue3: "email",
1796
+ inputGroupValue4: [],
1797
+ inputGroupCheckboxes: [
1798
+ {
1799
+ labelText: "Website",
1800
+ id: "checkbox-id-1",
1801
+ name: "input-group-checkbox",
1802
+ iconClass: "icon-globe",
1803
+ value: "website"
1804
+ },
1805
+ {
1806
+ labelText: "E-Mail",
1807
+ id: "checkbox-id-2",
1808
+ name: "input-group-checkbox",
1809
+ iconClass: "icon-mail",
1810
+ value: "email"
1811
+ },
1812
+ {
1813
+ labelText: "Phone",
1814
+ id: "checkbox-id-3",
1815
+ name: "input-group-checkbox",
1816
+ iconClass: "icon-phone",
1817
+ value: "phone"
1818
+ }
1819
+ ],
1820
+ inputNumber: "",
1821
+ inputDate: "",
1822
+ accordionGroupOpen: false,
1823
+ showPageMultistep: 1,
1824
+ showPagePager: 1,
1825
+ selectedOption: "",
1826
+ selectedOptions: [],
1827
+ selectedCountry: "de",
1828
+ selectedColor: "",
1829
+ rangeValue: 50,
1830
+ siteSearchFilters: {
1831
+ show: true,
1832
+ selectData: fakeSelectFilterOptionsData,
1833
+ defaultOptionName: "Select filters:",
1834
+ labelText: "Filters:",
1835
+ type: "checkboxOptions"
1836
+ },
1837
+ siteSearchInput1: "Doctor",
1838
+ siteSearchInput2: "New York",
1839
+ radius: 5,
1840
+ filters: ["2"],
1841
+ switchButtonRadio: "radio1",
1842
+ switchButtonCheckboxToggleSwitch: false,
1843
+ switchButtonCheckboxToggleSwitchColored: false,
1844
+ switchButtonCheckbox: ["checkbox1"],
1845
+ switchButtonCheckboxColored: false,
1846
+ inputUsername: "",
1847
+ inputPassword: "",
1848
+ inputField1: "",
1849
+ inputFieldRequired: "",
1850
+ checkboxValue: true,
1851
+ checkboxRequiredValue: false,
1852
+ checkboxValues: ["checkboxValue1"],
1853
+ replacedCheckboxValue: "checkboxValue1",
1854
+ radiobuttonValue: "radiobuttonValue1",
1855
+ replacedRadiobuttonValue: "radiobuttonValue1",
1856
+ fancyBoxCookieDisclaimer: false,
1857
+ fakeSelectDefault: 3,
1858
+ fakeSelectDefaultWithIcons: 1,
1859
+ fakeSelectCheckbox: [1],
1860
+ fakeSelectFilters: [],
1861
+ datalist: {
1862
+ id: "datalist-id",
1863
+ options: [
1864
+ "Option 1",
1865
+ "Option 2",
1866
+ "Option 3"
1867
+ ]
1868
+ },
1869
+ customRequirements: [
1870
+ functions.validateCharacters(),
1871
+ functions.validateNumbers(),
1872
+ functions.validateNumbersOnly(),
1873
+ functions.validateSpecialCharacters(),
1874
+ functions.validateCapitalLetters()
1875
+ ],
1876
+ openSidebar: true,
1877
+ openBoxes: [0],
1878
+
1879
+ // assign data from json files to data-properties
1880
+ addressData,
1881
+ bankAccountData,
1882
+ boxProductData,
1883
+ boxUserData,
1884
+ breadcrumbData,
1885
+ companyLogoData,
1886
+ cookieDisclaimerData,
1887
+ fakeSelectColorsData,
1888
+ fakeSelectCountriesData,
1889
+ fakeSelectFilterOptionsData,
1890
+ fakeSelectOptionsData,
1891
+ fakeSelectOptionsWithIconsData,
1892
+ formElementsData,
1893
+ listOfLinksData,
1894
+ imageData,
1895
+ imageGalleryData,
1896
+ inputGroupReplacedRadiobuttonsData,
1897
+ inputGroupToggleSwitchRadiobuttonsData,
1898
+ languagesData,
1899
+ multistepsData,
1900
+ navigationData,
1901
+ openingHoursData,
1902
+ selectOptionsData,
1903
+ socialNetworksData,
1904
+ slideshowData,
1905
+ tableDataSmall,
1906
+ tableDataLarge,
1907
+ tabsData,
1908
+ thumbnailScrollerImagesData,
1909
+ thumbnailScrollerTextData,
1910
+ packageJson
1911
+ }
1912
+ },
1913
+ computed: {
1914
+ templateId() {
1915
+ return "template-" + this.selectedTemplate
1916
+ }
1917
+ },
1918
+ methods: {
1919
+ setOpenStatus(event) {
1920
+ this.openSidebar = event
1921
+ },
1922
+ openBox(boxIndex) {
1923
+ this.openSidebar = true
1924
+ this.openBoxes = [boxIndex]
1925
+ },
1926
+ navigationDataRight() {
1927
+ setTimeout(() => {
1928
+ let navigationData = {}
1929
+ navigationData = [...this.navigationData.navigationEntries]
1930
+ navigationData.offcanvasPosition = "right"
1931
+ return navigationData
1932
+ }, 1000);
1933
+ },
1934
+ clickOnListOfLinks(event) {
1935
+ event.originalEvent.preventDefault()
1936
+ console.log(event)
1937
+ },
1938
+ localizedTime(language) {
1939
+ return (h, m) => (localizedTime(language))(h, m).toLowerCase()
1940
+ },
1941
+ idForReplacedInputsInInputGroup(prefix) {
1942
+ return inputGroupRadiobuttonsData.map(item => ({...item, id: prefix + item.id}))
1943
+ },
1944
+ closeCookieDisclaimer(event) {
1945
+ this.fancyBoxCookieDisclaimer = false
1946
+ alert(event.join(", "))
1947
+ },
1948
+ setStatus(validationStatus, disabledStatus) {
1949
+ this.validationStatus = validationStatus
1950
+ this.disabledStatus = disabledStatus
1951
+ },
1952
+ onClick(event) {
1953
+ alert(event)
1954
+ },
1955
+ siteSearchOutput(event) {
1956
+ alert(JSON.stringify(event))
1957
+ },
1958
+ showError() {
1959
+ alert("Error")
1960
+ },
1961
+ showFancyBox(type, content, ariaLabelText) {
1962
+ if (type === "text") {
1963
+ openFancyBox({
1964
+ content: content,
1965
+ cmdHeadline: {
1966
+ show: true,
1967
+ headlineText: "Fancybox with text", headlineLevel: 3
1968
+ },
1969
+ ariaLabelText: ariaLabelText
1970
+ })
1971
+ } else if (type === "url") {
1972
+ openFancyBox({
1973
+ url: content,
1974
+ cmdHeadline: {
1975
+ show: true,
1976
+ headlineText: "Fancybox with image given by url", headlineLevel: 3
1977
+ },
1978
+ ariaLabelText: ariaLabelText
1979
+ })
1980
+ } else if (type === "image") {
1981
+ openFancyBox({
1982
+ cmdHeadline: {
1983
+ show: true,
1984
+ headlineText: "Fancybox with image given by property",
1985
+ headlineLevel: 3
1986
+ },
1987
+ cmdImage: {
1988
+ image: {
1989
+ src: {
1990
+ small: content.small,
1991
+ medium: content.medium,
1992
+ large: content.large
1993
+ },
1994
+ alt: "Alternative text",
1995
+ tooltip: "This is a tooltip"
1996
+ },
1997
+ figcaption: {
1998
+ show: true,
1999
+ text: "figcaption"
2000
+ }
2001
+ },
2002
+ ariaLabelText: ariaLabelText
2003
+ })
2004
+ }
2005
+ },
2006
+ getOptionName(option) {
2007
+ for (let i = 0; i < this.fakeSelectFilterOptionsData.length; i++) {
2008
+ if (option === this.fakeSelectFilterOptionsData[i].value) {
2009
+ return this.fakeSelectFilterOptionsData[i].text
2010
+ }
2011
+ }
2012
+ return null
2013
+ },
2014
+ submitNewsletterRegistration(event) {
2015
+ alert(event.subscription + " " + event.email)
2016
+ },
2017
+ doSomething(event) {
2018
+ event.preventDefault()
2019
+ alert("Language changed!")
2020
+ },
2021
+ executeSearch() {
2022
+ return Math.floor(Math.random() * 100)
2023
+ },
2024
+ doConsoleLog(event) {
2025
+ event.originalEvent.preventDefault()
2026
+ console.log("event: ", event)
2027
+ },
2028
+ toggleAllAccordions() {
2029
+ if (this.accordionGroupOpen) {
2030
+ this.$refs.accordionGroup1.closeAll()
2031
+ } else {
2032
+ this.$refs.accordionGroup1.openAll()
2033
+ }
2034
+ this.accordionGroupOpen = !this.accordionGroupOpen
2035
+ },
2036
+ switchButtonChange() {
2037
+ alert("Changed")
2038
+ }
2039
+ },
2040
+ watch: {
2041
+ selectedTemplate() {
2042
+ let linkTag = document.querySelector('link')
2043
+
2044
+ if (linkTag) {
2045
+ linkTag.parentNode.removeChild(linkTag)
2046
+ }
2047
+
2048
+ if (this.selectedTemplate !== "blank") {
2049
+ let newLink = document.createElement('link');
2050
+ newLink.rel = 'stylesheet';
2051
+ newLink.href = 'https://cdn.jsdelivr.net/npm/comand-frontend-framework/dist/templates/' + this.selectedTemplate + '.css';
2052
+
2053
+ document.head.appendChild(newLink);
2054
+ }
2055
+ }
2056
+ }
2057
+ }
2058
+ </script>
2059
+
2060
+ <style lang="scss">
2061
+ .list-status {
2062
+ .active {
2063
+ color: var(--text-color);
2064
+ text-decoration: none;
2065
+ background: none;
2066
+ }
2067
+ }
2068
+
2069
+ main .cmd-width-limitation-wrapper:not(:last-of-type) {
2070
+ border-bottom: var(--default-border);
2071
+ border-style: dashed;
2072
+ }
2073
+
2074
+ .cmd-sidebar {
2075
+ position: fixed;
2076
+ top: 0;
2077
+ left: 0;
2078
+ z-index: 2000;
2079
+ max-width: 30rem;
2080
+ height: 100vh;
2081
+ margin: 0;
2082
+ padding: 0;
2083
+ gap: 0;
2084
+ border: 0;
2085
+ border-right-width: 0;
2086
+ border-right-style: none;
2087
+ border-right-color: currentcolor;
2088
+ border-right: var(--default-border);
2089
+
2090
+ .box {
2091
+ border-right: 0;
2092
+
2093
+ &:not(:last-child) {
2094
+ border-bottom: 0;
2095
+ }
2096
+ }
2097
+
2098
+ .open-slot-wrapper {
2099
+ display: flex;
2100
+ flex-direction: column;
2101
+ justify-content: space-between;
2102
+ height: 100%;
2103
+
2104
+ .comand-versions {
2105
+ padding: var(--default-padding);
2106
+ margin: 0;
2107
+ }
2108
+ }
2109
+
2110
+ .closed-sidebar {
2111
+ display: flex;
2112
+ flex-direction: column;
2113
+ gap: var(--default-gap);
2114
+ padding: var(--default-padding);
2115
+ }
2116
+ }
2117
+ </style>