@sme.up/ketchup 11.0.0-SNAPSHOT-20251128123437 → 11.0.0-SNAPSHOT-20251203145802

package/dist/components/{p-442f7301.js → p-05dc6405.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h as h$1, d as Host, F as Fragment$1 } from './p-ef8cbd35.js';
-import { b as KupThemeIconValues, I as ItemsDisplayMode, e as KupLanguageGeneric, a as KupComponentSizing, k as kupManagerInstance, d as KupDynamicPositionPlacement, f as editableTypes, h as kupTypes, F as FCellClasses, i as FCellTypes, c as KupThemeColorValues, C as CHIAdapter, R as RADAdapter, j as CMBandACPAdapter, l as KupTagNames, m as FCellShapes, n as getCellValueForDisplay, o as fullWidthFieldsComps, p as autoCenterComps, q as FCellEvents, r as isForceUppercase, t as isForceLowercase, u as KupDebugCategory, v as adaptContentToDisplayMode, w as FCellPadding, x as fillString, y as KupCardBuiltInClockElements, z as KupCardCSSClasses, A as KupLanguageTotals, B as KupLanguageColumn, D as KupDataNewColumnTypes, E as KupCardSubEvents, G as KupCardIds, H as KupLanguageRow, J as KupLanguageSearch, L as getColumnByName, M as KupObjects, N as formatToNumber, O as Filters, P as getValueForDisplay, Q as getValueForDisplay2, S as KupData, T as compareCell, U as TotalMode, V as getRegExpFromString, W as CHKAdapter, X as SWTAdapter, Y as SortMode, Z as GroupLabelDisplayMode, _ as SelectionMode, $ as KupLanguageGrouping, a0 as KupLanguageCheckbox, a1 as FILTER_ANALYZER, a2 as KupLanguagePage, a3 as addColumnValueFromRow, a4 as KupGlobalFilterMode, g as getProps, s as setProps, a5 as TotalLabel, a6 as isNegativeNumber, a7 as KupPointerEventTypes, a8 as kupDynamicPositionAttribute, a9 as identify, aa as KupListProps, ab as KupCardFamily, ac as KupListRole, ad as KupLanguageUpload, ae as LoadMoreMode, af as PaginatorPos, ag as ShowGrid, ah as kupDraggableColumnAttr, ai as kupDragActiveAttr, aj as KupDragEffect, ak as kupDraggableCellAttr, al as KupDropEventTypes, am as DataTableAreasEnum, an as TypesToDuplicate, ao as FixedCellsClasses, ap as FixedCellsCSSVarsBase, aq as KupLanguageFontsize, ar as KupLanguageDensity, as as KupLanguageGrid, at as KupDataTableProps, au as UseAsValue, av as iconColumn, aw as keyColumn, ax as fieldColumn, ay as getSizeOfInputElement, az as KupCardProps } from './p-0497ebe5.js';
+import { b as KupThemeIconValues, I as ItemsDisplayMode, e as KupLanguageGeneric, a as KupComponentSizing, k as kupManagerInstance, d as KupDynamicPositionPlacement, f as editableTypes, h as kupTypes, F as FCellClasses, i as FCellTypes, c as KupThemeColorValues, C as CHIAdapter, R as RADAdapter, j as CMBandACPAdapter, l as KupTagNames, m as FCellShapes, n as getCellValueForDisplay, o as fullWidthFieldsComps, p as autoCenterComps, q as FCellEvents, r as isForceUppercase, t as isForceLowercase, u as KupDebugCategory, v as adaptContentToDisplayMode, w as FCellPadding, x as fillString, y as KupCardBuiltInClockElements, z as KupCardCSSClasses, A as KupLanguageTotals, B as KupLanguageColumn, D as KupDataNewColumnTypes, E as KupCardSubEvents, G as KupCardIds, H as KupLanguageRow, J as KupLanguageSearch, L as getColumnByName, M as KupObjects, N as formatToNumber, O as Filters, P as getValueForDisplay, Q as getValueForDisplay2, S as KupData, T as compareCell, U as TotalMode, V as getRegExpFromString, W as CHKAdapter, X as SWTAdapter, Y as SortMode, Z as GroupLabelDisplayMode, _ as SelectionMode, $ as KupLanguageGrouping, a0 as KupLanguageCheckbox, a1 as FILTER_ANALYZER, a2 as KupLanguagePage, a3 as addColumnValueFromRow, a4 as KupGlobalFilterMode, g as getProps, s as setProps, a5 as TotalLabel, a6 as isNegativeNumber, a7 as KupPointerEventTypes, a8 as kupDynamicPositionAttribute, a9 as identify, aa as KupListProps, ab as KupCardFamily, ac as KupListRole, ad as KupLanguageUpload, ae as LoadMoreMode, af as PaginatorPos, ag as ShowGrid, ah as kupDraggableColumnAttr, ai as kupDragActiveAttr, aj as KupDragEffect, ak as kupDraggableCellAttr, al as KupDropEventTypes, am as DataTableAreasEnum, an as TypesToDuplicate, ao as FixedCellsClasses, ap as FixedCellsCSSVarsBase, aq as KupLanguageFontsize, ar as KupLanguageDensity, as as KupLanguageGrid, at as KupDataTableProps, au as UseAsValue, av as iconColumn, aw as keyColumn, ax as fieldColumn, ay as getSizeOfInputElement, az as KupCardProps } from './p-dcb752e1.js';
 import { h, g as getAssetPath, F as Fragment } from './p-3aae989f.js';
 import { c as KupDateTimeFormatOptionsMonth, K as KupDatesFormats, a as KupDates } from './p-60e697f5.js';
 
@@ -1333,7 +1333,9 @@ function setContent(props) {
                 webkitMask: svg,
             };
         }
