comand-component-library 4.1.7 → 4.1.9

package/src/components/CmdCookieDisclaimer.vue

@@ -7,7 +7,7 @@
             </template>
             <!-- end slot -->
 
-            <template v-else>
+            <div v-else>
                 <!-- begin CmdHeadline -->
                 <CmdHeadline
                     v-if="cmdHeadlineCookieDisclaimer?.show && cmdHeadlineCookieDisclaimer?.headlineText && cmdHeadlineCookieDisclaimer?.headlineLevel"
@@ -28,13 +28,9 @@
                         />
                         <!-- end CmdHeadline -->
 
-                        <!-- begin CmdBox -->
-                        <CmdBox v-for="(cookie, index) in cookieOptions.required.cookies || []"
-                                :useSlots="['header', 'body']"
-                                :collapsible="cmdBoxRequiredCookies?.collapsible"
-                                :key="index"
-                        >
-                            <template v-slot:header>
+                        <div v-for="(cookie, index) in cookieOptions.required.cookies || []"
+                             :key="index" class="collapsible-box">
+                            <header>
                                 <!-- begin CmdFormElement -->
                                 <CmdFormElement
                                     element="input"
@@ -45,11 +41,17 @@
                                     :disabled="cookie.disabled"
                                     :id="cookie.id"
                                     :toggleSwitch="true"
-                                    :title="getMessage('cmdcookiedisclaimer.title.cookie_cannot_be_disabled')"
+                                    :title="getMessage('cookie_disclaimer.title.cookie_cannot_be_disabled')"
                                 />
                                 <!-- end CmdFormElement -->
-                            </template>
-                            <template v-slot:body>
+
+                                <!-- begin icon to toggle box-body -->
+                                <a href="#" @click.prevent="toggleBoxBody(cookie.id)" :title="getMessage('cookie_disclaimer.title.toggle_box_content')">
+                                    <span :class="boxIsOpen(cookie.id) ? iconClassBoxExpanded : iconClassBoxCollapsed"></span>
+                                </a>
+                                <!-- end icon to toggle box-body -->
+                            </header>
+                            <div v-show="boxIsOpen(cookie.id)" class="collapsible-box-body">
                                 <p v-if="cookie.description">{{ cookie.description }}</p>
                                 <p v-if="cookie.linkDataPrivacy">
                                     {{ cookie.linkDataPrivacy.label }}
@@ -60,8 +62,8 @@
                                     </a>
                                 </p>
                                 <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
-                            </template>
-                        </CmdBox>
+                            </div>
+                        </div>
                         <!-- end CmdBox -->
                     </div>
                     <!-- end required cookies -->
@@ -78,13 +80,9 @@
                     "/>
                         <!-- end CmdHeadline -->
 
-                        <!-- begin CmdBox -->
-                        <CmdBox v-for="(cookie, index) in cookieOptions.optional.cookies || []"
-                                :useSlots="['header', 'body']"
-                                :collapsible="cmdBoxOptionalCookies?.collapsible"
-                                :key="index"
-                        >
-                            <template v-slot:header>
+                        <div v-for="(cookie, index) in cookieOptions.optional.cookies || []"
+                             :key="index" class="collapsible-box">
+                            <header>
                                 <!-- begin CmdFormElement -->
                                 <CmdFormElement
                                     element="input"
@@ -95,11 +93,17 @@
                                     :disabled="cookie.disabled"
                                     :id="cookie.id"
                                     :toggleSwitch="true"
-                                    :title="getMessage('cmdcookiedisclaimer.title.toggle_to_accept_cookie')"
+                                    :title="getMessage('cookie_disclaimer.title.toggle_to_accept_cookie')"
                                 />
                                 <!-- end CmdFormElement -->
