comand-component-library 4.3.26 → 4.3.28

package/src/components/CmdMailToolEntry.vue

@@ -220,11 +220,12 @@ export default {
     }
 
     .cmd-image {
-        width: 3rem;
+        max-width: 3rem;
         aspect-ratio: 1/1;
         border: var(--default-border);
         border-radius: var(--full-circle);
         margin: 0; /* overwrite "a img"-selector from frontend-framework */
+        box-shadow: none;
     }
 
     .options-wrapper {

package/src/components/CmdMultistepFormProgressBar.vue

@@ -61,13 +61,13 @@ export default {
          /**
          * set highlight-level for steps
          * 
-         * @allowedValues: "none", "primary", "secondary", "tertiary"
+         * @allowedValues: null, "primary", "secondary", "tertiary"
          */
          highlightLevel: {
             type: String,
             default: "primary",
             validator(value) {
-                return value === "none" ||
+                return value === null ||
                     value === "primary" ||
                     value === "secondary" ||
                     value === "tertiary"

package/src/components/CmdMultistepFormWrapper.vue

@@ -4,7 +4,7 @@
         <!-- begin slot for progress-bar -->
         <slot name="progress-bar" :setCurrentPage="setCurrentPage" :numberOfPages="numberOfPages">
             <CmdMultistepFormProgressBar 
-                v-if="cmdMultistepFormProgressBar.show" 
+                v-if="cmdMultistepFormProgressBarProperties.show" 
                 v-bind="cmdMultistepFormProgressBarProperties"
                 :multisteps="multisteps"
                 :activeStep="currentPage - 1"
@@ -105,11 +105,7 @@ export default {
          */
         cmdMultistepFormProgressBar: {
             type: Object,
-            default() {
-                return {
-                    show: true
-                }
-            }
+            required: false
         },
          /**
          * properties for CmdLink-component

package/src/components/CmdOpeningHours.vue

@@ -3,8 +3,8 @@
     <div class="cmd-opening-hours">
         <!-- begin cmd-headline -->
         <CmdHeadline
-            v-if="cmdHeadline?.headlineText || editModeContext"
-            v-bind="cmdHeadline"
+            v-if="(cmdHeadlineProperties?.show && cmdHeadlineProperties?.headlineText) || editModeContext"
+            v-bind="cmdHeadlineProperties"
         />
         <!-- end cmd-headline -->
 
@@ -157,6 +157,11 @@ export function timeFormatting(separator, suffix1, suffix2, hoursLeadingZero = t
 export default {
     name: "CmdOpeningHours",
     mixins: [EditMode],
+    inject: {
+        editModeContext: {
+            default: null
+        }
+    },
     data() {
         return {
             currentTime: new Date(),
@@ -302,6 +307,13 @@ export default {
         }
     },
     computed: {
+        cmdHeadlineProperties() {
+            return {
+                show: true,
+                headlineLevel: 2,
+                ...this.cmdHeadline
+            }
+        },
         openingHoursFormatted() {
             const weekdays = []
             for (let i = 0; i < this.openingHours.length; i++) {

package/src/components/CmdSidebar.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- begin CmdSidebar ---------------------------------------------------------------------------------------- -->
-    <aside :class="['cmd-sidebar', wrapperClass, {'box': styledAsBox, 'collapse-to-right': !collapseToLeft}]">
+    <div :class="['cmd-sidebar', wrapperClass, {'box': styledAsBox, 'collapse-to-right': !collapseToLeft}]">
         <!-- begin inner-sidebar-wrapper -->
         <div class="inner-sidebar-wrapper">
             <!-- begin CmdHeadline -->
@@ -34,7 +34,7 @@
             <span :class="iconClassOpenCollapse"></span>
         </a>
         <!-- end column to toggle sidebar open-closed-status -->
-    </aside>
+    </div>
     <!-- end CmdSidebar ---------------------------------------------------------------------------------------- -->
 </template>
 

package/src/components/CmdSiteWrapper.vue

@@ -1,29 +1,31 @@
 <template>
     <!-- begin CmdSiteWrapper ---------------------------------------------------------------------------------------- -->
-    <a id="anchor-back-to-top"></a>
     <div :class="['cmd-site-wrapper site-wrapper', { 'overflow-hidden': offCanvasOpen }]"
         :style="{ 'scroll-padding-top': heightSiteHeader + 'px' }" v-fancybox>
-        <!-- begin above-site-header-slot-->
+        <a id="anchor-back-to-top"></a>
+        <!-- begin above-site-header-slot -->
         <slot name="above-site-header"></slot>
-        <!-- end above-site-header-slot-->
+        <!-- end above-site-header-slot -->
 
-        <CmdSiteHeader v-if="cmdSiteHeaderProperties.show" v-bind="cmdSiteHeaderProperties"
-            @offcanvas="offcanvasToggled">
-            <!-- begin site-header-slots-->
-            <template v-slot:topheader>
-                <slot name="topheader"></slot>
-            </template>
-            <template v-slot:logo>
-                <slot name="logo"></slot>
-            </template>
-            <template v-slot:header>
-                <slot name="header"></slot>
-            </template>
-            <template v-slot:navigation>
-                <slot name="navigation"></slot>
-            </template>
-            <!-- end site-header-slots-->
-        </CmdSiteHeader>
+        <slot name="site-header">
+            <CmdSiteHeader v-if="cmdSiteHeaderProperties.show" v-bind="cmdSiteHeaderProperties"
+                @offcanvas="offcanvasToggled">
+                <!-- begin site-header-slots-->
+                <template v-slot:topheader>
+                    <slot name="topheader"></slot>
+                </template>
+                <template v-slot:logo>
+                    <slot name="logo"></slot>
+                </template>
+                <template v-slot:header>
+                    <slot name="header"></slot>
+                </template>
+                <template v-slot:navigation>
+                    <slot name="navigation"></slot>
+                </template>
+                <!-- end site-header-slots-->
+            </CmdSiteHeader>
+        </slot>
 
         <!-- begin hero-section-wrapper -->
         <div v-if="useHeroSection" class="hero-section-wrapper">
@@ -33,6 +35,7 @@
         </div>
         <!-- end hero-section-wrapper -->
 
+        <!-- begin main-content-wrapper -->
         <main class="main-content-wrapper">
             <CmdWidthLimitationWrapper :useFullDeviceWidth="useFullWidthForMainContent"
                 :contentOrientation="contentOrientation">
@@ -67,43 +70,44 @@
                 <!-- begin right column -->
             </CmdWidthLimitationWrapper>
         </main>
+        <!-- end main-content-wrapper -->
 
-        <CmdSiteFooter v-if="cmdSiteFooterProperties.show" v-bind="cmdSiteFooterProperties">
-            <!-- begin site-footer-slot-->
-            <slot name="site-footer">
-                <!-- begin parent-component -->
-                <template v-if="editMode">
-                    <EditComponentWrapper v-for="(component, componentIndex) in cmdSiteFooter.components || []"
-                        :key="componentIndex" :allow-add-component="component.allowAddComponent"
-                        :componentName="component.name" :componentProps="component.props"
-                        :componentPath="componentPath(componentIndex)">
-                        <component :is="component.name" v-bind="component.props">
+        <!-- begin site-footer-slot -->
+        <slot name="site-footer">
+            <CmdSiteFooter v-if="cmdSiteFooterProperties.show" v-bind="cmdSiteFooterProperties">
+                    <!-- begin parent-component -->
+                    <template v-if="editMode">
+                        <EditComponentWrapper v-for="(component, componentIndex) in cmdSiteFooter?.components || []"
+                            :key="componentIndex" :allow-add-component="component.allowAddComponent"
+                            :componentName="component.name" :componentProps="component.props"
+                            :componentPath="componentPath(componentIndex)">
+                            <component :is="component.name" v-bind="component.props">
+                                <!-- begin child-component -->
+                                <component v-for="(childComponent, childComponentIndex) in component.components || []"
+                                    :key="childComponentIndex" :is="childComponent.name" v-bind="childComponent.props"
+                                    :editContent="childComponent.editContent" />
+                                <!-- end child-component -->
+                            </component>
+                        </EditComponentWrapper>
+                    </template>
+                    <template v-else>
+                        <component v-for="(component, index) in cmdSiteFooter?.components || []" :key="index"
+                            :is="component.name" v-bind="component.props">
                             <!-- begin child-component -->
                             <component v-for="(childComponent, childComponentIndex) in component.components || []"
                                 :key="childComponentIndex" :is="childComponent.name" v-bind="childComponent.props"
                                 :editContent="childComponent.editContent" />
                             <!-- end child-component -->
                         </component>
-                    </EditComponentWrapper>
-                </template>
-                <template v-else>
-                    <component v-for="(component, index) in cmdSiteFooter.components || []" :key="index"
-                        :is="component.name" v-bind="component.props">
-                        <!-- begin child-component -->
-                        <component v-for="(childComponent, childComponentIndex) in component.components || []"
-                            :key="childComponentIndex" :is="childComponent.name" v-bind="childComponent.props"
-                            :editContent="childComponent.editContent" />
-                        <!-- end child-component -->
-                    </component>
-                </template>
-                <!-- end parent-component -->
-            </slot>
-            <!-- end site-footer-slot-->
-        </CmdSiteFooter>
+                    </template>
+                    <!-- end parent-component -->
+            </CmdSiteFooter>
+        </slot>
+        <!-- end site-footer-slot -->
 
-        <!-- begin below-site-footer-slot-->
+        <!-- begin below-site-footer-slot -->
         <slot name="below-site-footer"></slot>
-        <!-- end below-site-footer-slot-->
+        <!-- end below-site-footer-slot -->
 
         <CmdBackToTopButton v-if="!offCanvasOpen && cmdBackToTopButtonProperties.show" href="#anchor-back-to-top"
             v-bind="cmdBackToTopButtonProperties" />
@@ -133,15 +137,12 @@ export default {
         }
     },
     props: {
+        /**
+         * active sections shown in page-content-wrapper
+         */
         activeSections: {
-            type: Array
-        },
-        heroSectionActiveSections: {
-            type: Array
-        },
-        editMdoe: {
-            type: Boolean,
-            default: false
+            type: Array,
+            required: false
         },
         /**
          * set aside (left-/right-column) in main-content-wrapper
@@ -225,6 +226,13 @@ export default {
         cmdCookieDisclaimer: {
             type: Object,
             required: false
+        },
+        /**
+         * activate edit-mode
+         */
+         editMode: {
+            type: Boolean,
+            default: false
         }
     },
     computed: {
@@ -375,7 +383,7 @@ export default {
 }
 </style>
 <style lang="scss">
-/*
+
 @import '../assets/styles/variables';
 
 @media only screen and (width <=$medium-max-width) {
@@ -423,5 +431,5 @@ export default {
             }
         }
     }
-}*/
+}
 </style>

package/src/components/CmdSlideshow.vue

@@ -92,6 +92,11 @@ import {createUuid} from "../utils/common.js"
 export default {
     name: "CmdSlideshow",
     mixins: [EditMode],
+    inject: {
+        editModeContext: {
+            default: null
+        }
+    },
     data() {
         return {
             index: 0,

package/src/components/CmdSocialNetworks.vue

@@ -1,22 +1,16 @@
 <template>
     <!-- begin CmdSocialNetworks ---------------------------------------------------------------------------------------- -->
     <div :class="['cmd-social-networks', {'stretch': stretchButtons}, alignment]">
-        <!-- begin CmdHeadline -->
         <CmdHeadline
-            v-if="cmdHeadline?.headlineText || editModeContext?.editing"
-            v-bind="cmdHeadline || {}"
+            v-if="(cmdHeadlineProperties?.show && cmdHeadlineProperties?.headlineText) || editModeContext"
+            v-bind="cmdHeadlineProperties"
         />
-        <!-- end CmdHeadline -->
 
-        <!-- begin CmdFormElement -->
         <CmdFormElement
             v-if="userMustAcceptDataPrivacy"
-            element="input"
-            type="checkbox"
-            v-bind="cmdFormElement"
+            v-bind="cmdFormElementDataPrivacyProperties"
             v-model="dataPrivacyAccepted"
         />
-        <!-- end CmdFormElement -->
 
         <!-- begin list of networks -->
         <ul v-if="validNetworks.length > 0" :class="['button-wrapper', {'no-gap': !useGap}]">
@@ -78,6 +72,11 @@ import {buildComponentPath} from "../utils/editmode.js"
 export default {
     name: "CmdSocialNetworks",
     mixins: [EditMode],
+    inject: {
+        editModeContext: {
+            default: null
+        }
+    },
     data() {
         return {
             dataPrivacyAccepted: false
@@ -176,15 +175,9 @@ export default {
          *
          * userMustAcceptDataPrivacy-property must be activated
          */
-        cmdFormElement: {
+         cmdFormElementDataPrivacy: {
             type: Object,
-            default() {
-                return {
-                    toggleSwitch: true,
-                    labelText: "I accept that anonymous data will be send to the platform I share this page on!",
-                    required: true
-                }
-            }
+            required: false
         },
         /**
          * properties for CmdHeadline-component
@@ -195,6 +188,23 @@ export default {
         }
     },
     computed: {
+        cmdFormElementDataPrivacyProperties() {
+            return {
+                element: "input",
+                type: "checkbox",
+                toggleSwitch: true,
+                labelText: "I accept that anonymous data will be send to the platform I share this page on!",
+                required: true,
+                ...this.cmdFormElementDataPrivacy
+            }
+        },
+        cmdHeadlineProperties() {
+            return {
+                show: true,
+                headlineLevel: 2,
+                ...this.cmdHeadline
+            }
+        },
         validNetworks() {
             return this.networks.filter(item => item.path)
         },

package/src/components/CmdSwitchLanguage.vue

@@ -3,26 +3,16 @@
     <div class="cmd-switch-language">
         <ul>
             <li v-for="(language, index) in languages" :key="index">
-                <!-- begin link-type 'href' -->
-                <a v-if="language.link.type === 'href'"
-                   :href="language.link.path"
-                   :class="['flag', language.iso2, {'active': activeLanguage(language.iso2)}]"
-                   :title="language.tooltip"
-                   @click.prevent="changeLanguage(language.iso2, $event)">
-                   <img :src="pathFlag(language.iso2)" :alt="language.name" />
-                </a>
-
-                <!-- end link-type 'href' -->
-
-                <!-- begin link-type 'router' -->
-                <router-link v-else
-                     :to="getRoute(language)"
-                     :class="['flag', language.iso2]"
-                     :title="language.tooltip"
-                     @click.prevent="changeLanguage(language.iso2, $event)">
+                <CmdLink 
+                    v-bind="cmdLink"
+                    :linkType="language?.link?.type"
+                    :path="language?.link?.type === 'router' ? getRoute(language) : language?.link?.path"
+                    :class="['flag', language.iso2, {'active': activeLanguage(language.iso2)}]"
+                    :title="language.tooltip"
+                    @click="changeLanguage(language.iso2, $event)"
+                >
                     <img :src="pathFlag(language.iso2)" :alt="language.name" />
-                </router-link>
-                <!-- end link-type 'router' -->
+                </CmdLink>
             </li>
         </ul>
     </div>
@@ -55,6 +45,13 @@ export default {
         pathFlags: {
             type: String,
             default: "/media/images/flags"
+        },
+        /**
+         * properties for CmdLink-component
+         */
+        cmdLink: {
+            type: Object,
+            required: false
         }
     },
     mounted() {