comand-component-library 3.1.90 → 3.1.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.90",
+  "version": "3.1.92",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -21,6 +21,7 @@
     "comand-frontend-framework": "^3.2.65",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",
+    "sass": "^1.54.9",
     "vue": "^3.2.31",
     "vue-router": "^4.0.12",
     "vuex": "^4.0.2"
@@ -39,7 +40,6 @@
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^7.20.0",
     "gulp": "^4.0.2",
-    "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2",
     "typescript": "~3.9.3",
     "vue-jest": "^5.0.0-0"

package/src/App.vue

@@ -2,24 +2,31 @@
 <template>
     <div id="page-wrapper">
         <a id="anchor-back-to-top"></a>
+        <!-- begin site-header --------------------------------------------------------------------------------------------------------------------------------------------------->
         <CmdSiteHeader :cmdMainNavigation="navigationData" :sticky="true">
             <template v-slot:top-header>
+                <!-- begin list-of-links --------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdListOfLinks
                     :links="listOfLinksData"
                     orientation="horizontal"
                     align="right"
                 />
+                <!-- end list-of-links --------------------------------------------------------------------------------------------------------------------------------------------------->
             </template>
             <template v-slot:logo>
+                <!-- begin company-logo --------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdCompanyLogo
                     :link="companyLogoData.link"
                     altText="CoManD Logo"
                     :pathDefaultLogo="require('@/assets/images/logo.svg')"
                     :pathDarkmodeLogo="require('@/assets/images/logo-darkmode.svg')"
                 />
+                <!-- end company-logo --------------------------------------------------------------------------------------------------------------------------------------------------->
             </template>
         </CmdSiteHeader>
+        <!-- end site-header --------------------------------------------------------------------------------------------------------------------------------------------------->
         <main>
+            <!-- begin width-limitation-wrapper (with table of contents) --------------------------------------------------------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
                 <div class="flex-container">
                     <ul>
@@ -29,26 +36,27 @@
                         <li><a href="#section-boxes">Boxes</a></li>
                         <li><a href="#section-breadcrumbs">Breadcrumbs</a></li>
                         <li><a href="#section-cookie-disclaimer">Cookie-Disclaimer</a></li>
+                        <li><a href="#section-custom-headline">Custom Headline</a></li>
                     </ul>
                     <ul>
-                        <li><a href="#section-custom-headline">Custom Headline</a></li>
                         <li><a href="#section-fancybox">Fancybox</a></li>
                         <li><a href="#section-google-maps-integration">Google-Maps&trade;-Integration</a></li>
                         <li><a href="#section-image-gallery">Image Gallery</a></li>
                         <li><a href="#section-image-zoom">Image-Zoom</a></li>
                         <li><a href="#section-login-form">Login Form</a></li>
-                    </ul>
-                    <ul>
                         <li><a href="#section-main-navigation">Main-Navigation</a></li>
                         <li><a href="#section-multistep-form-progress-bar">Multistepform-Progressbar</a></li>
+                    </ul>
+                    <ul>
                         <li><a href="#section-pager">Pager</a></li>
                         <li><a href="#section-share-buttons">Share Buttons</a></li>
+                        <li><a href="#section-site-search">Site Search</a></li>
                         <li><a href="#section-slideshow">Slideshow</a></li>
                         <li><a href="#section-system-message">System-Message</a></li>
-                    </ul>
-                    <ul>
                         <li><a href="#section-tables">Tables</a></li>
                         <li><a href="#section-tabs">Tabs</a></li>
+                    </ul>
+                    <ul>
                         <li><a href="#section-thumbnail-scroller">Thumbnail-Scroller</a></li>
                         <li><a href="#section-toggle-darkmode">ToggleDarkMode</a></li>
                         <li><a href="#section-tooltip">Tooltip</a></li>
@@ -57,6 +65,8 @@
                 </div>
                 <hr/>
             </CmdWidthLimitationWrapper>
+            <!-- end width-limitation-wrapper (with table of contents) --------------------------------------------------------------------------------------------------------------------------------------------------->
+
             <!-- begin advanced form elements --------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-advanced-form-elements"></a>
             <CmdWidthLimitationWrapper>
