comand-component-library 3.1.85 → 3.1.88

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": "15:00"
+      },
+      {
+            "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/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,6 +1,5 @@
 <template>
     <div
-        v-if="navigationEntries.length"
         :class="[
             'cmd-main-navigation main-navigation-wrapper',
             {
@@ -20,7 +19,7 @@
                     </a>
                 </li>
                 <li v-for="(navigationEntry, index) in navigationEntries" :key="index"
-                    :class="{'open' : navigationEntry.open, 'has-subentries': navigationEntry.subentries}">
+                    :class="{'active' : navigationEntry.active, 'open' : navigationEntry.open, 'has-subentries': navigationEntry?.subentries?.length}">
                     <!-- begin type === href -->
                     <a
                        v-if="navigationEntry.type === 'href'"
@@ -31,7 +30,7 @@
                     >
                         <span v-if="navigationEntry.iconClass" :class="navigationEntry.iconClass"></span>
                         <span v-if="navigationEntry.text">{{ navigationEntry.text }}</span>
-                        <span v-if="navigationEntry.subentries && navigationEntry.subentries.length > 0"
+                        <span v-if="navigationEntry?.subentries?.length"
                               :class="subentriesIconClass"
                         ></span>
                     </a>
@@ -53,7 +52,7 @@
                     <!-- end type === router -->
 
                     <!-- begin sub-level 1 -->
-                    <ul v-if="navigationEntry.subentries" aria-expanded="true">
+                    <ul v-if="navigationEntry?.subentries?.length" aria-expanded="true">
                         <li v-for="(navigationSubEntry, subindex) in navigationEntry.subentries" :key="subindex"
                             :class="{'open' : navigationSubEntry.open}">
                             <!-- begin type === href -->
@@ -227,14 +226,16 @@ export default {
     methods: {
         executeLink(event, navigationEntry) {
             if (navigationEntry.target || (navigationEntry.path.length > 1)) {
+                this.showOffcanvas = false
                 return true
             }
             if (navigationEntry.path === '#' || navigationEntry.path === '') {
                 event.preventDefault()
+                this.showOffcanvas = false
                 this.$emit('click', navigationEntry.path)
 
             }
-            if (!(navigationEntry.subentries && navigationEntry.subentries.length > 0)) {
+            if (!(navigationEntry?.subentries?.length)) {
                 this.showOffcanvas = false
             } else {
                 // add entry "open" to navigationEntry-object (will be watched by vue3 automatically)

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,88 @@ 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
+        }
+    },
+    created() {
+        setInterval(function () {
+            this.isClosed()
+        }, 5000)
+    },
+    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
+            }
+
+            const currentDate = new Date()
+            let currentDay = currentDate.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 <= currentDate && currentDate <= 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)
         }
     }
 }

package/src/components/CmdSiteHeader.vue

@@ -32,13 +32,6 @@ export default {
         CmdMainNavigation
     },
     props: {
-        /**
-         * properties for CmdMainNavigation-component
-         */
-        cmdMainNavigation: {
-            type: Object,
-            required: true
-        },
         /**
          * use only if default-button of inner navigation-component should not be used
          */
@@ -61,6 +54,13 @@ export default {
         useGrid: {
             type: Boolean,
             default: true
+        },
+        /**
+         * properties for CmdMainNavigation-component
+         */
+        cmdMainNavigation: {
+            type: Object,
+            required: true
         }
     }
 }
@@ -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"
-        ]
     }
 }

package/src/documentation/generated/CmdOpeningHoursPropertyDescriptions.json

@@ -14,9 +14,14 @@
             ]
         }
     },
-    "textOpenClosed": {
+    "textOpen": {
         "comments": [
-            "text for open/closed-information"
+            "text for 'open'-information"
+        ]
+    },
+    "textClosed": {
+        "comments": [
+            "text for 'closed'-information"
         ]
     },
     "openingHours": {
@@ -38,5 +43,15 @@
         "comments": [
             "properties for CmdHeadline-component"
         ]
+    },
+    "timeFormatter": {
+        "comments": [
+            "option to set custom time format by function"
+        ]
+    },
+    "componentHandlesClosedStatus": {
+        "comments": [
+            "activate if component should update open-/closed-status on its own"
+        ]
     }
 }

package/src/documentation/generated/CmdSiteHeaderPropertyDescriptions.json

@@ -1,9 +1,4 @@
 {
-    "cmdMainNavigation": {
-        "comments": [
-            "properties for CmdMainNavigation-component"
-        ]
-    },
     "closeOffcanvas": {
         "comments": [
             "use only if default-button of inner navigation-component should not be used"
@@ -23,5 +18,10 @@
                 "true"
             ]
         }
+    },
+    "cmdMainNavigation": {
+        "comments": [
+            "properties for CmdMainNavigation-component"
+        ]
     }
 }

package/src/mixins/FieldValidation.js

@@ -142,9 +142,31 @@ export default {
                     iconClass: "icon-not-visible"
                 }
             }
+        },
+        /**
+         * properties for CmdListOfRequirements-component
+         */
+        cmdListOfRequirements: {
+            type: Object,
+            required: false
         }
     },
     computed: {
+        listOfRequirements() {
+            if (this.cmdListOfRequirements == null) {
+                return {
+                    showRequirements: true,
+                    showHeadline: true,
+                    validationTooltip: this.validationTooltip,
+                    inputRequirements: this.inputRequirements,
+                    inputAttributes: this.$attrs,
+                    inputModelValue: this.modelValue,
+                    helplink: {},
+                    labelText: this.labelText
+                }
+            }
+            return this.cmdListOfRequirements
+        },
         getValidationMessage() {
             // check if all requirements are valid
             // const allRequirementsValid = !this.inputRequirements.some((item) => {