comand-component-library 3.1.71 → 3.1.74

package/src/assets/data/cookie-disclaimer.json

@@ -4,10 +4,10 @@
     "cookies": [
         {
           "id": "cookie-sessionid",
+          "value": "sessionid",
           "description": "This cookie is required for functionality",
           "labelText": "SessionID",
-          "checked": true,
-          "status": "disabled",
+          "disabled": true,
           "linkDataPrivacy": {
             "label": "Details for this cookie:",
             "link": "/content/data-privacy-en.html",
@@ -16,10 +16,10 @@
         },
         {
           "id": "cookie-google-recaptcha",
+          "value": "google-recaptcha",
           "description": "This cookie prevents bots from sending forms",
           "labelText": "Google reCaptcha™",
-          "checked": true,
-          "status": "disabled",
+          "disabled": true,
           "linkDataPrivacy": {
             "label": "Details for this cookie:",
             "link": "https://policies.google.com/privacy?hl=en-US",
@@ -34,9 +34,10 @@
     "cookies": [
       {
         "id": "cookie-google-maps",
+        "value": "google-maps",
         "description": "This cookie enables the Google Map™",
         "labelText": "Google Maps™",
-        "checked": false,
+        "disabled": false,
         "linkDataPrivacy": {
           "label": "Details for this cookie:",
           "link": "https://policies.google.com/privacy?hl=en-US",
@@ -46,9 +47,9 @@
       },
       {
         "id": "cookie-google-analytics",
+        "value": "google-analytics",
         "description": "This cookie collects anonymous data for statistics and improvements",
         "labelText": "Google Analytics™",
-        "checked": false,
         "linkDataPrivacy": {
           "label": "Details for this cookie:",
           "link": "https://policies.google.com/privacy?hl=en-US",

package/src/assets/styles/global-styles.scss

@@ -173,7 +173,14 @@ body.avoid-scrolling {
 /* end product-listing --------------------------------------------------------------------------------------------------------------------------------------------------- */
 
 /* begin tooltip for cmd-form-element and cmd-fake-select ---------------------------------------------------------------------------------------------------------------- */
-.cmd-form-element, .cmd-fake-select {
+.cmd-form-element, .cmd-fake-select, .cmd-input-group {
+  .cmd-tooltip {
+    position: absolute;
+    right: 0;
+    transform: translateY(calc(-100% - calc(var(--default-margin) / 2)));
+    left: auto !important; /* overwrite calculated inline-styles from javascript for cmd-tooltip-component */
+    top: 0 !important; /* overwrite calculated inline-styles from javascript for cmd-tooltip-component */
+  }
 
   &.has-state, & + .cmd-tooltip {
     .label-text {
@@ -190,7 +197,6 @@ body.avoid-scrolling {
       --status-color: var(--warning-color);
     }
 
-
     &.success {
       --status-color: var(--success-color);
     }
@@ -202,44 +208,6 @@ body.avoid-scrolling {
 
   & + .cmd-tooltip {
     border-color: var(--status-color);
-
-    h6:last-of-type {
-      margin-top: 0;
-    }
-
-    .list-of-requirements {
-      .error {
-        color: var(--error-color);
-      }
-
-      .warning {
-        color: var(--warning-color);
-      }
-
-      .success {
-        color: var(--success-color);
-      }
-
-      .info {
-        color: var(--info-color);
-      }
-
-      span[class*="icon"] {
-        font-size: 1.2rem;
-      }
-
-      & ~ a {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        text-decoration: none;
-
-        span[class*="icon"] {
-          font-size: 1.2rem;
-        }
-      }
-    }
   }
 }
 /* end tooltip for cmd-form-element and cmd-fake-select ------------------------------------------------------------------------------------------------------------------ */
@@ -300,6 +268,7 @@ html {
   &.light-mode {
     /* assign default colors for custom light-mode set by class */
     --color-scheme-text-color: var(--light-mode-text-color);
+    --color-scheme-text-color-buttons: var(--light-mode-text-color-buttons);
     --color-scheme-background-color: var(--light-mode-background-color);
     --color-scheme-text-color-inverted: var(--dark-mode-text-color);
     --color-scheme-background-inverted: var(--dark-mode-background-color);
@@ -309,6 +278,7 @@ html {
   &.dark-mode {
     /* assign default colors for custom dark-mode set by class */
     --color-scheme-text-color: var(--dark-mode-text-color);
+    --color-scheme-text-color-buttons: var(--dark-mode-background-color);
     --color-scheme-background-color: var(--dark-mode-background-color);
     --color-scheme-text-color-inverted: var(--light-mode-text-color);
     --color-scheme-background-inverted: var(--light-mode-background-color);

package/src/components/CmdBox.vue

@@ -8,9 +8,10 @@
                 <slot name="header"></slot>
                 <!-- end slot 'header' -->
                 <a href="#"
+                   class="toggle-icon"
                    :title="open ? iconOpen.tooltip : iconClosed.tooltip"
                    @click.prevent="toggleContentVisibility">
-                    <span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
+                    <span :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
                 </a>
             </div>
             <!-- end collapsible header with slot -->
@@ -43,7 +44,7 @@
         </template>
 
         <!-- begin box-body -->
-        <div v-if="open" class="box-body" aria-expanded="true">
+        <div v-if="open" class="box-body" aria-expanded="true" role="article">
             <!-- begin slot 'body' -->
             <slot name="body">
                 <transition :name="toggleTransition">
@@ -313,8 +314,8 @@ export default {
                 margin-bottom: 0;
             }
 
-            &:not(.open):last-child {
-                margin-top: auto;
+            &:not(.open) {
+                justify-content: flex-start;
             }
         }
 
@@ -334,9 +335,10 @@ export default {
 
             * {
                 color: var(--pure-white);
+                margin-bottom: 0;
             }
 
-            > [class*="icon"]:last-child {
+            > .toggle-icon, .toggle-icon > [class*="icon"] {
                 font-size: 1rem;
                 margin-left: auto;
             }

package/src/components/CmdCookieDisclaimer.vue

@@ -12,6 +12,7 @@
 
             <!-- begin slot for cookie-options -->
             <slot name="cookie-options">
+                <!-- begin required cookies -->
                 <div v-if="cookieOptions.required" class="flex-container vertical">
                     <CmdCustomHeadline v-if="cmdBoxRequiredCookies?.showHeadline" :headline-text="cmdBoxRequiredCookies?.headlineText" :headline-level="cmdBoxRequiredCookies?.headlineLevel "/>
                     <!-- begin CmdBox -->
@@ -25,9 +26,13 @@
                             <CmdFormElement
                                 element="input"
                                 type="checkbox"
-                                labelText="Google Analytics"
-                                id="google-analytics"
+                                v-model="acceptedCookies"
+                                :inputValue="cookie.value"
+                                :labelText="cookie.labelText"
+                                :disabled="cookie.disabled"
+                                :id="cookie.id"
                                 :toggleSwitch="true"
+                                :title="getMessage('cmdcookiedisclaimer.title.cookie_cannot_be_disabled')"
                             />
                             <!-- end CmdFormElement -->
                         </template>
@@ -46,7 +51,11 @@
                     </CmdBox>
                     <!-- end CmdBox -->
                 </div>
+                <!-- end required cookies -->
+
                 <hr/>
+
+                <!-- begin optional cookies -->
                 <div v-if="cookieOptions.optional" class="flex-container vertical">
                     <CmdCustomHeadline v-if="cmdBoxOptionalCookies?.showHeadline" :headline-text="cmdBoxOptionalCookies?.headlineText" :headline-level="cmdBoxOptionalCookies?.headlineLevel "/>
                     <!-- begin CmdBox -->
@@ -60,9 +69,13 @@
                             <CmdFormElement
                                 element="input"
                                 type="checkbox"
-                                labelText="Google Analytics"
-                                id="google-analytics"
+                                v-model="acceptedCookies"
+                                :inputValue="cookie.value"
+                                :labelText="cookie.labelText"
+                                :disabled="cookie.disabled"
+                                :id="cookie.id"
                                 :toggleSwitch="true"
+                                :title="getMessage('cmdcookiedisclaimer.title.toggle_to_accept_cookie')"
                             />
                             <!-- end CmdFormElement -->
                         </template>
@@ -81,6 +94,7 @@
                     </CmdBox>
                     <!-- end CmdBox -->
                 </div>
+                <!-- end optional cookies -->
             </slot>
             <!-- end slot for cookie-options -->
 
@@ -90,10 +104,10 @@
 
             <!-- 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="acceptCurrentCookies">
                     <span>{{ buttonLabelAcceptCurrentSettings }}</span>
                 </button>
-                <button v-if="buttonLabelAcceptAllCookies" type="button" class="primary" @click="acceptCookies('allCookies')">
+                <button v-if="buttonLabelAcceptAllCookies" type="button" class="primary" @click="acceptAllCookies">
                     <span>{{ buttonLabelAcceptAllCookies }}</span>
                 </button>
             </div>
@@ -103,6 +117,10 @@
 </template>
 
 <script>
+// import mixins
+import I18n from "../mixins/I18n"
+import DefaultMessageProperties from "../mixins/CmdCookieDisclaimer/DefaultMessageProperties"
+
 // import components
 import CmdBox from "./CmdBox"
 import CmdCustomHeadline from "./CmdCustomHeadline"
@@ -110,6 +128,7 @@ import CmdFormElement from "./CmdFormElement"
 
 export default {
     name: "CmdCookieDisclaimer",
+    mixins: [I18n, DefaultMessageProperties],
     components: {
         CmdBox,
         CmdCustomHeadline,
@@ -122,6 +141,13 @@ export default {
         }
     },
     props: {
+        /**
+         * set default v-model (must be named modelValue in Vue3)
+         */
+        modelValue: {
+            type: Array,
+            required: false
+        },
         /**
          * properties for CmdCustomHeadline-component at top of cookie disclaimer
          */
@@ -185,9 +211,43 @@ export default {
             default: "Proceed with current settings!"
         }
     },
+    computed: {
+        acceptedCookies: {
+            get() {
+                const cookies = this.modelValue ? [...this.modelValue] : []
+                const requiredCookies = this.cookieOptions?.required?.cookies || []
+                for (let i = 0; i < requiredCookies.length; i++) {
+                    if(!cookies.includes(requiredCookies[i].value)) {
+                       cookies.push(requiredCookies[i].value)
+                    }
+                }
+                return cookies
+            },
+            set(value) {
+                this.$emit("update:modelValue", value)
+            }
+        }
+    },
     methods: {
-        acceptCookies(cookies) {
-            this.$emit("close-cookie-disclaimer", cookies)
+        acceptCurrentCookies() {
+            this.$emit("close-cookie-disclaimer", this.acceptedCookies)
+        },
+        acceptAllCookies() {
+            const allCookies = []
+
+            // push all required cookies to array
+            const requiredCookies = this.cookieOptions?.required?.cookies
+            for(let i = 0; i < requiredCookies.length ; i++) {
+                allCookies.push(requiredCookies[i].value)
+            }
+
+            // push all optional cookies to array
+            const optionalCookies = this.cookieOptions?.optional?.cookies
+            for(let i = 0; i < optionalCookies.length ; i++) {
+                allCookies.push(optionalCookies[i].value)
+            }
+
+            this.$emit("close-cookie-disclaimer", allCookies)
         },
         openDataPrivacy(event) {
             /* first 'target' = clicked-element, second 'target' = target-attribute */
@@ -215,6 +275,14 @@ export default {
     top: auto;
 
     .cmd-box {
+        .box-header {
+            label.disabled {
+                .label-text span {
+                    color: var(--pure-white) !important;
+                }
+            }
+        }
+
         .box-body {
             padding: var(--default-padding);
         }

package/src/components/CmdFakeSelect.vue

@@ -5,7 +5,8 @@
             'cmd-fake-select label',
             {
                 color: type === 'color',
-                'has-state': validationStatus && validationStatus !== 'none'
+                'has-state': validationStatus && validationStatus !== 'none',
+                disabled: $attrs.disabled
             }
         ]"
         :aria-labelledby="labelId"
@@ -16,6 +17,30 @@
             <!-- begin label -->
             <span class="label-text" :id="labelId">
                 <span>{{ labelText }}<sup v-if="$attrs.required !== undefined">*</sup></span>
+
+                <!-- begin CmdTooltip -->
+                <CmdTooltip v-if="useCustomTooltip" class="box" :class="validationStatus" :relatedId="tooltipId" :toggle-visibility-by-click="true">
+                    <!-- begin CmdSystemMessage -->
+                    <CmdSystemMessage
+                        v-if="getValidationMessage"
+                        :message="getValidationMessage"
+                        :validation-status="validationStatus"
+                        :iconClose="{show: false}"
+                    />
+                    <!-- end CmdSystemMessage -->
+
+                    <!-- begin CmdListOfRequirements -->
+                    <CmdListOfRequirements
+                        v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')"
+                        :inputRequirements="inputRequirements"
+                        :inputModelValue="modelValue"
+                        :inputAttributes="$attrs"
+                        :helplink="helplink"
+                    />
+                    <!-- end CmdListOfRequirements -->
+                </CmdTooltip>
+                <!-- end CmdTooltip -->
+
                 <a v-if="$attrs.required || inputRequirements.length"
                    href="#"
                    @click.prevent
@@ -101,51 +126,6 @@
             </li>
         </ul>
     </div>
-    <!-- begin CmdTooltip -->
-    <CmdTooltip v-if="useCustomTooltip" class="box" :class="validationStatus" :relatedId="tooltipId" :toggle-visibility-by-click="true">
-        <!-- begin CmdSystemMessage -->
-        <CmdSystemMessage
-            v-if="getValidationMessage"
-            :message="getValidationMessage"
-            :validationStatus="validationStatus"
-            :iconClose="{show: false}"
-        />
-        <!-- end CmdSystemMessage -->
-
-        <template v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')">
-            <!-- begin list of requirements -->
-            <h6>{{ getMessage("cmdfakeselect.headline.requirements_for_input") }}<br/>"{{ labelText }}"</h6>
-            <dl class="list-of-requirements">
-                <template v-for="(requirement, index) in inputRequirements" :key="index">
-                    <dt aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">{{ requirement.message }}:</dt>
-                    <dd :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">
-                        <span aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? 'icon-check-circle' : 'icon-error-circle'"
-                              :title="requirement.valid(modelValue, $attrs) ? 'success' : 'error'"></span>
-                    </dd>
-                </template>
-            </dl>
-            <!-- end list of requirements -->
-
-            <!-- begin helplink -->
-            <template v-if="helplink">
-                <hr v-if="helplink.show"/>
-                <a v-if="helplink.show && helplink.url"
-                   :href="helplink.url"
-                   :target="helplink.target"
-                   @click.prevent>
-                    <span v-if="helplink.icon?.iconClass"
-                          :class="helplink.icon?.iconClass"
-                          :title="helplink.icon?.tooltip">
-                    </span>
-                    <span v-if="helplink.text">
-                        {{ helplink.text }}
-                    </span>
-                </a>
-            </template>
-            <!-- end helplink -->
-        </template>
-    </CmdTooltip>
-    <!-- end CmdTooltip -->
 </template>
 
 <script>
@@ -154,11 +134,12 @@ import {createUuid} from "../utils/common.js"
 
 // import mixins
 import I18n from "../mixins/I18n"
-import DefaultMessageProperties from "../mixins/CmdBox/DefaultMessageProperties"
+import DefaultMessageProperties from "../mixins/CmdFakeSelect/DefaultMessageProperties"
 import FieldValidation from "../mixins/FieldValidation.js"
 import Tooltip from "../mixins/Tooltip.js"
 
 // import components
+import CmdListOfRequirements from "./CmdListOfRequirements"
 import CmdSystemMessage from "./CmdSystemMessage"
 import CmdTooltip from "./CmdTooltip"
 
@@ -172,6 +153,7 @@ export default {
         Tooltip
     ],
     components: {
+        CmdListOfRequirements,
         CmdSystemMessage,
         CmdTooltip
     },
@@ -229,7 +211,7 @@ export default {
         /**
          * status (i.e. for validation)
          *
-         * @allowedValues: error, success, disabled
+         * @allowedValues: error, warning, success, info
          * @affectsStyling: true
          */
         status: {
@@ -333,7 +315,7 @@ export default {
         },
         // get ID for accessibility
         labelId() {
-            if(this.$attrs.id !== undefined) {
+            if (this.$attrs.id !== undefined) {
                 return this.$attrs.id
             }
             return "label-" + createUuid()
@@ -372,7 +354,7 @@ export default {
             }
         },
         toggleOptions() {
-            if (this.status !== 'disabled') {
+            if (this.$attrs.disabled !== 'disabled') {
                 this.showOptions = !this.showOptions
             }
         },
@@ -546,8 +528,16 @@ export default {
             &.active {
                 background: var(--light-gray);
 
+                span {
+                    color: var(--text-color);
+                }
+
                 &:hover, &:active, &:focus {
                     background: var(--primary-color);
+
+                    span {
+                        color: var(--pure-white);
+                    }
                 }
             }
         }

package/src/components/CmdFormElement.vue

@@ -15,12 +15,38 @@
                 'has-state': validationStatus
                }]"
            :for="labelId"
+           :title="$attrs.title"
            ref="label">
 
         <!-- begin label-text (+ required asterisk) -->
         <span v-if="labelText && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
               :class="['label-text', !showLabel ? 'hidden' : undefined]">
             <span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
+
+            <!-- begin CmdTooltip -->
+            <CmdTooltip v-if="useCustomTooltip" class="box" :class="validationStatus" :relatedId="tooltipId" :toggle-visibility-by-click="true">
+                <!-- begin CmdSystemMessage -->
+                <CmdSystemMessage
+                    v-if="getValidationMessage"
+                    :message="getValidationMessage"
+                    :validation-status="validationStatus"
+                    :iconClose="{show: false}"
+                />
+                <!-- end CmdSystemMessage -->
+
+                <!-- begin CmdListOfRequirements -->
+                <CmdListOfRequirements
+                    v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')"
+                    :inputRequirements="inputRequirements"
+                    :helplink="helplink"
+                    :inputModelValue="modelValue"
+                    :inputAttributes="$attrs"
+                    :validationTooltip="validationTooltip"
+                />
+                <!-- end CmdListOfRequirements -->
+            </CmdTooltip>
+            <!-- end CmdTooltip -->
+
             <a v-if="$attrs.required || inputRequirements.length"
                 href="#"
                 @click.prevent
@@ -89,6 +115,7 @@
                         :value="inputValue"
                         :class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch }]"
                         :id="labelId"
+                        :disabled="$attrs.disabled"
                         :aria-invalid="validationStatus === 'error'"
                     />
                     <span v-if="labelText" :class="['label-text', { hidden: !showLabel }]"><span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span></span>
@@ -103,6 +130,7 @@
                            :value="inputValue"
                            :class="{inputClass, validationStatus}"
                            :id="labelId"
+                           :disabled="$attrs.disabled"
                            :aria-invalid="validationStatus === 'error'"
                     />
                     <span class="label-text">{{ onLabel }}</span>
@@ -152,7 +180,7 @@
                     :maxlength="getMaxLength()"
                     :value="modelValue"
                 />
-                <a v-if="showSearchButton" href="#" class="button no-flex" :title="iconSearch.tooltip" @click.prevent="executeSearch">
+                <a v-if="showSearchButton" href="#" :class="['button no-flex', {disabled: $attrs.disabled}]" :title="iconSearch.tooltip" @click.prevent="executeSearch">
                     <span :class="iconSearch.iconClass"></span>
                 </a>
                 <a v-if="iconDelete.show" href="#" @click.prevent="$emit('update:modelValue', '')" :class="iconDelete.iconClass" :title="iconDelete.tooltip"></a>
@@ -171,45 +199,6 @@
         <span v-if="nativeButton?.icon?.show && nativeButton?.icon?.position === 'after'" :class="nativeButton?.icon?.iconClass"></span>
     </button>
     <!-- end button -->
-
-    <!-- begin CmdTooltip -->
-    <CmdTooltip v-if="useCustomTooltip" class="box" :class="validationStatus" :relatedId="tooltipId" :toggle-visibility-by-click="true">
-        <!-- begin CmdSystemMessage -->
-        <CmdSystemMessage
-            v-if="getValidationMessage"
-            :message="getValidationMessage"
-            :validation-status="validationStatus"
-            :iconClose="{show: false}"
-        />
-        <!-- end CmdSystemMessage -->
-
-        <template v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')">
-            <!-- begin list of requirements -->
-            <h6>
-                {{ getMessage("cmdformelement.headline.requirements_for_input") }}<br/>
-                "{{ labelText }}"
-            </h6>
-            <dl class="list-of-requirements">
-                <template v-for="(requirement, index) in inputRequirements" :key="index">
-                    <dt aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">{{ requirement.message }}:</dt>
-                    <dd :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">
-                        <span aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? iconHasStateSuccess.iconClass : iconHasStateError.iconClass"
-                              :title="requirement.valid(modelValue, $attrs) ? iconHasStateSuccess.tooltip : iconHasStateError.tooltip"></span>
-                    </dd>
-                </template>
-            </dl>
-            <!-- end list of requirements -->
-
-            <!-- begin helplink -->
-            <hr v-if="helplink?.show"/>
-            <a v-if="helplink?.show && helplink?.url" :href="helplink.url" :target="helplink.target" @click.prevent>
-                <span v-if="helplink.icon?.iconClass" :class="helplink.icon?.iconClass" :title="helplink.icon?.tooltip"></span>
-                <span v-if="helplink.text">{{ helplink.text }}</span>
-            </a>
-            <!-- end helplink -->
-        </template>
-    </CmdTooltip>
-    <!-- end CmdTooltip -->
 </template>
 
 <script>
@@ -223,6 +212,7 @@ import FieldValidation from "../mixins/FieldValidation.js"
 import Tooltip from "../mixins/Tooltip.js"
 
 // import components
+import CmdListOfRequirements from "./CmdListOfRequirements"
 import CmdSystemMessage from "./CmdSystemMessage"
 import CmdTooltip from "./CmdTooltip"
 
@@ -230,6 +220,7 @@ export default {
     inheritAttrs: false,
     name: "FormElement",
     components: {
+        CmdListOfRequirements,
         CmdSystemMessage,
         CmdTooltip
     },
@@ -422,7 +413,7 @@ export default {
         /**
          * set status for label and form-element
          *
-         * @allowedValues: error, success
+         * @allowedValues: error, warning, success, info
          *
          * @affectsStyling: true
          */