@sme.up/ketchup 10.1.1 → 10.2.0

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

@@ -135,6 +135,10 @@ export class KupCell {
             cell: this.data,
         });
     }
+    upload(e) {
+        e.stopPropagation();
+        this.kupCellUpload.emit(e.detail);
+    }
     /*-------------------------------------------------*/
     /*          L i f e c y c l e   H o o k s          */
     /*-------------------------------------------------*/
@@ -164,14 +168,14 @@ export class KupCell {
             renderKup: true,
             row: this.generateRow(),
         };
-        return (h(Host, { key: '506cb4b5b36d5a4c8aa7c252c52107dce7433f0e' }, h("style", { key: '316836a526079875016c306c9310d336bc867622' }, __classPrivateFieldGet(this, _KupCell_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '07da913f16a8c1e22cc2426dbcf03067c3ced7af', id: componentWrapperId, style: this.showSubmit
+        return (h(Host, { key: '01c0f9dc1d970c0da37687dd07ecf95cf0cb0279', "onKup-file-upload-upload": this.upload.bind(this) }, h("style", { key: '4ad06f4bbbb2cfebee565fee5606194d2e68d871' }, __classPrivateFieldGet(this, _KupCell_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '2d06ac608cd5eaa25b014dbc2420e2dec44ea89b', id: componentWrapperId, style: this.showSubmit
                 ? {
                     display: 'flex',
                     'flex-direction': submitPositionAdapter(this.submitPosition),
                     'align-items': 'center',
                     gap: '0.5rem',
                 }
-                : {} }, h(FCell, Object.assign({ key: 'e09f0b204b7e5f848a2969a6587eee61b64e7a45' }, props)), this.showSubmit ? (h(FButton, { buttonType: "submit", label: __classPrivateFieldGet(this, _KupCell_kupManager, "f").language.translate(KupLanguageGeneric.CONFIRM), wrapperClass: "form__submit", onClick: (e) => {
+                : {} }, h(FCell, Object.assign({ key: '393bd349a7310e9e9f8fbefac85c6ef733799a3f' }, props)), this.showSubmit ? (h(FButton, { buttonType: "submit", label: __classPrivateFieldGet(this, _KupCell_kupManager, "f").language.translate(KupLanguageGeneric.CONFIRM), wrapperClass: "form__submit", onClick: (e) => {
                 this.submitClick(e);
             } })) : null)));
     }
@@ -248,7 +252,7 @@ export class KupCell {
                 "mutable": false,
                 "complexType": {
                     "original": "FCellPadding",
-                    "resolved": "FCellPadding.DENSE | FCellPadding.MEDIUM | FCellPadding.NONE | FCellPadding.WIDE",
+                    "resolved": "FCellPadding.DENSE | FCellPadding.EXTRA_DENSE | FCellPadding.MEDIUM | FCellPadding.NONE | FCellPadding.WIDE",
                     "references": {
                         "FCellPadding": {
                             "location": "import",
@@ -354,6 +358,27 @@ export class KupCell {
                         }
                     }
                 }
+            }, {
+                "method": "kupCellUpload",
+                "name": "kup-cell-upload",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KupFileUploadEventPayload",
+                    "resolved": "KupFileUploadEventPayload",
+                    "references": {
+                        "KupFileUploadEventPayload": {
+                            "location": "import",
+                            "path": "../kup-file-upload/kup-file-upload-declarations",
+                            "id": "src/components/kup-file-upload/kup-file-upload-declarations.ts::KupFileUploadEventPayload"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/kup-chart/kup-chart.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-checkbox/kup-checkbox.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-chip/kup-chip.css

@@ -1,3 +1,20 @@
+:host {
+  display: block;
+}
+
+.mdc-text-field__label-container {
+  padding-bottom: 4px;
+
+  label {
+    font-family: var(--kup-font-family);
+    font-size: var(--kup-label-01-font-size, 12px);
+    line-height: 16px;
+    font-weight: 400;
+    letter-spacing: 0.32px;
+    color: var(--kup-text-secondary);
+  }
+}
+
 .kup-body-compact-01 {
   font-family: var(--kup-font-family);
   font-size: var(--kup-body-compact-01-font-size, 14px);
@@ -24,7 +41,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 +73,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 +81,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;
@@ -142,7 +159,4 @@
 * @prop --kup-chip-primary-color-rgb: Sets primary color RGB values of the component (used for shaders).
 * @prop --kup-chip-text-color: Sets text color of the component.
 * @prop --kup-chip-text-color-rgb: Sets text color RGB values of the component (used for shaders).
-*/
-:host {
-  display: block;
-}
+*/

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

@@ -5,7 +5,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
         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 _KupChip_instances, _KupChip_changeHandler, _KupChip_stringifiedValues;
+var _KupChip_instances, _KupChip_changeHandler, _KupChip_performChangeEvent, _KupChip_stringifiedValues;
 import { forceUpdate, h, Host, } from "@stencil/core";
 import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
 import { FChip } from "../../f-components/f-chip/f-chip";
@@ -14,6 +14,7 @@ import { KupChipProps, } from "./kup-chip-declarations";
 import { KupDebugCategory } from "../../managers/kup-debug/kup-debug-declarations";
 import { getProps, setProps } from "../../utils/utils";
 import { componentWrapperId } from "../../variables/GenericVariables";
+import { ItemsDisplayMode } from "../kup-list/kup-list-declarations";
 export class KupChip {
     constructor() {
         _KupChip_instances.add(this);
@@ -26,11 +27,13 @@ export class KupChip {
         this.kupManager = kupManagerInstance();
         this.customStyle = '';
         this.data = [];
-        this.displayId = false;
         this.enableInput = false;
+        this.disabled = false;
         this.type = FChipType.STANDARD;
-        this.sizing = FChipSize.MEDIUM;
+        this.sizing = FChipSize.SMALL;
         this.styling = FChipStyling.RAISED;
+        this.displayMode = ItemsDisplayMode.DESCRIPTION;
+        this.label = null;
     }
     onKupBlur(chip) {
         this.kupBlur.emit({
@@ -154,7 +157,7 @@ export class KupChip {
                 ? true
                 : false,
             data: this.data,
-            displayId: this.displayId,
+            displayMode: this.displayMode,
             info: this.rootElement.classList.contains('kup-info')
                 ? true
                 : false,
@@ -178,6 +181,7 @@ export class KupChip {
             warning: this.rootElement.classList.contains('kup-warning')
                 ? true
                 : false,
+            disabled: this.disabled,
         };
         for (let j = 0; this.data && j < this.data.length; j++) {
             props.onBlur.push((chip) => this.onKupBlur(chip));
@@ -192,13 +196,13 @@ export class KupChip {
             props.onFocus.push((chip) => this.onKupFocus(chip));
             props.onIconClick.push((chip) => this.onKupIconClick(chip));
         }
-        return (h(Host, { key: '05839d6f15c5c74b3cd3589eb4b84d52ac1fd7ea', "onKup-autocomplete-itemclick": (e) => {
+        return (h(Host, { key: 'bf8bf0a53796849610faed0eb1424a10db852338', "onKup-autocomplete-itemclick": (e) => {
                 __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
             }, "onKup-combobox-itemclick": (e) => {
                 __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
             }, "onKup-textfield-change": (e) => {
                 __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
-            } }, h("style", { key: 'b775a141f46815b358550c4f272eb2ab25feed93' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'ec9cf2b39d6fbad81283ff77b5c2bc8d8467fba1', id: componentWrapperId }, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 ? h(FChip, Object.assign({}, props)) : null, h("slot", { key: 'e3d09c276b83d13dd0c03cc389c32097230989f3', name: "field" }))));
+            } }, h("style", { key: '66132a3e1baf71ff1703cc2a5760f83afc41841f' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '09690424ee34a1ec12e8a4f1a368fb6b1f3da1db', id: componentWrapperId }, this.label ? (h("div", { class: "mdc-text-field__label-container" }, h("label", { class: "mdc-label" }, this.label))) : null, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 ? h(FChip, Object.assign({}, props)) : null, h("slot", { key: '74a0bb6b61c03cf41f46091ccef2efd8eabdc48a', name: "field" }))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -266,7 +270,7 @@ export class KupChip {
                 },
                 "defaultValue": "[]"
             },
-            "displayId": {
+            "enableInput": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -281,13 +285,13 @@ export class KupChip {
                             "name": "default",
                             "text": "false"
                         }],
-                    "text": "When enabled, the chip's text will display both the id and the value."
+                    "text": "When enabled, it's possible to add items to the chip's dataset through an input slot (kup-autocomplete, kup-combobox, kup-text-field)."
                 },
-                "attribute": "display-id",
+                "attribute": "enable-input",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "enableInput": {
+            "disabled": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -302,9 +306,9 @@ export class KupChip {
                             "name": "default",
                             "text": "false"
                         }],
-                    "text": "When enabled, it's possible to add items to the chip's dataset through an input slot (kup-autocomplete, kup-combobox, kup-text-field)."
+                    "text": "When true, the chip cannot be edited, nor removed."
                 },
-                "attribute": "enable-input",
+                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
@@ -354,13 +358,13 @@ export class KupChip {
                 "docs": {
                     "tags": [{
                             "name": "default",
-                            "text": "FChipSize.MEDIUM"
+                            "text": "FChipSize.SMALL"
                         }],
                     "text": "Sets the size of the chip"
                 },
                 "attribute": "sizing",
                 "reflect": false,
-                "defaultValue": "FChipSize.MEDIUM"
+                "defaultValue": "FChipSize.SMALL"
             },
             "styling": {
                 "type": "string",
@@ -388,6 +392,54 @@ export class KupChip {
                 "attribute": "styling",
                 "reflect": false,
                 "defaultValue": "FChipStyling.RAISED"
+            },
+            "displayMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ItemsDisplayMode",
+                    "resolved": "ItemsDisplayMode.CODE | ItemsDisplayMode.CODE_AND_DESC | ItemsDisplayMode.CODE_AND_DESC_ALIAS | ItemsDisplayMode.DESCRIPTION | ItemsDisplayMode.DESC_AND_CODE",
+                    "references": {
+                        "ItemsDisplayMode": {
+                            "location": "import",
+                            "path": "../kup-list/kup-list-declarations",
+                            "id": "src/components/kup-list/kup-list-declarations.ts::ItemsDisplayMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "ItemsDisplayMode.DESCRIPTION"
+                        }],
+                    "text": "When enabled, the chip's text will display both the id and description."
+                },
+                "attribute": "display-mode",
+                "reflect": false,
+                "defaultValue": "ItemsDisplayMode.DESCRIPTION"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "When set,will be shown a label on the chips"
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "null"
             }
         };
     }
@@ -594,33 +646,52 @@ _KupChip_instances = new WeakSet(), _KupChip_changeHandler =
     /*           P r i v a t e   M e t h o d s         */
     /*-------------------------------------------------*/
     async function _KupChip_changeHandler(e) {
-        var _a, _b;
+        var _a, _b, _c;
         e.stopPropagation();
-        const value = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.value;
-        const listNode = e.detail.node;
-        if (value) {
-            const node = (_b = this.data) === null || _b === void 0 ? void 0 : _b.find((node) => node.id === value);
-            if (!node) {
-                const data = this.data && this.data.length ? this.data : [];
+        const data = this.data && this.data.length ? this.data : [];
+        // check event type
+        if ('node' in e.detail) {
+            // autocomplete and combobox handler
+            const node = e.detail.node;
+            // check if node isn't presents in data
+            if (!((_a = this.data) === null || _a === void 0 ? void 0 : _a.find((n) => n.id === node.id))) {
                 this.data = [
                     ...data,
                     {
-                        id: listNode ? listNode.id : value,
-                        value: listNode ? listNode.value : value,
+                        id: node.id,
+                        value: node.value,
                     },
                 ];
-                const slot = this.rootElement.querySelector('[slot=field]');
-                await slot.setValue('');
-                await slot.refresh();
-                await slot.setFocus();
-                this.kupChange.emit({
-                    comp: this,
-                    id: this.rootElement.id,
-                    stringifiedValues: __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_stringifiedValues).call(this),
-                });
+                await __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_performChangeEvent).call(this);
+            }
+        }
+        else {
+            // texfield handler
+            const value = (_b = e.detail) === null || _b === void 0 ? void 0 : _b.value;
+            if (value) {
+                // check if value isn't already present in data
+                if (!((_c = this.data) === null || _c === void 0 ? void 0 : _c.find((n) => n.id === value))) {
+                    this.data = [
+                        ...data,
+                        {
+                            id: value,
+                        },
+                    ];
+                    await __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_performChangeEvent).call(this);
+                }
             }
         }
-    }, _KupChip_stringifiedValues = function _KupChip_stringifiedValues() {
+    }, _KupChip_performChangeEvent = async function _KupChip_performChangeEvent() {
+    const slot = this.rootElement.querySelector('[slot=field]');
+    await slot.setValue('');
+    await slot.refresh();
+    await slot.setFocus();
+    this.kupChange.emit({
+        comp: this,
+        id: this.rootElement.id,
+        stringifiedValues: __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_stringifiedValues).call(this),
+    });
+}, _KupChip_stringifiedValues = function _KupChip_stringifiedValues() {
     let stringifiedValues = '';
     this.data.forEach((node) => (stringifiedValues += node.id + ';'));
     return stringifiedValues;

package/dist/collection/components/kup-color-picker/kup-color-picker.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-combobox/kup-combobox.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-combobox/kup-combobox.js

@@ -47,6 +47,7 @@ export class KupCombobox {
         this.data = undefined;
         this.disabled = false;
         this.displayMode = ItemsDisplayMode.DESCRIPTION;
+        this.listDisplayMode = ItemsDisplayMode.CODE_AND_DESC;
         this.error = '';
         this.icon = null;
         this.initialValue = '';
@@ -87,8 +88,10 @@ export class KupCombobox {
         this.onKupIconClick();
     }
     onKupIconClick() {
+        var _a, _b;
         if (__classPrivateFieldGet(this, _KupCombobox_textfieldWrapper, "f").classList.contains('toggled')) {
             __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_closeList).call(this);
+            (_a = __classPrivateFieldGet(this, _KupCombobox_listEl, "f")) === null || _a === void 0 ? void 0 : _a.setBlur();
         }
         else {
             __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_openList).call(this);
@@ -99,6 +102,7 @@ export class KupCombobox {
                 inputValue: __classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f").value,
                 open: __classPrivateFieldGet(this, _KupCombobox_textfieldWrapper, "f").classList.contains('toggled'),
             });
+            (_b = __classPrivateFieldGet(this, _KupCombobox_listEl, "f")) === null || _b === void 0 ? void 0 : _b.setFocus();
         }
     }
     onKupFocus() {
@@ -305,7 +309,7 @@ export class KupCombobox {
         };
         const fullHeight = this.rootElement.classList.contains('kup-full-height');
         const fullWidth = this.rootElement.classList.contains('kup-full-width');
-        return (h(Host, { key: '7d51df7f2175691414e6966396dabc009780f07d', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet(this, _KupCombobox_elStyle, "f") }, h("style", { key: 'fc147ade6a0db0f34fbac1dab0229ce16c5e16b8' }, __classPrivateFieldGet(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'cc71ec78ead4cdafd5bf25ca6dbcb8686ee1097c', id: componentWrapperId, style: __classPrivateFieldGet(this, _KupCombobox_elStyle, "f") }, h(FTextField, Object.assign({ key: '5d7dd48fc94f5e8fd98469615e701177a4e768d1' }, props, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, trailingIcon: true, icon: this.showDropDownIcon
+        return (h(Host, { key: 'bb14609b26ad896dac3158ce4427d129fd520abb', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet(this, _KupCombobox_elStyle, "f") }, h("style", { key: 'dfc874e6d1f9facc181fd7d05cb3e3a981d18daf' }, __classPrivateFieldGet(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '47eca4f5d10c0be8d4910b6028abed16de4c0b8e', id: componentWrapperId, style: __classPrivateFieldGet(this, _KupCombobox_elStyle, "f") }, h(FTextField, Object.assign({ key: '6c922d6c51567e3a337eb6fbf26228f42b03041e' }, props, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, trailingIcon: true, icon: this.showDropDownIcon
                 ? KupThemeIconValues.DROPDOWN
                 : null, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupIconClick(), onChange: (e) => this.onKupChange(e.target.value), onFocus: () => this.onKupFocus(), onInput: () => this.onKupInput(), onIconClick: () => this.onKupIconClick() }))), __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_prepList).call(this)));
     }
@@ -438,6 +442,30 @@ export class KupCombobox {
                 "reflect": false,
                 "defaultValue": "ItemsDisplayMode.DESCRIPTION"
             },
+            "listDisplayMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ItemsDisplayMode",
+                    "resolved": "ItemsDisplayMode.CODE | ItemsDisplayMode.CODE_AND_DESC | ItemsDisplayMode.CODE_AND_DESC_ALIAS | ItemsDisplayMode.DESCRIPTION | ItemsDisplayMode.DESC_AND_CODE",
+                    "references": {
+                        "ItemsDisplayMode": {
+                            "location": "import",
+                            "path": "../kup-list/kup-list-declarations",
+                            "id": "src/components/kup-list/kup-list-declarations.ts::ItemsDisplayMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets how to show the selected item value. Suported values: \"CodeOnly\", \"DescOnly\", \"Both\" or \"CodeAndDesc\" and \"DescAndCode\"."
+                },
+                "attribute": "list-display-mode",
+                "reflect": false,
+                "defaultValue": "ItemsDisplayMode.CODE_AND_DESC"
+            },
             "error": {
                 "type": "string",
                 "mutable": false,
@@ -1105,13 +1133,11 @@ _KupCombobox_kupManager = new WeakMap(), _KupCombobox_elStyle = new WeakMap(), _
         }, "f");
     }
     __classPrivateFieldGet(this, _KupCombobox_kupManager, "f").addClickCallback(__classPrivateFieldGet(this, _KupCombobox_clickCb, "f"), true);
-    window.setTimeout(() => __classPrivateFieldGet(this, _KupCombobox_listEl, "f").setFocus(), 100);
 }, _KupCombobox_closeList = function _KupCombobox_closeList() {
     __classPrivateFieldGet(this, _KupCombobox_textfieldWrapper, "f").classList.remove('toggled');
     __classPrivateFieldGet(this, _KupCombobox_listEl, "f").menuVisible = false;
     __classPrivateFieldGet(this, _KupCombobox_kupManager, "f").dynamicPosition.stop(__classPrivateFieldGet(this, _KupCombobox_listEl, "f"));
     __classPrivateFieldGet(this, _KupCombobox_kupManager, "f").removeClickCallback(__classPrivateFieldGet(this, _KupCombobox_clickCb, "f"));
-    window.setTimeout(() => __classPrivateFieldGet(this, _KupCombobox_listEl, "f").setBlur(), 100);
 }, _KupCombobox_isListOpened = function _KupCombobox_isListOpened() {
     return __classPrivateFieldGet(this, _KupCombobox_listEl, "f").menuVisible == true;
 }, _KupCombobox_consistencyCheck = function _KupCombobox_consistencyCheck(idIn, idInDecode, eventShouldSetValue) {
@@ -1134,5 +1160,5 @@ _KupCombobox_kupManager = new WeakMap(), _KupCombobox_elStyle = new WeakMap(), _
     }
 }, _KupCombobox_prepList = function _KupCombobox_prepList() {
     var _a, _b;
-    return (h("kup-list", Object.assign({ displayMode: ItemsDisplayMode.CODE_AND_DESC }, this.data['kup-list'], { "is-menu": true, showFilter: ((_b = (_a = this.data['kup-list']) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length) >= 10 ? true : false, filter: '', "onkup-list-click": (e) => this.onKupItemClick(e), ref: (el) => (__classPrivateFieldSet(this, _KupCombobox_listEl, el, "f")) })));
+    return (h("kup-list", Object.assign({ displayMode: this.listDisplayMode }, this.data['kup-list'], { "is-menu": true, showFilter: ((_b = (_a = this.data['kup-list']) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length) >= 10 ? true : false, "onkup-list-click": (e) => this.onKupItemClick(e), ref: (el) => (__classPrivateFieldSet(this, _KupCombobox_listEl, el, "f")) })));
 };

package/dist/collection/components/kup-dashboard/kup-dashboard.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-data-table/kup-data-table-declarations.js

@@ -1,3 +1,4 @@
+import { FCellTypes } from "../../f-components/f-cell/f-cell-declarations";
 /**
  * Props of the kup-data-table component.
  * Used to export every prop in an object.
@@ -65,6 +66,7 @@ export var KupDataTableProps;
     KupDataTableProps["totals"] = "Defines the current totals options.";
     KupDataTableProps["transpose"] = "Transposes the data of the data table.";
     KupDataTableProps["updatableData"] = "When set to true, editable cells will be rendered using input components and update button will appair below the matrix";
+    KupDataTableProps["updateOnClick"] = "When set to true, editable checkbox will call update";
 })(KupDataTableProps || (KupDataTableProps = {}));
 export var SortMode;
 (function (SortMode) {
@@ -173,3 +175,14 @@ export var SelectionMode;
     SelectionMode["MULTIPLE"] = "multiple";
     SelectionMode["NONE"] = "none";
 })(SelectionMode || (SelectionMode = {}));
+/**
+ * List of types that can duplicate value in all column's cell
+ */
+export const TypesToDuplicate = [
+    FCellTypes.AUTOCOMPLETE,
+    FCellTypes.COMBOBOX,
+    FCellTypes.DATE,
+    FCellTypes.NUMBER,
+    FCellTypes.STRING,
+    FCellTypes.TIME,
+];

package/dist/collection/components/kup-data-table/kup-data-table-helper.js

@@ -107,11 +107,11 @@ function compareRows(r1, r2, sortObj) {
  * @todo This function can be improved in its speed by a refactor in which from two different cycles of execution for
  *    single filters and global filter, all controls on a single column are done in a single cycle.
  */
-export function filterRows(rows = [], filters = {}, globalFilter = '', columns = [], columnFilters, filtersRows) {
+export function filterRows(rows = [], filters = {}, globalFilter = '', columns = [], columnFilters, filtersRows, visibleColumns) {
     if (filtersRows == null) {
         filtersRows = new FiltersRows();
     }
-    return filtersRows.filterRows(rows, filters, globalFilter, columns, columnFilters);
+    return filtersRows.filterRows(rows, filters, globalFilter, columns, columnFilters, visibleColumns);
 }
 export function groupRows(columns = [], rows = [], groups = [], totals = {}) {
     if (!rows) {
@@ -795,6 +795,7 @@ export function decorateDataTable(data) {
             var _a;
             let cell = row.cells[cellKey];
             const value = cell.value;
+            const decode = cell.decode;
             const options = cell['options'];
             cell.isEditable = (_a = cell.isEditable) !== null && _a !== void 0 ? _a : cell['editable'];
             const shapeAdapters = {
@@ -802,8 +803,10 @@ export function decorateDataTable(data) {
                 [FCellShapes.COMBOBOX]: () => CMBandACPAdapter(value, '', options),
                 [FCellShapes.RADIO]: () => RADAdapter(value, options),
                 [FCellShapes.CHECKBOX]: () => CHKAdapter(value, ''),
-                [FCellShapes.CHIP]: () => CHIAdapter(value),
+                [FCellShapes.CHIP]: () => CHIAdapter(value, decode),
                 [FCellShapes.SWITCH]: () => SWTAdapter(value, ''),
+                [FCellShapes.MULTI_AUTOCOMPLETE]: () => CHIAdapter(value, decode),
+                [FCellShapes.MULTI_COMBOBOX]: () => CHIAdapter(value, decode),
             };
             const adapterFunction = shapeAdapters[cell.shape];
             if (adapterFunction) {