-        iconEl = (h("span", { style: iconStyle, onClick: props.onIconClick, class: `mdc-text-field__icon kup-icon action ${iconClass}` }));
+        iconEl = (h("span", { style: iconStyle, onClick: props.onIconClick, onMouseDown: (e) => {
+                e.preventDefault();
+            }, class: `mdc-text-field__icon kup-icon action ${iconClass}` }));
     }
     if (props.quantityButtons) {
         const minusSvg = `url('${getAssetPath(`./assets/svg/minus.svg`)}') no-repeat center`;
@@ -4202,7 +4204,8 @@ var KupAutocompleteProps;
     KupAutocompleteProps["customStyle"] = "Custom style of the component.";
     KupAutocompleteProps["data"] = "Props of the sub-components.";
     KupAutocompleteProps["disabled"] = "Defaults at false. When set to true, the component is disabled.";
-    KupAutocompleteProps["displayMode"] = "Sets how to show the selected item value. Suported values: \"CodeOnly\", \"DescOnly\", \"Both\" or \"CodeAndDesc\" and \"DescAndCode\".";
+    KupAutocompleteProps["DescrMode"] = "Sets how to show the selected item value. Suported values: \"CodeOnly\", \"DescOnly\", \"Both\" or \"CodeAndDesc\" and \"DescAndCode\".";
+    KupAutocompleteProps["ListDescrMode"] = "Sets how to show the list items of the component. Suported values: \"CodeOnly\", \"DescOnly\", \"Both\" or \"CodeAndDesc\" and \"DescAndCode\".";
     KupAutocompleteProps["initialValue"] = "Sets the initial value of the component.";
     KupAutocompleteProps["initialValueDecode"] = "Sets the initial value decode of the component";
     KupAutocompleteProps["inputDelay"] = "Input event emission delay in milliseconds.";
@@ -4238,7 +4241,7 @@ function getIdOfItemByDisplayMode(item, mode, separator) {
             return id;
     }
 }
