comand-component-library 3.1.90 → 3.1.92

package/src/components/CmdCookieDisclaimer.vue

@@ -4,7 +4,6 @@
             <!-- begin CmdHeadline -->
             <CmdHeadline
                 v-if="cmdHeadlineCookieDisclaimer?.show && cmdHeadlineCookieDisclaimer?.headlineText && cmdHeadlineCookieDisclaimer?.headlineLevel"
-                v-bind="cmdHeadlineCookieDisclaimer"
                 :headlineText="cmdHeadlineCookieDisclaimer.headlineText"
                 :headlineLevel="cmdHeadlineCookieDisclaimer.headlineLevel"
             />
@@ -14,11 +13,18 @@
             <slot name="cookie-options">
                 <!-- begin required cookies -->
                 <div v-if="cookieOptions?.required" class="flex-container vertical">
-                    <CmdHeadline v-if="cmdBoxRequiredCookies?.showHeadline" :headline-text="cmdBoxRequiredCookies?.headlineText" :headline-level="cmdBoxRequiredCookies?.headlineLevel "/>
+                    <!-- begin CmdHeadline -->
+                    <CmdHeadline
+                        v-if="cmdBoxRequiredCookies?.showHeadline"
+                        :headline-text="cmdBoxRequiredCookies?.headlineText"
+                        :headline-level="cmdBoxRequiredCookies?.headlineLevel "
+                    />
+                    <!-- end CmdHeadline -->
+
                     <!-- begin CmdBox -->
                     <CmdBox v-for="(cookie, index) in cookieOptions.required.cookies || []"
                             :useSlots="['header', 'body']"
-                            v-bind="cmdBoxRequiredCookies"
+                            :collapsible="cmdBoxRequiredCookies?.collapsible"
                             :key="index"
                     >
                         <template v-slot:header>
@@ -57,11 +63,18 @@
 
                 <!-- begin optional cookies -->
                 <div v-if="cookieOptions?.optional" class="flex-container vertical">
-                    <CmdHeadline v-if="cmdBoxOptionalCookies?.showHeadline" :headline-text="cmdBoxOptionalCookies?.headlineText" :headline-level="cmdBoxOptionalCookies?.headlineLevel "/>
+                    <!-- begin CmdHeadline -->
+                    <CmdHeadline
+                        v-if="cmdBoxOptionalCookies?.showHeadline"
+                        :headline-text="cmdBoxOptionalCookies?.headlineText"
+                        :headline-level="cmdBoxOptionalCookies?.headlineLevel
+                    "/>
+                    <!-- end CmdHeadline -->
+
                     <!-- begin CmdBox -->
                     <CmdBox v-for="(cookie, index) in cookieOptions.optional.cookies || []"
                             :useSlots="['header', 'body']"
-                            v-bind="cmdBoxOptionalCookies"
+                            :collapsible="cmdBoxOptionalCookies?.collapsible"
                             :key="index"
                     >
                         <template v-slot:header>
@@ -172,7 +185,7 @@ export default {
                     showHeadline: true,
                     headlineText: "Required cookies",
                     headlineLevel: 3
-                }
+                    }
             }
         },
         /**
@@ -282,9 +295,25 @@ export default {
 
     .cmd-box {
         .box-header {
-            label.disabled {
-                .label-text span {
-                    color: var(--pure-white) !important;
+            justify-content: unset; /* overwrite setting for collapsible boxes */
+
+            label {
+                &.disabled {
+                    .label-text span {
+                        color: var(--pure-white) !important; /* required to set label-text in header to white */
+                    }
+                }
+
+                & + .toggle-icon {
+                    width: 100%;
+                    justify-content: flex-end;
+                    text-align: right;
+                }
+            }
+
+            &:hover, &:active, &:focus {
+                label.disabled .label-text span {
+                    color: var(--disabled-color) !important; /* required to set label-text on hover back to disabled-color */
                 }
             }
         }

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) {
@@ -701,6 +687,17 @@ export default {
         }
     },
     methods: {
+        additionalStandardRequirements() {
+            const requirements = []
+            // check if field is type "email"
+            if(this.$attrs.type === "email") {
+                requirements.push({
+                    message: this.getMessage("cmdformelement.validationTooltip.is_valid_email"),
+                    valid: () => this.$refs.input.checkValidity()
+                })
+            }
+            return requirements
+        },
         getDomElement() {
             return this.$refs.label
         },
@@ -720,8 +717,6 @@ export default {
             const useValidation = event.target.closest("form")?.dataset.useValidation === "true"
 
             if (useValidation) {
-                this.validationStatus = ""
-
                 // if input is filled, set status to success (expect for checkboxes and radiobuttons)
                 if (!["checkbox", "radio"].includes(this.$attrs.type) && this.modelValue) {
                     this.validationStatus = "success"
@@ -742,6 +737,8 @@ export default {
                         }
                     }
                 }
+
+                this.$emit('validation-status-change', this.validationStatus)
             }
         },
         onBlur(event) {
@@ -804,7 +801,7 @@ export default {
     watch: {
         status: {
             handler() {
-                this.validationStatus = this.status
+                this.validationStatus = this.status || ""
             },
             immediate: true
         }

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