comand-component-library 3.1.64 → 3.1.67

package/src/components/CmdCookieDisclaimer.vue

@@ -3,80 +3,84 @@
         <div class="cmd-cookie-disclaimer flex-container vertical">
             <!-- begin CmdCustomHeadline -->
             <CmdCustomHeadline
-                v-if="cmdCustomHeadline"
-                v-bind="cmdCustomHeadline"
+                v-if="cmdCustomHeadlineCookieDisclaimer?.show && cmdCustomHeadlineCookieDisclaimer?.headlineText && cmdCustomHeadlineCookieDisclaimer?.headlineLevel"
+                v-bind="cmdCustomHeadlineCookieDisclaimer"
+                :headlineText="cmdCustomHeadlineCookieDisclaimer.headlineText"
+                :headlineLevel="cmdCustomHeadlineCookieDisclaimer.headlineLevel"
             />
             <!-- end CmdCustomHeadline -->
 
             <!-- begin slot for cookie-options -->
             <slot name="cookie-options">
-                <div v-if="cookieOptions.required">
-                    <h3>{{ cookieOptions.required.headline }}</h3>
-
-<!--                    &lt;!&ndash; begin CmdAccordion &ndash;&gt;-->
-<!--                    <CmdAccordion :accordion-data="cookieOptions.required.cookies.length" :accordionData="2">-->
-<!--                        <template v-for="(cookie, index) in cookieOptions.required.cookies"-->
-<!--                                  v-slot:[`accordionHeadline${index}`]-->
-<!--                                  :key="index">-->
-<!--                            &lt;!&ndash; begin CmdSwitchButton &ndash;&gt;-->
-<!--                            <CmdSwitchButton-->
-<!--                                type="checkbox"-->
-<!--                                :id="cookie.id"-->
-<!--                                :labelText="cookie.labelText"-->
-<!--                                v-model="cookie.checked"-->
-<!--                                :status="cookie.status"-->
-<!--                                disabled="disabled"-->
-<!--                            />-->
-<!--                            &lt;!&ndash; end CmdSwitchButton &ndash;&gt;-->
-<!--                        </template>-->
-<!--                        <template v-for="(cookie, index) in cookieOptions.required.cookies"-->
-<!--                                  v-slot:[`accordionContent${index}`]-->
-<!--                                  :key="index">-->
-<!--                            <p v-if="cookie.description">{{ cookie.description }}</p>-->
-<!--                            <p v-if="cookie.linkDataPrivacy">-->
-<!--                                {{ cookie.linkDataPrivacy.label }}-->
-<!--                                <a @click="openDataPrivacy"-->
-<!--                                   :href="cookie.linkDataPrivacy.link"-->
-<!--                                   :target="cookie.linkDataPrivacy.target">-->
-<!--                                    {{ cookie.linkDataPrivacy.linkText }}-->
-<!--                                </a>-->
-<!--                            </p>-->
-<!--                            <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>-->
-<!--                        </template>-->
-<!--                    </CmdAccordion>-->
-<!--                    &lt;!&ndash; end CmdAccordion &ndash;&gt;-->
+                <div v-if="cookieOptions.required" class="flex-container vertical">
+                    <CmdCustomHeadline v-if="cmdBoxRequiredCookies?.showHeadline" :headline-text="cmdBoxRequiredCookies?.headlineText" :headline-level="cmdBoxRequiredCookies?.headlineLevel "/>
+                    <!-- begin CmdBox -->
+                    <CmdBox v-for="(cookie, index) in cookieOptions.required.cookies"
+                            :useSlots="['header', 'body']"
+                            v-bind="cmdBoxRequiredCookies"
+                            :key="index"
+                    >
+                        <template v-slot:header>
+                            <!-- begin CmdSwitchButton -->
+                            <CmdSwitchButton
+                                type="checkbox"
+                                :id="cookie.id"
+                                :labelText="cookie.labelText"
+                                v-model="cookie.checked"
+                                :status="cookie.status"
+                                disabled="disabled"
+                            />
+                            <!-- end CmdSwitchButton -->
+                        </template>
+                        <template v-slot:body>
+                            <p v-if="cookie.description">{{ cookie.description }}</p>
+                            <p v-if="cookie.linkDataPrivacy">
+                                {{ cookie.linkDataPrivacy.label }}
+                                <a @click="openDataPrivacy"
+                                   :href="cookie.linkDataPrivacy.link"
+                                   :target="cookie.linkDataPrivacy.target">
+                                    {{ cookie.linkDataPrivacy.linkText }}
+                                </a>
+                            </p>
+                            <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
+                        </template>
+                    </CmdBox>
+                    <!-- end CmdBox -->
                 </div>
