comand-component-library 3.1.65 → 3.1.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.65",
+  "version": "3.1.68",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/App.vue

@@ -418,7 +418,7 @@
                                     labelText="Label (inline) for inputfield (search) without search-button:"
                                     :displayLabelInline="true"
                                     type="search"
-                                    id="inputfield-search"
+                                    id="inputfield-search-without-searchbutton"
                                     placeholder="Keyword(s)"
                                     v-model="inputSearch"
                                     :showSearchButton="false"
@@ -427,7 +427,7 @@
                                     labelText="Label (inline) for inputfield (search):"
                                     :displayLabelInline="true"
                                     type="search"
-                                    id="inputfield-search"
+                                    id="inputfield-search-with-searchbutton"
                                     placeholder="Keyword(s)"
                                     v-model="inputSearch"
                                     :status="formElementStatus"/>
@@ -544,6 +544,24 @@
                                             :status="formElementStatus"/>
                         </div>
                     </div>
+                    <CmdInputGroup labelText="Group label for radio group">
+                        <CmdFormElement element="input"
+                                        labelText="Label for radiobutton"
+                                        type="radio"
+                                        id="input-group-radiobutton"
+                                        name="radiogroup2"
+                                        inputValue="radiobuttonValue1"
+                                        v-model="radiobuttonValue"
+                                        :status="formElementStatus"/>
+                        <CmdFormElement element="input"
+                                        labelText="Label for radiobutton"
+                                        type="radio"
+                                        id="input-group-radiobutton"
+                                        name="radiogroup2"
+                                        inputValue="radiobuttonValue2"
+                                        v-model="radiobuttonValue"
+                                        :status="formElementStatus"/>
+                    </CmdInputGroup>
                     <CmdMultipleSwitch labelText="Label for multiple-switch with checkboxes:"
                                        :multipleSwitches="multipleSwitchCheckboxData"
                                        switchTypes="checkbox"
@@ -687,13 +705,13 @@
             <h3>Product boxes</h3>
             <div class="grid-container-create-columns">
                 <div class="grid-small-item" v-for="(product, index) in boxProductData" :key="index">
-                    <CmdBox boxType="product" :product="product"/>
+                    <CmdBox boxType="product" :product="product" :cmdCustomHeadline="{headlineLevel: 4}" />
                 </div>
             </div>
             <h3>User boxes</h3>
             <div class="grid-container-create-columns">
                 <div class="grid-small-item" v-for="(user, index) in boxUserData" :key="index">
-                    <CmdBox boxType="user" :user="user"/>
+                    <CmdBox boxType="user" :user="user" :cmdCustomHeadline="{headlineLevel: 4}" />
                 </div>
             </div>
             <h3>Box Site Search</h3>
@@ -723,12 +741,12 @@
         <a id="section-custom-headline"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Custom Headline</h2>
-            <CmdCustomHeadline icon-class="icon-home" pre-headline-text="Pre-headline" :headline="{ headlineText: 'Headline level 1', headlineLevel: '1'}"/>
-            <CmdCustomHeadline :headline="{ headlineText: 'Headline level 2', headlineLevel: '2'}"/>
-            <CmdCustomHeadline :headline="{ headlineText: 'Headline level 3', headlineLevel: '3'}"/>
-            <CmdCustomHeadline :headline="{ headlineText: 'Headline level 4', headlineLevel: '4'}"/>
-            <CmdCustomHeadline :headline="{ headlineText: 'Headline level 5', headlineLevel: '5'}"/>
-            <CmdCustomHeadline :headline="{ headlineText: 'Headline level 6', headlineLevel: '6'}"/>
+            <CmdCustomHeadline icon-class="icon-home" pre-headline-text="Pre-headline" headlineText="Headline level 1" :headlineLevel="1"/>
+            <CmdCustomHeadline headlineText="Headline level 2" :headlineLevel="2"/>
+            <CmdCustomHeadline headlineText="Headline level 3" :headlineLevel="3"/>
+            <CmdCustomHeadline headlineText="Headline level 4" :headlineLevel="4"/>
+            <CmdCustomHeadline headlineText="Headline level 5" :headlineLevel="5"/>
+            <CmdCustomHeadline headlineText="Headline level 6" :headlineLevel="6"/>
         </CmdWidthLimitationWrapper>
         <!-- end custom-headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