@@ -637,7 +647,7 @@
                         <CmdInputGroup
                             labelText="Grouplabel for radio-group given by property:"
                             :required="true"
-                            :inputElements="inputGroupRadiobuttonsData"
+                            :inputElements="idForReplacedInputsInInputGroup('radio-group')"
                             inputTypes="radio"
                             v-model="inputGroupCheckbox"
                             :status="validationStatus"
@@ -652,7 +662,7 @@
                         <h3>Input Group with Checkboxes/Radiobuttons (replaced)</h3>
                         <CmdInputGroup
                             labelText="Grouplabel for radio-group styled as replaced-input-type:"
-                            :inputElements="inputGroupReplacedRadiobuttonsData"
+                            :inputElements="idForReplacedInputsInInputGroup('replaced-radio-group')"
                             inputTypes="radio"
                             v-model="inputGroupValueReplaceInputTypeRadio"
                             :replaceInputType="true"
@@ -667,7 +677,7 @@
                         </dl>
                         <CmdInputGroup
                             labelText="Grouplabel for checkbox-group styled as replaced-input-type:"
-                            :inputElements="inputGroupReplacedRadiobuttonsData"
+                            :inputElements="idForReplacedInputsInInputGroup('checkbox-group')"
                             inputTypes="checkbox"
                             v-model="inputGroupValueReplaceInputTypeCheckbox"
                             :replaceInputType="true"
@@ -685,7 +695,7 @@
                             Radiobuttons (toggle-switches)</h3>
                         <CmdInputGroup
                             labelText="Grouplabel for checkbox-group styled as toggle-switches:"
-                            :inputElements="inputGroupRadiobuttonsData"
+                            :inputElements="idForReplacedInputsInInputGroup('checkbox-group-toggle-switch')"
                             inputTypes="checkbox"
                             v-model="inputGroupValueToggleSwitchCheckbox"
                             :toggleSwitch="true"
@@ -701,7 +711,7 @@
                         </dl>
                         <CmdInputGroup
                             labelText="Grouplabel for radio-group styled as toggle-switches:"
-                            :inputElements="inputGroupToggleSwitchRadiobuttonsData"
+                            :inputElements="idForReplacedInputsInInputGroup('radio-group-toggle-switch')"
                             inputTypes="radio"
                             v-model="inputGroupValueToggleSwitchRadio"
                             :toggleSwitch="true"
@@ -717,7 +727,7 @@
                         </dl>
                         <CmdInputGroup
                             labelText="Grouplabel for radio-group given by property styled as multiple-switch:"
-                            :inputElements="inputGroupRadiobuttonsData.map(item => ({...item, id: item.id + '-multi', name: item.name + '-multi'}))"
+                            :inputElements="idForReplacedInputsInInputGroup('radio-group-multiple-switch')"
                             inputTypes="radio"
                             :multipleSwitch="true"
                             v-model="inputGroupValue3"
@@ -774,7 +784,7 @@
             <a id="section-bank-account-data"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Bank Account Data</h2>
-                <CmdBankAccountData :account-data="bankAccountData" :cmd-custom-headline="{ headlineText: 'Bank Account', headlineLevel: 3}" :allow-copy-by-click="true"/>
+                <CmdBankAccountData :account-data="bankAccountData" :cmd-headline="{ headlineText: 'Bank Account', headlineLevel: 3}" :allow-copy-by-click="true"/>
             </CmdWidthLimitationWrapper>
             <!-- end bank account data ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
@@ -831,7 +841,7 @@
                         </CmdBox>
                     </div>
                     <div class="grid-small-item">
-                        <CmdBox :useSlots="['header', 'body']" :collapsible="true" :stretchVertically="false">
+                        <CmdBox :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}" :collapsible="true" :stretchVertically="false">
                             <template v-slot:header>
                                 <h3>
                                     Collapsible box with image
@@ -876,25 +886,6 @@
                         <CmdBox boxType="user" :user="user" :cmdHeadline="{headlineLevel: 4}"/>
                     </div>
                 </div>
