comand-component-library 3.1.63 → 3.1.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.63",
+  "version": "3.1.66",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -18,7 +18,7 @@
   ],
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^3.2.46",
+    "comand-frontend-framework": "^3.2.48",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",
     "vue": "^3.2.31",

package/src/App.vue

@@ -1,13 +1,13 @@
 <!--suppress HtmlUnknownTarget, NpmUsedModulesInstalled, JSUnresolvedVariable -->
 <template>
     <a id="anchor-back-to-top"></a>
-    <CmdSiteHeader :mainNavigationEntries="navigationData" :sticky="true">
-        <template v-slot:top-header>
-            <CmdTopHeaderNavigation :topHeaderNavigationData="topHeaderNavigationData" v-if="topHeaderNavigationData"/>
-        </template>
+    <CmdSiteHeader :cmdMainNavigation="navigationData" :sticky="true">
         <template v-slot:logo>
-            <CmdCompanyLogo :link="companyLogoData.link" altText="CoManD Logo" :pathDefaultLogo="require('@/assets/images/logo.svg')"
-                            :pathDarkmodeLogo="require('@/assets/images/logo-darkmode.svg')"/>
+            <CmdCompanyLogo :link="companyLogoData.link"
+                            altText="CoManD Logo"
+                            :pathDefaultLogo="require('@/assets/images/logo.svg')"
+                            :pathDarkmodeLogo="require('@/assets/images/logo-darkmode.svg')"
+            />
         </template>
     </CmdSiteHeader>
     <main>
@@ -594,7 +594,7 @@
         <a id="section-bank-account-data"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Bank Account Data</h2>
-            <CmdBankAccountData :account-data="bankAccountData" :cmd-custom-headline="{ text: 'Bank Account', level: 3}" :allow-copy-by-click="true" />
+            <CmdBankAccountData :account-data="bankAccountData" :cmd-custom-headline="{ headlineText: 'Bank Account', headlineLevel: 3}" :allow-copy-by-click="true" />
         </CmdWidthLimitationWrapper>
         <!-- end bank account data ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
@@ -723,12 +723,12 @@
         <a id="section-custom-headline"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Custom Headline</h2>
-            <CmdCustomHeadline icon-class="icon-home" pre-headline="Pre-headline" :headline="{ text: 'Headline level 1', level: '1'}"/>
-            <CmdCustomHeadline :headline="{ text: 'Headline level 2', level: '2'}"/>
-            <CmdCustomHeadline :headline="{ text: 'Headline level 3', level: '3'}"/>
-            <CmdCustomHeadline :headline="{ text: 'Headline level 4', level: '4'}"/>
-            <CmdCustomHeadline :headline="{ text: 'Headline level 5', level: '5'}"/>
-            <CmdCustomHeadline :headline="{ text: 'Headline level 6', level: '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 ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
@@ -748,7 +748,7 @@
         <a id="section-google-maps-integration"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Google Maps&trade;-Integration</h2>
-            <CmdGoogleMaps :addressData="addressData"/>
+            <CmdGoogleMaps :address="addressData"/>
         </CmdWidthLimitationWrapper>
 
         <a id="section-image-gallery"></a>
@@ -818,9 +818,9 @@
         <a id="section-system-message"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">System Message</h2>
-            <CmdSystemMessage status="error"
+            <CmdSystemMessage validationStatus="error"
                               :fullWidth="true"
-                              message="This is an error message!"
+                              systemMessage="This is an error message!"
                               :iconMessage="{iconClass: 'icon-error-circle'}">
                 <ul>
                     <li>Error #1</li>
@@ -828,14 +828,20 @@
                     <li>Error #3</li>
                 </ul>
             </CmdSystemMessage>
-            <CmdSystemMessage status="warning" :fullWidth="true" message="This is a warning message!">
+            <CmdSystemMessage validationStatus="warning"
+                              :fullWidth="true"
+                              systemMessage="This is a warning message!">
                 <p>This is additional text!</p>
             </CmdSystemMessage>
-            <CmdSystemMessage status="success" :fullWidth="true" message="This is a success message!"
+            <CmdSystemMessage validationStatus="success"
+                              :fullWidth="true"
+                              systemMessage="This is a success message!"
                               :iconMessage="{iconClass: 'icon-check-circle'}">
                 <p>This is additional text!</p>
             </CmdSystemMessage>
