comand-component-library 4.3.15 → 4.3.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.3.15",
+  "version": "4.3.17",
   "license": "GPL-3.0-only",
   "author": "CoManD-UI",
   "private": false,
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^4.3.29",
+    "comand-frontend-framework": "^4.3.41",
     "comand-ui-iconfonts": "^1.0.19",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",

package/src/ComponentLibrary.vue

@@ -175,12 +175,49 @@
                         @click.prevent="openSettingsSidebar('CmdAddressData')"></a>
                 </h2>
                 <div class="flex-container">
-                    <CmdAddressData ref="CmdAddressData" :addressData="addressData"
-                        v-bind="cmdAddressDataSettingsData" />
+                    <CmdAddressData 
+                        ref="CmdAddressData" 
+                        :addressData="addressData"
+                        v-bind="cmdAddressDataSettingsData" 
+                    />
                 </div>
             </CmdWidthLimitationWrapper>
             <!-- end address-data --------------------------------------------------------------------------------------------------->
 
+            <!-- begin accordion --------------------------------------------------------------------------------------------------->
+            <CmdWidthLimitationWrapper>
+                <h2 class="headline-demopage" id="section-accordion">
+                    <span>Accordion</span>
+                    <a href="#" class="button small icon-cog" title="Open Component Settings"
+                        @click.prevent="openSettingsSidebar('CmdAccordion')"></a>
+                </h2>
+                <CmdAccordion ref="CmdAccordion" 
+                    :name="accordionData.name"
+                    :cmdHeadline="{headlineText: 'Summary (no highlighting)'}"
+                    :textAccordionBody="accordionData.textAccordionBody"
+                    v-bind="cmdAccordionSettingsData" />
+                <CmdAccordion
+                    highlightLevel="primary"
+                    :name="accordionData.name"
+                    :cmdHeadline="{headlineText: 'Summary (primary highlighting)'}"
+                    :textAccordionBody="accordionData.textAccordionBody"
+                 />
+                <CmdAccordion 
+                    highlightLevel="secondary"
+                    :name="accordionData.name"
+                    :cmdHeadline="{headlineText: 'Summary (secondary highlighting)'}"
+                    :textAccordionBody="accordionData.textAccordionBody"
+                 />
+                <CmdAccordion 
+                    highlightLevel="tertiary"
+                    :name="accordionData.name"
+                    :cmdHeadline="{headlineText: 'Summary (tertiary highlighting)'}"
+                    :textAccordionBody="accordionData.textAccordionBody" 
+                />
+
+            </CmdWidthLimitationWrapper>
+            <!-- end accordion --------------------------------------------------------------------------------------------------->
+
             <!-- begin advanced form elements ------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage" id="section-advanced-form-elements">Advanced Form Elements</h2>
@@ -1679,20 +1716,25 @@
                     <a href="#" class="button small icon-cog" title="Open Component Settings"
                         @click.prevent="openSettingsSidebar('CmdSmartSearch')"></a>
                 </h2>
-                smartSearchString: {{ smartSearchString }}
                 <CmdSmartSearch 
                     ref="CmdSmartSearch" 
                     v-bind="smartSearchSettingsData" 
                     :listOfRecommendations="smartSearchData.listOfRecommendations"
                     v-model="smartSearchString" 
+                   :maxNumberOfRecommendations="5"
                 />
-                smartSearchObject: {{ smartSearchObject }}
+                <output>
+                    smartSearchString: {{ smartSearchString }}
+                </output>
                 <CmdSmartSearch 
-                    ref="CmdSmartSearch" 
-                    v-bind="smartSearchSettingsData" 
                     :listOfRecommendations="smartSearchData.listOfRecommendations"
                     v-model="smartSearchObject" 
+                    :maxNumberOfRecommendations="5"
+                    :openListToTop="true"
                 />
+                <output>
+                    smartSearchObject: {{ smartSearchObject }}
+                </output>
             </CmdWidthLimitationWrapper>
             <!-- end smart-search --------------------------------------------------------------------------------------------------->
 
@@ -1885,20 +1927,44 @@
                     <a href="#" class="button small icon-cog" title="Open Component Settings"
                         @click.prevent="openSettingsSidebar('CmdTooltip')"></a>
                 </h2>
