comand-component-library 4.1.42 → 4.1.45

package/src/components/CmdCookieDisclaimer.vue

@@ -61,7 +61,6 @@
                                         {{ cookie.linkDataPrivacy.linkText }}
                                     </a>
                                 </p>
-                                <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
                             </div>
                         </div>
                         <!-- end CmdBox -->
@@ -113,7 +112,6 @@
                                         {{ cookie.linkDataPrivacy.linkText }}
                                     </a>
                                 </p>
-                                <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
                             </div>
                         </div>
                     </div>
@@ -122,16 +120,16 @@
                 <!-- end slot for cookie-options -->
 
                 <!-- begin privacy-text -->
-                <div v-if="privacyText" class="privacy-text" v-html="privacyText"></div>
+                <div v-if="showPrivacyText" class="privacy-text" v-html="getMessage('cookie_disclaimer.text.data_privacy')"></div>
                 <!-- end privacy-text-->
 
                 <!-- begin button-wrapper for 'accept'-buttons -->
                 <div class="button-wrapper align-center">
-                    <button v-if="buttonLabelAcceptCurrentSettings" type="button" @click="acceptCurrentCookies">
-                        <span>{{ buttonLabelAcceptCurrentSettings }}</span>
+                    <button type="button" @click="acceptCurrentCookies">
+                        <span>{{ getMessage('cookie_disclaimer.button.accept_current_settings') }}</span>
                     </button>
-                    <button v-if="buttonLabelAcceptAllCookies" type="button" class="primary" @click="acceptAllCookies">
-                        <span>{{ buttonLabelAcceptAllCookies }}</span>
+                    <button type="button" class="primary" @click="acceptAllCookies">
+                        <span>{{ getMessage('cookie_disclaimer.button.accept_all_cookies') }}</span>
                     </button>
                 </div>
                 <!-- end button-wrapper for 'accept'-buttons -->
