comand-component-library 3.3.48 → 3.3.49

package/src/components/CmdAddressData.vue

@@ -32,7 +32,7 @@
                            v-telephone="entry.href">
                             {{ entry.href }}
                         </a>
-                        <span v-else v-html="entry.data"></span>
+                        <template v-else>{{ entry.data }}</template>
                     </dd>
                     <!-- end data (except for address) -->
 
@@ -40,7 +40,7 @@
                     <dd v-else>
                         <!-- begin linked address -->
                         <a v-if="linkGoogleMaps"
-                           :href="locateAddress(entry)"
+                           :href="locateAddress"
                            target="google-maps"
                            :title="getMessage('cmdaddressdata.title.open_address_on_google_maps')">
                             <!-- begin street/number -->
@@ -103,10 +103,11 @@
 
             <!-- begin list without labels -->
             <ul v-else :class="['flex-container', {'vertical': !showIconsOnly}]">
+
                 <template v-for="(entry, index) in addressData" :key="index">
-                    <template v-if="entry.href || entry.name === 'address' || !showIconsOnly">
-                        <li :class="{'no-flex' : showIconsOnly}">
-                            <!-- begin all entries except address (which has no href) -->
+                    <!-- begin all entries except address -->
+                    <template v-if="entry.name !== 'address'">
+                        <li v-if="entry.href || !showIconsOnly" :class="{'no-flex' : showIconsOnly}">
                             <a v-if="entry.href" :href="getHref(entry)"
                                :target="{'_blank' : entry.name === 'website'}"
                                :title="entry.tooltip">
@@ -121,80 +122,68 @@
                                 </template>
                                 <template v-else>{{ entry.href }}</template>
                             </a>
-                            <span v-else-if="!showIconsOnly" v-html="entry.data"></span>
-                            <!-- end all entries except address -->
-
-                            <!-- begin address -->
-                            <template v-if="entry.name === 'address'">
-                                <!-- begin linked address -->
-                                <a v-if="linkGoogleMaps" :href="locateAddress(entry)" target="google-maps" :title="entry.tooltip">
-                                    <template v-if="showIconsOnly">
-                                        <!-- begin CmdIcon -->
-                                        <CmdIcon
-                                            v-if="entry.iconClass"
-                                            :iconClass="entry.iconClass"
-                                            :type="entry.iconType"
-                                        />
-                                        <!-- end CmdIcon -->
-                                    </template>
-                                    <template v-else>
-                                        <!-- begin street/number -->
-                                        <template v-if="entry.streetNo">
-                                            <span class="street-address">{{ entry.streetNo }}</span><br/>
-                                        </template>
-                                        <!-- end street/number -->
+                            <template v-else-if="!showIconsOnly">{{ entry.data }}</template>
+                        </li>
+                    </template>
+                    <!-- end all entries except address -->
 
-                                        <!-- begin zip/city -->
-                                        <template v-if="entry.zip || entry.city">
-                                            <span class="postal-code">{{ entry.zip }}&nbsp;</span>
-                                            <span class="locality">{{ entry.city }}</span><br/>
-                                        </template>
-                                        <!-- end zip/city -->
+                    <!-- begin address -->
+                    <li v-else-if="entry.name === 'address' && !showIconsOnly">
+                        <!-- begin linked address -->
+                        <a v-if="linkGoogleMaps" :href="locateAddress" target="google-maps" :title="getMessage('cmdaddressdata.title.open_address_on_google_maps')">
+                            <!-- begin street/number -->
+                            <template v-if="entry.streetNo">
+                                <span class="street-address">{{ entry.streetNo }}</span><br/>
+                            </template>
+                            <!-- end street/number -->
 
-                                        <!-- begin miscInfo -->
-                                        <template v-if="entry.miscInfo">
-                                            <span>{{ entry.miscInfo }}</span><br/>
-                                        </template>
-                                        <!-- end miscInfo -->
+                            <!-- begin zip/city -->
+                            <template v-if="entry.zip || entry.city">
+                                <span class="postal-code">{{ entry.zip }}&nbsp;</span>
+                                <span class="locality">{{ entry.city }}</span><br/>
+                            </template>
+                            <!-- end zip/city -->
 
