comand-component-library 3.1.88 → 3.1.91

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() {

package/src/components/CmdFancyBox.vue

@@ -3,9 +3,9 @@
     <div v-if="showFancyBox"
          :class="['cmd-fancybox', {'show-overlay': showOverlay}]"
          role="dialog"
-         aria-labelledby="fancybox">
+         :aria-labelledby="htmlId">
       <div class="popup" :class="{'image' : fancyBoxImageUrl || fancyBoxGallery }">
-        <!-- begin print button -->
+        <!-- begin print buttons -->
         <div class="button-wrapper no-flex"
              v-if="(fancyboxOptions.printButtons && (fancyboxOptions.printButtons.color || fancyboxOptions.printButtons.grayscale)) || fancyboxOptions.closeIcon">
           <a href="#"
@@ -22,15 +22,27 @@
              id="print-grayscale"
              @click.prevent="printInGrayscale = true">
           </a>
-          <!-- end print button -->
+          <!-- end print buttons -->
+
+          <!-- begin close-icon -->
           <a href="#"
              v-if="fancyboxOptions.closeIcon"
              :class="fancyboxOptions.closeIcon.iconClass"
              :title="fancyboxOptions.closeIcon.tooltip"
              @click.prevent="close">
           </a>
+          <!-- end close-icon -->
         </div>
         <div :class="{'grayscale' : printInGrayscale}">
+            <!-- begin CmdHeadline -->
+            <CmdHeadline
+                v-show="cmdHeadline?.show"
+                :headlineText="cmdHeadline?.headlineText"
+                :headlineLevel="cmdHeadline?.headlineLevel"
+                :id="htmlId"
+            />
+            <!-- end CmdHeadline -->
+
           <div v-if="fancyBoxImageUrl" class="content">
             <img :src="fancyBoxImageUrl" :alt="altText" />
           </div>
@@ -75,7 +87,11 @@
 <script>
     import {defineComponent, createApp} from "vue"
 
+    // import mixins
+    import Identifier from "../mixins/Identifier"
+
     // import components
+    import CmdHeadline from "./CmdHeadline"
     import CmdSlideButton from "./CmdSlideButton.vue"
     import CmdThumbnailScroller from './CmdThumbnailScroller.vue'
 
@@ -92,9 +108,23 @@
     const FancyBox = defineComponent({
         name: "CmdFancyBox",
         components: {
+            CmdHeadline,
             CmdSlideButton,
             CmdThumbnailScroller
         },
+        mixins: [
+            Identifier
+        ],
+        data() {
+            return {
+                fancyBoxContent: null,
+                fancyBoxElements: null,
+                fancyBoxImageUrl: null,
+                index: this.defaultGalleryIndex,
+                printInGrayscale: false,
+                showFancyBox: this.show
+            }
+        },
         props: {
             /**
              * set if content should be loaded by url
@@ -188,16 +218,15 @@
             altText: {
                 type: String,
                 required: false
-            }
-        },
-        data() {
-            return {
-                fancyBoxImageUrl: null,
-                fancyBoxContent: null,
-                fancyBoxElements: null,
-                showFancyBox: this.show,
-                printInGrayscale: false,
-                index: this.defaultGalleryIndex
+            },
+            /**
+             * properties for CmdHeadline-component
+             *
+             * @requiredForAccessibility: true
+             */
+            cmdHeadline: {
+                type: Object,
+                required: false
             }
         },
         created() {
@@ -362,6 +391,10 @@
     border-radius: var(--border-radius);
     overflow-y: auto;
 
+    .cmd-cookie-disclaimer {
+        padding: 0;
+    }
+
     > .grayscale {
       filter: grayscale(1);
     }

package/src/components/CmdFormElement.vue

@@ -15,13 +15,14 @@
                 'has-state': validationStatus
                }
            ]"
-           :for="labelId"
+           :for="htmlId"
            :title="$attrs.title"
            ref="label">
 
         <!-- begin label-text (+ required asterisk) -->
         <span v-if="(labelText || $slots.labeltext) && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
-              :class="['label-text', !showLabel ? 'hidden' : undefined]">
+              v-show="showLabel"
+              class="label-text">
             <span>
                 <template v-if="labelText">{{ labelText }}</template>
                 <!-- begin slot 'labeltext' -->
@@ -36,9 +37,9 @@
                 ref="tooltip"
                 :validationStatus="validationStatus"
                 :validationMessage="getValidationMessage"
-                :validationTooltip="validationTooltip"
                 :relatedId="tooltipId"
                 :cmdListOfRequirements="listOfRequirements"
+                :role="validationStatus === 'error' ? 'alert' : 'dialog'"
             />
             <!-- end CmdTooltipForInputElements -->
 
@@ -47,10 +48,9 @@
                 @click.prevent
                 :class="getStatusIconClass"
                 :title="validationTooltip"
-                :aria-errormessage="getValidationMessage"
+                :aria-errormessage="tooltipId"
                 aria-live="assertive"
-                :id="tooltipId"
-                :role="validationStatus === 'error' ? 'alert' : 'dialog'">
+                :id="tooltipId">
             </a>
         </span>
         <!-- end label-text (+ required asterisk) -->
@@ -63,13 +63,14 @@
         <template v-if="element === 'input' && $attrs.type !== 'checkbox' && $attrs.type !== 'radio' && $attrs.type !== 'search'">
             <input
                 v-bind="elementAttributes"
-                :id="labelId"
+                :id="htmlId"
                 :class="inputClass"
                 @focus="tooltip = true"
                 @blur="onBlur"
                 @input="onInput"
                 @mouseover="datalistFocus"
                 @keyup="checkForCapsLock"
+                @change="$emit('change', $event)"
                 :autocomplete="autocomplete"
                 :list="datalist ? datalist.id : null"
                 :value="modelValue"
@@ -109,7 +110,7 @@
                     :checked="isChecked"
                     :value="inputValue"
                     :class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch }]"
