@sme.up/ketchup 10.2.0 → 10.3.1

package/dist/components/{p-3438f15f.js → p-685106b4.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, d as Host } from './p-ef8cbd35.js';
-import { k as kupManagerInstance, ad as identify, g as getProps, s as setProps, Y as SortMode, L as getColumnByName, d as KupLanguageGeneric, c as KupThemeIconValues, u as KupDebugCategory, a7 as KupPointerEventTypes, ak as KupDragEffect, az as kupDraggableAttr, am as KupDropEventTypes, J as KupLanguageSearch } from './p-b304b91c.js';
-import { H as filterRows, I as paginateRows, E as sortRows, J as pageChange, L as rowsPerPageChange, F as FImage, N as FCell, O as FChip, P as FTextFieldMDC, c as componentWrapperId, d as defineCustomElement$1, a as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, g as defineCustomElement$6, h as defineCustomElement$7, i as defineCustomElement$8, j as defineCustomElement$9, k as defineCustomElement$a, l as defineCustomElement$b, m as defineCustomElement$c, n as defineCustomElement$d, o as defineCustomElement$e, p as defineCustomElement$f, q as defineCustomElement$g, r as defineCustomElement$h, s as defineCustomElement$i, t as defineCustomElement$j, u as defineCustomElement$k, v as defineCustomElement$l, w as defineCustomElement$m, x as defineCustomElement$n, y as defineCustomElement$o, z as defineCustomElement$p, A as defineCustomElement$q, B as defineCustomElement$r, C as defineCustomElement$s, D as defineCustomElement$t, Q as FPaginator } from './p-7d0f1f90.js';
+import { k as kupManagerInstance, ad as identify, g as getProps, s as setProps, Y as SortMode, L as getColumnByName, d as KupLanguageGeneric, c as KupThemeIconValues, u as KupDebugCategory, a7 as KupPointerEventTypes, ak as KupDragEffect, az as kupDraggableAttr, am as KupDropEventTypes, J as KupLanguageSearch } from './p-73922583.js';
+import { H as filterRows, I as paginateRows, E as sortRows, J as pageChange, L as rowsPerPageChange, F as FImage, N as FCell, O as FChip, P as FTextFieldMDC, c as componentWrapperId, d as defineCustomElement$1, a as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, g as defineCustomElement$6, h as defineCustomElement$7, i as defineCustomElement$8, j as defineCustomElement$9, k as defineCustomElement$a, l as defineCustomElement$b, m as defineCustomElement$c, n as defineCustomElement$d, o as defineCustomElement$e, p as defineCustomElement$f, q as defineCustomElement$g, r as defineCustomElement$h, s as defineCustomElement$i, t as defineCustomElement$j, u as defineCustomElement$k, v as defineCustomElement$l, w as defineCustomElement$m, x as defineCustomElement$n, y as defineCustomElement$o, z as defineCustomElement$p, A as defineCustomElement$q, B as defineCustomElement$r, C as defineCustomElement$s, D as defineCustomElement$t, Q as FPaginator } from './p-e0031e17.js';
 
 /**
  * Props of the kup-box component.
@@ -84,7 +84,7 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         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;
 const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
     constructor() {
         super();
@@ -99,6 +99,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
         this.kupDidUnload = createEvent(this, "kup-box-didunload", 6);
         this.kupBoxContextMenu = createEvent(this, "kup-box-contextmenu", 6);
         this.kupLoadMoreClick = createEvent(this, "kup-box-loadmoreclick", 6);
+        this.kupBoxCellClick = createEvent(this, "kup-box-cell-click", 6);
         _KupBox_instances.add(this);
         this.state = new KupBoxState();
         /*-------------------------------------------------*/
@@ -107,8 +108,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
         /**
          * Instance of the KupManager class.
          */
-        this.kupManager = kupManagerInstance();
-        this.visibleColumns = [];
+        _KupBox_kupManager.set(this, kupManagerInstance());
         this.rows = [];
         this.filteredRows = [];
         this.sectionRef = null;
@@ -158,13 +158,14 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
         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);
@@ -187,7 +188,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
                 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);
             }
         }
@@ -203,7 +204,6 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
     }
     onDataChanged() {
         identify(this.getRows());
-        this.initVisibleColumns();
         this.initRows();
         this.checkLayout();
     }
@@ -250,13 +250,24 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
             ? 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 : [];
@@ -265,7 +276,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
         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) {
@@ -294,14 +305,14 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
     }
     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);
                 }
             }
         }
@@ -319,7 +330,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
             sections: [],
         };
         // adding box objects to section
-        const visibleColumns = this.visibleColumns;
+        const visibleColumns = this.getVisibleColumns();
         let size = visibleColumns.length;
         let content = [];
         let cnt = 0;
@@ -335,7 +346,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
         };
     }
     onSortChange(e) {
-        let column = getColumnByName(this.visibleColumns, e.detail.value);
+        let column = getColumnByName(this.getVisibleColumns(), e.detail.value);
         this.sortBy = column.name;
     }
     onGlobalFilterChange({ detail }) {
@@ -404,7 +415,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
             else {
                 cell = boxObject['data-cell'];
                 row = boxObject['data-row'];
-                column = getColumnByName(this.visibleColumns, boxObject.dataset.column);
+                column = getColumnByName(this.getVisibleColumns(), boxObject.dataset.column);
             }
         }
         return {
@@ -416,7 +427,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
         };
     }
     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);
@@ -428,7 +439,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
         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;
     }
     /**
@@ -579,8 +590,9 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
             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);
@@ -709,7 +721,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
         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;
@@ -859,10 +871,10 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
                 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();
@@ -898,12 +910,16 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
         }
         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,
@@ -924,9 +940,9 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
     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)` },
             };
         }
@@ -947,7 +963,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
                     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 = {
@@ -1052,8 +1068,8 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
                 });
             }
         };
-        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) {
@@ -1063,7 +1079,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
                     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'],
@@ -1072,7 +1088,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
                 };
                 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;
@@ -1087,10 +1103,10 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
             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,
@@ -1101,7 +1117,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
             };
             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,
@@ -1112,7 +1128,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
                 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,
@@ -1127,7 +1143,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
     /*          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;
         }
@@ -1136,8 +1152,8 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
             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();
@@ -1166,10 +1182,10 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
         }
         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;
@@ -1183,7 +1199,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
         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");
@@ -1191,7 +1207,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
         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,
@@ -1201,7 +1217,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
             });
             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 = {
@@ -1216,7 +1232,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
         }
         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);
                 } })));
@@ -1236,7 +1252,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
         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) {
@@ -1256,17 +1272,19 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
                 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));
@@ -1317,6 +1335,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
         "stateId": [1, "state-id"],
         "store": [16],
         "swipeDisabled": [4, "swipe-disabled"],
+        "visibleColumns": [16],
         "collapsedSection": [32],
         "selectedRows": [32],
         "rowActionMenuOpened": [32],
@@ -1337,21 +1356,21 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends H {
         "layout": ["onLayoutChanged"],
         "selectBox": ["onSelectBoxChanged"]
     }]);
-_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;
     }
@@ -1359,15 +1378,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;
     }
@@ -1381,7 +1400,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;