comand-component-library 3.1.88 → 3.1.91

package/src/components/CmdNewsletterSubscription.vue

@@ -0,0 +1,199 @@
+<template>
+        <!-- begin cmd-input-group -->
+        <CmdInputGroup
+            inputTypes="radio"
+            :labelText="cmdInputGroup.labelText"
+            :showLabel="cmdInputGroup.showLabel"
+            :inputElements="cmdInputGroup.inputElements"
+            v-model="subscription"
+        />
+        <!-- end cmd-input-group -->
+
+        <!-- begin cmd-form-element -->
+        <CmdFormElement
+            element="input"
+            type="email"
+            :placeholder="cmdFormElementEmail.placeholder"
+            :labelText="cmdFormElementEmail.labelText"
+            id="cmd-email-newsletter-subscription"
+            :required="cmdFormElementEmail.required"
+            :useCustomTooltip="cmdFormElementEmail.useCustomTooltip"
+            v-model="email"
+            @validationStatusChange="checkValidationStatus"
+        />
+        <!-- end cmd-form-element -->
+
+        <div class="button-wrapper">
+            <!-- begin cmd-form-element -->
+            <CmdFormElement
+                element="button"
+                :type="buttonType"
+                :disabled="buttonDisabled"
+                :nativeButton="cmdFormElementSubmit"
+                @click="sendData"
+            />
+            <!-- end cmd-form-element -->
+        </div>
+</template>
+
+<script>
+// import components
+import CmdFormElement from "./CmdFormElement"
+import CmdInputGroup from "./CmdInputGroup"
+
+export default {
+    name: "CmdNewsletterSubscription",
+    emits: ["button-click"],
+    components: {
+        CmdFormElement,
+        CmdInputGroup
+    },
+    data() {
+        return {
+            buttonDisabled: true
+        }
+    },
+    props: {
+        /**
+         * set value for v-model (must be named modelValue in vue3 if default v-model should be used)
+         */
+        modelValue: {
+            type: Object,
+            default() {
+                return {
+                    subscription: "subscribe",
+                    email: ""
+                }
+            }
+        },
+        buttonType: {
+          type: String,
+          default: "button",
+            validator(value) {
+                return value === "submit" || value === "button"
+            }
+        },
+        /**
+         * text used as legend for login-fieldset
+         *
+         * @requiredForAccessibility: true
+         */
+        textLegend: {
+            type: String,
+            default: "Stay up-to-date"
+        },
+        /**
+         * toggle legend visibility
+         */
+        showLegend: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * properties for CmdInputGroup-component
+         */
+        cmdInputGroup: {
+            type: Object,
+            default: function () {
+                return {
+                    labelText: "Choose option",
+                    showLabel: false,
+                    inputElements: [
+                        {
+                            labelText: "Subscribe",
+                            id: "radio-subscribe",
+                            name: "cmd-subscribe-group",
+                            value: "subscribe"
+                        },
+                        {
+                            labelText: "Unsubscribe",
+                            id: "radio-unsubscribe",
+                            name: "cmd-subscribe-group",
+                            value: "unsubscribe"
+                        }
+                    ]
+                }
+            }
+        },
+        /**
+         * properties for CmdFormElement-component for email-field
+         */
+        cmdFormElementEmail: {
+            type: Object,
+            default: function () {
+                return {
+                    labelText: "Email-Address:",
+                    placeholder: "Enter your email-address",
+                    required: true
+                }
+            }
+        },
+        /**
+         * properties for CmdFormElement-component for submit-button
+         */
+        cmdFormElementSubmit: {
+            type: Object,
+            default: function () {
+                return {
+                    text: "Submit",
+                    icon: {
+                        show: true,
+                        iconClass: "icon-message-send",
+                        position: "before",
+                        tooltip: ""
+                    }
+                }
+            }
+        }
+    },
+    computed: {
+        subscription: {
+            get() {
+                return this.modelValue.subscription || "subscribe"
+            },
+            set(value) {
+                this.$emit("update:modelValue", {subscription: value, email: this.email})
+            }
+        },
+        email: {
+            get() {
+                return this.modelValue.email
+            },
+            set(value) {
+                this.$emit("update:modelValue", {subscription: this.subscription, email: value})
+            }
+        }
+    },
+    methods: {
+        sendData(event) {
+            this.$emit("button-click", {subscription: this.subscription, email: this.email, originalEvent: event})
+        },
+        checkValidationStatus(event) {
+            this.buttonDisabled = event !== "success"
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+/* begin cmd-back-to-top-button ---------------------------------------------------------------------------------------- */
+.cmd-back-to-top-button {
+    padding: var(--default-padding);
+    display: inline-block;
+    position: fixed;
+    right: 1rem;
+    bottom: 1rem;
+    text-decoration: none;
+    z-index: 1000;
+    border: var(--default-border);
+    background: var(--color-scheme-background-color);
+    border-radius: var(--full-circle);
+
+    &:hover, &:active, &:focus {
+        border-color: var(--primary-color);
+        transition: var(--default-transition);
+    }
+}
+
+/* cmd-back-to-top-button ------------------------------------------------------------------------------------------ */
+</style>

package/src/components/CmdOpeningHours.vue

@@ -147,12 +147,28 @@ export default {
         componentHandlesClosedStatus: {
             type: Boolean,
             default: true
+        },
+        /**
+         * set the interval (in milliseconds) when the open-/closed-status should be checked (and updated)
+         */
+        checkInterval: {
+            type: Number,
+            default: 5000
         }
     },
-    created() {
-        setInterval(function () {
-            this.isClosed()
-        }, 5000)
+    mounted() {
+        if(this.componentHandlesClosedStatus && this.checkInterval > 0) {
+            // create new property on component by 'this.property-name' and assign value (id) from setInterval (so it can be cleared in unmount)
+            this.$_CmdOpeningHours_intervalId = setInterval(() => {
+                // use arrow-function to assure that 'this' is the component
+                this.currentTime = new Date()
+            }, this.checkInterval)
+        }
+    },
+    data() {
+        return {
+            currentTime: new Date()
+        }
     },
     computed: {
         textOpenClosed() {
@@ -183,8 +199,7 @@ export default {
                 return this.closed
             }
 
-            const currentDate = new Date()
-            let currentDay = currentDate.getDay()
+            let currentDay = this.currentTime.getDay()
 
             // fix order and check if currentDay equals 0 === sunday. Data are expected to start with monday
             if (currentDay === 0){
@@ -202,7 +217,7 @@ export default {
                 const openingHoursTill = new Date()
                 openingHoursTill.setHours(openingHours.tillTime.hours, openingHours.tillTime.mins)
 
-                if (openingHoursFrom <= currentDate && currentDate <= openingHoursTill) {
+                if (openingHoursFrom <= this.currentTime && this.currentTime <= openingHoursTill) {
                     return false
                 }
             }
@@ -216,6 +231,15 @@ export default {
             }
            return timeFormatting(":", " hrs", "", false)(time.hours, time.mins)
         }
+    },
+    beforeUnmount() {
+        if(this.$_CmdOpeningHours_intervalId) {
+            // remove interval
+            clearInterval(this.$_CmdOpeningHours_intervalId)
+
+            // clear interval-id
+            this.$_CmdOpeningHours_intervalId = null
+        }
     }
 }
 </script>

package/src/components/CmdShareButtons.vue

@@ -1,21 +1,51 @@
 <template>
-    <div :class="['cmd-share-buttons',{'stretch': stretchButtons, 'align-right': align === 'right'}]">
-        <a v-for="shareButton in validShareButtons"
-           :key="shareButton.path" class="button"
-           :id="shareButton.id"
-           :href="getUrl(shareButton)"
-           target="_blank"
-           :title="shareButton.tooltip">
-            <span v-if="shareButton.iconClass" :class="shareButton.iconClass"></span>
-            <span v-if="shareButton.linkText">{{ shareButton.linkText }}</span>
-        </a>
+    <div :class="['cmd-share-buttons', {'stretch': stretchButtons, 'align-right': align === 'right'}]">
+        <CmdFormElement
+            v-if="userMustAcceptDataPrivacy"
+            element="input"
+            type="checkbox"
+            :toggle-switch="cmdFormElement.toggleSwitch"
+            :labelText="cmdFormElement.labelText"
+            :required="cmdFormElement.required"
+            v-model="dataPrivacyAccepted"
+        />
+        <div class="share-button-wrapper">
+            <a v-for="shareButton in validShareButtons"
+               :key="shareButton.path" :class="['button', {disabled: userMustAcceptDataPrivacy && !dataPrivacyAccepted}]"
+               :id="shareButton.id"
+               :href="getUrl(shareButton)"
+               target="_blank"
+               :title="tooltip(shareButton.tooltip)">
+                <span v-if="shareButton.iconClass && shareButton.iconPosition !== 'right'" :class="shareButton.iconClass"></span>
+                <span v-if="shareButton.linkText">{{ shareButton.linkText }}</span>
+                <span v-if="shareButton.iconClass && shareButton.iconPosition === 'right'" :class="shareButton.iconClass"></span>
+            </a>
+        </div>
     </div>
 </template>
 
 <script>
+// import components
+import CmdFormElement from "./CmdFormElement"
+
 export default {
     name: "CmdShareButtons",
+    components: {
+        CmdFormElement
+    },
+    data() {
+        return {
+            dataPrivacyAccepted: false
+        }
+    },
     props: {
+        /**
+         * set default v-model (must be named modelValue in Vue3)
+         */
+        modelValue: {
+            type: [String, Number, Array],
+            default: ""
+        },
         /**
          * set horizontal alignment
          *
@@ -54,6 +84,37 @@ export default {
         appendPage: {
             type: Boolean,
             default: true
+        },
+        /**
+         * toggle if user has to accept that anonymous data will be send while sharing
+         */
+        userMustAcceptDataPrivacy: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * tooltip shown on hovering disabled buttons
+         *
+         * userMustAcceptDataPrivacy-property must be activated
+         */
+        tooltipAcceptDataPrivacy: {
+            type: String,
+            default: "You must accept data privacy conditions!"
+        },
+        /**
+         * properties for cmdFormElement
+         *
+         * userMustAcceptDataPrivacy-property must be activated
+         */
+        cmdFormElement: {
+            type: Object,
+            default() {
+                return {
+                    toggleSwitch: true,
+                    labelText: "I accept that anonymous data will be send to the platform I share this page on!",
+                    required: true
+                }
+            }
         }
     },
     computed: {
@@ -63,19 +124,28 @@ export default {
     },
     methods: {
         getUrl(shareButton) {
-            // if path is not given completely by json-data
-            if(this.appendPage) {
-                // if page to share is given by property
-                if (this.page) {
-                    return shareButton.path + encodeURIComponent(this.page)
+            if(this.userMustAcceptDataPrivacy && this.dataPrivacyAccepted) {
+                // if path is not given completely by json-data
+                if (this.appendPage) {
+                    // if page to share is given by property
+                    if (this.page) {
+                        return shareButton.path + encodeURIComponent(this.page)
+                    }
+
+                    // if current page should be append to url
+                    return shareButton.path + encodeURIComponent(location.href)
                 }
 
-                // if current page should be append to url
-                return shareButton.path + encodeURIComponent(location.href)
+                // if path is given completely by json-data
+                return shareButton.path
             }
-
-            // if path is given completely by json-data
-            return shareButton.path
+            return null
+        },
+        tooltip(tooltip) {
+            if(this.userMustAcceptDataPrivacy && this.dataPrivacyAccepted) {
+                return tooltip
+            }
+            return this.tooltipAcceptDataPrivacy
         }
     }
 }
@@ -87,10 +157,19 @@ export default {
 
 .cmd-share-buttons {
     display: flex;
+    flex-direction: column;
     gap: var(--default-gap);
 
     &.align-right {
-        justify-content: flex-end;
+        .share-button-wrapper {
+            justify-content: flex-end;
+        }
+    }
+
+    &.stretch {
+        .button {
+            flex: 1;
+        }
     }
 
     .button {
@@ -101,12 +180,6 @@ export default {
         }
     }
 
-    &.stretch {
-        .button {
-            flex: 1;
-        }
-    }
-
     a:last-of-type {
         margin-right: 0;
     }

package/src/components/CmdSiteHeader.vue

@@ -100,7 +100,8 @@ export default {
         }
     }
 
-    > .cmd-main-navigation:last-child {
+    // use id to ensure high specificity
+    > .cmd-main-navigation#main-navigation-wrapper:last-child {
         border-bottom: 0;
     }
 

package/src/components/CmdSystemMessage.vue

@@ -4,6 +4,7 @@
             v-if="showSystemMessage"
             :class="['cmd-system-message', 'system-message', 'flex-container', 'vertical', { 'full-width': fullWidth }, validationStatus]"
             :role="validationStatus === 'error' ? 'alert' : 'dialog'"
+            :aria-labelledby="htmlId"
         >
             <!-- begin close-icon -->
             <a
@@ -21,6 +22,7 @@
                 :iconClass="iconMessage.iconClass"
                 :headlineText="systemMessage"
                 :headlineLevel="messageHeadlineLevel"
+                :id="htmlId"
             />
             <!-- end cmd-headline -->
 
@@ -32,11 +34,15 @@
 </template>
 
 <script>
+// import mixins
+import Identifier from "../mixins/Identifier"
+
 // import components
 import CmdHeadline from "./CmdHeadline"
 
 export default {
     name: "CmdSystemMessage",
+    mixins: [Identifier],
     components: {
         CmdHeadline
     },

package/src/components/CmdTabs.vue

@@ -3,11 +3,12 @@
         <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>
+                    <span v-if="tab.iconClass" :class="tab.iconClass"></span>
                     <span v-if="tab.name">{{ tab.name }}</span>
                 </a>
             </li>
         </ul>
+        <!-- begin slot -->
         <template v-if="useSlot">
             <div v-show="showTab === index - 1" v-for="index in tabs.length" :key="index" aria-live="assertive">
                 <!-- begin slot-content -->
@@ -15,10 +16,12 @@
                 <!-- end slot-content -->
             </div>
         </template>
+        <!-- end slot -->
         <div v-else aria-live="assertive">
             <!-- begin CmdHeadline -->
             <CmdHeadline
-               v-bind="CmdHeadline"
+               v-if="cmdHeadline"
+               v-bind="cmdHeadline"
                :headlineText="tabs[showTab].headlineText"
                :headlineLevel="tabs[showTab].headlineLevel"
             />
@@ -105,21 +108,21 @@ export default {
         > li {
             z-index: 10;
             margin-left: 0;
-            border-bottom: 0;
             border-top-left-radius: var(--border-radius);
             border-top-right-radius: var(--border-radius);
             list-style-type: none;
             background: var(--color-scheme-background-color);
             border: var(--default-border);
+            border-bottom: 0;
 
             &.active {
-                border-bottom: 0;
                 border-color: var(--primary-color);
-                top: .1rem;
             }
 
             a {
-                display: block;
+                display: flex;
+                align-items: center;
+                justify-content: center;
                 padding: var(--default-padding);
                 color: var(--color-scheme-text-color);
                 border-top-left-radius: var(--border-radius);

package/src/components/CmdThumbnailScroller.vue

@@ -10,7 +10,7 @@
         <!-- begin list of images to slide -->
         <transition-group name="slide" tag="ul">
             <li v-for="(image, index) in thumbnails" :key="image.imgId" :class="{'active' : imgIndex === index}">
-                <a href="#" @click.prevent="showFancyBox(index)">
+                <a href="#" @click.prevent="showFancyBox(index)" :title="getMessage('cmdthumbnailscroller.tooltip.open_large_image')">
                     <figure>
                         <figcaption v-if="figcaption.show && figcaption.position === 'above-image' && image.figcaption.length">{{ image.figcaption }}</figcaption>
                         <img :src="image.srcImageSmall" :alt="image.alt"/>
@@ -31,6 +31,10 @@
 </template>
 
 <script>
+// import mixins
+import I18n from "../mixins/I18n"
+import DefaultMessageProperties from "../mixins/CmdThumbnailScroller/DefaultMessageProperties"
+
 // import components
 import CmdSlideButton from "./CmdSlideButton.vue"
 
@@ -42,6 +46,10 @@ export default {
     components: {
         CmdSlideButton
     },
+    mixins: [
+        I18n,
+        DefaultMessageProperties
+    ],
     data() {
         return {
             thumbnails: []

package/src/components/CmdTooltip.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="tooltipVisibility" :class="['cmd-tooltip', status]" ref="tooltip" aria-role="tooltip">
+    <div v-if="tooltipVisibility" :class="['cmd-tooltip', status]" ref="tooltip">
         <div v-if="cmdHeadline || iconClose.show" class="headline-wrapper">
             <!-- begin CmdHeadline -->
             <CmdHeadline

package/src/components/CmdWidthLimitationWrapper.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="cmd-width-limitation-wrapper" :class="{'sticky': sticky}">
-        <component v-if="innerWrapper" :is="innerComponent" :class="setInnerClass">
+        <section v-if="innerWrapper" :class="setInnerClass">
             <a v-if="anchorId" :id="anchorId"></a>
             <!-- begin slot-content -->
             <slot></slot>
             <!-- end slot-content -->
-        </component>
+        </section>
         <template v-else>
             <!-- begin slot-content -->
             <a v-if="anchorId" :id="anchorId"></a>

package/src/directives/scrollPadding.js

@@ -0,0 +1,6 @@
+export default {
+    mounted(el) {
+        const heightHeader = el.outerHeight
+        document.documentElement.style.scrollPaddingTop = (heightHeader / 10) + "rem"
+    }
+}

package/src/documentation/generated/CmdFancyBoxPropertyDescriptions.json

@@ -58,5 +58,15 @@
                 "true"
             ]
         }
+    },
+    "cmdHeadline": {
+        "comments": [
+            "properties for CmdHeadline-component"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "true"
+            ]
+        }
     }
 }

package/src/documentation/generated/CmdFormElementPropertyDescriptions.json

@@ -95,11 +95,6 @@
             "may not be named as 'class' because it is a reserved keyword in JavaScript"
         ]
     },
-    "id": {
-        "comments": [
-            "if for native form-element"
-        ]
-    },
     "datalist": {
         "comments": [
             "set if a native datalist should be used"

package/src/documentation/generated/CmdNewsletterSubscriptionPropertyDescriptions.json

@@ -0,0 +1,42 @@
+{
+    "modelValue": {
+        "comments": [
+            "set value for v-model (must be named modelValue in vue3 if default v-model should be used)"
+        ]
+    },
+    "buttonType": {
+        "comments": [
+            "set value for v-model (must be named modelValue in vue3 if default v-model should be used)"
+        ]
+    },
+    "textLegend": {
+        "comments": [
+            "text used as legend for login-fieldset"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "true"
+            ]
+        }
+    },
+    "showLegend": {
+        "comments": [
+            "toggle legend visibility"
+        ]
+    },
+    "cmdInputGroup": {
+        "comments": [
+            "properties for CmdInputGroup-component"
+        ]
+    },
+    "cmdFormElementEmail": {
+        "comments": [
+            "properties for CmdFormElement-component for email-field"
+        ]
+    },
+    "cmdFormElementSubmit": {
+        "comments": [
+            "properties for CmdFormElement-component for submit-button"
+        ]
+    }
+}

package/src/documentation/generated/CmdOpeningHoursPropertyDescriptions.json

@@ -53,5 +53,10 @@
         "comments": [
             "activate if component should update open-/closed-status on its own"
         ]
+    },
+    "checkInterval": {
+        "comments": [
+            "set the interval (in milliseconds) when the open-/closed-status should be checked (and updated)"
+        ]
     }
 }