-                    :id="labelId"
+                    :id="htmlId"
                     :disabled="$attrs.disabled"
                     :aria-invalid="validationStatus === 'error'"
                 />
@@ -133,7 +134,7 @@
                            :checked="isChecked"
                            :value="inputValue"
                            :class="{inputClass, validationStatus}"
-                           :id="labelId"
+                           :id="htmlId"
                            :disabled="$attrs.disabled"
                            :aria-invalid="validationStatus === 'error'"
                     />
@@ -152,7 +153,7 @@
         <!-- begin selectbox -->
         <select v-if="element === 'select'"
                 v-bind="elementAttributes"
-                :id="labelId"
+                :id="htmlId"
                 @blur="onBlur"
                 @change="$emit('update:modelValue', $event.target.value)">
             <option v-for="(option, index) in selectOptions" :key="index" :value="option.value"
@@ -164,7 +165,7 @@
         <!-- begin textarea -->
         <textarea v-if="element === 'textarea'"
                   v-bind="elementAttributes"
-                  :id="labelId"
+                  :id="htmlId"
                   :value="modelValue"
                   :maxlength="getMaxLength()"
                   @input="onInput"
@@ -179,7 +180,7 @@
             <span class="search-field-wrapper flex-container no-gap">
                 <input
                     v-bind="elementAttributes"
-                    :id="labelId"
+                    :id="htmlId"
                     @input="onInput"
                     :maxlength="getMaxLength()"
                     :value="modelValue"
@@ -206,13 +207,11 @@
 </template>
 
 <script>
-// import utils
-import {createUuid} from "../utils/common.js"
-
 // import mixins
 import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdFormElement/DefaultMessageProperties"
 import FieldValidation from "../mixins/FieldValidation.js"
+import Identifier from "../mixins/Identifier.js"
 import Tooltip from "../mixins/Tooltip.js"
 
 // import components
@@ -228,6 +227,7 @@ export default {
         I18n,
         DefaultMessageProperties,
         FieldValidation,
+        Identifier,
         Tooltip
     ],
     data() {
@@ -347,13 +347,6 @@ export default {
             type: String,
             required: false
         },
-        /**
-         * if for native form-element
-         */
-        id: {
-            type: String,
-            required: false
-        },
         /**
          * set if a native datalist should be used
          */
@@ -682,13 +675,6 @@ export default {
             }
             return null
         },
