comand-component-library 3.3.22 → 3.3.23

package/src/components/CmdFakeSelect.vue

@@ -141,7 +141,8 @@
                     <li v-if="showSelectAllOptions && type === 'checkboxOptions'" class="select-all-options">
                         <a href="#" @click.prevent="toggleAllOptions">
                             <!-- begin CmdIcon -->
-                            <CmdIcon :iconClass="selectAllOptionsIcon.iconClass" :type="selectAllOptionsIcon.iconType" />
+                            <CmdIcon v-if="!allOptionsSelected" :iconClass="iconSelectAllOptions.iconClass" :type="iconSelectAllOptions.iconType" />
+                            <CmdIcon v-else :iconClass="iconDeselectAllOptions.iconClass" :type="iconDeselectAllOptions.iconType" />
                             <!-- end CmdIcon -->
                             <span>{{ selectAllOptionsText }}</span>
                         </a>
@@ -182,7 +183,8 @@ export default {
         return {
             showOptions: false,
             validationStatus: "",
-            limitWidthStyle: {}
+            limitWidthStyle: {},
+            allOptionsSelected: false
         }
     },
     props: {
@@ -296,6 +298,18 @@ export default {
                     iconType: "auto"
                 }
             }
+        },
+        /**
+         * set icon for "deselect all"-option
+         */
+        iconDeselectAllOptions: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-cancel",
+                    iconType: "auto"
+                }
+            }
         }
     },
     computed: {
@@ -329,7 +343,7 @@ export default {
                 if (this.modelValue.length === 1) {
                     return this.selectData.find(option => String(option.value) === String(this.modelValue[0]))?.text
                 } else if (this.modelValue.length > 1) {
-                    return this.modelValue.length + " options selected"
+                    return this.getMessage("cmdfakeselect.option.options_selected", this.modelValue.length)
                 }
             } else if (this.selectData?.length) {
                 // return text of first option nothing is selected (and type !== checkboxOptions && type !== content)
@@ -342,7 +356,6 @@ export default {
         // get the displayed icon (only available for default selectbox)
         optionIcon() {
             if (this.type === "default") {
-
                 const selectedOption = this.selectData.find(option => {
                     return option.value === this.modelValue
                 })
@@ -368,9 +381,11 @@ export default {
         },
         selectAllOptionsText() {
             if (Array.isArray(this.modelValue) && this.modelValue.length === this.selectData.length) {
-                return "Deselect all options"
+                this.allOptionsSelected = true
+                return this.getMessage("cmdfakeselect.linktext.deselect_all_options")
             }
-            return "Select all options"
+            this.allOptionsSelected = false
+            return this.getMessage("cmdfakeselect.linktext.select_all_options")
         }
     },
     mounted() {
@@ -459,7 +474,7 @@ export default {
         },
         // overwrite requirement-message form fieldValidation.js
         getRequirementMessage() {
-            return "An option is selected"
+            return this.getMessage("cmdfakeselect.headline.an_option_is_selected")
         }
     },
     watch: {
@@ -657,7 +672,8 @@ export default {
         }
     }
 
-    &.has-state {
+    // use additional class in selector to gain high specificity
+    &.has-state.label {
         > ul {
             > li {
                 > a {

package/src/components/CmdFancyBox.vue

@@ -66,7 +66,7 @@
                 <!-- end button-wrapper -->
             </header>
             <div :class="['outer-content-wrapper', {'grayscale' : printInGrayscale}]">
-                <div v-if="fancyBoxImageUrl" class="content">
+                <div v-if="fancyBoxImageUrl || cmdImage?.image" class="content">
                     <!-- begin CmdImage -->
                     <CmdImage :image="largeSingleImage" :figcaption="cmdImage?.figcaption" />
                     <!-- end CmdImage -->
@@ -355,18 +355,21 @@ const FancyBox = defineComponent({
       largeSingleImage() {
           // change src-key for a single item/image to fit CmdImage-properties
           const fancyBoxItem = {...this.cmdImage?.image || {}}
-          fancyBoxItem.src = this.fancyBoxImageUrl
+          if(this.fancyBoxImageUrl) {
+              fancyBoxItem.src = this.fancyBoxImageUrl
+          }
           return fancyBoxItem
       }
     },
     methods: {
+        // open dialog/fancybox
         showDialog() {
             // avoid scrolling if fancybox is shown
-                document.querySelector("body").classList.add("avoid-scrolling")
-                this.$refs.dialog.showModal()
+            document.querySelector("body").classList.add("avoid-scrolling")
+            this.$refs.dialog.showModal()
 
-                // overwrite default behavior of dialog-element, which sets focus on first focusable element inside
-                this.$refs["close-dialog"].focus()
+            // overwrite default behavior of dialog-element, which sets focus on first focusable element inside
+            this.$refs["close-dialog"].focus()
         },
         updateContentOnPropertyChange() {
             this.fancyBoxImageUrl = this.fancyBoxContent = this.fancyBoxElements = null
@@ -392,6 +395,7 @@ const FancyBox = defineComponent({
                     .catch(error => console.error(`Error loading ${this.url}: ${error}`))
             }
         },
+        // switch to previous-item (in fancybox-gallery)
         showPrevItem() {
             if (this.index > 0) {
                 this.index--;
@@ -399,6 +403,7 @@ const FancyBox = defineComponent({
                 this.index = this.fancyBoxGallery.length - 1;
             }
         },
+        // show current item (in fancybox-gallery)
         showItem(imgId) {
             for (let i = 0; i < this.fancyBoxGallery.length; i++) {
                 if (this.fancyBoxGallery[i].id === imgId) {
@@ -407,6 +412,7 @@ const FancyBox = defineComponent({
                 }
             }
         },
+        // switch to next-item (in fancybox-gallery)
         showNextItem() {
             if (this.index < this.fancyBoxGallery.length - 1) {
                 this.index++;
@@ -414,6 +420,7 @@ const FancyBox = defineComponent({
                 this.index = 0;
             }
         },
+        // close fancybox (by button, escape-key)
         close() {
             if (this.$options.el) {
                 this.$destroy()
@@ -426,10 +433,12 @@ const FancyBox = defineComponent({
             // remove class to re-enable scrolling
             document.querySelector("body").classList.remove("avoid-scrolling")
         },
+        // click on cancel-button
         cancel() {
             this.$emit("cancel", true)
             this.close()
         },
+        // click on confirm-button
         confirm() {
             this.$emit("confirm", true)
             this.close()

package/src/components/CmdHeadline.vue

@@ -59,7 +59,7 @@ export default {
          */
         textAlign: {
             type: String,
-            default: "left"
+            default: null
         }
     },
     computed: {
@@ -73,7 +73,7 @@ export default {
             if(this.textAlign) {
                 return "text-" + this.textAlign
             }
-            return ''
+            return ""
         }
     }
 }

package/src/components/CmdIcon.vue

@@ -54,7 +54,6 @@ export default {
             if (this.type === "iconify") {
                 return true
             }
-
             if (this.type === "auto") {
                 return this.iconClass.includes(":")
             }

package/src/components/CmdImage.vue

@@ -8,7 +8,6 @@
 
 <script>
 export default {
-
     data() {
         return {
             mediumMaxWidth: 1023,
@@ -19,7 +18,7 @@ export default {
     name: "CmdImage",
     props: {
         /**
-         * image-object including source, alternative text, tooltip (not required)
+         * image-object including source(s), alternative text, tooltip (not required)
          */
         image: {
             type: Object,

package/src/components/CmdImageZoom.vue

@@ -1,32 +1,21 @@
 <template>
-    <div class="cmd-imagezoom grid-container-create-columns">
-        <div class="grid-small-item">
-            <!-- begin small image -->
-            <a href="#" class="thumbnails-imagezoom">
-                <!-- begin CmdImage -->
-                <CmdImage
-                    :image="imageSmall.image"
-                    :figcaption="imageSmall.figcaption"
-                    @mouseover="onMouseOver"
-                    @mousemove="onMouseMove"
-                    @mouseout="onMouseOut"
-                />
-                <!-- end CmdImage -->
-            </a>
-            <!-- end small image -->
-        </div>
+    <div class="cmd-imagezoom flex-container">
 
-        <!-- begin large image -->
-        <div v-if="showLargeImage" class="zoom-container grid-large-item">
-            <!-- begin CmdImage -->
-            <CmdImage
-                :image="imageLarge.image"
-                :figcaption="imageLarge.figcaption"
+        <!-- begin small image -->
+        <a href="#" class="no-flex thumbnails-imagezoom" :title="imageSmall.tooltip">
+            <img :src="imageSmall.src"
+                 :alt="imageSmall.alt"
                 @mouseover="onMouseOver"
                 @mousemove="onMouseMove"
                 @mouseout="onMouseOut"
             />
             <!-- end CmdImage -->
+        </a>
+        <!-- end small image -->
+
+        <!-- begin large image -->
+        <div v-if="showLargeImage" class="zoom-container">
+            <img :src="imageLarge.src" :alt="imageLarge.alt"/>
         </div>
         <div v-if="showLargeImage" class="zoom-overlay"></div>
         <!-- end large image -->
@@ -38,14 +27,14 @@ export default {
     name: "CmdImageZoom",
     props: {
         /**
-         * object for small image
+         * url for small images
          */
         imageSmall: {
             type: Object,
             required: true
         },
         /**
-         * object for large image
+         * url for large image
          */
         imageLarge: {
             type: Object,
@@ -128,8 +117,6 @@ function clamp(value, min, max) {
     .zoom-container {
         display: block !important;
         overflow: hidden;
-        max-width: 100rem;
-        max-height: 50rem !important;
 
         > img {
             max-width: none;

package/src/components/CmdMainNavigation.vue

@@ -362,10 +362,10 @@ export default {
         display: flex;
         background: none; /* overwrite framework-css */
         border: 0; /* overwrite framework-css */
-        padding: 0 var(--default-padding);
 
         /* begin offcanvas-navigation */
         &:not(.persist-on-mobile) {
+            padding: 0;
             transition: var(--nav-transition);
 
             #toggle-offcanvas {

package/src/components/CmdMultistepFormProgressBar.vue

@@ -235,7 +235,7 @@ export default {
     }
 }
 
-@media only screen and (max-width: $small-max-width) {
+@container (width < #{$small-max-width}) {
     .cmd-multistep-form-progress-bar {
         flex-direction: column;
 

package/src/components/CmdSiteHeader.vue

@@ -166,7 +166,7 @@ export default {
             }
         }
 
-        nav {
+        .cmd-main-navigation nav {
             padding: 0;
         }
 
@@ -224,6 +224,7 @@ export default {
 
 @media only screen and (max-width: $medium-max-width) {
     .cmd-site-header {
+        padding-top: calc(var(--default-padding) * 2);
         padding-bottom: calc(var(--default-padding) * 2);
 
         header {
@@ -235,8 +236,19 @@ export default {
 @media only screen and (max-width: $small-max-width) {
     .cmd-site-header {
         gap: calc(var(--default-gap) / 2);
+        padding-top: var(--default-padding);
         padding-bottom: var(--default-padding);
 
+        .top-header {
+            .cmd-list-of-links {
+                padding: 0;
+            }
+        }
+
+        header {
+            padding: 0 !important;
+        }
+
         .cmd-company-logo {
             margin: 0 auto;
 

package/src/components/CmdSlideButton.vue

@@ -1,7 +1,7 @@
 <template>
     <a href="#"
        @click.prevent
-       :class="['cmd-slide-button', 'button', slideButtonType]"
+       :class="['cmd-slide-button', 'button', 'keep-behavior-on-small-devices', slideButtonType]"
        :title="getDirection.tooltip">
         <!-- being CmdIcon -->
         <CmdIcon :iconClass="getDirection.iconClass || 'next'" />
@@ -66,6 +66,8 @@ export default {
 
 <style lang="scss">
 /* begin cmd-slide-button ---------------------------------------------------------------------------------------- */
+@import '../assets/styles/variables';
+
 .cmd-slide-button {
     &.button {
         font-size: 2rem;
@@ -114,6 +116,12 @@ export default {
             top: auto;
         }
     }
+
+    @media only screen and (max-width: $small-max-width) {
+        &.button {
+            width: auto; /* overwrite button-behavior for small-devices from frontend-framework */
+        }
+    }
 }
 
 /* end cmd-slide-button ------------------------------------------------------------------------------------------ */

package/src/components/CmdSlideshow.vue

@@ -9,7 +9,7 @@
             <!-- end CmdSlideButton -->
 
             <!-- begin area to slide -->
-            <transition name="fade">
+            <transition-group name="fade">
                 <template v-if="currentItem">
                     <template v-if="!useSlot">
                         <a v-if="currentItem?.link?.href" :href="currentItem?.link?.href" :title="currentItem?.link?.tooltip" :key="index">
@@ -33,7 +33,7 @@
                         <!-- end slot -->
                     </div>
                 </template>
-            </transition>
+            </transition-group>
             <!-- end area to slide -->
 
             <!-- begin CmdSlideButton -->
@@ -203,8 +203,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../assets/styles/variables';
 /* begin cmd-slideshow ---------------------------------------------------------------------------------------- */
+@import '../assets/styles/variables';
+
 .cmd-slideshow {
     figure a, img {
         display: block;
@@ -228,6 +229,19 @@ export default {
         display: flex;
         justify-content: center;
 
+        > a:not(.button) {
+            text-decoration: none;
+
+            figcaption {
+                border: var(--primary-border);
+
+                &:hover, &:active, &:focus {
+                    background: var(--pure-white);
+                    color: var(--hyperlink-color);
+                }
+            }
+        }
+
         figure {
             width: 100%; /* important to stretch figure with position: absolute over full width */
             margin: 0;

package/src/components/CmdSocialNetworks.vue

@@ -17,22 +17,24 @@
         <!-- end CmdFormElement -->
 
         <!-- begin list of networks -->
-        <ul :class="['flex-container no-flex', {'no-gap': useGap}]">
+        <ul :class="['button-wrapper no-flex', {'no-gap': !useGap}]">
             <li v-for="network in validNetworks">
                 <a
-                   :key="network.path" :class="['button', {disabled: userMustAcceptDataPrivacy && !dataPrivacyAccepted}]"
+                   :key="network.path"
+                   :class="['button', {disabled: userMustAcceptDataPrivacy && !dataPrivacyAccepted}, {'text-align-right': textAlign === 'right'}]"
                    :id="network.id"
                    :href="getUrl(network)"
                    @click="preventOnDisabled"
                    target="_blank"
                    :title="tooltip(network.tooltip)">
                         <!-- begin CmdIcon -->
-                        <CmdIcon v-if="network.iconClass && network.iconPosition !== 'right'" :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>
-                        <!-- begin CmdIcon -->
-                        <CmdIcon v-if="network.iconClass && network.iconPosition === 'right'" :iconClass="network.iconClass" :type="network.iconType" />
-                        <!-- end CmdIcon -->
                 </a>
             </li>
         </ul>
@@ -118,6 +120,10 @@ export default {
             type: String,
             default: "You must accept data privacy conditions!"
         },
+        textAlign: {
+            type: String,
+            default: "left"
+        },
         /**
          * properties for cmdFormElement
          *
@@ -179,10 +185,13 @@ export default {
             }
         },
         tooltip(tooltip) {
-            if(this.userMustAcceptDataPrivacy && this.dataPrivacyAccepted) {
-                return tooltip
+            if(this.userMustAcceptDataPrivacy) {
+                if(this.dataPrivacyAccepted) {
+                    return tooltip
+                }
+                return this.tooltipAcceptDataPrivacy
             }
-            return this.tooltipAcceptDataPrivacy
+            return tooltip
         }
     }
 }
@@ -196,11 +205,17 @@ export default {
     display: flex;
     flex-direction: column;
     gap: var(--default-gap);
+    container-type: inline-size;
 
     .cmd-headline {
         margin: 0;
     }
 
+    .button-wrapper {
+        flex-direction: row;
+        margin: 0;
+    }
+
     li {
         list-style-type: none;
         margin: 0;
@@ -220,10 +235,19 @@ export default {
 
     .button {
         padding: calc(var(--default-padding) / 2) var(--default-padding);
+        gap: calc(var(--default-gap) / 2);
+
+        span {
+            margin: 0;
+        }
 
         &:first-of-type {
             margin: 0;
         }
+
+        &.text-align-right {
+            flex-direction: row-reverse;
+        }
     }
 
     a:last-of-type {
@@ -289,10 +313,9 @@ export default {
     }
 }
 
-@media only screen and (max-width: $small-max-width) {
-    .cmd-social-networks {
-        justify-content: center;
-
+@container (max-width: #{$small-max-width}) {
+    .button-wrapper {
+        border: 1px solid red;
         .button {
             flex: none;
             width: auto !important;
@@ -305,6 +328,5 @@ export default {
         }
     }
 }
-
 /* end cmd-social-networks ------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdTabs.vue

@@ -142,7 +142,7 @@ export default {
 
                 &.active {
                     &:hover, &:active, &:focus {
-                        color: var(--hyperlink-color-highlighted);
+                        color: var(--hyperlink-color);
                         background: var(--pure-white);
 
                         span, [class*="icon-"] {

package/src/components/CmdThumbnailScroller.vue

@@ -29,10 +29,6 @@
 </template>
 
 <script>
-// import components
-import CmdImage from "./CmdImage.vue"
-import CmdSlideButton from "./CmdSlideButton.vue"
-
 // import functions
 import {openFancyBox} from './CmdFancyBox.vue'
 
@@ -42,10 +38,6 @@ import DefaultMessageProperties from "../mixins/CmdThumbnailScroller/DefaultMess
 
 export default {
     name: "CmdThumbnailScroller",
-    components: {
-        CmdImage,
-        CmdSlideButton
-    },
     mixins: [
         I18n,
         DefaultMessageProperties

package/src/components/CmdToggleDarkMode.vue

@@ -1,6 +1,25 @@
 <template>
     <div :class="['cmd-toggle-dark-mode', {'styled-layout': useStyledLayout, 'dark-mode': darkMode}]">
+        <!-- begin button-style -->
+        <a v-if="styledAsButton"
+           href="#"
+           :class="['button', {'dark-mode': darkMode}]"
+           @click.prevent="toggleColorScheme"
+        >
+            <span v-if="showLabel">{{ labelText }}</span>
+            <!-- begin CmdIcon -->
+            <CmdIcon
+                :iconClass="iconClass"
+                :type="iconType"
+                :tooltip="!showLabel ? labelText: ''"
+            />
+            <!-- end CmdIcon -->
+        </a>
+        <!-- end button-style -->
+
+        <!-- begin CmdFormElement -->
         <CmdFormElement
+            v-else
             element="input"
             type="checkbox"
             :labelText="labelText"
@@ -10,6 +29,7 @@
             :title="!showLabel ? labelText: ''"
             @update:modelValue="setColorScheme"
         />
+        <!-- end CmdFormElement -->
     </div>
 </template>
 
@@ -22,6 +42,41 @@ export default {
         }
     },
     props: {
+        /**
+         * activate if toggle-switch should be replaced by a button
+         *
+         * @affectsStyling: true
+         */
+        styledAsButton: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * icon for dark-mode icon if button-style is used
+         *
+         * (styledAsButton-property must be activated)
+         */
+        iconDarkMode: {
+            default() {
+                return {
+                    iconClass: "icon-home",
+                    iconType: "auto"
+                }
+            }
+        },
+        /**
+         * icon for light-mode icon if button-style is used
+         *
+         * (styledAsButton-property must be activated)
+         */
+        iconLightMode: {
+            default() {
+                return {
+                    iconClass: "icon-globe",
+                    iconType: "auto"
+                }
+            }
+        },
         /**
          * toggle visibility of label
          */
@@ -91,11 +146,21 @@ export default {
         onToggleColorScheme(event) {
             // get current color-scheme from event-listener (if color-scheme is toggled by (another) switch or browser-/os-settings)
             this.darkMode = event.detail === "dark-mode"
+        },
+        toggleColorScheme() {
+            this.darkMode = !this.darkMode
+            this.setColorScheme()
         }
     },
     computed: {
         labelText() {
             return this.darkMode ? this.labelTextDarkMode : this.labelTextLightMode
+        },
+        iconClass() {
+            return this.darkMode ? this.iconDarkMode.iconClass : this.iconLightMode.iconClass
+        },
+        iconType() {
+            return this.darkMode ? this.iconDarkMode.iconType : this.iconLightMode.iconType
         }
     },
     watch: {