comand-component-library 4.1.8 → 4.1.10

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

@@ -15,47 +15,47 @@
 
             <!-- begin button-wrapper -->
             <div
-                v-if="(fancyboxOptionsProperties.printButtons?.color || fancyboxOptionsProperties.printButtons?.grayscale) || fancyboxOptionsProperties.closeIcon"
+                v-if="(fancyBoxOptionsProperties.printButtons?.color || fancyBoxOptionsProperties.printButtons?.grayscale) || fancyBoxOptionsProperties.closeIcon"
                 class="button-wrapper no-flex"
             >  <!-- begin print buttons -->
-                <a v-if="showPrintButtons && fancyboxOptionsProperties.printButtons?.color"
+                <a v-if="showPrintButtons && fancyBoxOptionsProperties.printButtons?.color"
                    href="#"
                    class="button print-color"
-                   :title="fancyboxOptionsProperties.printButtons.color?.tooltip"
-                   @click.prevent="printInGrayscale = false">
+                   :title="fancyBoxOptionsProperties.printButtons.color?.tooltip"
+                   @click.prevent="printPage('color')">
                     <!-- begin CmdIcon -->
                     <CmdIcon
-                        :iconClass="fancyboxOptionsProperties.printButtons.color?.iconClass"
-                        :type="fancyboxOptionsProperties.printButtons.color?.iconType"
+                        :iconClass="fancyBoxOptionsProperties.printButtons.color?.iconClass"
+                        :type="fancyBoxOptionsProperties.printButtons.color?.iconType"
                     />
                     <!-- end CmdIcon -->
                 </a>
-                <a v-if="showPrintButtons && fancyboxOptionsProperties.printButtons?.grayscale"
+                <a v-if="showPrintButtons && fancyBoxOptionsProperties.printButtons?.grayscale"
                    href="#"
                    class="button print-grayscale"
-                   :title="fancyboxOptionsProperties.printButtons.grayscale?.tooltip"
-                   @click.prevent="printInGrayscale = true">
+                   :title="fancyBoxOptionsProperties.printButtons.grayscale?.tooltip"
+                   @click.prevent="printPage('grayscale')">
                     <!-- begin CmdIcon -->
                     <CmdIcon
-                        :iconClass="fancyboxOptionsProperties.printButtons.grayscale?.iconClass"
-                        :type="fancyboxOptionsProperties.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="fancyboxOptionsProperties.closeIcon"
+                <a v-if="fancyBoxOptionsProperties.closeIcon"
                    href="#"
                    class="button"
                    id="close-dialog"
-                   :title="fancyboxOptionsProperties.closeIcon.tooltip"
+                   :title="fancyBoxOptionsProperties.closeIcon.tooltip"
                    ref="close-dialog"
                    @click.prevent="close">
                     <!-- begin CmdIcon -->
                     <CmdIcon
-                        :iconClass="fancyboxOptionsProperties.closeIcon.iconClass"
-                        :type="fancyboxOptionsProperties.closeIcon.iconType"
+                        :iconClass="fancyBoxOptionsProperties.closeIcon.iconClass"
+                        :type="fancyBoxOptionsProperties.closeIcon.iconType"
                     />
                     <!-- end CmdIcon -->
                 </a>
@@ -93,34 +93,34 @@
             </div>
         </div>
 
-        <footer v-if="showSubmitButtons && fancyboxOptionsProperties.submitButtons" class="flex-container no-flex">
+        <footer v-if="showSubmitButtons && fancyBoxOptionsProperties.submitButtons" class="flex-container no-flex">
             <!-- begin cancel-button -->
             <button
-                v-if="fancyboxOptionsProperties.submitButtons?.cancel"
+                v-if="fancyBoxOptionsProperties.submitButtons?.cancel"
                 @click="cancel"
-                :title="fancyboxOptionsProperties.submitButtons.cancel?.tooltip">
+                :title="fancyBoxOptionsProperties.submitButtons.cancel?.tooltip">
                 <CmdIcon
