comand-component-library 4.0.1 → 4.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/README.md +32 -32
  2. package/dist/comand-component-library.js +3227 -1413
  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 +14 -10
  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 +2 -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>