@@ -151,7 +149,6 @@ export default {
     data() {
         return {
             showCookieDisclaimer: true,
-            dataPrivacyContent: "",
             openBoxes: []
         }
     },
@@ -205,25 +202,11 @@ export default {
             required: false
         },
         /**
-         * optional privacy-text shown at bottom of cookie-disclaimer
+         * toggle visibility of privacy-text
          */
-        privacyText: {
-            type: String,
-            required: false
-        },
-        /**
-         * label for button to accepting all cookies
-         */
-        buttonLabelAcceptAllCookies: {
-            type: String,
-            default: "Accept all cookies!"
-        },
-        /**
-         * label for button for accepting current settings
-         */
-        buttonLabelAcceptCurrentSettings: {
-            type: String,
-            default: "Proceed with current settings!"
+        showPrivacyText: {
+            type: Boolean,
+            default: true
         }
     },
     computed: {
@@ -251,8 +234,8 @@ export default {
             return {
                 collapsible: true,
                 showHeadline: true,
-                headlineText: "Required cookies",
                 headlineLevel: 3,
+                headlineText: this.getMessage("cookie_disclaimer.headline.required_cookies"),
                 ...this.cookieOptions?.required.cmdHeadline
             }
         },
@@ -260,7 +243,7 @@ export default {
             return {
                 collapsible: true,
                 showHeadline: true,
-                headlineText: "Optional cookies",
+                headlineText: this.getMessage("cookie_disclaimer.headline.optional_cookies"),
                 headlineLevel: 3,
                 ...this.cookieOptions?.optional.cmdHeadline
             }
@@ -328,7 +311,7 @@ export default {
     top: auto;
 
     .collapsible-box {
-        border-radius: 1rem;
+        border-radius: var(--default-border-radius);
 
         header {
             display: flex;

package/src/components/CmdFancyBox.vue

@@ -545,14 +545,16 @@ export default FancyBox
         display: flex;
     }
 
-    .cmd-cookie-disclaimer {
-        padding: 0;
-    }
 
     > .grayscale {
         filter: grayscale(1);
     }
 
+    .cmd-cookie-disclaimer {
+        max-width: 60rem;
+        padding: 0;
+    }
+
     .cmd-slide-button {
         top: 50% !important;
         height: auto;

package/src/components/CmdMainNavigation.vue

@@ -48,6 +48,7 @@
                         v-if="navigationEntry.type === 'router'"
                         :to="getRoute(navigationEntry)"
                         :title="navigationEntry.tooltip"
+                        @click="closeOffcanvasNavigation"
                     >
                         <!-- begin CmdIcon -->
                         <CmdIcon v-if="navigationEntry.iconClass" :iconClass="navigationEntry.iconClass" :type="navigationEntry.iconType" />
@@ -278,11 +279,11 @@ export default {
             if(navigationEntry?.subentries?.length) {
                 event.preventDefault()
                 if(!sublevel) {
-                    // assign index for first sub-level (or close if already open)
+                    // assign index for first sublevel (or close if already open)
                     this.openEntry = this.openEntry === index ? -1 : index
                     this.openSubentry = -1 // close all sub-entries
                 } else {
-                    // assign index for second sub-level (or close if already open)
+                    // assign index for second sublevel (or close if already open)
                     this.openSubentry = this.openSubentry === index ? -1 : index
                 }
                 return
@@ -291,7 +292,7 @@ export default {
             // emit event to handle navigation from outside
             if (navigationEntry.path === '#' || navigationEntry.path === '') {
                 event.preventDefault()
-                this.$emit('click', navigationEntry.path)
+                this.$emit("click", navigationEntry.path)
             }
 
             this.showOffcanvas = false
@@ -494,7 +495,6 @@ export default {
                             &:hover, &:active, &:focus {
                                 > ul {
                                     display: block;
-                                    border: 1px solid red;
                                 }
                             }
                         }

package/src/components/CmdSwitchLanguage.vue

@@ -3,19 +3,22 @@
         <ul>
             <li v-for="(language, index) in languages" :key="index">
                 <!-- begin link-type 'href' -->
-                <a v-if="language.link.type === 'href'" :href="language.link.path"
-                   :class="['flag', language.iso2, {'active': activeLanguage(language)}]"
+                <a v-if="language.link.type === 'href'"
+                   :href="language.link.path"
+                   :class="['flag', language.iso2, {'active': activeLanguage(language.iso2)}]"
                    :title="language.tooltip"
-                   @click="$emit('click', { originalEvent: $event, language} )">
+                   @click.prevent="changeLanguage(language.iso2, $event)">
                    <img :src="imageSources[index]" :alt="language.name" />
                 </a>
+
                 <!-- end link-type 'href' -->
 
                 <!-- begin link-type 'router' -->
                 <router-link v-else
+                     :to="getRoute(language)"
                      :class="['flag', language.iso2]"
-                     :to="getRoute(language)" :title="language.tooltip"
-                     @click="$emit('click', { originalEvent: $event, language})">
+                     :title="language.tooltip"
+                     @click.prevent="changeLanguage(language.iso2, $event)">
                     <img :src="imageSources[index]" :alt="language.name" />
                 </router-link>
                 <!-- end link-type 'router' -->
@@ -27,12 +30,15 @@
 <script>
 import {getRoute} from '../utilities.js'
 import * as flags from "../assets/images/flags"
+import {switchLanguage} from "@/assets/data/export-data.js";
+
 export default {
     name: "CmdSwitchLanguage",
     emits: ["click"],
     data() {
         return {
-            imageSources: []
+            imageSources: [],
+            currentLanguage: ""
         }
     },
     props: {
@@ -44,12 +50,30 @@ export default {
             required: true
         }
     },
+    mounted() {
+          this.getInitialLanguage()
+    },
     methods: {
+        switchLanguage,
+        getInitialLanguage() {
+            // assign initially set value for lang in html-tag to data-property
+            this.currentLanguage = document.documentElement.lang
+        },
         getRoute(language) {
             return getRoute(language)
         },
-        activeLanguage(language) {
-            return language.active
+        activeLanguage(iso2) {
+            return this.currentLanguage === iso2
+        },
+        changeLanguage(iso2, event) {
+            // set selected language as current language (in data-property)
+            this.currentLanguage = iso2
+
+            // set selected language as value for lang in html-tag
+            document.documentElement.lang = iso2
+
+            // emit original event
+            this.$emit("click", { originalEvent: event, iso2} )
         }
     },
     watch: {
@@ -62,13 +86,13 @@ export default {
                         const isoCode = item.iso2
 
                         // get path of current flag
-                       // const path = "../assets/images/flags/flag-" + isoCode + ".svg"
+                        // const path = "../assets/images/flags/flag-" + isoCode + ".svg"
 
                         // assign value of imported file (returns object with default-key)
-                        //const { default: dynamicImage } = await import(/* @vite-ignore */ path)
+                        // const { default: dynamicImage } = await import(/* @vite-ignore */ path)
 
                         // push image to data-property-array
-                      //  this.imageSources.push(dynamicImage)
+                        // this.imageSources.push(dynamicImage)
                         this.imageSources.push(flags[isoCode].default)
                     }
                 )
@@ -92,13 +116,13 @@ export default {
             list-style-type: none;
             margin: 0;
 
-            a:not([class*="active"]) {
+            a {
                 filter: contrast(.6);
+                padding: 0; /* overwrite default settings from frontend-framework for .active */
+                background: none; /* overwrite default settings from frontend-framework for .active */
 
                 &:hover, &:focus-visible, &:active, &.active, &.router-link-active {
                     filter: none;
-                    padding: 0; /* overwrite default settings from frontend-framework for .active */
-                    background: none; /* overwrite default settings from frontend-framework for .active */
                 }
             }
         }

package/src/mixins/CmdCookieDisclaimer/DefaultMessageProperties.js

@@ -2,9 +2,14 @@ export default {
   data() {
     return {
       defaultMessageProperties: {
+        "cookie_disclaimer.headline.required_cookies": "Required cookies",
+        "cookie_disclaimer.headline.optional_cookies": "Optional cookies",
         "cookie_disclaimer.tooltip.cookie_cannot_be_disabled": "This cookie cannot be disabled, because it is required for functionality!",
         "cookie_disclaimer.tooltip.toggle_to_accept_cookie": "Toggle to accept or reject this cookie!",
-        "cookie_disclaimer.tooltip.toggle_box_content": "Toggle description visibility"
+        "cookie_disclaimer.tooltip.toggle_box_content": "Toggle description visibility",
+        "cookie_disclaimer.text.data_privacy": "By browsing this website you accept the usage and saving of anonymous data!",
+        "cookie_disclaimer.button.accept_current_settings": "Accept current settings",
+        "cookie_disclaimer.button.accept_all_cookies": "Accept all cookies"
       }
     }
   }