comand-component-library 4.0.3 → 4.0.5

package/src/assets/styles/{global-styles.scss → component-library-global-styles.scss}

@@ -1,4 +1,4 @@
-/* global-styles.scss - last update: 2022/06/11 - IT IS NOT RECOMMENDED TO EDIT THIS FILE (TO AVOID TROUBLESHOOTING AFTER UPDATING) - DO CHANGES IN template.css ONLY */
+/* component-library-global-styles.scss - last update: 2022/06/11 - IT IS NOT RECOMMENDED TO EDIT THIS FILE (TO AVOID TROUBLESHOOTING AFTER UPDATING) - DO CHANGES IN template.css ONLY */
 
 /* begin table of contents --------------------------------------------------------------------------------------------------------------------------------------------------- */
 /*
@@ -143,7 +143,7 @@ body.avoid-scrolling {
 
         &:hover, &:active, &:focus {
             border-color: var(--primary-color);
-            background: var(--default-background-color);
+            background: var(--default-background);
         }
     }
 
@@ -304,26 +304,26 @@ html {
     &.light-mode {
         /* assign default colors for custom light-mode set by class */
         --color-scheme-text-color: var(--light-mode-text-color);
-        --color-scheme-text-color-buttons: var(--light-mode-text-color-buttons);
-        --color-scheme-background-color: var(--light-mode-background-color);
         --color-scheme-text-color-inverted: var(--dark-mode-text-color);
-        --color-scheme-background-inverted: var(--dark-mode-background-color);
+        --color-scheme-text-color-buttons: var(--light-mode-text-color-buttons);
+        --color-scheme-background: var(--light-mode-background);
+        --color-scheme-background-inverted: var(--dark-mode-background);
         --default-background-color-lightness: 97%;
     }
 
     --color-scheme-text-color-buttons: var(--dark-mode-text-color-buttons);
     --color-scheme-text-color-inverted: var(--light-mode-text-color);
