comand-component-library 3.3.86 → 4.0.0

package/src/components/CmdOpeningHours.vue

@@ -434,7 +434,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-opening-hours ------------------------------------------------------------------------------------------ */
 .cmd-opening-hours {
     > a, > span {

package/src/components/CmdOpeningHoursItem.vue

@@ -246,7 +246,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 .edit-mode-opening-hours-item {
     .am-wrapper, .pm-wrapper {
         align-items: center;

package/src/components/CmdPagination.vue

@@ -23,7 +23,7 @@
                    v-for="(page, index) in pages"
                    :key="index"
                    @click.stop.prevent="showPage(page)" aria-live="polite">
-                   <span :class="{hidden: !showPageNumbers}">{{ index + 1 }}</span>
+                    <span :class="{hidden: !showPageNumbers}">{{ 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,10 @@ export default {
         padding: 0;
     }
 
+    .cmd-box-wrapper > .grid-container-create-columns {
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
     .inner-sidebar-wrapper {
         flex: 1;
         display: flex;
@@ -164,4 +169,5 @@ export default {
         }
     }
 }
+/* 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>
@@ -106,7 +108,7 @@ export default {
         }
     },
     methods: {
-        emitOffcanvasStatus(event){
+        emitOffcanvasStatus(event) {
             this.$emit("offcanvas", event)
         }
     }
@@ -115,8 +117,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 +152,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 +183,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 +205,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 +221,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/CmdSlideButton.vue

@@ -66,8 +66,6 @@ export default {
 
 <style lang="scss">
 /* begin cmd-slide-button ---------------------------------------------------------------------------------------- */
-@import '../assets/styles/variables';
-
 .cmd-slide-button {
     &.button {
         font-size: 2rem;
@@ -84,10 +82,6 @@ export default {
             align-self: center;
         }
 
-        &:hover, &:active, &:focus {
-            transition: var(--default-transition);
-        }
-
         &.prev {
             left: 0;
             top: 0;
@@ -111,7 +105,15 @@ export default {
         }
     }
 
-    @media only screen and (max-width: $small-max-width) {
+
+}
+</style>
+
+<style lang="scss">
+@import '../assets/styles/variables';
+
+@media only screen and (max-width: $small-max-width) {
+    .cmd-slide-button {
         &.button {
             width: auto; /* overwrite button-behavior for small-devices from frontend-framework */
         }

package/src/components/CmdSlideshow.vue

@@ -313,10 +313,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-slideshow ---------------------------------------------------------------------------------------- */
-@import '../assets/styles/variables';
-
 .cmd-slideshow {
     figure a, img {
         display: block;
@@ -375,12 +373,11 @@ export default {
 
         .image-wrapper {
             width: 100%;
-            min-width: 11.1rem; // assure to be as wide as action-buttons in edit-mode
+            min-width: 11.1rem; /* assure to be as wide as action-buttons in edit-mode */
             min-height: 50rem;
         }
 
         > ol {
-            display: -webkit-flex; /* Safari 6-8 */
             display: flex;
             margin: 0 auto;
             position: absolute;
@@ -404,7 +401,7 @@ export default {
                 }
 
                 &:hover, &:active, &:focus, &.active {
-                    border-color: var(--pure-white);
+                    border-color: var(--hyperlink-color);
 
                     a {
                         background: var(--pure-white);
@@ -448,12 +445,6 @@ export default {
             background: var(--pure-white-reduced-opacity);
         }
     }
-
-    @media only screen and (max-width: $medium-max-width) {
-        figcaption {
-            font-size: 2rem;
-        }
-    }
 }
 
 .edit-mode .cmd-slideshow .image-wrapper.edit-items {
@@ -464,6 +455,17 @@ export default {
         font-size: 3rem;
     }
 }
+</style>
 
+<style lang="scss">
+@import '../assets/styles/variables';
+
+@media only screen and (max-width: $medium-max-width) {
+    .cmd-slideshow {
+        figcaption {
+            font-size: 2rem;
+        }
+    }
+}
 /* end cmd-slideshow ------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdSocialNetworks.vue

@@ -21,12 +21,17 @@
 
         <!-- begin list of networks -->
         <ul v-if="validNetworks.length > 0" :class="['button-wrapper', {'no-gap': !useGap}]">
+            <!-- begin cmd-social-networks (default view) -->
             <CmdSocialNetworksItem
                 v-if="!editModeContext"
                 v-for="(entry, index) in validNetworks"
                 :key="index"
                 :network="entry"
-                    />
+                :userMustAcceptDataPrivacy="userMustAcceptDataPrivacy"
+                :buttonTextAlign="buttonTextAlign"
+                :dataPrivacyAccepted="dataPrivacyAccepted"
+            />
+            <!-- end cmd-social-networks (default view) -->
 
             <!-- begin edit-mode -->
             <EditComponentWrapper
@@ -254,8 +259,6 @@ export default {
 
 <style lang="scss">
 /* begin cmd-social-networks -------------------------------------------------------------------------------------------- */
-@import "../assets/styles/variables";
-
 .cmd-social-networks {
     display: flex;
     flex-direction: column;
@@ -285,7 +288,7 @@ export default {
                 margin: 0;
             }
 
-          &.text-align-right {
+            &.text-align-right {
                 flex-direction: row-reverse;
             }
         }
@@ -401,6 +404,10 @@ export default {
         --social-network-color: #0077b5;
     }
 }
+</style>
+
+<style lang="scss">
+@import "../assets/styles/variables";
 
 @container (max-width: #{$small-max-width}) {
     .button-wrapper {

package/src/components/CmdSocialNetworksItem.vue

@@ -10,11 +10,7 @@
             :title="tooltip(network.tooltip)">
 
             <!-- begin CmdIcon -->
-            <CmdIcon
-                v-if="network.iconClass"
-                :iconClass="network.iconClass"
-                :type="network.iconType"
-            />
+            <CmdIcon v-if="network.iconClass" :iconClass="network.iconClass" :type="network.iconType" />
             <!-- end CmdIcon -->
 
             <span v-if="network.linkText">{{ network.linkText }}</span>
@@ -46,8 +42,7 @@ export default {
          * toggle if user has to accept that anonymous data will be send while sharing
          */
         userMustAcceptDataPrivacy: {
-            type: Boolean,
-            default: true
+            type: Boolean
         },
         /**
          * alignment for buttons

package/src/components/CmdSwitchLanguage.vue

@@ -80,7 +80,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-switch-language ---------------------------------------------------------------------------------------- */
 .cmd-switch-language {
     ul {

package/src/components/CmdSystemMessage.vue

@@ -130,7 +130,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-system-message ---------------------------------------------------------------------------------------- */
 .cmd-system-message {
     margin: var(--default-margin) 0;
@@ -158,31 +158,35 @@ export default {
         text-decoration: none;
         z-index: 100;
         line-height: 1;
+        background: var(--pure-white);
+        border-radius: var(--full-circle);
 
         [class*="icon-"] {
-            color: var(--pure-white);
+            color: var(--default-text-color);
         }
 
         &:hover, &:active, &:focus {
+            background: none;
+
             [class*="icon-"] {
-                color: var(--hyperlink-color);
+                color: var(--pure-white);
             }
         }
     }
 
     &.warning {
         > a:not(.button) {
-            border-color: var(--text-color);
+            border-color: var(--default-text-color);
 
             [class*="icon-"] {
-                color: var(--text-color);
+                color: var(--default-text-color);
             }
 
             &:hover, &:active, &:focus {
                 border-color: var(--hyperlink-color);
 
                 [class*="icon-"] {
-                    color: var(--hyperlink-color);
+                    color: var(--pure-white);
                 }
             }
         }

package/src/components/CmdTable.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        :class="['cmd-table-wrapper', {'collapsed': !showTableData, 'full-width': fullWidth, 'has-caption': hasCaption}]">
+        :class="['cmd-table-wrapper', {'collapsed': !showTableData, 'full-width': fullWidth, 'has-caption': hasCaption, 'has-overflow': hasOverflow}]">
         <div v-if="collapsible || userCanToggleWidth" class="button-wrapper">
             <a v-if="userCanToggleWidth" class="button"
                href="#" @click.prevent="fullWidth = !fullWidth"
@@ -20,7 +20,7 @@
                 <!-- end CmdIcon -->
             </a>
         </div>
-        <div class="inner-wrapper">
+        <div class="inner-wrapper" ref="innerWrapper" @scroll="updatePosition">
             <!-- begin CmdSlideButton -->
             <CmdSlideButton
                 v-if="showSlideButtons"
@@ -30,7 +30,7 @@
             <!-- end CmdSlideButton -->
 
             <!-- begin table -->
-            <table ref="table" :class="{'full-width': fullWidth, 'has-overflow': hasOverflow}">
+            <table ref="table" :class="{'full-width': fullWidth}">
                 <caption v-if="tableData.caption?.text || caption?.text" :class="{ hidden: hideCaption }">
                     {{ caption?.text || tableData.caption?.text }}
                 </caption>
@@ -76,13 +76,15 @@
 </template>
 
 <script>
-import { ref } from 'vue'
+import {ref} from 'vue'
+
 export default {
     name: "CmdTable",
     data() {
         return {
             showTableData: true,
-            fullWidth: this.fullWidthOnDefault
+            fullWidth: this.fullWidthOnDefault,
+            hasOverflow: false
         }
     },
     props: {
@@ -187,6 +189,9 @@ export default {
             }
         }
     },
+    mounted() {
+        this.hasOverflow = this.$refs.table.clientWidth > this.$refs.innerWrapper.clientWidth
+    },
     computed: {
         hasCaption() {
             if (this.hideCaption) {
@@ -198,24 +203,66 @@ export default {
         },
         hideCaption() {
             return this.caption?.show === false || (this.caption?.show !== true && !this.tableData.caption?.show)
-        },
-        hasOverflow() {
-            console.log("this.$refs.table", this.$refs.table)
-            // return this.$refs.table.scrollWidth > this.$refs.table.clientWidth
         }
     },
     methods: {
         scrollLeft() {
-            this.$refs.table.scrollLeft = 0
+            this.$refs.innerWrapper.scrollLeft = 0
+            this.$refs.table.previousElementSibling.style.cssText = "left: 0;"
+            this.updatePosition()
         },
         scrollRight() {
-            this.$refs.table.scrollRight = 0
+            this.$refs.table.querySelector("th:last-child").scrollIntoView()
+            this.$refs.table.nextElementSibling.style.cssText = "right: auto;"
+            this.updatePosition()
+        },
+        updatePosition() {
+            const leftSlidebutton = this.$refs.table.previousElementSibling
+            const rightSlidebutton = this.$refs.table.nextElementSibling
+            const innerWrapper = this.$refs.innerWrapper
+
+            const parentRect = innerWrapper.getBoundingClientRect();
+            const newRight = parentRect.width + innerWrapper.scrollLeft - rightSlidebutton.getBoundingClientRect().width
+            const newLeft = innerWrapper.scrollLeft
+
+            console.log("parentRect", parentRect)
+
+            leftSlidebutton.style.left = `${newLeft}px`
+            rightSlidebutton.style.left = `${newRight}px`;
+
+            if(newLeft === 0) {
+                leftSlidebutton.style.display = "none"
+            } else {
+                leftSlidebutton.style.display = "flex"
+            }
+
+            if(newLeft === innerWrapper.scrollLeftMax) {
+               rightSlidebutton.style.display = "none"
+            } else {
+               rightSlidebutton.style.display = "flex"
+            }
+
+            //     const parentRect = this.$refs.innerWrapper.getBoundingClientRect();
+            //     const rightSlidebutton = this.$refs.table.nextElementSibling.getBoundingClientRect();
+            //     const leftSlidebutton = this.$refs.table.previousElementSibling.getBoundingClientRect();
+            //
+            //     // Calculate the new right position
+            //     const newRight = rightSlidebutton.width + parentRect.right;
+            //     const newLeft = parentRect.width - parentRect.left;
+            // console.log("parentRect.width", parentRect.width)
+            //     console.log("parentRect.right", parentRect.right)
+            // console.log("parentRect.left", parentRect.left)
+            //
+            //     // Apply the new right position
+            // this.$refs.table.nextElementSibling.style.left = `${newRight}px`;
+            // this.$refs.table.previousElementSibling.style.right = `${newLeft}px`;
         }
+
     }
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-table-wrapper ---------------------------------------------------------------------------------------- */
 .cmd-table-wrapper {
     display: inline-flex;
@@ -250,19 +297,22 @@ export default {
         }
     }
 
+    .cmd-slide-button {
+        display: none;
+    }
+
     .inner-wrapper {
         display: flex;
         overflow-x: auto;
         width: 100%;
-        padding: 0 4rem;
 
         .cmd-slide-button {
             left: 0;
-        }
 
-        .cmd-slide-button:last-child {
-            right: 0;
-            left: auto;
+            &:last-child {
+                right: 0;
+                left: auto;
+            }
         }
 
         table {
@@ -292,6 +342,11 @@ export default {
         }
     }
 
+    &.has-overflow {
+        .cmd-slide-button {
+            display: flex;
+        }
+    }
 }
 
 /* end cmd-table-wrapper ------------------------------------------------------------------------------------------ */