comand-component-library 3.3.87 → 4.0.1

package/src/components/CmdMultistepFormProgressBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <ol class="cmd-multistep-form-progress-bar">
+    <ol :class="['cmd-multistep-form-progress-bar', {'use-gap': useGap}]">
         <li v-for="(step, index) in multisteps" :key="index" :class="{active : activeLink === index}">
             <!-- begin type === href -->
             <a v-if="step.type === 'href'"
@@ -86,6 +86,10 @@ export default {
             default() {
                 return "icon-single-arrow-right"
             }
+        },
+        useGap: {
+            type: Boolean,
+            default: true
         }
     },
     methods: {
@@ -100,14 +104,42 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-multistep-form-progress-bar ---------------------------------------------------------------------------------------- */
-@import '../assets/styles/variables';
 
 .cmd-multistep-form-progress-bar {
     display: flex;
     justify-content: space-around;
     border: var(--default-border);
+    margin: 0;
+    border-radius: var(--default-border-radius);
+
+    &.use-gap {
+        border: 0;
+        gap: var(--default-gap);
+
+        li {
+            border: var(--default-border) !important;
+            border-radius: var(--default-border-radius);;
+
+            a, a.active {
+                border: 0;
+                border-radius: inherit;
+
+                :is(span, [class*="icon-"]) + [class*="icon-"]:last-child {
+                    border: 0;
+                    right: -1rem;
+                    background: none;
+                }
+            }
+
+            a {
+                :is(span, [class*="icon-"]) + [class*="icon-"]:last-child {
+                    color: var(--default-text-color) !important;
+                }
+            }
+        }
+    }
 
     li {
         display: flex;
@@ -115,6 +147,16 @@ export default {
         list-style-type: none;
         margin: 0;
 
+        &:first-child, &:first-child > a {
+            border-top-left-radius: inherit;
+            border-bottom-left-radius: inherit;
+        }
+
+        &:last-child, &:last-child > a {
+            border-top-right-radius: inherit;
+            border-bottom-right-radius: inherit;
+        }
+
         a {
             display: flex;
             text-decoration: none;
@@ -263,6 +305,10 @@ export default {
         }
     }
 }
+</style>
+
+<style lang="scss">
+@import '../assets/styles/variables';
 
 @media only screen and (width < #{$small-max-width}) {
     .cmd-multistep-form-progress-bar {
@@ -274,7 +320,7 @@ export default {
             }
 
             a {
-                span, [class*="icon-"] {
+                :is(span, [class*="icon-"]) {
                     & + [class*="icon-"] {
                         &:last-child {
                             left: auto;

package/src/components/CmdNewsletterSubscription.vue

@@ -71,6 +71,13 @@ export default {
                 return value === "submit" || value === "button"
             }
         },
+        /**
+         * toggle legend visibility
+         */
+        showLegend: {
+            type: Boolean,
+            default: true
+        },
         /**
          * text used as legend for login-fieldset
          *
@@ -80,13 +87,6 @@ export default {
             type: String,
             default: "Stay up-to-date"
         },
-        /**
-         * toggle legend visibility
-         */
-        showLegend: {
-            type: Boolean,
-            default: true
-        },
         /**
          * properties for CmdInputGroup-component
          */
@@ -171,11 +171,4 @@ export default {
         }
     }
 }
-</script>
-
-<style lang="scss">
-/* begin cmd-newsletter-subscription ---------------------------------------------------------------------------------------- */
-
-
-/* cmd-newsletter-subscription------------------------------------------------------------------------------------------ */
-</style>
+</script>

package/src/components/CmdOpeningHours.vue

@@ -55,7 +55,8 @@
                 :key="index"
                 :day="day"
                 :separator="separator"
-                :abbreviationText="abbreviationText"
+                :abbreviationTextAm="abbreviationTextAm"
+                :abbreviationTextPm="abbreviationTextPm"
             />
         </dl>
         <!-- end default view -->
@@ -82,7 +83,8 @@
                 <CmdOpeningHoursItem
                     :day="day"
                     :separator="separator"
-                    :abbreviationText="abbreviationText"
+                    :abbreviationTextAm="abbreviationTextAm"
+                    :abbreviationTextPm="abbreviationTextPm"
                 />
             </dl>
         </EditComponentWrapper>
@@ -168,13 +170,6 @@ export default {
         }
     },
     props: {
-        /**
-         * set a link to a detail page
-         */
-        link: {
-            type: Object,
-            required: false
-        },
         /**
          * toggles if "closed"-text will be shown
          *
@@ -184,6 +179,13 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * set a link to a detail page
+         */
+        link: {
+            type: Object,
+            required: false
+        },
         /**
          * text for 'open'-information
          */
@@ -198,13 +200,26 @@ export default {
             type: String,
             default: "Closed right now!"
         },
+        /**
+         * separator between time-spans
+         */
         separator: {
             type: String,
             default: "–"
         },
-        abbreviationText: {
+        /**
+         * abbreviation (behind time) for morning
+         */
+        abbreviationTextAm: {
+            type: String,
+            default: "am"
+        },
+        /**
+         * abbreviation (behind time) for afternoon
+         */
+        abbreviationTextPm: {
             type: String,
-            default: "h"
+            default: "pm"
         },
         /**
          * list of opening-hours
@@ -227,13 +242,6 @@ export default {
             type: String,
             required: false
         },
-        /**
-         * properties for CmdHeadline-component
-         */
-        cmdHeadline: {
-            type: Object,
-            required: false
-        },
         /**
          * option to set custom time format by function
          */
@@ -254,6 +262,13 @@ export default {
         checkInterval: {
             type: Number,
             default: 5000
+        },
+        /**
+         * properties for CmdHeadline-component
+         */
+        cmdHeadline: {
+            type: Object,
+            required: false
         }
     },
     mounted() {
@@ -434,7 +449,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-opening-hours ------------------------------------------------------------------------------------------ */
 .cmd-opening-hours {
     > a, > span {

package/src/components/CmdOpeningHoursItem.vue

@@ -5,17 +5,11 @@
         <dd>
             <span v-if="day.am" class="am">
                 <template v-if="day.am.displayText">{{ day.am.displayText }}</template>
-                <template
-                    v-else>{{ getTime(day.am.fromTime) }} {{ separator }} {{
-                        getTime(day.am.tillTime)
-                    }}</template>
+                <template v-else>{{ getTime(day.am.fromTime, abbreviationTextAm) }} {{ separator }} {{getTime(day.am.tillTime)}}</template>
             </span>
             <span v-if="day.pm" class="pm">
                 <template v-if="day.pm.displayText">{{ day.pm.displayText }}</template>
-                <template
-                    v-else>{{ getTime(day.pm.fromTime) }} {{ separator }} {{
-                        getTime(day.pm.tillTime)
-                    }}</template>
+                <template v-else>{{ getTime(day.pm.fromTime, abbreviationTextPm) }} {{ separator }} {{getTime(day.pm.tillTime)}}</template>
             </span>
         </dd>
     </template>
@@ -178,11 +172,18 @@ export default {
             default: "–"
         },
         /**
-         *  abbreviation text for 'hours' (as a unit after displayed times)
+         * abbreviation (behind time) for morning
          */
-        abbreviationText: {
+        abbreviationTextAm: {
             type: String,
-            default: "h"
+            default: "am"
+        },
+        /**
+         * abbreviation (behind time) for afternoon
+         */
+        abbreviationTextPm: {
+            type: String,
+            default: "pm"
         },
         /**
          * option to set custom time format by function
@@ -196,11 +197,14 @@ export default {
         toggleClosedStatus(period) {
             period  === 'am' ? this.editableDay.amClosed = !this.editableDay.amClosed : this.editableDay.pmClosed = !this.editableDay.pmClosed
         },
-        getTime(time) {
+        getTime(time, suffix) {
             if (this.timeFormatter) {
                 return this.timeFormatter(time.hours, time.mins)
             }
-            return timeFormatting(":", " " + this.abbreviationText, "", false)(time.hours, time.mins)
+
+            console.log("suffix", suffix)
+
+            return timeFormatting(":", " " + this.abbreviationTextAm, " " + this.abbreviationTextPm, false)(time.hours, time.mins)
         },
         updateHandlerProvider() {
             const data = this.editableDay
@@ -246,8 +250,12 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 .edit-mode-opening-hours-item {
+    dt {
+        min-width: 3ch;
+    }
+
     .am-wrapper, .pm-wrapper {
         align-items: center;
         gap: calc(var(--default-gap) / 2);

package/src/components/CmdPagination.vue

@@ -18,12 +18,12 @@
         <div class="page-index">
             <div class="flex-container">
                 <a :href="getHref(page)"
-                   :class="{'disabled': currentPage === index + 1, 'button': linkType === 'button'}"
+                   :class="{'disabled': currentPage === index + 1, 'button': linkType === 'button', 'hidden': !showPageNumbers}"
                    :title="currentPage !== index + 1 ? getMessage('cmdpager.tooltip.go_to_page', index + 1) : getMessage('cmdpager.tooltip.not_possible')"
                    v-for="(page, index) in pages"
                    :key="index"
                    @click.stop.prevent="showPage(page)" aria-live="polite">
-                   <span :class="{hidden: !showPageNumbers}">{{ index + 1 }}</span>
+                    <span>{{ index + 1 }}</span>
                 </a>
             </div>
         </div>
@@ -48,11 +48,12 @@
 // import mixins
 import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdPager/DefaultMessageProperties"
+
 export default {
     name: "CmdPager",
     mixins: [
-      I18n,
-      DefaultMessageProperties
+        I18n,
+        DefaultMessageProperties
     ],
     emits: ['click'],
     data() {
@@ -165,10 +166,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-pagination ---------------------------------------------------------------------------------------- */
-@import '../assets/styles/variables';
-
 .cmd-pager {
     display: flex;
     justify-content: space-between;
@@ -208,7 +207,14 @@ export default {
         }
     }
 
-    @media only screen and (max-width: $medium-max-width) {
+}
+</style>
+
+<style lang="scss">
+@import '../assets/styles/variables';
+
+@media only screen and (max-width: $medium-max-width) {
+    .cmd-pager {
         > a.button {
             span {
                 margin: 0;
@@ -218,16 +224,16 @@ export default {
                 }
             }
         }
-    }
 
-    @media only screen and (max-width: $small-max-width) {
-        .button {
-            width: auto; /* overwrite default settings from framework.css */
-        }
+        @media only screen and (max-width: $small-max-width) {
+            .button {
+                width: auto; /* overwrite default settings from framework.css */
+            }
 
-        .page-index {
-            .flex-container {
-                flex-direction: row; /* overwrite default settings from framework.css */
+            .page-index {
+                .flex-container {
+                    flex-direction: row; /* overwrite default settings from framework.css */
+                }
             }
         }
     }

package/src/components/CmdProgressBar.vue

@@ -54,7 +54,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-progressbar ---------------------------------------------------------------------------------------- */
 .cmd-progressbar {
     .progressbar {

package/src/components/CmdSidebar.vue

@@ -122,7 +122,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
+/* begin cmd-sidebar ---------------------------------------------------------------------------------------- */
 .cmd-sidebar {
     display: flex;
     height: 100%;
@@ -131,6 +132,15 @@ export default {
         padding: 0;
     }
 
+    .cmd-box-wrapper > .grid-container-create-columns {
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .cmd-box {
+        border-left: 0;
+        border-right: 0;
+    }
+
     .inner-sidebar-wrapper {
         flex: 1;
         display: flex;
@@ -157,11 +167,12 @@ export default {
 
     &.collapse-to-right {
         flex-direction: row-reverse;
+        border-right: 0;
 
         > a {
-            border-left: 0;
             border-right: var(--default-border);
         }
     }
 }
+/* end cmd-sidebar ---------------------------------------------------------------------------------------- */
 </style>

package/src/components/CmdSiteFooter.vue

@@ -23,10 +23,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-site-footer ---------------------------------------------------------------------------------------- */
-@import '../assets/styles/variables';
-
 .cmd-site-footer {
     padding: var(--grid-gap) 0;
     border-top: var(--default-border);
@@ -49,6 +47,10 @@ export default {
         flex: none;
     }
 }
+</style>
+
+<style lang="scss">
+@import '../assets/styles/variables';
 
 @media only screen and (max-width: $medium-max-width) {
     .cmd-site-footer {
@@ -57,21 +59,19 @@ export default {
                 margin-bottom: calc(var(--default-margin) * 2);
             }
         }
-    }
-}
 
-@media only screen and (max-width: $small-max-width) {
-    .cmd-site-footer {
-        a {
-            text-decoration: underline;
+        @media only screen and (max-width: $small-max-width) {
+            a {
+                text-decoration: underline;
 
-            &:active {
-                text-decoration: none;
+                &:active {
+                    text-decoration: none;
+                }
             }
-        }
 
-        h4, h5, h6 {
-            margin-top: var(--default-margin);
+            h4, h5, h6 {
+                margin-top: var(--default-margin);
+            }
         }
     }
 }

package/src/components/CmdSiteHeader.vue

@@ -1,5 +1,7 @@
 <template>
-    <div :class="['cmd-site-header', {sticky: sticky, 'navigation-inline': navigationInline, 'off-canvas-right': cmdMainNavigation?.offcanvasPosition === 'right'}]" role="banner">
+    <div
+        :class="['cmd-site-header site-header', {sticky: sticky, 'navigation-inline': navigationInline, 'off-canvas-right': cmdMainNavigation?.offcanvasPosition === 'right'}]"
+        role="banner">
         <!-- begin slot for elements above header -->
         <div v-if="$slots.topheader" class="top-header">
             <slot name="topheader"></slot>
@@ -33,6 +35,7 @@
                     v-if="cmdMainNavigation?.navigationEntries?.length && navigationInline"
                     :navigationEntries="cmdMainNavigation.navigationEntries"
                     :offcanvasPosition="cmdMainNavigation.offcanvasPosition"
+                    :stretchMainItems="cmdMainNavigation.stretchMainItems"
                     :closeOffcanvas="closeOffcanvas"
                     @offcanvas="emitOffcanvasStatus"
                 />
@@ -47,6 +50,7 @@
             :navigationEntries="cmdMainNavigation.navigationEntries"
             :offcanvasPosition="cmdMainNavigation.offcanvasPosition"
             :closeOffcanvas="closeOffcanvas"
+            :stretchMainItems="cmdMainNavigation.stretchMainItems"
             @offcanvas="emitOffcanvasStatus"
         />
         <!-- end CmdMainNavigation -->
@@ -106,7 +110,7 @@ export default {
         }
     },
     methods: {
-        emitOffcanvasStatus(event){
+        emitOffcanvasStatus(event) {
             this.$emit("offcanvas", event)
         }
     }
@@ -115,8 +119,6 @@ export default {
 
 <style lang="scss">
 /* begin cmd-site-header ---------------------------------------------------------------------------------------- */
-@import '../assets/styles/variables';
-
 .cmd-site-header {
     grid-area: site-header;
     display: flex;
@@ -152,7 +154,7 @@ export default {
         border-bottom: 0;
     }
 
-    // use id to ensure high specificity
+    /* use id to ensure high specificity */
     > .cmd-main-navigation#main-navigation-wrapper:last-child {
         border-bottom: 0;
     }
@@ -183,14 +185,10 @@ export default {
         .cmd-main-navigation,
         nav ul li {
             border-bottom: 0;
-            background: none;
-        }
-
-        .cmd-company-logo {
-            grid-column: span var(--grid-small-span);
         }
     }
 
+    /* begin inline-navigation (shares spaces with company-logo */
     &.navigation-inline {
         header {
             &.has-navigation {
@@ -209,26 +207,7 @@ export default {
                 display: flex;
                 align-items: center;
                 justify-content: flex-end;
-                border: 0;
                 grid-column: span var(--grid-large-span);
-                background: none;
-
-                :where(nav, .nav) {
-                    margin-right: 0;
-
-                    > ul {
-                        border: 0;
-                        background: none;
-
-                        li {
-                            border: 0;
-
-                            ul {
-                                border-top: var(--default-border);
-                            }
-                        }
-                    }
-                }
 
                 &:not(.persist-on-mobile) {
                     padding-left: 0 !important;
@@ -244,7 +223,13 @@ export default {
             }
         }
     }
+
+    /* end inline-navigation (shares spaces with company-logo */
 }
+</style>
+
+<style lang="scss">
+@import '../assets/styles/variables';
 
 @media only screen and (max-width: $medium-max-width) {
     .cmd-site-header {

package/src/components/CmdSiteSearch.vue

@@ -69,7 +69,7 @@
         <!-- end form-elements -->
 
         <!-- begin filters -->
-        <template v-if="cmdFakeSelect?.show">
+        <template v-if="useFilters">
             <a href="#" @click.prevent="showFilters = !showFilters">
                 <!-- begin CmdIcon -->
                 <CmdIcon
@@ -97,8 +97,9 @@
         </template>
         <!-- end filters -->
     </fieldset>
+
     <!-- begin CmdFormFilters -->
-    <CmdFormFilters v-if="cmdFakeSelect?.show" v-model="searchFilters" :selectedOptionsName="getOptionName"/>
+    <CmdFormFilters v-if="useFilters" v-model="searchFilters" :selectedOptionsName="getOptionName"/>
     <!-- end CmdFormFilters -->
 </template>
 
@@ -158,15 +159,6 @@ export default {
             type: Boolean,
             default: true
         },
-        /**
-         * text for legend
-         *
-         * @requiredForAccessibility: true
-         */
-        textLegend: {
-            type: String,
-            required: false
-        },
         /**
          * toggle legend visibility
          *
@@ -176,6 +168,15 @@ export default {
             type: Boolean,
             default: true
         },
+        /**
+         * text for legend
+         *
+         * @requiredForAccessibility: true
+         */
+        textLegend: {
+            type: String,
+            required: false
+        },
         /**
          * send search result from outside to display inside this component
          */