@@ -771,6 +789,21 @@
             <p>LoginData: {{loginData}}</p>
         </CmdWidthLimitationWrapper>
 
+        <!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
+        <a id="section-list-of-links"></a>
+        <CmdWidthLimitationWrapper>
+            <h2 class="headline-demopage">List Of Links</h2>
+            <h3>Vertical</h3>
+            <CmdListOfLinks :links="listOfLinksData" />
+            <h3>Horizontal (aligned left)</h3>
+            <CmdListOfLinks orientation="horizontal" align="left" :links="listOfLinksData" />
+            <h3>Horizontal (aligned center)</h3>
+            <CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData" />
+            <h3>Horizontal (aligned right)</h3>
+            <CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData" />
+        </CmdWidthLimitationWrapper>
+        <!-- end list-of-links  ------------------------------------------------------------------------------------------------------------------------------------------------------->
+
         <a id="section-main-navigation"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Main Navigation</h2>
@@ -863,19 +896,19 @@
             <h2 class="headline-demopage">Tabs</h2>
             <h3>Tabs with content from json-file</h3>
             <CmdTabs :stretchTabs="false" :tabs="tabsData"/>
-            <h3>Tabs with HTML-content from used component</h3>
+            <h3>Tabs with HTML-content (given by slot))</h3>
             <CmdTabs :stretchTabs="true" :tabs="[{name: 'Tab 1'}, {name: 'Tab 2'}, {name: 'Tab 3'}]" :useSlot="true">
                 <template v-slot:tab-content-0>
-                    <h3>Tab 1</h3>
+                    <h4>Tab 1 headline</h4>
                     <p>Content</p>
                 </template>
                 <template v-slot:tab-content-1>
-                    <h3>Tab 2</h3>
+                    <h4>Tab 2</h4>
                     <p>Content</p>
                     <p>Content</p>
                 </template>
                 <template v-slot:tab-content-2>
-                    <h3>Tab 3</h3>
+                    <h4>Tab 3</h4>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
@@ -908,19 +941,20 @@
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Upload-Form</h2>
             <h3>Simple mode</h3>
-            <CmdUploadForm :cmdCustomHeadlineFieldset="{headlineText: 'Select files to upload', headlineLevel: 3}"
-                           :enableDragAndDrop="true"
+            <CmdUploadForm :enableDragAndDrop="true"
                            :allowedFileExtensions="['jpg', 'png']"
                            :allowMultipleFileUploads="true"
                            :advancedMode="false"
+                           textLegend="Simple upload form"
                            @error="showError"
                            :uploadOptions="{url: 'http://localhost:8888'}"
             />
             <h3>Advanced mode</h3>
-            <CmdUploadForm headline="Select files to upload"
+            <CmdUploadForm :cmdCustomHeadlineFieldset="{headlineText: 'Select files to upload', headlineLevel: 3}"
                            :enableDragAndDrop="true"
-                           :allowedFileExtensions="['jpg']"
+                           :allowedFileExtensions="['jpg', 'png']"
                            :allowMultipleFileUploads="true"
+                           textLegend="Advanced upload form"
                            :uploadOptions="{url: 'http://localhost:8888'}"
             />
         </CmdWidthLimitationWrapper>
@@ -928,7 +962,7 @@
 
     <CmdWidthLimitationWrapper id="site-footer" inner-component="footer">
         <CmdSwitchLanguage :languages="languagesData" @click="doSomething"/>
