comand-component-library 3.1.72 → 3.1.75

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

@@ -33,6 +33,11 @@
 @import 'variables'; /* scss-variables (only used for media-query-breakpoints) */
 /* ---------------------------------------------- END IMPORTS -------------------------------------------------- */
 
+body, .cmd-site-header, .cmd-site-footer, .cmd-copyright-information {
+  transition: background linear .5s;
+}
+
+
 /* ---------------------------------------------- BEGIN COMPONENTS AND GLOBAL STYLES -------------------------------------------------- */
 /* begin .avoid-scrolling --------------------------------------------------------------------------------------------------------------------------------------------------- */
 body.avoid-scrolling {
@@ -173,11 +178,18 @@ 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 {
-      span, sup {
+      > span, > a, sup {
         color: var(--status-color);
       }
     }
@@ -190,7 +202,6 @@ body.avoid-scrolling {
       --status-color: var(--warning-color);
     }
 
-
     &.success {
       --status-color: var(--success-color);
     }
@@ -202,44 +213,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 ------------------------------------------------------------------------------------------------------------------ */
@@ -252,14 +225,6 @@ body.avoid-scrolling {
     --grid-small-span: 3; /* default column span smaller part */
     --grid-large-span: 3; /* default column span larger part */
   }
-
-  #site-footer  {
-    footer {
-      li {
-        margin-bottom: calc(var(--default-margin) * 2);
-      }
-    }
-  }
 }
 /* end styles for medium screens --------------------------------------------------------------------------------------------------------------------------------------------------- */
 
@@ -278,16 +243,6 @@ body.avoid-scrolling {
     padding: calc(var(--default-padding) * 2) 0;
   }
 
-  #site-footer {
-    a {
-      text-decoration: underline;
-
-      &:active {
-        text-decoration: none;
-      }
-    }
-  }
-
   a[href^="tel"] {
     text-decoration: underline;
   }
@@ -300,6 +255,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,10 +265,15 @@ 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);
     --default-background-color-lightness: 20%;
+
+    :where(label, .label) .label-text [class*="icon"] {
+      background: var(--dark-gray);
+    }
   }
 }
 

package/src/components/CmdAddressData.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="cmd-address-data vcard">
-        <!-- begin CmdCustomHeadline -->
-        <CmdCustomHeadline v-if="cmdCustomHeadline" v-bind="cmdCustomHeadline" />
-        <!-- end CmdCustomHeadline -->
+        <!-- begin CmdHeadline -->
+        <CmdHeadline v-if="CmdHeadline" v-bind="CmdHeadline" />
+        <!-- end CmdHeadline -->
 
         <!-- begin address-data in vCard microformat -->
         <address class="adr">
@@ -120,13 +120,13 @@ import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdAddressData/DefaultMessageProperties"
 
 // import components
