comand-component-library 3.1.90 → 3.1.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.90",
+  "version": "3.1.91",
   "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>
@@ -57,6 +64,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 +646,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 +661,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 +676,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 +694,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 +710,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 +726,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 +783,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 +840,7 @@
                         </CmdBox>
                     </div>
                     <div class="grid-small-item">
-                        <CmdBox :useSlots="['header', 'body']" :collapsible="true" :stretchVertically="false">
+                        <CmdBox :cmdHeadline="{headlineText: 'nase', headlineLevel: 4}" :collapsible="true" :stretchVertically="false">
                             <template v-slot:header>
                                 <h3>
                                     Collapsible box with image
@@ -981,8 +990,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 +1001,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 +1013,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">
+                    <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 +1038,25 @@
                     @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 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>
 
@@ -1239,6 +1300,7 @@ 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"
@@ -1288,6 +1350,7 @@ export default {
         CmdLoginForm,
         CmdMainNavigation,
         CmdMultistepFormProgressBar,
+        CmdNewsletterSubscription,
         CmdOpeningHours,
         CmdPager,
         CmdProgressBar,
@@ -1312,6 +1375,10 @@ export default {
             showTooltip: false,
             disabledStatus: undefined,
             validationStatus: "",
+            newsletter: {
+                subscription: "",
+                email: ""
+            },
             inputFieldPattern: "",
             inputSearch: "",
             textarea: "",
@@ -1419,7 +1486,6 @@ export default {
             fakeSelectOptionsWithIconsData,
             listOfLinksData,
             imageGalleryData,
-            inputGroupRadiobuttonsData,
             inputGroupReplacedRadiobuttonsData,
             inputGroupToggleSwitchRadiobuttonsData,
             languagesData,
@@ -1439,6 +1505,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(", "))
@@ -1456,9 +1525,9 @@ export default {
         },
         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 +1538,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/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 {

package/src/components/CmdBoxSiteSearch.vue

@@ -71,9 +71,10 @@
                 <span v-else>{{ getMessage("cmdsitesearch.show_filter_options") }}</span>
             </a>
             <transition name="fade">
-                <div v-if="showFilters && cmdFakeSelect?.selectData.length" class="flex-container no-flex" aria-expanded="true">
+                <div v-if="showFilters && cmdFakeSelect?.selectData.length" class="flex-container no-flex" role="listbox" aria-expanded="true">
                     <!-- begin CmdFakeSelect -->
                     <CmdFakeSelect
+                        role="option"
                         :selectData="cmdFakeSelect?.selectData"
                         v-model="searchFilters"
                         :defaultOptionName="cmdFakeSelect?.defaultOptionName"

package/src/components/CmdCookieDisclaimer.vue

@@ -4,7 +4,6 @@
             <!-- begin CmdHeadline -->
             <CmdHeadline
                 v-if="cmdHeadlineCookieDisclaimer?.show && cmdHeadlineCookieDisclaimer?.headlineText && cmdHeadlineCookieDisclaimer?.headlineLevel"
-                v-bind="cmdHeadlineCookieDisclaimer"
                 :headlineText="cmdHeadlineCookieDisclaimer.headlineText"
                 :headlineLevel="cmdHeadlineCookieDisclaimer.headlineLevel"
             />
@@ -14,11 +13,18 @@
             <slot name="cookie-options">
                 <!-- begin required cookies -->
                 <div v-if="cookieOptions?.required" class="flex-container vertical">
-                    <CmdHeadline v-if="cmdBoxRequiredCookies?.showHeadline" :headline-text="cmdBoxRequiredCookies?.headlineText" :headline-level="cmdBoxRequiredCookies?.headlineLevel "/>
+                    <!-- begin CmdHeadline -->
+                    <CmdHeadline
+                        v-if="cmdBoxRequiredCookies?.showHeadline"
+                        :headline-text="cmdBoxRequiredCookies?.headlineText"
+                        :headline-level="cmdBoxRequiredCookies?.headlineLevel "
+                    />
+                    <!-- end CmdHeadline -->
+
                     <!-- begin CmdBox -->
                     <CmdBox v-for="(cookie, index) in cookieOptions.required.cookies || []"
                             :useSlots="['header', 'body']"
-                            v-bind="cmdBoxRequiredCookies"
+                            :collapsible="cmdBoxRequiredCookies?.collapsible"
                             :key="index"
                     >
                         <template v-slot:header>
@@ -57,11 +63,18 @@
 
                 <!-- begin optional cookies -->
                 <div v-if="cookieOptions?.optional" class="flex-container vertical">
-                    <CmdHeadline v-if="cmdBoxOptionalCookies?.showHeadline" :headline-text="cmdBoxOptionalCookies?.headlineText" :headline-level="cmdBoxOptionalCookies?.headlineLevel "/>
+                    <!-- begin CmdHeadline -->
+                    <CmdHeadline
+                        v-if="cmdBoxOptionalCookies?.showHeadline"
+                        :headline-text="cmdBoxOptionalCookies?.headlineText"
+                        :headline-level="cmdBoxOptionalCookies?.headlineLevel
+                    "/>
+                    <!-- end CmdHeadline -->
+
                     <!-- begin CmdBox -->
                     <CmdBox v-for="(cookie, index) in cookieOptions.optional.cookies || []"
                             :useSlots="['header', 'body']"
-                            v-bind="cmdBoxOptionalCookies"
+                            :collapsible="cmdBoxOptionalCookies?.collapsible"
                             :key="index"
                     >
                         <template v-slot:header>
@@ -172,7 +185,7 @@ export default {
                     showHeadline: true,
                     headlineText: "Required cookies",
                     headlineLevel: 3
-                }
+                    }
             }
         },
         /**

package/src/components/CmdFakeSelect.vue

@@ -10,14 +10,15 @@
             }
         ]"
         :title="$attrs.title"
-        :aria-labelledby="labelId"
+        role="listbox"
+        :aria-labelledby="htmlId"
         :aria-required="$attrs.required !== undefined"
         ref="fakeselect"
     >
         <template v-if="showLabel">
             <!-- begin label -->
-            <span class="label-text" :id="labelId">
-                <span>{{ labelText }}<sup v-if="$attrs.required !== undefined">*</sup></span>
+            <span class="label-text">
+                <span :id="htmlId">{{ labelText }}<sup v-if="$attrs.required !== undefined">*</sup></span>
 
                 <!-- begin CmdTooltipForInputElements -->
                 <CmdTooltipForInputElements
@@ -25,9 +26,9 @@
                     ref="tooltip"
                     :validationStatus="validationStatus"
                     :validationMessage="getValidationMessage"
-                    :validationTooltip="validationTooltip"
                     :relatedId="tooltipId"
                     :cmdListOfRequirements="listOfRequirements"
+                    :role="validationStatus === 'error' ? 'alert' : 'dialog'"
                 />
                 <!-- end CmdTooltipForInputElements -->
 
@@ -36,10 +37,9 @@
                    @click.prevent
                    :class="getStatusIconClass"
                    :title="!useCustomTooltip ? getValidationMessage : ''"
-                   :aria-errormessage="getValidationMessage"
+                   :aria-errormessage="tooltipId"
                    aria-live="assertive"
-                   :id="tooltipId"
-                   :role="validationStatus === 'error' ? 'alert' : 'dialog'">
+                   :id="tooltipId">
                 </a>
             </span>
             <!-- end label -->
@@ -119,14 +119,12 @@
 </template>
 
 <script>
-// import utils
-import {createUuid} from "../utils/common.js"
-
 // import mixins
 import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdFakeSelect/DefaultMessageProperties"
-import FieldValidation from "../mixins/FieldValidation.js"
-import Tooltip from "../mixins/Tooltip.js"
+import FieldValidation from "../mixins/FieldValidation"
+import Identifier from "../mixins/Identifier"
+import Tooltip from "../mixins/Tooltip"
 
 // import components
 import CmdTooltipForInputElements from "./CmdTooltipForInputElements"
@@ -138,6 +136,7 @@ export default {
         I18n,
         DefaultMessageProperties,
         FieldValidation,
+        Identifier,
         Tooltip
     ],
     components: {
@@ -311,13 +310,6 @@ export default {
         },
         selectAllOptionsIcon() {
             return "icon-check"
-        },
-        // get ID for accessibility
-        labelId() {
-            if (this.$attrs.id !== undefined) {
-                return this.$attrs.id
-            }
-            return "label-" + createUuid()
         }
     },
     mounted() {