@sme.up/ketchup 10.2.0 → 10.3.1

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

@@ -14,7 +14,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _KupBox_instances, _KupBox_checkUpdateState, _KupBox_intObserver, _KupBox_rowsRefs, _KupBox_navBarHeight, _KupBox_loadMoreEventCounter, _KupBox_loadMoreEventPreviousQuantity, _KupBox_didRenderObservers, _KupBox_setObserver, _KupBox_onLoadMoreClick;
+var _KupBox_instances, _KupBox_checkUpdateState, _KupBox_kupManager, _KupBox_intObserver, _KupBox_rowsRefs, _KupBox_navBarHeight, _KupBox_loadMoreEventCounter, _KupBox_loadMoreEventPreviousQuantity, _KupBox_didRenderObservers, _KupBox_setObserver, _KupBox_onLoadMoreClick;
 import { forceUpdate, h, Host, } from "@stencil/core";
 import { SortMode, } from "../kup-data-table/kup-data-table-declarations";
 import { KupBoxProps, LoadMoreMode, } from "./kup-box-declarations";
@@ -44,8 +44,7 @@ export class KupBox {
         /**
          * Instance of the KupManager class.
          */
-        this.kupManager = kupManagerInstance();
-        this.visibleColumns = [];
+        _KupBox_kupManager.set(this, kupManagerInstance());
         this.rows = [];
         this.filteredRows = [];
         this.sectionRef = null;
@@ -95,13 +94,14 @@ export class KupBox {
         this.stateId = '';
         this.store = undefined;
         this.swipeDisabled = false;
+        this.visibleColumns = undefined;
     }
     initWithPersistedState() {
         if (this.store && this.stateId) {
             this.state.load = true;
             const state = this.store.getState(this.stateId);
             if (state != null) {
-                this.kupManager.debug.logMessage(this, 'Initialize with state for stateId ' +
+                __classPrivateFieldGet(this, _KupBox_kupManager, "f").debug.logMessage(this, 'Initialize with state for stateId ' +
                     this.stateId +
                     ': ' +
                     state);
@@ -124,7 +124,7 @@ export class KupBox {
                 return;
             }
             if (somethingChanged) {
-                this.kupManager.debug.logMessage(this, 'Persisting stateId ' + this.stateId);
+                __classPrivateFieldGet(this, _KupBox_kupManager, "f").debug.logMessage(this, 'Persisting stateId ' + this.stateId);
                 this.store.persistState(this.stateId, this.state);
             }
         }
@@ -140,7 +140,6 @@ export class KupBox {
     }
     onDataChanged() {
         identify(this.getRows());
-        this.initVisibleColumns();
         this.initRows();
         this.checkLayout();
     }
@@ -187,13 +186,24 @@ export class KupBox {
             ? this.data.columns
             : [{ title: '', name: '', size: undefined }];
     }
-    initVisibleColumns() {
-        this.visibleColumns = this.getColumns().filter((column) => {
-            if (column.hasOwnProperty('visible')) {
-                return column.visible;
+    getVisibleColumns() {
+        // Starting columns filter
+        let resultVisibleColumns = this.getColumns().filter((col) => {
+            const isNotCodVer = !__classPrivateFieldGet(this, _KupBox_kupManager, "f").data.column.isCodVer(col);
+            if (this.visibleColumns) {
+                // if visible columns is specified, include only those columns
+                return isNotCodVer && this.visibleColumns.includes(col.name);
+            }
+            else {
+                return isNotCodVer && (!('visible' in col) || col.visible);
             }
-            return true;
         });
+        // order based on `visibleColumns`
+        if (this.visibleColumns) {
+            resultVisibleColumns = resultVisibleColumns.sort((a, b) => this.visibleColumns.indexOf(a.name) -
+                this.visibleColumns.indexOf(b.name));
+        }
+        return resultVisibleColumns;
     }
     getRows() {
         return this.data && this.data.rows ? this.data.rows : [];
@@ -202,7 +212,7 @@ export class KupBox {
         this.filteredRows = this.getRows();
         if (this.globalFilter && this.globalFilterValue) {
             // filtering rows
-            this.filteredRows = filterRows(this.filteredRows, null, this.globalFilterValue, this.visibleColumns);
+            this.filteredRows = filterRows(this.filteredRows, null, this.globalFilterValue, this.getColumns(), undefined, undefined, this.visibleColumns);
         }
         this.rows = this.sortRows(this.filteredRows);
         if (this.pagination) {
@@ -231,14 +241,14 @@ export class KupBox {
     }
     checkScrollOnHover() {
         if (this.boxContainer) {
-            if (!this.kupManager.scrollOnHover.isRegistered(this.boxContainer)) {
+            if (!__classPrivateFieldGet(this, _KupBox_kupManager, "f").scrollOnHover.isRegistered(this.boxContainer)) {
                 if (this.scrollOnHover) {
-                    this.kupManager.scrollOnHover.register(this.boxContainer);
+                    __classPrivateFieldGet(this, _KupBox_kupManager, "f").scrollOnHover.register(this.boxContainer);
                 }
             }
             else {
                 if (!this.scrollOnHover) {
-                    this.kupManager.scrollOnHover.unregister(this.boxContainer);
+                    __classPrivateFieldGet(this, _KupBox_kupManager, "f").scrollOnHover.unregister(this.boxContainer);
                 }
             }
         }
@@ -256,7 +266,7 @@ export class KupBox {
             sections: [],
         };
         // adding box objects to section
-        const visibleColumns = this.visibleColumns;
+        const visibleColumns = this.getVisibleColumns();
         let size = visibleColumns.length;
         let content = [];
         let cnt = 0;
@@ -272,7 +282,7 @@ export class KupBox {
         };
     }
     onSortChange(e) {
-        let column = getColumnByName(this.visibleColumns, e.detail.value);
+        let column = getColumnByName(this.getVisibleColumns(), e.detail.value);
         this.sortBy = column.name;
     }
     onGlobalFilterChange({ detail }) {
@@ -341,7 +351,7 @@ export class KupBox {
             else {
                 cell = boxObject['data-cell'];
                 row = boxObject['data-row'];
-                column = getColumnByName(this.visibleColumns, boxObject.dataset.column);
+                column = getColumnByName(this.getVisibleColumns(), boxObject.dataset.column);
             }
         }
         else {
@@ -355,7 +365,7 @@ export class KupBox {
         };
     }
     clickHandler(e) {
-        const details = this.getEventDetails(this.kupManager.getEventPath(e.target, this.rootElement), e);
+        const details = this.getEventDetails(__classPrivateFieldGet(this, _KupBox_kupManager, "f").getEventPath(e.target, this.rootElement), e);
         if (details.row) {
             if (this.multiSelection) {
                 this.onSelectionCheckChange(details.row);
@@ -367,7 +377,7 @@ export class KupBox {
         return details;
     }
     contextMenuHandler(e) {
-        const details = this.getEventDetails(this.kupManager.getEventPath(e.target, this.rootElement), e);
+        const details = this.getEventDetails(__classPrivateFieldGet(this, _KupBox_kupManager, "f").getEventPath(e.target, this.rootElement), e);
         return details;
     }
     /**
@@ -518,8 +528,9 @@ export class KupBox {
             progressbar: [],
             text: [],
         };
-        for (let index = 0; index < this.data.columns.length; index++) {
-            const column = this.data.columns[index];
+        const visibleColumns = this.getVisibleColumns();
+        for (let index = 0; index < visibleColumns.length; index++) {
+            const column = visibleColumns[index];
             if (column.visible !== false) {
                 cardData.cell.push(row.cells[column.name]);
                 cardData.columns.push(column);
@@ -648,7 +659,7 @@ export class KupBox {
         return h("kup-card", Object.assign({ data: cardData }, this.cardData));
     }
     renderRow(row) {
-        const visibleColumns = [...this.visibleColumns];
+        const visibleColumns = [...this.getVisibleColumns()];
         let boxContent = null;
         // if layout in row, use that one
         let rowLayout = row.layout;
@@ -798,10 +809,10 @@ export class KupBox {
                 headerTitle = section.title;
             }
             else if (sectionExpanded) {
-                headerTitle = this.kupManager.language.translate(KupLanguageGeneric.COLLAPSE);
+                headerTitle = __classPrivateFieldGet(this, _KupBox_kupManager, "f").language.translate(KupLanguageGeneric.COLLAPSE);
             }
             else {
-                headerTitle = this.kupManager.language.translate(KupLanguageGeneric.EXPAND);
+                headerTitle = __classPrivateFieldGet(this, _KupBox_kupManager, "f").language.translate(KupLanguageGeneric.EXPAND);
             }
             sectionContainer = (h("div", { class: sectionClass, style: sectionStyle }, h("div", { class: contentClass }, sectionContent), h("div", { class: "header", role: "button", onClick: (e) => {
                     e.stopPropagation();
@@ -837,12 +848,16 @@ export class KupBox {
         }
         const cell = row.cells[boxObject.column];
         let title = undefined;
-        if (cell && !this.kupManager.objects.isEmptyKupObj(cell.obj)) {
+        if (cell && !__classPrivateFieldGet(this, _KupBox_kupManager, "f").objects.isEmptyKupObj(cell.obj)) {
             classObj['is-obj'] = true;
-            if (this.kupManager.debug.isDebug()) {
+            if (__classPrivateFieldGet(this, _KupBox_kupManager, "f").debug.isDebug()) {
                 title =
                     cell.obj.t + '; ' + cell.obj.p + '; ' + cell.obj.k + ';';
             }
+            if (!cell.isEditable) {
+                cell.cssClass =
+                    __classPrivateFieldGet(this, _KupBox_kupManager, "f").data.cell.getObjectRelatedStyleClasses(cell.obj, cell.cssClass);
+            }
         }
         const cellProps = {
             cell: cell,
@@ -863,9 +878,9 @@ export class KupBox {
     kanbanMode() {
         // Testing whether there are columns to group by
         if (!this.kanban.columns || this.kanban.columns.length === 0) {
-            this.kupManager.debug.logMessage(this, 'No columns to group by detected.', KupDebugCategory.ERROR);
+            __classPrivateFieldGet(this, _KupBox_kupManager, "f").debug.logMessage(this, 'No columns to group by detected.', KupDebugCategory.ERROR);
             return {
-                jsx: (h("div", { id: "empty-data-message", class: "box-wrapper" }, h("div", { ref: (el) => this.rowsRefs.push(el) }), this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA))),
+                jsx: (h("div", { id: "empty-data-message", class: "box-wrapper" }, h("div", { ref: (el) => this.rowsRefs.push(el) }), __classPrivateFieldGet(this, _KupBox_kupManager, "f").language.translate(KupLanguageGeneric.EMPTY_DATA))),
                 style: { 'grid-template-columns': `repeat(1, 1fr)` },
             };
         }
@@ -886,7 +901,7 @@ export class KupBox {
                     key.push(this.rows[index].cells[this.kanban.columns[j]].value);
                 }
                 catch (error) {
-                    this.kupManager.debug.logMessage(this, error, KupDebugCategory.WARNING);
+                    __classPrivateFieldGet(this, _KupBox_kupManager, "f").debug.logMessage(this, error, KupDebugCategory.WARNING);
                 }
             }
             const check = {
@@ -991,8 +1006,8 @@ export class KupBox {
                 });
             }
         };
-        this.kupManager.interact.on(this.boxContainer, KupPointerEventTypes.TAP, tapCb);
-        this.kupManager.interact.on(this.boxContainer, KupPointerEventTypes.HOLD, holdCb);
+        __classPrivateFieldGet(this, _KupBox_kupManager, "f").interact.on(this.boxContainer, KupPointerEventTypes.TAP, tapCb);
+        __classPrivateFieldGet(this, _KupBox_kupManager, "f").interact.on(this.boxContainer, KupPointerEventTypes.HOLD, holdCb);
     }
     didRenderInteractables() {
         if (this.dragEnabled) {
@@ -1002,7 +1017,7 @@ export class KupBox {
                     const cellEl = this.rootElement.shadowRoot.querySelector('.box-object:hover');
                     return {
                         cell: cellEl['data-cell'],
-                        column: getColumnByName(this.visibleColumns, cellEl.dataset.column),
+                        column: getColumnByName(this.getVisibleColumns(), cellEl.dataset.column),
                         id: this.rootElement.id,
                         multiple: this.multiSelection,
                         row: cellEl['data-row'],
@@ -1011,7 +1026,7 @@ export class KupBox {
                 };
                 if (row && !this.interactableDrag.includes(row)) {
                     this.interactableDrag.push(row);
-                    this.kupManager.interact.draggable(row, {
+                    __classPrivateFieldGet(this, _KupBox_kupManager, "f").interact.draggable(row, {
                         allowFrom: '.box-object',
                         cursorChecker() {
                             return null;
@@ -1026,10 +1041,10 @@ export class KupBox {
             const dataCb = () => {
                 const cell = this.rootElement.shadowRoot.querySelector('.box:hover');
                 if (!cell) {
-                    this.kupManager.debug.logMessage(this, "Couldn't find cell hovered to retrieve dropzone informations!", KupDebugCategory.WARNING);
+                    __classPrivateFieldGet(this, _KupBox_kupManager, "f").debug.logMessage(this, "Couldn't find cell hovered to retrieve dropzone informations!", KupDebugCategory.WARNING);
                     return;
                 }
-                const path = this.kupManager.getEventPath(cell, this.rootElement);
+                const path = __classPrivateFieldGet(this, _KupBox_kupManager, "f").getEventPath(cell, this.rootElement);
                 const receivingDetails = this.getEventDetails(path);
                 return {
                     cell: receivingDetails.cell,
@@ -1040,7 +1055,7 @@ export class KupBox {
             };
             if (!this.interactableDrop.includes(this.sectionRef)) {
                 this.interactableDrop.push(this.sectionRef);
-                this.kupManager.interact.dropzone(this.sectionRef, {
+                __classPrivateFieldGet(this, _KupBox_kupManager, "f").interact.dropzone(this.sectionRef, {
                     accept: `[${kupDraggableAttr}]`,
                 }, {
                     dispatcher: this.rootElement,
@@ -1051,7 +1066,7 @@ export class KupBox {
                 const row = this.rowsRefs[index];
                 if (row && !this.interactableDrop.includes(row)) {
                     this.interactableDrop.push(row);
-                    this.kupManager.interact.dropzone(row, {
+                    __classPrivateFieldGet(this, _KupBox_kupManager, "f").interact.dropzone(row, {
                         accept: `[${kupDraggableAttr}]`,
                     }, {
                         callback: dataCb,
@@ -1066,7 +1081,7 @@ export class KupBox {
     /*          L i f e c y c l e   H o o k s          */
     /*-------------------------------------------------*/
     componentWillLoad() {
-        this.kupManager.debug.logLoad(this, false);
+        __classPrivateFieldGet(this, _KupBox_kupManager, "f").debug.logLoad(this, false);
         if (this.rowsPerPage) {
             this.currentRowsPerPage = this.rowsPerPage;
         }
@@ -1075,8 +1090,8 @@ export class KupBox {
             this.currentRowsPerPage > this.data.rows.length) {
             this.currentRowsPerPage = this.data.rows.length;
         }
-        this.kupManager.language.register(this);
-        this.kupManager.theme.register(this);
+        __classPrivateFieldGet(this, _KupBox_kupManager, "f").language.register(this);
+        __classPrivateFieldGet(this, _KupBox_kupManager, "f").theme.register(this);
         this.initWithPersistedState();
         this.onDataChanged();
         this.adjustPaginator();
@@ -1105,10 +1120,10 @@ export class KupBox {
         }
         this.didLoadInteractables();
         this.kupDidLoad.emit({ comp: this, id: this.rootElement.id });
-        this.kupManager.debug.logLoad(this, true);
+        __classPrivateFieldGet(this, _KupBox_kupManager, "f").debug.logLoad(this, true);
     }
     componentWillRender() {
-        this.kupManager.debug.logRender(this, false);
+        __classPrivateFieldGet(this, _KupBox_kupManager, "f").debug.logRender(this, false);
     }
     componentDidRender() {
         const root = this.rootElement.shadowRoot;
@@ -1122,7 +1137,7 @@ export class KupBox {
         this.persistState();
         this.didRenderInteractables();
         __classPrivateFieldGet(this, _KupBox_instances, "m", _KupBox_didRenderObservers).call(this);
-        this.kupManager.debug.logRender(this, true);
+        __classPrivateFieldGet(this, _KupBox_kupManager, "f").debug.logRender(this, true);
     }
     render() {
         __classPrivateFieldSet(this, _KupBox_rowsRefs, [], "f");
@@ -1130,7 +1145,7 @@ export class KupBox {
         let sortPanel = null;
         if (this.sortEnabled) {
             // creating items
-            const visibleColumnsItems = this.visibleColumns.map((column) => {
+            const visibleColumnsItems = this.getVisibleColumns().map((column) => {
                 const item = {
                     value: column.title,
                     id: column.name,
@@ -1140,7 +1155,7 @@ export class KupBox {
             });
             const items = [{ value: '', id: '' }, ...visibleColumnsItems];
             let textfieldData = {
-                label: this.kupManager.language.translate(KupLanguageGeneric.SORT_BY),
+                label: __classPrivateFieldGet(this, _KupBox_kupManager, "f").language.translate(KupLanguageGeneric.SORT_BY),
                 trailingIcon: true,
             };
             let listData = {
@@ -1155,7 +1170,7 @@ export class KupBox {
         }
         let filterPanel = null;
         if (this.globalFilter) {
-            filterPanel = (h("div", { id: "global-filter" }, h("kup-text-field", { fullWidth: true, label: this.kupManager.language.translate(KupLanguageSearch.SEARCH), icon: KupThemeIconValues.SEARCH, initialValue: this.globalFilterValue, "onkup-textfield-input": (event) => {
+            filterPanel = (h("div", { id: "global-filter" }, h("kup-text-field", { fullWidth: true, label: __classPrivateFieldGet(this, _KupBox_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), icon: KupThemeIconValues.SEARCH, initialValue: this.globalFilterValue, "onkup-textfield-input": (event) => {
                     window.clearTimeout(this.globalFilterTimeout);
                     this.globalFilterTimeout = window.setTimeout(() => this.onGlobalFilterChange(event), 600);
                 } })));
@@ -1177,7 +1192,7 @@ export class KupBox {
         let boxContent = null;
         let containerStyle = {};
         if (this.rows.length === 0) {
-            boxContent = (h("div", { id: "empty-data-message", class: "box-wrapper" }, h("div", { class: "box", ref: (el) => this.rowsRefs.push(el) }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA))));
+            boxContent = (h("div", { id: "empty-data-message", class: "box-wrapper" }, h("div", { class: "box", ref: (el) => this.rowsRefs.push(el) }, __classPrivateFieldGet(this, _KupBox_kupManager, "f").language.translate(KupLanguageGeneric.EMPTY_DATA))));
             containerStyle = { 'grid-template-columns': `repeat(1, 1fr)` };
         }
         else if (isKanban) {
@@ -1197,17 +1212,19 @@ export class KupBox {
                 boxContent.push(this.renderRow(rows[cnt++]));
             }
         }
-        return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h("div", { class: 'box-component', ref: (el) => (this.sectionRef = el) }, sortPanel, filterPanel, paginator, h("div", { class: isKanban ? 'is-kanban' : '', id: 'box-container', style: containerStyle, onContextMenu: (e) => {
+        return (h(Host, { "onKup-cell-click": (e) => {
+                this.kupBoxCellClick.emit(e.detail);
+            } }, h("style", null, __classPrivateFieldGet(this, _KupBox_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h("div", { class: 'box-component', ref: (el) => (this.sectionRef = el) }, sortPanel, filterPanel, paginator, h("div", { class: isKanban ? 'is-kanban' : '', id: 'box-container', style: containerStyle, onContextMenu: (e) => {
                 e.preventDefault();
             }, ref: (el) => (this.boxContainer =
                 el) }, boxContent)))));
     }
     disconnectedCallback() {
-        this.kupManager.interact.unregister(this.interactableDrag.concat(this.interactableDrop));
-        this.kupManager.language.unregister(this);
-        this.kupManager.theme.unregister(this);
+        __classPrivateFieldGet(this, _KupBox_kupManager, "f").interact.unregister(this.interactableDrag.concat(this.interactableDrop));
+        __classPrivateFieldGet(this, _KupBox_kupManager, "f").language.unregister(this);
+        __classPrivateFieldGet(this, _KupBox_kupManager, "f").theme.unregister(this);
         if (this.scrollOnHover) {
-            this.kupManager.scrollOnHover.unregister(this.boxContainer);
+            __classPrivateFieldGet(this, _KupBox_kupManager, "f").scrollOnHover.unregister(this.boxContainer);
         }
         // When component is destroyed, then the listener is removed. @See clickFunction for more details
         document.removeEventListener('click', this.clickFunction.bind(this));
@@ -1891,6 +1908,21 @@ export class KupBox {
                 "attribute": "swipe-disabled",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "visibleColumns": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "List of the visible columns"
+                }
             }
         };
     }
@@ -2093,6 +2125,27 @@ export class KupBox {
                         }
                     }
                 }
+            }, {
+                "method": "kupBoxCellClick",
+                "name": "kup-box-cell-click",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FCellEventPayload",
+                    "resolved": "FCellEventPayload",
+                    "references": {
+                        "FCellEventPayload": {
+                            "location": "import",
+                            "path": "../../f-components/f-cell/f-cell-declarations",
+                            "id": "src/f-components/f-cell/f-cell-declarations.ts::FCellEventPayload"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {
@@ -2247,21 +2300,21 @@ export class KupBox {
             }];
     }
 }
-_KupBox_intObserver = new WeakMap(), _KupBox_rowsRefs = new WeakMap(), _KupBox_navBarHeight = new WeakMap(), _KupBox_loadMoreEventCounter = new WeakMap(), _KupBox_loadMoreEventPreviousQuantity = new WeakMap(), _KupBox_instances = new WeakSet(), _KupBox_checkUpdateState = function _KupBox_checkUpdateState() {
+_KupBox_kupManager = new WeakMap(), _KupBox_intObserver = new WeakMap(), _KupBox_rowsRefs = new WeakMap(), _KupBox_navBarHeight = new WeakMap(), _KupBox_loadMoreEventCounter = new WeakMap(), _KupBox_loadMoreEventPreviousQuantity = new WeakMap(), _KupBox_instances = new WeakSet(), _KupBox_checkUpdateState = function _KupBox_checkUpdateState() {
     let somethingChanged = false;
-    if (!this.kupManager.objects.deepEqual(this.state.sortBy, this.sortBy)) {
+    if (!__classPrivateFieldGet(this, _KupBox_kupManager, "f").objects.deepEqual(this.state.sortBy, this.sortBy)) {
         this.state.sortBy = this.sortBy;
         somethingChanged = true;
     }
-    if (!this.kupManager.objects.deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
+    if (!__classPrivateFieldGet(this, _KupBox_kupManager, "f").objects.deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
         this.state.globalFilterValue = this.globalFilterValue;
         somethingChanged = true;
     }
-    if (!this.kupManager.objects.deepEqual(this.state.pageSelected, this.currentPage)) {
+    if (!__classPrivateFieldGet(this, _KupBox_kupManager, "f").objects.deepEqual(this.state.pageSelected, this.currentPage)) {
         this.state.pageSelected = this.currentPage;
         somethingChanged = true;
     }
-    if (!this.kupManager.objects.deepEqual(this.state.rowsPerPage, this.currentRowsPerPage)) {
+    if (!__classPrivateFieldGet(this, _KupBox_kupManager, "f").objects.deepEqual(this.state.rowsPerPage, this.currentRowsPerPage)) {
         this.state.rowsPerPage = this.currentRowsPerPage;
         somethingChanged = true;
     }
@@ -2269,15 +2322,15 @@ _KupBox_intObserver = new WeakMap(), _KupBox_rowsRefs = new WeakMap(), _KupBox_n
         const prefix = currentIndex > 0 ? ';' : '';
         return accumulator + prefix + row.id;
     }, '');
-    if (!this.kupManager.objects.deepEqual(this.state.selectedRowsState, selectedRowsState)) {
+    if (!__classPrivateFieldGet(this, _KupBox_kupManager, "f").objects.deepEqual(this.state.selectedRowsState, selectedRowsState)) {
         this.state.selectedRowsState = selectedRowsState;
         somethingChanged = true;
     }
-    if (!this.kupManager.objects.deepEqual(this.state.loadMoreLimit, this.loadMoreLimit)) {
+    if (!__classPrivateFieldGet(this, _KupBox_kupManager, "f").objects.deepEqual(this.state.loadMoreLimit, this.loadMoreLimit)) {
         this.state.loadMoreLimit = this.loadMoreLimit;
         somethingChanged = true;
     }
-    if (!this.kupManager.objects.deepEqual(this.state.showLoadMore, this.showLoadMore)) {
+    if (!__classPrivateFieldGet(this, _KupBox_kupManager, "f").objects.deepEqual(this.state.showLoadMore, this.showLoadMore)) {
         this.state.showLoadMore = this.showLoadMore;
         somethingChanged = true;
     }
@@ -2291,7 +2344,7 @@ _KupBox_intObserver = new WeakMap(), _KupBox_rowsRefs = new WeakMap(), _KupBox_n
     const callback = (entries) => {
         entries.forEach((entry) => {
             if (entry.isIntersecting) {
-                this.kupManager.debug.logMessage(this, 'Last row entering the viewport, loading more elements.');
+                __classPrivateFieldGet(this, _KupBox_kupManager, "f").debug.logMessage(this, 'Last row entering the viewport, loading more elements.');
                 const delta = this.data.rows.length - this.currentRowsPerPage;
                 if (delta < this.loadMoreStep) {
                     this.currentRowsPerPage += delta;

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

@@ -32,7 +32,6 @@ export class KupButton {
         this.toggable = false;
         this.trailingIcon = false;
         this.sizing = KupComponentSizing.SMALL;
-        this.keyShortcut = undefined;
     }
     onKupBlur() {
         this.kupBlur.emit({
@@ -115,9 +114,6 @@ export class KupButton {
         else {
             this.value = 'N/A';
         }
-        if (this.keyShortcut && !this.disabled) {
-            this.kupManager.keysBinding.register(this.keyShortcut, this.onKupClick.bind(this));
-        }
     }
     componentDidRender() {
         this.kupManager.debug.logRender(this, true);
@@ -187,9 +183,6 @@ export class KupButton {
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
-        if (this.keyShortcut) {
-            this.kupManager.keysBinding.unregister(this.keyShortcut);
-        }
     }
     static get is() { return "kup-button"; }
     static get encapsulation() { return "shadow"; }
@@ -540,23 +533,6 @@ export class KupButton {
                 "attribute": "sizing",
                 "reflect": false,
                 "defaultValue": "KupComponentSizing.SMALL"
-            },
-            "keyShortcut": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "key-shortcut",
-                "reflect": false
             }
         };
     }

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

@@ -316,10 +316,14 @@
   border-color: var(--kup_calendar_event_background_color);
   color: var(--kup_calendar_event_color);
 }
+#kup-component .fc-event {
+  padding: 0.5rem;
+}
 #kup-component .fc-event-main {
   color: inherit;
+  display: flex;
 }
-#kup-component .fc-event-title {
+#kup-component .fc-event-title .fc-event-time {
   padding: 0.25em;
 }
 #kup-component .fc-event-time {

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

@@ -1,4 +1,4 @@
-import { forceUpdate, getAssetPath, h, Host, } from "@stencil/core";
+import { forceUpdate, h, Host, } from "@stencil/core";
 import { Calendar, } from "@fullcalendar/core";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import interactionPlugin from "@fullcalendar/interaction";
@@ -144,24 +144,42 @@ export class KupCalendar {
                     row: event.extendedProps.row,
                 });
             },
+            eventTimeFormat: {
+                hour: '2-digit',
+                minute: '2-digit',
+            },
             eventDidMount: (info) => {
+                // In the calendar component, we handle two cases:
+                // if the '.fc-event-main' div exists, the event don't has start/end time;
+                const content = document.createElement('div');
+                const mainEvent = info.el.querySelector('.fc-event-main');
+                if (!mainEvent) {
+                    const title = info.el.querySelector('.fc-event-title');
+                    const time = info.el.querySelector('.fc-event-time');
+                    content.append(time, title);
+                    content.style.display = 'flex';
+                    content.style.flexDirection = 'column';
+                    info.el.appendChild(content);
+                }
                 if (this.iconCol) {
                     const row = info.event.extendedProps.row;
                     const cell = row.cells[this.iconCol];
                     if (cell === null || cell === void 0 ? void 0 : cell.value) {
                         const wrapper = document.createElement('div');
                         wrapper.classList.add('icon-wrapper');
-                        cell.value.split(';').forEach((icon) => {
-                            if (icon) {
-                                const span = document.createElement('span');
-                                span.className = 'custom-icon';
-                                const path = getAssetPath(`./assets/svg/${icon}.svg`);
-                                span.style.mask = `url('${path}') no-repeat center`;
-                                span.style.webkitMask = `url('${path}') no-repeat center`;
-                                wrapper.appendChild(span);
-                            }
-                        });
-                        info.el.appendChild(wrapper);
+                        const propsFImage = {
+                            resource: cell.value,
+                            placeholderResource: cell.placeholderIcon,
+                            sizeX: '1.5em',
+                            sizeY: '1.5em',
+                            wrapperClass: 'custom-icon',
+                        };
+                        const fImage = document.createElement('kup-image');
+                        Object.keys(propsFImage).forEach((prop) => (fImage[prop] = propsFImage[prop]));
+                        wrapper.appendChild(fImage);
+                        mainEvent
+                            ? mainEvent.appendChild(wrapper)
+                            : info.el.appendChild(wrapper);
                     }
                 }
                 if (this.imageCol) {
@@ -443,11 +461,11 @@ export class KupCalendar {
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: '2e09ca9ff59ee7119bd48ef2755c753027524b3d' }, h("style", { key: '49aba4781dead4d8a7610a9a73058ff86f57cdf6' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'a8c561b5f047f1cd95cd2c0efa085585d80c1c62', id: componentWrapperId }, h("div", { key: '3924302e0abe429b7c2b79f0af5c5455f492d1e4', class: "navigation" }, !this.hideNavigation ? (h("div", { class: "navigation__left" }, h(FButton, { icon: "chevron_left", onClick: () => this.onPrev(), title: this.kupManager.language.translate(KupLanguageGeneric.PREVIOUS), wrapperClass: "navigation__prev" }), h(FButton, { icon: "calendar", onClick: () => this.onToday(), title: this.kupManager.language.translate(KupLanguageGeneric.TODAY), wrapperClass: "navigation__today" }), h(FButton, { icon: "chevron_right", onClick: () => this.onNext(), title: this.kupManager.language.translate(KupLanguageGeneric.NEXT), wrapperClass: "navigation__next" }))) : null, h("div", { key: 'eff283c43cf7d63dd4f33ab01294f627bd03446d', class: `navigation__title ${this.hideNavigation
+        return (h(Host, { key: '694d6c782eed06ec64232acc3ef163236c157711' }, h("style", { key: 'eaa3dca371969bb1cedb5b45e019ad6b563d3a0f' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '8d1d89e4526d1b50649d9486f5f292ff328d5457', id: componentWrapperId }, h("div", { key: 'fd7ce40682db901688644ff02e4fcd56f79c9256', class: "navigation" }, !this.hideNavigation ? (h("div", { class: "navigation__left" }, h(FButton, { icon: "chevron_left", onClick: () => this.onPrev(), title: this.kupManager.language.translate(KupLanguageGeneric.PREVIOUS), wrapperClass: "navigation__prev" }), h(FButton, { icon: "calendar", onClick: () => this.onToday(), title: this.kupManager.language.translate(KupLanguageGeneric.TODAY), wrapperClass: "navigation__today" }), h(FButton, { icon: "chevron_right", onClick: () => this.onNext(), title: this.kupManager.language.translate(KupLanguageGeneric.NEXT), wrapperClass: "navigation__next" }))) : null, h("div", { key: '832adde7b78762398fb46d100159bc9e3ad31ea3', class: `navigation__title ${this.hideNavigation
                 ? 'navigation__title--centered'
                 : ''}`, ref: (el) => {
                 this.navTitle = el;
-            } }), h("div", { key: '5b5ad62259d36a33641b8a12c5f983f11a4fb962', class: "navigation__right" }, this.enableChangeView ? (h(FChip, Object.assign({}, this.setChipProps()))) : null)), h("div", { key: '06df126df2c243ddea639a30934d61190057f0fc', class: "calendar", ref: (el) => (this.calendarContainer = el) }))));
+            } }), h("div", { key: '93d4d527539c090ca8a29ee76c04ef8ee0c36d29', class: "navigation__right" }, this.enableChangeView ? (h(FChip, Object.assign({}, this.setChipProps()))) : null)), h("div", { key: 'cf94727499fdd2dd62a8e0fb0481575b631efb4f', class: "calendar", ref: (el) => (this.calendarContainer = el) }))));
     }
     disconnectedCallback() {
         if (this.calendar) {

package/dist/collection/components/kup-combobox/kup-combobox-declarations.js

@@ -17,4 +17,5 @@ export var KupComboboxProps;
     KupComboboxProps["label"] = "When set, its content will be shown as a label.";
     KupComboboxProps["leadingLabel"] = "When set to true, the label will be on the left of the component.";
     KupComboboxProps["showMarker"] = "When true shows a small marker on the component";
+    KupComboboxProps["legacyLook"] = "When true enables the monospaced look for the CMB component";
 })(KupComboboxProps || (KupComboboxProps = {}));