-                <p>
-                    <a href="#" @click.prevent id="show-on-hover">Show tooltip on hover!</a><br />
-                    <a href="#" @click.prevent id="show-with-delay">Show tooltip on hover with delay!</a><br />
-                    <a href="#" @click.prevent id="show-on-click" title="Native tooltip">Show tooltip on click!</a>
-                </p>
-                <CmdTooltip ref="CmdTooltip" related-id="show-on-hover" v-bind="cmdTooltipSettingsData">
-                    Tooltip on hover
-                </CmdTooltip>
-                <CmdTooltip :delay-to-show-tooltip="2000" related-id="show-with-delay">
+                <a href="#" @click.prevent style="anchor-name: --tooltip-anchor-for-hover;" id="show-on-hover">Show tooltip on hover!</a><br />
+                <CmdTooltip
+                    id="tooltip-target-hover"
+                    positionAnchor="--tooltip-anchor-for-hover"
+                    relatedId="show-on-hover"
+                    tooltipText="This is text for a tooltip by hover!"
+                />
+
+                <a href="#" @click.prevent style="anchor-name: --tooltip-anchor-for-hover-on-delay" id="show-with-delay">Show tooltip on hover with delay!</a><br />
+                <CmdTooltip 
+                    id="tooltip-target-hover-on-delay"
+                    positionAnchor="--tooltip-anchor-for-hover-on-delay"
+                    relatedId="show-with-delay"
+                    :delayToShowTooltip="2000" 
+                >
                     Tooltip on hover with delay
                 </CmdTooltip>
-                <CmdTooltip related-id="show-on-click" :toggle-visibility-by-click="true" :allowEscapeKey="true">
-                    Tooltip on click
-                </CmdTooltip>
+
+                <button 
+                    type="button" 
+                    class="button" 
+                    style="anchor-name: --tooltip-anchor-for-click;" 
+                    positionAnchor="--tooltip-anchor-for-click"
+                    title="Click to open tooltip" 
+                    popovertarget="tooltip-target-click" 
+                    aria-describedby="tooltip-target-click"
+                >
+                    <span class="icon-questionmark"></span>
+                    <span>Toggle Tooltip</span>
+                </button>
+                 <CmdTooltip
+                    ref="CmdTooltip" 
+                    :popoverTargetName="'tooltip-target-click'"
+                    :showCloseIcon="true"
+                    positionAnchor="--tooltip-anchor-for-click"
+                    tooltipText="This is text for a tooltip by click!"
+                    v-bind="cmdTooltipSettingsData"
+                />
             </CmdWidthLimitationWrapper>
             <!-- end tooltip --------------------------------------------------------------------------------------------------->
 
@@ -1922,6 +1988,7 @@
                 </h2>
                 <CmdWidthLimitationWrapper style="border: 1px  dashed var(--color-gray-30)" ref="CmdWidthLimitationWrapper"
                     v-bind="cmdWidthLimitationWrapperSettingsData">
+                    <h3>Slot-Content</h3>
                     <p>Slot-content</p>
                     <p>Slot-content</p>
                     <p>Slot-content</p>
@@ -1981,6 +2048,7 @@
 
 <script>
 // import example data
+import accordionData from '@/assets/data/accordion-data.json'
 import addressData from '@/assets/data/address-data.json'
 import bankAccountData from '@/assets/data/bank-account-data.json'
 import boxUserData from '@/assets/data/box-user.json'
