comand-component-library 4.3.26 → 4.3.28

package/src/components/CmdCookieDisclaimer.vue

@@ -1,7 +1,7 @@
 <template>
     <transition :name="transition">
         <!-- begin CmdCookieDisclaimer ---------------------------------------------------------------------------------------- -->
-        <div class="cmd-cookie-disclaimer flex-container vertical">
+        <div class="cmd-cookie-disclaimer flex-container flex-direction-column">
             <!-- begin slot -->
             <template v-if="useSlot">
                 <slot></slot>
@@ -20,7 +20,7 @@
                 <!-- begin slot for cookie-options -->
                 <slot name="cookie-options">
                     <!-- begin required cookies -->
-                    <div v-if="cookieOptions?.required" class="flex-container vertical">
+                    <div v-if="cookieOptions?.required" class="flex-container flex-direction-column">
                         <!-- begin CmdHeadline -->
                         <CmdHeadline
                             v-if="defaultCmdBoxRequiredCookies().showHeadline && defaultCmdBoxRequiredCookies().headlineText"
@@ -53,7 +53,7 @@
                                 <!-- 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>
+                                <CmdParagraph v-if="cookie.description" :content="cookie.description"/>
                                 <p v-if="cookie.linkDataPrivacy">
                                     {{ cookie.linkDataPrivacy.label }}
                                     <a @click="openDataPrivacy"
@@ -71,7 +71,7 @@
                     <hr/>
 
                     <!-- begin optional cookies -->
-                    <div v-if="cookieOptions?.optional" class="flex-container vertical">
+                    <div v-if="cookieOptions?.optional" class="flex-container flex-direction-column">
                         <!-- begin CmdHeadline -->
                         <CmdHeadline
                             v-if="defaultCmdBoxOptionalCookies().showHeadline && defaultCmdBoxOptionalCookies().headlineText"
@@ -104,7 +104,7 @@
                                 <!-- 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>
+                                <CmdParagraph v-if="cookie.description" :content="cookie.description "/>
                                 <p v-if="cookie.linkDataPrivacy">
                                     {{ cookie.linkDataPrivacy.label }}
                                     <a @click="openDataPrivacy"

package/src/components/CmdFakeSelect.vue

@@ -19,7 +19,8 @@
         <template v-if="showLabel">
             <!-- begin label -->
             <span class="label-text">
-                <span :id="htmlId">{{ labelText }}<sup v-if="$attrs.required !== undefined" aria-hidden="true">*</sup></span>
+                <span :id="htmlId">{{ labelText }}<sup v-if="$attrs.required !== undefined" aria-hidden="true">*</sup>
+            </span>
 
             <!-- begin status-icon (linked with tooltip) -->
             <button v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