-                <hr />
-                <div v-if="cookieOptions.optional">
-                    <h3>{{ cookieOptions.optional.headline }}</h3>
-<!--                    &lt;!&ndash; begin CmdAccordion &ndash;&gt;-->
-<!--                    <CmdAccordion :accordion-data="cookieOptions.optional.cookies.length" :accordionData="2">-->
-<!--                        <template v-for="(cookie, index) in cookieOptions.optional.cookies"-->
-<!--                                  v-slot:[`accordionHeadline${index}`]-->
-<!--                                  :key="index">-->
-<!--                            &lt;!&ndash; begin CmdSwitchButton &ndash;&gt;-->
-<!--                            <CmdSwitchButton-->
-<!--                                type="checkbox"-->
-<!--                                :id="cookie.id"-->
-<!--                                :labelText="cookie.labelText"-->
-<!--                                v-model="cookie.checked"-->
-<!--                                :status="cookie.status"-->
-<!--                            />-->
-<!--                            &lt;!&ndash; end CmdSwitchButton &ndash;&gt;-->
-<!--                        </template>-->
-<!--                        <template v-for="(cookie, index) in cookieOptions.optional.cookies"-->
-<!--                                  v-slot:[`accordionContent${index}`]-->
-<!--                                  :key="index">-->
-<!--                            <p>{{ cookie.description }}</p>-->
-<!--                            <p v-if="cookie.linkDataPrivacy">-->
-<!--                                {{ cookie.linkDataPrivacy.label }}-->
-<!--                                <a @click="openDataPrivacy" :href="cookie.linkDataPrivacy.link"-->
-<!--                                   :target="cookie.linkDataPrivacy.target">{{ cookie.linkDataPrivacy.linkText }}</a>-->
-<!--                            </p>-->
-<!--                            <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>-->
-<!--                        </template>-->
-<!--                    </CmdAccordion>-->
-<!--                    &lt;!&ndash; end CmdAccordion &ndash;&gt;-->
+                <hr/>
+                <div v-if="cookieOptions.optional" class="flex-container vertical">
+                    <CmdCustomHeadline v-if="cmdBoxOptionalCookies?.showHeadline" :headline-text="cmdBoxOptionalCookies?.headlineText" :headline-level="cmdBoxOptionalCookies?.headlineLevel "/>
+                    <!-- begin CmdBox -->
+                    <CmdBox v-for="(cookie, index) in cookieOptions.optional.cookies"
+                            :useSlots="['header', 'body']"
+                            v-bind="cmdBoxOptionalCookies"
+                            :key="index"
+                    >
+                        <template v-slot:header>
+                            <!-- begin CmdSwitchButton -->
+                            <CmdSwitchButton
+                                type="checkbox"
+                                :id="cookie.id"
+                                :labelText="cookie.labelText"
+                                v-model="cookie.checked"
+                                :status="cookie.status"
+                            />
+                            <!-- end CmdSwitchButton -->
+                        </template>
+                        <template v-slot:body>
+                            <p v-if="cookie.description">{{ cookie.description }}</p>
+                            <p v-if="cookie.linkDataPrivacy">
+                                {{ cookie.linkDataPrivacy.label }}
+                                <a @click="openDataPrivacy"
+                                   :href="cookie.linkDataPrivacy.link"
+                                   :target="cookie.linkDataPrivacy.target">
+                                    {{ cookie.linkDataPrivacy.linkText }}
+                                </a>
+                            </p>
+                            <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
+                        </template>
+                    </CmdBox>
+                    <!-- end CmdBox -->
                 </div>
             </slot>
             <!-- end slot for cookie-options -->
@@ -87,7 +91,7 @@
 
             <!-- begin button-wrapper for 'accept'-buttons -->
             <div class="button-wrapper align-center">
-                <button  v-if="buttonLabelAcceptCurrentSettings" type="button" @click="acceptCookies('currentSettings')">
+                <button v-if="buttonLabelAcceptCurrentSettings" type="button" @click="acceptCookies('currentSettings')">
                     <span>{{ buttonLabelAcceptCurrentSettings }}</span>
                 </button>
                 <button v-if="buttonLabelAcceptAllCookies" type="button" class="primary" @click="acceptCookies('allCookies')">