@@ -2197,6 +2265,7 @@ export default {
             showToast: false,
 
             // assign data from json files to data-properties
+            accordionData,
             addressData,
             bankAccountData,
             boxProductData,
@@ -2647,6 +2716,7 @@ export default {
 
             .comand-versions {
                 margin: 0;
+                background: var(--color-white);
 
                 dd {
                     white-space: nowrap;

package/src/assets/data/accordion-data.json

@@ -0,0 +1,8 @@
+{
+    "name": "accordion-name",
+    "cmdHeadline": {
+        "headlineText": "Summary",
+        "headlineLevel": 4
+    },
+    "textAccordionBody": "This is text for accordion body!"
+}

package/src/assets/data/form-elements.json

@@ -10,7 +10,8 @@
     "labelText": "Text input",
     "placeholder": "Placeholdertext",
     "required": false,
-    "disabled": false
+    "disabled": false,
+    "scrollContainerForTooltip": ".page-wrapper"
   },
   {
     "component": "flexContainer",

package/src/assets/data/listOfComponents.json

@@ -1,4 +1,5 @@
 [
+  "Accordion",
   "AddressData",
   "AdvancedFormElements",
   "BankAccountData",

package/src/assets/data/smart-search.json

@@ -20,6 +20,20 @@
       "icon": {
         "iconClass": "icon-globe"
       }
+    },
+    {
+      "id": 4,
+      "displayValue": "Option #4",
+      "icon": {
+        "iconClass": "icon-user-profile"
+      }
+    },
+    {
+      "id": 5,
+      "displayValue": "Option #5",
+      "icon": {
+        "iconClass": "icon-questionmark-circle"
+      }
     }
   ],
   "cmdFormElement": {

package/src/assets/styles/component-library-global-styles.scss

@@ -236,14 +236,15 @@ a img.flag {
 
 /* begin tooltip for cmd-form-element and cmd-fake-select ---------------------------------------------------------------------------------------------------------------- */
 .cmd-form-element, .cmd-fake-select, .cmd-input-group {
+    /*
     .cmd-tooltip {
         position: absolute;
         right: 0;
         transform: translateY(calc(-100% - calc(var(--default-margin) / 2)));
-        left: auto !important; /* overwrite calculated inline-styles from javascript for cmd-tooltip-component */
-        top: 0 !important; /* overwrite calculated inline-styles from javascript for cmd-tooltip-component */
+        left: auto !important; /* overwrite calculated inline-styles from javascript for cmd-tooltip-component 
+        top: 0 !important; /* overwrite calculated inline-styles from javascript for cmd-tooltip-component 
     }
-
+*/
     &:has([required]) {
         &.has-state, & + .cmd-tooltip {
             .label-text {

package/src/componentSettingsDataAndControls.vue

@@ -4,6 +4,32 @@ import navigationData from "@/assets/data/main-navigation.json"
 export default {
     data() {
         return {
+            cmdAccordionSettingsData: {
+                cmdHeadline: {
+                    headlineText: "Summary",
+                    headlineLevel: 4
+                }
+            },
+            cmdAccordionSettingsControls: {
+                highlightLevel: [
+                    {
+                        text: "none (default)",
+                        value: "none"
+                    },
+                    {
+                        text: "primary",
+                        value: "primary"
+                    },
+                    {
+                        text: "secondary",
+                        value: "secondary"
+                    },
+                    {
+                        text: "tertiary",
+                        value: "tertiary"
+                    }
+                ]
+            },
             cmdAddressDataSettingsData: {
                 cmdHeadline: {
                     headlineText: "Address Data",
@@ -724,6 +750,12 @@ export default {
                 showCounter: true,
                 showSlideButtons: true
             },
+            smartSearchSettingsData: {
+                maxNumberOfRecommendations: 3,
+                filterByFirstLetter: false,
+                openListToTop: false,
+                allowUserToEnterNewTerm: true
+            },
             cmdSocialNetworksSettingsData: {
                 align: "left",
                 useGap: true,
@@ -971,8 +1003,9 @@ export default {
             cmdTooltipSettingsData: {
                 tooltipText: "This is a tooltip!",
                 delayToShowTooltip: 0,
-                status: "",
-                toggleVisibilityByClick: false
+                delayToHideTooltip: 100,
+                toggleVisibilityByClick: false,
+                showCloseIcon: true
             },
             cmdTooltipSettingsControls: {
                 status: [

package/src/components/CmdAccordion.vue

@@ -0,0 +1,105 @@
+<template>
+    <!-- begin CmdAccordion ---------------------------------------------------------------------------------------- -->
+    <details :class="['cmd-accordion', highlightLevel]" :name="accordionName">
+        <summary>
+            <span :class="[cmdIconClosed.iconClass, 'closed']" :title="cmdIconClosed.tooltip"></span>
+            <span :class="[cmdIconOpen.iconClass, 'open']" :title="cmdIconOpen.tooltip"></span>
+            <CmdHeadline v-bind="cmdHeadlineProperties" />
+        </summary>
+        <div class="accordion-body">
+            <!-- begin slot-content -->
+            <slot>
+                <p v-html="textAccordionBody">
+                </p>
+            </slot>
+            <!-- end slot-content -->
+        </div>
+    </details>
+    <!-- end CmdAccordion ---------------------------------------------------------------------------------------- -->
+</template>
+
+<script>
+export default {
+    name: "CmdAccordion",
+    props: {
+        /**
+         * set highlight-level for headline
+         * 
+         * @allowedValues: "none", "primary", "secondary", "tertiary"
+         */
+        highlightLevel: {
+            type: String,
+            default: "none",
+            validator(value) {
+                return value === "none" ||
+                    value === "primary" ||
+                    value === "secondary" ||
+                    value === "tertiary"
+            }
+        },
+        /**
+         * (html-)text for accordion-body
+         */
+        textAccordionBody: {
+            type: String,
+            required: false
+        },
+        /**
+         * properties for CmdIcon-component if accordion is collapsed/closed
+         */
+        cmdIconClosed: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-chevron-one-stripe-right",
+                    tooltip: "Expand accordion"
+                }
+            }
+        },
+        /**
+        * properties for CmdIcon-component if accordion is expanded/open
+        */
+        cmdIconOpen: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-chevron-one-stripe-down",
+                    tooltip: "Collapse accordion"
+                }
+            }
+        },
+        /**
+        * accordion-name is required if multiple-accrdion-boxes should be connect (name must be identical)
+        */
+        accordionName: {
+            type: Object,
+            required: false
+        },
+        /**
+         * properties for CmdHeadline-component
+         */
+        cmdHeadline: {
+            type: Object,
+            requiered: true
+        }
+    },
+    computed: {
+        cmdHeadlineProperties() {
+            return {
+                headlineLevel: 4,
+                ...this.cmdHeadline
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.cmd-accordion {
+    summary {
+        .cmd-headline {
+            margin: 0;
+        }
+    }
+}
+</style>

package/src/components/CmdBox.vue

@@ -269,7 +269,7 @@ export default {
         DefaultMessageProperties,
         GlobalCurrency
     ],
-    emits: ["click", "toggle-collapse"],
+    emits: ["click", "toggle-collapse", "toggle-cutofftext"],
     data() {
         return {
             open: this.collapsible ? this.openCollapsedBox : true,
@@ -554,16 +554,16 @@ export default {
             this.open = !this.open
             this.active = !this.active
 
-            this.$emit('toggle-collapse', this.open)
+            this.$emit("toggle-collapse", this.open)
         },
         // toggle cutofftext (between full and faded text)
         toggleCutOffText() {
             this.showCutOffText = !this.showCutOffText
-            this.$emit('toggle-cutofftext', this.showCutOffText)
+            this.$emit("toggle-cutofftext", this.showCutOffText)
         },
         // for boxType === product
         clickOnProduct(product) {
-            this.$emit('click', product)
+            this.$emit("click", product)
         },
         // set focus on first input if box contains form-elements
         setFocus() {

package/src/components/CmdContainer.vue

@@ -135,7 +135,7 @@ export default {
                     if (this.contentOrientation) {
                         htmlClasses.push(this.contentOrientation === "vertical" ? "flex-direction-column" : null)
                     }
-                    if (this.useGap) {
+                    if (this.noGap) {
                         htmlClasses.push("no-gap")
                     }
                     if (this.flexNone) {

package/src/components/CmdFakeSelect.vue

@@ -21,34 +21,43 @@
             <span class="label-text">
                 <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"
-                   href="#"
-                   @click.prevent
-                   :title="validationTooltip"
-                   :popovertarget="tooltipPopoverTargetName" 
-                   :aria-describedby="tooltipPopoverTargetName"
-                   :aria-errormessage="tooltipId"
-                   aria-live="assertive"
-                   :id="tooltipId">
-                   <!-- begin CmdIcon -->
-                   <CmdIcon :iconClass="getStatusIconClass"/>
+            <!-- begin status-icon (linked with tooltip) -->
+            <button v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
+                type="button"
+                class="no-style"
+                :title="validationTooltip" 
+                :aria-errormessage="tooltipId" 
+                aria-live="assertive" 
+                :popovertarget="'tooltip-target-' + htmlId"
+                :style="'anchor-name: --tooltip-anchor-' + htmlId"
+            >
+                    <!-- begin CmdIcon -->
+                    <CmdIcon :iconClass="getStatusIconClass" />
                     <!-- end CmdIcon -->
-                </button>
-                <!-- end status-icon (linked with tooltip) -->
+            </button>
+            <!-- end status-icon (linked with tooltip) -->
 
-                <!-- begin CmdTooltipForFormElements -->
-                <CmdTooltipForFormElements
-                    style="border: 1px solid red;"
+                 <!-- begin CmdTooltip -->
+                <CmdTooltip
                     ref="tooltip"
+                    :class="['cmd-tooltip-for-form-elements box', validationStatus]"
+                    :id="'tooltip-target-' + htmlId"
+                    :scrollContainer="scrollContainerForTooltip"
+                    :popoverTargetName="'tooltip-target-' + htmlId"
                     :validationStatus="validationStatus"
-                    :validationMessage="getValidationMessage"
-                    :relatedId="tooltipId"
-                    :tooltipPopoverTargetName="tooltipPopoverTargetName"
-                    :cmdListOfRequirements="listOfRequirements"
                     :role="validationStatus === 'error' ? 'alert' : 'dialog'"
-                />
-                <!-- end CmdTooltipForFormElements -->
+                    :toggle-visibility-by-click="true"
+                    :style="'position-anchor: --tooltip-anchor-' + htmlId"
+                >
+
+                    <!-- begin CmdListOfRequirements -->
+                    <CmdListOfRequirements
+                        v-if="cmdListOfRequirementsProperties.showRequirements"
+                        v-bind="cmdListOfRequirementsProperties"
+                    />
+                    <!-- end CmdListOfRequirements -->
+                </CmdTooltip>
+                <!-- end CmdTooltip -->
             </span>
             <!-- end label -->
         </template>
@@ -200,6 +209,7 @@ export default {
         Identifier,
         Tooltip
     ],
+    emits: ["validation-status-change", "update:modelValue"],
     data() {
         return {
             showOptions: false,
@@ -215,6 +225,13 @@ export default {
             type: String,
             default: 'tooltip-target-' + createUuid()
         },
+        /**
+        * specify a scroll-container which scrolling hides the tooltip
+        */
+        scrollContainerForTooltip: {
+            type: String,
+            required: false
+        },
         /**
          * set different default selectbox-types for
          *
@@ -371,9 +388,29 @@ export default {
                     iconType: "auto"
                 }
             }
-        }
+        },
+        /**
+        * properties for CmdListOfRequirements-component
+        */
+        cmdListOfRequirements: {
+            type: Object,
+            required: false   
+         }
     },
     computed: {
+        cmdListOfRequirementsProperties() {
+            return {
+                showRequirements: true,
+                validationTooltip: "",
+                inputRequirements: [],
+                inputAttributes: {},
+                showHeadline: true,
+                inputModelValue: "",
+                helplink: {},
+                labelText: "",
+                ...this.cmdListOfRequirements
+            }
+        },
         validationTooltip() {
             if (!this.useCustomTooltip) {
                 return this.getValidationMessage
@@ -465,7 +502,7 @@ export default {
             }
 
             this.$emit("update:modelValue", checkboxValues)
-            this.$emit('validation-status-change', this.validationStatus)
+            this.$emit("validation-status-change", this.validationStatus)
         },
         // toggle options/dropdown
         toggleOptions() {
@@ -491,8 +528,8 @@ export default {
             // hide options after selection
             this.showOptions = false
             
-            this.$emit('update:modelValue', optionValue)
-            this.$emit('validation-status-change', this.validationStatus)
+            this.$emit("update:modelValue", optionValue)
+            this.$emit("validation-status-change", this.validationStatus)
         },
         // check if a checkbox is changed for selectbox with checkboxes
         optionSelect(event) {
@@ -508,7 +545,7 @@ export default {
                 this.validationStatus = "error"
             }
 
-            this.$emit('update:modelValue', value)
+            this.$emit("update:modelValue", value)
         },
         // hide options (in dropdown)
         closeOptions() {
@@ -526,7 +563,7 @@ export default {
                 this.validationStatus = "error"
             }
             
-            this.$emit('validation-status-change', this.validationStatus)
+            this.$emit("validation-status-change", this.validationStatus)
         },
         // overwrite requirement-message form fieldValidation.js
         getRequirementMessage() {

package/src/components/CmdForm.vue

@@ -160,7 +160,7 @@ import CmdSystemMessage from "@/components/CmdSystemMessage.vue";
 export default {
     name: "CmdForm",
     components: {CmdSystemMessage},
-    emits: ["submit", "update:modelValue"],
+    emits: ["validation-status-change", "submit", "update:modelValue"],
     data() {
         return {
             errorOccurred: false,