-        // get ID for accessibility
-        labelId() {
-            if (this.$attrs.id !== undefined) {
-                return this.$attrs.id
-            }
-            return "label-" + createUuid()
-        },
         // toggle icons for toggle-switch
         toggleSwitchIconClass() {
             if(this.toggleSwitch && this.useIconsForToggleSwitch && this.toggleSwitchUncheckedIconClass && this.toggleSwitchCheckedIconClass) {
@@ -742,6 +728,8 @@ export default {
                         }
                     }
                 }
+
+                this.$emit('validation-status-change', this.validationStatus)
             }
         },
         onBlur(event) {

package/src/components/CmdImageGallery.vue

@@ -4,7 +4,7 @@
            :key="index"
            @click.prevent="showFancyBox(index)"
            href="#"
-           :title="getMessage('cmdsitesearch.labeltext.open_large_image')">
+           :title="getMessage('cmdimagegallery.tooltip.open_large_image')">
             <figure>
                 <figcaption v-if="image.figcaption && figcaptionPosition === 'top'">{{ image.figcaption }}</figcaption>
                 <img :src="image.srcImageSmall" :alt="image.alt" />
@@ -19,7 +19,7 @@ import {openFancyBox} from "./CmdFancyBox"
 
 // import mixins
 import I18n from "../mixins/I18n"
-import DefaultMessageProperties from "../mixins/CmdSiteSearch/DefaultMessageProperties"
+import DefaultMessageProperties from "../mixins/CmdImageGallery/DefaultMessageProperties"
 
 export default {
     name: "CmdImageGallery",

package/src/components/CmdInputGroup.vue

@@ -8,9 +8,10 @@
         'toggle-switch': toggleSwitch,
         'has-state': validationStatus
         }
-        ]">
-        <span :class="['label-text', { hidden: !showLabel}]" :id="labelId" :aria-labelledby="labelId">
-             <span>{{ labelText }}<sup v-if="required">*</sup></span>
+        ]"
+         :aria-labelledby="htmlId">
+        <span v-show="showLabel" class="label-text">
+             <span :id="htmlId">{{ labelText }}<sup v-if="required">*</sup></span>
 
             <!-- begin CmdTooltipForInputElements -->
             <CmdTooltipForInputElements
@@ -20,11 +21,11 @@
                 :inputRequirements="inputRequirements"
                 :validationStatus="validationStatus"
                 :validationMessage="getValidationMessage"
-                :validationTooltip="validationTooltip"
                 :inputAttributes="$attrs"
                 :inputModelValue="modelValue"
                 :helplink="helplink"
                 :relatedId="tooltipId"
+                :role="validationStatus === 'error' ? 'alert' : 'dialog'"
             />
             <!-- end CmdTooltipForInputElements -->
 
@@ -33,10 +34,9 @@
                @click.prevent
                :class="getStatusIconClass"
                :title="validationTooltip"
-               :aria-errormessage="getValidationMessage"
+               :aria-errormessage="tooltipId"
                aria-live="assertive"
-               :id="tooltipId"
-               :role="validationStatus === 'error' ? 'alert' : 'dialog'">
+               :id="tooltipId">
             </a>
         </span>
         <span v-if="!useSlot" :class="['flex-container', {'no-flex': !stretchHorizontally, 'no-gap': multipleSwitch}]">
@@ -66,10 +66,9 @@
 </template>
 
 <script>
-import {createUuid} from "../utils/common"
-
 // import mixins
 import FieldValidation from "../mixins/FieldValidation.js"
+import Identifier from "../mixins/Identifier"
 import Tooltip from "../mixins/Tooltip.js"
 
 // import components
@@ -81,6 +80,7 @@ export default {
     },
     mixins: [
         FieldValidation,
+        Identifier,
         Tooltip
     ],
     data() {
@@ -239,13 +239,6 @@ export default {
             }
             return this.getMessage("cmdformelement.validationTooltip.open_field_requirements")
         },