-                            </template>
-                            <template v-slot:body>
+
+                                <!-- begin icon to toggle box-body -->
+                                <a href="#" @click.prevent="toggleBoxBody(cookie.id)" :title="getMessage('cookie_disclaimer.title.toggle_box_content')">
+                                    <span :class="boxIsOpen(cookie.id) ? iconClassBoxExpanded : iconClassBoxCollapsed"></span>
+                                </a>
+                                <!-- end icon to toggle box-body -->
+                            </header>
+                            <div v-show="boxIsOpen(cookie.id)" class="collapsible-box-body">
                                 <p v-if="cookie.description">{{ cookie.description }}</p>
                                 <p v-if="cookie.linkDataPrivacy">
                                     {{ cookie.linkDataPrivacy.label }}
@@ -110,17 +114,16 @@
                                     </a>
                                 </p>
                                 <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
-                            </template>
-                        </CmdBox>
-                        <!-- end CmdBox -->
+                            </div>
+                        </div>
                     </div>
                     <!-- end optional cookies -->
                 </slot>
                 <!-- end slot for cookie-options -->
 
-                <!-- begin slot for privacy-text -->
-                <slot name="privacy-text"></slot>
-                <!-- end slot for privacy-text -->
+                <!-- begin privacy-text -->
+                <div v-if="privacyText" class="privacy-text" v-html="privacyText"></div>
+                <!-- end privacy-text-->
 
                 <!-- begin button-wrapper for 'accept'-buttons -->
                 <div class="button-wrapper align-center">
@@ -132,7 +135,7 @@
                     </button>
                 </div>
                 <!-- end button-wrapper for 'accept'-buttons -->
-            </template>
+            </div>
         </div>
     </transition>
 </template>
