comand-component-library 3.1.90 → 3.1.91

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

@@ -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>

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

package/src/components/CmdNewsletterSubscription.vue

@@ -0,0 +1,199 @@
+<template>
+        <!-- begin cmd-input-group -->
+        <CmdInputGroup
+            inputTypes="radio"
+            :labelText="cmdInputGroup.labelText"
+            :showLabel="cmdInputGroup.showLabel"
+            :inputElements="cmdInputGroup.inputElements"
+            v-model="subscription"
+        />
+        <!-- end cmd-input-group -->
+
+        <!-- begin cmd-form-element -->
+        <CmdFormElement
+            element="input"
+            type="email"
+            :placeholder="cmdFormElementEmail.placeholder"
+            :labelText="cmdFormElementEmail.labelText"
+            id="cmd-email-newsletter-subscription"
+            :required="cmdFormElementEmail.required"
+            :useCustomTooltip="cmdFormElementEmail.useCustomTooltip"
+            v-model="email"
+            @validationStatusChange="checkValidationStatus"
+        />
+        <!-- end cmd-form-element -->
+
+        <div class="button-wrapper">
+            <!-- begin cmd-form-element -->
+            <CmdFormElement
+                element="button"
+                :type="buttonType"
+                :disabled="buttonDisabled"
+                :nativeButton="cmdFormElementSubmit"
+                @click="sendData"
+            />
+            <!-- end cmd-form-element -->
+        </div>
+</template>
+
+<script>
+// import components
+import CmdFormElement from "./CmdFormElement"
+import CmdInputGroup from "./CmdInputGroup"
+
+export default {
+    name: "CmdNewsletterSubscription",
+    emits: ["button-click"],
+    components: {
+        CmdFormElement,
+        CmdInputGroup
+    },
+    data() {
+        return {
+            buttonDisabled: true
+        }
+    },
+    props: {
+        /**
+         * set value for v-model (must be named modelValue in vue3 if default v-model should be used)
+         */
+        modelValue: {
+            type: Object,
+            default() {
+                return {
+                    subscription: "subscribe",
+                    email: ""
+                }
+            }
+        },
+        buttonType: {
+          type: String,
+          default: "button",
+            validator(value) {
+                return value === "submit" || value === "button"
+            }
+        },
+        /**
+         * text used as legend for login-fieldset
+         *
+         * @requiredForAccessibility: true
+         */
+        textLegend: {
+            type: String,
+            default: "Stay up-to-date"
+        },
+        /**
+         * toggle legend visibility
+         */
+        showLegend: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * properties for CmdInputGroup-component
+         */
+        cmdInputGroup: {
+            type: Object,
+            default: function () {
+                return {
+                    labelText: "Choose option",
+                    showLabel: false,
+                    inputElements: [
+                        {
+                            labelText: "Subscribe",
+                            id: "radio-subscribe",
+                            name: "cmd-subscribe-group",
+                            value: "subscribe"
+                        },
+                        {
+                            labelText: "Unsubscribe",
+                            id: "radio-unsubscribe",
+                            name: "cmd-subscribe-group",
+                            value: "unsubscribe"
+                        }
+                    ]
+                }
+            }
+        },
+        /**
+         * properties for CmdFormElement-component for email-field
+         */
+        cmdFormElementEmail: {
+            type: Object,
+            default: function () {
+                return {
+                    labelText: "Email-Address:",
+                    placeholder: "Enter your email-address",
+                    required: true
+                }
+            }
+        },
+        /**
+         * properties for CmdFormElement-component for submit-button
+         */
+        cmdFormElementSubmit: {
+            type: Object,
+            default: function () {
+                return {
+                    text: "Submit",
+                    icon: {
+                        show: true,
+                        iconClass: "icon-message-send",
+                        position: "before",
+                        tooltip: ""
+                    }
+                }
+            }
+        }
+    },
+    computed: {
+        subscription: {
+            get() {
+                return this.modelValue.subscription || "subscribe"
+            },
+            set(value) {
+                this.$emit("update:modelValue", {subscription: value, email: this.email})
+            }
+        },
+        email: {
+            get() {
+                return this.modelValue.email
+            },
+            set(value) {
+                this.$emit("update:modelValue", {subscription: this.subscription, email: value})
+            }
+        }
+    },
+    methods: {
+        sendData(event) {
+            this.$emit("button-click", {subscription: this.subscription, email: this.email, originalEvent: event})
+        },
+        checkValidationStatus(event) {
+            this.buttonDisabled = event !== "success"
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+/* begin cmd-back-to-top-button ---------------------------------------------------------------------------------------- */
+.cmd-back-to-top-button {
+    padding: var(--default-padding);
+    display: inline-block;
+    position: fixed;
+    right: 1rem;
+    bottom: 1rem;
+    text-decoration: none;
+    z-index: 1000;
+    border: var(--default-border);
+    background: var(--color-scheme-background-color);
+    border-radius: var(--full-circle);
+
+    &:hover, &:active, &:focus {
+        border-color: var(--primary-color);
+        transition: var(--default-transition);
+    }
+}
+
+/* cmd-back-to-top-button ------------------------------------------------------------------------------------------ */
+</style>