@sme.up/ketchup 11.0.0-SNAPSHOT-20250410104333 → 11.0.0-SNAPSHOT-20250414143939

package/dist/collection/components/kup-accordion/kup-accordion.js

@@ -1,3 +1,20 @@
+var __classPrivateFieldSet = (this && this.__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 = (this && this.__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;
 import { forceUpdate, h, Host, } from "@stencil/core";
 import { MDCRipple } from "@material/ripple";
 import { KupComponentSizing, } from "../../types/GenericTypes";
@@ -7,24 +24,79 @@ import { KupAccordionProps, } from "./kup-accordion-declarations";
 import { FImage } from "../../f-components/f-image/f-image";
 import { componentWrapperId } from "../../variables/GenericVariables";
 import { KupThemeColorValues, KupThemeIconValues, } from "../../managers/kup-theme/kup-theme-declarations";
+import { KupDynamicPositionPlacement, } from "../../managers/kup-dynamic-position/kup-dynamic-position-declarations";
 export class KupAccordion {
     constructor() {
         /*-------------------------------------------------*/
         /*       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,
+        });
+    }
+    onKupClick(i, node) {
+        this.data[i].contentVisible = !this.data[i].contentVisible;
+        this.updateSelectedItems();
+        this.kupClick.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                */
@@ -48,9 +120,9 @@ export class KupAccordion {
      */
     async collapseAll() {
         const ids = [];
-        for (let i = 0; i < this.data.columns.length; i++) {
-            const column = this.data.columns[i];
-            const itemName = column.name;
+        for (let i = 0; i < this.data.length; i++) {
+            const node = this.data[i];
+            const itemName = node.id;
             if (!this.isItemExpandible(itemName) &&
                 this.isItemSelected(itemName)) {
                 ids.push(itemName);
@@ -63,9 +135,9 @@ export class KupAccordion {
      */
     async expandAll() {
         const ids = [];
-        for (let i = 0; i < this.data.columns.length; i++) {
-            const column = this.data.columns[i];
-            const itemName = column.name;
+        for (let i = 0; i < this.data.length; i++) {
+            const node = this.data[i];
+            const itemName = node.id;
             if (this.isItemExpandible(itemName)) {
                 ids.push(itemName);
             }
@@ -97,27 +169,34 @@ export class KupAccordion {
      * This method activates or deactivates an item
      * @param {string} itemName - Name of the item.
      */
-    async toggleItem(itemName) {
-        const isItemExpandible = this.isItemExpandible(itemName);
+    async toggleItem(node) {
         const ids = [...this.selectedItems];
-        if (ids.includes(itemName)) {
-            ids.splice(ids.indexOf(itemName), 1);
+        if (ids.includes(node.id)) {
+            ids.splice(ids.indexOf(node.id), 1);
         }
         else {
-            ids.push(itemName);
+            ids.push(node.id);
         }
         this.selectedItems = ids;
-        if (!isItemExpandible) {
-            this.kupAccordionItemSelected.emit({
-                comp: this,
-                id: this.rootElement.id,
-                itemName: itemName,
-            });
-        }
+        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         */
     /*-------------------------------------------------*/
+    updateSelectedItems() {
+        const ids = [];
+        for (let i = 0; i < this.data.length; i++) {
+            const node = this.data[i];
+            if (node.contentVisible) {
+                ids.push(node.id);
+            }
+        }
+        this.selectedItems = ids;
+    }
     isItemExpandible(itemName) {
         return this.slotsNames.includes(itemName);
     }
@@ -125,6 +204,7 @@ export class KupAccordion {
         return this.selectedItems.includes(itemName);
     }
     renderItems() {
+        var _a, _b;
         const items = [];
         const slots = Array.prototype.slice.call(this.rootElement.children, 0);
         this.slotsNames = [];
@@ -132,9 +212,9 @@ export class KupAccordion {
             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;
+        for (let i = 0; i < this.data.length; i++) {
+            const node = this.data[i];
+            const itemName = node.id;
             const isItemSelected = this.isItemSelected(itemName);
             const isItemExpandible = this.isItemExpandible(itemName);
             const itemHeaderClass = {
@@ -150,10 +230,128 @@ export class KupAccordion {
                     ? 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 && (h(FImage, { resource: "info_outline", sizeX: "16px", sizeY: "16px", onClick: async (event) => {
+                    event.stopPropagation();
+                    const el = event.currentTarget;
+                    const data = await this.infoCallback();
+                    this.infoState = data;
+                    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 && (h(FImage, { resource: "more_vert", sizeX: "16px", sizeY: "16px", onClick: async (event) => {
+                    event.stopPropagation();
+                    const el = event.currentTarget;
+                    const data = await this.toolbarCallback();
+                    this.toolbarState = data;
+                    if (this.toolbarState.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: () => this.toggleItem(node), onBlur: () => this.onKupBlur(node),
+                // onClick={() => this.onKupClick(i, 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          */
     /*-------------------------------------------------*/
@@ -162,6 +360,7 @@ export class KupAccordion {
         this.kupManager.theme.register(this);
     }
     componentDidLoad() {
+        this.updateSelectedItems();
         this.applyRipple();
         this.kupManager.debug.logLoad(this, true);
     }
@@ -181,8 +380,8 @@ export class KupAccordion {
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        const content = this.data && this.data.columns ? this.renderItems() : null;
-        return (h(Host, { key: 'e833d2f12eaadc0a52bbfa292e29c92e3a7d737c' }, h("style", { key: '93b4315cd2a0f9834ec9f4cf70c0c2cf6baf91cb' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'a9cbd70c8e08f1b00cdee843c8b34540e49a7541', id: componentWrapperId }, h("div", { key: '9ddf2bd8d16f97c3004948e31dcd2bb17ee155b6', class: "accordion" }, content))));
+        const content = this.data && this.data.length ? this.renderItems() : null;
+        return (h(Host, { key: '1eab0235eab32cfa1132d4f918b56e2788f10e3e' }, h("style", { key: '5562ce0c27752221054bfe75c5bc0fa73483c551' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '8023ab06eb1040fd72788e4e94f8cf520da31a12', id: componentWrapperId }, h("div", { key: '8cfc0ba359969c76ff2dab13ed3c80f3e03e5828', class: "accordion" }, content))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -229,13 +428,13 @@ export class KupAccordion {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "KupAccordionData",
-                    "resolved": "KupAccordionData",
+                    "original": "KupAccordionNode[]",
+                    "resolved": "KupAccordionNode[]",
                     "references": {
-                        "KupAccordionData": {
+                        "KupAccordionNode": {
                             "location": "import",
                             "path": "./kup-accordion-declarations",
-                            "id": "src/components/kup-accordion/kup-accordion-declarations.ts::KupAccordionData"
+                            "id": "src/components/kup-accordion/kup-accordion-declarations.ts::KupAccordionNode"
                         }
                     }
                 },
@@ -250,6 +449,27 @@ export class KupAccordion {
                 },
                 "defaultValue": "null"
             },
+            "infoIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "When true, it will show the info activation icon."
+                },
+                "attribute": "info-icon",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "ripple": {
                 "type": "boolean",
                 "mutable": false,
@@ -271,6 +491,27 @@ export class KupAccordion {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "toolbar": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "When true, it will show the toolbar activation icon."
+                },
+                "attribute": "toolbar",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "sizing": {
                 "type": "string",
                 "mutable": false,
@@ -292,11 +533,61 @@ export class KupAccordion {
                             "name": "default",
                             "text": "KupComponentSizing.SMALL"
                         }],
-                    "text": "Sets the type of the button"
+                    "text": "Sets the type of the component sizing"
                 },
                 "attribute": "sizing",
                 "reflect": false,
                 "defaultValue": "KupComponentSizing.SMALL"
+            },
+            "toolbarCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => Promise<KupDataNode[]>",
+                    "resolved": "() => Promise<KupDataNode[]>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KupDataNode": {
+                            "location": "import",
+                            "path": "../../managers/kup-data/kup-data-declarations",
+                            "id": "src/managers/kup-data/kup-data-declarations.ts::KupDataNode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "infoCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => Promise<KupDataNode[]>",
+                    "resolved": "() => Promise<KupDataNode[]>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KupDataNode": {
+                            "location": "import",
+                            "path": "../../managers/kup-data/kup-data-declarations",
+                            "id": "src/managers/kup-data/kup-data-declarations.ts::KupDataNode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
             }
         };
     }
@@ -307,23 +598,128 @@ export class KupAccordion {
     }
     static get events() {
         return [{
-                "method": "kupAccordionItemSelected",
-                "name": "kup-accordion-itemselected",
+                "method": "kupBlur",
+                "name": "kup-accordion-blur",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered when the accordion loses focus."
+                },
+                "complexType": {
+                    "original": "KupAccordionEventPayload",
+                    "resolved": "KupAccordionEventPayload",
+                    "references": {
+                        "KupAccordionEventPayload": {
+                            "location": "import",
+                            "path": "./kup-accordion-declarations",
+                            "id": "src/components/kup-accordion/kup-accordion-declarations.ts::KupAccordionEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "kupClick",
+                "name": "kup-accordion-click",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered when an item is selected."
+                },
+                "complexType": {
+                    "original": "KupAccordionEventPayload",
+                    "resolved": "KupAccordionEventPayload",
+                    "references": {
+                        "KupAccordionEventPayload": {
+                            "location": "import",
+                            "path": "./kup-accordion-declarations",
+                            "id": "src/components/kup-accordion/kup-accordion-declarations.ts::KupAccordionEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "kupIconClick",
+                "name": "kup-accordion-iconclick",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered when the icon inside accordion is clicked."
+                },
+                "complexType": {
+                    "original": "KupAccordionEventPayload",
+                    "resolved": "KupAccordionEventPayload",
+                    "references": {
+                        "KupAccordionEventPayload": {
+                            "location": "import",
+                            "path": "./kup-accordion-declarations",
+                            "id": "src/components/kup-accordion/kup-accordion-declarations.ts::KupAccordionEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "kupInfoIconClick",
+                "name": "kup-accordion-infoiconclick",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered when the icon inside accordion is clicked."
+                },
+                "complexType": {
+                    "original": "KupAccordionEventPayload",
+                    "resolved": "KupAccordionEventPayload",
+                    "references": {
+                        "KupAccordionEventPayload": {
+                            "location": "import",
+                            "path": "./kup-accordion-declarations",
+                            "id": "src/components/kup-accordion/kup-accordion-declarations.ts::KupAccordionEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "kupFocus",
+                "name": "kup-accordion-focus",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered when the accordion is focused."
+                },
+                "complexType": {
+                    "original": "KupAccordionEventPayload",
+                    "resolved": "KupAccordionEventPayload",
+                    "references": {
+                        "KupAccordionEventPayload": {
+                            "location": "import",
+                            "path": "./kup-accordion-declarations",
+                            "id": "src/components/kup-accordion/kup-accordion-declarations.ts::KupAccordionEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "kupToolbarItemClick",
+                "name": "kup-accordion-toolbaritemclick",
                 "bubbles": true,
                 "cancelable": false,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Fired when an item is selected."
+                    "text": "Triggered when a list item is clicked."
                 },
                 "complexType": {
-                    "original": "KupAccordionItemSelectedEventPayload",
-                    "resolved": "KupAccordionItemSelectedEventPayload",
+                    "original": "KupAccordionEventPayload",
+                    "resolved": "KupAccordionEventPayload",
                     "references": {
-                        "KupAccordionItemSelectedEventPayload": {
+                        "KupAccordionEventPayload": {
                             "location": "import",
                             "path": "./kup-accordion-declarations",
-                            "id": "src/components/kup-accordion/kup-accordion-declarations.ts::KupAccordionItemSelectedEventPayload"
+                            "id": "src/components/kup-accordion/kup-accordion-declarations.ts::KupAccordionEventPayload"
                         }
                     }
                 }
@@ -445,16 +841,21 @@ export class KupAccordion {
             },
             "toggleItem": {
                 "complexType": {
-                    "signature": "(itemName: string) => Promise<void>",
+                    "signature": "(node: KupAccordionNode) => Promise<void>",
                     "parameters": [{
-                            "name": "itemName",
-                            "type": "string",
-                            "docs": "- Name of the item."
+                            "name": "node",
+                            "type": "KupAccordionNode",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "KupAccordionNode": {
+                            "location": "import",
+                            "path": "./kup-accordion-declarations",
+                            "id": "src/components/kup-accordion/kup-accordion-declarations.ts::KupAccordionNode"
                         }
                     },
                     "return": "Promise<void>"
@@ -477,3 +878,4 @@ export class KupAccordion {
             }];
     }
 }
+_KupAccordion_clickCbDropCard = new WeakMap(), _KupAccordion_dropDownActionCardAnchor = new WeakMap();

package/dist/collection/components/kup-image/assets/svg/bullseye-arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,10.84 21.79,9.69 21.39,8.61L19.79,10.21C19.93,10.8 20,11.4 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.6,4 13.2,4.07 13.79,4.21L15.4,2.6C14.31,2.21 13.16,2 12,2M19,2L15,6V7.5L12.45,10.05C12.3,10 12.15,10 12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12C14,11.85 14,11.7 13.95,11.55L16.5,9H18L22,5H19V2M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12H16A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8V6Z" /></svg>

package/dist/collection/components/kup-image/assets/svg/email-stacked.svg

@@ -0,0 +1 @@
+<ns0:svg xmlns:ns0="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#1f1f1f"><ns0:path d="M220-240q-24 0-42-18.5T160-300v-480q0-24 18-42t42-18h640q24 0 42 18t18 42v480q0 23-18 41.5T860-240H220Zm320-200L220-706v406h640v-406L540-440Zm0-79 315-261H225l315 261ZM100-120q-24 0-42-18.5T40-180v-559h60v559h720v60H100Zm760-586v-74H220v74-74h640v74Z" /></ns0:svg>

package/dist/collection/components/kup-image/assets/svg/filter-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2.39 1.73L1.11 3L9.5 11.37L9.97 12H10V17.87C9.96 18.16 10.06 18.47 10.29 18.7L12.3 20.71C12.69 21.1 13.32 21.1 13.71 20.71C13.94 20.5 14.04 20.18 14 19.88V15.89L20.84 22.73L22.11 21.46L14 13.35L9.41 8.76L4.15 3.5L2.39 1.73M6.21 3L14.54 11.34L19.79 4.62C20.13 4.19 20.05 3.56 19.62 3.22C19.43 3.08 19.22 3 19 3H6.21Z" /></svg>