comand-component-library 3.1.62 → 3.1.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.62",
+  "version": "3.1.65",
   "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" :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'}"/>
         </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,9 +908,9 @@
         <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"
                            @error="showError"
@@ -922,11 +928,20 @@
 
     <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/>
@@ -979,7 +994,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 +1037,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 +1164,7 @@ export default {
             tableDataSmall,
             tableDataLarge,
             tabsData,
-            thumbnailScrollerData,
-            topHeaderNavigationData
+            thumbnailScrollerData
         }
     },
     methods: {

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

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

package/src/components/CmdCookieDisclaimer.vue

@@ -3,16 +3,22 @@
         <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>
-
+                    <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"-->
@@ -48,7 +54,12 @@
                 </div>
                 <hr />
                 <div v-if="cookieOptions.optional">
-                    <h3>{{ cookieOptions.optional.headline }}</h3>
+                    <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"-->
@@ -118,11 +129,43 @@ 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
+                }
+            }
+        },
+        /**
+         * properties for CmdCustomHeadline-component above required cookies
+         */
+        cmdCustomHeadlineRequiredCookies: {
+            type: Object,
+            default() {
+                return {
+                    show: true,
+                    headlineText: "Required cookies",
+                    headlineLevel: 3
+                }
+            }
+        },
+        /**
+         * properties for CmdCustomHeadline-component above optional cookies
+         */
+        cmdCustomHeadlineOptionalCookies: {
+            type: Object,
+            default() {
+                return {
+                    show: true,
+                    headlineText: "Optional cookies",
+                    headlineLevel: 3
+                }
+            }
         },
         /**
          * list of cookie-options

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="cmd-google-maps">
+    <div class="cmd-google-maps responsive-wrapper">
         <iframe :src="locateAddress"></iframe>
     </div>
 </template>
@@ -34,15 +34,6 @@ export default {
 /* begin cmd-google-maps ---------------------------------------------------------------------------------------- */
 .cmd-google-maps {
     border: var(--default-border);
-
-    aspect-ratio: 16/9;
-
-    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">

package/src/components/CmdUploadForm.vue

@@ -1,6 +1,7 @@
 <template>
     <!-- begin advanced mode -->
     <fieldset v-if="advancedMode" :class="['cmd-upload-form flex-container', { 'upload-initiated': uploadInitiated }]">
+        <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
         <!-- begin CmdCustomHeadlineFieldset -->
         <CmdCustomHeadline v-if="cmdCustomHeadlineFieldset"
                            v-bind="cmdCustomHeadlineFieldset"
@@ -24,10 +25,10 @@
 
         <div :class="['box drop-area', { 'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
             <template v-if="!listOfFiles.length">
-                <CmdCustomHeadline v-if="allowMultipleFileUploads" v-bind="cmdCustomHeadline">
+                <CmdCustomHeadline v-if="allowMultipleFileUploads" v-bind="cmdCustomHeadlineNoFilesToUpload" headlineLevel="4">
                     {{ getMessage("cmduploadform.no_files_to_upload") }}
                 </CmdCustomHeadline>
-                <CmdCustomHeadline v-else v-bind="cmdCustomHeadline">
+                <CmdCustomHeadline v-else v-bind="cmdCustomHeadlineNoFilesToUpload" headlineLevel="4">
                     {{ getMessage("cmduploadform.no_file_to_upload") }}
                 </CmdCustomHeadline>
             </template>
@@ -35,7 +36,9 @@
             <!-- begin total-upload information -->
             <template v-else>
                 <template v-if="showTotalUpload && listOfFiles.length !== 1">
-                    <h4>{{ getMessage("cmduploadform.headline.summary_of_all_files") }}</h4>
+                    <CmdCustomHeadline v-bind="cmdCustomHeadlineSummaryOfAllFiles" headlineLevel="4">
+                        {{ getMessage("cmduploadform.headline.summary_of_all_files") }}
+                    </CmdCustomHeadline>
                     <ul v-if="showTotalUpload && listOfFiles.length !== 1" class="list-of-files">
                         <li class="flex-container no-flex">
                             <a
@@ -75,7 +78,9 @@
                 <!-- end total-upload information -->
 
                 <!-- begin list of selected files -->
-                <h4>{{ getMessage("cmduploadform.headline.list_of_selected_files") }}</h4>
+                <CmdCustomHeadline v-bind="cmdCustomHeadlineListOfSelectedFiles" headlineLevel="4">
+                    {{ getMessage("cmduploadform.headline.list_of_selected_files") }}
+                </CmdCustomHeadline>
                 <ul class="list-of-files">
                     <li
                         v-for="(uploadFile, index) in listOfFiles"
@@ -124,12 +129,12 @@
             <!-- end list of selected files -->
 
             <!-- begin upload conditions -->
-            <h4 v-if="allowMultipleFileUploads && listOfFiles.length">
+            <CmdCustomHeadline v-if="allowMultipleFileUploads && listOfFiles.length" v-bind="cmdCustomHeadlineSelectAdditionalFiles" headlineLevel="4">
                 {{ getMessage("cmduploadform.headline.select_additional_files") }}
-            </h4>
-            <h4 v-if="!allowMultipleFileUploads && listOfFiles.length">
+            </CmdCustomHeadline>
+            <CmdCustomHeadline v-if="!allowMultipleFileUploads && listOfFiles.length" v-bind="cmdCustomHeadlineSelectNewFile" headlineLevel="4">
                 {{ getMessage("cmduploadform.headline.select_new_file") }}
-            </h4>
+            </CmdCustomHeadline>
             <dl class="small">
                 <template v-if="maxTotalUploadSize > 0">
                     <dt :class="{ error: totalSize > maxTotalUploadSize }">
@@ -169,6 +174,7 @@
                 </dd>
             </dl>
             <!-- end upload conditions -->
+
             <button
                 type="button"
                 :class="['button upload primary', { disabled: uploadInitiated }]"
@@ -370,13 +376,6 @@ export default {
             type: String,
             default: ""
         },
-        /**
-         * properties for CmdCustomHeadline-component
-         */
-        cmdCustomHeadlineFieldset: {
-            type: Object,
-            required: false
-        },
         /**
          * enable if files can also be dragged (and dropped) into upload-area
          */
@@ -501,12 +500,76 @@ export default {
         cancelIconClass: {
             type: String,
             default: "icon-cancel"
+        },
+        /**
+         * properties for CmdCustomHeadline-component at of the fieldset
+         */
+        cmdCustomHeadlineFieldset: {
+            type: Object,
+            required: false
+        },
+        /**
+         * properties for CmdCustomHeadline-component shown if no files for upload exist
+         */
+        cmdCustomHeadlineNoFilesToUpload: {
+            type: Object,
+            required: false
+        },
+        /**
+         * properties for CmdCustomHeadline-component shown if no file for upload exist
+         */
+        cmdCustomHeadlineNoFileToUpload: {
+            type: Object,
+            required: false
+        },
+        /**
+         * properties for CmdCustomHeadline-component for 'summary of all files'
+         */
+        cmdCustomHeadlineSummaryOfAllFiles: {
+            type: Object,
+            required: false
+        },
+        /**
+         * properties for CmdCustomHeadline-component for 'list of selected files'
+         */
+        cmdCustomHeadlineListOfSelectedFiles: {
+            type: Object,
+            required: false
+        },
+        /**
+         * properties for CmdCustomHeadline-component for 'select additional files'
+         */
+        cmdCustomHeadlineSelectAdditionalFiles: {
+            type: Object,
+            required: false
+        },
+        /**
+         * properties for CmdCustomHeadline-component for 'select new file'
+         */
+        cmdCustomHeadlineSelectNewFile: {
+            type: Object,
+            required: false
+        },
+        /**
+         * toggle visibility for legend-text
+         */
+        showLegend: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * text for legend
+         *
+         * @requiredForAccessibility: true
+         */
+        textLegend: {
+            type: String,
+            required: false
         }
     },
     computed: {
         fileTypeImage() {
             return this.allowedFileExtensions.some(extension => extension.includes('jpg'));
-
         },
         failedUpload() {
             return this.listOfFiles.some(file => file.error)

package/src/mixins/FieldValidation.js

@@ -61,7 +61,7 @@ export default {
          * icon is also used in 'list-of-requirements' (showRequirements-property must be set to true)
          */
         iconHasStateError: {
-            type: String,
+            type: Object,
             default() {
                 return {
                   iconClass: "icon-error-circle",
@@ -74,7 +74,7 @@ export default {
          * icon will be displayed inside the field on the left (in front of the input)
          */
         iconHasStateWarning: {
-            type: String,
+            type: Object,
             default() {
                 return {
                     iconClass: "icon-exclamation-circle",
@@ -88,7 +88,7 @@ export default {
          * icon is also used in 'list-of-requirements' (showRequirements-property must be set to true)
          */
         iconHasStateSuccess: {
-            type: String,
+            type: Object,
             default() {
                 return {
                     iconClass: "icon-check-circle",
@@ -101,7 +101,7 @@ export default {
          * icon will be displayed inside the field on the left (in front of the input)
          */
         iconHasStateInfo: {
-            type: String,
+            type: Object,
             default() {
                 return {
                     iconClass: "icon-info-circle",
@@ -113,7 +113,7 @@ export default {
          * icon to show that caps-lock is activated
          */
         iconCapsLock: {
-            type: String,
+            type: Object,
             default() {
                 return {
                     iconClass: "icon-home"
@@ -124,7 +124,7 @@ export default {
          * icon displayed if password-field is clicked to show password
          */
         iconPasswordVisible: {
-            type: String,
+            type: Object,
             default() {
                 return {
                     iconClass: "icon-visible",
@@ -136,7 +136,7 @@ export default {
          * icon displayed to show password of a password-field
          */
         iconPasswordInvisible: {
-            type: String,
+            type: Object,
             default() {
                 return {
                     iconClass: "icon-not-visible"