-        <CmdListOfLinks :links="footerNavigationData"
+        <CmdListOfLinks :links="listOfLinksData"
                         :cmdCustomHeadline="{headlineText: 'List of links', headlineLevel: 6}"
         />
         <CmdOpeningHours :openingHours="openingHoursData"
@@ -947,8 +981,7 @@
     <CmdCopyrightInformation/>
 
     <CmdFancyBox :show="fancyBoxCookieDisclaimer" :fancyboxOptions="{}" :allowEscapeKey="false">
-        <CmdCookieDisclaimer headline="Usage of cookies on this web site"
-                             :cookieOptions="cookieDisclaimerData"
+        <CmdCookieDisclaimer :cookieOptions="cookieDisclaimerData"
                              buttonLabelAcceptAllCookies="Accept all cookies"
                              buttonLabelAcceptCurrentSettings="Accept current settings"
                              @closeCookieDisclaimer="fancyBoxCookieDisclaimer = false"
@@ -979,7 +1012,7 @@ import fakeSelectCountriesData from '@/assets/data/fake-select-countries.json'
 import fakeSelectFilterOptionsData from '@/assets/data/fake-select-filter-options.json'
 import fakeSelectOptionsData from '@/assets/data/fake-select-options.json'
 import fakeSelectOptionsWithIconsData from '@/assets/data/fake-select-options-with-icons.json'
-import footerNavigationData from '@/assets/data/list-of-links.json'
+import listOfLinksData from '@/assets/data/list-of-links.json'
 import imageGalleryData from '@/assets/data/image-gallery.json'
 import languagesData from '@/assets/data/switch-language.json'
 import multistepsData from '@/assets/data/multistep-form-progress-bar.json'
@@ -1014,7 +1047,9 @@ import CmdFormFilters from "@/components/CmdFormFilters.vue"
 import CmdGoogleMaps from "./components/CmdGoogleMaps"
 import CmdImageGallery from "@/components/CmdImageGallery.vue"
 import CmdImageZoom from "@/components/CmdImageZoom.vue"
+import CmdInputGroup from "./components/CmdInputGroup"
 import CmdLoginForm from "@/components/CmdLoginForm.vue"
+import CmdListOfLinks from "./components/CmdListOfLinks"
 import CmdMainNavigation from "@/components/CmdMainNavigation.vue"
 import CmdMultipleSwitch from "@/components/CmdMultipleSwitch.vue"
 import CmdMultistepFormProgressBar from "@/components/CmdMultistepFormProgressBar.vue"
@@ -1037,7 +1072,6 @@ import {openFancyBox} from "@/components/CmdFancyBox"
 
 // import external functions
 import * as functions from "@/mixins/FieldValidation.js"
