@sme.up/ketchup 10.3.1 → 10.3.2

package/dist/components/kup-accordion.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, d as Host } from './p-ef8cbd35.js';
-import { k as kupManagerInstance, a as KupComponentSizing, g as getProps, s as setProps, b as KupThemeColorValues, c as KupThemeIconValues } from './p-73922583.js';
-import { M as MDCRipple, F as FImage, c as componentWrapperId, d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, e as defineCustomElement$5, f as defineCustomElement$6, g as defineCustomElement$7, h as defineCustomElement$8, i as defineCustomElement$9, j as defineCustomElement$a, k as defineCustomElement$b, l as defineCustomElement$c, m as defineCustomElement$d, n as defineCustomElement$e, o as defineCustomElement$f, p as defineCustomElement$g, q as defineCustomElement$h, r as defineCustomElement$i, s as defineCustomElement$j, t as defineCustomElement$k, u as defineCustomElement$l, v as defineCustomElement$m, w as defineCustomElement$n, x as defineCustomElement$o, y as defineCustomElement$p, z as defineCustomElement$q, A as defineCustomElement$r, B as defineCustomElement$s, C as defineCustomElement$t, D as defineCustomElement$u } from './p-e0031e17.js';
+import { k as kupManagerInstance, a as KupComponentSizing, g as getProps, s as setProps, b as KupThemeIconValues, c as KupThemeColorValues, d as KupDynamicPositionPlacement } from './p-9859e801.js';
+import { M as MDCRipple, F as FImage, c as componentWrapperId, d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, e as defineCustomElement$5, f as defineCustomElement$6, g as defineCustomElement$7, h as defineCustomElement$8, i as defineCustomElement$9, j as defineCustomElement$a, k as defineCustomElement$b, l as defineCustomElement$c, m as defineCustomElement$d, n as defineCustomElement$e, o as defineCustomElement$f, p as defineCustomElement$g, q as defineCustomElement$h, r as defineCustomElement$i, s as defineCustomElement$j, t as defineCustomElement$k, u as defineCustomElement$l, v as defineCustomElement$m, w as defineCustomElement$n, x as defineCustomElement$o, y as defineCustomElement$p, z as defineCustomElement$q, A as defineCustomElement$r, B as defineCustomElement$s, C as defineCustomElement$t, D as defineCustomElement$u } from './p-55fda958.js';
 
 /**
  * Props of the kup-accordion component.
@@ -9,35 +9,106 @@ import { M as MDCRipple, F as FImage, c as componentWrapperId, d as defineCustom
 var KupAccordionProps;
 (function (KupAccordionProps) {
     KupAccordionProps["customStyle"] = "Custom style of the component. For more information: https://smeup.github.io/ketchup/#/customization";
-    KupAccordionProps["data"] = "Data of the accordion.";
+    KupAccordionProps["data"] = "List of elements.";
+    KupAccordionProps["infoIcon"] = "When true, it will show the info activation icon";
     KupAccordionProps["ripple"] = "When enabled displays Material's ripple effect on item headers.";
+    KupAccordionProps["toolbar"] = "When true, it will show the toolbar activation icon";
+    KupAccordionProps["sizing"] = "Sets the type of the component sizing.";
+    KupAccordionProps["toolbarCallback"] = "Callback to be called when the toolbar icon is clicked";
+    KupAccordionProps["infoCallback"] = "Callback to be called when the info icon is clicked";
 })(KupAccordionProps || (KupAccordionProps = {}));
 
-const kupAccordionCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:var(--kup-label-01-font-size, 12px);line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-compact-01-font-size, 14px);line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-01-font-size, 14px);line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_accordion_border_top_color:var(\n    --kup-accordion-border-top-color,\n    var(--kup-border-subtle)\n  );--kup_accordion_item_small_height:var(\n    --kup-accordion-item-small-height,\n    32px\n  );--kup_accordion_item_medium_height:var(\n    --kup-accordion-item-medium-height,\n    40px\n  );--kup_accordion_item_outline_color_active:var(\n    --kup-accordion-item-outline-color-focus,\n    var(--kup-border-interactive)\n  );--kup_accordion_item_large_height:var(\n    --kup-accordion-item-medium-height,\n    48px\n  );--kup_accordion_header_background_color:var(\n    --kup-accordion-header-background-color,\n    var(--kup-layer-0)\n  );--kup_accordion_header_background_color_hover:var(\n    --kup-accordion-header-background-color-hover,\n    var(--kup-layer-0-hover)\n  );--kup_accordion_header_padding:var(\n    --kup-accordion-header-padding,\n    var(--kup-space-05)\n  );--kup_accordion_dropdown_icon_color:var(\n    --kup-accordio-dropdown-icon-color,\n    var(--kup-text-primary)\n  );--kup_accordion_transition:var(--kup-accordion-transition, 80ms);display:block;font-family:var(--kup_accordion_font_family);font-size:var(--kup_accordion_font_size)}.accordion{border-radius:var(--kup_accordion_border_radius);display:flex;flex-wrap:wrap;flex-direction:column;width:100%}.accordion-item{border-top:1px solid var(--kup_accordion_border_top_color);box-sizing:border-box;width:100%}.accordion-item--visible{display:block}.accordion-item:is(:last-of-type){border-bottom:1px solid var(--kup_accordion_border_top_color)}.accordion-item__header{height:var(--kup_accordion_item_medium_height);align-items:center;border:none;box-sizing:border-box;color:var(--kup_accordion_text_color);cursor:pointer;display:flex;line-height:1.75em;outline:none;padding:var(--kup_accordion_padding);text-align:left;transition:background-color var(--kup_accordion_transition), color var(--kup_accordion_transition);width:100%;outline:2px solid transparent;outline-offset:-2px;padding-left:16px;padding-right:16px}.accordion-item__header:focus{outline:2px solid var(--kup_accordion_item_outline_color_active)}.accordion-item__header.accordion-item--small{height:var(--kup_accordion_item_small_height)}.accordion-item__header.accordion-item--large{height:var(--kup_accordion_item_large_height)}.accordion-item__header:hover:not(.accordion-item__header--selected){background-color:var(--kup_accordion_header_background_color_hover)}.accordion-item__header:focus(.accordion-item__header--selected){outline:2px solid var(--kup_accordion_item_outline_color_active)}.accordion-item__header--expanded{background-color:var(--kup_accordion_background_color)}.accordion-item__header--expanded .accordion-item__dropdown{transform:rotate(-180deg)}.accordion-item__text{margin-right:0.5em;overflow:hidden;text-overflow:ellipsis;white-space:pre}.accordion-item__text--highlighted{color:var(--kup_accordion_text_on_primary_color);background-color:var(--kup_accordion_primary_color)}.accordion-item__icon{margin-left:0;margin-right:0.5em}.accordion-item__dropdown{background-color:var(--kup_accordion_dropdown_icon_color);height:1.5em;margin-left:auto;margin-right:0;min-width:1.5em;width:1.5em;transition:transform var(--kup_accordion_transition)}.accordion-item__content{padding-left:16px;padding-top:8px;padding-bottom:24px;padding-right:80px;animation:fade-in 0.25s ease-out;display:none;font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.accordion-item__content--selected{display:block}.mdc-ripple-surface{--mdc-ripple-fg-opacity:0.24}.mdc-ripple-surface:before,.mdc-ripple-surface:after{background-color:var(--kup_accordion_primary_color)}.kup-icon.kup-dropdown-icon{-webkit-mask:var(--kup-dropdown-icon);mask:var(--kup-dropdown-icon)}:host(.kup-borderless){--kup-accordion-border:none}:host(.kup-full-height){height:100%}:host(.kup-full-width){width:100%}:host(.kup-danger){--kup-accordion-primary-color:var(--kup-danger-color-60);--kup-accordion-primary-color-rgb:var(--kup-danger-color-60-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-info){--kup-accordion-primary-color:var(--kup-info-50-color);--kup-accordion-primary-color-rgb:var(--kup-info-color-50-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-secondary){--kup-accordion-primary-color:var(--kup-secondary-color);--kup-accordion-primary-color-rgb:var(--kup-secondary-color-rgb);--kup-accordion-text-on-primary-color:var(--kup-text-on-secondary-color)}:host(.kup-success){--kup-accordion-primary-color:var(--kup-success-color-40);--kup-accordion-primary-color-rgb:var(--kup-success-color-40-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-warning){--kup-accordion-primary-color:var(--kup-warning-color-50);--kup-accordion-primary-color-rgb:var(--kup-warning-color-50-rgb);--kup-accordion-text-on-primary-color:white}";
+const kupAccordionCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:var(--kup-label-01-font-size, 12px);line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-compact-01-font-size, 14px);line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-01-font-size, 14px);line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_accordion_border_top_color:var(\n    --kup-accordion-border-top-color,\n    var(--kup-border-subtle)\n  );--kup_accordion_item_small_height:var(\n    --kup-accordion-item-small-height,\n    32px\n  );--kup_accordion_item_medium_height:var(\n    --kup-accordion-item-medium-height,\n    40px\n  );--kup_accordion_item_outline_color_active:var(\n    --kup-accordion-item-outline-color-focus,\n    var(--kup-border-interactive)\n  );--kup_accordion_item_large_height:var(\n    --kup-accordion-item-medium-height,\n    48px\n  );--kup_accordion_header_background_color:var(\n    --kup-accordion-header-background-color,\n    var(--kup-layer-0)\n  );--kup_accordion_header_background_color_hover:var(\n    --kup-accordion-header-background-color-hover,\n    var(--kup-layer-0-hover)\n  );--kup_accordion_header_padding:var(\n    --kup-accordion-header-padding,\n    var(--kup-space-05)\n  );--kup_accordion_dropdown_icon_color:var(\n    --kup-accordio-dropdown-icon-color,\n    var(--kup-text-primary)\n  );--kup_accordion_transition:var(--kup-accordion-transition, 80ms);display:block;font-family:var(--kup_accordion_font_family);font-size:var(--kup_accordion_font_size)}.accordion{border-radius:var(--kup_accordion_border_radius);display:flex;flex-wrap:wrap;flex-direction:column;width:100%}.accordion-item{border-top:1px solid var(--kup_accordion_border_top_color);box-sizing:border-box;width:100%}.accordion-item--visible{display:block}.accordion-item:is(:last-of-type){border-bottom:1px solid var(--kup_accordion_border_top_color)}.accordion-item__header{height:var(--kup_accordion_item_medium_height);align-items:center;border:none;box-sizing:border-box;color:var(--kup_accordion_text_color);cursor:pointer;display:flex;line-height:1.75em;outline:none;padding:var(--kup_accordion_padding);text-align:left;transition:background-color var(--kup_accordion_transition), color var(--kup_accordion_transition);width:100%;outline:2px solid transparent;outline-offset:-2px;padding-left:16px;padding-right:16px;gap:var(--kup-space-03)}.accordion-item__header:focus{outline:2px solid var(--kup_accordion_item_outline_color_active)}.accordion-item__header.accordion-item--small{height:var(--kup_accordion_item_small_height)}.accordion-item__header.accordion-item--large{height:var(--kup_accordion_item_large_height)}.accordion-item__header:hover:not(.accordion-item__header--selected){background-color:var(--kup_accordion_header_background_color_hover)}.accordion-item__header:focus(.accordion-item__header--selected){outline:2px solid var(--kup_accordion_item_outline_color_active)}.accordion-item__header--expanded{background-color:var(--kup_accordion_background_color)}.accordion-item__header--expanded .accordion-item__dropdown{transform:rotate(-180deg)}.accordion-item__header .f-image{margin:0}.accordion-item__header .accordion-rigtbuttons{margin-left:auto;margin-right:0;display:flex;gap:var(--kup-space-03)}.accordion-item__text{margin-right:0.5em;overflow:hidden;text-overflow:ellipsis;white-space:pre}.accordion-item__text--highlighted{color:var(--kup_accordion_text_on_primary_color);background-color:var(--kup_accordion_primary_color)}.accordion-item__icon{margin-left:0;margin-right:0.5em}.accordion-item__dropdown{background-color:var(--kup_accordion_dropdown_icon_color);height:1.5em;min-width:1.5em;width:1.5em;transition:transform var(--kup_accordion_transition)}.accordion-item__content{padding-left:16px;padding-top:8px;padding-bottom:24px;padding-right:80px;animation:fade-in 0.25s ease-out;display:none;font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.accordion-item__content--selected{display:block}.mdc-ripple-surface{--mdc-ripple-fg-opacity:0.24}.mdc-ripple-surface:before,.mdc-ripple-surface:after{background-color:var(--kup_accordion_primary_color)}.kup-icon.kup-dropdown-icon{-webkit-mask:var(--kup-dropdown-icon);mask:var(--kup-dropdown-icon)}:host(.kup-borderless){--kup-accordion-border:none}:host(.kup-full-height){height:100%}:host(.kup-full-width){width:100%}:host(.kup-danger){--kup-accordion-primary-color:var(--kup-danger-color-60);--kup-accordion-primary-color-rgb:var(--kup-danger-color-60-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-info){--kup-accordion-primary-color:var(--kup-info-50-color);--kup-accordion-primary-color-rgb:var(--kup-info-color-50-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-secondary){--kup-accordion-primary-color:var(--kup-secondary-color);--kup-accordion-primary-color-rgb:var(--kup-secondary-color-rgb);--kup-accordion-text-on-primary-color:var(--kup-text-on-secondary-color)}:host(.kup-success){--kup-accordion-primary-color:var(--kup-success-color-40);--kup-accordion-primary-color-rgb:var(--kup-success-color-40-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-warning){--kup-accordion-primary-color:var(--kup-warning-color-50);--kup-accordion-primary-color-rgb:var(--kup-warning-color-50-rgb);--kup-accordion-text-on-primary-color:white}";
 const KupAccordionStyle0 = kupAccordionCss;
 
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _KupAccordion_clickCbDropCard, _KupAccordion_dropDownActionCardAnchor;
 const KupAccordion$1 = /*@__PURE__*/ proxyCustomElement(class KupAccordion extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.kupAccordionItemSelected = createEvent(this, "kup-accordion-itemselected", 6);
+        this.kupBlur = createEvent(this, "kup-accordion-blur", 6);
+        this.kupClick = createEvent(this, "kup-accordion-click", 6);
+        this.kupIconClick = createEvent(this, "kup-accordion-iconclick", 6);
+        this.kupFocus = createEvent(this, "kup-accordion-focus", 6);
+        this.kupToolbarItemClick = createEvent(this, "kup-accordion-toolbaritemclick", 6);
         /*-------------------------------------------------*/
         /*       I n t e r n a l   V a r i a b l e s       */
         /*-------------------------------------------------*/
+        this.toolbarState = [];
+        this.infoState = [];
         /**
          * Instance of the KupManager class.
          */
         this.kupManager = kupManagerInstance();
+        _KupAccordion_clickCbDropCard.set(this, null);
         /**
          * Instance of the KupManager class.
          */
         this.slotsNames = [];
+        _KupAccordion_dropDownActionCardAnchor.set(this, null);
         this.selectedItems = [];
         this.customStyle = '';
         this.data = null;
+        this.infoIcon = false;
         this.ripple = false;
+        this.toolbar = false;
         this.sizing = KupComponentSizing.SMALL;
+        this.toolbarCallback = undefined;
+        this.infoCallback = undefined;
+    }
+    onKupBlur(node) {
+        this.kupBlur.emit({
+            comp: this,
+            id: this.rootElement.id,
+            node: node,
+        });
+    }
+    onKupIconClick(el) {
+        if (!el) {
+            this.kupManager.debug.logMessage(this, 'onKupIconClick: Element is null');
+            return;
+        }
+        __classPrivateFieldSet(this, _KupAccordion_dropDownActionCardAnchor, el, "f");
+        this.createDropDownToolbarList();
+    }
+    onKupInfoIconClick(el) {
+        if (!el) {
+            this.kupManager.debug.logMessage(this, 'onKupIconClick: Element is null');
+            return;
+        }
+        __classPrivateFieldSet(this, _KupAccordion_dropDownActionCardAnchor, el, "f");
+        this.createDropDownInfoList();
+    }
+    onKupFocus(node) {
+        this.kupFocus.emit({
+            comp: this,
+            id: this.rootElement.id,
+            node: node,
+        });
+    }
+    onKupToolbarItemClick(e) {
+        this.kupToolbarItemClick.emit({
+            comp: this,
+            id: this.rootElement.id,
+            node: e.detail.selected,
+        });
     }
     /*-------------------------------------------------*/
     /*                  W a t c h e r s                */