-                <h3>Box Site Search</h3>
-                <CmdBoxSiteSearch
-                    v-model:modelValueInput1="siteSearchInput1"
-                    v-model:modelValueInput2="siteSearchInput2"
-                    v-model:modelValueRadius="radius"
-                    v-model:modelValueSearchFilters="filters"
-                    @search="siteSearchOutput"
-                    textLegend="Search"
-                    :cmdFakeSelect="siteSearchFilters"/>
-                <dl>
-                    <dt>siteSearchInput1:</dt>
-                    <dd>{{ siteSearchInput1 }}</dd>
-                    <dt>siteSearchInput2:</dt>
-                    <dd>{{ siteSearchInput2 }}</dd>
-                    <dt>Radius:</dt>
-                    <dd>{{ radius }}</dd>
-                    <dt>Filters:</dt>
-                    <dd>{{ filters }}</dd>
-                </dl>
             </CmdWidthLimitationWrapper>
             <!-- end boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
@@ -964,7 +955,9 @@
             <a id="section-login-form"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Login Form</h2>
-                <CmdLoginForm v-model="loginData" v-focus/>
+                <CmdForm :use-validation="true" :use-fieldset="false">
+                    <CmdLoginForm v-model="loginData" textLegendLoginForm="Please log in" />
+                </CmdForm>
                 <p>LoginData: {{ loginData }}</p>
             </CmdWidthLimitationWrapper>
 
@@ -981,8 +974,9 @@
                 <h3>Horizontal (aligned right)</h3>
                 <CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData"/>
             </CmdWidthLimitationWrapper>
-            <!-- end list-of-links  ------------------------------------------------------------------------------------------------------------------------------------------------------->
+            <!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+            <!-- begin main-navigation ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-main-navigation"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Main Navigation</h2>
@@ -991,7 +985,9 @@
                                    :navigationEntries="navigationData"
                 />
             </CmdWidthLimitationWrapper>
+            <!-- end main-navigation ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+            <!-- begin multistep-form-progress-bar ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-multistep-form-progress-bar"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Multistepform-Progressbar</h2>
@@ -1001,7 +997,19 @@
                     <p>Page {{ showPageMultistep }}</p>
                 </div>
             </CmdWidthLimitationWrapper>
+            <!-- end multistep-form-progress-bar ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+            <!-- begin newsletter-subscription ------------------------------------------------------------------------------------------------------------------------------------------------------->
+            <a id="section-newsletter-subscription"></a>
+            <CmdWidthLimitationWrapper>
+                <h2 class="headline-demopage">Newsletter Subscription</h2>
+                <CmdForm textLegend="Stay-up-to-date" :use-fieldset="false">
+                    <CmdNewsletterSubscription v-model="newsletter" buttonType="submit" @buttonClick="submitNewsletterRegistration" />
+                </CmdForm>
+            </CmdWidthLimitationWrapper>
+            <!-- end newsletter-subscription ------------------------------------------------------------------------------------------------------------------------------------------------------->
+
+            <!-- begin pager ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-pager"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Pager</h2>
@@ -1014,19 +1022,41 @@
                     @click="showPagePager = $event"
                 />
             </CmdWidthLimitationWrapper>
+            <!-- end pager ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+            <!-- begin share-buttons ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-share-buttons"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Share buttons</h2>
                 <CmdShareButtons :share-buttons="shareButtonsData"/>
             </CmdWidthLimitationWrapper>
+            <!-- end share-buttons ------------------------------------------------------------------------------------------------------------------------------------------------------->
+
+            <!-- begin site-search ------------------------------------------------------------------------------------------------------------------------------------------------------->
+            <a id="section-site-search"></a>
+            <CmdWidthLimitationWrapper>
+                <h2 class="headline-demopage">Site Search</h2>
+                <CmdSiteSearch
+                    v-model:modelValueInput1="siteSearchInput1"
+                    v-model:modelValueInput2="siteSearchInput2"
+                    v-model:modelValueRadius="radius"
+                    v-model:modelValueSearchFilters="filters"
+                    @search="siteSearchOutput"
+                    textLegend="Search"
+                    :cmdFakeSelect="siteSearchFilters"
+                />
+            </CmdWidthLimitationWrapper>
+            <!-- end site-search ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+            <!-- begin slideshow ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-slideshow"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Slideshow</h2>
                 <CmdSlideshow :slideshow-items="slideshowData" :showCounter="true" :autoplay="true"/>
             </CmdWidthLimitationWrapper>