-import CmdCustomHeadline from "./CmdCustomHeadline"
+import CmdHeadline from "./CmdHeadline"
 
 export default {
     name: "CmdAddressData",
     mixins: [I18n, DefaultMessageProperties],
     components: {
-        CmdCustomHeadline
+        CmdHeadline
     },
     props: {
         /**
@@ -144,9 +144,9 @@ export default {
             default: true
         },
         /**
-         * properties for CmdCustomHeadline-component
+         * properties for CmdHeadline-component
          */
-        cmdCustomHeadline: {
+        CmdHeadline: {
             type: Object,
             required: false
         },

package/src/components/CmdBankAccountData.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="cmd-bank-account-data">
-        <!-- begin CmdCustomHeadline -->
-        <CmdCustomHeadline v-if="cmdCustomHeadline" v-bind="cmdCustomHeadline"/>
-        <!-- end CmdCustomHeadline -->
+        <!-- begin CmdHeadline -->
+        <CmdHeadline v-if="CmdHeadline" v-bind="CmdHeadline"/>
+        <!-- end CmdHeadline -->
 
         <!-- begin account data -->
         <dl>
@@ -27,11 +27,11 @@
 
 <script>
 // import components
-import CmdCustomHeadline from "./CmdCustomHeadline"
+import CmdHeadline from "./CmdHeadline"
 
 export default {
     name: "CmdBankAccountData",
-    components: {CmdCustomHeadline},
+    components: {CmdHeadline},
     props: {
         /**
          * bank account data
@@ -71,9 +71,9 @@ export default {
             }
         },
         /**
-         * properties for CmdCustomHeadline-component
+         * properties for CmdHeadline-component
          */
-        cmdCustomHeadline: {
+        CmdHeadline: {
             type: Object,
             required: false
         }

package/src/components/CmdBox.vue

@@ -3,17 +3,12 @@
     <div v-if="boxType === 'content'" :class="['cmd-box box content', {open : open, collapsible: collapsible, 'stretch-vertically': stretchVertically}]">
         <template v-if="useSlots?.includes('header')">
             <!-- begin collapsible header with slot -->
-            <div v-if="collapsible" class="box-header">
+            <a v-if="collapsible" href="#" class="box-header" @click.prevent="toggleContentVisibility" :title="open ? iconOpen.tooltip : iconClosed.tooltip">
                 <!-- begin slot 'header' -->
                 <slot name="header"></slot>
                 <!-- end slot 'header' -->
-                <a href="#"
-                   class="toggle-icon"
-                   :title="open ? iconOpen.tooltip : iconClosed.tooltip"
-                   @click.prevent="toggleContentVisibility">
-                    <span :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
-                </a>
-            </div>
+                <span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
+            </a>
             <!-- end collapsible header with slot -->
 
             <!-- begin default header with slot -->
@@ -27,24 +22,23 @@
         <template v-else>
             <!-- begin header for collapsible -->
             <a v-if="collapsible" class="box-header" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
-                <!-- begin CmdCustomHeadline -->
-                <CmdCustomHeadline v-if="cmdCustomHeadline?.headlineText"
-                                   v-bind="cmdCustomHeadline"/>
-                <!-- end CmdCustomHeadline -->
+                <!-- begin CmdHeadline -->
+                <CmdHeadline v-if="CmdHeadline?.headlineText" v-bind="CmdHeadline"/>
+                <!-- end CmdHeadline -->
                 <span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
             </a>
             <!-- end header for collapsible -->
 
-            <!-- begin CmdCustomHeadline -->
-            <CmdCustomHeadline v-else-if="!collapsible && cmdCustomHeadline?.headlineText"
+            <!-- begin CmdHeadline -->
+            <CmdHeadline v-else-if="!collapsible && CmdHeadline?.headlineText"
                                class="box-header"
-                               v-bind="cmdCustomHeadline"
+                               v-bind="CmdHeadline"
             />
-            <!-- end CmdCustomHeadline -->
+            <!-- end CmdHeadline -->
         </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">
@@ -73,11 +67,11 @@
             <div v-if="product.discount" class="ribbon-discount">
                 <span>{{ product.discount }}</span>
             </div>
-            <!-- begin CmdCustomHeadline -->
-            <CmdCustomHeadline v-if="cmdCustomHeadline?.headlineText || product.name"
-                               v-bind="cmdCustomHeadline || {}"
-                               :headlineText="cmdCustomHeadline?.headlineText ? cmdCustomHeadline?.headlineText : product.name"/>
-            <!-- end CmdCustomHeadline -->
+            <!-- begin CmdHeadline -->
+            <CmdHeadline v-if="CmdHeadline?.headlineText || product.name"
+                               v-bind="CmdHeadline || {}"
+                               :headlineText="CmdHeadline?.headlineText ? CmdHeadline?.headlineText : product.name"/>
+            <!-- end CmdHeadline -->
         </div>
         <div class="box-body">
             <p v-if="product.articleNumber">{{ getMessage("cmdbox.productbox.article_no") }} {{ product.articleNumber }}</p>
@@ -94,11 +88,11 @@
         <div class="box-header">
             <img v-if="user.image" :src="user.image.src" :alt="user.image.alt"/>
             <div v-else :class="defaultProfileIconClass" :title="user.name"></div>
-            <!-- begin CmdCustomHeadline -->
-            <CmdCustomHeadline v-if="cmdCustomHeadline?.headlineText || user.name"
-                               v-bind="cmdCustomHeadline || {}"
-                               :headlineText="cmdCustomHeadline?.headlineText ? cmdCustomHeadline?.headlineText : user.name"/>
-            <!-- end CmdCustomHeadline -->
+            <!-- begin CmdHeadline -->
+            <CmdHeadline v-if="CmdHeadline?.headlineText || user.name"
+                               v-bind="CmdHeadline || {}"
+                               :headlineText="CmdHeadline?.headlineText ? CmdHeadline?.headlineText : user.name"/>
+            <!-- end CmdHeadline -->
         </div>
         <div class="box-body">
             <p v-if="user.profession">{{ user.profession }}</p>
@@ -119,13 +113,13 @@ import DefaultMessageProperties from "../mixins/CmdBox/DefaultMessageProperties"
 import GlobalCurrency from "../mixins/GlobalCurrency"
 
 // import components
-import CmdCustomHeadline from "./CmdCustomHeadline"
+import CmdHeadline from "./CmdHeadline"
 import CmdListOfLinks from "./CmdListOfLinks"
 
 export default {
     name: "CmdBox",
     components: {
-        CmdCustomHeadline,
+        CmdHeadline,
         CmdListOfLinks,
     },
     mixins: [
@@ -250,9 +244,9 @@ export default {
             default: true
         },
         /**
-         * properties for CmdCustomHeadline-component
+         * properties for CmdHeadline-component
          */
-        cmdCustomHeadline: {
+        CmdHeadline: {
             type: Object,
             required: false
         }

package/src/components/CmdBoxSiteSearch.vue

@@ -4,12 +4,12 @@
         <legend v-if="showLegend">{{ textLegend }}</legend>
         <!-- begin legend -->
 
-        <!-- begin CmdCustomHeadline -->
-        <CmdCustomHeadline
-            v-if="cmdCustomHeadline"
-            v-bind="cmdCustomHeadline"
+        <!-- begin CmdHeadline -->
+        <CmdHeadline
+            v-if="CmdHeadline"
+            v-bind="CmdHeadline"
         />
-        <!-- end CmdCustomHeadline -->
+        <!-- end CmdHeadline -->
 
         <!-- begin form-elements -->
         <div class="flex-container">
@@ -95,7 +95,7 @@ import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdSiteSearch/DefaultMessageProperties"
 
 // import files for components
-import CmdCustomHeadline from "./CmdCustomHeadline"
+import CmdHeadline from "./CmdHeadline"
 import CmdFakeSelect from "./CmdFakeSelect"
 import CmdFormElement from "./CmdFormElement"
 import CmdFormFilters from "./CmdFormFilters"
@@ -111,7 +111,7 @@ export default {
     name: "CmdBoxSiteSearch",
     mixins: [I18n, DefaultMessageProperties],
     components: {
-        CmdCustomHeadline,
+        CmdHeadline,
         CmdFakeSelect,
         CmdFormElement,
         CmdFormFilters
@@ -183,9 +183,9 @@ export default {
             required: false
         },
         /**
-         * properties for CmdCustomHeadline-component
+         * properties for CmdHeadline-component
          */
-        cmdCustomHeadline: {
+        CmdHeadline: {
             type: Object,
             required: false
         },

package/src/components/CmdCookieDisclaimer.vue

@@ -1,21 +1,22 @@
 <template>
     <transition name="fade">
         <div class="cmd-cookie-disclaimer flex-container vertical">
-            <!-- begin CmdCustomHeadline -->
-            <CmdCustomHeadline
-                v-if="cmdCustomHeadlineCookieDisclaimer?.show && cmdCustomHeadlineCookieDisclaimer?.headlineText && cmdCustomHeadlineCookieDisclaimer?.headlineLevel"
-                v-bind="cmdCustomHeadlineCookieDisclaimer"
-                :headlineText="cmdCustomHeadlineCookieDisclaimer.headlineText"
-                :headlineLevel="cmdCustomHeadlineCookieDisclaimer.headlineLevel"
+            <!-- begin CmdHeadline -->
+            <CmdHeadline
+                v-if="CmdHeadlineCookieDisclaimer?.show && CmdHeadlineCookieDisclaimer?.headlineText && CmdHeadlineCookieDisclaimer?.headlineLevel"
+                v-bind="CmdHeadlineCookieDisclaimer"
+                :headlineText="CmdHeadlineCookieDisclaimer.headlineText"
+                :headlineLevel="CmdHeadlineCookieDisclaimer.headlineLevel"
             />
-            <!-- end CmdCustomHeadline -->
+            <!-- end CmdHeadline -->
 
             <!-- begin slot for cookie-options -->
             <slot name="cookie-options">
-                <div v-if="cookieOptions.required" class="flex-container vertical">
-                    <CmdCustomHeadline v-if="cmdBoxRequiredCookies?.showHeadline" :headline-text="cmdBoxRequiredCookies?.headlineText" :headline-level="cmdBoxRequiredCookies?.headlineLevel "/>
+                <!-- begin required cookies -->
+                <div v-if="cookieOptions?.required" class="flex-container vertical">
+                    <CmdHeadline v-if="cmdBoxRequiredCookies?.showHeadline" :headline-text="cmdBoxRequiredCookies?.headlineText" :headline-level="cmdBoxRequiredCookies?.headlineLevel "/>
                     <!-- begin CmdBox -->
-                    <CmdBox v-for="(cookie, index) in cookieOptions.required.cookies"
+                    <CmdBox v-for="(cookie, index) in cookieOptions.required.cookies || []"
                             :useSlots="['header', 'body']"
                             v-bind="cmdBoxRequiredCookies"
                             :key="index"
@@ -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,11 +51,15 @@
                     </CmdBox>
                     <!-- end CmdBox -->
                 </div>
+                <!-- end required cookies -->
+
                 <hr/>
-                <div v-if="cookieOptions.optional" class="flex-container vertical">
-                    <CmdCustomHeadline v-if="cmdBoxOptionalCookies?.showHeadline" :headline-text="cmdBoxOptionalCookies?.headlineText" :headline-level="cmdBoxOptionalCookies?.headlineLevel "/>
+
+                <!-- begin optional cookies -->
+                <div v-if="cookieOptions?.optional" class="flex-container vertical">
+                    <CmdHeadline v-if="cmdBoxOptionalCookies?.showHeadline" :headline-text="cmdBoxOptionalCookies?.headlineText" :headline-level="cmdBoxOptionalCookies?.headlineLevel "/>
                     <!-- begin CmdBox -->
-                    <CmdBox v-for="(cookie, index) in cookieOptions.optional.cookies"
+                    <CmdBox v-for="(cookie, index) in cookieOptions.optional.cookies || []"
                             :useSlots="['header', 'body']"
                             v-bind="cmdBoxOptionalCookies"
                             :key="index"
@@ -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,16 +117,21 @@
 </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"
+import CmdHeadline from "./CmdHeadline"
 import CmdFormElement from "./CmdFormElement"
 
 export default {
     name: "CmdCookieDisclaimer",
+    mixins: [I18n, DefaultMessageProperties],
     components: {
         CmdBox,
-        CmdCustomHeadline,
+        CmdHeadline,
         CmdFormElement
     },
     data() {
@@ -123,9 +142,16 @@ export default {
     },
     props: {
         /**
-         * properties for CmdCustomHeadline-component at top of cookie disclaimer
+         * set default v-model (must be named modelValue in Vue3)
          */
-        cmdCustomHeadlineCookieDisclaimer: {
+        modelValue: {
+            type: Array,
+            required: false
+        },
+        /**
+         * properties for CmdHeadline-component at top of cookie disclaimer
+         */
+        CmdHeadlineCookieDisclaimer: {
             type: Object,
             default() {
                 return {
@@ -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);
         }