-                                        <!-- begin country -->
-                                        <span v-if="entry.country" class="country-name">{{ entry.country }}</span>
-                                        <!-- end country -->
-                                    </template>
-                                </a>
-                                <!-- end linked address -->
+                            <!-- begin miscInfo -->
+                            <template v-if="entry.miscInfo">
+                                <span>{{ entry.miscInfo }}</span><br/>
+                            </template>
+                            <!-- end miscInfo -->
 
-                                <!-- begin unlinked address -->
-                                <template v-if="!linkGoogleMaps && !showIconsOnly">
-                                    <!-- begin street/number -->
-                                    <template v-if="entry.streetNo">
-                                        <span class="street-address">{{ entry.streetNo }}</span><br/>
-                                    </template>
-                                    <!-- end street/number -->
+                            <!-- begin country -->
+                            <span v-if="entry.country" class="country-name">{{ entry.country }}</span>
+                            <!-- end country -->
+                        </a>
+                        <!-- end linked address -->
 
-                                    <!-- begin zip/city -->
-                                    <template v-if="entry.zip || entry.city">
-                                        <span class="postal-code">{{ entry.zip }}&nbsp;</span>
-                                        <span class="locality">{{ entry.city }}</span><br/>
-                                    </template>
-                                    <!-- end zip/city -->
+                        <!-- begin unlinked address -->
+                        <template v-else>
+                            <!-- begin street/number -->
+                            <template v-if="entry.streetNo">
+                                <span class="street-address">{{ entry.streetNo }}</span><br/>
+                            </template>
+                            <!-- end street/number -->
 
-                                    <!-- begin miscInfo -->
-                                    <template v-if="entry.miscInfo">
-                                        <span>{{ entry.miscInfo }}</span><br/>
-                                    </template>
-                                    <!-- end miscInfo -->
+                            <!-- begin zip/city -->
+                            <template v-if="entry.zip || entry.city">
+                                <span class="postal-code">{{ entry.zip }}&nbsp;</span>
+                                <span class="locality">{{ entry.city }}</span><br/>
+                            </template>
+                            <!-- end zip/city -->
 
-                                    <!-- begin country -->
-                                    <span v-if="entry.country" class="country-name">{{ entry.country }}</span>
-                                    <!-- end country -->
-                                </template>
-                                <!-- end unlinked address -->
+                            <!-- begin miscInfo -->
+                            <template v-if="entry.miscInfo">
+                                <span>{{ entry.miscInfo }}</span><br/>
                             </template>
-                            <!-- end address -->
-                        </li>
-                    </template>
-                    <!-- end all entries except address -->
+                            <!-- end miscInfo -->
+
+                            <!-- begin country -->
+                            <span v-if="entry.country" class="country-name">{{ entry.country }}</span>
+                            <!-- end country -->
+                        </template>
+                        <!-- end unlinked address -->
+                    </li>
+                    <!-- end address -->
                 </template>
                 <!-- end v-for -->
             </ul>
