@sme.up/ketchup 11.0.0-SNAPSHOT-20250515094227 → 11.0.0-SNAPSHOT-20250516092441

package/dist/cjs/kup-accordion.cjs.entry.js

@@ -51,7 +51,6 @@ const KupAccordion = class {
         this.kupBlur = index.createEvent(this, "kup-accordion-blur", 6);
         this.kupClick = index.createEvent(this, "kup-accordion-click", 6);
         this.kupIconClick = index.createEvent(this, "kup-accordion-iconclick", 6);
-        this.kupInfoIconClick = index.createEvent(this, "kup-accordion-infoiconclick", 6);
         this.kupFocus = index.createEvent(this, "kup-accordion-focus", 6);
         this.kupToolbarItemClick = index.createEvent(this, "kup-accordion-toolbaritemclick", 6);
         /*-------------------------------------------------*/
@@ -86,15 +85,6 @@ const KupAccordion = class {
             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');
@@ -145,6 +135,9 @@ const KupAccordion = class {
         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);
                 }
@@ -162,10 +155,8 @@ const KupAccordion = class {
         const ids = [];
         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);
+            if (!this.isItemExpandible(node) && this.isItemSelected(node)) {
+                ids.push(node.id);
             }
         }
         this.selectedItems = ids;
@@ -177,9 +168,8 @@ const KupAccordion = class {
         const ids = [];
         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);
+            if (this.isItemExpandible(node)) {
+                ids.push(node.id);
             }
         }
         this.selectedItems = ids;
