comand-component-library 3.1.86 → 3.1.89

package/src/assets/data/opening-hours.json

@@ -1,29 +1,39 @@
 [
       {
             "day": "Mo",
-            "fromTime": "08:00h",
-            "tillTime": "17:00h"
+            "fromTime": "08:00",
+            "tillTime": "17:00"
       },
       {
             "day": "Tu",
-            "fromTime": "08:00h",
-            "tillTime": "17:00h"
+            "fromTime": "08:00",
+            "tillTime": "17:00"
       },
       {
             "day": "We",
-            "fromTime": "08:00h",
-            "tillTime": "17:30h"
+            "fromTime": "08:00",
+            "tillTime": "17:30"
       },
 
       {
             "day": "Th",
-            "fromTime": "08:00h",
-            "tillTime": "17:00h"
+            "fromTime": "08:00",
+            "tillTime": "17:00"
       },
       {
             "day": "Fr",
-            "fromTime": "08:00h",
-            "tillTime": "15:00h"
+            "fromTime": "08:00",
+            "tillTime": "15:00"
+      },
+      {
+            "day": "Sa",
+            "fromTime": "08:00",
+            "tillTime": "17:28"
+      },
+      {
+            "day": "So",
+            "fromTime": "08:00",
+            "tillTime": "22:22"
       }
 ]
 

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

@@ -4,6 +4,12 @@
 /*
 - IMPORTS ------------------------
 - COMPONENTS AND GLOBAL STYLES ------------------------
+  * ------------------------
+    - main structure
+
+  A ------------------------
+    - avoid-scrolling
+
   E ------------------------
     - error-styles (for form-elements)
 
@@ -33,12 +39,23 @@
 @import 'variables'; /* scss-variables (only used for media-query-breakpoints) */
 /* ---------------------------------------------- END IMPORTS -------------------------------------------------- */
 
+/* ---------------------------------------------- BEGIN COMPONENTS AND GLOBAL STYLES -------------------------------------------------- */
+/* begin styles for main structure --------------------------------------------------------------------------------------------------------------------------------------------------- */
+#page-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  .cmd-site-footer {
+    margin-top: auto;
+  }
+}
+
 body, .cmd-site-header, .cmd-site-footer, .cmd-copyright-information {
   transition: background linear .5s;
 }
+/* end styles for main structure --------------------------------------------------------------------------------------------------------------------------------------------------- */
 
