@sme.up/ketchup 11.0.0-SNAPSHOT-20250224081053 → 11.0.0-SNAPSHOT-20250224140011

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

@@ -30,6 +30,8 @@ export class KupTabBar {
         /*-------------------------------------------------*/
         /*       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.
          */
@@ -43,11 +45,13 @@ export class KupTabBar {
         this.value = '';
         this.customStyle = '';
         this.data = null;
+        this.infoIcon = false;
         this.variant = KupTabbarStyling.FLAT;
         this.dense = false;
         this.ripple = false;
         this.toolbar = false;
-        this.toolbarData = undefined;
+        this.toolbarCallback = undefined;
+        this.infoCallback = undefined;
     }
     onKupBlur(i, node) {
         this.kupBlur.emit({
@@ -70,16 +74,22 @@ export class KupTabBar {
             node: node,
         });
     }
-    onKupIconClick(i, node, el) {
+    onKupIconClick(el) {
+        if (!el) {
+            this.kupManager.debug.logMessage(this, 'onKupIconClick: Element is null');
+            return;
+        }
         __classPrivateFieldSet(this, _KupTabBar_dropDownActionCardAnchor, el, "f");
-        this.kupIconClick.emit({
-            comp: this,
-            id: this.rootElement.id,
-            index: i,
-            node: node,
-        });
         this.createDropDownToolbarList();
     }
+    onKupInfoIconClick(el) {
+        if (!el) {
+            this.kupManager.debug.logMessage(this, 'onKupIconClick: Element is null');
+            return;
+        }
+        __classPrivateFieldSet(this, _KupTabBar_dropDownActionCardAnchor, el, "f");
+        this.createDropDownInfoList();
+    }
     onKupFocus(i, node) {
         this.kupFocus.emit({
             comp: this,
@@ -155,15 +165,27 @@ export class KupTabBar {
             this.kupManager.dynamicPosition.stop(this.toolbarList);
             this.kupManager.removeClickCallback(__classPrivateFieldGet(this, _KupTabBar_clickCbDropCard, "f"));
             this.toolbarList.remove();
+            this.kupManager.dynamicPosition.unregister([this.toolbarList]);
             this.toolbarList = null;
         }
     }
+    /**
+     * Create dropdown list for toolbar
+     */
     createDropDownToolbarList() {
+        if (!__classPrivateFieldGet(this, _KupTabBar_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.toolbarData;
+        listEl.data = this.toolbarState;
         listEl.addEventListener('kup-toolbar-click', (e) => {
             this.onKupToolbarItemClick(e);
             setTimeout(() => {
@@ -180,10 +202,57 @@ export class KupTabBar {
         this.kupManager.addClickCallback(__classPrivateFieldGet(this, _KupTabBar_clickCbDropCard, "f"), true);
         this.rootElement.shadowRoot.appendChild(this.toolbarList);
         requestAnimationFrame(() => {
+            if (!__classPrivateFieldGet(this, _KupTabBar_dropDownActionCardAnchor, "f")) {
+                this.kupManager.debug.logMessage(this, 'DropDown anchor is still null after delay!');
+                return;
+            }
             this.kupManager.dynamicPosition.register(this.toolbarList, __classPrivateFieldGet(this, _KupTabBar_dropDownActionCardAnchor, "f"), 0, KupDynamicPositionPlacement.AUTO, true);
             this.kupManager.dynamicPosition.start(this.toolbarList);
         });
     }
+    /**
+     * Create dropdown list for tab info icon
+     */
+    createDropDownInfoList() {
+        if (!__classPrivateFieldGet(this, _KupTabBar_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, _KupTabBar_clickCbDropCard, {
+            cb: () => {
+                this.closeInfoDataList();
+            },
+            el: this.infoList,
+        }, "f");
+        this.kupManager.addClickCallback(__classPrivateFieldGet(this, _KupTabBar_clickCbDropCard, "f"), true);
+        this.rootElement.shadowRoot.appendChild(this.infoList);
+        requestAnimationFrame(() => {
+            this.kupManager.dynamicPosition.register(this.infoList, __classPrivateFieldGet(this, _KupTabBar_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, _KupTabBar_clickCbDropCard, "f"));
+            this.infoList.remove();
+            this.kupManager.dynamicPosition.unregister([this.infoList]);
+            this.infoList = null;
+        }
+    }
     consistencyCheck() {
         let activeTabs = 0;
         let lastActiveOccurrence = 0;
@@ -244,10 +313,29 @@ export class KupTabBar {
                 'kup-dense': this.dense,
                 'kup-danger': node.danger,
             };
-            const tabEl = (h("f-button", { class: tabClass, role: "tab", "aria-selected": this.data[i].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" }, this.data[i].value)) : null), this.toolbar && (h(FImage, { resource: "more_vert", sizeX: "16px", sizeY: "16px", onClick: (event) => {
+            const tabEl = (h("f-button", { class: tabClass, role: "tab", "aria-selected": this.data[i].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" }, this.data[i].value)) : null), this.infoIcon && (h(FImage, { resource: "info_outline", sizeX: "16px", sizeY: "16px", onClick: async (event) => {
                     event.stopPropagation();
-                    this.onKupIconClick(i, node, event.currentTarget);
-                }, wrapperClass: "tab__iconToolbar" })), h("span", { class: `tab-indicator ${node.active ? ' tab-indicator--active' : ''}` }, h("span", { class: "tab-indicator__content tab-indicator__content--underline" }))));
+                    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" })), h("span", { class: `tab-indicator ${node.active ? ' tab-indicator--active' : ''}` }, h("span", { class: "tab-indicator__content tab-indicator__content--underline" }))));
             tabBar.push(tabEl);
         }
         const tabbarRole = {
@@ -260,6 +348,12 @@ export class KupTabBar {
     disconnectedCallback() {
         this.kupManager.scrollOnHover.unregister(this.scrollArea);
         this.kupManager.theme.unregister(this);
+        if (this.toolbarList) {
+            this.kupManager.dynamicPosition.unregister([this.toolbarList]);
+        }
+        if (this.infoList) {
+            this.kupManager.dynamicPosition.unregister([this.infoList]);
+        }
     }
     static get is() { return "kup-tab-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -324,6 +418,27 @@ export class KupTabBar {
                 },
                 "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 enabled displays toolbar item inside each single tab."
+                },
+                "attribute": "info-icon",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,
@@ -414,13 +529,17 @@ export class KupTabBar {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "toolbarData": {
+            "toolbarCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "KupDataNode[]",
-                    "resolved": "KupDataNode[]",
+                    "original": "() => Promise<KupDataNode[]>",
+                    "resolved": "() => Promise<KupDataNode[]>",
                     "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
                         "KupDataNode": {
                             "location": "import",
                             "path": "../../managers/kup-data/kup-data-declarations",
@@ -431,11 +550,33 @@ export class KupTabBar {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "null"
-                        }],
-                    "text": "Display DataNode Toolbar."
+                    "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": ""
                 }
             }
         };
@@ -509,6 +650,27 @@ 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",

package/dist/collection/components/kup-toolbar/kup-toolbar.css

@@ -145,7 +145,7 @@
 .parent-class {
   position: relative;
   cursor: pointer;
-  width: 200px;
+  min-width: 175px;
   background-color: var(--kup-gray-color-10);
   display: flex;
   justify-content: space-between;
@@ -165,6 +165,11 @@
   display: flex;
   gap: 8px;
   align-items: center;
+  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;
 }
 .parent-class:hover:not(.toolbar-item-disabled):not(:has(> .f-cell)) {
   background-color: var(--kup-gray-color-10-hover);
@@ -233,12 +238,4 @@
 }
 .nested-class .f-cell .f-cell__content .f-radio .form-field:hover {
   background-color: var(--kup-gray-color-10-hover);
-}
-.nested-class .f-cell .f-cell__content .f-radio .form-field .radio {
-  padding: var(--kup-space-03) 0 var(--kup-space-03) var(--kup-space-03);
-}
-.nested-class .f-cell .f-cell__content .f-radio .form-field label {
-  width: 100%;
-  cursor: pointer;
-  padding: var(--kup-space-03);
 }

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

@@ -29,6 +29,8 @@ export class KupTypography {
         /*-------------------------------------------------*/
         /*       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.
          */
@@ -36,10 +38,12 @@ export class KupTypography {
         _KupTypography_clickCbDropCard.set(this, null);
         _KupTypography_dropDownActionCardAnchor.set(this, null);
         this.customStyle = '';
+        this.infoIcon = false;
         this.toolbar = true;
-        this.toolbarData = undefined;
         this.type = FTypographyType.BODY_COMPACT;
         this.value = null;
+        this.toolbarCallback = undefined;
+        this.infoCallBack = undefined;
     }
     onKupClick() {
         this.kupClick.emit({
@@ -48,12 +52,20 @@ export class KupTypography {
             value: this.value,
         });
     }
+    onKupInfoIconClick(el) {
+        if (!el) {
+            this.kupManager.debug.logMessage(this, 'onKupIconClick: Element is null');
+            return;
+        }
+        __classPrivateFieldSet(this, _KupTypography_dropDownActionCardAnchor, el, "f");
+        this.createDropDownInfoList();
+    }
     onKupIconClick(el) {
+        if (!el) {
+            this.kupManager.debug.logMessage(this, 'onKupIconClick: Element is null');
+            return;
+        }
         __classPrivateFieldSet(this, _KupTypography_dropDownActionCardAnchor, el, "f");
-        this.kupIconClick.emit({
-            comp: this,
-            id: this.rootElement.id,
-        });
         this.createDropDownToolbarList();
     }
     onKupToolbarItemClick(e) {
@@ -76,12 +88,23 @@ export class KupTypography {
             this.toolbarList = null;
         }
     }
+    /**
+     * Create dropdown list for toolbar
+     */
     createDropDownToolbarList() {
+        if (!__classPrivateFieldGet(this, _KupTypography_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.toolbarData;
+        listEl.data = this.toolbarState;
         listEl.addEventListener('kup-toolbar-click', (e) => {
             this.onKupToolbarItemClick(e);
             setTimeout(() => {
@@ -98,10 +121,57 @@ export class KupTypography {
         this.kupManager.addClickCallback(__classPrivateFieldGet(this, _KupTypography_clickCbDropCard, "f"), true);
         this.rootElement.shadowRoot.appendChild(this.toolbarList);
         requestAnimationFrame(() => {
+            if (!__classPrivateFieldGet(this, _KupTypography_dropDownActionCardAnchor, "f")) {
+                this.kupManager.debug.logMessage(this, 'DropDown anchor is still null after delay!');
+                return;
+            }
             this.kupManager.dynamicPosition.register(this.toolbarList, __classPrivateFieldGet(this, _KupTypography_dropDownActionCardAnchor, "f"), 0, KupDynamicPositionPlacement.AUTO, true);
             this.kupManager.dynamicPosition.start(this.toolbarList);
         });
     }
+    /**
+     * Create dropdown list for tab info icon
+     */
+    createDropDownInfoList() {
+        if (!__classPrivateFieldGet(this, _KupTypography_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 infoicon available.');
+            return;
+        }
+        const listEl = document.createElement('kup-list');
+        listEl.data = this.infoState;
+        this.infoList = listEl;
+        __classPrivateFieldSet(this, _KupTypography_clickCbDropCard, {
+            cb: () => {
+                this.closeInfoDataList();
+            },
+            el: this.infoList,
+        }, "f");
+        this.kupManager.addClickCallback(__classPrivateFieldGet(this, _KupTypography_clickCbDropCard, "f"), true);
+        this.rootElement.shadowRoot.appendChild(this.infoList);
+        requestAnimationFrame(() => {
+            this.kupManager.dynamicPosition.register(this.infoList, __classPrivateFieldGet(this, _KupTypography_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, _KupTypography_clickCbDropCard, "f"));
+            this.infoList.remove();
+            this.kupManager.dynamicPosition.unregister([this.infoList]);
+            this.infoList = null;
+        }
+    }
     /*-------------------------------------------------*/
     /*           P u b l i c   M e t h o d s           */
     /*-------------------------------------------------*/
@@ -148,19 +218,45 @@ export class KupTypography {
             value: this.value,
             type: this.type,
         };
-        const propsFImage = {
+        const toolbarIcon = {
             color: 'var(--kup-gray-color-70)',
             resource: 'more_vert',
             sizeX: '16px',
             sizeY: '16px',
-            wrapperClass: 'image__iconToolbar',
+            wrapperClass: 'image__iconToolbar iconToolbar',
+        };
+        const infoIcon = {
+            color: 'var(--kup-gray-color-70)',
+            resource: 'info_outline',
+            sizeX: '16px',
+            sizeY: '16px',
+            wrapperClass: 'image__iconToolbar iconInfo',
         };
         const classObjParent = {
             'kup-typography--wrap': props.toolbar ? true : false,
         };
-        return (h(Host, { key: '34e9da970fa1c0d4363fd96a507d54969bf1c316' }, h("style", { key: '65d16a1056f44d8f2ffe867753ced85cf2b81460' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '6499e780132230a2cd9ac617ab67bf24b2e10d1d', id: componentWrapperId, class: classObjParent, onClick: () => this.onKupClick }, h(FTypography, Object.assign({ key: 'a67c8983c7df830caa13738a8de078fe2c936827' }, props)), this.toolbar && (h(FImage, Object.assign({ key: '105c5272fb10d16f81c3efadc9bda7b984de1e73' }, propsFImage, { onClick: (event) => {
+        return (h(Host, { key: 'ce3a3f1c078f3be2a3b57c6230fed6b610cd0ac8' }, h("style", { key: '538daaa32b78cb8496759a5ed7aa459bf519fe48' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'fcab41c8bafd5714994be27ee0092e5782b9c9ae', id: componentWrapperId, class: classObjParent, onClick: () => this.onKupClick }, h(FTypography, Object.assign({ key: '1613f88e3175441fa553c325e053fd77f6ca5fcc' }, props)), this.infoIcon && (h(FImage, Object.assign({ key: '0a07d2eee40bfd39c9d404127fb392869f0a730e' }, infoIcon, { 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, 'Toolbar data is empty, not opening dropdown.');
+                }
+            } }))), this.toolbar && (h(FImage, Object.assign({ key: '0de60f147ae017d1501b6bef4771d57b2a590e76' }, toolbarIcon, { onClick: async (event) => {
                 event.stopPropagation();
-                this.onKupIconClick(event.currentTarget);
+                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.');
+                }
             } }))))));
     }
     disconnectedCallback() {
@@ -168,6 +264,9 @@ export class KupTypography {
         if (this.toolbarList) {
             this.kupManager.dynamicPosition.unregister([this.toolbarList]);
         }
+        if (this.infoList) {
+            this.kupManager.dynamicPosition.unregister([this.infoList]);
+        }
     }
     static get is() { return "kup-typography"; }
     static get encapsulation() { return "shadow"; }
@@ -208,7 +307,7 @@ export class KupTypography {
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "toolbar": {
+            "infoIcon": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -221,27 +320,21 @@ export class KupTypography {
                 "docs": {
                     "tags": [{
                             "name": "default",
-                            "text": "null"
+                            "text": "false"
                         }],
-                    "text": "Manage the toolbar icon. If true is visible, otherwise is not"
+                    "text": "When enabled displays toolbar item inside each single tab."
                 },
-                "attribute": "toolbar",
+                "attribute": "info-icon",
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
-            "toolbarData": {
-                "type": "unknown",
+            "toolbar": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "KupDataNode[]",
-                    "resolved": "KupDataNode[]",
-                    "references": {
-                        "KupDataNode": {
-                            "location": "import",
-                            "path": "../../managers/kup-data/kup-data-declarations",
-                            "id": "src/managers/kup-data/kup-data-declarations.ts::KupDataNode"
-                        }
-                    }
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
@@ -250,8 +343,11 @@ export class KupTypography {
                             "name": "default",
                             "text": "null"
                         }],
-                    "text": "Display DataNode Toolbar."
-                }
+                    "text": "Manage the toolbar icon. If true is visible, otherwise is not"
+                },
+                "attribute": "toolbar",
+                "reflect": false,
+                "defaultValue": "true"
             },
             "type": {
                 "type": "string",
@@ -300,6 +396,59 @@ export class KupTypography {
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "null"
+            },
+            "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": [{
+                            "name": "default",
+                            "text": "[];"
+                        }],
+                    "text": "This is the callback to retrieve toolbar's data"
+                }
+            },
+            "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": ""
+                }
             }
         };
     }
@@ -346,6 +495,27 @@ export class KupTypography {
                         }
                     }
                 }
+            }, {
+                "method": "kupInfoIconClick",
+                "name": "kup-typography-infoiconclick",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered when the info icon inside tab is clicked."
+                },
+                "complexType": {
+                    "original": "KupTypographyIconClickEventPayload",
+                    "resolved": "KupTypographyIconClickEventPayload",
+                    "references": {
+                        "KupTypographyIconClickEventPayload": {
+                            "location": "import",
+                            "path": "./kup-typography-declarations",
+                            "id": "src/components/kup-typography/kup-typography-declarations.ts::KupTypographyIconClickEventPayload"
+                        }
+                    }
+                }
             }, {
                 "method": "kupItemClick",
                 "name": "kup-typography-itemclick",