@@ -148,10 +151,25 @@ export default {
     data() {
         return {
             showCookieDisclaimer: true,
-            dataPrivacyContent: ""
+            dataPrivacyContent: "",
+            openBoxes: []
         }
     },
     props: {
+        /**
+         * define icon-class for collapsed box
+         */
+        iconClassBoxCollapsed: {
+            type: String,
+            default: "icon-chevron-one-stripe-down"
+        },
+        /**
+         * define icon-class for expanded box
+         */
+        iconClassBoxExpanded: {
+            type: String,
+            default: "icon-chevron-one-stripe-up"
+        },
         /**
          * activate if you want to use slot instead for given structure
          */
@@ -214,6 +232,13 @@ export default {
             type: Object,
             required: false
         },
+        /**
+         * optional privacy-text shown at bottom of cookie-disclaimer
+         */
+        privacyText: {
+            type: String,
+            required: false
+        },
         /**
          * label for button to accepting all cookies
          */
@@ -247,6 +272,22 @@ export default {
         }
     },
     methods: {
+        boxIsOpen(cookieId) {
+            console.log("boxOpen", this.openBoxes.includes(cookieId))
+            console.log("cookieId", cookieId)
+            return this.openBoxes.includes(cookieId)
+        },
+        toggleBoxBody(cookieId) {
+            const index = this.openBoxes.indexOf(cookieId);
+
+            if (index === -1) {
+                // cookieId does not exist in the array, so add it
+                this.openBoxes.push(cookieId);
+            } else {
+                // cookieId already exists in the array, so remove it
+                this.openBoxes.splice(index, 1);
+            }
+        },
         acceptCurrentCookies() {
             this.$emit("close-cookie-disclaimer", this.acceptedCookies)
         },
@@ -298,49 +339,103 @@ export default {
     bottom: 0;
     top: auto;
 
-    .cmd-box {
-        .box-header {
-            padding: 0;
-            padding-right: var(--default-padding);
+    .collapsible-box {
+        border-radius: var(--default-border-radius);
+
+        header {
+            display: flex;
+            align-items: center;
+            border: var(--primary-border);
             justify-content: unset; /* overwrite setting for collapsible boxes */
+            background: var(--primary-color);
+            border-top-left-radius: inherit;
+            border-top-right-radius: inherit;
+
+            &:has(input:checked) {
+                background: var(--pure-white);
+
+                span[class*="icon-"] {
+                    color: var(--hyperlink-color);
+                }
+
+                label {
+                    .label-text span {
+                        color: var(--hyperlink-color); /* required to set label-text in header to white */
+                    }
+                }
+            }
+
+            &:has(input:disabled) {
+                background: var(--disabled-background);
+
+                span[class*="icon-"] {
+                    color: var(--hyperlink-color);
+                }
+
+                label {
+                    .label-text span {
+                        color: var(--disabled-color) !important; /* required to set label-text in header to white */
+                    }
+                }
+            }
+
+            &:has(a:is(:hover, :active, :focus)) {
+                background: var(--primary-color);
+
+                label .label-text span, span[class*="icon-"] {
+                    color: var(--pure-white) !important;
+                }
+            }
+
+            span[class*="icon-"] {
+                color: var(--pure-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 */
+                }
+
                 &.disabled {
                     .label-text span {
                         color: var(--pure-white) !important; /* required to set label-text in header to white */
                     }
                 }
 
-                & + .toggle-icon {
-                    padding: calc(var(--default-padding) / 2) var(--default-padding);
-                    width: 100%;
-                    justify-content: flex-end;
-                    text-align: right;
+                &:hover, &:active, &:focus {
+                    cursor: pointer;
                 }
-            }
-
-            &:hover, &:active, &:focus {
-                background: var(--hyperlink-color);
 
-                label.disabled .label-text span {
-                    color: var(--disabled-color) !important; /* required to set label-text on hover back to disabled-color */
+                input {
+                    &:hover, &:active, &:focus {
+                        cursor: pointer;
+                    }
                 }
             }
-        }
 
-        .box-body {
-            padding: var(--default-padding);
+            a {
+                text-decoration: none;
+                flex: 1;
+                display: flex;
+                justify-content: flex-end;
+                padding: var(--default-padding);
+            }
         }
-    }
 
-    h1 {
-        text-align: center;
-    }
+        .collapsible-box-body {
+            padding: var(--default-padding);
+            border: var(--default-border);
+            border-top: 0;
+            background: var(--box-background);
+            border-bottom-left-radius: inherit;
+            border-bottom-right-radius: inherit;
 
-    .button {
-        margin: 0 auto;
+            p:last-child {
+                margin: 0;
+            }
+        }
     }
 
     > p {
@@ -348,10 +443,6 @@ export default {
         color: var(--color-scheme-text-color); /* must be assigned again, because content is placed by slot */
     }
 
-    #form-cookies {
-        margin-bottom: var(--default-margin);
-    }
-
     p {
         a {
             text-decoration: underline;
@@ -361,6 +452,10 @@ export default {
             }
         }
     }
+
+    .privacy-text, .button-wrapper {
+        margin-top: var(--default-gap);
+    }
 }
 
 /* end cmd-cookie-disclaimer ------------------------------------------------------------------------------------------ */

package/src/components/CmdFakeSelect.vue

@@ -382,7 +382,7 @@ export default {
                 if (this.modelValue.length === 1) {
                     return this.selectData.find(option => String(option.value) === String(this.modelValue[0]))?.text
                 } else if (this.modelValue.length > 1) {
-                    return this.getMessage("cmdfakeselect.option.options_selected", this.modelValue.length)
+                    return this.getMessage("fake_select.option.options_selected", this.modelValue.length)
                 }
             } else if (this.selectData?.length) {
                 // return text of first option nothing is selected (and type !== checkboxOptions && type !== content)
@@ -421,10 +421,10 @@ export default {
         selectAllOptionsText() {
             if (Array.isArray(this.modelValue) && this.modelValue.length === this.selectData.length) {
                 this.allOptionsSelected = true
-                return this.getMessage("cmdfakeselect.linktext.deselect_all_options")
+                return this.getMessage("fake_select.linktext.deselect_all_options")
             }
             this.allOptionsSelected = false
-            return this.getMessage("cmdfakeselect.linktext.select_all_options")
+            return this.getMessage("fake_select.linktext.select_all_options")
         }
     },
     methods: {
@@ -497,7 +497,7 @@ export default {
         },
         // overwrite requirement-message form fieldValidation.js
         getRequirementMessage() {
-            return this.getMessage("cmdfakeselect.headline.an_option_is_selected")
+            return this.getMessage("fake_select.headline.an_option_is_selected")
         }
     },
     watch: {

package/src/components/CmdFancyBox.vue

@@ -10,53 +10,52 @@
             <CmdHeadline
                 v-if="cmdHeadline?.headlineText"
                 v-bind="cmdHeadline"
-                :id="htmlId"
             />
             <!-- end CmdHeadline -->
 
             <!-- begin button-wrapper -->
             <div
-                v-if="(fancyboxOptions.printButtons?.color || fancyboxOptions.printButtons?.grayscale) || fancyboxOptions.closeIcon"
+                v-if="(fancyBoxOptionsProperties.printButtons?.color || fancyBoxOptionsProperties.printButtons?.grayscale) || fancyBoxOptionsProperties.closeIcon"
                 class="button-wrapper no-flex"
             >  <!-- begin print buttons -->
-                <a v-if="showPrintButtons && fancyboxOptions.printButtons?.color"
+                <a v-if="showPrintButtons && fancyBoxOptionsProperties.printButtons?.color"
                    href="#"
                    class="button print-color"
-                   :title="fancyboxOptions.printButtons.color?.tooltip"
-                   @click.prevent="printInGrayscale = false">
+                   :title="fancyBoxOptionsProperties.printButtons.color?.tooltip"
+                   @click.prevent="printPage('color')">
                     <!-- begin CmdIcon -->
                     <CmdIcon
-                        :iconClass="fancyboxOptions.printButtons.color?.iconClass"
-                        :type="fancyboxOptions.printButtons.color?.iconType"
+                        :iconClass="fancyBoxOptionsProperties.printButtons.color?.iconClass"
+                        :type="fancyBoxOptionsProperties.printButtons.color?.iconType"
                     />
                     <!-- end CmdIcon -->
                 </a>
-                <a v-if="showPrintButtons && fancyboxOptions.printButtons?.grayscale"
+                <a v-if="showPrintButtons && fancyBoxOptionsProperties.printButtons?.grayscale"
                    href="#"
                    class="button print-grayscale"
-                   :title="fancyboxOptions.printButtons.grayscale?.tooltip"
-                   @click.prevent="printInGrayscale = true">
+                   :title="fancyBoxOptionsProperties.printButtons.grayscale?.tooltip"
+                   @click.prevent="printPage('grayscale')">
                     <!-- begin CmdIcon -->
                     <CmdIcon
-                        :iconClass="fancyboxOptions.printButtons.grayscale?.iconClass"
-                        :type="fancyboxOptions.printButtons.grayscale?.iconType"
+                        :iconClass="fancyBoxOptionsProperties.printButtons.grayscale?.iconClass"
+                        :type="fancyBoxOptionsProperties.printButtons.grayscale?.iconType"
                     />
                     <!-- end CmdIcon -->
                 </a>
                 <!-- end print buttons -->
 
                 <!-- begin close-icon -->
-                <a v-if="fancyboxOptions.closeIcon"
+                <a v-if="fancyBoxOptionsProperties.closeIcon"
                    href="#"
                    class="button"
                    id="close-dialog"
-                   :title="fancyboxOptions.closeIcon.tooltip"
+                   :title="fancyBoxOptionsProperties.closeIcon.tooltip"
                    ref="close-dialog"
                    @click.prevent="close">
                     <!-- begin CmdIcon -->
                     <CmdIcon
-                        :iconClass="fancyboxOptions.closeIcon.iconClass"
-                        :type="fancyboxOptions.closeIcon.iconType"
+                        :iconClass="fancyBoxOptionsProperties.closeIcon.iconClass"
+                        :type="fancyBoxOptionsProperties.closeIcon.iconType"
                     />
                     <!-- end CmdIcon -->
                 </a>
@@ -94,34 +93,34 @@
             </div>
         </div>
 
-        <footer v-if="showSubmitButtons && fancyboxOptions.submitButtons" class="flex-container no-flex">
+        <footer v-if="showSubmitButtons && fancyBoxOptionsProperties.submitButtons" class="flex-container no-flex">
             <!-- begin cancel-button -->
             <button
-                v-if="fancyboxOptions.submitButtons?.cancel"
+                v-if="fancyBoxOptionsProperties.submitButtons?.cancel"
                 @click="cancel"
-                :title="fancyboxOptions.submitButtons.cancel?.tooltip">
+                :title="fancyBoxOptionsProperties.submitButtons.cancel?.tooltip">
                 <CmdIcon
-                    v-if="fancyboxOptions.submitButtons.cancel?.iconClass"
-                    :iconClass="fancyboxOptions.submitButtons.cancel?.iconClass"
-                    :type="fancyboxOptions.submitButtons.cancel?.iconType"
+                    v-if="fancyBoxOptionsProperties.submitButtons.cancel?.iconClass"
+                    :iconClass="fancyBoxOptionsProperties.submitButtons.cancel?.iconClass"
+                    :type="fancyBoxOptionsProperties.submitButtons.cancel?.iconType"
                 />
                 <span
-                    v-if="fancyboxOptions.submitButtons.cancel?.buttonText">{{ fancyboxOptions.submitButtons.cancel?.buttonText }}</span>
+                    v-if="fancyBoxOptionsProperties.submitButtons.cancel?.buttonText">{{ fancyBoxOptionsProperties.submitButtons.cancel?.buttonText }}</span>
             </button>
             <!-- end cancel-button -->
 
             <!-- begin confirm-button -->
             <button
-                v-if="fancyboxOptions.submitButtons?.confirm"
+                v-if="fancyBoxOptionsProperties.submitButtons?.confirm"
                 @click="confirm"
-                :title="fancyboxOptions.submitButtons.cancel?.tooltip">
+                :title="fancyBoxOptionsProperties.submitButtons.cancel?.tooltip">
                 <CmdIcon
-                    v-if="fancyboxOptions.submitButtons.confirm?.iconClass"
-                    :iconClass="fancyboxOptions.submitButtons.confirm?.iconClass"
-                    :type="fancyboxOptions.submitButtons.confirm?.iconType"
+                    v-if="fancyBoxOptionsProperties.submitButtons.confirm?.iconClass"
+                    :iconClass="fancyBoxOptionsProperties.submitButtons.confirm?.iconClass"
+                    :type="fancyBoxOptionsProperties.submitButtons.confirm?.iconType"
                 />
                 <span
-                    v-if="fancyboxOptions.submitButtons.confirm?.buttonText">{{ fancyboxOptions.submitButtons.confirm?.buttonText }}</span>
+                    v-if="fancyBoxOptionsProperties.submitButtons.confirm?.buttonText">{{ fancyBoxOptionsProperties.submitButtons.confirm?.buttonText }}</span>
             </button>
             <!-- end confirm-button -->
         </footer>
@@ -141,9 +140,6 @@
 <script>
 import {defineComponent, createApp} from "vue"
 
-// import mixins
-import Identifier from "../mixins/Identifier"
-
 const openFancyBox = (config) => {
     const node = document.createElement("div");
     document.querySelector("body").appendChild(node);
@@ -156,9 +152,6 @@ const openFancyBox = (config) => {
 
 const FancyBox = defineComponent({
     name: "CmdFancyBox",
-    mixins: [
-        Identifier
-    ],
     emits: ['cancel', 'confirm'],
     data() {
         return {
@@ -204,44 +197,9 @@ const FancyBox = defineComponent({
         /**
          * options to show at top (closeIcon, printButtons)
          */
-        fancyboxOptions: {
+        fancyBoxOptions: {
             type: Object,
-            default() {
-                return {
-                    closeIcon: {
-                        iconClass: "icon-cancel",
-                        iconType: "auto",
-                        tooltip: "Close"
-                    },
-                    printButtons: {
-                        color: {
-                            iconClass: "icon-print",
-                            iconType: "auto",
-                            tooltip: "print in color"
-                        },
-                        grayscale: {
-                            iconClass: "icon-print",
-                            iconType: "auto",
-                            tooltip: "print in grayscale"
-                        }
-                    },
-                    submitButtons: {
-                        cancel: {
-                            iconClass: "icon-cancel",
-                            iconType: "auto",
-                            tooltip: "Cancel",
-                            buttonText: "Cancel"
-                        },
-                        confirm: {
-                            iconClass: "icon-check",
-                            iconType: "auto",
-                            buttonText: "Confirm",
-                            tooltip: "Confirm",
-                            buttonType: "primary"
-                        }
-                    }
-                }
-            }
+            required: false
         },
         /**
          * allow closing fancybox by escape-key
@@ -333,6 +291,47 @@ const FancyBox = defineComponent({
         }
     },
     computed: {
+        fancyBoxOptionsProperties() {
+            return {
+                closeIcon: {
+                    iconClass: "icon-cancel",
+                    iconType: "auto",
+                    tooltip: "Close",
+                    ...this.fancyBoxOptions?.closeIcon
+                },
+                printButtons: {
+                    color: {
+                        iconClass: "icon-print",
+                        iconType: "auto",
+                        tooltip: "print in color",
+                        ...this.fancyBoxOptions?.printButtons?.color
+                    },
+                    grayscale: {
+                        iconClass: "icon-print",
+                        iconType: "auto",
+                        tooltip: "print in grayscale",
+                        ...this.fancyBoxOptions?.printButtons?.grayscale
+                    }
+                },
+                submitButtons: {
+                    cancel: {
+                        iconClass: "icon-cancel",
+                        iconType: "auto",
+                        tooltip: "Cancel",
+                        buttonText: "Cancel",
+                        ...this.fancyBoxOptions?.submitButtons?.cancel
+                    },
+                    confirm: {
+                        iconClass: "icon-check",
+                        iconType: "auto",
+                        buttonText: "Confirm",
+                        tooltip: "Confirm",
+                        buttonType: "primary",
+                        ...this.fancyBoxOptions?.submitButtons?.confirm
+                    }
+                }
+            }
+        },
         largeGalleryImage() {
             // change src-key for a single item/image in gallery to fit CmdImage-properties
             const fancyBoxItem = {...this.fancyBoxGallery[this.index].image}
@@ -356,6 +355,48 @@ const FancyBox = defineComponent({
         }
     },
     methods: {
+         printDialogContent() {
+             // Open a new window
+             const printWindow = window.open('', '', 'width=1000,height=600');
+
+             const dialogContent = this.elements.map( (element)=> {
+                 return element.outerHTML
+             }).join("")
+
+             let styles = Array.from(document.head.querySelectorAll("style, link[rel='stylesheet']")).map( (element)=> {
+                return element.outerHTML
+            }).join("")
+
+             if(this.printInGrayscale) {
+                 styles += "<style>body { filter: grayscale(1)}</style>"
+             }
+
+             const titleForPrintWindow = document.head.querySelector("title").innerText
+
+             // Write the content to the new window
+             printWindow.document.write(`
+            <html>
+              <head>
+                <title>${titleForPrintWindow}</title>
+                ${styles}
+              </head>
+              <body>
+                ${dialogContent}
+              </body>
+            </html>
+          `);
+
+             // Trigger print
+             printWindow.document.close();
+
+             // Optionally, close the print window after printing
+             printWindow.print();
+             printWindow.close();
+         },
+        printPage(colorScheme) {
+            this.printInGrayscale = colorScheme === 'grayscale'
+            this.printDialogContent()
+        },
         onDialogCancel(event) {
             if (!this.allowEscapeKey) {
                 event.preventDefault()