-import CmdListOfLinks from "./components/CmdListOfLinks";
 
 export default {
     name: "App",
@@ -1061,6 +1095,7 @@ export default {
         CmdGoogleMaps,
         CmdImageGallery,
         CmdImageZoom,
+        CmdInputGroup,
         CmdLoginForm,
         CmdMainNavigation,
         CmdMultistepFormProgressBar,
@@ -1150,7 +1185,7 @@ export default {
             fakeSelectFilterOptionsData,
             fakeSelectOptionsData,
             fakeSelectOptionsWithIconsData,
-            footerNavigationData,
+            listOfLinksData,
             imageGalleryData,
             languagesData,
             multistepsData,

package/src/assets/data/box-user.json

@@ -8,7 +8,6 @@
     "links": [
         {
         "path": "mailto:",
-        "target": "",
         "iconClass": "icon-mail",
         "tooltip": "Send mail"
       }
@@ -22,7 +21,6 @@
     "links": [
       {
         "path": "mailto:",
-        "target": "",
         "iconClass": "icon-mail",
         "tooltip": "Send mail"
       },
@@ -42,7 +40,6 @@
     "links":  [
       {
         "path": "mailto:",
-        "target": "",
         "iconClass": "icon-mail",
         "tooltip": "Send mail"
       },
@@ -54,7 +51,6 @@
       },
       {
         "path": "tel:",
-        "target": "",
         "iconClass": "icon-phone",
         "tooltip": "Make call"
       }
@@ -68,7 +64,6 @@
     "links":  [
       {
         "path": "mailto:",
-        "target": "",
         "iconClass": "icon-mail",
         "tooltip": "Send mail"
       },
@@ -80,7 +75,6 @@
       },
       {
         "path": "tel:",
-        "target": "",
         "iconClass": "icon-phone",
         "tooltip": "Make call"
       }
@@ -94,7 +88,6 @@
     "links":  [
       {
         "path": "mailto:",
-        "target": "",
         "iconClass": "icon-mail",
         "tooltip": "Send mail"
       },
@@ -106,7 +99,6 @@
       },
       {
         "path": "tel:",
-        "target": "",
         "iconClass": "icon-phone",
         "tooltip": "Make call"
       }

package/src/assets/data/cookie-disclaimer.json

@@ -4,7 +4,7 @@
     "cookies": [
         {
           "id": "cookie-sessionid",
-          "description": "These cookies are required for functionality",
+          "description": "This cookie is required for functionality",
           "labelText": "SessionID",
           "checked": true,
           "status": "disabled",
@@ -16,7 +16,7 @@
         },
         {
           "id": "cookie-google-recaptcha",
-          "description": "This cookies prevents bots from sending forms",
+          "description": "This cookie prevents bots from sending forms",
           "labelText": "Google reCaptcha™",
           "checked": true,
           "status": "disabled",
@@ -34,7 +34,7 @@
     "cookies": [
       {
         "id": "cookie-google-maps",
-        "description": "These cookies enables the Google Map",
+        "description": "This cookie enables the Google Map™",
         "labelText": "Google Maps™",
         "checked": false,
         "linkDataPrivacy": {

package/src/assets/data/tabs.json

@@ -1,17 +1,20 @@
 [
   {
     "name": "Tab 1",
-    "headline": "Tab 1 Headline",
+    "headlineText": "Tab 1 Headline",
+    "headlineLevel": 4,
     "htmlContent": "<p>Inhalt 1</p>"
   },
   {
     "name": "Tab 2",
-    "headline": "Tab 2 Headline",
+    "headlineText": "Tab 2 Headline",
+    "headlineLevel": 4,
     "htmlContent": "<p>Inhalt 2</p>"
   },
   {
     "name": "Tab 3",
-    "headline": "Tab 3 Headline",
+    "headlineText": "Tab 3 Headline",
+    "headlineLevel": 4,
     "htmlContent": "<p>Inhalt 3</p>"
   }
 ]

package/src/components/CmdBox.vue

@@ -1,11 +1,24 @@
 <template>
     <!-- begin boxType 'content' -->
     <div v-if="boxType === 'content'" :class="['cmd-box box content', {open : open, collapsible: collapsible}]">
-        <header v-if="useSlots?.includes('header')">
-            <!-- begin slot 'header' -->
-            <slot name="header"></slot>
-            <!-- end slot 'header' -->
-        </header>
+        <template v-if="useSlots?.includes('header')">
+            <!-- begin collapsible header with slot -->
+            <a v-if="collapsible" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
+                <!-- begin slot 'header' -->
+                <slot name="header"></slot>
+                <!-- end slot 'header' -->
+                <span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
+            </a>
+            <!-- end collapsible header with slot -->
+
+            <!-- begin default header with slot -->
+            <header v-else>
+                <!-- begin slot 'header' -->
+                <slot name="header"></slot>
+                <!-- end slot 'header' -->
+            </header>
+            <!-- end default header with slot -->
+        </template>
         <template v-else>
             <!-- begin header for collapsible -->
             <a v-if="collapsible" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">

package/src/components/CmdCompanyLogo.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="cmd-company-logo">
-        <a v-if="link.type === 'router'"  href="./" :title="link.tooltip">
-            <img :src="pathCurrentLogo" :alt="altText"/>
-        </a>
-        <router-link v-else to="./" :title="link.tooltip">
+        <router-link v-if="link.type === 'router'" :href="link.path" :title="link.tooltip">
             <img :src="pathCurrentLogo" :alt="altText"/>
         </router-link>
+        <a v-else :to="link.path" :title="link.tooltip">
+            <img :src="pathCurrentLogo" :alt="altText"/>
+        </a>
     </div>
 </template>
 

package/src/components/CmdCookieDisclaimer.vue

@@ -12,82 +12,75 @@
 
             <!-- begin slot for cookie-options -->
             <slot name="cookie-options">
-                <div v-if="cookieOptions.required">
-                    <CmdCustomHeadline
-                        v-if="cmdCustomHeadlineRequiredCookies?.show && cmdCustomHeadlineRequiredCookies?.headlineText && cmdCustomHeadlineRequiredCookies?.headlineLevel"
-                        v-bind="cmdCustomHeadlineRequiredCookies"
-                        :headlineText="cmdCustomHeadlineRequiredCookies.headlineText"
-                        :headlineLevel="cmdCustomHeadlineRequiredCookies.headlineLevel"
-                    />
-<!--                    &lt;!&ndash; begin CmdAccordion &ndash;&gt;-->
-<!--                    <CmdAccordion :accordion-data="cookieOptions.required.cookies.length" :accordionData="2">-->
-<!--                        <template v-for="(cookie, index) in cookieOptions.required.cookies"-->
-<!--                                  v-slot:[`accordionHeadline${index}`]-->
-<!--                                  :key="index">-->
-<!--                            &lt;!&ndash; begin CmdSwitchButton &ndash;&gt;-->
-<!--                            <CmdSwitchButton-->
-<!--                                type="checkbox"-->
-<!--                                :id="cookie.id"-->
-<!--                                :labelText="cookie.labelText"-->
-<!--                                v-model="cookie.checked"-->
-<!--                                :status="cookie.status"-->
-<!--                                disabled="disabled"-->
-<!--                            />-->
-<!--                            &lt;!&ndash; end CmdSwitchButton &ndash;&gt;-->
-<!--                        </template>-->
-<!--                        <template v-for="(cookie, index) in cookieOptions.required.cookies"-->
-<!--                                  v-slot:[`accordionContent${index}`]-->
-<!--                                  :key="index">-->
-<!--                            <p v-if="cookie.description">{{ cookie.description }}</p>-->
-<!--                            <p v-if="cookie.linkDataPrivacy">-->
-<!--                                {{ cookie.linkDataPrivacy.label }}-->
-<!--                                <a @click="openDataPrivacy"-->
-<!--                                   :href="cookie.linkDataPrivacy.link"-->
-<!--                                   :target="cookie.linkDataPrivacy.target">-->
-<!--                                    {{ cookie.linkDataPrivacy.linkText }}-->
-<!--                                </a>-->
-<!--                            </p>-->
-<!--                            <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>-->
-<!--                        </template>-->
-<!--                    </CmdAccordion>-->
-<!--                    &lt;!&ndash; end CmdAccordion &ndash;&gt;-->
+                <div v-if="cookieOptions.required" class="flex-container vertical">
+                    <CmdCustomHeadline v-if="cmdBoxRequiredCookies?.showHeadline" :headline-text="cmdBoxRequiredCookies?.headlineText" :headline-level="cmdBoxRequiredCookies?.headlineLevel "/>
+                    <!-- begin CmdBox -->
+                    <CmdBox v-for="(cookie, index) in cookieOptions.required.cookies"
+                            :useSlots="['header', 'body']"
+                            v-bind="cmdBoxRequiredCookies"
+                            :key="index"
+                    >
+                        <template v-slot:header>
+                            <!-- begin CmdSwitchButton -->
+                            <CmdSwitchButton
+                                type="checkbox"
+                                :id="cookie.id"
+                                :labelText="cookie.labelText"
+                                v-model="cookie.checked"
+                                :status="cookie.status"
+                                disabled="disabled"
+                            />
+                            <!-- end CmdSwitchButton -->
+                        </template>
+                        <template v-slot:body>
+                            <p v-if="cookie.description">{{ cookie.description }}</p>
+                            <p v-if="cookie.linkDataPrivacy">
+                                {{ cookie.linkDataPrivacy.label }}
+                                <a @click="openDataPrivacy"
+                                   :href="cookie.linkDataPrivacy.link"
+                                   :target="cookie.linkDataPrivacy.target">
+                                    {{ cookie.linkDataPrivacy.linkText }}
+                                </a>
+                            </p>
+                            <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
+                        </template>
+                    </CmdBox>
+                    <!-- end CmdBox -->
                 </div>
-                <hr />
-                <div v-if="cookieOptions.optional">
-                    <CmdCustomHeadline
-                        v-if="cmdCustomHeadlineOptionalCookies?.show && cmdCustomHeadlineOptionalCookies?.headlineText && cmdCustomHeadlineOptionalCookies?.headlineLevel"
-                        v-bind="cmdCustomHeadlineOptionalCookies"
-                        :headlineText="cmdCustomHeadlineOptionalCookies.headlineText"
-                        :headlineLevel="cmdCustomHeadlineOptionalCookies.headlineLevel"
-                    />
-<!--                    &lt;!&ndash; begin CmdAccordion &ndash;&gt;-->
-<!--                    <CmdAccordion :accordion-data="cookieOptions.optional.cookies.length" :accordionData="2">-->
-<!--                        <template v-for="(cookie, index) in cookieOptions.optional.cookies"-->
-<!--                                  v-slot:[`accordionHeadline${index}`]-->
-<!--                                  :key="index">-->
-<!--                            &lt;!&ndash; begin CmdSwitchButton &ndash;&gt;-->
-<!--                            <CmdSwitchButton-->
-<!--                                type="checkbox"-->
-<!--                                :id="cookie.id"-->
-<!--                                :labelText="cookie.labelText"-->
-<!--                                v-model="cookie.checked"-->
-<!--                                :status="cookie.status"-->
-<!--                            />-->
-<!--                            &lt;!&ndash; end CmdSwitchButton &ndash;&gt;-->
-<!--                        </template>-->
-<!--                        <template v-for="(cookie, index) in cookieOptions.optional.cookies"-->
-<!--                                  v-slot:[`accordionContent${index}`]-->
-<!--                                  :key="index">-->
-<!--                            <p>{{ cookie.description }}</p>-->
-<!--                            <p v-if="cookie.linkDataPrivacy">-->
-<!--                                {{ cookie.linkDataPrivacy.label }}-->
-<!--                                <a @click="openDataPrivacy" :href="cookie.linkDataPrivacy.link"-->
-<!--                                   :target="cookie.linkDataPrivacy.target">{{ cookie.linkDataPrivacy.linkText }}</a>-->
-<!--                            </p>-->
-<!--                            <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>-->
-<!--                        </template>-->
-<!--                    </CmdAccordion>-->
-<!--                    &lt;!&ndash; end CmdAccordion &ndash;&gt;-->
+                <hr/>
+                <div v-if="cookieOptions.optional" class="flex-container vertical">
+                    <CmdCustomHeadline v-if="cmdBoxOptionalCookies?.showHeadline" :headline-text="cmdBoxOptionalCookies?.headlineText" :headline-level="cmdBoxOptionalCookies?.headlineLevel "/>
+                    <!-- begin CmdBox -->
+                    <CmdBox v-for="(cookie, index) in cookieOptions.optional.cookies"
+                            :useSlots="['header', 'body']"
+                            v-bind="cmdBoxOptionalCookies"
+                            :key="index"
+                    >
+                        <template v-slot:header>
+                            <!-- begin CmdSwitchButton -->
+                            <CmdSwitchButton
+                                type="checkbox"
+                                :id="cookie.id"
+                                :labelText="cookie.labelText"
+                                v-model="cookie.checked"
+                                :status="cookie.status"
+                            />
+                            <!-- end CmdSwitchButton -->
+                        </template>
+                        <template v-slot:body>
+                            <p v-if="cookie.description">{{ cookie.description }}</p>
+                            <p v-if="cookie.linkDataPrivacy">
+                                {{ cookie.linkDataPrivacy.label }}
+                                <a @click="openDataPrivacy"
+                                   :href="cookie.linkDataPrivacy.link"
+                                   :target="cookie.linkDataPrivacy.target">
+                                    {{ cookie.linkDataPrivacy.linkText }}
+                                </a>
+                            </p>
+                            <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
+                        </template>
+                    </CmdBox>
+                    <!-- end CmdBox -->
                 </div>
             </slot>
             <!-- end slot for cookie-options -->
@@ -98,7 +91,7 @@
 
             <!-- begin button-wrapper for 'accept'-buttons -->
             <div class="button-wrapper align-center">
-                <button  v-if="buttonLabelAcceptCurrentSettings" type="button" @click="acceptCookies('currentSettings')">
+                <button v-if="buttonLabelAcceptCurrentSettings" type="button" @click="acceptCookies('currentSettings')">
                     <span>{{ buttonLabelAcceptCurrentSettings }}</span>
                 </button>
                 <button v-if="buttonLabelAcceptAllCookies" type="button" class="primary" @click="acceptCookies('allCookies')">
@@ -112,14 +105,16 @@
 
 <script>
 // import components
+import CmdBox from "./CmdBox"
 import CmdCustomHeadline from "./CmdCustomHeadline"
-// import CmdSwitchButton from "./CmdSwitchButton"
+import CmdSwitchButton from "./CmdSwitchButton"
 
 export default {
     name: "CmdCookieDisclaimer",
     components: {
-        CmdCustomHeadline
-        // CmdSwitchButton
+        CmdBox,
+        CmdCustomHeadline,
+        CmdSwitchButton
     },
     data() {
         return {
@@ -142,26 +137,28 @@ export default {
             }
         },
         /**
-         * properties for CmdCustomHeadline-component above required cookies
+         * property for CmdBox-component surrounding the required cookies
          */
-        cmdCustomHeadlineRequiredCookies: {
+        cmdBoxRequiredCookies: {
             type: Object,
             default() {
                 return {
-                    show: true,
+                    collapsible: true,
+                    showHeadline: true,
                     headlineText: "Required cookies",
                     headlineLevel: 3
                 }
             }
         },
         /**
-         * properties for CmdCustomHeadline-component above optional cookies
+         * property for CmdBox-component surrounding the optional cookies
          */
-        cmdCustomHeadlineOptionalCookies: {
+        cmdBoxOptionalCookies: {
             type: Object,
             default() {
                 return {
-                    show: true,
+                    collapsible: true,
+                    showHeadline: true,
                     headlineText: "Optional cookies",
                     headlineLevel: 3
                 }
@@ -218,6 +215,12 @@ export default {
     bottom: 0;
     top: auto;
 
+    .cmd-box {
+        .box-body {
+            padding: var(--default-padding);
+        }
+    }
+
     h1 {
         text-align: center;
     }
@@ -234,22 +237,6 @@ export default {
         margin-bottom: var(--default-margin);
     }
 
-    .cmd-accordion {
-        .accordion-headline {
-            &:hover, &:active, &:focus {
-                label, .label {
-                    span {
-                        color: var(--pure-white) !important;
-                    }
-                }
-            }
-        }
-
-        .toggle-switch {
-            display: flex;
-        }
-    }
-
     p {
         a {
             text-decoration: underline;