-        // get ID for accessibility
-        labelId() {
-            if (this.$attrs.id !== undefined) {
-                return this.$attrs.id
-            }
-            return "label-" + createUuid()
-        },
         inputValue: {
             // read inputValue
             get() {

package/src/components/CmdLoginForm.vue

@@ -4,7 +4,7 @@
         <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
         <!-- begin CmdHeadline -->
         <CmdHeadline v-if="cmdHeadlineLoginForm"
-                           v-bind="cmdHeadlineLoginForm"/>
+                     v-bind="cmdHeadlineLoginForm"/>
         <!-- end CmdHeadline -->
 
         <!-- being form elements -->

package/src/components/CmdMainNavigation.vue

@@ -1,14 +1,14 @@
 <template>
     <div
         :class="[
-            'cmd-main-navigation main-navigation-wrapper',
+            'cmd-main-navigation',
             {
                 'hide-sub-navigation' : !showSubNavigations,
                 'open-off-canvas': showOffcanvas,
                 'persist-on-mobile': persistOnMobile,
                 'show-content-overlay': showContentOverlay
             }
-        ]">
+        ]" id="main-navigation-wrapper">
         <nav>
             <!-- begin main-level -->
             <ul :class="{'stretch-items' : stretchMainItems}">
@@ -31,7 +31,7 @@
                         <span v-if="navigationEntry.iconClass" :class="navigationEntry.iconClass"></span>
                         <span v-if="navigationEntry.text">{{ navigationEntry.text }}</span>
                         <span v-if="navigationEntry?.subentries?.length"
-                              :class="subentriesIconClass"
+                              :class="['subentry-icon', subentriesIconClass]"
                         ></span>
                     </a>
                     <!-- end type === href -->
@@ -47,7 +47,7 @@
                         <span v-if="navigationEntry.iconClass" :class="navigationEntry.iconClass"></span>
                         <span v-if="navigationEntry.text">{{ navigationEntry.text }}</span>
                         <span v-if="navigationEntry.subentries && navigationEntry.subentries.length > 0"
-                              :class="subentriesIconClass"></span>
+                              :class="['subentry-icon', subentriesIconClass]"></span>
                     </router-link>
                     <!-- end type === router -->
 
@@ -64,7 +64,7 @@
                                 <span v-if="navigationSubEntry.iconClass" :class="navigationSubEntry.iconClass"></span>
                                 <span v-if="navigationSubEntry.text">{{ navigationSubEntry.text }}</span>
                                 <span v-if="navigationSubEntry.subentries && navigationSubEntry.subentries.length > 0"
-                                      :class="subentriesIconClass"
+                                      :class="['subentry-icon', subentriesIconClass]"
                                 ></span>
                             </a>
                             <!-- end type === href -->
@@ -78,7 +78,7 @@
                                 <span v-if="navigationSubEntry.iconClass" :class="navigationSubEntry.iconClass"></span>
                                 <span v-if="navigationSubEntry.text">{{ navigationSubEntry.text }}</span>
                                 <span v-if="navigationSubEntry.subentries && navigationSubEntry.subentries.length > 0"
-                                      :class="subentriesIconClass"></span>
+                                      :class="['subentry-icon', subentriesIconClass]"></span>
                             </router-link>
                             <!-- end type === router -->
 
@@ -95,7 +95,7 @@
                                         <span v-if="navigationSubSubEntry.iconClass" :class="navigationSubSubEntry.iconClass"></span>
                                         <span v-if="navigationSubSubEntry.text">{{ navigationSubSubEntry.text }}</span>
                                         <span v-if="navigationSubSubEntry.subentries && navigationSubSubEntry.subentries.length > 0"
-                                              :class="subentriesIconClass"
+                                              :class="['subentry-icon', subentriesIconClass]"
                                         ></span>
                                     </a>
                                     <!-- end type === href -->
@@ -109,7 +109,7 @@
                                         <span v-if="navigationSubSubEntry.iconClass" :class="navigationSubSubEntry.iconClass"></span>
                                         <span v-if="navigationSubSubEntry.text">{{ navigationSubSubEntry.text }}</span>
                                         <span v-if="navigationSubSubEntry.subentries && navigationSubSubEntry.subentries.length > 0"