@@ -264,14 +253,14 @@ export default {
         }
     },
     computed: {
+        locateAddress() {
+            return "https://www.google.com/maps/place/" + this.addressData.address.streetNo + ", " + this.addressData.address.zip + " " + this.addressData.address.city
+        },
         websiteUrlText() {
             return this.addressData.website?.text.replace("https://", "")
         }
     },
     methods: {
-        locateAddress(entry) {
-            return "https://www.google.com/maps/place/" + entry.streetNo + ", " + entry.zip + " " + entry.city
-        },
         vCardClass(entry) {
             if (entry.name === 'company') {
                 return "org"

package/src/components/CmdBackToTopButton.vue

@@ -17,18 +17,11 @@ export default {
     data() {
         return {
             windowInnerHeight: window.innerHeight,
-            windowScrollY: this.getScrollY(),
-            scrollHeight: document.querySelector(this.scrollContainer)?.scrollHeight || 0
+            windowScrollY: window.scrollY,
+            bodyScrollHeight: document.body.scrollHeight
         }
     },
     props: {
-        /**
-         * define which container's scroll-behavior should be observed (can be any selector)
-         */
-        scrollContainer: {
-            type: String,
-            default: "body"
-        },
         /**
          * icon-class (and shown tooltip on hover) for back to top button
          *
@@ -45,46 +38,28 @@ export default {
             }
         }
     },
-    mounted() {
-        window.addEventListener('resize', this.onViewportChange)
-        if (this.scrollContainer === "body") {
-            window.addEventListener('scroll', this.onViewportChange);
-        } else {
-            document.querySelector(this.scrollContainer)?.addEventListener('scroll', this.onViewportChange);
-        }
+    created() {
+        window.addEventListener('resize', this.onViewportChange);
+        window.addEventListener('scroll', this.onViewportChange);
     },
     unmounted() {
-        window.removeEventListener('resize', this.onViewportChange)
-        if (this.scrollContainer === "body") {
-            window.addEventListener('scroll', this.onViewportChange);
-        } else {
-            document.querySelector(this.scrollContainer)?.removeEventListener('scroll', this.onViewportChange)
-        }
+        window.removeEventListener('resize', this.onViewportChange);
+        window.removeEventListener('scroll', this.onViewportChange);
     },
     /* watch for changes */
     computed: {
         show() {
-            return this.windowScrollY > 0 && this.windowInnerHeight < this.scrollHeight
+            return this.windowScrollY > 0 && this.windowInnerHeight < this.bodyScrollHeight;
         }
     },
     methods: {
-        getScrollY() {
-            if (this.scrollContainer === "body") {
-                return window.scrollY
-            }
-            return document.querySelector(this.scrollContainer)?.scrollTop || 0
-        },
         onViewportChange() {
             this.windowInnerHeight = window.innerHeight;
-            this.windowScrollY = this.getScrollY()
-            this.scrollHeight = document.querySelector(this.scrollContainer)?.scrollHeight || 0
+            this.windowScrollY = window.scrollY;
+            this.bodyScrollHeight = document.body.scrollHeight;
         },
         onBackToTop() {
-            if (this.scrollContainer === "body") {
-                window.scrollTo({top: 0, left: 0, behavior: 'smooth'})
-            } else {
-                document.querySelector(this.scrollContainer)?.scrollTo({top: 0, left: 0, behavior: 'smooth'})
-            }
+            window.scrollTo({top: 0, left: 0, behavior: 'smooth'});
         }
     }
 }

package/src/components/CmdBankAccountData.vue

@@ -79,16 +79,10 @@ export default {
     },
     methods: {
         copyToClipboard(entry) {
-            //get data, remove spaces and copy to clipboard
-            navigator.permissions.query({name: "clipboard-write"})
-                .then(result => {
-                    if (result.state === "granted" || result.state === "prompt") {
-                        const output = entry.replace(/\s/g, "")
-                        navigator.clipboard.writeText(output)
-                        alert(output + " was copied to clipboard")
-                    }
-                })
-                .catch(error => console.error(error))
+            // get data, remove spaces and copy to clipboard
+            const output = entry.replace(/\s/g, "")
+            navigator.clipboard.writeText(output)
+            alert(output + " was copied to clipboard")
         }
     }
 }

package/src/components/CmdBox.vue

@@ -57,38 +57,27 @@
 
         <!-- begin box-body -->
         <div v-if="open" :class="['box-body', {'default-padding': useDefaultPadding}]" aria-expanded="true" role="article">
-            <transition-group :name="toggleTransition">
-                <div v-if="cutoffTextLines > 0" :class="[
-                       'cutoff-text',
-                       {
-                           'fade-last-line': fadeLastLine && !showCutOffText,
-                           'show-text' : showCutOffText
-                        }
-                   ]">
-                     <!-- begin slot 'body' -->
-                    <slot v-if="useSlots?.includes('body')" name="body">
-                        <p>{{ textBody }}</p>
-                    </slot>
-                    <!-- end slot 'body' -->
-                </div>
-                <!-- begin no cut-off-text-lines -->
-                <template v-else>
-                    <!-- begin slot 'body' -->
-                    <slot v-if="useSlots?.includes('body')" name="body">
-                        <p>{{ textBody }}</p>
-                    </slot>
-                    <!-- end slot 'body' -->
-                </template>
-                <!-- end no cut-off-text-lines -->
-            </transition-group>
-            <a v-if="cutoffTextLines > 0" href="#" @click.prevent="toggleCutOffText">
-                {{ showCutOffText ? getMessage("cmdbox.contentbox.collapse_text") : getMessage("cmdbox.contentbox.expand_text") }}
-            </a>
+            <!-- begin slot 'body' -->
+            <slot v-if="useSlots?.includes('body')" name="body">
+                <transition-group :name="toggleTransition">
+                    <p :class="{
+                       'cutoff-text': cutoffTextLines > 0,
+                       'fade-last-line': fadeLastLine && !showCutOffText,
+                       'show-text' : showCutOffText
+                   }">
+                        {{ textBody }}
+                    </p>
+                    <a v-if="cutoffTextLines > 0" href="#" @click.prevent="toggleCutOffText">
+                        {{ showCutOffText ? getMessage("cmdbox.contentbox.collapse_text") : getMessage("cmdbox.contentbox.expand_text") }}
+                    </a>
+                </transition-group>
+            </slot>
+            <!-- end slot 'body' -->
 
             <template v-else>
                 <img v-if="image" :src="image.src" :alt="image.altText"/>
 
-                <div v-if="textBody" class="text-wrapper">
+                <div class="text-wrapper">
                     <!-- begin CmdHeadline -->
                     <CmdHeadline
                         v-if="cmdHeadline?.headlineText && repeatHeadlineInBoxBody"
@@ -265,7 +254,7 @@ export default {
          */
         fadeLastLine: {
             type: Boolean,
-            default: false
+            default: true
         },
         /**
          * use transition to expand and collapse box-body
@@ -513,7 +502,7 @@ export default {
                 padding: var(--default-padding);
             }
 
-            .cutoff-text {
+            p.cutoff-text {
                 padding: var(--default-padding);
                 margin: 0;
                 overflow: hidden;

package/src/components/CmdCompanyLogo.vue

@@ -124,24 +124,17 @@ export default {
 .cmd-company-logo {
     > a {
         display: block;
-    }
-
-    img {
-        border: 0;
-        max-height: 15rem;
-    }
 
-    @media only screen and (max-width: $medium-max-width) {
         img {
-            max-width: 100%;
-            max-height: none;
+            border: 0;
+            max-height: 15rem;
         }
-    }
 
-    @media only screen and (max-width: $small-max-width) {
-        img {
-            margin: 0 auto;
-            display: block;
+        @media only screen and (max-width: $medium-max-width) {
+            img {
+                max-width: 100%;
+                max-height: none;
+            }
         }
     }
 }

package/src/components/CmdFancyBox.vue

@@ -484,8 +484,6 @@ export default FancyBox
     padding: var(--default-padding);
     min-width: 30vw;
     min-height: 30vh;
-    max-width: calc(var(--max-width) - calc(var(--default-padding) * 2));
-    max-height: 80vh;
     background: var(--pure-white);
     border-radius: var(--border-radius);
     overflow: hidden;
@@ -550,7 +548,7 @@ export default FancyBox
             > .button {
                 display: block;
                 border: var(--default-border);
-                padding: .5rem;
+                padding: .2rem;
                 min-width: 0;
                 min-height: 0;
 

package/src/components/CmdFormElement.vue

@@ -44,7 +44,7 @@
             />
             <!-- end CmdTooltipForInputElements -->
 
-            <a v-if="showStatusIcon && ($attrs.required || inputRequirements.length)"
+            <a v-if="$attrs.required || inputRequirements.length"
                 href="#"
                 @click.prevent
                 :title="validationTooltip"
@@ -407,13 +407,6 @@ export default {
                 }
             }
         },
-        /**
-         * toggle statusIcon (showing the requirements on hover)
-         */
-        showStatusIcon: {
-            type: Boolean,
-            default: true
-        },
         /**
          * set text for tooltip
          */

package/src/components/CmdImageZoom.vue

@@ -2,7 +2,7 @@
     <div class="cmd-imagezoom flex-container">
 
         <!-- begin small image -->
-        <a href="#" class="no-flex" :title="imageSmall.tooltip">
+        <a href="#" class="no-flex thumbnails-imagezoom" :title="imageSmall.tooltip">
             <img :src="imageSmall.src"
                  :alt="imageSmall.alt"
                 @mouseover="onMouseOver"
@@ -66,9 +66,9 @@ export default {
 }
 
 function positionOverlay(vm, e) {
-    const largeImageContainer = vm.$el.querySelector(".zoom-container")
-    const largeImage = largeImageContainer.querySelector("img")
-    const zoomOverlay = vm.$el.querySelector(".zoom-overlay")
+    const largeImageContainer = vm.$el.querySelector('.zoom-container')
+    const largeImage = largeImageContainer.querySelector('img')
+    const zoomOverlay = vm.$el.querySelector('.zoom-overlay')
 
     const smallImageWidth = e.target.getBoundingClientRect().width
     const smallImageHeight = e.target.getBoundingClientRect().height
@@ -114,10 +114,6 @@ function clamp(value, min, max) {
 .cmd-imagezoom {
     overflow: hidden;
 
-    > a {
-        align-self: flex-start; /* required to avoid a-tag to stretch on small devices */
-    }
-
     .zoom-container {
         display: block !important;
         overflow: hidden;

package/src/components/CmdListOfLinks.vue

@@ -8,7 +8,7 @@
         <!-- end CmdHeadline -->
 
         <!-- begin list of links -->
-        <ul :class="['flex-container', {'no-gap': !useGap},'align-' + align, setStretchClass]">
+        <ul :class="['flex-container', {'no-gap': !useGap},'align-' + align]">
             <li v-for="(link, index) in links" :key="index" :class="{'active': sectionAnchors && activeSection === index}">
                 <!-- begin use href -->
                 <a v-if="link.type === 'href' || link.type === undefined"
@@ -46,7 +46,6 @@ import {openFancyBox} from "./CmdFancyBox.vue"
 
 export default {
     name: "CmdListOfLinks",
-    emits: ["click"],
     props: {
         /**
          * activate if component should contain a list of anchors for the section within the page
@@ -124,14 +123,6 @@ export default {
             default: false
         }
     },
-    computed: {
-        setStretchClass() {
-            if(this.largeIcons && this.orientation === "horizontal") {
-                return "stretch"
-            }
-            return null
-        }
-    },
     methods: {
         getRoute(link) {
             return getRoute(link)
@@ -139,10 +130,8 @@ export default {
         executeLink(link, event) {
             if (link.fancybox) {
                 event.preventDefault()
-                openFancyBox({url: link.path, showSubmitButtons: link.showSubmitButtons})
-                return
+                openFancyBox({url: link.path})
             }
-            this.$emit("click", {link, originalEvent: event})
         }
     }
 }
@@ -182,10 +171,6 @@ export default {
             &.align-right {
                 justify-content: flex-end;
             }
-
-            &.stretch {
-                justify-content: space-around;
-            }
         }
 
     }

package/src/components/CmdPager.vue

@@ -169,6 +169,10 @@ export default {
     button, .button {
         float: none;
         margin: 0;
+
+        span {
+            align-self: center;
+        }
     }
 
     a {

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,9 @@
                 <!-- begin CmdMainNavigation -->
                 <CmdMainNavigation
                     v-if="cmdMainNavigation?.navigationEntries?.length && navigationInline"
+                    :navigationEntries="cmdMainNavigation.navigationEntries"
+                    :offcanvasPosition="cmdMainNavigation.offcanvasPosition"
                     :closeOffcanvas="closeOffcanvas"
-                    v-bind="cmdMainNavigation"
                 />
                 <!-- end CmdMainNavigation -->
             </template>
@@ -43,6 +44,7 @@
         <CmdMainNavigation
             v-if="cmdMainNavigation?.navigationEntries?.length && !navigationInline"
             :navigationEntries="cmdMainNavigation.navigationEntries"
+            :offcanvasPosition="cmdMainNavigation.offcanvasPosition"
             :closeOffcanvas="closeOffcanvas"
         />
         <!-- end CmdMainNavigation -->
@@ -185,7 +187,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 +222,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 +249,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;
-                }
-            }
-        }
     }
 }