comand-component-library 3.3.48 → 3.3.50

package/src/components/CmdSiteHeader.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['cmd-site-header', {sticky: sticky, 'navigation-inline': navigationInline}]" role="banner">
+    <div :class="['cmd-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>
@@ -31,8 +31,10 @@
                 <!-- begin CmdMainNavigation -->
                 <CmdMainNavigation
                     v-if="cmdMainNavigation?.navigationEntries?.length && navigationInline"
+                    :navigationEntries="cmdMainNavigation.navigationEntries"
+                    :offcanvasPosition="cmdMainNavigation.offcanvasPosition"
                     :closeOffcanvas="closeOffcanvas"
-                    v-bind="cmdMainNavigation"
+                    @offcanvas="emitOffcanvasStatus"
                 />
                 <!-- end CmdMainNavigation -->
             </template>
@@ -43,7 +45,9 @@
         <CmdMainNavigation
             v-if="cmdMainNavigation?.navigationEntries?.length && !navigationInline"
             :navigationEntries="cmdMainNavigation.navigationEntries"
+            :offcanvasPosition="cmdMainNavigation.offcanvasPosition"
             :closeOffcanvas="closeOffcanvas"
+            @offcanvas="emitOffcanvasStatus"
         />
         <!-- end CmdMainNavigation -->
     </div>
@@ -52,6 +56,7 @@
 <script>
 export default {
     name: "CmdSiteHeader",
+    emits: ["offcanvas"],
     props: {
         /**
          * use only if default-button of inner navigation-component should not be used
@@ -99,6 +104,11 @@ export default {
             type: Object,
             required: false
         }
+    },
+    methods: {
+        emitOffcanvasStatus(event){
+            this.$emit("offcanvas", event)
+        }
     }
 }
 </script>
@@ -185,7 +195,7 @@ export default {
         header {
             &.has-navigation {
                 grid-template-rows: 1fr;
-                grid-template-areas: "company-logo main-navigation";
+                grid-template-areas: "main-navigation company-logo";
                 padding-bottom: calc(var(--default-padding) * 2);
             }
 
@@ -220,15 +230,21 @@ export default {
                 }
             }
         }
+
+        &.off-canvas-right {
+            header {
+                &.has-navigation {
+                    grid-template-areas: "company-logo main-navigation";
+                }
+            }
+        }
     }
 }
 
 @media only screen and (max-width: $medium-max-width) {
-    .cmd-site-header{
-        &:not(.navigation-inline) {
-            padding-top: calc(var(--default-padding) * 2);
-            padding-bottom: calc(var(--default-padding) * 2);
-        }
+    .cmd-site-header {
+        padding-top: calc(var(--default-padding) * 2);
+        padding-bottom: calc(var(--default-padding) * 2);
 
         header {
             grid-auto-rows: auto; /* items should be as large as their content */
@@ -241,46 +257,12 @@ export default {
         }
 
         &.navigation-inline {
-            header {
-                &.has-navigation {
-                    grid-template-areas: "main-navigation company-logo";
-                }
-
-                .cmd-company-logo {
-                    grid-column: span var(--grid-small-span);
-                    grid-column-end: -1
-                }
-            }
-
             .cmd-main-navigation#main-navigation-wrapper {
-                grid-column: 1;
-
                 &:not(.persist-on-mobile) {
                     padding-left: var(--default-padding);
                 }
             }
         }
-
-        &.navigation-inline.off-canvas-right {
-            header {
-                &.has-navigation {
-                    grid-template-areas: "company-logo main-navigation";
-                }
-
-                .cmd-company-logo {
-                    grid-column: span var(--grid-large-span);
-                }
-            }
-
-            .cmd-main-navigation#main-navigation-wrapper {
-                grid-column: -1;
-
-                &:not(.persist-on-mobile) {
-                    padding-right: var(--default-padding);
-                    padding-left: 0;
-                }
-            }
-        }
     }
 }
 

package/src/components/CmdTabs.vue

