@sme.up/ketchup 10.1.0 → 10.2.0

package/dist/collection/components/kup-time-picker/kup-time-picker.js

@@ -9,6 +9,7 @@ import { FTextFieldMDC } from "../../f-components/f-text-field/f-text-field-mdc"
 import { KupCardFamily, } from "../kup-card/kup-card-declarations";
 import { KupDynamicPositionPlacement } from "../../managers/kup-dynamic-position/kup-dynamic-position-declarations";
 import { KupDatesFormats } from "../../managers/kup-dates/kup-dates-declarations";
+import { FILTER_ANALYZER } from "../../utils/filters/filters-declarations";
 export class KupTimePicker {
     constructor() {
         /*-------------------------------------------------*/
@@ -26,6 +27,7 @@ export class KupTimePicker {
         this.pickerKupEl = undefined;
         this.clickCb = null;
         this.value = '';
+        this.appendSelection = false;
         this.clockVariant = true;
         this.customStyle = '';
         this.data = {};
@@ -55,12 +57,12 @@ export class KupTimePicker {
         });
         this.setFocus();
     }
-    onKupClearIconClick() {
-        this.setPickerValueSelected('');
+    async onKupClearIconClick() {
+        this.value = '';
         this.kupChange.emit({
             comp: this,
             id: this.rootElement.id,
-            value: this.value,
+            value: await this.getValue(),
         });
         this.kupClearIconClick.emit({
             comp: this,
@@ -147,6 +149,10 @@ export class KupTimePicker {
             return;
         }
     }
+    watchInitialValue() {
+        this.setValue(this.initialValue);
+        this.refresh();
+    }
     /*-------------------------------------------------*/
     /*           P u b l i c   M e t h o d s           */
     /*-------------------------------------------------*/
@@ -201,11 +207,13 @@ export class KupTimePicker {
     }
     refreshPickerValue(eventDetailValue, eventToRaise) {
         let newValue = null;
-        if (this.kupManager.dates.isValidFormattedStringTime(eventDetailValue, this.manageSeconds)) {
+        const isValidFilter = FILTER_ANALYZER.test(eventDetailValue);
+        if (this.kupManager.dates.isValidFormattedStringTime(eventDetailValue, this.manageSeconds) ||
+            isValidFilter) {
             this.value = eventDetailValue;
             newValue = this.value;
         }
-        if (newValue != null) {
+        if (newValue != null && eventToRaise) {
             eventToRaise.emit({
                 comp: this,
                 id: this.rootElement.id,
@@ -227,7 +235,17 @@ export class KupTimePicker {
         if (newValue == null) {
             return;
         }
-        this.value = newValue;
+        if (this.appendSelection && newValue) {
+            // Append behavior: combine current value with the new one
+            const currentValue = this.textfieldEl.value;
+            const formattedDate = this.kupManager.dates.timeStringToFormattedString(newValue, this.manageSeconds);
+            const combinedValue = currentValue + formattedDate;
+            this.refreshPickerValue(combinedValue, undefined);
+        }
+        else {
+            // Default behavior: replace the entire value
+            this.value = newValue;
+        }
     }
     getPickerValueSelected() {
         return this.value;
@@ -311,10 +329,13 @@ export class KupTimePicker {
         return idConc.indexOf('#' + id + '#') >= 0;
     }
     prepTimePicker() {
+        const startingValue = this.kupManager.dates.isValidFormattedStringTime(this.value, this.manageSeconds)
+            ? this.getTimeForOutput()
+            : '';
         if (this.clockVariant) {
             const data = {
                 options: {
-                    initialValue: this.value,
+                    initialValue: startingValue,
                     manageSeconds: this.manageSeconds,
                     hoursActive: this.hoursActive,
                     minutesActive: this.minutesActive,
@@ -327,7 +348,7 @@ export class KupTimePicker {
                 } }));
         }
         else {
-            return (h("kup-list", { ref: (el) => (this.pickerKupEl = el), data: this.createTimeListData(this.value), "is-menu": true, "onkup-list-click": (e) => this.onKupTimePickerItemClick(e, e.detail.selected.id), id: this.rootElement.id + '_list' }));
+            return (h("kup-list", { ref: (el) => (this.pickerKupEl = el), data: this.createTimeListData(startingValue), "is-menu": true, "onkup-list-click": (e) => this.onKupTimePickerItemClick(e, e.detail.selected.id), id: this.rootElement.id + '_list' }));
         }
     }
     createTimeListData(value) {
@@ -369,6 +390,9 @@ export class KupTimePicker {
         if (this.value == null || this.value.trim() == '') {
             return '';
         }
+        if (FILTER_ANALYZER.test(this.value)) {
+            return this.value;
+        }
         let v1 = this.kupManager.dates.timeStringToFormattedString(this.value, this.manageSeconds);
         return v1;
     }
@@ -407,7 +431,7 @@ export class KupTimePicker {
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: '07115e9254d13af0b5b1cc97fbb4314f0445db06' }, h("style", { key: 'ab3c334b95be976a3a3bdfa4369fff68c893a959' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '74baa3e57532f2a2f6339a8a15a1c6841b592da2', id: componentWrapperId }, this.prepTextfield(this.getTimeForOutput()))));
+        return (h(Host, { key: '997fb07059e92499bd05e903bc1386d474158422' }, h("style", { key: 'aa3545fd8451391ca1eb53c88b61aea1aec9d30d' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'ca27bff1abeafddae9279398a31c3c83fa04aa47', id: componentWrapperId }, this.prepTextfield(this.getTimeForOutput()))));
     }
     disconnectedCallback() {
         this.kupManager.dates.unregister(this);
@@ -430,6 +454,27 @@ export class KupTimePicker {
     }
     static get properties() {
         return {
+            "appendSelection": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "When set to true, the selected date will be appended to the current value\r\ninstead of replacing it."
+                },
+                "attribute": "append-selection",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "clockVariant": {
                 "type": "boolean",
                 "mutable": false,
@@ -966,6 +1011,9 @@ export class KupTimePicker {
         return [{
                 "propName": "timeMinutesStep",
                 "methodName": "watchTimeMinutesStep"
+            }, {
+                "propName": "initialValue",
+                "methodName": "watchInitialValue"
             }];
     }
     static get listeners() {

package/dist/collection/components/kup-toolbar/kup-toolbar.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;
@@ -145,7 +145,7 @@
 .parent-class {
   position: relative;
   cursor: pointer;
-  width: 200px;
+  min-width: 175px;
   background-color: var(--kup-gray-color-10);
   display: flex;
   justify-content: space-between;
@@ -165,6 +165,11 @@
   display: flex;
   gap: 8px;
   align-items: center;
+  font-family: var(--kup-font-family);
+  font-size: var(--kup-body-compact-01-font-size, 14px);
+  line-height: 18px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
 }
 .parent-class:hover:not(.toolbar-item-disabled):not(:has(> .f-cell)) {
   background-color: var(--kup-gray-color-10-hover);
@@ -233,12 +238,4 @@
 }
 .nested-class .f-cell .f-cell__content .f-radio .form-field:hover {
   background-color: var(--kup-gray-color-10-hover);
-}
-.nested-class .f-cell .f-cell__content .f-radio .form-field .radio {
-  padding: var(--kup-space-03) 0 var(--kup-space-03) var(--kup-space-03);
-}
-.nested-class .f-cell .f-cell__content .f-radio .form-field label {
-  width: 100%;
-  cursor: pointer;
-  padding: var(--kup-space-03);
 }

package/dist/collection/components/kup-tree/kup-tree.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;
@@ -204,6 +204,13 @@
   color: var(--kup_tree_text_color);
 }
 
+.density-extra_dense .wrapper .kup-tree td:not(.grid-cell),
+.density-extra_dense .wrapper .kup-tree th,
+.density-extra_dense .wrapper .kup-tree td:not(.grid-cell),
+.density-extra_dense .wrapper .kup-tree th {
+  padding: var(--kup-space-02) var(--kup-space-03);
+}
+
 .density-dense .wrapper .kup-tree td:not(.grid-cell),
 .density-dense .wrapper .kup-tree th,
 .density-dense .wrapper .kup-tree td:not(.grid-cell),
@@ -248,7 +255,7 @@
 .wrapper .kup-tree thead.header--is-visible th span {
   color: var(--kup_tree_header_text_color);
   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;
@@ -348,9 +355,9 @@
 .wrapper .kup-tree__node:hover:not(.kup-tree__node--disabled):not(.kup-tree__node--selected) td {
   background-color: var(--kup_tree_tr_background_color_hover);
   color: var(--kup_tree_text_hover_color);
-}
-.wrapper .kup-tree__node:hover:not(.kup-tree__node--disabled):not(.kup-tree__node--selected) td .kup-icon {
-  background-color: var(--kup_tree_text_hover_color);
+  /*.kup-icon {
+    background-color: var(--kup_tree_text_hover_color);
+  }*/
 }
 .wrapper .kup-tree__node--selected:not(.kup-tree__node--disabled) td {
   background-color: var(--kup_tree_tr_background_color_focus);
@@ -438,6 +445,9 @@ tfoot td:first-of-type {
 .totals-value {
   font-weight: bold;
 }
+.totals-value.danger-text {
+  color: var(--kup-danger-color-60) !important;
+}
 
 :host([as-accordion]) .wrapper .kup-tree thead {
   display: table-header-group;
@@ -448,11 +458,14 @@ tfoot td:first-of-type {
 }
 :host([as-accordion]) .wrapper .kup-tree thead tr th span {
   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;
 }
+:host([as-accordion]) .density-extra_dense .first-node:not(.grid-cell) {
+  padding: var(--kup-space-02) var(--kup-space-03);
+}
 :host([as-accordion]) .density-dense .first-node:not(.grid-cell) {
   padding: 0.5em 1em;
 }
@@ -493,7 +506,6 @@ tfoot td:first-of-type {
 :host([as-accordion]) .kup-tree__node--first .kup-tree__icon {
   margin-left: 0;
   margin-right: var(--kup-space-03);
-  min-width: 1.5em;
 }
 :host([as-accordion]) .kup-tree__node--first .cell-content {
   margin-right: 0.5em;
@@ -503,11 +515,10 @@ tfoot td:first-of-type {
 }
 :host([as-accordion]) .kup-tree__node--first .kup-dropdown-icon {
   background-color: var(--kup_tree_icon_color);
-  height: 1.5em;
+  height: 1em;
   margin-left: auto;
-  margin-right: 0;
-  min-width: 1.5em;
-  width: 1.5em;
+  min-width: 1em;
+  width: 1em;
   transition: transform 0.1s;
 }
 :host([as-accordion]) .kup-tree__node:not(.kup-tree__node--first) + .kup-tree__node--first {

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

@@ -5,7 +5,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
         throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _KupTree_kupManager;
+var _KupTree_instances, _KupTree_checkUpdateState, _KupTree_kupManager;
 import { forceUpdate, h, Host, } from "@stencil/core";
 import { TotalLabel, TotalMode, } from "./../kup-data-table/kup-data-table-declarations";
 import { KupTreeProps, treeMainColumnName, KupTreeExpansionMode, } from "./kup-tree-declarations";
@@ -13,18 +13,20 @@ import { MDCRipple } from "@material/ripple";
 import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
 import { calcTotals, normalizeRows, } from "../kup-data-table/kup-data-table-helper";
 import { KupTreeState } from "./kup-tree-state";
-import { getColumnByName, getValueForDisplay } from "../../utils/cell-utils";
+import { getColumnByName, getValueForDisplay, isNegativeNumber, } from "../../utils/cell-utils";
 import { getProps, setProps } from "../../utils/utils";
 import { KupColumnMenu } from "../../utils/kup-column-menu/kup-column-menu";
 import { FiltersColumnMenu } from "../../utils/filters/filters-column-menu";
 import { KupGlobalFilterMode, } from "../../utils/filters/filters-declarations";
 import { FiltersTreeItems } from "../../utils/filters/filters-tree-items";
+import { ItemsDisplayMode, } from "../kup-list/kup-list-declarations";
+import { KupComponentSizing, } from "../../types/GenericTypes";
 import { kupDynamicPositionAttribute, } from "../../managers/kup-dynamic-position/kup-dynamic-position-declarations";
 import { KupLanguageGeneric, KupLanguageSearch, KupLanguageTotals, } from "../../managers/kup-language/kup-language-declarations";
 import { componentWrapperId } from "../../variables/GenericVariables";
 import { KupThemeIconValues } from "../../managers/kup-theme/kup-theme-declarations";
 import { KupPointerEventTypes } from "../../managers/kup-interact/kup-interact-declarations";
-import { FCellPadding, } from "../../f-components/f-cell/f-cell-declarations";
+import { FCellClasses, FCellPadding, } from "../../f-components/f-cell/f-cell-declarations";
 import { FCell } from "../../f-components/f-cell/f-cell";
 import { KupDebugCategory } from "../../managers/kup-debug/kup-debug-declarations";
 import { FTextFieldMDC } from "../../f-components/f-text-field/f-text-field-mdc";
@@ -32,6 +34,7 @@ import { FImage } from "../../f-components/f-image/f-image";
 import { isExpandable } from "./kup-tree-helper";
 export class KupTree {
     constructor() {
+        _KupTree_instances.add(this);
         /*-------------------------------------------------*/
         /*                   S t a t e s                   */
         /*-------------------------------------------------*/
@@ -66,7 +69,7 @@ export class KupTree {
         this.columns = undefined;
         this.customStyle = '';
         this.data = [];
-        this.density = FCellPadding.MEDIUM;
+        this.density = FCellPadding.EXTRA_DENSE;
         this.dynamicExpansionCallback = undefined;
         this.editableData = false;
         this.enableExtraColumns = true;
@@ -90,9 +93,11 @@ export class KupTree {
         this.store = undefined;
         this.useDynamicExpansion = false;
         this.totals = undefined;
+        this.displayMode = ItemsDisplayMode.CODE_AND_DESC;
     }
     initWithPersistedState() {
         if (this.store && this.stateId) {
+            this.state.load = true;
             const state = this.store.getState(this.stateId);
             if (state != null) {
                 this.density = state.density;
@@ -107,35 +112,7 @@ export class KupTree {
     }
     persistState() {
         if (this.store && this.stateId) {
-            let somethingChanged = false;
-            if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.filters, this.filters)) {
-                this.state.filters = Object.assign({}, this.filters);
-                somethingChanged = true;
-            }
-            if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.density, this.density)) {
-                this.state.density = this.density;
-                somethingChanged = true;
-            }
-            if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.showFilters, this.showFilters)) {
-                this.state.showFilters = this.showFilters;
-                somethingChanged = true;
-            }
-            if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.showFooter, this.showFooter)) {
-                this.state.showFooter = this.showFooter;
-                somethingChanged = true;
-            }
-            if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.totals, this.totals)) {
-                this.state.totals = Object.assign({}, this.totals);
-                somethingChanged = true;
-            }
-            if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.globalFilter, this.globalFilter)) {
-                this.state.globalFilter = this.globalFilter;
-                somethingChanged = true;
-            }
-            if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
-                this.state.globalFilterValue = this.globalFilterValue;
-                somethingChanged = true;
-            }
+            let somethingChanged = __classPrivateFieldGet(this, _KupTree_instances, "m", _KupTree_checkUpdateState).call(this);
             if (!this.state.load) {
                 this.state.load = true;
                 return;
@@ -917,6 +894,7 @@ export class KupTree {
      * @returns The the JSX created from the current tree node.
      */
     renderTreeNode(treeNodeData, treeNodePath, treeNodeDepth = 0) {
+        var _a, _b, _c, _d, _e, _f;
         // Creates the indentation of the current element. Use a css variable to specify padding.
         let indent = treeNodeDepth ? (h("span", { class: "kup-tree__indent", style: {
                 ['--kup_tree_node_depth']: this.asAccordion
@@ -1028,13 +1006,25 @@ export class KupTree {
                     ';';
         }
         let treeNodeCell = null;
+        let nodeValue;
+        switch (this.displayMode) {
+            case ItemsDisplayMode.CODE:
+                nodeValue = (_b = (_a = treeNodeData.obj) === null || _a === void 0 ? void 0 : _a.k) !== null && _b !== void 0 ? _b : '';
+                break;
+            case ItemsDisplayMode.DESCRIPTION:
+                nodeValue = (_c = treeNodeData.value) !== null && _c !== void 0 ? _c : '';
+                break;
+            default:
+                nodeValue = `${(_e = (_d = treeNodeData.obj) === null || _d === void 0 ? void 0 : _d.k) !== null && _e !== void 0 ? _e : ''}: ${(_f = treeNodeData.value) !== null && _f !== void 0 ? _f : ''}`;
+                break;
+        }
         if (this.isTreeColumnVisible()) {
             let content = '';
             if (KupGlobalFilterMode.HIGHLIGHT === this.globalFilterMode) {
                 content = this.renderHighlightedContent(treeNodeData.value, this.globalFilterValue, 'cell-content');
             }
             else {
-                content = (h("span", { ref: (el) => this.contentRefs.push(el), class: "cell-content", title: this.preventXScroll ? treeNodeData.value : null }, treeNodeData.value));
+                content = (h("span", { ref: (el) => this.contentRefs.push(el), class: "cell-content", title: this.preventXScroll ? treeNodeData.value : null }, nodeValue));
             }
             treeNodeCell = (h("td", { class: {
                     'first-node': treeNodeDepth === 0 ? true : false,
@@ -1173,10 +1163,13 @@ export class KupTree {
                 }
                 totalMenu = (h("kup-list", { class: `total-menu`, data: listData, id: "totals-menu", "is-menu": true, keyboardNavigation: true, "menu-visible": true, "onkup-list-click": (event) => this.onTotalsChange(event, column) }));
             }
-            const value = this.footer[column.name] != null
+            const totalValue = this.footer[column.name] != null
                 ? getValueForDisplay(this.footer[column.name], column.obj, column.decimals)
                 : '';
-            return (h("td", { "data-column": column.name }, totalMenu, h("span", { class: "totals-value", title: translation[menuLabel] }, value)));
+            const totalsClass = `totals-value ${isNegativeNumber(this.footer[column.name])
+                ? FCellClasses.TEXT_DANGER
+                : ''}`;
+            return (h("td", { "data-column": column.name }, totalMenu, h("span", { class: totalsClass, title: translation[menuLabel] }, totalValue)));
         });
         return (h("tfoot", null, h("tr", null, nodesCell, footerCells)));
     }
@@ -1332,7 +1325,7 @@ export class KupTree {
     render() {
         this.contentRefs = [];
         this.sizedColumns = this.getSizedColumns();
-        let wrapperClass = 'density-medium';
+        let wrapperClass = `density-${this.density}`;
         const wrapperStyle = Object.assign({}, (this.treeHeight
             ? {
                 maxHeight: this.treeHeight,
@@ -1365,17 +1358,17 @@ export class KupTree {
             this.data &&
             this.data.length &&
             this.data.length > 0) {
-            filterField = (h("div", { key: '5e0393124b57035eda73c632a85938ab0ae002f1', id: "global-filter" }, h("kup-text-field", { key: '0a3e925da3a45c26f9e0bb936616dd564f94ffa1', fullWidth: true, label: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), icon: KupThemeIconValues.SEARCH, initialValue: this.globalFilterValue, "onkup-textfield-input": (event) => {
+            filterField = (h("div", { key: 'e68236c35b28dc74903b90003d4a1240b569f366', id: "global-filter" }, h("kup-text-field", { key: '526bdfb87cd35eb6168a1bf3334fde8323e45be1', fullWidth: true, label: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), sizing: KupComponentSizing.EXTRA_SMALL, icon: KupThemeIconValues.SEARCH, initialValue: this.globalFilterValue, "onkup-textfield-input": (event) => {
                     window.clearTimeout(this.globalFilterTimeout);
                     this.globalFilterTimeout = window.setTimeout(() => this.onGlobalFilterChange(event), 600);
                 } })));
         }
-        return (h(Host, { key: '8c7486b86ac0645e9a73c3465d20e063576fc7c0' }, h("style", { key: 'daeb495384898e45d1a0eafa06a05b7eddd2d7a1' }, __classPrivateFieldGet(this, _KupTree_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'e394fff2782159bd3aa33cbc750ba4a42226bdc1', id: componentWrapperId, class: wrapperClass, style: wrapperStyle }, filterField, h("div", { key: '8e67cfe6a711cf8dcf4150f3533daf7f218b736f', class: "wrapper", ref: (el) => (this.treeWrapperRef =
-                el) }, h("table", { key: 'dd3e380965053a3ff94f86efd7bf7e7001b7ba7c', class: "kup-tree", "data-show-columns": this.showColumns, onContextMenu: (e) => {
+        return (h(Host, { key: 'c369bdb6e28db1beb946f3a715a8421fe3e2a701' }, h("style", { key: '82c896b8da6ef3e31158198388bb0664096b2c49' }, __classPrivateFieldGet(this, _KupTree_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'f2d74776516574f96aab1ca357f9da575a577bfd', id: componentWrapperId, class: wrapperClass, style: wrapperStyle }, filterField, h("div", { key: '7944337733b78bed4ac37052fff0a03d4a7e03b0', class: "wrapper", ref: (el) => (this.treeWrapperRef =
+                el) }, h("table", { key: 'd63479c278a53d922ad04aa335dd1744a19def0a', class: "kup-tree", "data-show-columns": this.showColumns, onContextMenu: (e) => {
                 e.preventDefault();
-            } }, h("thead", { key: '6a25652d0403cdf50ffd485af2f1a9b5457e71fa', class: {
+            } }, h("thead", { key: '98aa898b8f23b08d2e0813bb86f64c7d51a6c246', class: {
                 'header--is-visible': visibleHeader,
-            } }, h("tr", { key: '391cd95863e6a3a568f2748d4a50f67d58832be0' }, visibleHeader ? this.renderHeader() : null)), h("tbody", { key: '141dd67b3f3acc6ed59db18bdeaadd9eb64242ca' }, treeNodes), (this.showFooter || this.hasTotals()) &&
+            } }, h("tr", { key: 'cba9c76ebbaa03e58069683bff831507ce51e0fa' }, visibleHeader ? this.renderHeader() : null)), h("tbody", { key: 'f4a869f9406a8c4a7fd9158cca6db016054ddea8' }, treeNodes), (this.showFooter || this.hasTotals()) &&
             this.columns
             ? this.renderFooter()
             : null)))));
@@ -1504,7 +1497,7 @@ export class KupTree {
                 "mutable": false,
                 "complexType": {
                     "original": "FCellPadding",
-                    "resolved": "FCellPadding.DENSE | FCellPadding.MEDIUM | FCellPadding.NONE | FCellPadding.WIDE",
+                    "resolved": "FCellPadding.DENSE | FCellPadding.EXTRA_DENSE | FCellPadding.MEDIUM | FCellPadding.NONE | FCellPadding.WIDE",
                     "references": {
                         "FCellPadding": {
                             "location": "import",
@@ -1521,7 +1514,7 @@ export class KupTree {
                 },
                 "attribute": "density",
                 "reflect": false,
-                "defaultValue": "FCellPadding.MEDIUM"
+                "defaultValue": "FCellPadding.EXTRA_DENSE"
             },
             "dynamicExpansionCallback": {
                 "type": "unknown",
@@ -1992,6 +1985,30 @@ export class KupTree {
                     "tags": [],
                     "text": "Defines the current totals options."
                 }
+            },
+            "displayMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ItemsDisplayMode",
+                    "resolved": "ItemsDisplayMode.CODE | ItemsDisplayMode.CODE_AND_DESC | ItemsDisplayMode.CODE_AND_DESC_ALIAS | ItemsDisplayMode.DESCRIPTION | ItemsDisplayMode.DESC_AND_CODE",
+                    "references": {
+                        "ItemsDisplayMode": {
+                            "location": "import",
+                            "path": "../kup-list/kup-list-declarations",
+                            "id": "src/components/kup-list/kup-list-declarations.ts::ItemsDisplayMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "display-mode",
+                "reflect": false,
+                "defaultValue": "ItemsDisplayMode.CODE_AND_DESC"
             }
         };
     }
@@ -2589,4 +2606,35 @@ export class KupTree {
             }];
     }
 }
-_KupTree_kupManager = new WeakMap();
+_KupTree_kupManager = new WeakMap(), _KupTree_instances = new WeakSet(), _KupTree_checkUpdateState = function _KupTree_checkUpdateState() {
+    let somethingChanged = false;
+    if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.filters, this.filters)) {
+        this.state.filters = Object.assign({}, this.filters);
+        somethingChanged = true;
+    }
+    if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.density, this.density)) {
+        this.state.density = this.density;
+        somethingChanged = true;
+    }
+    if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.showFilters, this.showFilters)) {
+        this.state.showFilters = this.showFilters;
+        somethingChanged = true;
+    }
+    if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.showFooter, this.showFooter)) {
+        this.state.showFooter = this.showFooter;
+        somethingChanged = true;
+    }
+    if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.totals, this.totals)) {
+        this.state.totals = Object.assign({}, this.totals);
+        somethingChanged = true;
+    }
+    if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.globalFilter, this.globalFilter)) {
+        this.state.globalFilter = this.globalFilter;
+        somethingChanged = true;
+    }
+    if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
+        this.state.globalFilterValue = this.globalFilterValue;
+        somethingChanged = true;
+    }
+    return somethingChanged;
+};

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

@@ -74,7 +74,7 @@ export class KupTxt {
     }
     render() {
         const value = this.getValue();
-        return (h(Host, { key: 'fbe2200c7ce21e54ac76e18ae7528a6146e2103e' }, h("style", { key: '305582e167c3fcb42699d2745a122f1f28518c7e' }, __classPrivateFieldGet(this, _KupTxt_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'e3e26cf5ec452df4506b55572b08eb2b7a432aec', id: componentWrapperId }, h("div", { key: 'b3a15899dabeee9df7c72dbfef5583f67ac4e183', innerHTML: value }))));
+        return (h(Host, { key: '05b83ab932103ec9ebeeff7bfaffc3d2def6d945' }, h("style", { key: 'd1207c1f47fa24a6acecbc49a765e9f2926f3c7d' }, __classPrivateFieldGet(this, _KupTxt_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'fce2b328dbb5bbb4255548bed43e429fc28fec40', id: componentWrapperId }, h("div", { key: '399fb51322b4b0567738f7f7472eae2ea3f40261', innerHTML: value }))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupTxt_kupManager, "f").theme.unregister(this);

package/dist/collection/components/kup-typography/kup-typography.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;