+            <!-- end slideshow ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+            <!-- begin system-message ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-system-message"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">System Message</h2>
@@ -1058,7 +1088,9 @@
                     <p>This is additional text!</p>
                 </CmdSystemMessage>
             </CmdWidthLimitationWrapper>
+            <!-- end system-message ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+            <!-- begin tables ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-tables"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Tables</h2>
@@ -1069,7 +1101,9 @@
                 <h3>Table as wide as possible</h3>
                 <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataLarge"/>
             </CmdWidthLimitationWrapper>
+            <!-- end tables ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+            <!-- begin tabs ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-tabs"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Tabs</h2>
@@ -1094,7 +1128,9 @@
                     </template>
                 </CmdTabs>
             </CmdWidthLimitationWrapper>
+            <!-- end tabs ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+            <!-- begin thumbnail-scroller ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-thumbnail-scroller"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Thumbnail-Scroller</h2>
@@ -1103,7 +1139,9 @@
                 <h3>Thumbnail-Scroller stretched to full width</h3>
                 <CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData" :fullWidth="true"/>
             </CmdWidthLimitationWrapper>
+            <!-- end thumbnail-scroller ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+            <!-- begin tooltip ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-tooltip"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Tooltip</h2>
@@ -1118,7 +1156,9 @@
                     Tooltip for click
                 </CmdTooltip>
             </CmdWidthLimitationWrapper>
+            <!-- end tooltip ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+            <!-- begin upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-upload-form"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Upload-Form</h2>
@@ -1140,35 +1180,54 @@
                                :uploadOptions="{url: 'http://localhost:8888'}"
                 />
             </CmdWidthLimitationWrapper>
+            <!-- end upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
         </main>
 
+        <!-- begin site-footer ------------------------------------------------------------------------------------------------------------------------------------------------------->
         <CmdSiteFooter>
+            <!-- begin switch-language ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <CmdSwitchLanguage :languages="languagesData" @click="doSomething"/>
+            <!-- end switch-languager ------------------------------------------------------------------------------------------------------------------------------------------------------->
+
             <div class="flex-container">
+                <!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdListOfLinks :links="listOfLinksData"
                                 :cmdHeadline="{headlineText: 'List of links', headlineLevel: 6}"
                 />
+                <!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
+
+                <!-- begin opening-hours ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdOpeningHours :openingHours="openingHoursData"
                                  :cmdHeadline="{headlineText: 'Opening hours', headlineLevel: 6}"
                                  textHolidaysClosed="Closed on holidays"
                                  textMiscInfo="Miscellaneous information"
                                  :checkInterval="0"
                 />
+                <!-- end opening-hours ------------------------------------------------------------------------------------------------------------------------------------------------------->
+
+                <!-- begin address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdAddressData :addressData="addressData"
                                 :linkGoogleMaps="false"
                                 :cmdHeadline="{headlineText: 'Address data', headlineLevel: 6}"
                 />
+                <!-- end address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
             </div>
         </CmdSiteFooter>
+        <!-- end site-footer ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+        <!-- begin copyright-information ------------------------------------------------------------------------------------------------------------------------------------------------------->
         <CmdCopyrightInformation/>
+        <!-- end copyright-information ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
-        <CmdFancyBox :show="fancyBoxCookieDisclaimer" :fancyboxOptions="{}" :allowEscapeKey="false">
+        <!-- begin fancy-box ------------------------------------------------------------------------------------------------------------------------------------------------------->
+        <CmdFancyBox :show="fancyBoxCookieDisclaimer" :fancyboxOptions="{}" :allowEscapeKey="false" :cmdHeadline="{show: true, headlineText: 'Cookie Disclaimer', headlineLevel: 2}">
+            <!-- begin cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <CmdCookieDisclaimer :cookieOptions="cookieDisclaimerData"
                                  buttonLabelAcceptAllCookies="Accept all cookies"
                                  buttonLabelAcceptCurrentSettings="Accept current settings"
                                  @closeCookieDisclaimer="closeCookieDisclaimer"
                                  v-model="acceptedCookies"
+                                 :cmdHeadlineCookieDisclaimer="{ show: false }"
 
             >
                 <template #privacy-text>