-                                              :class="subentriesIconClass"></span>
+                                              :class="['subentry-icon', subentriesIconClass]"></span>
                                     </router-link>
                                     <!-- end type === router -->
                                 </li>
@@ -225,22 +225,27 @@ export default {
     },
     methods: {
         executeLink(event, navigationEntry) {
+            // execute default-link
             if (navigationEntry.target || (navigationEntry.path.length > 1)) {
                 this.showOffcanvas = false
                 return true
             }
-            if (navigationEntry.path === '#' || navigationEntry.path === '') {
-                event.preventDefault()
-                this.showOffcanvas = false
-                this.$emit('click', navigationEntry.path)
 
-            }
-            if (!(navigationEntry?.subentries?.length)) {
-                this.showOffcanvas = false
-            } else {
+            // toggle subentries (no link execution)
+            if(navigationEntry?.subentries?.length) {
+                event.preventDefault()
                 // add entry "open" to navigationEntry-object (will be watched by vue3 automatically)
                 navigationEntry.open = !navigationEntry.open
+                return
+            }
+
+            // emit event to handle navigation from outside
+            if (navigationEntry.path === '#' || navigationEntry.path === '') {
+                event.preventDefault()
+                this.$emit('click', navigationEntry.path)
             }
+
+            this.showOffcanvas = false
         },
         getRoute(navigationEntry) {
             return getRoute(navigationEntry)
@@ -295,9 +300,8 @@ export default {
     }
 }
 
-
 @media only screen and (max-width: $medium-max-width) {
-    .cmd-main-navigation {
+    .cmd-main-navigation#main-navigation-wrapper {
         --nav-transition: all .5s linear;
         display: flex;
         background: none; /* overwrite framework-css */
@@ -388,14 +392,6 @@ export default {
                             }
                         }
 
-                        > a {
-                            span {
-                                & + span[class*="icon"]::before {
-                                    display: inline-block;
-                                }
-                            }
-                        }
-
                         /* sub-level 1 */
                         ul {
                             li {
@@ -406,9 +402,15 @@ export default {
                                 &:last-child {
                                     border-bottom: 0;
                                 }
-
-                                a {
+                                > a {
                                     padding-left: calc(var(--default-margin) * 2);
+
+                                    span {
+                                        & + span[class*="icon"]::before {
+                                            display: inline-block;
+                                            transform: rotate(0);
+                                        }
+                                    }
                                 }
 
                                 /* sub-level 2 */
@@ -435,26 +437,6 @@ export default {
                                 display: block;
                                 opacity: 1;
                                 transition: var(--nav-transition);
-
-                                > li {
-                                    > a {
-                                        span {
-                                            + span[class*="icon"]::before {
-
-                                            }
-                                        }
-                                    }
-
-                                    &.open {
-                                        > a {
-                                            span {
-                                                + span[class*="icon"]::before {
-
-                                                }
-                                            }
-                                        }
-                                    }
-                                }
                             }
                         }
                     }

package/src/components/CmdMultipleSwitch.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="['cmd-multiple-switch multiple-switch label', {disabled: status === 'disabled', error: status === 'error'}]" :aria-labelledby="labelId">
-        <span :class="{hidden: !showLabel}" :id="labelId">{{ labelText }}</span>
+        <span v-show="showLabel" :id="htmlId">{{ 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">
@@ -20,11 +20,12 @@
 </template>
 
 <script>
-// import utils
-import {createUuid} from "../utils/common.js"
+// import mixins
+import Identifier from "../mixins/Identifier"
 
 export default {
     name: "CmdMultipleSwitch",
+    mixins: [Identifier],
     props: {
         /**
          * value for v-model
@@ -83,15 +84,6 @@ export default {
             required: false
         }
     },
-    computed: {
-        // get ID for accessibility
-        labelId() {
-            if(this.$attrs.id !== undefined) {
-                return this.$attrs.id
-            }
-            return "label-" + createUuid()
-        }
-    },
     methods: {
         onChange(e) {
             if (typeof this.value === "string") {