-            <CmdSystemMessage status="info" :fullWidth="true" message="This is an info message!"
+            <CmdSystemMessage validationStatus="info"
+                              :fullWidth="true"
+                              systemMessage="This is an info message!"
                               :iconMessage="{iconClass: 'icon-info-circle'}">
                 <p>This is additional text!</p>
             </CmdSystemMessage>
@@ -902,19 +908,21 @@
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Upload-Form</h2>
             <h3>Simple 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"
                            :advancedMode="false"
+                           textLegend="Simple upload form"
                            @error="showError"
                            :uploadOptions="{url: 'http://localhost:8888'}"
             />
             <h3>Advanced mode</h3>
             <CmdUploadForm headline="Select files to upload"
                            :enableDragAndDrop="true"
-                           :allowedFileExtensions="['jpg']"
+                           :allowedFileExtensions="['jpg', 'png']"
                            :allowMultipleFileUploads="true"
+                           textLegend="Advanced upload form"
                            :uploadOptions="{url: 'http://localhost:8888'}"
             />
         </CmdWidthLimitationWrapper>
@@ -922,18 +930,26 @@
 
     <CmdWidthLimitationWrapper id="site-footer" inner-component="footer">
         <CmdSwitchLanguage :languages="languagesData" @click="doSomething"/>
-        <CmdFooterNavigation :footerNavigation="footerNavigationData" headline="Links"/>
-        <CmdOpeningHours :openingHours="openingHoursData" :closed="true" headline="Opening hours"
-                         textOpenClosed="Closed right now!" textHolidaysClosed="Closed on holidays"
-                         textMiscInfo="Miscellaneous information"/>
-        <CmdAddressData :addressData="addressData" :linkGoogleMaps="true" headline="Contact"/>
+        <CmdListOfLinks :links="footerNavigationData"
+                        :cmdCustomHeadline="{headlineText: 'List of links', headlineLevel: 6}"
+        />
+        <CmdOpeningHours :openingHours="openingHoursData"
+                         :closed="true"
+                         :cmdCustomHeadline="{headlineText: 'Opening hours', headlineLevel: 6}"
+                         textOpenClosed="Closed right now!"
+                         textHolidaysClosed="Closed on holidays"
+                         textMiscInfo="Miscellaneous information"
+        />
+        <CmdAddressData :addressData="addressData"
+                        :linkGoogleMaps="true"
+                        :cmdCustomHeadline="{headlineText: 'Address data', headlineLevel: 6}"
+        />
     </CmdWidthLimitationWrapper>
 
     <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 +995,6 @@ import tabsData from '@/assets/data/tabs.json'
 import tableDataSmall from '@/assets/data/table-small.json'
 import tableDataLarge from '@/assets/data/table-large.json'
 import thumbnailScrollerData from '@/assets/data/thumbnail-scroller.json'
-import topHeaderNavigationData from '@/assets/data/list-of-links-top-header-navigation.json'
 
 // import used components
 import CmdAddressData from "@/components/CmdAddressData"
@@ -1023,10 +1038,12 @@ import {openFancyBox} from "@/components/CmdFancyBox"
 
 // import external functions
 import * as functions from "@/mixins/FieldValidation.js"
+import CmdListOfLinks from "./components/CmdListOfLinks";
 
 export default {
     name: "App",
     components: {
+        CmdListOfLinks,
         CmdAddressData,
         CmdBackToTopButton,
         CmdBankAccountData,
@@ -1148,8 +1165,7 @@ export default {
             tableDataSmall,
             tableDataLarge,
             tabsData,
-            thumbnailScrollerData,
-            topHeaderNavigationData
+            thumbnailScrollerData
         }
     },
     methods: {

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/list-of-links.json

@@ -21,22 +21,5 @@
     "path": "http://www.comand-cms.com",
     "target": "_blank",
     "tooltip": "Open CoManD-Website in new tab"
-  },
-  {
-    "type":"router",
-    "text": "Router-link with path",
-    "path": "/"
-  },
-  {
-    "type":"router",
-    "text": "Router-link with name",
-    "tooltip": "Go to homepage",
-    "route": {
-      "name": "home",
-      "params": {
-        "param1": "value",
-        "param2": "value"
-      }
-    }
   }
 ]

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/CmdBoxSiteSearch.vue