@@ -1179,7 +1238,9 @@
                     </p>
                 </template>
             </CmdCookieDisclaimer>
+            <!-- end cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
         </CmdFancyBox>
+        <!-- end fancy-box ------------------------------------------------------------------------------------------------------------------------------------------------------->
     </div>
 </template>
 
@@ -1220,7 +1281,6 @@ import CmdAddressData from "@/components/CmdAddressData"
 import CmdBackToTopButton from "@/components/CmdBackToTopButton.vue"
 import CmdBankAccountData from "./components/CmdBankAccountData"
 import CmdBox from "@/components/CmdBox.vue"
-import CmdBoxSiteSearch from "@/components/CmdBoxSiteSearch.vue"
 import CmdBreadcrumbs from "@/components/CmdBreadcrumbs.vue"
 import CmdCompanyLogo from "@/components/CmdCompanyLogo.vue"
 import CmdCopyrightInformation from "@/components/CmdCopyrightInformation.vue"
@@ -1239,12 +1299,14 @@ import CmdLoginForm from "@/components/CmdLoginForm.vue"
 import CmdListOfLinks from "./components/CmdListOfLinks"
 import CmdMainNavigation from "@/components/CmdMainNavigation.vue"
 import CmdMultistepFormProgressBar from "@/components/CmdMultistepFormProgressBar.vue"
+import CmdNewsletterSubscription from "@/components/CmdNewsletterSubscription.vue"
 import CmdOpeningHours from "@/components/CmdOpeningHours"
 import CmdPager from "@/components/CmdPager.vue"
 import CmdProgressBar from "@/components/CmdProgressBar.vue"
 import CmdShareButtons from "@/components/CmdShareButtons.vue"
 import CmdSiteFooter from "./components/CmdSiteFooter"
 import CmdSiteHeader from "./components/CmdSiteHeader"
+import CmdSiteSearch from "@/components/CmdSiteSearch.vue"
 import CmdSlideshow from "@/components/CmdSlideshow.vue"
 import CmdSwitchLanguage from "@/components/CmdSwitchLanguage.vue"
 import CmdSystemMessage from "@/components/CmdSystemMessage.vue"
