comand-component-library 3.3.87 → 4.0.0

package/src/components/CmdCompanyLogo.vue

@@ -1,17 +1,17 @@
 <template>
-    <div class="cmd-company-logo">
+    <div class="cmd-company-logo company-logo">
         <router-link v-if="link?.type === 'router'" :to="link?.path" :title="link?.tooltip">
             <!-- begin CmdImage -->
-            <CmdImage :image="image" />
+            <CmdImage :image="image"/>
             <!-- end CmdImage -->
         </router-link>
         <a v-else-if="link?.type === 'href'" :href="link?.path" :title="link?.tooltip">
             <!-- begin CmdImage -->
-            <CmdImage :image="image" />
+            <CmdImage :image="image"/>
             <!-- end CmdImage -->
         </a>
         <!-- begin CmdImage -->
-        <CmdImage v-else :image="image" />
+        <CmdImage v-else :image="image"/>
         <!-- end CmdImage -->
     </div>
 </template>
@@ -92,8 +92,8 @@ export default {
             this.prefersColorScheme = event.matches ? "light" : "dark"
         },
         observeDom(mutationList) {
-            for(let i = 0; i < mutationList.length; i++) {
-                if(mutationList[i].type === 'attributes') {
+            for (let i = 0; i < mutationList.length; i++) {
+                if (mutationList[i].type === 'attributes') {
                     this.toggleColorScheme()
                     break
                 }
@@ -105,7 +105,7 @@ export default {
         toggleColorScheme() {
             if (document.querySelector("html").classList.contains("light-mode")) {
                 this.prefersColorScheme = "light"
-            } else if(document.querySelector("html").classList.contains("dark-mode")) {
+            } else if (document.querySelector("html").classList.contains("dark-mode")) {
                 this.prefersColorScheme = "dark"
             } else if (matchMedia("(prefers-color-scheme: light)").matches) {
                 this.prefersColorScheme = "light"
@@ -117,10 +117,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-company-logo ---------------------------------------------------------------------------------------- */
-@import '../assets/styles/variables';
-
 .cmd-company-logo {
     img {
         display: block;
@@ -134,9 +132,14 @@ export default {
             border: 0;
         }
     }
+}
+</style>
 
+<style lang="scss">
+@import '../assets/styles/variables';
 
-    @media only screen and (max-width: $medium-max-width) {
+@media only screen and (max-width: $medium-max-width) {
+    .cmd-company-logo {
         img {
             max-width: 100%;
             max-height: 7.5rem;

package/src/components/CmdContainer.vue

@@ -17,7 +17,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 .cmd-container {
     min-height: 5rem;
 }

package/src/components/CmdCookieDisclaimer.vue

@@ -273,7 +273,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-cookie-disclaimer ---------------------------------------------------------------------------------------- */
 .cmd-cookie-disclaimer {
     width: 100%;

package/src/components/CmdCopyrightInformation.vue

@@ -10,7 +10,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-copyright-information ---------------------------------------------------------------------------------------- */
 .cmd-copyright-information {
     background: var(--text-color);

package/src/components/CmdFancyBox.vue

@@ -471,10 +471,8 @@ export {openFancyBox}
 export default FancyBox
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-fancybox ---------------------------------------------------------------------------------------- */
-@import "../assets/styles/variables";
-
 .cmd-fancybox {
     z-index: 500;
     flex-direction: column;
@@ -490,13 +488,13 @@ export default FancyBox
         margin-top: calc(var(--default-margin) * 2)
     }
 
-    // detect open-attribute (will be added to dom automatically)
+    /* detect open-attribute (will be added to dom automatically) */
     &[open] {
         display: flex;
     }
 
     &.show-overlay::backdrop {
-        --reduced-opacity: .75; // must be declared again, because ::backdrop does not allow the use of global variables
+        --reduced-opacity: .75; /* must be declared again, because ::backdrop does not allow the use of global variables */
         background: rgba(0, 0, 0, var(--reduced-opacity));
     }
 
@@ -619,7 +617,12 @@ export default FancyBox
             }
         }
     }
+}
+</style>
 
+<style lang="scss">
+@import "../assets/styles/variables";
+.cmd-fancybox {
     @media only screen and (max-width: $medium-max-width) {
         .outer-content-wrapper {
             .content {

package/src/components/CmdForm.vue

@@ -185,7 +185,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
+/* begin cmd-form ---------------------------------------------------------------------------------------- */
 .cmd-form {
     &:not([data-use-validation="true"]) {
         label.error :where(::placeholder, select option:first-child),
@@ -204,5 +205,10 @@ export default {
             border-color: var(--error-color);
         }
     }
+
+    .button, .button:last-child {
+        margin-left: auto;
+    }
 }
+/* end cmd-form ---------------------------------------------------------------------------------------- */
 </style>

package/src/components/CmdFormElement.vue

@@ -8,11 +8,8 @@
            {
             disabled: $attrs.disabled,
             inline : displayLabelInline,
-            checked: isChecked,
             'toggle-switch': toggleSwitch,
             colored: colored,
-            on: colored && isChecked,
-            off: colored && !isChecked,
             'has-state': validationStatus
            }
        ]"
@@ -43,7 +40,7 @@
             />
             <!-- end CmdTooltipForInputElements -->
 
-            <a v-if="$attrs.required || inputRequirements.length"
+            <a v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
                 href="#"
                 @click.prevent
                 :title="validationTooltip"
@@ -59,10 +56,7 @@
 
         <span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio'" class="flex-container"><!-- container required to place inner icons correctly -->
             <!-- begin CmdIcon (for icon inside field) -->
-            <CmdIcon
-                v-if="fieldIconClass"
-                class="place-inside"
-                :iconClass="fieldIconClass"
+            <CmdIcon v-if="fieldIconClass" class="place-inside" :iconClass="fieldIconClass"
             />
             <!-- end CmdIcon (for icon inside field) -->
 
@@ -121,7 +115,7 @@
                     @blur="onBlur"
                     :checked="isChecked"
                     :value="inputValue"
-                    :class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch }]"
+                    :class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType}]"
                     :id="htmlId"
                     :disabled="$attrs.disabled"
                     :aria-invalid="validationStatus === 'error'"
@@ -392,6 +386,13 @@ export default {
             type: Array,
             required: false
         },
+        /**
+         * activate if interactive status-icon (to show requirements) should be shown above form-element
+         */
+        showStatusIcon: {
+            type: Boolean,
+            default: true
+        },
         /**
          * native button
          */
@@ -842,9 +843,10 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-form-element ------------------------------------------------------------------------------------------ */
 .cmd-form-element {
+    /* icon right aligned in input */
     input + .place-inside {
         left: auto;
         right: .5rem
@@ -859,11 +861,17 @@ export default {
             color: var(--status-color);
 
             &.place-inside {
-                color: var(--status-color);
+                --status-color: var(--error-color);
             }
         }
     }
 
+    :is(input[type="checkbox"], input[type="radio"]):checked {
+        ~ .label-text span {
+            color: var(--hyperlink-color);
+        }
+    }
+
     &.inline {
         & > span {
             & > a:not(.button) {
@@ -918,85 +926,23 @@ export default {
         }
     }
 
-    &.colored {
-        input {
-            border-color: var(--error-color);
-
-            &::after {
-                border-color: inherit;
-            }
-        }
-
-        &.on {
-            input {
-                border-color: var(--success-color);
-
-                &::after {
-                    border-color: inherit;
-                    background: var(--success-color);
-                }
-            }
-        }
-    }
-
     .characters-left-wrapper {
         margin-top: calc(var(--default-margin) / 2);
         display: block;
 
         span:not(:only-child):first-child {
             margin-right: calc(var(--default-margin) / 2);
-            color: var(--text-color);
+            color: var(--color-scheme-text-color);
         }
 
         .characters-left {
-            color: var(--text-color);
+            color: var(--color-scheme-text-color);
 
             &.error {
                 color: var(--error-color);
             }
         }
     }
-
-    /* begin toggle-switch */
-    /* no cmd-prefix-styling (class based on frontend-framework) */
-    &.toggle-switch {
-        &.colored {
-            &.off {
-                .switch-label-wrapper {
-                    border-color: var(--error-color);
-
-                    span {
-                        &.label-text {
-                            color: var(--error-color);
-
-                            &::before {
-                                border-color: var(--error-color);
-                                background-color: var(--pure-white);
-                            }
-                        }
-                    }
-                }
-            }
-
-            &.on {
-                .switch-label-wrapper {
-                    border-color: var(--success-color);
-
-                    span {
-                        &.label-text {
-                            color: var(--success-color);
-
-                            &::before {
-                                border-color: var(--success-color);
-                                background-color: var(--success-color);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-    /* end toggle-switch */
 }
 /* end cmd-form-element------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdFormFilters.vue

@@ -105,10 +105,11 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-form-filters ------------------------------------------------------------------------------------------ */
 .cmd-form-filters {
     display: flex;
+    margin: 0;
 
     li {
         list-style-type: none;

package/src/components/CmdGoogleMaps.vue

@@ -30,7 +30,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-google-maps ---------------------------------------------------------------------------------------- */
 .cmd-google-maps {
     border: var(--default-border);

package/src/components/CmdHeadline.vue

@@ -181,10 +181,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-headline ------------------------------------------------------------------------------------------ */
-//@import '../assets/styles/variables';
-
 .cmd-headline {
     margin-bottom: var(--default-margin);
     gap: calc(var(--default-gap) / 2);
@@ -210,28 +208,30 @@ export default {
         align-items: center;
     }
 
-    &:has(h1) span[class*="icon"] {
-        font-size: calc(var(--headline-font-size-h1) * 1.6);
-    }
+    &.has-pre-headline-text {
+        &:has(h1) span[class*="icon"] {
+            font-size: calc(var(--headline-font-size-h1) * 1.6);
+        }
 
-    &:has(h2) span[class*="icon"] {
-        font-size: calc(var(--headline-font-size-h2) * 1.8);
-    }
+        &:has(h2) span[class*="icon"] {
+            font-size: calc(var(--headline-font-size-h2) * 1.8);
+        }
 
-    &:has(h3) span[class*="icon"] {
-        font-size: calc(var(--headline-font-size-h3) * 1.9);
-    }
+        &:has(h3) span[class*="icon"] {
+            font-size: calc(var(--headline-font-size-h3) * 1.9);
+        }
 
-    &:has(h4) span[class*="icon"] {
-        font-size: calc(var(--headline-font-size-h4) * 2);
-    }
+        &:has(h4) span[class*="icon"] {
+            font-size: calc(var(--headline-font-size-h4) * 2);
+        }
 
-    &:has(h5) span[class*="icon"] {
-        font-size: calc(var(--headline-font-size-h5) * 2.1);
-    }
+        &:has(h5) span[class*="icon"] {
+            font-size: calc(var(--headline-font-size-h5) * 2.1);
+        }
 
-    &:has(h6) span[class*="icon"] {
-        font-size: calc(var(--headline-font-size-h6) * 2.2);
+        &:has(h6) span[class*="icon"] {
+            font-size: calc(var(--headline-font-size-h6) * 2.2);
+        }
     }
 
     &:has(h4, h5, h6) .pre-headline-text {

package/src/components/CmdIcon.vue

@@ -63,7 +63,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 .iconify {
     font-size: var(--icon-size);
     vertical-align: text-bottom;

package/src/components/CmdImage.vue

@@ -369,7 +369,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-image ------------------------------------------------------------------------------------------ */
 .cmd-image {
     img {

package/src/components/CmdImageGallery.vue

@@ -145,7 +145,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-image-gallery ---------------------------------------------------------------------------------------- */
 .cmd-image-gallery {
     > .cmd-headline, > input.edit-mode, > .edit-component-wrapper {

package/src/components/CmdImageZoom.vue

@@ -109,7 +109,7 @@ function clamp(value, min, max) {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-imagezoom ---------------------------------------------------------------------------------------- */
 .cmd-imagezoom {
     overflow: hidden;

package/src/components/CmdInputGroup.vue

@@ -265,7 +265,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 .cmd-input-group {
     &.inline {
         display: flex;
@@ -281,7 +281,7 @@ export default {
     .label-text {
         display: inline-flex;
 
-        > [class*="icon-"] {
+        > span + a [class*="icon-"] {
             margin-left: calc(var(--default-margin) / 2);
         }
     }

package/src/components/CmdListOfLinks.vue

@@ -171,7 +171,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-list-of-links ---------------------------------------------------------------------------------------- */
 .cmd-list-of-links {
     > ul {

package/src/components/CmdListOfLinksItem.vue

@@ -91,7 +91,3 @@ export default {
     }
 }
 </script>
-
-<style lang="scss">
-
-</style>

package/src/components/CmdListOfRequirements.vue

@@ -150,12 +150,16 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-list-of-requirements ------------------------------------------------------------------------------------------ */
 .cmd-list-of-requirements {
     dl {
         .error {
             --status-color: var(--error-color);
+
+            [class*="icon-"] {
+                color: var(--status-color);
+            }
         }
 
         .warning {
@@ -163,7 +167,11 @@ export default {
         }
 
         .success {
-            --status-color: var(--success-color);
+            --status-color: var(--success-color) !important;
+
+            [class*="icon-"] {
+                color: var(--status-color);
+            }
         }
 
         .info {

package/src/components/CmdLoginForm.vue

@@ -425,7 +425,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-login-form ---------------------------------------------------------------------------------------- */
 .cmd-login-form {
     .option-wrapper {

package/src/components/CmdMainNavigation.vue

@@ -307,10 +307,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-main-navigation ---------------------------------------------------------------------------------------- */
-@import '../assets/styles/variables';
-
 .cmd-main-navigation {
     &.hide-sub-navigation {
         ul {
@@ -366,6 +364,23 @@ export default {
     }
 }
 
+/* keep outside of .cmd-main-navigation to keep specificity */
+.off-canvas-right {
+    #toggle-offcanvas {
+        margin-right: 0;
+        margin-left: auto;
+    }
+}
+
+#toggle-offcanvas {
+    margin-left: 0;
+    display: none;
+}
+</style>
+
+<style lang="scss">
+@import '../assets/styles/variables';
+
 @media only screen and (max-width: $medium-max-width) {
     .cmd-main-navigation#main-navigation-wrapper {
         --nav-transition: all .5s linear;
@@ -530,19 +545,5 @@ export default {
         }
     }
 }
-
-/* keep outside of .cmd-main-navigation to keep specificity */
-.off-canvas-right {
-    #toggle-offcanvas {
-        margin-right: 0;
-        margin-left: auto;
-    }
-}
-
-#toggle-offcanvas {
-    margin-left: 0;
-    display: none;
-}
-
 /* end cmd-main-navigation ------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdMultistepFormProgressBar.vue

@@ -100,14 +100,14 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-multistep-form-progress-bar ---------------------------------------------------------------------------------------- */
-@import '../assets/styles/variables';
 
 .cmd-multistep-form-progress-bar {
     display: flex;
     justify-content: space-around;
     border: var(--default-border);
+    margin: 0;
 
     li {
         display: flex;
@@ -263,6 +263,10 @@ export default {
         }
     }
 }
+</style>
+
+<style lang="scss">
+@import '../assets/styles/variables';
 
 @media only screen and (width < #{$small-max-width}) {
     .cmd-multistep-form-progress-bar {
@@ -274,7 +278,7 @@ export default {
             }
 
             a {
-                span, [class*="icon-"] {
+                :is(span, [class*="icon-"]) {
                     & + [class*="icon-"] {
                         &:last-child {
                             left: auto;

package/src/components/CmdNewsletterSubscription.vue

@@ -171,11 +171,4 @@ export default {
         }
     }
 }
-</script>
-
-<style lang="scss">
-/* begin cmd-newsletter-subscription ---------------------------------------------------------------------------------------- */
-
-
-/* cmd-newsletter-subscription------------------------------------------------------------------------------------------ */
-</style>
+</script>

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;