@sme.up/ketchup 10.1.0 → 10.2.0

package/dist/collection/components/kup-activity-timeline/kup-activity-timeline.js

@@ -73,12 +73,12 @@ export class KupActivityTimeline {
         });
     }
     activityItem(activity) {
-        return (h("div", { class: "atm-row" }, activity.columns.map((column) => (h("div", { class: "atm-col" }, h("div", { class: "atm-inner-col" }, h("h3", null, column.title, ":")), h("div", { class: "atm-inner-col", onClick: (e) => {
+        return (h("div", { class: "atm-row" }, activity.cells.map((cell) => (h("div", { class: "atm-col" }, h("div", { class: "atm-inner-col" }, h("h3", null, cell.title, ":")), h("div", { class: "atm-inner-col", onClick: (e) => {
                 e.stopPropagation();
-                this.onActivityClick(e, column);
+                this.onActivityClick(e, cell);
             }, onContextMenu: (e) => {
-                this.onActivityContextMenu(e, column);
-            } }, h("p", null, column.value)))))));
+                this.onActivityContextMenu(e, cell);
+            } }, h("p", null, cell.value)))))));
     }
     calendarIcon() {
         return (h(FImage, { color: "white", resource: 'calendar', wrapperClass: "activity-timeline-item__icon", sizeX: "20px", sizeY: "32px" }));
@@ -381,18 +381,32 @@ export class KupActivityTimeline {
 }
 _KupActivityTimeline_kupManager = new WeakMap(), _KupActivityTimeline_instances = new WeakSet(), _KupActivityTimeline_toTimeline = function _KupActivityTimeline_toTimeline(data) {
     const { columns, rows } = data;
-    const dateColumn = columns.find((col) => col.name === this.dateColumn);
-    const timeColumn = columns.find((col) => col.name === this.timeColumn);
-    if (!dateColumn || !timeColumn)
+    if (!rows) {
+        __classPrivateFieldGet(this, _KupActivityTimeline_kupManager, "f").debug.logMessage(this, 'Empty rows', KupDebugCategory.ERROR);
         return [];
-    const activitiesByDate = sortRows(rows, this.sort).reduce((acc, row) => {
-        const date = getCellValueForDisplay(dateColumn, row.cells[dateColumn.name]);
-        const time = getCellValueForDisplay(timeColumn, row.cells[timeColumn.name]);
-        const key = `${date} ${time}`;
-        acc[key] = acc[key] || [];
-        acc[key].push({
-            columns: columns
-                .filter((col) => col.visible !== false)
+    }
+    const dateColumn = columns.find((col) => __classPrivateFieldGet(this, _KupActivityTimeline_kupManager, "f").objects.isDate(col.obj) &&
+        col.name === this.dateColumn);
+    const timeColumn = columns.find((col) => __classPrivateFieldGet(this, _KupActivityTimeline_kupManager, "f").objects.isTime(col.obj) &&
+        col.name === this.timeColumn);
+    if (!dateColumn && !timeColumn) {
+        __classPrivateFieldGet(this, _KupActivityTimeline_kupManager, "f").debug.logMessage(this, 'At least one of "dateColumn" or "timeColumn" must be set and exist in the dataset', KupDebugCategory.ERROR);
+        return [];
+    }
+    const filteredSort = this.sort.filter(({ column }) => 
+    // Filter only the existing columns
+    columns.some((col) => col.name === column));
+    const activitiesByDate = sortRows(rows, filteredSort).reduce((activitiesByDate, row) => {
+        const dateValue = dateColumn
+            ? getCellValueForDisplay(dateColumn, row.cells[dateColumn.name])
+            : '';
+        const timeValue = timeColumn
+            ? getCellValueForDisplay(timeColumn, row.cells[timeColumn.name])
+            : '';
+        const key = `${dateValue} ${timeValue}`.trim();
+        activitiesByDate[key].push({
+            cells: columns
+                .filter((col) => col.visible)
                 .map((col) => ({
                 title: col.title,
                 value: getCellValueForDisplay(col, row.cells[col.name]),
@@ -400,8 +414,14 @@ _KupActivityTimeline_kupManager = new WeakMap(), _KupActivityTimeline_instances
                 rowId: row.id,
             })),
         });
-        return acc;
-    }, {});
+        return activitiesByDate;
+    }, new Proxy({}, {
+        get: (target, key) => {
+            var _a;
+            // Set default value if it doesn't exist yet
+            return (_a = target[key]) !== null && _a !== void 0 ? _a : (target[key] = []);
+        },
+    }));
     return Object.entries(activitiesByDate).map(([date, activities]) => ({
         date,
         activities,

package/dist/collection/components/kup-autocomplete/kup-autocomplete.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-autocomplete/kup-autocomplete.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 _KupAutocomplete_instances, _KupAutocomplete_doConsistencyCheck, _KupAutocomplete_elStyle, _KupAutocomplete_listEl, _KupAutocomplete_kupManager, _KupAutocomplete_textfieldWrapper, _KupAutocomplete_textfieldEl, _KupAutocomplete_clickCb, _KupAutocomplete_inputTimeout, _KupAutocomplete_openList, _KupAutocomplete_closeList, _KupAutocomplete_isListOpened, _KupAutocomplete_consistencyCheck, _KupAutocomplete_prepList, _KupAutocomplete_calcSize;
+var _KupAutocomplete_instances, _KupAutocomplete_elStyle, _KupAutocomplete_listEl, _KupAutocomplete_kupManager, _KupAutocomplete_textfieldWrapper, _KupAutocomplete_textfieldEl, _KupAutocomplete_clickCb, _KupAutocomplete_inputTimeout, _KupAutocomplete_openList, _KupAutocomplete_closeList, _KupAutocomplete_isListOpened, _KupAutocomplete_consistencyCheck, _KupAutocomplete_prepList, _KupAutocomplete_calcSize;
 import { forceUpdate, h, Host, } from "@stencil/core";
 import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
 import { FTextField } from "../../f-components/f-text-field/f-text-field";
@@ -33,7 +33,6 @@ export class KupAutocomplete {
         /*-------------------------------------------------*/
         /*       I n t e r n a l   V a r i a b l e s       */
         /*-------------------------------------------------*/
-        _KupAutocomplete_doConsistencyCheck.set(this, true);
         _KupAutocomplete_elStyle.set(this, undefined);
         _KupAutocomplete_listEl.set(this, null);
         /**
@@ -52,6 +51,7 @@ export class KupAutocomplete {
         this.data = undefined;
         this.disabled = false;
         this.displayMode = ItemsDisplayMode.DESCRIPTION;
+        this.listDisplayMode = ItemsDisplayMode.CODE_AND_DESC;
         this.error = '';
         this.icon = null;
         this.initialValue = '';
@@ -81,7 +81,6 @@ export class KupAutocomplete {
         }
     }
     onKupChange(value) {
-        __classPrivateFieldSet(this, _KupAutocomplete_doConsistencyCheck, true, "f");
         if (value) {
             const ret = __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, value, undefined, true);
             if (ret.exists || this.allowInconsistentValues) {
@@ -123,7 +122,6 @@ export class KupAutocomplete {
         });
     }
     onKupInput() {
-        __classPrivateFieldSet(this, _KupAutocomplete_doConsistencyCheck, true, "f");
         const ret = __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value, undefined, false);
         setTimeout(() => {
             __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, false);
@@ -170,6 +168,16 @@ export class KupAutocomplete {
         });
     }
     /*-------------------------------------------------*/
+    /*                  W a t c h e r s                */
+    /*-------------------------------------------------*/
+    initialValueChange(newValue) {
+        this.initialValueDecode = undefined;
+        this.setValue(newValue, undefined);
+    }
+    initialValueDecodeChange(newValue) {
+        this.setValue(this.initialValue, newValue);
+    }
+    /*-------------------------------------------------*/
     /*                L i s t e n e r s                */
     /*-------------------------------------------------*/
     listenKeydown(e) {
@@ -259,7 +267,6 @@ export class KupAutocomplete {
      * @param {string} value - Value of the component.
      */
     async setValue(value, valueDecode) {
-        __classPrivateFieldSet(this, _KupAutocomplete_doConsistencyCheck, true, "f");
         __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, value, valueDecode, true);
     }
     /**
@@ -275,7 +282,6 @@ export class KupAutocomplete {
     componentWillLoad() {
         __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").debug.logLoad(this, false);
         __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").theme.register(this);
-        __classPrivateFieldSet(this, _KupAutocomplete_doConsistencyCheck, true, "f");
         this.value = this.initialValue;
         if (!this.data) {
             this.data = {
@@ -333,7 +339,7 @@ export class KupAutocomplete {
         };
         const fullHeight = this.rootElement.classList.contains('kup-full-height');
         const fullWidth = this.rootElement.classList.contains('kup-full-width');
-        return (h(Host, { key: 'af182fb1d5e5a15b609b9239e50556cf8dc84f47', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h("style", { key: 'bededa26a9664d3bb78fbb0e0db83d0d037f667f' }, __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '3114d918b88680310324e3ee257ecbddc1a0ce2b', id: componentWrapperId, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h(FTextField, Object.assign({ key: 'ca085177d064a1f4dc9940d2f773af4ab5f6eb4b' }, props, { icon: this.showDropDownIcon
+        return (h(Host, { key: '34b53e37b4e6d9ea9ad04fc93f9e50f172243483', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h("style", { key: 'aa6fe378e2035a502e273261b6a2bf098635deb5' }, __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'af0e6b946566ced1bee92e5b1ec39c8f7cea1b0b', id: componentWrapperId, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h(FTextField, Object.assign({ key: '013526b611b989ca3c21fdcf78135a0a086434b0' }, props, { icon: this.showDropDownIcon
                 ? KupThemeIconValues.SEARCH
                 : null, trailingIcon: true }, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupClick(), onChange: (e) => this.onKupChange(e.target.value), onFocus: () => this.onKupFocus(), onInput: () => {
                 window.clearTimeout(__classPrivateFieldGet(this, _KupAutocomplete_inputTimeout, "f"));
@@ -499,6 +505,30 @@ export class KupAutocomplete {
                 "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,
@@ -1191,6 +1221,15 @@ export class KupAutocomplete {
         };
     }
     static get elementRef() { return "rootElement"; }
+    static get watchers() {
+        return [{
+                "propName": "initialValue",
+                "methodName": "initialValueChange"
+            }, {
+                "propName": "initialValueDecode",
+                "methodName": "initialValueDecodeChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "keydown",
@@ -1201,7 +1240,7 @@ export class KupAutocomplete {
             }];
     }
 }
-_KupAutocomplete_doConsistencyCheck = new WeakMap(), _KupAutocomplete_elStyle = new WeakMap(), _KupAutocomplete_listEl = new WeakMap(), _KupAutocomplete_kupManager = new WeakMap(), _KupAutocomplete_textfieldWrapper = new WeakMap(), _KupAutocomplete_textfieldEl = new WeakMap(), _KupAutocomplete_clickCb = new WeakMap(), _KupAutocomplete_inputTimeout = new WeakMap(), _KupAutocomplete_instances = new WeakSet(), _KupAutocomplete_openList = function _KupAutocomplete_openList(forceOpen) {
+_KupAutocomplete_elStyle = new WeakMap(), _KupAutocomplete_listEl = new WeakMap(), _KupAutocomplete_kupManager = new WeakMap(), _KupAutocomplete_textfieldWrapper = new WeakMap(), _KupAutocomplete_textfieldEl = new WeakMap(), _KupAutocomplete_clickCb = new WeakMap(), _KupAutocomplete_inputTimeout = new WeakMap(), _KupAutocomplete_instances = new WeakSet(), _KupAutocomplete_openList = function _KupAutocomplete_openList(forceOpen) {
     var _a, _b;
     if (forceOpen != true &&
         __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value.length < this.minimumChars) {
@@ -1213,6 +1252,7 @@ _KupAutocomplete_doConsistencyCheck = new WeakMap(), _KupAutocomplete_elStyle =
     const topOffset = hasError || hasAlert ? -20 : 0;
     __classPrivateFieldGet(this, _KupAutocomplete_textfieldWrapper, "f").classList.add('toggled');
     __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f").menuVisible = true;
+    __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f").setFocusOnFirstEl();
     const elStyle = __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f").style;
     elStyle.height = 'auto';
     elStyle.minWidth = __classPrivateFieldGet(this, _KupAutocomplete_textfieldWrapper, "f").clientWidth + 'px';
@@ -1241,14 +1281,10 @@ _KupAutocomplete_doConsistencyCheck = new WeakMap(), _KupAutocomplete_elStyle =
 }, _KupAutocomplete_isListOpened = function _KupAutocomplete_isListOpened() {
     return __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f").menuVisible == true;
 }, _KupAutocomplete_consistencyCheck = function _KupAutocomplete_consistencyCheck(idIn, idInDecode, eventShouldSetValue) {
-    if (!__classPrivateFieldGet(this, _KupAutocomplete_doConsistencyCheck, "f")) {
-        return;
-    }
     if (idIn && idInDecode) {
         this.displayedValue = getIdOfItemByDisplayMode({ id: idIn, value: idInDecode }, this.displayMode, ' - ');
     }
     else {
-        __classPrivateFieldSet(this, _KupAutocomplete_doConsistencyCheck, false, "f");
         const ret = consistencyCheck(idIn, this.data['kup-list'], __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f"), this.selectMode, this.displayMode);
         if ((ret.exists || this.allowInconsistentValues) &&
             eventShouldSetValue) {
@@ -1264,7 +1300,7 @@ _KupAutocomplete_doConsistencyCheck = new WeakMap(), _KupAutocomplete_elStyle =
         return ret;
     }
 }, _KupAutocomplete_prepList = function _KupAutocomplete_prepList() {
-    return (h("kup-list", Object.assign({ displayMode: ItemsDisplayMode.CODE_AND_DESC }, this.data['kup-list'], { isMenu: true, "onkup-list-click": (e) => this.onKupItemClick(e), ref: (el) => (__classPrivateFieldSet(this, _KupAutocomplete_listEl, el, "f")) })));
+    return (h("kup-list", Object.assign({ displayMode: this.listDisplayMode }, this.data['kup-list'], { isMenu: true, "onkup-list-click": (e) => this.onKupItemClick(e), ref: (el) => (__classPrivateFieldSet(this, _KupAutocomplete_listEl, el, "f")) })));
 }, _KupAutocomplete_calcSize = function _KupAutocomplete_calcSize() {
     var _a, _b;
     // Explicitly setting size from sub-components props, if present

package/dist/collection/components/kup-badge/kup-badge.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-box/kup-box.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-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_intObserver, _KupBox_rowsRefs, _KupBox_navBarHeight, _KupBox_loadMoreEventCounter, _KupBox_loadMoreEventPreviousQuantity, _KupBox_didRenderObservers, _KupBox_setObserver, _KupBox_onLoadMoreClick;
+var _KupBox_instances, _KupBox_checkUpdateState, _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";
@@ -98,6 +98,7 @@ export class KupBox {
     }
     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 ' +
@@ -117,48 +118,13 @@ export class KupBox {
     }
     persistState() {
         if (this.store && this.stateId) {
-            let somethingChanged = false;
-            if (!this.kupManager.objects.deepEqual(this.state.sortBy, this.sortBy)) {
-                this.state.sortBy = this.sortBy;
-                somethingChanged = true;
-            }
-            if (!this.kupManager.objects.deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
-                this.state.globalFilterValue = this.globalFilterValue;
-                somethingChanged = true;
-            }
-            if (!this.kupManager.objects.deepEqual(this.state.pageSelected, this.currentPage)) {
-                this.state.pageSelected = this.currentPage;
-                somethingChanged = true;
-            }
-            if (!this.kupManager.objects.deepEqual(this.state.rowsPerPage, this.currentRowsPerPage)) {
-                this.state.rowsPerPage = this.currentRowsPerPage;
-                somethingChanged = true;
-            }
-            const selectedRowsState = this.selectedRows.reduce((accumulator, row, currentIndex) => {
-                const prefix = currentIndex > 0 ? ';' : '';
-                return accumulator + prefix + row.id;
-            }, '');
-            if (!this.kupManager.objects.deepEqual(this.state.selectedRowsState, selectedRowsState)) {
-                this.state.selectedRowsState = selectedRowsState;
-                somethingChanged = true;
-            }
-            if (!this.kupManager.objects.deepEqual(this.state.loadMoreLimit, this.loadMoreLimit)) {
-                this.state.loadMoreLimit = this.loadMoreLimit;
-                somethingChanged = true;
-            }
-            if (!this.kupManager.objects.deepEqual(this.state.showLoadMore, this.showLoadMore)) {
-                this.state.showLoadMore = this.showLoadMore;
-                somethingChanged = true;
-            }
+            let somethingChanged = __classPrivateFieldGet(this, _KupBox_instances, "m", _KupBox_checkUpdateState).call(this);
             if (!this.state.load) {
                 this.state.load = true;
                 return;
             }
             if (somethingChanged) {
-                this.kupManager.debug.logMessage(this, 'Persisting state for stateId ' +
-                    this.stateId +
-                    ': ' +
-                    this.state);
+                this.kupManager.debug.logMessage(this, 'Persisting stateId ' + this.stateId);
                 this.store.persistState(this.stateId, this.state);
             }
         }
@@ -705,13 +671,13 @@ export class KupBox {
             const parent = {
                 horizontal: horizontal,
             };
-            while (size-- > 0) {
-                if (this.cardData !== null &&
-                    this.cardData !== undefined &&
-                    typeof this.cardData === 'object') {
-                    boxContent.push(this.renderSectionAsCard(row));
-                }
-                else {
+            if (this.cardData !== null &&
+                this.cardData !== undefined &&
+                typeof this.cardData === 'object') {
+                boxContent.push(this.renderSectionAsCard(row));
+            }
+            else {
+                while (size-- > 0) {
                     boxContent.push(this.renderSection(sections[cnt++], parent, row, visibleColumns));
                 }
             }
@@ -1202,7 +1168,7 @@ export class KupBox {
                 // mode={FPaginatorMode.SIMPLE}
                 perPage: this.currentRowsPerPage
                     ? this.currentRowsPerPage
-                    : this.rowsPerPage, onLoadMore: this.showLoadMore
+                    : this.rowsPerPage, maxRowsPerPage: Number.MAX_VALUE, onLoadMore: this.showLoadMore
                     ? () => {
                         __classPrivateFieldGet(this, _KupBox_instances, "m", _KupBox_onLoadMoreClick).call(this);
                     }
@@ -2281,7 +2247,42 @@ 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_didRenderObservers = function _KupBox_didRenderObservers() {
+_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)) {
+        this.state.sortBy = this.sortBy;
+        somethingChanged = true;
+    }
+    if (!this.kupManager.objects.deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
+        this.state.globalFilterValue = this.globalFilterValue;
+        somethingChanged = true;
+    }
+    if (!this.kupManager.objects.deepEqual(this.state.pageSelected, this.currentPage)) {
+        this.state.pageSelected = this.currentPage;
+        somethingChanged = true;
+    }
+    if (!this.kupManager.objects.deepEqual(this.state.rowsPerPage, this.currentRowsPerPage)) {
+        this.state.rowsPerPage = this.currentRowsPerPage;
+        somethingChanged = true;
+    }
+    const selectedRowsState = this.selectedRows.reduce((accumulator, row, currentIndex) => {
+        const prefix = currentIndex > 0 ? ';' : '';
+        return accumulator + prefix + row.id;
+    }, '');
+    if (!this.kupManager.objects.deepEqual(this.state.selectedRowsState, selectedRowsState)) {
+        this.state.selectedRowsState = selectedRowsState;
+        somethingChanged = true;
+    }
+    if (!this.kupManager.objects.deepEqual(this.state.loadMoreLimit, this.loadMoreLimit)) {
+        this.state.loadMoreLimit = this.loadMoreLimit;
+        somethingChanged = true;
+    }
+    if (!this.kupManager.objects.deepEqual(this.state.showLoadMore, this.showLoadMore)) {
+        this.state.showLoadMore = this.showLoadMore;
+        somethingChanged = true;
+    }
+    return somethingChanged;
+}, _KupBox_didRenderObservers = function _KupBox_didRenderObservers() {
     if (this.lazyLoadRows &&
         this.currentRowsPerPage < this.data.rows.length) {
         __classPrivateFieldGet(this, _KupBox_intObserver, "f").observe(__classPrivateFieldGet(this, _KupBox_rowsRefs, "f")[__classPrivateFieldGet(this, _KupBox_rowsRefs, "f").length - 1]);

package/dist/collection/components/kup-button/kup-button.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-button-list/kup-button-list.css

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

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

@@ -26,6 +26,7 @@ export class KupButtonList {
         this.showSelection = true;
         this.sizing = KupComponentSizing.SMALL;
         this.styling = FButtonStyling.RAISED;
+        this.showText = true;
     }
     onKupClick(index, subIndex) {
         this.selected = index;
@@ -102,7 +103,7 @@ export class KupButtonList {
             iconOff: data.iconOff,
             placeholderIcon: data.placeholderIcon,
             id: data.id,
-            label: data.label,
+            label: this.showText ? data.label : undefined,
             large: data.large,
             neutral: this.rootElement.classList.contains('kup-neutral')
                 ? true
@@ -139,6 +140,7 @@ export class KupButtonList {
         return (h("kup-dropdown-button", Object.assign({ class: this.rootElement.className + ' ' + data.wrapperClass }, data, { "onkup-dropdownbutton-click": () => this.onKupClick(index.toString(), '-1'), "onkup-dropdownbutton-itemclick": (e) => this.onDropDownItemClick(e, index.toString()) })));
     }
     prepareDataFromTreeNode(node, index) {
+        var _a;
         const data = node.data != null ? Object.assign({}, node.data) : {};
         if (this.customStyle != null && this.customStyle.trim() != '') {
             data.customStyle = this.customStyle;
@@ -165,7 +167,7 @@ export class KupButtonList {
             data.placeholderIcon = node.placeholderIcon;
         }
         if (data.label == null) {
-            data.label = node.value;
+            data.label = node.value ? node.value : (_a = node.obj) === null || _a === void 0 ? void 0 : _a.k;
         }
         data.fullHeight = this.rootElement.classList.contains('kup-full-height')
             ? true
@@ -292,7 +294,7 @@ export class KupButtonList {
             'button-list--container': true,
             'show-selection': this.showSelection && this.selected ? true : false,
         };
-        return (h(Host, { key: 'cf7273aac79fe032d74d508171c38c9cf930f6a8', style: hostStyle }, h("style", { key: '6f7f3e2b85f2c370c9ddee5e04aecac490db757d' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '30552b251e7310b025decb48ded611d4461d9ba6', id: componentWrapperId }, h("div", { key: 'ab9b3135dd4e53a690af6bb41e7457f8d4f13996', class: classObj }, buttons))));
+        return (h(Host, { key: '2e33423f2642435785fddd9367b95b5b36b3d427', style: hostStyle }, h("style", { key: '9b8e61b4515b6bf6d4f469b14e87e6743f785384' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '08d5b7f3fdd65e332e202dbc5eba22e04712e121', id: componentWrapperId }, h("div", { key: '95efb3149003ba19ca3db795fb7457deef78ccc2', class: classObj }, buttons))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -524,6 +526,24 @@ export class KupButtonList {
                 "attribute": "styling",
                 "reflect": true,
                 "defaultValue": "FButtonStyling.RAISED"
+            },
+            "showText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When set to false buttons don't show the text, only the icon if it is present."
+                },
+                "attribute": "show-text",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }

package/dist/collection/components/kup-calendar/kup-calendar.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;
@@ -300,7 +300,7 @@
   background: var(--kup_calendar_header_background_color);
   color: var(--kup_calendar_header_color);
   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;