@@ -101,14 +105,16 @@
 
 <script>
 // import components
+import CmdBox from "./CmdBox"
 import CmdCustomHeadline from "./CmdCustomHeadline"
-// import CmdSwitchButton from "./CmdSwitchButton"
+import CmdSwitchButton from "./CmdSwitchButton"
 
 export default {
     name: "CmdCookieDisclaimer",
     components: {
-        CmdCustomHeadline
-        // CmdSwitchButton
+        CmdBox,
+        CmdCustomHeadline,
+        CmdSwitchButton
     },
     data() {
         return {
@@ -118,11 +124,45 @@ export default {
     },
     props: {
         /**
-         * properties for CmdCustomHeadline-component
+         * properties for CmdCustomHeadline-component at top of cookie disclaimer
          */
-        cmdCustomHeadline: {
+        cmdCustomHeadlineCookieDisclaimer: {
             type: Object,
-            required: false
+            default() {
+                return {
+                    show: true,
+                    headlineText: "Cookie disclaimer",
+                    headlineLevel: 2
+                }
+            }
+        },
+        /**
+         * property for CmdBox-component surrounding the required cookies
+         */
+        cmdBoxRequiredCookies: {
+            type: Object,
+            default() {
+                return {
+                    collapsible: true,
+                    showHeadline: true,
+                    headlineText: "Required cookies",
+                    headlineLevel: 3
+                }
+            }
+        },
+        /**
+         * property for CmdBox-component surrounding the optional cookies
+         */
+        cmdBoxOptionalCookies: {
+            type: Object,
+            default() {
+                return {
+                    collapsible: true,
+                    showHeadline: true,
+                    headlineText: "Optional cookies",
+                    headlineLevel: 3
+                }
+            }
         },
         /**
          * list of cookie-options
@@ -175,6 +215,12 @@ export default {
     bottom: 0;
     top: auto;
 
+    .cmd-box {
+        .box-body {
+            padding: var(--default-padding);
+        }
+    }
+
     h1 {
         text-align: center;
     }
@@ -191,22 +237,6 @@ export default {
         margin-bottom: var(--default-margin);
     }
 
-    .cmd-accordion {
-        .accordion-headline {
-            &:hover, &:active, &:focus {
-                label, .label {
-                    span {
-                        color: var(--pure-white) !important;
-                    }
-                }
-            }
-        }
-
-        .toggle-switch {
-            display: flex;
-        }
-    }
-
     p {
         a {
             text-decoration: underline;

package/src/components/CmdCustomHeadline.vue

@@ -1,5 +1,5 @@
 <template>
-    <header :class="['cmd-custom-headline', { 'has-pre-headline-text': preHeadlineText}]">
+    <div :class="['cmd-custom-headline', { 'has-pre-headline-text': preHeadlineText}]">
         <span v-if="iconClass" :class="iconClass"></span>
         <div v-if="preHeadlineText">
             <span class="pre-headline-text">{{ preHeadlineText }}</span>
@@ -10,7 +10,7 @@
         <component v-else :is="getHeadlineTag">
             <slot>{{ headlineText }}</slot>
         </component>
-    </header>
+    </div>
 </template>
 
 <script>
@@ -22,7 +22,7 @@ export default {
          */
         headlineText: {
             type: String,
-            required: true
+            required: false
         },
         /**
          * level for headline

package/src/components/CmdFakeSelect.vue

@@ -8,13 +8,13 @@
                 'has-state': validationStatus && validationStatus !== 'none'
             }
         ]"
-        :aria-labelledby="labelText"
+        :aria-labelledby="labelId"
         :aria-required="$attrs.required !== undefined"
         ref="fakeselect"
     >
         <span v-if="showLabel">
             <!-- begin label -->
-            <span>
+            <span :id="labelId">
                 {{ labelText }}<sup v-if="$attrs.required !== undefined">*</sup>
             </span>
             <!-- end label -->
@@ -149,6 +149,9 @@
 </template>
 
 <script>
+// import utils
+import {createUuid} from "../utils/common.js"
+
 // import mixins
 import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdBox/DefaultMessageProperties"
@@ -327,6 +330,13 @@ 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/CmdFormElement.vue

@@ -13,7 +13,7 @@
             off: colored && !isChecked,
             'has-state': validationStatus
            }]"
-           :for="id"
+           :for="labelId"
            ref="label">
 
         <!-- begin label-text (+ required asterisk) -->
@@ -50,17 +50,17 @@
         <template
             v-if="element === 'input' && $attrs.type !== 'checkbox' && $attrs.type !== 'radio' && $attrs.type !== 'search'">
             <input v-bind="$attrs"
-                   :id="id"
+                   :id="labelId"
                    :class="htmlClass"
                    @focus="tooltip = true"
                    @blur="onBlur"
                    @input="onInput"
                    @mouseover="datalistFocus"
                    @keyup="checkForCapsLock"
-                   :autocomplete="datalist ? 'off' : 'on'"
-                   :list="datalist ? datalist.id : false"
+                   :autocomplete="autocomplete"
+                   :list="datalist ? datalist.id : null"
                    :value="modelValue"
-                   :maxlength="$attrs.maxlength > 0 ? $attrs.maxlength : 255"
+                   :maxlength="getMaxLength()"
                    ref="input"
             />
         </template>
@@ -92,27 +92,24 @@
                    @change="onChange"
                    @blur="onBlur"
                    :checked="isChecked"
-                   :role="$attrs.type"
-                   :aria-checked="isChecked"
                    :value="inputValue"
                    :class="[htmlClass, validationStatus, { 'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch }]"
-                   :id="id"
+                   :id="labelId"
                    :aria-invalid="validationStatus === 'error'"
-                   :aria-describedby="`status-message-${id}`"
             />
-
-            <!-- begin labels for toggle-switch -->
             <span v-if="!(onLabel && offLabel)" :class="{ hidden: !showLabel }">
                 <span v-if="labelText">{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
             </span>
+
+            <!-- begin labels for toggle-switch -->
             <template v-else-if="onLabel && offLabel">
                 <span v-if="labelText">
                     <span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
                 </span>
-                <div class="toggle-switch switch-label">
+                <span class="toggle-switch switch-label">
                     <span class="label">{{ onLabel }}</span>
                     <span class="label">{{ offLabel }}</span>
-                </div>
+                </span>
             </template>
             <slot v-else></slot>
             <!-- end labels for toggle-switch -->
@@ -122,7 +119,7 @@
         <!-- begin selectbox -->
         <select v-if="element === 'select'"
                 v-bind="$attrs"
-                :id="id"
+                :id="labelId"
                 @blur="onBlur"
                 @change="$emit('update:modelValue', $event.target.value)">
             <option v-for="(option, index) in selectOptions" :key="index" :value="option.value"
@@ -134,9 +131,9 @@
         <!-- begin textarea -->
         <textarea v-if="element === 'textarea'"
                   v-bind="$attrs"
-                  :id="id"
+                  :id="labelId"
                   :value="modelValue"
-                  :maxlength="getMaxLength"
+                  :maxlength="getMaxLength()"
                   @input="onInput"
                   @focus="tooltip = true"
                   @blur="onBlur">
@@ -150,15 +147,15 @@
                 <a v-if="iconDelete.show" href="#" @click.prevent="$emit('update:modelValue', '')" :class="iconDelete.iconClass" :title="iconDelete.tooltip"/>
                 <input
                     v-bind="$attrs"
-                    :id="id"
+                    :id="labelId"
                     @input="onInput"
                     :maxlength="$attrs.maxlength > 0 ? $attrs.maxlength : 255"
                     :value="modelValue"
                 />
             </div>
-            <button v-if="showSearchButton" class="no-flex" type="button" :title="iconSearch.tooltip">
+            <a v-if="showSearchButton" href="#" class="button no-flex" :title="iconSearch.tooltip" @click.prevent="executeSearch">
                 <span :class="iconSearch.iconClass"></span>
-            </button>
+            </a>
         </template>
     </label>
     <!-- end searchfield -->
@@ -215,6 +212,9 @@
 </template>
 
 <script>
+// import utils
+import {createUuid} from "../utils/common.js"
+
 // import mixins
 import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdBox/DefaultMessageProperties"
@@ -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() {
@@ -598,6 +631,19 @@ export default {
                 return this.getMessage("cmdformelement.validationTooltip.caps_lock_is_activated")
             }
             return this.getMessage("cmdformelement.validationTooltip.open_field_requirements")
+        },
+        autocomplete() {
+            if(this.$attrs.type !== 'file') {
+                return this.datalist ? 'off' : 'on'
+            }
+            return null
+        },
+        // get ID for accessibility
+        labelId() {
+            if(this.$attrs.id !== undefined) {
+                return this.$attrs.id
+            }
+            return "label-" + createUuid()
         }
     },
     methods: {
@@ -605,7 +651,15 @@ export default {
             return this.$refs.label
         },
         getMaxLength() {
-            return this.$attrs.maxlength > 0 ? this.$attrs.maxlength : 5000
+            if (this.$attrs.element === 'textarea') {
+                return this.$attrs.maxlength > 0 ? this.$attrs.maxlength : 5000
+            }
+
+            if (this.$attrs.type !== 'file') {
+              return this.$attrs.maxlength > 0 ? this.$attrs.maxlength : 255
+            }
+
+            return null
         },
         onBlur(event) {
             // check if surrounding form with data-use-validation exists
@@ -678,6 +732,9 @@ export default {
         hidePassword() {
             this.$refs.input.nextElementSibling.classList.replace(this.iconPasswordInvisible.iconClass, this.iconPasswordVisible.iconClass)
             this.$refs.input.setAttribute("type", "password")
+        },
+        executeSearch() {
+            this.$emit("search", this.value)
         }
     },
     watch: {

package/src/components/CmdFormFilters.vue

@@ -25,7 +25,7 @@ export default {
     },
     props: {
         /**
-         * list of all selected options
+         * model-value to support v-model
          */
         modelValue: {
             type: Array,

package/src/components/CmdInputGroup.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="cmd-input-group">
+        <span :class="['label', { hidden: !showLabel, inline: labelInline }]">{{ labelText }}</span>
+        <div class="flex-container no-flex">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        /**
+         * toggle label-text visibility
+         */
+        showLabel: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * label-text for input-group
+         *
+         * @requiredForAccessibility: true
+         */
+        labelText: {
+            type: String,
+            required: true
+        },
+        /**
+         * toggle label-position (inline/left of input-elements or above input-elements)
+         */
+        labelInline: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>

package/src/components/CmdLoginForm.vue

@@ -16,7 +16,7 @@
                 :name="cmdFormElementUsername.name"
                 :id="cmdFormElementUsername.id"
                 v-model="username"
-                :inner-icon-class="cmdFormElementUsername.innerIconClass"
+                :fieldIconClass="cmdFormElementUsername.innerIconClass"
                 :labelText="cmdFormElementUsername.labelText"
                 :placeholder="cmdFormElementUsername.placeholder"
             />
@@ -28,7 +28,7 @@
                 type="password"
                 :name="cmdFormElementPassword.name"
                 :id="cmdFormElementPassword.id"
-                :inner-icon-class="cmdFormElementPassword.innerIconClass"
+                :fieldIconClass="cmdFormElementPassword.innerIconClass"
                 v-model="password"
                 :labelText="cmdFormElementPassword.labelText"
                 :placeholder="cmdFormElementPassword.placeholder"
@@ -133,7 +133,7 @@
         <CmdFormElement
             element="input"
             type="email"
-            :inner-icon-class="cmdFormElementSendLogin.innerIconClass"
+            :fieldIconClass="cmdFormElementSendLogin.innerIconClass"
             :labelText="cmdFormElementSendLogin.labelText"
             :placeholder="cmdFormElementSendLogin.placeholder"
             :name="cmdFormElementSendLogin.name"

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

@@ -11,6 +11,7 @@
 <script>
 export default {
     name: "CmdProgressBar",
+    inheritAttrs: false,
     data() {
         return {
             loadingStatus: 30

package/src/components/CmdSiteHeader.vue

@@ -81,7 +81,7 @@ export default {
         z-index: 300;
     }
 
-    header, .cmd-main-navigation nav, .cmd-top-header-navigation > ul {
+    header, .cmd-main-navigation nav, .cmd-list-of-links > ul {
         max-width: var(--max-width);
         margin: 0 auto;
         padding: 0 var(--default-padding);
@@ -92,6 +92,8 @@ export default {
     }
 
     header {
+        padding: calc(var(--default-padding) * 2) 0;
+
         &.flex-container {
             width: 100%;
 

package/src/components/CmdTabs.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="cmd-tabs">
-        <ul :class="{'stretch-tabs' : stretchTabs}">
+        <ul :class="{'stretch-tabs' : stretchTabs}" role="tablist">
             <li :class="{active : showTab === index}" v-for="(tab, index) in tabs" :key="index" role="tab">
                 <a @click.prevent="setActiveTab(index)" :title="!tab.name ? tab.tooltip : false">
                     <span v-if="tab.iconClass">{{ tab.iconClass }}</span>