comand-component-library 4.2.2 → 4.2.5

package/src/components/CmdCopyrightInformation.vue

@@ -13,8 +13,8 @@ export default {
 <style>
 /* begin cmd-copyright-information ---------------------------------------------------------------------------------------- */
 .cmd-copyright-information {
-    background: var(--dark-gray);
-    border-top: var(--default-border-width) var(--default-border-style) var(--pure-white);
+    background: var(--color-dark-gray);
+    border-top: var(--default-border-width) var(--default-border-style) var(--color-white);
     text-align: center;
     padding: var(--default-padding);
     margin-top: auto;
@@ -22,11 +22,11 @@ export default {
 
     a {
         text-decoration: none;
-        color: var(--pure-white);
+        color: var(--color-white);
 
         &:hover, &:active, &:focus {
             text-decoration: underline;
-            color: var(--pure-white);
+            color: var(--color-white);
         }
     }
 }

package/src/components/CmdFakeSelect.vue

@@ -572,7 +572,7 @@ export default {
                     }
 
                     &:hover, &:active, &:focus {
-                        background: var(--pure-white);
+                        background: var(--color-white);
                         border-color: var(--primary-color);
 
                         span, [class*="icon"] {
@@ -630,7 +630,7 @@ export default {
                 background: var(--primary-color);
 
                 span, [class*="icon"] {
-                    color: var(--pure-white);
+                    color: var(--color-white);
                 }
             }
 
@@ -647,7 +647,7 @@ export default {
             }
 
             &.active {
-                background: var(--light-gray);
+                background: var(--color-light-gray);
 
                 span {
                     color: var(--hyperlink-color);
@@ -657,7 +657,7 @@ export default {
                     background: var(--primary-color);
 
                     span, [class*="icon"] {
-                        color: var(--pure-white);
+                        color: var(--color-white);
                     }
                 }
             }

package/src/components/CmdFancyBox.vue

@@ -624,16 +624,16 @@ export default FancyBox
                 }
 
                 &.print-grayscale {
-                    background: linear-gradient(135deg, var(--medium-gray) 0%, var(--medium-gray) 50%, var(--pure-white) 50%, var(--pure-white) 100%);
+                    background: linear-gradient(135deg, var(--color-medium-gray) 0%, var(--color-medium-gray) 50%, var(--color-white) 50%, var(--color-white) 100%);
                 }
 
                 &.print-color {
-                    background: linear-gradient(135deg, #009fe3 0%, #009fe3 25%, #e6007e 25%, #e6007e 50%, #ffed00 50%, #ffed00 50%, #ffed00 75%, var(--medium-gray) 75%, var(--medium-gray) 100%);
+                    background: linear-gradient(135deg, #009fe3 0%, #009fe3 25%, #e6007e 25%, #e6007e 50%, #ffed00 50%, #ffed00 50%, #ffed00 75%, var(--color-medium-gray) 75%, var(--color-medium-gray) 100%);
                 }
 
                 &:hover, &:active, &:focus {
                     border: var(--primary-border);
-                    background: var(--pure-white);
+                    background: var(--color-white);
 
                     [class*="icon-"] {
                         color: var(--primary-color);

package/src/components/CmdFlexContainer.vue

@@ -0,0 +1,109 @@
+<template>
+    <div :class="['cmd-flex-container', 'flex-container', htmlClasses]">
+        <!-- begin slot-content -->
+        <slot></slot>
+        <!-- end slot-content -->
+    </div>
+</template>
+
+<script>
+export default {
+    name: "CmdFlexContainer",
+    props: {
+        /**
+         * activate if content should be aligned vertically
+         *
+         * @affectsStyling: true
+         */
+        alignContentVertical: {
+            type: String,
+            required: false
+        },
+        /**
+         * activate if no gap between items should be used
+         *
+         * @affectsStyling: true
+         */
+        noGap: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * activate if items should not behave like flex-items (they are now shrunk to their content)
+         *
+         * @affectsStyling: true
+         */
+        noFlex: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * define how the items will be aligned vertically
+         *
+         * attention: if alignContentVertical is activated, this property defines the horizontal alignment
+         *
+         * @allowedValues: top, flex-start, center, flex-end, bottom
+         * @affectsStyling: true
+         */
+        alignItems: {
+            type: String,
+            required: false,
+            validator(value) {
+                return value === "top" ||
+                    value === "flex-start" ||
+                    value === "center" ||
+                    value === "flex-end" ||
+                    value === "bottom"
+            }
+        },
+        /**
+         * define how the items will be aligned/justified horizontally.
+         *
+         * attention: if alignContentVertical is activated, this property defines the vertical alignment/justification
+         *
+         * @allowedValues: top, flex-start, center, flex-end, bottom, space-between, space-around
+         * @affectsStyling: true
+         */
+        justifyContent: {
+            type: String,
+            required: false,
+            validator(value) {
+                return value === "top" ||
+                    value === "flex-start" ||
+                    value === "center" ||
+                    value === "flex-end" ||
+                    value === "bottom" ||
+                    value === "space-between" ||
+                    value === "space-around"
+            }
+        }
+    },
+    computed: {
+        htmlClasses() {
+            const htmlClasses = []
+
+            if (this.alignContentVertical) {
+                htmlClasses.push("vertical")
+            }
+            if (this.useGap) {
+                htmlClasses.push("no-gap")
+            }
+            if (this.noFlex) {
+                htmlClasses.push("no-flex")
+            }
+            if (this.alignItems) {
+                htmlClasses.push("align-items-" + this.alignItems)
+            }
+            if (this.justifyContent) {
+                htmlClasses.push("justify-content-" + this.justifyContent)
+            }
+
+            return htmlClasses.join(" ")
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

package/src/components/CmdFormElement.vue

@@ -952,6 +952,12 @@ export default {
         }
     }
 
+    .label-text {
+        :is(a, span)[class*="icon-"] {
+            top: .09rem;
+        }
+    }
+
     &.has-state, & + .cmd-tooltip {
         &.error {
             * {

package/src/components/CmdFormFilters.vue

@@ -116,7 +116,7 @@ export default {
         margin-left: 0;
         margin-right: var(--default-margin);
         border: var(--default-border);
-        background: var(--pure-white);
+        background: var(--color-white);
         font-size: var(--font-size-small);
 
         &:hover, &:active, &:focus {

package/src/components/CmdImage.vue

@@ -432,7 +432,7 @@ export default {
             left: 50%;
             transform: translateX(-50%) translateY(-50%);
             font-size: 10rem;
-            color: var(--pure-white);
+            color: var(--color-white);
             text-shadow: var(--default-text-shadow);
             z-index: 10;
         }

package/src/components/CmdLink.vue

@@ -141,6 +141,10 @@ export default {
         margin: 0;
     }
 
+    span {
+        margin: 0;
+    }
+
     &.box {
         display: inline-flex;
         flex-direction: column;

package/src/components/CmdLoginForm.vue

@@ -9,6 +9,37 @@
         />
         <!-- end CmdHeadline -->
 
+        <!-- begin Google-Login-Button -->
+        <button v-if="enableLoginWithGoogle" class="gsi-material-button">
+            <div class="gsi-material-button-state"></div>
+            <div class="gsi-material-button-content-wrapper">
+                <div class="gsi-material-button-icon">
+                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: block;">
+                        <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
+                        <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
+                        <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
+                        <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
+                        <path fill="none" d="M0 0h48v48H0z"></path>
+                    </svg>
+                </div>
+                <span class="gsi-material-button-contents">Sign in with Google</span>
+                <span style="display: none;">Sign in with Google</span>
+            </div>
+        </button>
+        <!-- end Google-Login-Button -->
+
+        <!-- begin Facebook-Login-Button -->
+        <div v-if="enableLoginWithFacebook"
+             class="fb-login-button"
+             data-width=""
+             data-size=""
+             data-button-type=""
+             data-layout=""
+             data-auto-logout-link="false"
+             data-use-continue-as="false">
+        </div>
+        <!-- end Facebook-Login-Button -->
+
         <!-- begin form elements -->
         <div :class="['login-fields flex-container', {'vertical': orientation === 'vertical'}]">
             <!-- begin CmdFormElement -->
@@ -175,6 +206,20 @@ export default {
         }
     },
     props: {
+        /**
+         * activate if login with google should be enabled
+         */
+        enableLoginWithGoogle: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * activate if login with facebook should be enabled
+         */
+        enableLoginWithFacebook: {
+            type: Boolean,
+            default: true
+        },
         /**
          * value for v-model (modelValue is default name in vue 3)
          */
@@ -507,16 +552,120 @@ export default {
         align-items: center;
 
         > a:not(.button) {
-            display: flex;
-            align-items: center;
+            display: block;
             text-decoration: none;
-            flex: none;
         }
 
         > .button {
             margin-left: auto;
         }
     }
+
+    /* begin google-login-button */
+    .gsi-material-button {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+        -webkit-appearance: none;
+        background-color: WHITE;
+        background-image: none;
+        border: 1px solid #747775;
+        -webkit-border-radius: 4px;
+        border-radius: 4px;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        color: #1f1f1f;
+        cursor: pointer;
+        font-family: 'Roboto', arial, sans-serif;
+        font-size: 14px;
+        height: 40px;
+        letter-spacing: 0.25px;
+        outline: none;
+        overflow: hidden;
+        padding: 0 12px;
+        position: relative;
+        text-align: center;
+        -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
+        transition: background-color .218s, border-color .218s, box-shadow .218s;
+        vertical-align: middle;
+        white-space: nowrap;
+        width: auto;
+        max-width: 400px;
+        min-width: min-content;
+    }
+
+    .gsi-material-button .gsi-material-button-icon {
+        height: 20px;
+        margin-right: 12px;
+        min-width: 20px;
+        width: 20px;
+    }
+
+    .gsi-material-button .gsi-material-button-content-wrapper {
+        -webkit-align-items: center;
+        align-items: center;
+        display: flex;
+        -webkit-flex-direction: row;
+        flex-direction: row;
+        -webkit-flex-wrap: nowrap;
+        flex-wrap: nowrap;
+        height: 100%;
+        justify-content: space-between;
+        position: relative;
+        width: 100%;
+    }
+
+    .gsi-material-button .gsi-material-button-contents {
+        -webkit-flex-grow: 1;
+        flex-grow: 1;
+        font-family: 'Roboto', arial, sans-serif;
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: top;
+    }
+
+    .gsi-material-button .gsi-material-button-state {
+        -webkit-transition: opacity .218s;
+        transition: opacity .218s;
+        bottom: 0;
+        left: 0;
+        opacity: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+
+    .gsi-material-button:disabled {
+        cursor: default;
+        background-color: #ffffff61;
+        border-color: #1f1f1f1f;
+    }
+
+    .gsi-material-button:disabled .gsi-material-button-contents {
+        opacity: 38%;
+    }
+
+    .gsi-material-button:disabled .gsi-material-button-icon {
+        opacity: 38%;
+    }
+
+    .gsi-material-button:not(:disabled):active .gsi-material-button-state,
+    .gsi-material-button:not(:disabled):focus .gsi-material-button-state {
+        background-color: #303030;
+        opacity: 12%;
+    }
+
+    .gsi-material-button:not(:disabled):hover {
+        -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
+        box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
+    }
+
+    .gsi-material-button:not(:disabled):hover .gsi-material-button-state {
+        background-color: #303030;
+        opacity: 8%;
+    }
+    /* end google-login-button */
 }
 /* end cmd-login-form ---------------------------------------------------------------------------------------- */
 </style>

package/src/components/CmdMailToolEntry.vue

@@ -196,7 +196,7 @@ export default {
 
     &:hover, &:active, &:focus {
         cursor: pointer;
-        background: var(--pure-white);
+        background: var(--color-white);
     }
 
     &.unread {

package/src/components/CmdMailToolFilter.vue

@@ -187,7 +187,7 @@ export default {
 .cmd-mail-tool-filter {
     display: flex;
     padding: var(--default-padding);
-    background: var(--light-gray);
+    background: var(--color-light-gray);
 
     & > * {
         flex: 1;

package/src/components/CmdMainNavigation.vue

@@ -438,7 +438,7 @@ export default {
                             left: 0;
                             height: 100dvh;
                             display: block;
-                            background: var(--pure-black-reduced-opacity);
+                            background: var(--color-black-reduced-opacity);
                         }
 
                         ul {

package/src/components/CmdMultistepFormProgressBar.vue

@@ -144,14 +144,14 @@ export default {
             background: var(--primary-color-reduced-opacity);
 
             :is(span, [class*="icon-"]) {
-                color: var(--pure-white);
+                color: var(--color-white);
                 font-size: var(--icon-size-medium) !important;
 
                 & + [class*="icon-"] {
                     &:last-child {
                         border: var(--default-border);
                         border-radius: var(--full-circle);
-                        background: var(--pure-white);
+                        background: var(--color-white);
                         color: var(--color-scheme-text-color);
                         margin: 0;
                         position: absolute;
@@ -173,7 +173,7 @@ export default {
                 background: var(--primary-color);
 
                 :is(span, [class*="icon-"]) {
-                    color: var(--pure-white);
+                    color: var(--color-white);
                 }
 
                 .number {
@@ -191,8 +191,8 @@ export default {
                 justify-content: center;
                 border-radius: var(--full-circle);
                 border: var(--default-border);
-                border-color: var(--pure-white);
-                background: var(--pure-white);
+                border-color: var(--color-white);
+                background: var(--color-white);
                 color: var(--primary-color-reduced-opacity);
             }
         }
@@ -212,12 +212,12 @@ export default {
                 background: var(--primary-color);
 
                 span, [class*="icon-"] {
-                    color: var(--pure-white);
+                    color: var(--color-white);
                 }
 
                 &:hover, &:active, &:focus {
                     span, [class*="icon-"] {
-                        color: var(--pure-white);
+                        color: var(--color-white);
 
                         & + [class*="icon-"] {
                             &:last-child {
@@ -229,8 +229,8 @@ export default {
             }
 
             .number {
-                background: var(--pure-white);
-                border-color: var(--pure-white);
+                background: var(--color-white);
+                border-color: var(--color-white);
                 color: var(--hyperlink-color) !important;
             }
 
@@ -239,8 +239,7 @@ export default {
                 border-left-color: var(--border-color);
 
                 a {
-                    background: none;
-                    color: var(--color-scheme-text-color);
+                    color: var(--color-white);
 
                     span, span[class*='color'] {
                         color: inherit;
@@ -248,13 +247,15 @@ export default {
                         & + [class*="icon-"] {
                             &:last-child {
                                 border-color: var(--border-color);
-                                color: var(--pure-white);
+                                color: var(--color-white);
                                 background: var(--secondary-color);
                             }
                         }
                     }
 
                     &:hover, &:active, &:focus {
+                        background: var(--color-white);
+
                         span, [class*="icon-"] {
                             &:not(:last-child) {
                                 color: var(--hyperlink-color);

package/src/components/CmdOpeningHours.vue

@@ -465,7 +465,7 @@ export default {
         font-weight: bold;
         display: table;
         margin-bottom: var(--default-margin);
-        color: var(--pure-white);
+        color: var(--color-white);
         background: var(--success-color);
         border-radius: var(--default-border-radius);
 
@@ -477,7 +477,7 @@ export default {
     > a {
         &:hover, &:active, &:focus {
             text-decoration: underline;
-            color: var(--pure-white);
+            color: var(--color-white);
         }
     }
 

package/src/components/CmdSiteHeader.vue

@@ -217,6 +217,10 @@ export default {
         }
     }
 
+    li a {
+        text-decoration: none;
+    }
+
     header, .cmd-main-navigation nav, .cmd-list-of-links {
         max-width: var(--max-width);
         width: 100%; /* stretch flex-item */

package/src/components/CmdSlideshow.vue

@@ -347,7 +347,7 @@ export default {
         padding: var(--default-padding);
         line-height: 100%;
         font-size: 3rem;
-        color: var(--pure-white);
+        color: var(--color-white);
         background: var(--primary-color);
     }
 
@@ -375,7 +375,7 @@ export default {
                 border: var(--primary-border);
 
                 &:hover, &:active, &:focus {
-                    background: var(--pure-white);
+                    background: var(--color-white);
                     color: var(--hyperlink-color);
                 }
             }
@@ -420,7 +420,7 @@ export default {
                 list-style-type: none;
                 margin: 0;
                 border-radius: var(--full-circle);
-                background: var(--light-gray);
+                background: var(--color-light-gray);
                 border: var(--default-border-reduced-opacity);
 
                 a {
@@ -434,7 +434,7 @@ export default {
                     border-color: var(--hyperlink-color);
 
                     a {
-                        background: var(--pure-white);
+                        background: var(--color-white);
                         transition: var(--default-transition);
                     }
                 }
@@ -451,7 +451,7 @@ export default {
 
                     &:hover, &:active, &:focus, &.active {
                         border-color: var(--primary-color);
-                        background: var(--pure-white);
+                        background: var(--color-white);
 
                         a {
                             background: var(--primary-color);
@@ -472,7 +472,7 @@ export default {
             right: 5.5rem;
             padding: 0 0.2rem;
             border-radius: var(--default-border-radius);
-            background: var(--pure-white-reduced-opacity);
+            background: var(--color-white-reduced-opacity);
         }
     }
 

package/src/components/CmdSmartSearch.vue

@@ -51,6 +51,13 @@ export default {
             type: Array,
             required: true
         },
+        /**
+         * define the maximum listed number of recommendations
+         */
+        maxNumberOfRecommendations: {
+            type: Number,
+            default: 3
+        },
         /**
          * set if list of recommendations will be filtered by first letter (else by any containing letter)
          */
@@ -94,7 +101,7 @@ export default {
 
                 // check if string from listOfRecommendations starsWith or contains the provides string from the searchfield
                 return this.filterByFirstLetter ? lowerCaseDisplayValue.startsWith(lowerCaseSearchTerm) : lowerCaseDisplayValue.includes(lowerCaseSearchTerm)
-            })
+            }).slice(0, this.maxNumberOfRecommendations)
         }
     },
     methods: {
@@ -176,7 +183,7 @@ export default {
                     background: var(--hyperlink-color);
 
                     span, span[class*="icon"] {
-                        color: var(--pure-white);
+                        color: var(--color-white);
                     }
                 }
             }

package/src/components/CmdSocialNetworks.vue

@@ -374,12 +374,12 @@ export default {
         border-color: var(--social-network-color);
 
         > span {
-            color: var(--pure-white);
+            color: var(--color-white);
         }
 
         &:hover, &:active, &:focus {
-            background: var(--pure-white);
-            color: var(--pure-white);
+            background: var(--color-white);
+            color: var(--color-white);
 
             > span {
                 color: var(--social-network-color);