-    --color-scheme-background: var(--dark-mode-background-color);
-    --color-scheme-background-inverted: var(--light-mode-background-color);
+    --color-scheme-background: var(--dark-mode-background);
+    --color-scheme-background-inverted: var(--light-mode-background);
     --default-background-color-lightness: 20%;
 
     &.dark-mode {
         /* assign default colors for custom dark-mode set by class */
         --color-scheme-text-color: var(--dark-mode-text-color);
-        --color-scheme-text-color-buttons: var(--dark-mode-text-color-buttons);
-        --color-scheme-background-color: var(--dark-mode-background-color);
         --color-scheme-text-color-inverted: var(--light-mode-text-color);
-        --color-scheme-background-inverted: var(--light-mode-background-color);
+        --color-scheme-text-color-buttons: var(--dark-mode-text-color-buttons);
+        --color-scheme-background: var(--dark-mode-background);
+        --color-scheme-background-inverted: var(--light-mode-background);
         --default-background-color-lightness: 20%;
         --hyperlink-color-lightness: 40%; /* hyperlink-color-lightness */
         --hyperlink-color-highlighted-lightness: 50%; /* hyperlink-color-highlighted-lightness (used for highlighted hyperlinks) */

package/src/components/CmdBox.vue

@@ -1,6 +1,7 @@
 <template>
     <!-- begin boxType 'content' -->
     <div v-if="boxType === 'content'"
+         ref="cmdBox"
          :class="[
              'cmd-box box content',
              {
@@ -128,6 +129,7 @@
             </div>
             <!-- end ribbons -->
         </div>
+        <!-- begin box-body -->
         <div class="box-body">
             <p v-if="product.articleNumber">{{ getMessage("cmdbox.productbox.article_no") }} {{
                     product.articleNumber
@@ -137,6 +139,7 @@
             </p>
             <p v-if="product.description">{{ product.description }}</p>
         </div>
+        <!-- end box-body -->
     </a>
     <!-- end boxType 'product' -->
 
@@ -151,6 +154,7 @@
                 'row-view': rowView
              }
          ]">
+        <!-- begin box-header -->
         <div class="box-header flex-container vertical">
             <figure v-if="user.image">
                 <img :src="user.image.src" :alt="user.image.alt"/>
@@ -161,20 +165,30 @@
                 <p v-if="!rowView">{{ user.name }}</p>
             </div>
         </div>
+        <!-- end box-header -->
+
+        <!-- begin box-body -->
         <div class="box-body">
             <p v-if="rowView">{{ user.name }}</p>
             <p v-if="user.profession">{{ user.profession }}</p>
             <p v-if="user.position">{{ user.position }}</p>
             <p v-if="user.description" class="description">{{ user.description }}</p>
         </div>
-        <ul class="tags">
+        <!-- end box-body -->
+
+        <!-- begin user-tags -->
+        <ul  v-if="user.tags && user.tags.length" class="tags">
             <li v-for="(tag, index) in user.tags" :key="index">
                 {{ tag }}
             </li>
         </ul>
-        <div v-if="user.links" class="box-footer">
+        <!-- end user-tags -->
+
+        <!-- begin box-footer -->
+        <div v-if="user.links && user.links.length" class="box-footer">
             <CmdListOfLinks :links="user.links" orientation="horizontal" :useGap="false"/>
         </div>
+        <!-- end box-footer -->
     </div>
     <!-- end boxType 'user' -->
 </template>
@@ -454,6 +468,18 @@ export default {
         // for boxType === product
         clickOnProduct(product) {
             this.$emit('click', product)
+        },
+        // set focus on first input if box contains form-elements
+        setFocus() {
+            this.$nextTick(() => {
+                if(this.open) {
+                   const firstFormElement = this.$refs.cmdBox.querySelector(":is(input, select, textarea):first-of-type")
+
+                    if(firstFormElement) {
+                       firstFormElement.focus()
+                    }
+                }
+            })
         }
     },
     watch: {
@@ -461,7 +487,11 @@ export default {
             // toggle collapse-status of all boxes if changed in outer component
             if (this.collapsible) {
                 this.open = this.openCollapsedBox
+                this.setFocus()
             }
+        },
+        open() {
+            this.setFocus()
         }
     }
 }
@@ -492,8 +522,8 @@ export default {
     &.collapsible {
         a.box-header {
             justify-content: space-between;
-            background: var(--hyperlink-color);
-            border-radius: var(--default-border-radius);
+            background: var(--box-header-background);
+            border-radius: var(--box-border-radius);
 
             &:hover, &:active, &:focus {
                 background: var(--pure-white);
@@ -528,6 +558,11 @@ export default {
                 border-bottom-left-radius: 0;
                 border-bottom-right-radius: 0;
             }
+
+            fieldset {
+                border: 0;
+                padding: var(--default-padding);
+            }
         }
 
         > .box-header {
@@ -553,7 +588,7 @@ export default {
 
         .box-body {
             flex-grow: 1;
-            border-top: var(--default-border);
+            border-top: var(--box-border);
 
             p.cutoff-text {
                 padding: var(--default-padding);
@@ -568,7 +603,7 @@ export default {
                     left: 0;
                     bottom: 0;
                     height: calc(var(--line-of-text-height) * 3);
-                    background: linear-gradient(to bottom, transparent 0%, var(--default-background-color) 100%);
+                    background: linear-gradient(to bottom, transparent 0%, var(--default-background) 100%);
                 }
 
                 &.show-text {
@@ -576,7 +611,7 @@ export default {
                 }
 
                 & + a {
-                    border-top: var(--default-border);
+                    border-top: var(--box-border);
                     display: block;
                     padding: var(--default-padding);
                     margin: 0;
@@ -600,7 +635,7 @@ export default {
                         display: block;
                         padding: var(--default-padding);
                         text-decoration: none;
-                        border-bottom: var(--default-border);
+                        border-bottom: var(--box-border);
 
                         &:hover, &:active, &:focus {
                             background: var(--primary-color);
@@ -731,7 +766,7 @@ export default {
                 margin: 0 auto var(--default-margin) auto;
                 padding: calc(var(--default-padding) * 3);
                 border-radius: var(--full-circle);
-                background: var(--box-header-background-color);
+                background: var(--box-header-background);
                 color: var(--pure-white);
 
                 & + p, & + figcaption {
@@ -776,7 +811,7 @@ export default {
         .box-footer {
             margin-top: auto;
             padding: 0;
-            border-top: var(--default-border);
+            border-top: var(--box-border);
 
             .cmd-list-of-links {
                 ul {
@@ -785,15 +820,15 @@ export default {
 
                     li {
                         flex: 1;
-                        border-radius: var(--default-border-radius);
+                        border-radius: var(--box-border-radius);
 
                         a {
                             flex: 1;
                             padding: var(--default-padding);
                             text-align: center;
-                            background: var(--color-scheme-background-color);
-                            border-left: var(--default-border);
-                            border-radius: var(--default-border-radius);
+                            background: var(--color-scheme-background);
+                            border-left: var(--box-border);
+                            border-radius: var(--box-border-radius);
                         }
 
                         &:hover, &:active, &:focus {
@@ -832,6 +867,7 @@ export default {
 
             .box-footer {
                 border: 0;
+                background: none;
 
                 .cmd-list-of-links {
                     background: none;

package/src/components/CmdFakeSelect.vue

@@ -20,18 +20,6 @@
             <span class="label-text">
                 <span :id="htmlId">{{ labelText }}<sup v-if="$attrs.required !== undefined">*</sup></span>
 
-                <!-- begin CmdTooltipForFormElements -->
-                <CmdTooltipForFormElements
-                    v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
-                    ref="tooltip"
-                    :validationStatus="validationStatus"
-                    :validationMessage="getValidationMessage"
-                    :relatedId="tooltipId"
-                    :cmdListOfRequirements="listOfRequirements"
-                    :role="validationStatus === 'error' ? 'alert' : 'dialog'"
-                />
-                <!-- end CmdTooltipForFormElements -->
-
                 <a v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
                    href="#"
                    @click.prevent
@@ -43,6 +31,18 @@
                    <CmdIcon :iconClass="getStatusIconClass"/>
                     <!-- end CmdIcon -->
                 </a>
+
+                <!-- begin CmdTooltipForFormElements -->
+                <CmdTooltipForFormElements
+                    v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
+                    ref="tooltip"
+                    :validationStatus="validationStatus"
+                    :validationMessage="getValidationMessage"
+                    :relatedId="tooltipId"
+                    :cmdListOfRequirements="listOfRequirements"
+                    :role="validationStatus === 'error' ? 'alert' : 'dialog'"
+                />
+                <!-- end CmdTooltipForFormElements -->
             </span>
             <!-- end label -->
         </template>
@@ -562,7 +562,7 @@ export default {
                 > a {
                     height: inherit;
                     border: var(--default-border);
-                    background: var(--color-scheme-background-color);
+                    background: var(--color-scheme-background);
                     color: var(--color-scheme-text-color);
                     border-radius: var(--default-border-radius);
 
@@ -687,7 +687,7 @@ export default {
             margin: 0;
             border-bottom-right-radius: var(--default-border-radius);
             border-bottom-left-radius: var(--default-border-radius);
-            background: var(--color-scheme-background-color);
+            background: var(--color-scheme-background);
             border: var(--primary-border);
 
             li {
@@ -745,7 +745,7 @@ export default {
                     }
 
                     &:hover, &:active, &:focus {
-                        background: var(--color-scheme-background-color);
+                        background: var(--color-scheme-background);
 
                         span {
                             color: var(--status-color);
@@ -792,7 +792,7 @@ export default {
 @mixin disabled-styles {
     color: var(--disabled-color);
     border-color: var(--disabled-color);
-    background: var(--disabled-background-color);
+    background: var(--disabled-background);
 }
 
 .cmd-fake-select {

package/src/components/CmdFormElement.vue

@@ -28,17 +28,6 @@
                 <sup v-if="$attrs.required" aria-hidden="true">*</sup>
             </span>
 
-            <!-- begin CmdTooltipForFormElements -->
-            <CmdTooltipForFormElements
-                v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
-                ref="tooltip"
-                :validationStatus="validationStatus"
-                :relatedId="tooltipId"
-                :cmdListOfRequirements="listOfRequirements"
-                :role="validationStatus === 'error' ? 'alert' : 'dialog'"
-            />
-            <!-- end CmdTooltipForFormElements -->
-
             <a v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
                href="#"
                @click.prevent
@@ -50,6 +39,17 @@
                 <CmdIcon :iconClass="getStatusIconClass"/>
                 <!-- end CmdIcon -->
             </a>
+
+            <!-- begin CmdTooltipForFormElements -->
+            <CmdTooltipForFormElements
+                v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
+                ref="tooltip"
+                :validationStatus="validationStatus"
+                :relatedId="tooltipId"
+                :cmdListOfRequirements="listOfRequirements"
+                :role="validationStatus === 'error' ? 'alert' : 'dialog'"
+            />
+            <!-- end CmdTooltipForFormElements -->
         </span>
         <!-- end label-text (+ required asterisk) -->
 
@@ -878,7 +878,7 @@ export default {
         * {
             --status-color: var(--error-color);
         }
-            
+
         ::placeholder {
             color: var(--status-color);
         }
@@ -927,7 +927,7 @@ export default {
             /* set styles to avoid overwriting by has-state-colors */
             &.button {
                 span {
-                    color: var(--color-scheme-background-color);
+                    color: var(--color-scheme-background);
                 }
 
                 &:hover, &:active, &:focus {

package/src/components/CmdHeadline.vue

@@ -21,7 +21,7 @@
                 </span>
             </component>
         </template>
-        <component :is="headlineTag">
+        <component v-else :is="headlineTag">
             <!-- begin CmdIcon -->
             <CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
             <!-- end CmdIcon -->

package/src/components/CmdInputGroup.vue

@@ -6,7 +6,7 @@
             inline: labelInline,
             'multiple-switch': multipleSwitch,
             disabled: disabled,
-            'toggle-switch': toggleSwitch,
+            'toggle-switches': toggleSwitches,
             'has-state': validationStatus
         }
         ]"
@@ -16,6 +16,20 @@
         <span v-show="showLabel" class="label-text">
             <span :id="htmlId">{{ labelText }}<sup v-if="required">*</sup></span>
 
+            <!-- begin status-icon -->
+            <a v-if="(required || inputRequirements.length > 0) && showStatusIcon"
+               href="#"
+               @click.prevent
+               :title="validationTooltip"
+               :aria-errormessage="tooltipId"
+               aria-live="assertive"
+               :id="tooltipId">
+               <!-- begin CmdIcon -->
+               <CmdIcon :iconClass="getStatusIconClass"/>
+                <!-- end CmdIcon -->
+            </a>
+            <!-- end status-icon -->
+
             <!-- begin CmdTooltipForFormElements -->
             <CmdTooltipForFormElements
                 v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
@@ -31,26 +45,12 @@
                 :role="validationStatus === 'error' ? 'alert' : 'dialog'"
             />
             <!-- end CmdTooltipForFormElements -->
-
-            <!-- begin status-icon -->
-            <a v-if="(required || inputRequirements.length > 0) && showStatusIcon"
-               href="#"
-               @click.prevent
-               :title="validationTooltip"
-               :aria-errormessage="tooltipId"
-               aria-live="assertive"
-               :id="tooltipId">
-               <!-- begin CmdIcon -->
-               <CmdIcon :iconClass="getStatusIconClass"/>
-                <!-- end CmdIcon -->
-            </a>
-            <!-- end status-icon -->
         </span>
         <!-- end label -->
 
         <!-- begin view without slot -->
         <span v-if="!useSlot" :class="['flex-container', {'no-flex': !stretchHorizontally, 'no-gap': multipleSwitch}]">
-            <label v-for="(inputElement, index) in inputElements" :key="index" :for="inputElement.id">
+            <label v-for="(inputElement, index) in inputElements" :key="index" :for="inputElement.id" :class="{'toggle-switch': toggleSwitches}">
                 <input
                     :type="inputTypes"
                     :id="inputElement.id"
@@ -58,7 +58,7 @@
                     :value="inputElement.value"
                     v-model="inputValue"
                     :disabled="disabled"
-                    :class="{'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch}"
+                    :class="{'replace-input-type': replaceInputType}"
                 />
                 <!-- begin CmdIcon -->
                 <CmdIcon
@@ -159,7 +159,7 @@ export default {
         /**
          * for replacing native checkboxes/radio-buttons by custom ones (based on frontend-framework)
          *
-         * toggleSwitch-property must be set to 'false'
+         * toggleSwitches-property must be set to 'false'
          *
          * @affectsStyling: true
          */
@@ -174,7 +174,7 @@ export default {
          *
          * @affectsStyling: true
          */
-        toggleSwitch: {
+        toggleSwitches: {
             type: Boolean,
             default: false
         },
@@ -314,15 +314,11 @@ export default {
         }
 
         &:hover, &:active, &:focus {
-            span {
+            > span {
                 color: var(--hyperlink-color-highlighted)
             }
 
             & + .flex-container {
-                label:not(:has(input:checked)) .label-text {
-                    color: var(--default-text-color);
-                }
-
                 input {
                     border-color: var(--default-border-color);
                 }
@@ -335,16 +331,26 @@ export default {
             --status-color: var(--error-color);
         }
 
-        label, [class*="icon-"]  {
+        label, span, [class*="icon-"]  {
             color: var(--status-color);
         }
 
         &.multiple-switch {
-            label {
-                border-color: var(--status-color);
+            &.error {
+                --status-color: var(--error-color);
+
+                label {
+                    border-color: var(--error-color);
+
+                    > * {
+                        color: var(--error-color);
+                    }
 
-                > * {
-                    color: var(--status-color);
+                    &:is(:hover, :active, :focus) {
+                        span, [class*="icon-"] {
+                            color: var(--hyperlink-color-highlighted);
+                        }
+                    }
                 }
             }
         }

package/src/components/CmdMultistepFormProgressBar.vue

@@ -266,7 +266,7 @@ export default {
             }
 
             & ~ li {
-                background: var(--default-background-color);
+                background: var(--default-background);
                 border-left-color: var(--border-color);
 
                 a {

package/src/components/CmdNewsletterSubscription.vue

@@ -34,7 +34,7 @@
                 element="button"
                 :type="buttonType"
                 :disabled="buttonDisabled"
-                :nativeButton="cmdFormElementSubmit"
+                :nativeButton="cmdFormElementSubmitDynamicLabel"
                 @click="sendData"
             />
             <!-- end cmd-form-element -->
@@ -145,6 +145,14 @@ export default {
         }
     },
     computed: {
+        cmdFormElementSubmitDynamicLabel() {
+            return this.updateButtonLabelText
+        },
+        updateButtonLabelText() {
+            const button = {...this.cmdFormElementSubmit}
+            button.text = this.subscription === "subscribe" ? "Subscribe now" : "Unsubscribe from list"
+            return button
+        },
         subscription: {
             get() {
                 return this.modelValue.subscription || "subscribe"
@@ -169,6 +177,15 @@ export default {
         checkValidationStatus(event) {
             this.buttonDisabled = event !== "success"
         }
+    },
+    watch: {
+        modelValue: {
+            handler() {
+                return this.updateButtonLabelText
+            },
+            deep: true,
+            immediate: true
+        }
     }
 }
 </script>

package/src/components/CmdSiteFooter.vue

@@ -32,7 +32,7 @@ export default {
 .cmd-site-footer {
     padding: var(--grid-gap) 0;
     border-top: var(--default-border);
-    background: var(--default-background-color);
+    background: var(--default-background);
     margin-top: auto;
     flex: none;
 

package/src/components/CmdSiteHeader.vue

@@ -125,7 +125,7 @@ export default {
     flex-direction: column;
     flex: none;
     border-bottom: var(--default-border);
-    background: var(--color-scheme-background-color);
+    background: var(--color-scheme-background);
 
     &.sticky {
         position: sticky;

package/src/components/CmdTabs.vue

@@ -116,7 +116,7 @@ export default {
             border-top-left-radius: var(--default-border-radius);
             border-top-right-radius: var(--default-border-radius);
             list-style-type: none;
-            background: var(--color-scheme-background-color);
+            background: var(--color-scheme-background);
 
             a {
                 display: flex;
@@ -186,7 +186,7 @@ export default {
         padding: var(--default-padding);
         border: var(--primary-border);
         border-radius: var(--default-border-radius);
-        background: var(--color-scheme-background-color);
+        background: var(--color-scheme-background);
         border-top-left-radius: 0;
 
         > div {

package/src/components/CmdThumbnailScroller.vue

@@ -393,7 +393,7 @@ export default {
         padding-top: 0;
         margin: 0 auto;
         border: var(--default-border);
-        background: var(--color-scheme-background-color);
+        background: var(--color-scheme-background);
         overflow: hidden;
 
         > ul {

package/src/components/CmdToggleDarkMode.vue

@@ -265,7 +265,7 @@ export default {
 
         &.dark-mode {
             input {
-                background: var(--color-scheme-background-color);
+                background: var(--color-scheme-background);
                 border-color: var(--color-scheme-text-color);
 
                 &::before {
@@ -273,7 +273,7 @@ export default {
                     content: "";
                     width: var(--size);
                     aspect-ratio: 1/1;
-                    background: var(--color-scheme-background-color);
+                    background: var(--color-scheme-background);
                     border-radius: var(--full-circle);
                     position: absolute;
                     top: 0;

package/src/components/CmdTooltip.vue

@@ -207,7 +207,7 @@ export default {
     line-height: 100%;
     font-size: var(--font-size-small);
     position: fixed;
-    background: var(--color-scheme-background-color);
+    background: var(--color-scheme-background);
     z-index: 100;
     border: var(--default-border);
     border-color: hsl(220, 2%, 25%);