@@ -210,14 +200,14 @@ const KupAccordion = class {
      * @param {string} itemName - Name of the item.
      */
     async toggleItem(node) {
-        const ids = [...this.selectedItems];
-        if (ids.includes(node.id)) {
-            ids.splice(ids.indexOf(node.id), 1);
+        if (!this.isItemExpandible(node)) {
+            return;
         }
-        else {
-            ids.push(node.id);
+        if (node.contentVisible === undefined) {
+            node.contentVisible = true;
         }
-        this.selectedItems = ids;
+        node.contentVisible = !node.contentVisible;
+        this.updateSelectedItems();
         this.kupClick.emit({
             comp: this,
             id: this.rootElement.id,
@@ -227,11 +217,11 @@ const KupAccordion = class {
     /*-------------------------------------------------*/
     /*           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;
@@ -244,9 +234,8 @@ const KupAccordion = class {
         }
         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 isItemSelected = this.isItemSelected(node);
+            const isItemExpandible = this.isItemExpandible(node);
             const itemHeaderClass = {
                 'accordion-item__header': true,
                 'accordion-item__header--selected': !isItemExpandible && isItemSelected ? true : false,
@@ -260,32 +249,33 @@ const KupAccordion = class {
                     ? true
                     : false,
             };
-            const wrapper = (index.h("div", { class: "accordion-rigtbuttons" }, this.infoIcon && (index.h(fImage.FImage, { resource: "info_outline", sizeX: "16px", sizeY: "16px", onClick: async (event) => {
+            const wrapper = (index.h("div", { class: "accordion-rigtbuttons" }, this.infoIcon && this.infoCallback && (index.h(fImage.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;
+                    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 && (index.h(fImage.FImage, { resource: "more_vert", sizeX: "16px", sizeY: "16px", onClick: async (event) => {
+                }, wrapperClass: "tab__iconToolbar iconInfo" })), this.toolbar && this.toolbarCallback && (index.h(fImage.FImage, { resource: "more_vert", sizeX: "16px", sizeY: "16px", onClick: async (event) => {
+                    var _a;
                     event.stopPropagation();
                     const el = event.currentTarget;
-                    const data = await this.toolbarCallback();
-                    this.toolbarState = data;
-                    if (this.toolbarState.length > 0) {
+                    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 ? (index.h("div", { class: `accordion-item__dropdown kup-icon ${kupManager.KupThemeIconValues.DROPDOWN.replace('--', '')}` })) : null));
-            items.push(index.h("div", { class: "accordion-item" }, index.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 ? (index.h(fImage.FImage, { color: `var(${kupManager.KupThemeColorValues.PRIMARY})`, resource: node.icon, placeholderResource: node.placeholderIcon, sizeX: "1.5em", sizeY: "1.5em", wrapperClass: "accordion-item__icon" })) : null, node.value ? (index.h("span", { class: "accordion-item__text" }, (_b = node.value) !== null && _b !== void 0 ? _b : '')) : null, wrapper), index.h("div", { class: itemContentClass }, index.h("slot", { name: node.id }))));
+            items.push(index.h("div", { class: "accordion-item" }, index.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 ? (index.h(fImage.FImage, { color: `var(${kupManager.KupThemeColorValues.PRIMARY})`, resource: node.icon, placeholderResource: node.placeholderIcon, sizeX: "1.5em", sizeY: "1.5em", wrapperClass: "accordion-item__icon" })) : null, node.value ? (index.h("span", { class: "accordion-item__text" }, (_b = node.value) !== null && _b !== void 0 ? _b : '')) : null, wrapper), index.h("div", { class: itemContentClass }, index.h("slot", { name: node.id }))));
         }
         return items;
     }
@@ -411,7 +401,7 @@ const KupAccordion = class {
     }
     render() {
         const content = this.data && this.data.length ? this.renderItems() : null;
-        return (index.h(index.Host, { key: '3f9af91ddcf48e60b8ac506dfbc7991eea418f70' }, index.h("style", { key: '3179a55c30b7a726f2f6cc20f15fd4c3003160c5' }, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { key: 'f7f9910a40af9bb7f0891523d1b30e3d7677c5b6', id: GenericVariables.componentWrapperId }, index.h("div", { key: 'c267fd8005f786b4a0e9207ab553b12a7044cc46', class: "accordion" }, content))));
+        return (index.h(index.Host, { key: '2b6280c1daf20870cb5a73f3c8f2c8e7272d9cd4' }, index.h("style", { key: '92169351854c60b65712dc174214ac450172dbf1' }, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { key: '20a65571ec0481ddf2938e29f48c2d26c7c637c7', id: GenericVariables.componentWrapperId }, index.h("div", { key: '8389a5bd3752c0ee21658de14f5e3590890b944c', class: "accordion" }, content))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);

package/dist/cjs/kup-autocomplete_29.cjs.entry.js

@@ -17620,7 +17620,6 @@ const KupTabBar = class {
         this.kupBlur = index.createEvent(this, "kup-tabbar-blur", 6);
         this.kupClick = index.createEvent(this, "kup-tabbar-click", 6);
         this.kupIconClick = index.createEvent(this, "kup-tabbar-iconclick", 6);
-        this.kupInfoIconClick = index.createEvent(this, "kup-tabbar-infoiconclick", 6);
         this.kupFocus = index.createEvent(this, "kup-tabbar-focus", 6);
         this.kupToolbarItemClick = index.createEvent(this, "kup-tabbar-toolbaritemclick", 6);
         /*-------------------------------------------------*/
@@ -17910,26 +17909,30 @@ const KupTabBar = class {
                 'kup-danger': node.danger,
             };
             const tabEl = (index.h("f-button", { class: tabClass, role: "tab", "aria-selected": node.active ? true : false, tabIndex: i, title: node.title ? node.title : null, onBlur: () => this.onKupBlur(i, node), onClick: () => this.onKupClick(i, node), onFocus: () => this.onKupFocus(i, node) }, index.h("span", { class: "tab__content" }, node.icon ? (index.h(fImage.FImage, { color: `var(${kupManager$2.KupThemeColorValues.PRIMARY})`, resource: node.icon, placeholderResource: node.placeholderIcon, wrapperClass: "tab__icon" })) : null, node.value ? (index.h("span", { class: "tab__text-label" }, node.value)) : null), this.infoIcon && (index.h(fImage.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.');
+                    if (node.active) {
+                        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 && (index.h(fImage.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.');
+                    if (node.active) {
+                        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" })), index.h("span", { class: `tab-indicator ${node.active ? ' tab-indicator--active' : ''}` }, index.h("span", { class: "tab-indicator__content tab-indicator__content--underline" }))));
             tabBar.push(tabEl);

package/dist/collection/assets/accordion.js

@@ -29,3 +29,57 @@ ksAccordion.data = ksData;
 
 const emptyAccordion = document.getElementById('empty');
 emptyAccordion.data = {};
+
+const accordionIntoAnother = document.getElementById(
+    'accordionIntoAnother-main'
+);
+const props = {
+    customStyle: '',
+    data: [
+        {
+            contentVisible: false,
+            value: 'First accordion',
+            id: 'main-first',
+        },
+        {
+            contentVisible: false,
+            value: 'Second accordion',
+            id: 'main-second',
+            expandable: true,
+        },
+    ],
+    infoIcon: false,
+    ripple: false,
+    toolbar: true,
+    sizing: 'small',
+};
+for (const key in props) {
+    accordionIntoAnother[key] = props[key];
+}
+accordionIntoAnother.toolbarCallback = (e) => {
+    console.log('Toolbar callback', e);
+};
+
+let child = document.getElementById('accordionIntoAnother-main-second');
+const childProps = {
+    customStyle: '',
+    data: [
+        {
+            contentVisible: false,
+            value: 'First child accordion',
+            id: 'child-first',
+        },
+        {
+            contentVisible: false,
+            value: 'Second child accordion',
+            id: 'child-second',
+            expandable: true,
+        },
+    ],
+    infoIcon: false,
+    ripple: false,
+    toolbar: true,
+};
+for (const key in childProps) {
+    child[key] = childProps[key];
+}

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

@@ -59,15 +59,6 @@ export class KupAccordion {
             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');
@@ -118,6 +109,9 @@ export class KupAccordion {
         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);
                 }
@@ -135,10 +129,8 @@ export class KupAccordion {
         const ids = [];
         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);
+            if (!this.isItemExpandible(node) && this.isItemSelected(node)) {
+                ids.push(node.id);
             }
         }
         this.selectedItems = ids;
@@ -150,9 +142,8 @@ export class KupAccordion {
         const ids = [];
         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);
+            if (this.isItemExpandible(node)) {
+                ids.push(node.id);
             }
         }
         this.selectedItems = ids;
@@ -183,14 +174,14 @@ export class KupAccordion {
      * @param {string} itemName - Name of the item.
      */
     async toggleItem(node) {
-        const ids = [...this.selectedItems];
-        if (ids.includes(node.id)) {
-            ids.splice(ids.indexOf(node.id), 1);
+        if (!this.isItemExpandible(node)) {
+            return;
         }
-        else {
-            ids.push(node.id);
+        if (node.contentVisible === undefined) {
+            node.contentVisible = true;
         }
-        this.selectedItems = ids;
+        node.contentVisible = !node.contentVisible;
+        this.updateSelectedItems();
         this.kupClick.emit({
             comp: this,
             id: this.rootElement.id,
@@ -200,11 +191,11 @@ export class KupAccordion {
     /*-------------------------------------------------*/
     /*           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;
@@ -217,9 +208,8 @@ export class KupAccordion {
         }
         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 isItemSelected = this.isItemSelected(node);
+            const isItemExpandible = this.isItemExpandible(node);
             const itemHeaderClass = {
                 'accordion-item__header': true,
                 'accordion-item__header--selected': !isItemExpandible && isItemSelected ? true : false,
@@ -233,32 +223,33 @@ export class KupAccordion {
                     ? true
                     : false,
             };
-            const wrapper = (h("div", { class: "accordion-rigtbuttons" }, this.infoIcon && (h(FImage, { resource: "info_outline", sizeX: "16px", sizeY: "16px", onClick: async (event) => {
+            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;
-                    const data = await this.infoCallback();
-                    this.infoState = data;
+                    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 && (h(FImage, { resource: "more_vert", sizeX: "16px", sizeY: "16px", onClick: async (event) => {
+                }, 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;
-                    const data = await this.toolbarCallback();
-                    this.toolbarState = data;
-                    if (this.toolbarState.length > 0) {
+                    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: () => 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 }))));
+            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;
     }
@@ -384,7 +375,7 @@ export class KupAccordion {
     }
     render() {
         const content = this.data && this.data.length ? this.renderItems() : null;
-        return (h(Host, { key: '3f9af91ddcf48e60b8ac506dfbc7991eea418f70' }, h("style", { key: '3179a55c30b7a726f2f6cc20f15fd4c3003160c5' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'f7f9910a40af9bb7f0891523d1b30e3d7677c5b6', id: componentWrapperId }, h("div", { key: 'c267fd8005f786b4a0e9207ab553b12a7044cc46', class: "accordion" }, content))));
+        return (h(Host, { key: '2b6280c1daf20870cb5a73f3c8f2c8e7272d9cd4' }, h("style", { key: '92169351854c60b65712dc174214ac450172dbf1' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '20a65571ec0481ddf2938e29f48c2d26c7c637c7', id: componentWrapperId }, h("div", { key: '8389a5bd3752c0ee21658de14f5e3590890b944c', class: "accordion" }, content))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -663,27 +654,6 @@ export class KupAccordion {
                         }
                     }
                 }
-            }, {
-                "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",

package/dist/collection/components/kup-tab-bar/kup-tab-bar.js

@@ -314,26 +314,30 @@ export class KupTabBar {
                 'kup-danger': node.danger,
             };
             const tabEl = (h("f-button", { class: tabClass, role: "tab", "aria-selected": node.active ? true : false, tabIndex: i, title: node.title ? node.title : null, onBlur: () => this.onKupBlur(i, node), onClick: () => this.onKupClick(i, node), onFocus: () => this.onKupFocus(i, node) }, h("span", { class: "tab__content" }, node.icon ? (h(FImage, { color: `var(${KupThemeColorValues.PRIMARY})`, resource: node.icon, placeholderResource: node.placeholderIcon, wrapperClass: "tab__icon" })) : null, node.value ? (h("span", { class: "tab__text-label" }, node.value)) : null), 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.');
+                    if (node.active) {
+                        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.');
+                    if (node.active) {
+                        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" })), h("span", { class: `tab-indicator ${node.active ? ' tab-indicator--active' : ''}` }, h("span", { class: "tab-indicator__content tab-indicator__content--underline" }))));
             tabBar.push(tabEl);
@@ -650,27 +654,6 @@ export class KupTabBar {
                         }
                     }
                 }
-            }, {
-                "method": "kupInfoIconClick",
-                "name": "kup-tabbar-infoiconclick",
-                "bubbles": true,
-                "cancelable": false,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Triggered when the icon inside tab is clicked."
-                },
-                "complexType": {
-                    "original": "KupTabBarEventPayload",
-                    "resolved": "KupTabBarEventPayload",
-                    "references": {
-                        "KupTabBarEventPayload": {
-                            "location": "import",
-                            "path": "./kup-tab-bar-declarations",
-                            "id": "src/components/kup-tab-bar/kup-tab-bar-declarations.ts::KupTabBarEventPayload"
-                        }
-                    }
-                }
             }, {
                 "method": "kupFocus",
                 "name": "kup-tabbar-focus",