@sme.up/ketchup 10.1.0 → 10.2.0

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: '383dddc997164d5057a0356dc763d5fb359660ae' }, h("style", { key: '0c683ceb83363ac03024b8a4f5a335707f26287a' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '49f93fcb7fe8c5e86f0fda8e61f0048194c28b9c', id: componentWrapperId, class: classObjParent, onClick: () => this.onKupClick }, h(FTypography, Object.assign({ key: '1951815b780b1828fbe842690f1229ee18823f5d' }, props)), this.toolbar && (h(FImage, Object.assign({ key: '447bf05964714acbf9fdae5fb20c9d2591f2dcff' }, propsFImage, { onClick: (event) => {
+        return (h(Host, { key: '22068fe2fcabd3b184e705e2a0137837669df2da' }, h("style", { key: '3c4a8811380ce6e6ec12a7077325f3dcb143020c' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '927cbb930fb3e0763817e8ad6fb41b521ddf1ad1', id: componentWrapperId, class: classObjParent, onClick: () => this.onKupClick }, h(FTypography, Object.assign({ key: 'd504a5c8621c4746331225eda11131a5db079edf' }, props)), this.infoIcon && (h(FImage, Object.assign({ key: '9073be54945f7345b754079388130e149ddac338' }, 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: 'e02ac6db825761a824b4fcc36fd74690bd004cf1' }, 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",

package/dist/collection/components/kup-typography-list/kup-typography-list.css

@@ -24,7 +24,7 @@
 
 .kup-label-01 {
   font-family: var(--kup-font-family);
-  font-size: 12px;
+  font-size: var(--kup-label-01-font-size, 12px);
   line-height: 16px;
   font-weight: 400;
   letter-spacing: 0.32px;
@@ -56,7 +56,7 @@
 
 .kup-heading-compact-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -64,7 +64,7 @@
 
 .kup-heading-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-01-font-size, 14px);
   line-height: 20px;
   font-weight: 600;
   letter-spacing: 0.16px;

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

@@ -160,7 +160,7 @@ export class KupTypographyList {
     }
     render() {
         const typograhy = this.renderTypographys();
-        return (h(Host, { key: '12faff10fce2da2487897d326fb6a608ebe50282' }, h("style", { key: '9cf46641b3d83ba51863baebd3464fb6a90f8785' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '3cdc6a3c4a83645ce8b9c1b9f450761faa2ee665', id: componentWrapperId }, h("div", { key: 'ad1aed5edb427e6e8be22688468e5baafea429ac', class: "typographies-wrapper" }, typograhy))));
+        return (h(Host, { key: 'eea4a39316b0a3fc506de4c5c7702e70491b6299' }, h("style", { key: 'f5aaa171df25731eca862abd4a58fb797485ad52' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'fb7234ec56efe23662c9ae7a1496200f3cb3ece5', id: componentWrapperId }, h("div", { key: '7be6b9baa1785f2da9e092a91bd8d96a7256dd25', class: "typographies-wrapper" }, typograhy))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);

package/dist/collection/f-components/f-button/f-button.js

@@ -14,7 +14,7 @@ export const FButton = (props, children) => {
     const isIconButton = !!(props.styling.toLowerCase() === FButtonStyling.ICON ||
         (props.styling.toLowerCase() === FButtonStyling.RAISED &&
             props.icon &&
-            (props.label === null || props.label === undefined)));
+            (props.label === null || props.label === undefined || props.label === "")));
     const classObj = {
         'f-button': true,
         'kup-danger': props.danger,

package/dist/collection/f-components/f-cell/f-cell-declarations.js

@@ -20,6 +20,7 @@ export var FCellEvents;
  */
 export var FCellPadding;
 (function (FCellPadding) {
+    FCellPadding["EXTRA_DENSE"] = "extra_dense";
     FCellPadding["DENSE"] = "dense";
     FCellPadding["MEDIUM"] = "medium";
     FCellPadding["NONE"] = "";
@@ -87,9 +88,10 @@ export const FCellShapes = {
     COMBOBOX: 'CMB',
     DATE: 'CAL',
     EDITOR: 'EDT',
+    FILE_UPLOAD: 'FUP',
     GAUGE: 'GAU',
-    IMAGE: 'IMG',
     ICON: 'ICO',
+    IMAGE: 'IMG',
     INPUT_CHECKBOX: 'INC',
     INPUT_FIELD: 'INF',
     KNOB: 'KNB',
@@ -123,6 +125,7 @@ export var FCellTypes;
     FCellTypes["DATE"] = "date";
     FCellTypes["DATETIME"] = "datetime";
     FCellTypes["EDITOR"] = "editor";
+    FCellTypes["FILE_UPLOAD"] = "file-upload";
     FCellTypes["GAUGE"] = "gauge";
     FCellTypes["ICON"] = "icon";
     FCellTypes["IMAGE"] = "image";
@@ -140,6 +143,7 @@ export var FCellTypes;
     FCellTypes["SWITCH"] = "switch";
     FCellTypes["TABLE"] = "table";
     FCellTypes["TIME"] = "time";
+    FCellTypes["LABEL"] = "label";
 })(FCellTypes || (FCellTypes = {}));
 export const editableTypes = [
     FCellTypes.AUTOCOMPLETE,
@@ -160,6 +164,7 @@ export const editableTypes = [
     FCellTypes.SWITCH,
     FCellTypes.TIME,
     FCellTypes.EDITOR,
+    FCellTypes.FILE_UPLOAD,
 ];
 export const kupTypes = [
     FCellTypes.BAR,