-                    v-if="fancyboxOptionsProperties.submitButtons.cancel?.iconClass"
-                    :iconClass="fancyboxOptionsProperties.submitButtons.cancel?.iconClass"
-                    :type="fancyboxOptionsProperties.submitButtons.cancel?.iconType"
+                    v-if="fancyBoxOptionsProperties.submitButtons.cancel?.iconClass"
+                    :iconClass="fancyBoxOptionsProperties.submitButtons.cancel?.iconClass"
+                    :type="fancyBoxOptionsProperties.submitButtons.cancel?.iconType"
                 />
                 <span
-                    v-if="fancyboxOptionsProperties.submitButtons.cancel?.buttonText">{{ fancyboxOptionsProperties.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="fancyboxOptionsProperties.submitButtons?.confirm"
+                v-if="fancyBoxOptionsProperties.submitButtons?.confirm"
                 @click="confirm"
-                :title="fancyboxOptionsProperties.submitButtons.cancel?.tooltip">
+                :title="fancyBoxOptionsProperties.submitButtons.cancel?.tooltip">
                 <CmdIcon
-                    v-if="fancyboxOptionsProperties.submitButtons.confirm?.iconClass"
-                    :iconClass="fancyboxOptionsProperties.submitButtons.confirm?.iconClass"
-                    :type="fancyboxOptionsProperties.submitButtons.confirm?.iconType"
+                    v-if="fancyBoxOptionsProperties.submitButtons.confirm?.iconClass"
+                    :iconClass="fancyBoxOptionsProperties.submitButtons.confirm?.iconClass"
+                    :type="fancyBoxOptionsProperties.submitButtons.confirm?.iconType"
                 />
                 <span
-                    v-if="fancyboxOptionsProperties.submitButtons.confirm?.buttonText">{{ fancyboxOptionsProperties.submitButtons.confirm?.buttonText }}</span>
+                    v-if="fancyBoxOptionsProperties.submitButtons.confirm?.buttonText">{{ fancyBoxOptionsProperties.submitButtons.confirm?.buttonText }}</span>
             </button>
             <!-- end confirm-button -->
         </footer>
@@ -197,7 +197,7 @@ const FancyBox = defineComponent({
         /**
          * options to show at top (closeIcon, printButtons)
          */
-        fancyboxOptions: {
+        fancyBoxOptions: {
             type: Object,
             required: false
         },
@@ -291,26 +291,26 @@ const FancyBox = defineComponent({
         }
     },
     computed: {
-        fancyboxOptionsProperties() {
+        fancyBoxOptionsProperties() {
             return {
                 closeIcon: {
                     iconClass: "icon-cancel",
                     iconType: "auto",
                     tooltip: "Close",
-                    ...this.fancyboxOptions?.closeIcon
+                    ...this.fancyBoxOptions?.closeIcon
                 },
                 printButtons: {
                     color: {
                         iconClass: "icon-print",
                         iconType: "auto",
                         tooltip: "print in color",
-                        ...this.fancyboxOptions?.printButtons?.color
+                        ...this.fancyBoxOptions?.printButtons?.color
                     },
                     grayscale: {
                         iconClass: "icon-print",
                         iconType: "auto",
                         tooltip: "print in grayscale",
-                        ...this.fancyboxOptions?.printButtons?.grayscale
+                        ...this.fancyBoxOptions?.printButtons?.grayscale
                     }
                 },
                 submitButtons: {
@@ -319,7 +319,7 @@ const FancyBox = defineComponent({
                         iconType: "auto",
                         tooltip: "Cancel",
                         buttonText: "Cancel",
-                        ...this.fancyboxOptions?.submitButtons?.cancel
+                        ...this.fancyBoxOptions?.submitButtons?.cancel
                     },
                     confirm: {
                         iconClass: "icon-check",
@@ -327,7 +327,7 @@ const FancyBox = defineComponent({
                         buttonText: "Confirm",
                         tooltip: "Confirm",
                         buttonType: "primary",
-                        ...this.fancyboxOptions?.submitButtons?.confirm
+                        ...this.fancyBoxOptions?.submitButtons?.confirm
                     }
                 }
             }
@@ -355,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()

package/src/components/CmdForm.vue

@@ -1,6 +1,6 @@
 <template>
     <form class="cmd-form" :action="formAction" :data-use-validation="useValidation" @submit="onSubmit"
-          :class="{error: errorOccurred}" :novalidate="novalidate">
+          :class="{error: errorOccurred}" :novalidate="novalidate" :method="formMethod">
         <template v-if="useFieldset">
             <fieldset class="flex-container">
                 <legend :class="{hidden : !legend.show, 'align-left': legend.align === 'left'}">{{
@@ -89,6 +89,16 @@ export default {
             type: String,
             required: false
         },
+        /**
+         * define method to send form
+         */
+        formMethod: {
+            type: String,
+            default: "POST",
+            validator(value) {
+                return value === "POST" || value === "GET"
+            }
+        },
         /**
          * legend for form
          *

package/src/components/CmdFormElement.vue

@@ -725,13 +725,13 @@ export default {
 
             // set default-tooltip if customTooltip is not set
             if (this.validationStatus === 'error') {
-                return this.getMessage("cmdformelement.validation_tooltip.an_error_occurred")
+                return this.getMessage("form_element.validation_tooltip.an_error_occurred")
             } else if (this.validationStatus === 'success') {
-                return this.getMessage("cmdformelement.validation_tooltip.information_is_filled_correctly")
+                return this.getMessage("form_element.validation_tooltip.information_is_filled_correctly")
             } else if (this.capsLockActivated) {
-                return this.getMessage("cmdformelement.validation_tooltip.caps_lock_is_activated")
+                return this.getMessage("form_element.validation_tooltip.caps_lock_is_activated")
             }
-            return this.getMessage("cmdformelement.validation_tooltip.open_field_requirements")
+            return this.getMessage("form_element.validation_tooltip.open_field_requirements")
         },
         autocomplete() {
             if (this.$attrs.type !== 'file') {
@@ -759,7 +759,7 @@ export default {
             // check if field is type "email"
             if (this.$attrs.type === "email") {
                 requirements.push({
-                    message: this.getMessage("cmdformelement.validation_tooltip.is_valid_email"),
+                    message: this.getMessage("form_element.validation_tooltip.is_valid_email"),
                     valid: () => this.$refs.input.checkValidity()
                 })
             }

package/src/components/CmdGoogleMaps.vue

@@ -3,9 +3,9 @@
         <!-- begin CmdSystemMessage -->
         <CmdSystemMessage v-if="!cookiesAccepted" validationStatus="warning">
             <p>
-                {{getMessage("cmdgooglemaps.system_message.accept_terms")}}
+                {{getMessage("google_maps.system_message.accept_terms")}}
             </p>
-            <a href="#" @click.prevent="acceptCookies">{{getMessage("cmdgooglemaps.button_text.accept_required_cookies")}}</a>
+            <a href="#" @click.prevent="acceptCookies">{{getMessage("google_maps.button_text.accept_required_cookies")}}</a>
         </CmdSystemMessage>
         <!-- end CmdSystemMessage -->
 

package/src/components/CmdImageGallery.vue

@@ -14,7 +14,7 @@
                :key="index"
                href="#"
                @click.prevent="showFancyBox(index)"
-               :title="getMessage('cmdimagegallery.tooltip.open_large_image')">
+               :title="getMessage('image_gallery.tooltip.open_large_image')">
                 <CmdImage :image="image.image" :figcaption="figcaption(image)"/>
             </a>
             <!-- end images linked to fancybox -->