@@ -1270,7 +1332,6 @@ export default {
         CmdBackToTopButton,
         CmdBankAccountData,
         CmdBox,
-        CmdBoxSiteSearch,
         CmdBreadcrumbs,
         CmdCompanyLogo,
         CmdCopyrightInformation,
@@ -1288,12 +1349,14 @@ export default {
         CmdLoginForm,
         CmdMainNavigation,
         CmdMultistepFormProgressBar,
+        CmdNewsletterSubscription,
         CmdOpeningHours,
         CmdPager,
         CmdProgressBar,
         CmdShareButtons,
         CmdSiteFooter,
         CmdSiteHeader,
+        CmdSiteSearch,
         CmdSlideshow,
         CmdSwitchLanguage,
         CmdSystemMessage,
@@ -1312,6 +1375,14 @@ export default {
             showTooltip: false,
             disabledStatus: undefined,
             validationStatus: "",
+            loginData: {
+              username: "",
+              password: ""
+            },
+            newsletter: {
+                subscription: "",
+                email: ""
+            },
             inputFieldPattern: "",
             inputSearch: "",
             textarea: "",
@@ -1356,7 +1427,6 @@ export default {
             selectedCountry: "de",
             selectedColor: "",
             rangeValue: 50,
-            loginData: {},
             siteSearchFilters: {
                 show: true,
                 selectData: fakeSelectFilterOptionsData,
@@ -1366,7 +1436,7 @@ export default {
             },
             siteSearchInput1: "Doctor",
             siteSearchInput2: "New York",
-            radius: 10,
+            radius: 5,
             filters: ["2"],
             switchButtonRadio: "radio1",
             switchButtonCheckboxToggleSwitch: false,
@@ -1419,7 +1489,6 @@ export default {
             fakeSelectOptionsWithIconsData,
             listOfLinksData,
             imageGalleryData,
-            inputGroupRadiobuttonsData,
             inputGroupReplacedRadiobuttonsData,
             inputGroupToggleSwitchRadiobuttonsData,
             languagesData,
@@ -1439,6 +1508,9 @@ export default {
         localizedTime(language) {
             return (h, m) => (localizedTime(language))(h, m).toLowerCase()
         },
+        idForReplacedInputsInInputGroup(prefix) {
+            return inputGroupRadiobuttonsData.map(item => ({...item, id: prefix + item.id}))
+        },
         closeCookieDisclaimer(event) {
             this.fancyBoxCookieDisclaimer = false
             alert(event.join(", "))
@@ -1448,17 +1520,16 @@ export default {
             this.disabledStatus = disabledStatus
         },
         siteSearchOutput(event) {
-            console.log(event)
+            alert(JSON.stringify(event))
         },
-        showError(event) {
-            console.log("EventMessages", event.messages)
+        showError() {
             alert("Error")
         },
         showFancyBox(type, content, altText) {
             if (type === 'text') {
-                openFancyBox({content: content})
+                openFancyBox({content: content, cmdHeadline: {show: true, headlineText: "Fancybox headline", headlineLevel: 3}})
             } else if (type === 'image') {
-                openFancyBox({url: content, altText: altText})
+                openFancyBox({url: content, altText: altText, cmdHeadline: {show: true, headlineText: "Fancybox headline", headlineLevel: 3}})
             }
         },
         getOptionName(option) {
@@ -1469,6 +1540,9 @@ export default {
             }
             return null
         },
+        submitNewsletterRegistration(event) {
+            alert(event.subscription + " " + event.email)
+        },
         doSomething(event) {
             event.preventDefault()
             alert("Language changed!")

package/src/assets/data/main-navigation.json

@@ -3,6 +3,7 @@
     "type": "href",
     "text": "Entry 1",
     "path": "#",
+    "iconClass": "icon-home",
     "subentries": []
   },
   {

package/src/assets/data/tabs.json

@@ -3,6 +3,7 @@
     "name": "Tab 1",
     "headlineText": "Tab 1 Headline",
     "headlineLevel": 4,
+    "iconClass": "icon-home",
     "htmlContent": "<p>Inhalt 1</p>"
   },
   {

package/src/assets/styles/global-styles.scss

@@ -52,7 +52,6 @@
 }
 
 #component-library {
-  border: 1px solid red;
   scroll-padding-top: unset !important;
   scroll-snap-type: unset !important;
 }

package/src/components/CmdBox.vue

@@ -3,12 +3,15 @@
     <div v-if="boxType === 'content'" :class="['cmd-box box content', {open : open, collapsible: collapsible, 'stretch-vertically': stretchVertically}]">
         <template v-if="useSlots?.includes('header')">
             <!-- begin collapsible header with slot -->
-            <a v-if="collapsible" href="#" class="box-header" @click.prevent="toggleContentVisibility" :title="open ? iconOpen.tooltip : iconClosed.tooltip">
+            <div v-if="collapsible" class="box-header">
                 <!-- begin slot 'header' -->
                 <slot name="header"></slot>
                 <!-- end slot 'header' -->
-                <span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
-            </a>
+
+                <a href="#" @click.prevent="toggleContentVisibility" :title="open ? iconOpen.tooltip : iconClosed.tooltip" class="toggle-icon">
+                    <span :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
+                </a>
+            </div>
             <!-- end collapsible header with slot -->
 
             <!-- begin default header with slot -->
@@ -298,6 +301,12 @@ export default {
         margin-bottom: 0;
     }
 
+    &.collapsible {
+        .box-header {
+            justify-content: space-between;
+        }
+    }
+
     .box-body {
         padding: var(--default-padding);
     }
@@ -311,10 +320,6 @@ export default {
             > *:last-child {
                 margin-bottom: 0;
             }
-
-            &:not(.open) {
-                justify-content: flex-start;
-            }
         }
 
         > .box-header, > a {
@@ -338,13 +343,14 @@ export default {
 
             > .toggle-icon, .toggle-icon > [class*="icon"] {
                 font-size: 1rem;
-                margin-left: auto;
             }
+        }
 
+        .box-header {
             &:hover, &:active, &:focus {
                 background: var(--pure-white);
 
-                > * {
+                * {
                     color: var(--primary-color);
                 }
             }