@@ -126,7 +126,7 @@ export default {
          */
         textLegend: {
             type: String,
-            required: true
+            required: false
         },
         /**
          * toggle legend visibility

package/src/components/CmdCookieDisclaimer.vue

@@ -3,80 +3,84 @@
         <div class="cmd-cookie-disclaimer flex-container vertical">
             <!-- begin CmdCustomHeadline -->
             <CmdCustomHeadline
-                v-if="cmdCustomHeadline"
-                v-bind="cmdCustomHeadline"
+                v-if="cmdCustomHeadlineCookieDisclaimer?.show && cmdCustomHeadlineCookieDisclaimer?.headlineText && cmdCustomHeadlineCookieDisclaimer?.headlineLevel"
+                v-bind="cmdCustomHeadlineCookieDisclaimer"
+                :headlineText="cmdCustomHeadlineCookieDisclaimer.headlineText"
+                :headlineLevel="cmdCustomHeadlineCookieDisclaimer.headlineLevel"
             />
             <!-- end CmdCustomHeadline -->
 
             <!-- begin slot for cookie-options -->
             <slot name="cookie-options">
-                <div v-if="cookieOptions.required">
-                    <h3>{{ cookieOptions.required.headline }}</h3>
-
-<!--                    &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">
-                    <h3>{{ cookieOptions.optional.headline }}</h3>
-<!--                    &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 -->
@@ -87,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')">
@@ -101,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 {
@@ -118,11 +124,45 @@ export default {
     },
     props: {
         /**
-         * properties for CmdCustomHeadline-component
+         * properties for CmdCustomHeadline-component at top of cookie disclaimer
          */
-        cmdCustomHeadline: {
+        cmdCustomHeadlineCookieDisclaimer: {
             type: Object,
-            required: false
+            default() {
+                return {
+                    show: true,
+                    headlineText: "Cookie disclaimer",
+                    headlineLevel: 2
+                }
+            }
+        },
+        /**
+         * property for CmdBox-component surrounding the required cookies
+         */
+        cmdBoxRequiredCookies: {
+            type: Object,
+            default() {
+                return {
+                    collapsible: true,
+                    showHeadline: true,
+                    headlineText: "Required cookies",
+                    headlineLevel: 3
+                }
+            }
+        },
+        /**
+         * property for CmdBox-component surrounding the optional cookies
+         */
+        cmdBoxOptionalCookies: {
+            type: Object,
+            default() {
+                return {
+                    collapsible: true,
+                    showHeadline: true,
+                    headlineText: "Optional cookies",
+                    headlineLevel: 3
+                }
+            }
         },
         /**
          * list of cookie-options
@@ -175,6 +215,12 @@ export default {
     bottom: 0;
     top: auto;
 
+    .cmd-box {
+        .box-body {
+            padding: var(--default-padding);
+        }
+    }
+
     h1 {
         text-align: center;
     }
@@ -191,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;

package/src/components/CmdFormElement.vue

@@ -546,7 +546,40 @@ export default {
                     tooltip: "Info"
                 }
             }
-        }
+        },
+        /**
+         * icon to toggle password-visibility
+         *
+         * element-property must me set to 'input'
+         * type-property must be set to 'password'
+         *
+         */
+        iconPasswordVisible: {
+            type: Object,
+            default() {
+                return {
+                    show: true,
+                    iconClass: "icon-visible",
+                    tooltip: "Show password"
+                }
+            }
+        },
+        /**
+         * icon to toggle password-visibility
+         *
+         * element-property must me set to 'input'
+         * type-property must be set to 'password'
+         *
+         */
+        iconPasswordInvisible: {
+            type: Object,
+            default() {
+                return {
+                    show: true,
+                    iconClass: "icon-not-visible",
+                }
+            }
+        },
     },
     computed: {
         buttonAttrs() {

package/src/components/CmdGoogleMaps.vue

@@ -34,13 +34,6 @@ export default {
 /* begin cmd-google-maps ---------------------------------------------------------------------------------------- */
 .cmd-google-maps {
     border: var(--default-border);
-
-    iframe {
-        display: block;
-        width: 100%;
-        height: 100%;
-    }
 }
-
 /* end cmd-google-maps ------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdMultipleSwitch.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="['label', 'multiple-switch', {disabled: status === 'disabled', error: status === 'error'}]">
-        <span :class="{hidden: !showLegend}">{{ labelText }}</span>
+        <span :class="{hidden: !showLabel}">{{ labelText }}</span>
         <span class="flex-container no-gap no-flex">
             <label :class="{disabled: status === 'disabled'}" :for="multipleswitch.id"
                    v-for="(multipleswitch, index) in multipleSwitches" :key="index">