-
-/* ---------------------------------------------- BEGIN COMPONENTS AND GLOBAL STYLES -------------------------------------------------- */
 /* begin .avoid-scrolling --------------------------------------------------------------------------------------------------------------------------------------------------- */
 body.avoid-scrolling {
   overflow: hidden;
@@ -271,7 +288,7 @@ html {
     --color-scheme-background-inverted: var(--light-mode-background-color);
     --default-background-color-lightness: 20%;
 
-    :where(label, .label) .label-text [class*="icon"] {
+    :where(label, .label) .label-text > [class*="icon"] {
       background: var(--dark-gray);
     }
   }

package/src/components/CmdBankAccountData.vue

@@ -8,7 +8,7 @@
         <dl>
             <template v-for="(entry, index) in accountData" :key="index">
                 <dt>{{ entry.text }}</dt>
-                <dd v-if="allowCopyByClick && entry.allowCopy" class="flex-container no-flex">
+                <dd v-if="allowCopyByClick && entry.allowCopy">
                     <span>{{ entry.value }}</span>
                     <a href="#" @click.prevent="copyToClipboard(entry.value)" :title="iconCopy.tooltip">
                         <span :class="iconCopy.iconClass"></span>
@@ -92,7 +92,8 @@ export default {
 <style lang="scss">
 /* begin cmd-bank-account-data ---------------------------------------------------------------------------------------- */
 .cmd-bank-account-data {
-    dd.flex-container {
+    dd {
+        display: flex;
         gap: calc(var(--default-gap) / 2);
 
         > span {

package/src/components/CmdFakeSelect.vue

@@ -23,15 +23,11 @@
                 <CmdTooltipForInputElements
                     v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
                     ref="tooltip"
-                    :showRequirements="showRequirements"
-                    :inputRequirements="inputRequirements"
                     :validationStatus="validationStatus"
                     :validationMessage="getValidationMessage"
                     :validationTooltip="validationTooltip"
-                    :inputAttributes="$attrs"
-                    :inputModelValue="modelValue"
-                    :helplink="helplink"
                     :relatedId="tooltipId"
+                    :cmdListOfRequirements="listOfRequirements"
                 />
                 <!-- end CmdTooltipForInputElements -->
 

package/src/components/CmdFormElement.vue

@@ -22,8 +22,13 @@
         <!-- begin label-text (+ required asterisk) -->
         <span v-if="(labelText || $slots.labeltext) && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
               :class="['label-text', !showLabel ? 'hidden' : undefined]">
-            <span v-if="labelText">{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
-            <slot name="labeltext" />
+            <span>
+                <template v-if="labelText">{{ labelText }}</template>
+                <!-- begin slot 'labeltext' -->
+                <slot v-else name="labeltext" />
+                <!-- end slot 'labeltext' -->
+                <sup v-if="$attrs.required">*</sup>
+            </span>
 
             <!-- begin CmdTooltipForInputElements -->
             <CmdTooltipForInputElements
@@ -108,7 +113,15 @@
                     :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>
+                <span v-if="labelText || $slots.labeltext" :class="['label-text', { hidden: !showLabel }]">
+                    <span>
+                        <template v-if="labelText">{{ labelText }}</template>
+                        <!-- begin slot 'labeltext' -->
+                        <slot v-else name="labeltext" />
+                        <!-- end slot 'labeltext' -->
+                        <sup v-if="$attrs.required">*</sup>
+                    </span>
+                </span>
             </template>
 
             <!-- begin labels for toggle-switch with switch-label -->
@@ -597,33 +610,9 @@ export default {
                     iconClass: "icon-not-visible",
                 }
             }
-        },
-        /**
-         * properties for CmdListOfRequirements-component
-         */
-        cmdListOfRequirements: {
-            type: Object,
-            default() {
-                return {}
-            }
         }
     },
     computed: {
-        listOfRequirements() {
-            if (this.cmdListOfRequirements === undefined) {
-                return {
-                    showRequirements: true,
-                    showHeadline: true,
-                    validationTooltip: this.validationTooltip,
-                    inputRequirements: [],
-                    inputAttributes: this.$attrs,
-                    inputModelValue: this.modelValue,
-                    helplink: {},
-                    labelText: this.labelText
-                }
-            }
-            return this.cmdListOfRequirements
-        },
         elementAttributes() {
             const commonAttributes = ["name", "required", "readonly", "disabled", "autofocus"]
             const attributes = {
@@ -807,7 +796,9 @@ export default {
         },
         closeTooltipOnBlur() {
             // close tooltip by calling function from CmdTooltipForInputElements using $refs
-            this.$refs.tooltip.hideTooltip()
+            if(this.$refs.tooltip) {
+                this.$refs.tooltip.hideTooltip()
+            }
         }
     },
     watch: {

package/src/components/CmdListOfRequirements.vue

@@ -135,7 +135,7 @@ export default {
             type: Object,
             default() {
                 return {
-                    headlineLevel: 4
+                    headlineLevel: 6
                 }
             }
         }

package/src/components/CmdMainNavigation.vue

@@ -1,14 +1,14 @@
 <template>
     <div
         :class="[
-            'cmd-main-navigation main-navigation-wrapper',
+            'cmd-main-navigation',
             {
                 'hide-sub-navigation' : !showSubNavigations,
                 'open-off-canvas': showOffcanvas,
                 'persist-on-mobile': persistOnMobile,
                 'show-content-overlay': showContentOverlay
             }
-        ]">
+        ]" id="main-navigation-wrapper">
         <nav>
             <!-- begin main-level -->
             <ul :class="{'stretch-items' : stretchMainItems}">
@@ -19,7 +19,7 @@
                     </a>
                 </li>
                 <li v-for="(navigationEntry, index) in navigationEntries" :key="index"
-                    :class="{'open' : navigationEntry.open, 'has-subentries': navigationEntry?.subentries?.length}">
+                    :class="{'active' : navigationEntry.active, 'open' : navigationEntry.open, 'has-subentries': navigationEntry?.subentries?.length}">
                     <!-- begin type === href -->
                     <a
                        v-if="navigationEntry.type === 'href'"
@@ -225,20 +225,27 @@ export default {
     },
     methods: {
         executeLink(event, navigationEntry) {
+            // execute default-link
             if (navigationEntry.target || (navigationEntry.path.length > 1)) {
+                this.showOffcanvas = false
                 return true
             }
-            if (navigationEntry.path === '#' || navigationEntry.path === '') {
-                event.preventDefault()
-                this.$emit('click', navigationEntry.path)
 
-            }
-            if (!(navigationEntry.subentries && navigationEntry.subentries.length > 0)) {
-                this.showOffcanvas = false
-            } else {
+            // toggle subentries (no link execution)
+            if(navigationEntry?.subentries?.length) {
+                event.preventDefault()
                 // add entry "open" to navigationEntry-object (will be watched by vue3 automatically)
                 navigationEntry.open = !navigationEntry.open
+                return
+            }
+
+            // emit event to handle navigation from outside
+            if (navigationEntry.path === '#' || navigationEntry.path === '') {
+                event.preventDefault()
+                this.$emit('click', navigationEntry.path)
             }
+
+            this.showOffcanvas = false
         },
         getRoute(navigationEntry) {
             return getRoute(navigationEntry)
@@ -295,12 +302,12 @@ export default {
 
 
 @media only screen and (max-width: $medium-max-width) {
-    .cmd-main-navigation {
+    .cmd-main-navigation#main-navigation-wrapper {
         --nav-transition: all .5s linear;
         display: flex;
         background: none; /* overwrite framework-css */
         border: 0; /* overwrite framework-css */
-        padding: 0 var(--default-padding);
+        padding: 0;
 
         /* begin offcanvas-navigation */
         &:not(.persist-on-mobile) {
@@ -386,14 +393,6 @@ export default {
                             }
                         }
 
-                        > a {
-                            span {
-                                & + span[class*="icon"]::before {
-                                    display: inline-block;
-                                }
-                            }
-                        }
-
                         /* sub-level 1 */
                         ul {
                             li {
@@ -404,9 +403,15 @@ export default {
                                 &:last-child {
                                     border-bottom: 0;
                                 }
-
-                                a {
+                                > a {
                                     padding-left: calc(var(--default-margin) * 2);
+
+                                    span {
+                                        & + span[class*="icon"]::before {
+                                            display: inline-block;
+                                            transform: rotate(0);
+                                        }
+                                    }
                                 }
 
                                 /* sub-level 2 */
@@ -433,26 +438,6 @@ export default {
                                 display: block;
                                 opacity: 1;
                                 transition: var(--nav-transition);
-
-                                > li {
-                                    > a {
-                                        span {
-                                            + span[class*="icon"]::before {
-
-                                            }
-                                        }
-                                    }
-
-                                    &.open {
-                                        > a {
-                                            span {
-                                                + span[class*="icon"]::before {
-
-                                                }
-                                            }
-                                        }
-                                    }
-                                }
                             }
                         }
                     }

package/src/components/CmdOpeningHours.vue

@@ -6,21 +6,21 @@
 
         <!-- begin opening-status with link to detail-page -->
         <template v-if="link && link?.path && link?.show">
-            <a v-if="link.type === 'href'" :href="link.path" :class="{closed: closed}">{{ textOpenClosed }}</a>
-            <router-link v-if="link.type === 'router'"  :to="link.path" :class="{closed: closed}">{{ textOpenClosed }}</router-link>
-            <button v-if="link.type === 'button'" :class="['button', {closed: closed}]">{{ textOpenClosed }}</button>
+            <a v-if="link.type === 'href'" :href="link.path" :class="{closed: isClosed}">{{ textOpenClosed }}</a>
+            <router-link v-if="link.type === 'router'"  :to="link.path" :class="{closed: isClosed}">{{ textOpenClosed }}</router-link>
+            <button v-if="link.type === 'button'" :class="['button', {closed: isClosed}]">{{ textOpenClosed }}</button>
         </template>
         <!-- end opening-status with link to detail-page -->
 
         <!-- begin opening-status (without link) -->
-        <span v-else :class="{'closed': closed}">{{ textOpenClosed }}</span>
+        <span v-else :class="{'closed': isClosed}">{{ textOpenClosed }}</span>
         <!-- end opening-status (without link) -->
 
         <!-- begin opening-days and -hours -->
         <dl>
-            <template v-for="day in openingHours" :key="day.day">
+            <template v-for="day in openingHoursFormatted" :key="day.day">
                 <dt>{{ day.day }}:</dt>
-                <dd>{{ day.fromTime }}&ndash;{{ day.tillTime }}</dd>
+                <dd>{{ getTime(day.fromTime)}}&ndash;{{ getTime(day.tillTime)}}</dd>
             </template>
         </dl>
         <!-- end opening-days and -hours -->
@@ -40,6 +40,36 @@
 // import components
 import CmdHeadline from "./CmdHeadline"
 
+export function localizedTime(language) {
+    return (hour, minute) => {
+        const now = new Date()
+        now.setHours(hour, minute, 0, 0)
+        return new Intl.DateTimeFormat(language, {timeStyle: "short"}).format(now)
+    }
+}
+
+export function timeFormatting(separator, suffix1, suffix2, hoursLeadingZero = true) {
+    function addLeadingZero(time, addLeadingZero) {
+        if(addLeadingZero && time < 10) {
+            return "0" + time
+        }
+        return time
+    }
+
+    return (hour, minute) => {
+        if(suffix2) {
+            let hour12 = hour
+            let currentSuffix = suffix1
+            if(hour12 > 12) {
+                hour12 -= 12
+                currentSuffix = suffix2
+            }
+            return addLeadingZero(hour12, hoursLeadingZero) + separator + addLeadingZero(minute, true) + currentSuffix
+        }
+        return addLeadingZero(hour, hoursLeadingZero) + separator + addLeadingZero(minute, true) + suffix1
+    }
+}
+
 export default {
     name: "CmdOpeningHours",
     components: {
@@ -63,11 +93,18 @@ export default {
             default: false
         },
         /**
-         * text for open/closed-information
+         * text for 'open'-information
          */
-        textOpenClosed: {
+        textOpen: {
             type: String,
-            required: true
+            default: "Open right now!"
+        },
+        /**
+         * text for 'closed'-information
+         */
+        textClosed: {
+            type: String,
+            default: "Closed right now!"
         },
         /**
          * list of opening-hours
@@ -96,6 +133,112 @@ export default {
         cmdHeadline: {
             type: Object,
             required: false
+        },
+        /**
+         * option to set custom time format by function
+         */
+        timeFormatter: {
+            type: Function,
+            required: false
+        },
+        /**
+         * activate if component should update open-/closed-status on its own
+         */
+        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
+        }
+    },
+    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() {
+            return this.isClosed ? this.textClosed : this.textOpen
+        },
+        openingHoursFormatted() {
+            const weekdays = []
+            for(let i = 0; i < this.openingHours.length; i++) {
+                const openingHours = {}
+                const splitFromTime = this.openingHours[i].fromTime.split(/[:.]/)
+                const splitTillTime = this.openingHours[i].tillTime.split(/[:.]/)
+
+                openingHours.day = this.openingHours[i].day
+                openingHours.fromTime = {
+                    hours: parseInt(splitFromTime[0]),
+                    mins: parseInt(splitFromTime[1])
+                }
+                openingHours.tillTime = {
+                    hours: parseInt(splitTillTime[0]),
+                    mins: parseInt(splitTillTime[1])
+                }
+                weekdays.push(openingHours)
+            }
+            return weekdays
+        },
+        isClosed() {
+            if(!this.componentHandlesClosedStatus) {
+                return this.closed
+            }
+
+            let currentDay = this.currentTime.getDay()
+
+            // fix order and check if currentDay equals 0 === sunday. Data are expected to start with monday
+            if (currentDay === 0){
+                currentDay = 6
+            } else {
+                currentDay -= 1
+            }
+
+            const openingHours = this.openingHoursFormatted[currentDay]
+
+            if(this.openingHoursFormatted[currentDay]) {
+                const openingHoursFrom = new Date()
+                openingHoursFrom.setHours(openingHours.fromTime.hours, openingHours.fromTime.mins)
+
+                const openingHoursTill = new Date()
+                openingHoursTill.setHours(openingHours.tillTime.hours, openingHours.tillTime.mins)
+
+                if (openingHoursFrom <= this.currentTime && this.currentTime <= openingHoursTill) {
+                    return false
+                }
+            }
+            return true
+        }
+    },
+    methods: {
+        getTime(time) {
+            if(this.timeFormatter) {
+                return this.timeFormatter(time.hours, time.mins)
+            }
+           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
         }
     }
 }

package/src/components/CmdSiteHeader.vue

@@ -89,6 +89,10 @@ export default {
         padding: 0 var(--default-padding);
     }
 
+    .cmd-main-navigation nav {
+        width: auto;
+    }
+
     .top-header {
         .cmd-list-of-links {
             padding-top: calc(var(--default-padding) / 2);

package/src/components/CmdSwitchLanguage.vue

@@ -47,9 +47,7 @@ export default {
             return require("../assets/images/flags/flag-" + isoCode + ".svg")
         },
         activeLanguage(language) {
-            if(language.active || language.iso2 === navigator.language) {
-                return true
-            }
+            return language.active
         }
     }
 }
@@ -67,7 +65,7 @@ export default {
             list-style-type: none;
             margin: 0;
 
-            a:not(.active) {
+            a:not([class*="active"]) {
                 filter: contrast(.5);
 
                 &:hover, &:focus, &:active {

package/src/components/CmdToggleDarkMode.vue

@@ -23,8 +23,7 @@ export default {
     },
     data() {
         return {
-            darkMode: false,
-            labelText: ""
+            darkMode: false
         }
     },
     props: {
@@ -99,6 +98,11 @@ export default {
             this.darkMode = event.detail === "dark-mode"
         }
     },
+    computed: {
+        labelText() {
+            return this.darkMode ? this.labelTextDarkMode : this.labelTextLightMode
+        }
+    },
     watch: {
         darkMode: {
             handler() {
@@ -106,10 +110,8 @@ export default {
                 const htmlTag = document.documentElement
                 if (this.darkMode) {
                     htmlTag.classList.replace("light-mode", "dark-mode")
-                    this.labelText = this.labelTextDarkMode
                 } else {
                     htmlTag.classList.replace("dark-mode", "light-mode")
-                    this.labelText = this.labelTextLightMode
                 }
 
                 // emits custom events from html-tag

package/src/components/CmdTooltipForInputElements.vue

@@ -9,7 +9,7 @@
 
         <!-- begin CmdSystemMessage -->
         <CmdSystemMessage
-            v-if="inputAttributes.required && validationMessage"
+            v-if="cmdListOfRequirements?.inputAttributes?.required && validationMessage"
             :systemMessage="validationMessage"
             :validation-status="validationStatus"
             :iconClose="{show: false}"

package/src/documentation/generated/CmdFormElementPropertyDescriptions.json

@@ -262,10 +262,5 @@
             "type-property must be set to 'password'",
             ""
         ]
-    },
-    "cmdListOfRequirements": {
-        "comments": [
-            "properties for CmdListOfRequirements-component"
-        ]
     }
 }