comand-component-library 4.2.4 → 4.2.6

package/src/ComponentLibrary.vue

@@ -1762,14 +1762,6 @@
                     <a href="#" class="button small icon-cog" title="Open Component Settings"
                        @click.prevent="openSettingsSidebar('CmdOpeningHours')"></a>
                 </h2>
-                <CmdOpeningHours
-                    ref="CmdOpeningHours"
-                    v-bind="cmdOpeningHoursSettingsData"
-                    :openingHours="openingHoursData"
-                    :checkInterval="0"
-                    abbreviationTextAm="h"
-                    abbreviationTextPm="h"
-                />
                 <CmdOpeningHours
                     ref="CmdOpeningHours"
                     v-bind="cmdOpeningHoursSettingsData"
@@ -2259,7 +2251,7 @@ import tableDataLarge from '@/assets/data/table-large.json'
 import thumbnailScrollerImagesData from '@/assets/data/thumbnail-scroller-images.json'
 import thumbnailScrollerTextData from '@/assets/data/thumbnail-scroller-text.json'
 
-import allCountriesData from '@/assets/data/all-countries.json'
+import allCountriesData from '@/assets/lists-of-data/countries.json'
 
 import packageJson from '../package.json'
 
@@ -2766,17 +2758,17 @@ export default {
         align-items: center;
 
         [class*="icon-"] {
-            color: var(--pure-white);
+            color: var(--color-white);
             margin: 0;
         }
 
         .button {
             background: none;
-            border-color: var(--pure-white);
+            border-color: var(--color-white);
             align-self: center;
 
             &:hover, &:active, &:focus {
-                background: var(--pure-white);
+                background: var(--color-white);
                 color: var(--primary-color) !important;
             }
         }

package/src/assets/lists-of-data/dial-codes.json

@@ -0,0 +1,82 @@
+[
+  { "text": "+1 (USA/CAN)", "value": "001" },
+  { "text": "+7 (RUS/KAZ)", "value": "007" },
+  { "text": "+20 (EGY)", "value": "0020" },
+  { "text": "+27 (ZAF)", "value": "0027" },
+  { "text": "+30 (GRC)", "value": "0030" },
+  { "text": "+31 (NLD)", "value": "0031" },
+  { "text": "+32 (BEL)", "value": "0032" },
+  { "text": "+33 (FRA)", "value": "0033" },
+  { "text": "+34 (ESP)", "value": "0034" },
+  { "text": "+36 (HUN)", "value": "0036" },
+  { "text": "+39 (ITA)", "value": "0039" },
+  { "text": "+40 (ROU)", "value": "0040" },
+  { "text": "+41 (CHE)", "value": "0041" },
+  { "text": "+43 (AUT)", "value": "0043" },
+  { "text": "+44 (GBR)", "value": "0044" },
+  { "text": "+45 (DNK)", "value": "0045" },
+  { "text": "+46 (SWE)", "value": "0046" },
+  { "text": "+47 (NOR)", "value": "0047" },
+  { "text": "+48 (POL)", "value": "0048" },
+  { "text": "+49 (GER)", "value": "0049" },
+  { "text": "+51 (PER)", "value": "0051" },
+  { "text": "+52 (MEX)", "value": "0052" },
+  { "text": "+53 (CUB)", "value": "0053" },
+  { "text": "+54 (ARG)", "value": "0054" },
+  { "text": "+55 (BRA)", "value": "0055" },
+  { "text": "+56 (CHL)", "value": "0056" },
+  { "text": "+57 (COL)", "value": "0057" },
+  { "text": "+58 (VEN)", "value": "0058" },
+  { "text": "+60 (MYS)", "value": "0060" },
+  { "text": "+61 (AUS)", "value": "0061" },
+  { "text": "+62 (IDN)", "value": "0062" },
+  { "text": "+63 (PHL)", "value": "0063" },
+  { "text": "+64 (NZL)", "value": "0064" },
+  { "text": "+65 (SGP)", "value": "0065" },
+  { "text": "+66 (THA)", "value": "0066" },
+  { "text": "+81 (JPN)", "value": "0081" },
+  { "text": "+82 (KOR)", "value": "0082" },
+  { "text": "+84 (VNM)", "value": "0084" },
+  { "text": "+86 (CHN)", "value": "0086" },
+  { "text": "+90 (TUR)", "value": "0090" },
+  { "text": "+91 (IND)", "value": "0091" },
+  { "text": "+92 (PAK)", "value": "0092" },
+  { "text": "+93 (AFG)", "value": "0093" },
+  { "text": "+94 (LKA)", "value": "0094" },
+  { "text": "+95 (MMR)", "value": "0095" },
+  { "text": "+98 (IRN)", "value": "0098" },
+  { "text": "+211 (SSD)", "value": "0211" },
+  { "text": "+212 (MAR)", "value": "0212" },
+  { "text": "+213 (DZA)", "value": "0213" },
+  { "text": "+216 (TUN)", "value": "0216" },
+  { "text": "+218 (LBY)", "value": "0218" },
+  { "text": "+220 (GMB)", "value": "0220" },
+  { "text": "+221 (SEN)", "value": "0221" },
+  { "text": "+222 (MRT)", "value": "0222" },
+  { "text": "+223 (MLI)", "value": "0223" },
+  { "text": "+224 (GIN)", "value": "0224" },
+  { "text": "+225 (CIV)", "value": "0225" },
+  { "text": "+226 (BFA)", "value": "0226" },
+  { "text": "+227 (NER)", "value": "0227" },
+  { "text": "+228 (TGO)", "value": "0228" },
+  { "text": "+229 (BEN)", "value": "0229" },
+  { "text": "+230 (MUS)", "value": "0230" },
+  { "text": "+231 (LBR)", "value": "0231" },
+  { "text": "+232 (SLE)", "value": "0232" },
+  { "text": "+233 (GHA)", "value": "0233" },
+  { "text": "+234 (NGA)", "value": "0234" },
+  { "text": "+235 (TCD)", "value": "0235" },
+  { "text": "+236 (CAF)", "value": "0236" },
+  { "text": "+237 (CMR)", "value": "0237" },
+  { "text": "+238 (CPV)", "value": "0238" },
+  { "text": "+239 (STP)", "value": "0239" },
+  { "text": "+240 (GNQ)", "value": "0240" },
+  { "text": "+241 (GAB)", "value": "0241" },
+  { "text": "+242 (COG)", "value": "0242" },
+  { "text": "+243 (COD)", "value": "0243" },
+  { "text": "+244 (AGO)", "value": "0244" },
+  { "text": "+245 (GNB)", "value": "0245" },
+  { "text": "+246 (IOT)", "value": "0246" },
+  { "text": "+248 (SYC)", "value": "0248" },
+  { "text": "+249 (SDN)", "value": "0249" }
+]

package/src/assets/lists-of-data/us-cities.json

@@ -0,0 +1,19 @@
+[
+  { "text": "Atlanta", "value": "atl" },
+  { "text": "Boston", "value": "bos" },
+  { "text": "Chicago", "value": "chi" },
+  { "text": "Dallas", "value": "dal" },
+  { "text": "Denver", "value": "den" },
+  { "text": "Houston", "value": "hou" },
+  { "text": "Las Vegas", "value": "vegas" },
+  { "text": "Los Angeles", "value": "la" },
+  { "text": "Miami", "value": "mia" },
+  { "text": "New Orleans", "value": "nola" },
+  { "text": "New York City", "value": "nyc" },
+  { "text": "Philadelphia", "value": "philly" },
+  { "text": "Phoenix", "value": "phx" },
+  { "text": "San Antonio", "value": "satx" },
+  { "text": "San Francisco", "value": "sf" },
+  { "text": "Seattle", "value": "sea" },
+  { "text": "Washington, D.C.", "value": "dc" }
+]

package/src/components/CmdBox.vue

@@ -606,7 +606,7 @@ export default {
             border-radius: var(--box-border-radius);
 
             &:hover, &:active, &:focus {
-                background: var(--pure-white);
+                background: var(--color-white);
 
                 * {
                     color: var(--hyperlink-color);
@@ -757,7 +757,7 @@ export default {
 
                         &:hover, &:active, &:focus {
                             background: var(--primary-color);
-                            color: var(--pure-white);
+                            color: var(--color-white);
                         }
                     }
 
@@ -804,7 +804,7 @@ export default {
                 left: -25%;
                 background: var(--error-color);
                 font-weight: bold;
-                color: var(--pure-white);
+                color: var(--color-white);
                 text-transform: uppercase;
                 text-align: center;
             }
@@ -894,7 +894,7 @@ export default {
                 padding: calc(var(--default-padding) * 3);
                 border-radius: var(--full-circle);
                 background: var(--box-header-background);
-                color: var(--pure-white);
+                color: var(--color-white);
 
                 & + p, & + figcaption {
                     margin: 0 auto;
@@ -977,10 +977,10 @@ export default {
                         &:hover, &:active, &:focus {
                             a {
                                 background: var(--primary-color);
-                                color: var(--pure-white);
+                                color: var(--color-white);
 
                                 span, [class*="icon-"] {
-                                    color: var(--pure-white);
+                                    color: var(--color-white);
                                 }
                             }
                         }

package/src/components/CmdCookieDisclaimer.vue

@@ -327,7 +327,7 @@ export default {
             }
 
             &:has(input:checked) {
-                background: var(--pure-white);
+                background: var(--color-white);
 
                 span[class*="icon-"] {
                     color: var(--hyperlink-color);
@@ -358,24 +358,24 @@ export default {
                 background: var(--primary-color);
 
                 label .label-text span, span[class*="icon-"] {
-                    color: var(--pure-white) !important;
+                    color: var(--color-white) !important;
                 }
             }
 
             span[class*="icon-"] {
-                color: var(--pure-white);
+                color: var(--color-white);
             }
 
             label {
                 padding: calc(var(--default-padding) / 2) var(--default-padding);
 
                 .label-text span {
-                    color: var(--pure-white); /* required to set label-text in header to white */
+                    color: var(--color-white); /* required to set label-text in header to white */
                 }
 
                 &.disabled {
                     .label-text span {
-                        color: var(--pure-white) !important; /* required to set label-text in header to white */
+                        color: var(--color-white) !important; /* required to set label-text in header to white */
                     }
                 }
 

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 {