@@ -53,6 +124,22 @@ const KupAccordion$1 = /*@__PURE__*/ proxyCustomElement(class KupAccordion exten
             }
         }
     }
+    updateSelectedItems() {
+        var _a;
+        const ids = [];
+        if ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) {
+            for (let i = 0; i < this.data.length; i++) {
+                const node = this.data[i];
+                if (node.contentVisible === undefined) {
+                    node.contentVisible = true;
+                }
+                if (node.contentVisible) {
+                    ids.push(node.id);
+                }
+            }
+        }
+        this.selectedItems = ids;
+    }
     /*-------------------------------------------------*/
     /*           P u b l i c   M e t h o d s           */
     /*-------------------------------------------------*/
@@ -61,12 +148,10 @@ const KupAccordion$1 = /*@__PURE__*/ proxyCustomElement(class KupAccordion exten
      */
     async collapseAll() {
         const ids = [];
-        for (let i = 0; i < this.data.columns.length; i++) {
-            const column = this.data.columns[i];
-            const itemName = column.name;
-            if (!this.isItemExpandible(itemName) &&
-                this.isItemSelected(itemName)) {
-                ids.push(itemName);
+        for (let i = 0; i < this.data.length; i++) {
+            const node = this.data[i];
+            if (!this.isItemExpandible(node) && this.isItemSelected(node)) {
+                ids.push(node.id);
             }
         }
         this.selectedItems = ids;
@@ -76,11 +161,10 @@ const KupAccordion$1 = /*@__PURE__*/ proxyCustomElement(class KupAccordion exten
      */
     async expandAll() {
         const ids = [];
-        for (let i = 0; i < this.data.columns.length; i++) {
-            const column = this.data.columns[i];
-            const itemName = column.name;
-            if (this.isItemExpandible(itemName)) {
-                ids.push(itemName);
+        for (let i = 0; i < this.data.length; i++) {
+            const node = this.data[i];
+            if (this.isItemExpandible(node)) {
+                ids.push(node.id);
             }
         }
         this.selectedItems = ids;
@@ -110,34 +194,32 @@ const KupAccordion$1 = /*@__PURE__*/ proxyCustomElement(class KupAccordion exten
      * This method activates or deactivates an item
      * @param {string} itemName - Name of the item.
      */
-    async toggleItem(itemName) {
-        const isItemExpandible = this.isItemExpandible(itemName);
-        const ids = [...this.selectedItems];
-        if (ids.includes(itemName)) {
-            ids.splice(ids.indexOf(itemName), 1);
-        }
-        else {
-            ids.push(itemName);
+    async toggleItem(node) {
+        if (!this.isItemExpandible(node)) {
+            return;
         }
-        this.selectedItems = ids;
-        if (!isItemExpandible) {
-            this.kupAccordionItemSelected.emit({
-                comp: this,
-                id: this.rootElement.id,
-                itemName: itemName,
-            });
+        if (node.contentVisible === undefined) {
+            node.contentVisible = true;
         }
+        node.contentVisible = !node.contentVisible;
+        this.updateSelectedItems();
+        this.kupClick.emit({
+            comp: this,
+            id: this.rootElement.id,
+            node: node,
+        });
     }
     /*-------------------------------------------------*/
     /*           P r i v a t e   M e t h o d s         */
     /*-------------------------------------------------*/
-    isItemExpandible(itemName) {
-        return this.slotsNames.includes(itemName);
+    isItemExpandible(item) {
+        return item.expandable || this.slotsNames.includes(item.id);
     }
-    isItemSelected(itemName) {
-        return this.selectedItems.includes(itemName);
+    isItemSelected(item) {
+        return this.selectedItems.includes(item.id);
     }
     renderItems() {
+        var _a, _b;
         const items = [];
         const slots = Array.prototype.slice.call(this.rootElement.children, 0);
         this.slotsNames = [];
@@ -145,11 +227,10 @@ const KupAccordion$1 = /*@__PURE__*/ proxyCustomElement(class KupAccordion exten
             const slot = slots[index];
             this.slotsNames.push(slot.slot);
         }
-        for (let i = 0; i < this.data.columns.length; i++) {
-            const column = this.data.columns[i];
-            const itemName = column.name;
-            const isItemSelected = this.isItemSelected(itemName);
-            const isItemExpandible = this.isItemExpandible(itemName);
+        for (let i = 0; i < this.data.length; i++) {
+            const node = this.data[i];
+            const isItemSelected = this.isItemSelected(node);
+            const isItemExpandible = this.isItemExpandible(node);
             const itemHeaderClass = {
                 'accordion-item__header': true,
                 'accordion-item__header--selected': !isItemExpandible && isItemSelected ? true : false,
@@ -163,10 +244,129 @@ const KupAccordion$1 = /*@__PURE__*/ proxyCustomElement(class KupAccordion exten
                     ? true
                     : false,
             };
-            items.push(h("div", { class: "accordion-item" }, h("div", { tabindex: "1", title: column.title, class: itemHeaderClass, onClick: () => this.toggleItem(itemName) }, column.icon ? (h(FImage, { color: `var(${KupThemeColorValues.ICON})`, resource: column.icon, sizeX: "1.5em", sizeY: "1.5em", wrapperClass: "accordion-item__icon" })) : null, h("span", { class: "accordion-item__text" }, column.title), isItemExpandible ? (h("span", { class: `accordion-item__dropdown kup-icon ${KupThemeIconValues.DROPDOWN.replace('--', '')}` })) : null), h("div", { class: itemContentClass }, h("slot", { name: column.name }))));
+            const wrapper = (h("div", { class: "accordion-rigtbuttons" }, this.infoIcon && this.infoCallback && (h(FImage, { resource: "info_outline", sizeX: "16px", sizeY: "16px", onClick: async (event) => {
+                    event.stopPropagation();
+                    const el = event.currentTarget;
+                    this.infoState = await this.infoCallback();
+                    if (this.infoState.length > 0) {
+                        this.onKupInfoIconClick(el);
+                    }
+                    else {
+                        this.kupManager.debug.logMessage(this, 'InfoIcon data is empty, not opening dropdown.');
+                    }
+                }, wrapperClass: "tab__iconToolbar iconInfo" })), this.toolbar && this.toolbarCallback && (h(FImage, { resource: "more_vert", sizeX: "16px", sizeY: "16px", onClick: async (event) => {
+                    var _a;
+                    event.stopPropagation();
+                    const el = event.currentTarget;
+                    this.toolbarState =
+                        await this.toolbarCallback();
+                    if (((_a = this.toolbarState) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                        this.onKupIconClick(el);
+                    }
+                    else {
+                        this.kupManager.debug.logMessage(this, 'Toolbar data is empty, not opening dropdown.');
+                    }
+                }, wrapperClass: "tab__iconToolbar iconToolbar" })), isItemExpandible ? (h("div", { class: `accordion-item__dropdown kup-icon ${KupThemeIconValues.DROPDOWN.replace('--', '')}` })) : null));
+            items.push(h("div", { class: "accordion-item" }, h("div", { tabindex: i, title: (_a = node.title) !== null && _a !== void 0 ? _a : null, class: itemHeaderClass, onClick: (e) => {
+                    e.stopPropagation();
+                    this.toggleItem(node);
+                }, onBlur: () => this.onKupBlur(node), onFocus: () => this.onKupFocus(node) }, node.icon ? (h(FImage, { color: `var(${KupThemeColorValues.PRIMARY})`, resource: node.icon, placeholderResource: node.placeholderIcon, sizeX: "1.5em", sizeY: "1.5em", wrapperClass: "accordion-item__icon" })) : null, node.value ? (h("span", { class: "accordion-item__text" }, (_b = node.value) !== null && _b !== void 0 ? _b : '')) : null, wrapper), h("div", { class: itemContentClass }, h("slot", { name: node.id }))));
         }
         return items;
     }
+    closeRowToolbarList() {
+        if (this.toolbarList) {
+            this.kupManager.dynamicPosition.stop(this.toolbarList);
+            this.kupManager.removeClickCallback(__classPrivateFieldGet(this, _KupAccordion_clickCbDropCard, "f"));
+            this.toolbarList.remove();
+            this.kupManager.dynamicPosition.unregister([this.toolbarList]);
+            this.toolbarList = null;
+        }
+    }
+    /**
+     * Create dropdown list for toolbar
+     */
+    createDropDownToolbarList() {
+        if (!__classPrivateFieldGet(this, _KupAccordion_dropDownActionCardAnchor, "f")) {
+            this.kupManager.debug.logMessage(this, 'createDropDownToolbarList: Anchor is null!');
+            return;
+        }
+        if (this.toolbarList) {
+            this.closeRowToolbarList();
+        }
+        if (this.toolbarState.length === 0) {
+            this.kupManager.debug.logMessage(this, 'No toolbar state available.');
+            return;
+        }
+        const listEl = document.createElement('kup-toolbar');
+        listEl.data = this.toolbarState;
+        listEl.addEventListener('kup-toolbar-click', (e) => {
+            this.onKupToolbarItemClick(e);
+            setTimeout(() => {
+                this.closeRowToolbarList();
+            }, 0);
+        });
+        this.toolbarList = listEl;
+        __classPrivateFieldSet(this, _KupAccordion_clickCbDropCard, {
+            cb: () => {
+                this.closeRowToolbarList();
+            },
+            el: this.toolbarList,
+        }, "f");
+        this.kupManager.addClickCallback(__classPrivateFieldGet(this, _KupAccordion_clickCbDropCard, "f"), true);
+        this.rootElement.shadowRoot.appendChild(this.toolbarList);
+        requestAnimationFrame(() => {
+            if (!__classPrivateFieldGet(this, _KupAccordion_dropDownActionCardAnchor, "f")) {
+                this.kupManager.debug.logMessage(this, 'DropDown anchor is still null after delay!');
+                return;
+            }
+            this.kupManager.dynamicPosition.register(this.toolbarList, __classPrivateFieldGet(this, _KupAccordion_dropDownActionCardAnchor, "f"), 0, KupDynamicPositionPlacement.AUTO, true);
+            this.kupManager.dynamicPosition.start(this.toolbarList);
+        });
+    }
+    /**
+     * Create dropdown list for tab info icon
+     */
+    createDropDownInfoList() {
+        if (!__classPrivateFieldGet(this, _KupAccordion_dropDownActionCardAnchor, "f")) {
+            this.kupManager.debug.logMessage(this, 'createDropDownToolbarList: Anchor is null!');
+            return;
+        }
+        if (this.infoList) {
+            this.closeInfoDataList();
+        }
+        if (this.infoState.length === 0) {
+            this.kupManager.debug.logMessage(this, 'No toolbar state available.');
+            return;
+        }
+        const listEl = document.createElement('kup-list');
+        listEl.data = this.infoState;
+        this.infoList = listEl;
+        __classPrivateFieldSet(this, _KupAccordion_clickCbDropCard, {
+            cb: () => {
+                this.closeInfoDataList();
+            },
+            el: this.infoList,
+        }, "f");
+        this.kupManager.addClickCallback(__classPrivateFieldGet(this, _KupAccordion_clickCbDropCard, "f"), true);
+        this.rootElement.shadowRoot.appendChild(this.infoList);
+        requestAnimationFrame(() => {
+            this.kupManager.dynamicPosition.register(this.infoList, __classPrivateFieldGet(this, _KupAccordion_dropDownActionCardAnchor, "f"), 0, KupDynamicPositionPlacement.AUTO, true);
+            this.kupManager.dynamicPosition.start(this.infoList);
+        });
+    }
+    /**
+     * Destroy dropdown list for tab info icon
+     */
+    closeInfoDataList() {
+        if (this.infoList) {
+            this.kupManager.dynamicPosition.stop(this.infoList);
+            this.kupManager.removeClickCallback(__classPrivateFieldGet(this, _KupAccordion_clickCbDropCard, "f"));
+            this.infoList.remove();
+            this.kupManager.dynamicPosition.unregister([this.infoList]);
+            this.infoList = null;
+        }
+    }
     /*-------------------------------------------------*/
     /*          L i f e c y c l e   H o o k s          */
     /*-------------------------------------------------*/
@@ -175,6 +375,7 @@ const KupAccordion$1 = /*@__PURE__*/ proxyCustomElement(class KupAccordion exten
         this.kupManager.theme.register(this);
     }
     componentDidLoad() {
+        this.updateSelectedItems();
         this.applyRipple();
         this.kupManager.debug.logLoad(this, true);
     }
@@ -194,22 +395,27 @@ const KupAccordion$1 = /*@__PURE__*/ proxyCustomElement(class KupAccordion exten
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        const content = this.data && this.data.columns ? this.renderItems() : null;
-        return (h(Host, { key: '6bccc41c0680bb83ec429fba199468a8bcdc3ff9' }, h("style", { key: '5051d2c6cfb8a385568db37969402e965323cc6f' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '632bfcd9acb77fa135b3e925155fdcb30930475f', id: componentWrapperId }, h("div", { key: 'bc7ffd6b0a12fdd22418e0319a595778ee37bad6', class: "accordion" }, content))));
+        const content = this.data && this.data.length ? this.renderItems() : null;
+        return (h(Host, { key: '160f982fd131a7658aca021617c4e7f567193ad3' }, h("style", { key: 'c30ccb77782b4c1826da9c2646aab3e3c2cb7b2d' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '17904c4792e45fb3ac69dfc813b58020bf62b83d', id: componentWrapperId }, h("div", { key: 'c0870a1b510b2733a1b104a467822144a5f51efb', class: "accordion" }, content))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
     }
     get rootElement() { return this; }
     static get watchers() { return {
-        "ripple": ["applyRipple"]
+        "ripple": ["applyRipple"],
+        "data": ["updateSelectedItems"]
     }; }
     static get style() { return KupAccordionStyle0; }
 }, [1, "kup-accordion", {
         "customStyle": [1, "custom-style"],
         "data": [16],
+        "infoIcon": [4, "info-icon"],
         "ripple": [4],
+        "toolbar": [4],
         "sizing": [1],
+        "toolbarCallback": [16],
+        "infoCallback": [16],
         "selectedItems": [32],
         "collapseAll": [64],
         "expandAll": [64],
@@ -218,8 +424,10 @@ const KupAccordion$1 = /*@__PURE__*/ proxyCustomElement(class KupAccordion exten
         "setProps": [64],
         "toggleItem": [64]
     }, undefined, {
-        "ripple": ["applyRipple"]
+        "ripple": ["applyRipple"],
+        "data": ["updateSelectedItems"]
     }]);
+_KupAccordion_clickCbDropCard = new WeakMap(), _KupAccordion_dropDownActionCardAnchor = new WeakMap();
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/kup-activity-timeline.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, F as Fragment, d as Host } from './p-ef8cbd35.js';
-import { k as kupManagerInstance, g as getProps, s as setProps, u as KupDebugCategory, n as getCellValueForDisplay } from './p-73922583.js';
-import { c as componentWrapperId, E as sortRows, d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, e as defineCustomElement$5, f as defineCustomElement$6, g as defineCustomElement$7, h as defineCustomElement$8, i as defineCustomElement$9, j as defineCustomElement$a, k as defineCustomElement$b, l as defineCustomElement$c, m as defineCustomElement$d, n as defineCustomElement$e, o as defineCustomElement$f, p as defineCustomElement$g, q as defineCustomElement$h, r as defineCustomElement$i, s as defineCustomElement$j, t as defineCustomElement$k, u as defineCustomElement$l, v as defineCustomElement$m, w as defineCustomElement$n, x as defineCustomElement$o, y as defineCustomElement$p, z as defineCustomElement$q, A as defineCustomElement$r, B as defineCustomElement$s, C as defineCustomElement$t, D as defineCustomElement$u, F as FImage } from './p-e0031e17.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, u as KupDebugCategory, n as getCellValueForDisplay } from './p-9859e801.js';
+import { c as componentWrapperId, E as sortRows, d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, e as defineCustomElement$5, f as defineCustomElement$6, g as defineCustomElement$7, h as defineCustomElement$8, i as defineCustomElement$9, j as defineCustomElement$a, k as defineCustomElement$b, l as defineCustomElement$c, m as defineCustomElement$d, n as defineCustomElement$e, o as defineCustomElement$f, p as defineCustomElement$g, q as defineCustomElement$h, r as defineCustomElement$i, s as defineCustomElement$j, t as defineCustomElement$k, u as defineCustomElement$l, v as defineCustomElement$m, w as defineCustomElement$n, x as defineCustomElement$o, y as defineCustomElement$p, z as defineCustomElement$q, A as defineCustomElement$r, B as defineCustomElement$s, C as defineCustomElement$t, D as defineCustomElement$u, F as FImage } from './p-55fda958.js';
 
 var KupActivityTimelineProps;
 (function (KupActivityTimelineProps) {

package/dist/components/kup-autocomplete.js

@@ -1,4 +1,4 @@
-import { K as KupAutocomplete$1, D as defineCustomElement$1 } from './p-e0031e17.js';
+import { K as KupAutocomplete$1, D as defineCustomElement$1 } from './p-55fda958.js';
 
 const KupAutocomplete = KupAutocomplete$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kup-badge.js

@@ -1,4 +1,4 @@
-import { G as KupBadge$1, C as defineCustomElement$1 } from './p-e0031e17.js';
+import { G as KupBadge$1, C as defineCustomElement$1 } from './p-55fda958.js';
 
 const KupBadge = KupBadge$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kup-box.js

@@ -1,4 +1,4 @@
-import { K as KupBox$1, d as defineCustomElement$1 } from './p-685106b4.js';
+import { K as KupBox$1, d as defineCustomElement$1 } from './p-3ba7c133.js';
 
 const KupBox = KupBox$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kup-button-list.js

@@ -1,4 +1,4 @@
-import { S as KupButtonList$1, A as defineCustomElement$1 } from './p-e0031e17.js';
+import { S as KupButtonList$1, A as defineCustomElement$1 } from './p-55fda958.js';
 
 const KupButtonList = KupButtonList$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kup-button.js

@@ -1,4 +1,4 @@
-import { R as KupButton$1, B as defineCustomElement$1 } from './p-e0031e17.js';
+import { R as KupButton$1, B as defineCustomElement$1 } from './p-55fda958.js';
 
 const KupButton = KupButton$1;
 const defineCustomElement = defineCustomElement$1;