comand-component-library 3.1.73 → 3.1.76

package/src/components/CmdListOfRequirements.vue

@@ -0,0 +1,150 @@
+<template>
+    <div class="cmd-list-of-requirements">
+        <!-- begin cmd-custom-headline -->
+        <CmdHeadline :headline-level="CmdHeadline.headlineLevel">
+            <!-- {{ getMessage("cmdfakeselect.headline.requirements_for_input") }}<br/>"{{ labelText }}" -->
+        </CmdHeadline>
+        <!-- end cmd-custom-headline -->
+
+        <!-- begin list of requirements -->
+        <dl>
+            <template v-for="(requirement, index) in inputRequirements" :key="index">
+                <dt aria-live="assertive" :class="requirement.valid(inputModelValue, inputAttributes) ? 'success' : 'error'">{{ requirement.message }}:</dt>
+                <dd :class="requirement.valid(inputModelValue, inputAttributes) ? 'success' : 'error'">
+                    <span
+                        aria-live="assertive"
+                        :class="requirement.valid(inputModelValue, inputAttributes) ? 'icon-check-circle' : 'icon-error-circle'"
+                        :title="requirement.valid(inputModelValue, inputAttributes) ? 'success' : 'error'"
+                    >
+                    </span>
+                </dd>
+            </template>
+        </dl>
+        <!-- end list of requirements -->
+
+        <!-- begin helplink -->
+        <template v-if="helplink && helplink.show">
+            <hr />
+            <a
+                v-if="helplink.url"
+                :href="helplink.url"
+                :target="helplink.target"
+                @click.prevent
+            >
+                <span v-if="helplink.icon?.iconClass"
+                      :class="helplink.icon?.iconClass"
+                      :title="helplink.icon?.tooltip">
+                </span>
+                <span v-if="helplink.text">
+                    {{ helplink.text }}
+                </span>
+            </a>
+        </template>
+        <!-- end helplink -->
+    </div>
+</template>
+
+<script>
+// import components
+import CmdHeadline from "./CmdHeadline"
+
+export default {
+    name: "CmdListOfRequirements",
+    components: {
+        CmdHeadline
+    },
+    props: {
+        /**
+        * property to check validity of given modelValue
+        */
+        inputModelValue: {
+            type: [String, Boolean, Array, Number],
+            default: ""
+        },
+        /**
+         * property to check validity of given attributes
+         */
+        inputAttributes: {
+            type: Object,
+            required: true
+        },
+        /**
+         * text for label
+         */
+        labelText: {
+            type: String,
+            required: false
+        },
+        /**
+         * list of all requirements
+         */
+        inputRequirements: {
+            type: Array,
+            required: true
+        },
+        /**
+         * set a helplink to a different page for further support
+         */
+        helplink: {
+            type: String,
+            required: false
+        },
+        /**
+         * properties of CmdHeadline-component
+         */
+        CmdHeadline: {
+            type: Object,
+            default() {
+                return {
+                    headlineLevel: 4
+                }
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+/* begin cmd-list-of-requirements ------------------------------------------------------------------------------------------ */
+.cmd-list-of-requirements {
+    dl {
+        .error {
+            --status-color: var(--error-color);
+        }
+
+        .warning {
+            --status-color: var(--warning-color);
+        }
+
+        .success {
+            --status-color: var(--success-color);
+        }
+
+        .info {
+            --status-color: var(--info-color);
+        }
+
+        dt {
+            color: var(--status-color);
+        }
+
+        span[class*="icon"] {
+            font-size: 1.2rem;
+            color: var(--status-color);
+        }
+
+        & ~ a {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            text-decoration: none;
+
+            span[class*="icon"] {
+                font-size: 1.2rem;
+            }
+        }
+    }
+}
+/* end cmd-list-of-requirements ------------------------------------------------------------------------------------------ */
+</style>

package/src/components/CmdLoginForm.vue

@@ -2,10 +2,10 @@
     <!-- begin login-form -->
     <fieldset v-if="!sendLogin" class="cmd-login-form flex-container">
         <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
-        <!-- begin CmdCustomHeadline -->
-        <CmdCustomHeadline v-if="cmdCustomHeadlineLoginForm"
-                           v-bind="cmdCustomHeadlineLoginForm"/>
-        <!-- end CmdCustomHeadline -->
+        <!-- begin CmdHeadline -->
+        <CmdHeadline v-if="CmdHeadlineLoginForm"
+                           v-bind="CmdHeadlineLoginForm"/>
+        <!-- end CmdHeadline -->
 
         <!-- being form elements -->
         <div class="flex-container">
@@ -121,13 +121,13 @@
     <!-- begin send-login-form -->
     <fieldset v-else class="cmd-login-form flex-container">
         <legend :class="{'hidden' : !legendSendLoginForm.show}">{{ legendSendLoginForm.text }}</legend>
-        <!-- begin CmdCustomHeadline -->
-        <CmdCustomHeadline v-if="cmdCustomHeadlineSendLoginForm"
-                           :iconClass="cmdCustomHeadlineSendLoginForm.iconClass"
-                           :preHeadline="cmdCustomHeadlineSendLoginForm.preHeadline"
-                           :headlineLevel="cmdCustomHeadlineSendLoginForm.preHeadline"
-                           :headlineText="cmdCustomHeadlineSendLoginForm.headlineText"/>
-        <!-- end CmdCustomHeadline -->
+        <!-- begin CmdHeadline -->
+        <CmdHeadline v-if="CmdHeadlineSendLoginForm"
+                           :iconClass="CmdHeadlineSendLoginForm.iconClass"
+                           :preHeadline="CmdHeadlineSendLoginForm.preHeadline"
+                           :headlineLevel="CmdHeadlineSendLoginForm.preHeadline"
+                           :headlineText="CmdHeadlineSendLoginForm.headlineText"/>
+        <!-- end CmdHeadline -->
 
         <!-- begin CmdFormElement -->
         <CmdFormElement
@@ -209,7 +209,7 @@
 import {getRoute} from "../utilities.js"
 
 // import components
-import CmdCustomHeadline from "./CmdCustomHeadline"
+import CmdHeadline from "./CmdHeadline"
 import CmdFormElement from "./CmdFormElement"
 
 export default {
@@ -223,7 +223,7 @@ export default {
         }
     },
     components: {
-        CmdCustomHeadline,
+        CmdHeadline,
         CmdFormElement
     },
     props: {
@@ -270,16 +270,16 @@ export default {
             }
         },
         /**
-         * properties for CmdCustomHeadline-component for login-form
+         * properties for CmdHeadline-component for login-form
          */
-        cmdCustomHeadlineLoginForm: {
+        CmdHeadlineLoginForm: {
             type: Object,
             required: false
         },
         /**
-         * properties for CmdCustomHeadline-component for send-login-form
+         * properties for CmdHeadline-component for send-login-form
          */
-        cmdCustomHeadlineSendLoginForm: {
+        CmdHeadlineSendLoginForm: {
             type: Object,
             default() {
                 return {

package/src/components/CmdMainNavigation.vue

@@ -305,7 +305,7 @@ export default {
 
         /* begin offcanvas-navigation */
         &:not(.persist-on-mobile) {
-            transition: (--nav-transition);
+            transition: var(--nav-transition);
 
             #toggle-offcanvas {
                 display: flex;
@@ -433,7 +433,7 @@ export default {
                                 height: auto;
                                 display: block;
                                 opacity: 1;
-                                transition: (--nav-transition);
+                                transition: var(--nav-transition);
 
                                 > li {
                                     > a {

package/src/components/CmdOpeningHours.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="cmd-opening-hours">
         <!-- begin cmd-custom-headline -->
-        <CmdCustomHeadline v-if="cmdCustomHeadline" v-bind="cmdCustomHeadline" />
+        <CmdHeadline v-if="CmdHeadline" v-bind="CmdHeadline" />
         <!-- end cmd-custom-headline -->
 
         <!-- begin opening-status with link to detail-page -->
@@ -38,16 +38,16 @@
 
 <script>
 // import components
-import CmdCustomHeadline from "./CmdCustomHeadline"
+import CmdHeadline from "./CmdHeadline"
 
 export default {
     name: "CmdOpeningHours",
-    components: {CmdCustomHeadline},
+    components: {CmdHeadline},
     props: {
         /**
-         * properties for CmdCustomHeadline-component
+         * properties for CmdHeadline-component
          */
-        cmdCustomHeadline: {
+        CmdHeadline: {
             type: Object,
             required: false
         },

package/src/components/CmdSiteFooter.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="cmd-site-footer">
+        <footer :class="['flex-container', {vertical: orientation === 'vertical'}]">
+            <slot></slot>
+        </footer>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "CmdSiteFooter",
+    props: {
+        /**
+         * set to vertical if items inside should be arranged vertically
+         *
+         * @allowedValues: horizontal, vertical
+         */
+        orientation: {
+            type: String,
+            default: 'horizontal'
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+/* begin cmd-site-footer ---------------------------------------------------------------------------------------- */
+@import '../assets/styles/variables';
+
+.cmd-site-footer {
+    padding: var(--grid-gap) 0;
+    border-top: var(--default-border);
+    background: var(--default-background-color);
+
+    footer {
+        max-width: var(--max-width);
+        width: 100%; /* stretch flex-item */
+        margin: 0 auto;
+        padding: 0 var(--default-padding);
+    }
+
+    &.sticky {
+        top: auto;
+        bottom: 0;
+    }
+
+    .cmd-switch-language {
+        width: 100%;
+        flex: none;
+    }
+}
+
+@media only screen and (max-width: $medium-max-width) {
+    .cmd-site-footer {
+        footer {
+            li {
+                margin-bottom: calc(var(--default-margin) * 2);
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: $small-max-width) {
+    .cmd-site-footer {
+        a {
+            text-decoration: underline;
+
+            &:active {
+                text-decoration: none;
+            }
+        }
+    }
+}
+
+/* end cmd-site-footer ---------------------------------------------------------------------------------------- */
+</style>

package/src/components/CmdSiteHeader.vue

@@ -101,7 +101,8 @@ export default {
     }
 
     header {
-        padding: calc(var(--default-padding) * 2) 0;
+        padding-top: calc(var(--default-padding) * 2);
+        padding-bottom: calc(var(--default-padding) * 2);
 
         &.flex-container {
             width: 100%;

package/src/components/CmdSlideshow.vue

@@ -10,13 +10,13 @@
 
             <!-- begin area to slide -->
             <transition name="fade">
-                <a v-if="currentItem.href" :href="currentItem.href" :key="index" :title="currentItem.title">
+                <a v-if="currentItem?.href" :href="currentItem.href" :key="index" :title="currentItem.title">
                     <figure v-if="currentItem && !useSlot" class="slideshow-item">
                         <img :src="currentItem.imgPath" :alt="currentItem.alt"/>
                         <figcaption>{{ currentItem.figcaption }}</figcaption>
                     </figure>
                 </a>
-                <figure v-else-if="!currentItem.href && currentItem && !useSlot" :key="index" class="slideshow-item">
+                <figure v-else-if="currentItem && !currentItem.href && currentItem && !useSlot" :key="index" class="slideshow-item">
                         <img :src="currentItem.imgPath" :alt="currentItem.alt"/>
                         <figcaption>{{ currentItem.figcaption }}</figcaption>
                 </figure>
@@ -160,14 +160,12 @@ export default {
             }
             this.preload(this.index)
         },
-
         showItem(i) {
             if (i >= 0 && i < this.slideshowItems.length) {
                 this.index = i;
                 this.preload(this.index);
             }
         },
-
         showNextItem() {
             if (this.useSlot) {
                 if (this.currentSlotItem < Object.keys(this.$slots).length - 1) {
@@ -240,10 +238,12 @@ export default {
     /* computed property to get current slide */
     computed: {
         currentItem() {
-            return this.getDeviceImage(this.slideshowItems[this.index]);
+            if(this.slideshowItems.length <= this.index) {
+                return null
+            }
+            return this.getDeviceImage(this.slideshowItems[this.index])
         }
     },
-
     watch: {
         slideshowItems: {
             handler() {

package/src/components/CmdSystemMessage.vue

@@ -5,6 +5,7 @@
             :class="['cmd-system-message', 'system-message', 'flex-container', 'vertical', { 'full-width': fullWidth }, validationStatus]"
             :role="validationStatus === 'error' ? 'alert' : 'dialog'"
         >
+            <!-- begin close-icon -->
             <a
                 v-if="iconClose.show && iconClose.iconClass"
                 :class="iconClose.iconClass"
@@ -12,10 +13,17 @@
                 @click.prevent="showSystemMessage = false"
                 :title="iconClose.tooltip"
             ></a>
-            <h6>
-                <span v-if="iconMessage && iconMessage.iconClass" :class="iconMessage.iconClass"></span>
-                <strong v-if="systemMessage">{{ systemMessage }}</strong>
-            </h6>
+            <!-- end close-icon -->
+
+            <!-- begin cmd-headline -->
+            <CmdHeadline
+                class="message-headline"
+                :iconClass="iconMessage.iconClass"
+                :headlineText="systemMessage"
+                :headlineLevel="messageHeadlineLevel"
+            />
+            <!-- end cmd-headline -->
+
             <!-- begin slot-content -->
             <slot></slot>
             <!-- end slot-content -->
@@ -24,8 +32,14 @@
 </template>
 
 <script>
+// import components
+import CmdHeadline from "./CmdHeadline"
+
 export default {
     name: "CmdSystemMessage",
+    components: {
+        CmdHeadline
+    },
     data() {
         return {
             showSystemMessage: true
@@ -68,6 +82,15 @@ export default {
             type: String,
             required: false
         },
+        /**
+         * set headline-level for system-message (given to CmdHeadline-component)
+         */
+        messageHeadlineLevel: {
+            type: [Number, String],
+            default() {
+                return 6
+            }
+        },
         /**
          * icon to close system-message
          *
@@ -75,7 +98,7 @@ export default {
          */
         iconClose: {
             type: Object,
-            default: function () {
+            default() {
                 return {
                     show: true,
                     iconClass: "icon-cancel",
@@ -98,12 +121,6 @@ export default {
     margin: var(--default-margin) 0;
     align-items: center;
 
-    h6 {
-        strong {
-            margin-left: calc(var(--default-margin) / 2);
-        }
-    }
-
     > :last-child {
         margin-bottom: 0;
     }

package/src/components/CmdTabs.vue

@@ -16,13 +16,13 @@
             </div>
         </template>
         <div v-else aria-live="assertive">
-            <!-- begin CmdCustomHeadline -->
-            <CmdCustomHeadline
-               v-bind="cmdCustomHeadline"
+            <!-- begin CmdHeadline -->
+            <CmdHeadline
+               v-bind="CmdHeadline"
                :headlineText="tabs[showTab].headlineText"
                :headlineLevel="tabs[showTab].headlineLevel"
             />
-            <!-- end CmdCustomHeadline -->
+            <!-- end CmdHeadline -->
             <div v-html="tabs[showTab].htmlContent"></div>
         </div>
     </div>
@@ -30,12 +30,12 @@
 
 <script>
 // import components
-import CmdCustomHeadline from "./CmdCustomHeadline"
+import CmdHeadline from "./CmdHeadline"
 
 export default {
     name: "CmdTabs",
     components: {
-        CmdCustomHeadline
+        CmdHeadline
     },
     data() {
         return {
@@ -45,9 +45,9 @@ export default {
     emits: ["active-tab"],
     props: {
         /**
-         * properties for CmdCustomHeadline-component
+         * properties for CmdHeadline-component
          */
-        cmdCustomHeadline: {
+        CmdHeadline: {
             type: Object,
             required: false
         },

package/src/components/CmdToggleDarkMode.vue

@@ -7,9 +7,6 @@
             :showLabel="showLabel"
             v-model="darkMode"
             :toggle-switch="true"
-            :useIconsForToggleSwitch="true"
-            toggle-switch-checked-icon-class="icon-home"
-            toggle-switch-unchecked-icon-class="icon-globe"
         />
     </div>
 </template>
@@ -73,13 +70,53 @@ export default {
 .cmd-toggle-dark-mode {
     .cmd-form-element {
         input {
-            background: blue;
+            --dark-blue: hsl(195, 96%, 45%);
+            --medium-blue: hsl(194, 97%, 39%);
+            --light-blue: hsl(195, 97%, 76%);
+            background: linear-gradient(to bottom, var(--dark-blue) 0%,var(--light-blue) 67%);
+            border-color: var(--medium-blue);
+
+            &:after {
+                --yellow-hue: 60;
+                --yellow-saturation: 100%;
+                --yellow-lightness: 76.7%;
+                background: radial-gradient(ellipse at center, var(--pure-white) 20%, hsl(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness)) 30%, hsla(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness),0) 100%);
+                border-color: transparent;
+                box-shadow: 0 0 1rem hsl(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness));
+            }
         }
     }
 
     &.dark-mode {
         input {
-            background: black;
+            background: var(--color-scheme-background-color);
+            border-color: var(--color-scheme-text-color);
+
+            &:before {
+                --size: 1.2rem;
+                content: "";
+                width: var(--size);
+                aspect-ratio: 1/1;
+                background: var(--color-scheme-background-color);
+                border-radius: var(--full-circle);
+                position: absolute;
+                top: 0;
+                right: calc(var(--size) / 2);
+                transform: translateY(calc(50% - 35%));
+                z-index: 100;
+            }
+
+            &:after {
+                background: radial-gradient(ellipse at center,  var(--pure-white) 50%,var(--medium-gray) 100%);
+                border-color: transparent;
+                box-shadow: .2rem .1rem .2rem hsla(var(--pure-white-hue), var(--pure-white-saturation), var(--pure-white-lightness), .3);
+            }
+        }
+
+        .label-text {
+            span {
+                color: var(--color-scheme-text-color);
+            }
         }
     }
 }

package/src/components/CmdTooltip.vue

@@ -1,16 +1,16 @@
 <template>
     <div v-if="tooltipVisibility" :class="['cmd-tooltip', status]" ref="tooltip" aria-role="tooltip">
-        <div v-if="cmdCustomHeadline || iconClose.show" class="headline-wrapper">
-            <!-- begin CmdCustomHeadline -->
-            <CmdCustomHeadline v-if="cmdCustomHeadline"
-                               :iconClass="cmdCustomHeadline.iconClass"
-                               :preHeadline="cmdCustomHeadline.preHeadline"
-                               :headlineLevel="cmdCustomHeadline.headlineLevel"
-                               :headlineText="cmdCustomHeadline.headlineText"/>
-            <!-- end CmdCustomHeadline -->
+        <div v-if="CmdHeadline || iconClose.show" class="headline-wrapper">
+            <!-- begin CmdHeadline -->
+            <CmdHeadline v-if="CmdHeadline"
+                               :iconClass="CmdHeadline.iconClass"
+                               :preHeadline="CmdHeadline.preHeadline"
+                               :headlineLevel="CmdHeadline.headlineLevel"
+                               :headlineText="CmdHeadline.headlineText"/>
+            <!-- end CmdHeadline -->
 
             <!-- begin icon to close tooltip -->
-            <a v-if="iconClose.show && toggleVisibilityByClick" href="#" @click.prevent="tooltipVisibility = false" :title="iconClose.tooltip">
+            <a v-if="iconClose.show && toggleVisibilityByClick" href="#" @click.prevent="hideTooltip" :title="iconClose.tooltip">
                 <span :class="iconClose.iconClass"></span>
             </a>
             <!-- end icon to close tooltip -->
@@ -25,12 +25,12 @@
 
 <script>
 // import components
-import CmdCustomHeadline from "./CmdCustomHeadline"
+import CmdHeadline from "./CmdHeadline"
 
 export default {
     name: "CmdTooltip",
     components: {
-        CmdCustomHeadline
+        CmdHeadline
     },
     data() {
         return {
@@ -41,9 +41,9 @@ export default {
     },
     props: {
         /**
-         * properties for CmdCustomHeadline-component
+         * properties for CmdHeadline-component
          */
-        cmdCustomHeadline: {
+        CmdHeadline: {
             type: Object,
             default() {}
         },