-function consistencyCheck(idIn, listData, listEl, selectMode, displayMode, e) {
+function consistencyCheck(idIn, listData, listEl, selectMode, DescrMode, e) {
     const validList = !!(listEl && listData && listData['data']);
     let id = '';
     let displayedValue = '';
@@ -4247,7 +4250,7 @@ function consistencyCheck(idIn, listData, listEl, selectMode, displayMode, e) {
         selected = e.detail.selected;
     }
     if (selected == null && idIn != null && validList) {
-        selected = getItemByDisplayMode(listData, idIn, displayMode, true);
+        selected = getItemByDisplayMode(listData, idIn, DescrMode, true);
         listEl.data = [...listData['data']];
     }
     if (selected == null && idIn == null && listData) {
@@ -4265,7 +4268,7 @@ function consistencyCheck(idIn, listData, listEl, selectMode, displayMode, e) {
     }
     else {
         id = getIdOfItemByDisplayMode(selected, selectMode, ' - ');
-        displayedValue = getIdOfItemByDisplayMode(selected, id == '' ? ItemsDisplayMode.DESCRIPTION : displayMode, ' - ');
+        displayedValue = getIdOfItemByDisplayMode(selected, id == '' ? ItemsDisplayMode.DESCRIPTION : DescrMode, ' - ');
         trueValue = getIdOfItemByDisplayMode(selected, ItemsDisplayMode.CODE, ' - ');
     }
     const listNode = validList
@@ -4323,12 +4326,12 @@ function getItemById(listData, id, setSelected) {
     }
     return null;
 }
-function getItemByDisplayMode(listData, id, displayMode, setSelected) {
+function getItemByDisplayMode(listData, id, DescrMode, setSelected) {
     if (listData && listData['data']) {
         let found = false;
         let item = null;
         for (let i = 0; i < listData['data'].length; i++) {
-            let displayedValue = getIdOfItemByDisplayMode(listData['data'][i], id == '' ? ItemsDisplayMode.DESCRIPTION : displayMode, ' - ');
+            let displayedValue = getIdOfItemByDisplayMode(listData['data'][i], id == '' ? ItemsDisplayMode.DESCRIPTION : DescrMode, ' - ');
             if (setSelected == true) {
                 listData['data'][i].selected = false;
             }
@@ -4653,8 +4656,8 @@ const FChip = (props) => {
     if (!props.type) {
         props.type = FChipType.STANDARD;
     }
-    if (!props.displayMode) {
-        props.displayMode = ItemsDisplayMode.DESCRIPTION;
+    if (!props.DescrMode) {
+        props.DescrMode = ItemsDisplayMode.DESCRIPTION;
     }
     const isChoice = props.type.toLowerCase() === FChipType.CHOICE;
     const isFilter = props.type.toLowerCase() === FChipType.FILTER;
@@ -4741,7 +4744,7 @@ function createChipList(props, isChoice, isFilter, isInput) {
                     h("svg", { class: "chip__checkmark-svg", viewBox: "-2 -3 30 30" },
                         h("path", { class: "chip__checkmark-path", fill: "none", stroke: "black", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))));
             }
-            let chipText = getIdOfItemByDisplayMode(chip, chip.value == '' ? ItemsDisplayMode.CODE : props.displayMode, ' - ');
+            let chipText = getIdOfItemByDisplayMode(chip, chip.value == '' ? ItemsDisplayMode.CODE : props.DescrMode, ' - ');
             return (h("div", { class: componentClass, "data-value": chip.id, onClick: props.onClick && props.onClick[i]
                     ? props.onClick[i].bind(props.onClick[i], chip)
                     : null, onContextMenu: props.onContextMenu && props.onContextMenu[i]
@@ -5716,7 +5719,7 @@ function setEditableCell(cellType, classObj, cell, column, props) {
         case FCellTypes.COLOR_PICKER:
             return (h("kup-color-picker", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', disabled: false, "onkup-colorpicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
         case FCellTypes.COMBOBOX:
-            return (h("kup-combobox", Object.assign({ key: column.name + props.row.id, initialValue: cell.value, initialValueDecode: cell.decode }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-combobox-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK), "onKup-combobox-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR), "onKup-combobox-itemclick": (e) => cellEvent(e, props, cellType, FCellEvents.ITEMCLICK) })));
+            return (h("kup-combobox", Object.assign({ key: column.name + props.row.id, initialValue: cell.value, initialValueDecode: cell.decode, ListDescrMode: cell.data.ListDescrMode }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-combobox-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK), "onKup-combobox-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR), "onKup-combobox-itemclick": (e) => cellEvent(e, props, cellType, FCellEvents.ITEMCLICK) })));
         case FCellTypes.DATE:
             return (h("kup-date-picker", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-datepicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-datepicker-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onKup-datepicker-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR), "onkup-datepicker-textfieldsubmit": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
         case FCellTypes.EDITOR:
@@ -5741,12 +5744,12 @@ function setEditableCell(cellType, classObj, cell, column, props) {
         case FCellTypes.FILE_UPLOAD:
             return (h("kup-file-upload", Object.assign({ "onKup-file-upload-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) }, cell.data)));
         case FCellTypes.MULTI_AUTOCOMPLETE: {
-            return (h("kup-chip", Object.assign({ displayMode: (_a = cell.data.displayMode) !== null && _a !== void 0 ? _a : ItemsDisplayMode.DESCRIPTION }, cell.data, { label: (_c = (_b = cell.slotData) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : '', type: FChipType.INPUT, enableInput: true, "onKup-chip-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) }),
-                h("kup-autocomplete", { class: "kup-full-width", slot: "field", displayMode: ItemsDisplayMode.CODE_AND_DESC, sizing: KupComponentSizing.EXTRA_SMALL, "onKup-autocomplete-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR), "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK), data: (_d = cell.slotData) === null || _d === void 0 ? void 0 : _d.data, initialValue: (_e = cell.slotData) === null || _e === void 0 ? void 0 : _e.initialValue, showDropDownIcon: (_f = cell.slotData) === null || _f === void 0 ? void 0 : _f.showDropDownIcon, style: (_g = cell.slotData) === null || _g === void 0 ? void 0 : _g.style, disabled: (_h = cell.slotData) === null || _h === void 0 ? void 0 : _h.disabled, id: (_j = cell.slotData) === null || _j === void 0 ? void 0 : _j.id, error: cell.data.error, showMarker: (_k = cell.tooltip) !== null && _k !== void 0 ? _k : false, listDisplayMode: cell.data.listDisplayMode })));
+            return (h("kup-chip", Object.assign({ DescrMode: (_a = cell.data.DescrMode) !== null && _a !== void 0 ? _a : ItemsDisplayMode.DESCRIPTION }, cell.data, { label: (_c = (_b = cell.slotData) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : '', type: FChipType.INPUT, enableInput: true, "onKup-chip-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) }),
+                h("kup-autocomplete", { class: "kup-full-width", slot: "field", DescrMode: ItemsDisplayMode.CODE_AND_DESC, sizing: KupComponentSizing.EXTRA_SMALL, "onKup-autocomplete-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR), "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK), data: (_d = cell.slotData) === null || _d === void 0 ? void 0 : _d.data, initialValue: (_e = cell.slotData) === null || _e === void 0 ? void 0 : _e.initialValue, showDropDownIcon: (_f = cell.slotData) === null || _f === void 0 ? void 0 : _f.showDropDownIcon, style: (_g = cell.slotData) === null || _g === void 0 ? void 0 : _g.style, disabled: (_h = cell.slotData) === null || _h === void 0 ? void 0 : _h.disabled, id: (_j = cell.slotData) === null || _j === void 0 ? void 0 : _j.id, error: cell.data.error, showMarker: (_k = cell.tooltip) !== null && _k !== void 0 ? _k : false, ListDescrMode: cell.data.ListDescrMode })));
         }
         case FCellTypes.MULTI_COMBOBOX:
-            return (h("kup-chip", Object.assign({ displayMode: (_l = cell.data.displayMode) !== null && _l !== void 0 ? _l : ItemsDisplayMode.DESCRIPTION }, cell.data, { type: FChipType.INPUT, enableInput: true, "onKup-chip-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) }),
-                h("kup-combobox", Object.assign({ class: "kup-full-width", slot: "field", displayMode: ItemsDisplayMode.CODE_AND_DESC, sizing: KupComponentSizing.EXTRA_SMALL, "onKup-combobox-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR), "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) }, cell.slotData, { error: cell.data.error, showMarker: (_m = cell.tooltip) !== null && _m !== void 0 ? _m : false }))));
+            return (h("kup-chip", Object.assign({ DescrMode: (_l = cell.data.DescrMode) !== null && _l !== void 0 ? _l : ItemsDisplayMode.DESCRIPTION }, cell.data, { type: FChipType.INPUT, enableInput: true, "onKup-chip-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) }),
+                h("kup-combobox", Object.assign({ class: "kup-full-width", slot: "field", DescrMode: ItemsDisplayMode.CODE_AND_DESC, sizing: KupComponentSizing.EXTRA_SMALL, "onKup-combobox-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR), "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) }, cell.slotData, { error: cell.data.error, showMarker: (_m = cell.tooltip) !== null && _m !== void 0 ? _m : false, ListDescrMode: cell.data.ListDescrMode }))));
         case FCellTypes.RADIO:
             return (h(FRadio, Object.assign({}, cell.data, { disabled: false, onChange: (i, e) => {
                     const radioData = cell.data.data;
@@ -5897,7 +5900,7 @@ function setCell(cellType, subcomponentProps, content, classObj, cell, column, p
             const activeNode = cell.data.data.find((node) => node.value === cell.value) || null;
             return (h("kup-image-list", Object.assign({ ripple: true }, cell.data, { "onKup-imagelist-click": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), activeNode: activeNode })));
         default:
-            return (h("div", { class: "f-cell__text" }, cell.data.displayMode
+            return (h("div", { class: "f-cell__text" }, cell.data.DescrMode
                 ? adaptContentToDisplayMode(cell, content, '-')
                 : content));
     }
@@ -10992,7 +10995,7 @@ var KupChipProps;
     KupChipProps["data"] = "List of elements.";
     // displayId = "When enabled, the chip's text will display both the id and the value.",
     KupChipProps["disabled"] = "When true, the chip cannot be edited, nor removed.";
-    KupChipProps["displayMode"] = "When enabled, the chip will display both the id and description of the data.";
+    KupChipProps["DescrMode"] = "When enabled, the chip will display both the id and description of the data.";
     KupChipProps["enableInput"] = "When enabled, it's possible to add items to the chip's dataset through an input slot (kup-autocomplete, kup-combobox, kup-text-field).";
     KupChipProps["label"] = "When set, will be shown a label on the chips.";
     KupChipProps["sizing"] = "The size of the chip. Available sizes: small, medium.";
@@ -11022,7 +11025,8 @@ var KupComboboxProps;
     KupComboboxProps["customStyle"] = "Custom style of the component.";
     KupComboboxProps["data"] = "Props of the sub-components (date input text field).";
     KupComboboxProps["disabled"] = "Defaults at false. When set to true, the component is disabled.";
-    KupComboboxProps["displayMode"] = "Sets how to show the selected item value. Suported values: \"CodeOnly\", \"DescOnly\", \"Both\".";
+    KupComboboxProps["DescrMode"] = "Sets how to show the selected item value. Suported values: \"CodeOnly\", \"DescOnly\", \"Both\".";
+    KupComboboxProps["ListDescrMode"] = "Sets how to show the list items of the component. Suported values: \"CodeOnly\", \"DescOnly\", \"Both\" or \"CodeAndDesc\" and \"DescAndCode\".";
     KupComboboxProps["initialValue"] = "Sets the initial value of the component";
     KupComboboxProps["initialValueDecode"] = "Sets the initial value decode of the component";
     KupComboboxProps["isClearable"] = "Enables a clear trailing icon.";
@@ -13079,7 +13083,7 @@ const FPaginator = (props) => {
     const dataPageSelector = {
         'kup-list': {
             data: pageItems,
-            displayMode: ItemsDisplayMode.CODE,
+            DescrMode: ItemsDisplayMode.CODE,
         },
         'kup-text-field': {
             label: dom$4.ketchup.language.translate(KupLanguagePage.PAGE),
@@ -13095,7 +13099,7 @@ const FPaginator = (props) => {
     const dataRowsSelector = {
         'kup-list': {
             data: rowsPerPageItems,
-            displayMode: ItemsDisplayMode.CODE,
+            DescrMode: ItemsDisplayMode.CODE,
         },
         'kup-text-field': {
             label: dom$4.ketchup.language.translate(KupLanguageRow.ROWS) +
@@ -13112,10 +13116,10 @@ const FPaginator = (props) => {
     };
     return (h("div", Object.assign({ class: `f-paginator ${props.mode ? props.mode : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
         props.onLoadMore ? (h(FButton, { icon: "plus", onClick: props.onLoadMore, label: dom$4.ketchup.language.translate(KupLanguageGeneric.LOAD_MORE), sizing: KupComponentSizing.SMALL, styling: FButtonStyling.FLAT, wrapperClass: "load-more-button kup-neutral" })) : null,
-        h("kup-combobox", { class: "rows-selector", data: dataRowsSelector, displayMode: ItemsDisplayMode.CODE, initialValue: props.perPage.toString(), initialValueDecode: props.perPage.toString(), "onkup-combobox-change": props.onRowsChange }),
+        h("kup-combobox", { class: "rows-selector", data: dataRowsSelector, DescrMode: ItemsDisplayMode.CODE, initialValue: props.perPage.toString(), initialValueDecode: props.perPage.toString(), "onkup-combobox-change": props.onRowsChange }),
         h("div", { class: "page-wrapper" },
             h("div", { class: "page-selector-wrapper" },
-                h("kup-combobox", { class: "page-selector", data: dataPageSelector, displayMode: ItemsDisplayMode.CODE, initialValue: props.currentPage.toString(), initialValueDecode: props.currentPage.toString(), "onkup-combobox-change": props.onPageChange }),
+                h("kup-combobox", { class: "page-selector", data: dataPageSelector, DescrMode: ItemsDisplayMode.CODE, initialValue: props.currentPage.toString(), initialValueDecode: props.currentPage.toString(), "onkup-combobox-change": props.onPageChange }),
                 props.showMaxPages ? (h("div", { class: "max-page-wrapper" },
                     h("label", { htmlFor: "page-selector" }, '/ ' + maxNumberOfPage))) : null),
             h("div", { class: "arrow-wrapper" },
@@ -13223,7 +13227,7 @@ var KupDropdownButtonProps;
     KupDropdownButtonProps["customStyle"] = "Custom style of the component.";
     KupDropdownButtonProps["data"] = "Props of the sub-components.";
     KupDropdownButtonProps["disabled"] = "Defaults at false. When set to true, the component is disabled.";
-    KupDropdownButtonProps["displayMode"] = "Sets how to show the selected item value. Suported values: \"CodeOnly\", \"DescOnly\", \"Both\" or \"CodeAndDesc\" and \"DescAndCode\".";
+    KupDropdownButtonProps["DescrMode"] = "Sets how to show the selected item value. Suported values: \"CodeOnly\", \"DescOnly\", \"Both\" or \"CodeAndDesc\" and \"DescAndCode\".";
     KupDropdownButtonProps["icon"] = "Defaults at null. When set, the button will show this icon.";
     KupDropdownButtonProps["initialValue"] = "Sets the initial value of the component.";
     KupDropdownButtonProps["label"] = "Defaults at null. When set, the button will show this text.";
@@ -14700,7 +14704,7 @@ const KupTree = /*@__PURE__*/ proxyCustomElement(class KupTree extends H {
         this.store = undefined;
         this.useDynamicExpansion = false;
         this.totals = undefined;
-        this.displayMode = ItemsDisplayMode.CODE_AND_DESC;
+        this.DescrMode = ItemsDisplayMode.CODE_AND_DESC;
     }
     initWithPersistedState() {
         if (this.store && this.stateId) {
@@ -15611,7 +15615,7 @@ const KupTree = /*@__PURE__*/ proxyCustomElement(class KupTree extends H {
         }
         let treeNodeCell = null;
         let nodeValue;
-        switch (this.displayMode) {
+        switch (this.DescrMode) {
             case ItemsDisplayMode.CODE:
                 nodeValue = (_b = (_a = treeNodeData.obj) === null || _a === void 0 ? void 0 : _a.k) !== null && _b !== void 0 ? _b : '';
                 break;
@@ -15960,19 +15964,19 @@ const KupTree = /*@__PURE__*/ proxyCustomElement(class KupTree extends H {
         const visibleHeader = this.showHeader && this.showColumns;
         let filterField = null;
         if (this.globalFilter) {
-            filterField = (h$1("div", { key: 'f2b4e67e0aa7e0d6057b9e7a5bf6df5ac5e849be', id: "global-filter" }, h$1("kup-text-field", { key: '937f5908044c7f62bc2278d525e1e2a99b81e6e0', fullWidth: true, label: __classPrivateFieldGet$b(this, _KupTree_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), sizing: KupComponentSizing.EXTRA_SMALL, icon: KupThemeIconValues.SEARCH, initialValue: this.globalFilterValue, "onkup-textfield-input": (event) => {
+            filterField = (h$1("div", { key: 'b0ec1086e2b4dfed4d01eed6344f2b9723e50a78', id: "global-filter" }, h$1("kup-text-field", { key: 'b9ac273ade69fee415828e88bde88abea9bd7911', fullWidth: true, label: __classPrivateFieldGet$b(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$1(Host, { key: '82baa24794e4fd4c001ef1994b93c947e819dadd', "onKup-cell-click": (e) => {
+        return (h$1(Host, { key: '8e36db0583c51ef4721d14649453d592024c9e0d', "onKup-cell-click": (e) => {
                 this.kupTreeCellClick.emit(e.detail);
-            } }, h$1("style", { key: 'bf6b4adaf080e6ab6d92bb4689a8f9cec805794b' }, __classPrivateFieldGet$b(this, _KupTree_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: '3dcf815be376d3b295e8e126d08e40ff815f128d', id: componentWrapperId, class: wrapperClass, style: wrapperStyle }, filterField, h$1("div", { key: '27020fdbd26407fc14ccb29d791bb1acc79fe4c1', class: "wrapper", ref: (el) => (this.treeWrapperRef =
-                el) }, h$1("table", { key: '3e42837e76b8a74f55ef62ac6c991e2e7314c4b4', class: "kup-tree", "data-show-columns": this.showColumns, onContextMenu: (e) => {
+            } }, h$1("style", { key: '01a452ebdd782e0111d148f3fac132b7ef8704ce' }, __classPrivateFieldGet$b(this, _KupTree_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: '365ff6370028fcbe2a28489cf8df8f0502f471b1', id: componentWrapperId, class: wrapperClass, style: wrapperStyle }, filterField, h$1("div", { key: '8310f20be32b01d93a1615ccd01d5bbab8eaa783', class: "wrapper", ref: (el) => (this.treeWrapperRef =
+                el) }, h$1("table", { key: '4678d2fc2ff097f5866f1171faa1b9bfec9c9304', class: "kup-tree", "data-show-columns": this.showColumns, onContextMenu: (e) => {
                 e.preventDefault();
-            } }, h$1("thead", { key: 'a739f35c4272670ab993b5f9cfbfcda13cd25f94', class: {
+            } }, h$1("thead", { key: '83d22c2cc27c41e63cd2325a9da0576257b21bd0', class: {
                 'header--is-visible': visibleHeader,
-            } }, h$1("tr", { key: '5dde3d45392d2b7d01a8a2f665b061213c778d13' }, visibleHeader ? this.renderHeader() : null)), h$1("tbody", { key: '4d579e7536795a271df3d3802cf6d74649d23f82' }, treeNodes), (this.showFooter || this.hasTotals()) &&
+            } }, h$1("tr", { key: 'cbeedfa19b0d218639bac9b1518cd04590512870' }, visibleHeader ? this.renderHeader() : null)), h$1("tbody", { key: '062aa1d90d53d0dc2fd453e1b60d4c81b5a3e30f' }, treeNodes), (this.showFooter || this.hasTotals()) &&
             this.columns
             ? this.renderFooter()
             : null)))));
@@ -16029,7 +16033,7 @@ const KupTree = /*@__PURE__*/ proxyCustomElement(class KupTree extends H {
         "store": [16],
         "useDynamicExpansion": [4, "use-dynamic-expansion"],
         "totals": [1040],
-        "displayMode": [1, "display-mode"],
+        "DescrMode": [1, "descr-mode"],
         "treeColumnVisible": [32],
         "openedTotalMenu": [32],
         "columnMenuAnchor": [32],
@@ -20457,7 +20461,7 @@ const KupList = /*@__PURE__*/ proxyCustomElement(class KupList extends H {
         this.selected = [];
         this.customStyle = '';
         this.data = [];
-        this.displayMode = ItemsDisplayMode.DESCRIPTION;
+        this.DescrMode = ItemsDisplayMode.DESCRIPTION;
         this.showFilter = false;
         this.filter = '';
         this.hideText = false;
@@ -20701,7 +20705,7 @@ const KupList = /*@__PURE__*/ proxyCustomElement(class KupList extends H {
         }
         __classPrivateFieldSet$5(this, _KupList_radios, [], "f");
         let index = 0;
-        return (h$1(Host, { key: 'd0793cb58c9b793df3259c297673470028d39a40' }, h$1("style", { key: '1abd323a6dde41928bde88b8eb78836905a4079b' }, __classPrivateFieldGet$7(this, _KupList_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: 'd9eb12de67f3373107b0d9028255fdfc07c58351', id: "kup-component", class: wrapperClass, onKeyDown: __classPrivateFieldGet$7(this, _KupList_listenKeydown, "f") }, this.showFilter ? (h$1("div", { class: filterClass }, __classPrivateFieldGet$7(this, _KupList_instances, "m", _KupList_createFilterComponent).call(this))) : null, h$1("div", { key: 'a3c842b8e02b88fca13c4f30b37d255fb0a7d737', class: listScrollClass }, h$1("ul", { key: '2a4f63316fd97c46f0107f390f451042d086169b', class: componentClass, role: roleAttr, "aria-multiselectable": ariaMultiSelectable }, this.data
+        return (h$1(Host, { key: 'a4b6bf1943ab53189462f26f647447c38f71a729' }, h$1("style", { key: '4012e941151dbd5284bbec995d1a18fb8426e231' }, __classPrivateFieldGet$7(this, _KupList_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: '6e97c785b76618459094fd0b06e057c3b0e87725', id: "kup-component", class: wrapperClass, onKeyDown: __classPrivateFieldGet$7(this, _KupList_listenKeydown, "f") }, this.showFilter ? (h$1("div", { class: filterClass }, __classPrivateFieldGet$7(this, _KupList_instances, "m", _KupList_createFilterComponent).call(this))) : null, h$1("div", { key: 'f50081927ed8a73e0fd0754b41f685c1dee08f46', class: listScrollClass }, h$1("ul", { key: '4057faf4dfe7af3806163a7002eea6f8f8d1b925', class: componentClass, role: roleAttr, "aria-multiselectable": ariaMultiSelectable }, this.data
             .filter((item) => __classPrivateFieldGet$7(this, _KupList_instances, "m", _KupList_itemCompliant).call(this, item))
             .map((item) => __classPrivateFieldGet$7(this, _KupList_instances, "m", _KupList_renderListItem).call(this, item, index++)))))));
     }
@@ -20713,7 +20717,7 @@ const KupList = /*@__PURE__*/ proxyCustomElement(class KupList extends H {
 }, [1, "kup-list", {
         "customStyle": [1, "custom-style"],
         "data": [1040],
-        "displayMode": [1, "display-mode"],
+        "DescrMode": [1, "descr-mode"],
         "showFilter": [4, "show-filter"],
         "filter": [1025],
         "hideText": [4, "hide-text"],
@@ -20799,7 +20803,7 @@ _KupList_kupManager = new WeakMap(), _KupList_inputEl = new WeakMap(), _KupList_
         imageTag = __classPrivateFieldGet$7(this, _KupList_instances, "m", _KupList_getIconTag).call(this, item.icon, item.placeholderIcon);
     }
     let primaryTextTag = [
-        getIdOfItemByDisplayMode(item, item.id == '' ? ItemsDisplayMode.DESCRIPTION : this.displayMode, ' - '),
+        getIdOfItemByDisplayMode(item, item.id == '' ? ItemsDisplayMode.DESCRIPTION : this.DescrMode, ' - '),
     ];
     let secTextTag = [];
     if (this.twoLine && item.secondaryText && item.secondaryText != '') {
@@ -22998,7 +23002,7 @@ const KupDropdownButton = /*@__PURE__*/ proxyCustomElement(class KupDropdownButt
         this.customStyle = '';
         this.data = null;
         this.disabled = false;
-        this.displayMode = ItemsDisplayMode.DESCRIPTION;
+        this.DescrMode = ItemsDisplayMode.DESCRIPTION;
         this.dropdownOnly = false;
         this.icon = null;
         this.initialValue = '';
@@ -23198,7 +23202,7 @@ const KupDropdownButton = /*@__PURE__*/ proxyCustomElement(class KupDropdownButt
      * Checks the consistency of the list.
      */
     consistencyCheck(e, idIn) {
-        const ret = consistencyCheck(idIn, this.data['kup-list'], this.listEl, this.selectMode, this.displayMode, e);
+        const ret = consistencyCheck(idIn, this.data['kup-list'], this.listEl, this.selectMode, this.DescrMode, e);
         this.value = ret.value;
     }
     /*-------------------------------------------------*/
@@ -23256,7 +23260,7 @@ const KupDropdownButton = /*@__PURE__*/ proxyCustomElement(class KupDropdownButt
         return buttons;
     }
     render() {
-        return (h$1(Host, { key: '1708b482db59249332f006f708625e2627bb7637' }, h$1("style", { key: '64432e2f7c42b2be0e0102b7c9a5eb7c80104e00' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: 'b3ae4c58b473d2d864015f0e72e872de552f92df', id: componentWrapperId }, h$1("div", { key: '308558513e953a9d07bdd2957f9e4c79ab65d151', class: "dropdown-button--wrapper" }, this.renderButtons()), h$1("kup-list", Object.assign({ key: 'fd6deda80429efb229e18597c1c974d992647442' }, this.data['kup-list'], { displayMode: this.displayMode, isMenu: true, "onKup-list-click": (e) => this.onKupItemClick(e), id: this.rootElement.id + '_list', ref: (el) => (this.listEl = el) })))));
+        return (h$1(Host, { key: '9ada6e879fff0eae9fedc2585cc43d6af40a0135' }, h$1("style", { key: 'cfc19ea1554f29f96b1a1c80a840b9b04c559127' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '2d7460370d014b2f78bf92653b8534ded2147840', id: componentWrapperId }, h$1("div", { key: '2e4b1dfb52ee7945cad949b44a312a916c25b36e', class: "dropdown-button--wrapper" }, this.renderButtons()), h$1("kup-list", Object.assign({ key: 'eb5febfbf698a41ce2063079d96233f7706a6f72' }, this.data['kup-list'], { DescrMode: this.DescrMode, isMenu: true, "onKup-list-click": (e) => this.onKupItemClick(e), id: this.rootElement.id + '_list', ref: (el) => (this.listEl = el) })))));
     }
     disconnectedCallback() {
         if (this.listEl) {
@@ -23271,7 +23275,7 @@ const KupDropdownButton = /*@__PURE__*/ proxyCustomElement(class KupDropdownButt
         "customStyle": [1, "custom-style"],
         "data": [16],
         "disabled": [4],
-        "displayMode": [1, "display-mode"],
+        "DescrMode": [1, "descr-mode"],
         "dropdownOnly": [4, "dropdown-only"],
         "icon": [1],
         "initialValue": [1, "initial-value"],
@@ -29317,8 +29321,8 @@ const KupCombobox = /*@__PURE__*/ proxyCustomElement(class KupCombobox extends H
         this.customStyle = '';
         this.data = undefined;
         this.disabled = false;
-        this.displayMode = ItemsDisplayMode.DESCRIPTION;
-        this.listDisplayMode = ItemsDisplayMode.CODE_AND_DESC;
+        this.DescrMode = ItemsDisplayMode.DESCRIPTION;
+        this.ListDescrMode = ItemsDisplayMode.CODE_AND_DESC;
         this.error = '';
         this.icon = null;
         this.initialValue = '';
@@ -29600,12 +29604,12 @@ const KupCombobox = /*@__PURE__*/ proxyCustomElement(class KupCombobox extends H
             legacyLook: this.legacyLook,
             size: this.size
                 ? this.size
-                : getSizeOfInputElement(this.data, this.displayMode, this.size),
+                : getSizeOfInputElement(this.data, this.DescrMode, this.size),
             title: (_a = this.displayedValue) !== null && _a !== void 0 ? _a : '',
         };
         const fullHeight = this.rootElement.classList.contains('kup-full-height');
         const fullWidth = this.rootElement.classList.contains('kup-full-width');
-        return (h$1(Host, { key: 'a08c4d0ccddbd2ef50803db89ad4e5d616460b07', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet$2(this, _KupCombobox_elStyle, "f") }, h$1("style", { key: '5af5ec19c2ca8f1d90b3f371aedb0fd4f4f1055f' }, __classPrivateFieldGet$2(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: 'a779b4a6135cb7fb3fa462f28981ca084d6bdd3f', id: componentWrapperId, style: __classPrivateFieldGet$2(this, _KupCombobox_elStyle, "f") }, h$1(FTextField, Object.assign({ key: 'd46448958f7b6f489d3da9f4ea7c0c64c4d9a1bd' }, props, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, trailingIcon: true, icon: this.showDropDownIcon
+        return (h$1(Host, { key: '1ed7f42887dca3f807c6b40a0a139fc4a6515cff', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet$2(this, _KupCombobox_elStyle, "f") }, h$1("style", { key: '9161af38b49a700e0d66e925dd2ac90849c815d1' }, __classPrivateFieldGet$2(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: '3ee5c3c502a15233b4fe9fa7fb148ba63e837bc1', id: componentWrapperId, style: __classPrivateFieldGet$2(this, _KupCombobox_elStyle, "f") }, h$1(FTextField, Object.assign({ key: 'a0f1c8e5c105204fc11ee7632e77289f21244634' }, props, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, trailingIcon: true, icon: this.showDropDownIcon
                 ? KupThemeIconValues.DROPDOWN
                 : null, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupIconClick(), onChange: (e) => this.onKupChange(e.target.value), onFocus: () => this.onKupFocus(), onInput: () => this.onKupInput(), onIconClick: () => this.onKupIconClick(), onClearIconClick: () => this.onKupClearIconClick() }))), __classPrivateFieldGet$2(this, _KupCombobox_instances, "m", _KupCombobox_prepList).call(this)));
     }
@@ -29627,8 +29631,8 @@ const KupCombobox = /*@__PURE__*/ proxyCustomElement(class KupCombobox extends H
         "customStyle": [1, "custom-style"],
         "data": [16],
         "disabled": [4],
-        "displayMode": [1, "display-mode"],
-        "listDisplayMode": [1, "list-display-mode"],
+        "DescrMode": [1, "descr-mode"],
+        "ListDescrMode": [1, "list-descr-mode"],
         "error": [1],
         "icon": [1],
         "initialValue": [1, "initial-value"],
@@ -29699,10 +29703,10 @@ _KupCombobox_kupManager = new WeakMap(), _KupCombobox_elStyle = new WeakMap(), _
     return __classPrivateFieldGet$2(this, _KupCombobox_listEl, "f").menuVisible == true;
 }, _KupCombobox_consistencyCheck = function _KupCombobox_consistencyCheck(idIn, idInDecode, eventShouldSetValue) {
     if (idIn != null && idInDecode != null) {
-        this.displayedValue = getIdOfItemByDisplayMode({ id: idIn, value: idInDecode }, this.displayMode, ' - ');
+        this.displayedValue = getIdOfItemByDisplayMode({ id: idIn, value: idInDecode }, this.DescrMode, ' - ');
     }
     else {
-        const ret = consistencyCheck(idIn, this.data['kup-list'], __classPrivateFieldGet$2(this, _KupCombobox_listEl, "f"), this.selectMode, this.displayMode);
+        const ret = consistencyCheck(idIn, this.data['kup-list'], __classPrivateFieldGet$2(this, _KupCombobox_listEl, "f"), this.selectMode, this.DescrMode);
         if (ret.exists && eventShouldSetValue) {
             this.value = ret.value;
             this.displayedValue = ret.displayedValue;
@@ -29717,7 +29721,7 @@ _KupCombobox_kupManager = new WeakMap(), _KupCombobox_elStyle = new WeakMap(), _
     }
 }, _KupCombobox_prepList = function _KupCombobox_prepList() {
     var _a, _b;
-    return (h$1("kup-list", Object.assign({ displayMode: this.listDisplayMode }, this.data['kup-list'], { "is-menu": true, showFilter: ((_b = (_a = this.data['kup-list']) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length) >= 10 ? true : false, "onkup-list-click": (e) => this.onKupItemClick(e), ref: (el) => (__classPrivateFieldSet$1(this, _KupCombobox_listEl, el, "f")) })));
+    return (h$1("kup-list", Object.assign({ DescrMode: this.ListDescrMode }, this.data['kup-list'], { "is-menu": true, showFilter: ((_b = (_a = this.data['kup-list']) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length) >= 10 ? true : false, "onkup-list-click": (e) => this.onKupItemClick(e), ref: (el) => (__classPrivateFieldSet$1(this, _KupCombobox_listEl, el, "f")) })));
 };
 function defineCustomElement$9() {
     if (typeof customElements === "undefined") {
@@ -30328,7 +30332,7 @@ const KupChip = /*@__PURE__*/ proxyCustomElement(class KupChip extends H {
         this.customStyle = '';
         this.data = [];
         this.disabled = false;
-        this.displayMode = ItemsDisplayMode.DESCRIPTION;
+        this.DescrMode = ItemsDisplayMode.DESCRIPTION;
         this.enableInput = false;
         this.label = null;
         this.sizing = FChipSize.SMALL;
@@ -30457,7 +30461,7 @@ const KupChip = /*@__PURE__*/ proxyCustomElement(class KupChip extends H {
                 ? true
                 : false,
             data: this.data,
-            displayMode: this.displayMode,
+            DescrMode: this.DescrMode,
             info: this.rootElement.classList.contains('kup-info')
                 ? true
                 : false,
@@ -30496,7 +30500,7 @@ const KupChip = /*@__PURE__*/ proxyCustomElement(class KupChip extends H {
             props.onFocus.push((chip) => this.onKupFocus(chip));
             props.onIconClick.push((chip) => this.onKupIconClick(chip));
         }
-        return (h$1(Host, { key: '1e67357a3f83234b89a40725dd65fae889e4d9cd', "onKup-autocomplete-itemclick": (e) => {
+        return (h$1(Host, { key: 'ed3df8fecfa17c1ccee209f0126cad11b4adc80f', "onKup-autocomplete-itemclick": (e) => {
                 __classPrivateFieldGet$1(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
             }, "onKup-combobox-itemclick": (e) => {
                 __classPrivateFieldGet$1(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
@@ -30506,7 +30510,7 @@ const KupChip = /*@__PURE__*/ proxyCustomElement(class KupChip extends H {
                 __classPrivateFieldGet$1(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
             }, "onKup-textfield-submit": (e) => {
                 __classPrivateFieldGet$1(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
-            } }, h$1("style", { key: '1c4d02bd1ba581c8139e96590bf8e5a5fdfa5a28' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: 'd32b03aa57835bbe43dfe85c7a73cc19957af47d', id: componentWrapperId }, this.label ? (h$1("div", { class: "mdc-text-field__label-container" }, h$1("label", { class: "mdc-label" }, this.label))) : null, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 ? h$1(FChip, Object.assign({}, props)) : null, h$1("slot", { key: 'ac759dfe793b88e165b4c57bb61e310ecb38d5e3', name: "field" }))));
+            } }, h$1("style", { key: '7558d2820924fd715da96ac12a6819d82ea3dfbb' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '0e7851838135bda98cafc436eb7b701a52807902', id: componentWrapperId }, this.label ? (h$1("div", { class: "mdc-text-field__label-container" }, h$1("label", { class: "mdc-label" }, this.label))) : null, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 ? h$1(FChip, Object.assign({}, props)) : null, h$1("slot", { key: 'd2eed39441766df501ba43a1dcc8e63b0906b177', name: "field" }))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -30520,7 +30524,7 @@ const KupChip = /*@__PURE__*/ proxyCustomElement(class KupChip extends H {
         "customStyle": [1, "custom-style"],
         "data": [1040],
         "disabled": [4],
-        "displayMode": [1, "display-mode"],
+        "DescrMode": [1, "descr-mode"],
         "enableInput": [4, "enable-input"],
         "label": [1],
         "sizing": [1],
@@ -33481,8 +33485,8 @@ const KupAutocomplete = /*@__PURE__*/ proxyCustomElement(class KupAutocomplete e
         this.customStyle = '';
         this.data = undefined;
         this.disabled = false;
-        this.displayMode = ItemsDisplayMode.DESCRIPTION;
-        this.listDisplayMode = ItemsDisplayMode.CODE_AND_DESC;
+        this.DescrMode = ItemsDisplayMode.DESCRIPTION;
+        this.ListDescrMode = ItemsDisplayMode.CODE_AND_DESC;
         this.error = '';
         this.icon = null;
         this.initialValue = '';
@@ -33793,12 +33797,12 @@ const KupAutocomplete = /*@__PURE__*/ proxyCustomElement(class KupAutocomplete e
             legacyLook: this.legacyLook,
             size: this.size
                 ? this.size
-                : getSizeOfInputElement(this.data, this.displayMode, this.size),
+                : getSizeOfInputElement(this.data, this.DescrMode, this.size),
             title: (_a = this.displayedValue) !== null && _a !== void 0 ? _a : '',
         };
         const fullHeight = this.rootElement.classList.contains('kup-full-height');
         const fullWidth = this.rootElement.classList.contains('kup-full-width');
-        return (h$1(Host, { key: 'dcc8e382f19069cd48e43aa08f4e14b67062392e', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h$1("style", { key: 'd8bae528abd4782c8b0ea4748dbca49271fd7b62' }, __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: '9f5b65b698e1f921e099c8fcdb48c84850d74fb4', id: componentWrapperId, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h$1(FTextField, Object.assign({ key: 'f75283c2a94891bd01e05db4e3c3312d47e2e24f' }, props, { icon: this.showDropDownIcon
+        return (h$1(Host, { key: '54bb3dc2f7dce2b5aec0bb8d5a7f59d8cbdf6b2f', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h$1("style", { key: 'f441e0889173a7152678b0e09b4ab236d3262888' }, __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: '1893a3b4ad4de47c75e26ad254af00edd3db7c72', id: componentWrapperId, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h$1(FTextField, Object.assign({ key: '899f36ef4b5361cd6a525517632bf3d226ab0ce6' }, 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.onKupChangeSubmit(e.target.value, this.kupChange), onFocus: () => this.onKupFocus(), onInput: () => {
                 window.clearTimeout(__classPrivateFieldGet(this, _KupAutocomplete_inputTimeout, "f"));
@@ -33824,8 +33828,8 @@ const KupAutocomplete = /*@__PURE__*/ proxyCustomElement(class KupAutocomplete e
         "customStyle": [1, "custom-style"],
         "data": [1040],
         "disabled": [4],
-        "displayMode": [1, "display-mode"],
-        "listDisplayMode": [1, "list-display-mode"],
+        "DescrMode": [1, "descr-mode"],
+        "ListDescrMode": [1, "list-descr-mode"],
         "error": [1],
         "icon": [1],
         "initialValue": [1, "initial-value"],
@@ -33910,10 +33914,10 @@ _KupAutocomplete_elStyle = new WeakMap(), _KupAutocomplete_listEl = new WeakMap(
     return __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f").menuVisible == true;
 }, _KupAutocomplete_consistencyCheck = function _KupAutocomplete_consistencyCheck(idIn, idInDecode, eventShouldSetValue) {
     if (idIn && idInDecode) {
-        this.displayedValue = getIdOfItemByDisplayMode({ id: idIn, value: idInDecode }, this.displayMode, ' - ');
+        this.displayedValue = getIdOfItemByDisplayMode({ id: idIn, value: idInDecode }, this.DescrMode, ' - ');
     }
     else {
-        const ret = consistencyCheck(idIn, this.data['kup-list'], __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f"), this.selectMode, this.displayMode);
+        const ret = consistencyCheck(idIn, this.data['kup-list'], __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f"), this.selectMode, this.DescrMode);
         if ((ret.exists || this.allowInconsistentValues) &&
             eventShouldSetValue) {
             this.value = ret.value;
@@ -33928,7 +33932,7 @@ _KupAutocomplete_elStyle = new WeakMap(), _KupAutocomplete_listEl = new WeakMap(
         return ret;
     }
 }, _KupAutocomplete_prepList = function _KupAutocomplete_prepList() {
-    return (h$1("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")) })));
+    return (h$1("kup-list", Object.assign({ DescrMode: this.ListDescrMode }, this.data['kup-list'], { isMenu: true, "onkup-list-click": (e) => this.onKupItemClick(e), ref: (el) => (__classPrivateFieldSet(this, _KupAutocomplete_listEl, el, "f")) })));
 };
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/{p-336378d0.js → p-0a495572.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, d as Host, g as getAssetPath } from './p-ef8cbd35.js';
-import { k as kupManagerInstance, g as getProps, s as setProps, c as KupThemeColorValues, u as KupDebugCategory, L as getColumnByName, D as KupDataNewColumnTypes } from './p-0497ebe5.js';
-import { 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, E as defineCustomElement$u } from './p-442f7301.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, c as KupThemeColorValues, u as KupDebugCategory, L as getColumnByName, D as KupDataNewColumnTypes } from './p-dcb752e1.js';
+import { 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, E as defineCustomElement$u } from './p-05dc6405.js';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.

package/dist/components/{p-ca14c650.js → p-5438a4ff.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, a9 as identify, g as getProps, s as setProps, Y as SortMode, L as getColumnByName, e as KupLanguageGeneric, b as KupThemeIconValues, u as KupDebugCategory, a7 as KupPointerEventTypes, aj as KupDragEffect, aA as kupDraggableAttr, al as KupDropEventTypes, J as KupLanguageSearch } from './p-0497ebe5.js';
-import { I as filterRows, J as paginateRows, G as sortRows, L as pageChange, N as rowsPerPageChange, F as FImage, O as FCell, P as FChip, Q 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, E as defineCustomElement$u, R as FPaginator } from './p-442f7301.js';
+import { k as kupManagerInstance, a9 as identify, g as getProps, s as setProps, Y as SortMode, L as getColumnByName, e as KupLanguageGeneric, b as KupThemeIconValues, u as KupDebugCategory, a7 as KupPointerEventTypes, aj as KupDragEffect, aA as kupDraggableAttr, al as KupDropEventTypes, J as KupLanguageSearch } from './p-dcb752e1.js';
+import { I as filterRows, J as paginateRows, G as sortRows, L as pageChange, N as rowsPerPageChange, F as FImage, O as FCell, P as FChip, Q 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, E as defineCustomElement$u, R as FPaginator } from './p-05dc6405.js';
 
 /**
  * Props of the kup-box component.