comand-component-library 3.1.73 → 3.1.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.73",
+  "version": "3.1.74",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -18,7 +18,7 @@
   ],
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^3.2.61",
+    "comand-frontend-framework": "^3.2.62",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",
     "vue": "^3.2.31",

package/src/App.vue

@@ -576,7 +576,7 @@
                     <!-- begin input-groups -->
                     <h2>Input-Groups</h2>
                     <CmdInputGroup
-                        labelText="Group label for radio-group given by slot"
+                        labelText="Group label for radio-group given by slot:"
                         :useSlot="true"
                         :status="validationStatus"
                         :disabled="disabledStatus"
@@ -609,7 +609,8 @@
                         </dd>
                     </dl>
                     <CmdInputGroup
-                        labelText="Grouplabel for radio-group given by property"
+                        labelText="Grouplabel for radio-group given by property:"
+                        :required="true"
                         :inputElements="inputGroupRadiobuttons"
                         inputTypes="radio"
                         v-model="inputGroupValue2"
@@ -623,7 +624,7 @@
                         </dd>
                     </dl>
                     <CmdInputGroup
-                        labelText="Grouplabel for radio-group styled as replaced-input-type"
+                        labelText="Grouplabel for radio-group styled as replaced-input-type:"
                         :inputElements="inputGroupRadiobuttons"
                         inputTypes="radio"
                         v-model="inputGroupValueReplaceInputTypeRadio"
@@ -638,7 +639,7 @@
                         </dd>
                     </dl>
                     <CmdInputGroup
-                        labelText="Grouplabel for checkbox-group styled as replaced-input-type"
+                        labelText="Grouplabel for checkbox-group styled as replaced-input-type:"
                         :inputElements="inputGroupRadiobuttons"
                         inputTypes="checkbox"
                         v-model="inputGroupValueReplaceInputTypeCheckbox"
@@ -654,7 +655,39 @@
                         </dd>
                     </dl>
                     <CmdInputGroup
-                        labelText="Grouplabel for radio-group given by property styled as multiple-switch"
+                        labelText="Grouplabel for checkbox-group styled as toggle-switches:"
+                        :inputElements="inputGroupRadiobuttons"
+                        inputTypes="checkbox"
+                        v-model="inputGroupValueToggleSwitchCheckbox"
+                        :toggleSwitch="true"
+                        required="required"
+                        :status="validationStatus"
+                        :disabled="disabledStatus"
+                    />
+                    <dl>
+                        <dt>Selected value(s):</dt>
+                        <dd>
+                            <output>{{ inputGroupValueToggleSwitchCheckbox }}</output>
+                        </dd>
+                    </dl>
+                    <CmdInputGroup
+                        labelText="Grouplabel for radio-group styled as toggle-switches:"
+                        :inputElements="inputGroupRadiobuttons"
+                        inputTypes="radio"
+                        v-model="inputGroupValueToggleSwitchRadio"
+                        :toggleSwitch="true"
+                        required="required"
+                        :status="validationStatus"
+                        :disabled="disabledStatus"
+                    />
+                    <dl>
+                        <dt>Selected value(s):</dt>
+                        <dd>
+                            <output>{{ inputGroupValueToggleSwitchRadio }}</output>
+                        </dd>
+                    </dl>
+                    <CmdInputGroup
+                        labelText="Grouplabel for radio-group given by property styled as multiple-switch:"
                         :inputElements="inputGroupRadiobuttons.map(item => ({...item, id: item.id + '-multi', name: item.name + '-multi'}))"
                         inputTypes="radio"
                         :multipleSwitch="true"
@@ -669,7 +702,7 @@
                         </dd>
                     </dl>
                     <CmdInputGroup
-                        labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally)"
+                        labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally):"
                         :inputElements="inputGroupCheckboxes"
                         inputTypes="checkbox"
                         :multipleSwitch="true"
@@ -1100,7 +1133,9 @@
         <CmdCookieDisclaimer :cookieOptions="cookieDisclaimerData"
                              buttonLabelAcceptAllCookies="Accept all cookies"
                              buttonLabelAcceptCurrentSettings="Accept current settings"
-                             @closeCookieDisclaimer="fancyBoxCookieDisclaimer = false"
+                             @closeCookieDisclaimer="closeCookieDisclaimer"
+                             v-model="acceptedCookies"
+
         >
             <template #privacy-text>
                 <p>
@@ -1231,6 +1266,7 @@ export default {
 
     data() {
         return {
+            acceptedCookies: ["google-maps"],
             showTooltip: false,
             disabledStatus: undefined,
             validationStatus: "",
@@ -1241,6 +1277,8 @@ export default {
             inputGroupValue2: "website",
             inputGroupValueReplaceInputTypeRadio: "phone",
             inputGroupValueReplaceInputTypeCheckbox: ["phone"],
+            inputGroupValueToggleSwitchCheckbox: ["phone"],
+            inputGroupValueToggleSwitchRadio: "phone",
             inputGroupValue3: "email",
             inputGroupValue4: [],
             inputGroupRadiobuttons: [
@@ -1375,10 +1413,11 @@ export default {
             thumbnailScrollerData
         }
     },
-    mounted() {
-        document.querySelector('html').addEventListener('toggle-color-scheme', (event) => console.log('colorScheme:', event.detail))
-    },
     methods: {
+        closeCookieDisclaimer(event) {
+            this.fancyBoxCookieDisclaimer = false
+            alert(event.join(", "))
+        },
         setStatus(validationStatus, disabledStatus) {
             this.validationStatus = validationStatus
             this.disabledStatus = disabledStatus

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

@@ -44,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">

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

@@ -17,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
@@ -102,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>
@@ -155,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"
 
@@ -173,6 +153,7 @@ export default {
         Tooltip
     ],
     components: {
+        CmdListOfRequirements,
         CmdSystemMessage,
         CmdTooltip
     },
@@ -334,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()