@@ -604,8 +605,6 @@ export default {
     }
 
     a {
-        gap: calc(var(--icon-and-text-gap) / 2) !important;
-
         span {
             text-decoration: none !important;
 
@@ -634,6 +633,7 @@ export default {
                     background: var(--color-scheme-background);
                     color: var(--color-scheme-text-color);
                     border-radius: var(--default-border-radius);
+                    box-shadow: var(--form-input-box-shadow);
 
                     img {
                         flex-shrink: 0;
@@ -655,7 +655,7 @@ export default {
 
                     &:hover, &:active, &:focus {
                         background: var(--color-white);
-                        border-color: var(--primary-color);
+                        border-color: var(--hyperlink-color);
 
                         span, [class*="icon"] {
                             color: var(--hyperlink-color);
@@ -666,19 +666,30 @@ export default {
 
             ul {
                 max-height: v-bind(dropdownMaxHeight);
+                overflow-x: hidden;
                 overflow-y: auto;
             }
         }
 
         &.open {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+
+            > li:first-child {
+                a {
+                    border-bottom-left-radius: 0;
+                    border-bottom-right-radius: 0;
+                }
+            }
+
             ul {
-                border-bottom-left-radius: var(--default-border-radius);
-                border-bottom-right-radius: var(--default-border-radius);
+                border-bottom-left-radius: var(--border-radius-small);
+                border-bottom-right-radius: var(--border-radius-small);
 
                 > li {
                     &:first-child {
                         > a {
-                            border-color: var(--primary-color);
+                            border-color: var(--hyperlink-color);
                             border-bottom-left-radius: 0;
                             border-bottom-right-radius: 0;
                         }
@@ -705,17 +716,15 @@ export default {
         a, a:visited {
             display: flex;
             align-items: center;
+            gap: var(--gap-small);
             width: 100%;
-            padding: var(--form-input-padding);
-            padding-top: calc(var(--default-padding) - .06rem);
-            padding-right: calc(var(--default-padding) / 2);
-            padding-bottom: calc(var(--default-padding) - .06rem);
+            padding: 1rem;
             outline: none;
             border-bottom: var(--default-border);
             text-decoration: none;
 
             &:hover, &:active, &:focus {
-                background: var(--primary-color);
+                background: var(--hyperlink-color);
 
                 span, [class*="icon"] {
                     color: var(--color-white);
@@ -729,9 +738,7 @@ export default {
             }
 
             img {
-                &.flag {
-                    margin: 0 calc(var(--default-margin) / 2) 0 0;
-                }
+                box-shadow: none; 
             }
 
             &.active {
@@ -742,7 +749,7 @@ export default {
                 }
 
                 &:hover, &:active, &:focus {
-                    background: var(--primary-color);
+                    background: var(--hyperlink-color);
 
                     span, [class*="icon"] {
                         color: var(--color-white);
@@ -820,6 +827,9 @@ export default {
                 > a {
                     text-decoration: none !important;
                     border-color: var(--status-color);
+                    padding-top: calc(var(--default-padding) - .06rem);
+                    padding-right: calc(var(--default-padding) / 2);
+                    padding-bottom: calc(var(--default-padding) - .06rem);
 
                     > span, [class*="icon-"] {
                         text-decoration: none !important;
@@ -853,7 +863,7 @@ export default {
     &.color {
         li {
             a {
-                gap: calc(var(--default-gap) / 2);
+                gap: var(--gap-small);
 
                 > span:first-child {
                     width: 1.5rem;

package/src/components/CmdFancyBox.vue

@@ -9,8 +9,8 @@
         <header class="flex-container">
             <!-- begin CmdHeadline -->
             <CmdHeadline
-                v-if="cmdHeadline?.headlineText"
-                v-bind="cmdHeadline"
+                v-if="cmdHeadlineProperties?.show && cmdHeadlineProperties?.headlineText"
+                v-bind="cmdHeadlineProperties"
             />
             <!-- end CmdHeadline -->
 
@@ -19,46 +19,29 @@
                 v-if="(fancyBoxOptionsProperties.printButtons?.color || fancyBoxOptionsProperties.printButtons?.grayscale) || fancyBoxOptionsProperties.closeIcon"
                 class="button-wrapper flex-none"
             >  <!-- begin print buttons -->
-                <a v-if="showPrintButtons && fancyBoxOptionsProperties.printButtons?.color"
-                   href="#"
-                   class="button print-color"
-                   :title="fancyBoxOptionsProperties.printButtons.color?.tooltip"
-                   @click.prevent="printPage('color')">
-                    <!-- begin CmdIcon -->
-                    <CmdIcon
-                        :iconClass="fancyBoxOptionsProperties.printButtons.color?.iconClass"
-                        :type="fancyBoxOptionsProperties.printButtons.color?.iconType"
-                    />
-                    <!-- end CmdIcon -->
-                </a>
-                <a v-if="showPrintButtons && fancyBoxOptionsProperties.printButtons?.grayscale"
-                   href="#"
-                   class="button print-grayscale"
-                   :title="fancyBoxOptionsProperties.printButtons.grayscale?.tooltip"
-                   @click.prevent="printPage('grayscale')">
-                    <!-- begin CmdIcon -->
-                    <CmdIcon
-                        :iconClass="fancyBoxOptionsProperties.printButtons.grayscale?.iconClass"
-                        :type="fancyBoxOptionsProperties.printButtons.grayscale?.iconType"
-                    />
-                    <!-- end CmdIcon -->
-                </a>
+                <CmdLink
+                    v-if="showPrintButtons && fancyBoxOptionsProperties.printButtons?.color"
+                    class="print-color"
+                    v-bind="fancyBoxOptionsProperties.printButtons.color"
+                    @click="printPage('color')"
+                />
+
+                <CmdLink
+                    v-if="showPrintButtons && fancyBoxOptionsProperties.printButtons?.grayscale"
+                    class="print-grayscale"
+                    v-bind="fancyBoxOptionsProperties.printButtons.grayscale"
+                    @click="printPage('grayscale')"
+                />
                 <!-- end print buttons -->
 
                 <!-- begin close-icon -->
-                <a v-if="fancyBoxOptionsProperties.closeIcon?.show"
-                   href="#"
-                   id="close-dialog"
-                   :title="fancyBoxOptionsProperties.closeIcon?.tooltip"
-                   ref="close-dialog"
-                   @click.prevent="close">
-                    <!-- begin CmdIcon -->
-                    <CmdIcon
-                        :iconClass="fancyBoxOptionsProperties.closeIcon?.iconClass"
-                        :type="fancyBoxOptionsProperties.closeIcon?.iconType"
-                    />
-                    <!-- end CmdIcon -->
-                </a>
+                <CmdLink
+                    v-if="fancyBoxOptionsProperties.closeIcon?.show"
+                    id="close-dialog"
+                    ref="close-dialog"
+                    v-bind="fancyBoxOptionsProperties.closeIcon"
+                    @click="close"
+                />
                 <!-- end close-icon -->
             </div>
             <!-- end button-wrapper -->
@@ -94,33 +77,19 @@
         </div>
         <footer v-if="showSubmitButtons && fancyBoxOptionsProperties.submitButtons" class="flex-container flex-items-flex-none">
             <!-- begin cancel-button -->
-            <button
-                v-if="fancyBoxOptionsProperties.submitButtons?.cancel"
-                @click="cancel"
-                :title="fancyBoxOptionsProperties.submitButtons.cancel?.tooltip">
-                <CmdIcon
-                    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>
-            </button>
+            <CmdLink
+                v-if="fancyBoxOptionsProperties.submitButtons?.cancel.show"
+                v-bind="fancyBoxOptionsProperties.submitButtons.cancel"
+                @click="cancel" 
+            />
             <!-- end cancel-button -->
 
             <!-- begin confirm-button -->
-            <button
-                v-if="fancyBoxOptionsProperties.submitButtons?.confirm"
-                @click="confirm"
-                :title="fancyBoxOptionsProperties.submitButtons.cancel?.tooltip">
-                <CmdIcon
-                    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>
-            </button>
+            <CmdLink
+                v-if="fancyBoxOptionsProperties.submitButtons?.confirm.show"
+                v-bind="fancyBoxOptionsProperties.submitButtons.confirm"
+                @click="confirm" 
+            />
             <!-- end confirm-button -->
         </footer>
 
@@ -152,7 +121,7 @@ const openFancyBox = (config) => {
 
 const FancyBox = defineComponent({
     name: "CmdFancyBox",
-    emits: ['cancel', 'confirm'],
+    emits: ["cancel", "confirm", "update:show"],
     data() {
         return {
             fancyBoxContent: null,
@@ -291,43 +260,62 @@ const FancyBox = defineComponent({
         }
     },
     computed: {
+        cmdHeadlineProperties() {
+            return {
+                show: true,
+                headlineLevel: 3,
+                ...this.cmdHeadline
+            }
+        },
         fancyBoxOptionsProperties() {
             return {
                 closeIcon: {
                     show: true,
-                    iconClass: "icon-cancel",
-                    iconType: "auto",
-                    tooltip: "Close",
+                    styleAsButton: true,
+                    icon: {
+                        iconClass: "icon-cancel",
+                        tooltip: "Close dialog"
+                    },
                     ...this.fancyBoxOptions?.closeIcon
                 },
                 printButtons: {
                     color: {
-                        iconClass: "icon-print",
-                        iconType: "auto",
-                        tooltip: "print in color",
+                        styleAsButton: true,
+                        icon: {
+                            iconClass: "icon-print",
+                            tooltip: "Print in color",
+                        },
                         ...this.fancyBoxOptions?.printButtons?.color
                     },
                     grayscale: {
-                        iconClass: "icon-print",
-                        iconType: "auto",
-                        tooltip: "print in grayscale",
+                        styleAsButton: true,
+                        icon: {
+                            iconClass: "icon-print",
+                            tooltip: "Print in grayscale",
+                        },
                         ...this.fancyBoxOptions?.printButtons?.grayscale
                     }
                 },
                 submitButtons: {
                     cancel: {
-                        iconClass: "icon-cancel",
-                        iconType: "auto",
-                        tooltip: "Cancel",
-                        buttonText: "Cancel",
+                        show: true,
+                        linkType: "button",
+                        icon: {
+                            iconClass: "icon-cancel",
+                            tooltip: "Cancel",
+                        },
+                        text: "Confirm",
                         ...this.fancyBoxOptions?.submitButtons?.cancel
                     },
                     confirm: {
-                        iconClass: "icon-check",
-                        iconType: "auto",
-                        buttonText: "Confirm",
-                        tooltip: "Confirm",
-                        buttonType: "primary",
+                        show: true,
+                        linkType: "button",
+                        icon: {
+                            iconClass: "icon-check",
+                            tooltip: "Confirm",
+                        },
+                        text: "Confirm",
+                        highlightLevel: "primary",
                         ...this.fancyBoxOptions?.submitButtons?.confirm
                     }
                 }
@@ -409,7 +397,7 @@ const FancyBox = defineComponent({
         showDialog() {
             // avoid scrolling if fancybox is shown
             document.querySelector("body").classList.add("avoid-scrolling")
-            this.$refs.dialog.showModal()
+            this.$refs.dialog.showModal() // invoke native method for dialog-element
 
             // overwrite default behavior of dialog-element, which sets focus on first focusable element inside
             this.$refs["close-dialog"]?.focus()
@@ -463,7 +451,7 @@ const FancyBox = defineComponent({
                 this.index = 0;
             }
         },
-        // close fancybox (by button, escape-key)
+        // close fancybox (by button or escape-key)
         close() {
             this.showFancyBox = false
             this.$emit("update:show", false)
@@ -652,7 +640,7 @@ export default FancyBox
     .outer-content-wrapper {
         max-height: 85vh;
         overflow-x: hidden;
-        flex: none;
+        /*flex: none;*/
 
         .content {
             > img, > video {

package/src/components/CmdFootnote.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="cmd-footnote">
-        <CmdHeadline v-if="cmdHeadline?.headlineText" v-bind="cmdHeadlineProperties" />
+        <CmdHeadline v-if="cmdHeadlineProperties?.show && cmdHeadlineProperties?.headlineText" v-bind="cmdHeadlineProperties" />
         <CmdList listType="description" :items="items" :class="'type-' + descriptionTermType" />
     </div>
 </template>
@@ -40,6 +40,7 @@ export default {
     computed: {
         cmdHeadlineProperties() {
             return {
+                show: true,
                 headlineLevel: 6,
                 ...this.cmdHeadline
             }