@@ -130,10 +130,6 @@ export default {
                 border-top-right-radius: var(--border-radius);
                 text-decoration: none;
 
-                span, [class*="icon-"] {
-                    line-height: 100%;
-                }
-
                 &:hover, &:active, &:focus {
                     cursor: pointer;
                     color: var(--hyperlink-color-highlighted);
@@ -145,16 +141,12 @@ export default {
                 }
 
                 &.active {
-                    span, [class*="icon-"] {
-                        color: var(--pure-white);
-                    }
-
                     &:hover, &:active, &:focus {
                         color: var(--hyperlink-color);
                         background: var(--pure-white);
 
                         span, [class*="icon-"] {
-                            color: var(--hyperlink-color-highlighted);
+                            color: inherit;
                         }
                     }
                 }

package/src/components/CmdTextBlock.vue

@@ -54,7 +54,7 @@ export default {
          */
         htmlContent: {
             type: String,
-            required: false
+            required: true
         }
     }
 }

package/src/components/CmdThumbnailScroller.vue

@@ -387,12 +387,6 @@ export default {
     }
 }
 
-@media only screen and (width <= #{$small-max-width}) {
-    .cmd-thumbnail-scroller {
-        display: block;
-    }
-}
-
 @container (width <= #{$small-max-width}) {
     .cmd-thumbnail-scroller {
         display: block;

package/src/components/CmdToggleDarkMode.vue

@@ -11,7 +11,7 @@
             <CmdIcon
                 :iconClass="iconClass"
                 :type="iconType"
-                :tooltip="iconTooltip"
+                :tooltip="!showLabel ? labelText: ''"
             />
             <!-- end CmdIcon -->
         </a>
@@ -56,12 +56,11 @@ export default {
          *
          * (styledAsButton-property must be activated)
          */
-        iconDarkModeActivated: {
+        iconDarkMode: {
             default() {
                 return {
-                    iconClass: "icon-sun",
-                    iconType: "auto",
-                    tooltip: "Activate light mode"
+                    iconClass: "icon-home",
+                    iconType: "auto"
                 }
             }
         },
@@ -70,12 +69,11 @@ export default {
          *
          * (styledAsButton-property must be activated)
          */
-        iconLightModeActivated: {
+        iconLightMode: {
             default() {
                 return {
-                    iconClass: "icon-moon",
-                    iconType: "auto",
-                    tooltip: "Activate dark mode"
+                    iconClass: "icon-globe",
+                    iconType: "auto"
                 }
             }
         },
@@ -159,13 +157,10 @@ export default {
             return this.darkMode ? this.labelTextDarkMode : this.labelTextLightMode
         },
         iconClass() {
-            return this.darkMode ? this.iconDarkModeActivated.iconClass : this.iconLightModeActivated.iconClass
+            return this.darkMode ? this.iconDarkMode.iconClass : this.iconLightMode.iconClass
         },
         iconType() {
-            return this.darkMode ? this.iconDarkModeActivated.iconType : this.iconLightModeActivated.iconType
-        },
-        iconTooltip() {
-            return this.darkMode ? this.iconDarkModeActivated.tooltip : this.iconLightModeActivated.tooltip
+            return this.darkMode ? this.iconDarkMode.iconType : this.iconLightMode.iconType
         }
     },
     watch: {

package/src/mixins/CmdAddressData/DefaultMessageProperties.js

@@ -10,10 +10,10 @@ export default {
         "cmdaddressdata.labeltext.email": "Email:",
         "cmdaddressdata.labeltext.website": "Web site:",
         "cmdaddressdata.labeltext.custom": "Custom:",
-        "cmdaddressdata.tooltip.open_address_on_google_maps:": "Open address on GoogleMaps™ (in new tab)",
-        "cmdaddressdata.tooltip.call_number": "Call number",
-        "cmdaddressdata.tooltip.send_email": "Send email",
-        "cmdaddressdata.tooltip.visit_website": "Visit web site (in new tab)"
+        "cmdaddressdata.title.open_address_on_google_maps:": "Open address on GoogleMaps™ (in new tab)",
+        "cmdaddressdata.title.call_number": "Call number",
+        "cmdaddressdata.title.send_email": "Send email",
+        "cmdaddressdata.title.visit_website": "Visit web site (in new tab)"
       }
     }
   }