@sme.up/ketchup 11.0.0-SNAPSHOT-20241217083229 → 11.0.0-SNAPSHOT-20241217103457

package/dist/collection/components/kup-input-panel/kup-input-panel.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var _KupInputPanel_instances, _KupInputPanel_kupManager, _KupInputPanel_formRef, _KupInputPanel_optionsAdapterMap, _KupInputPanel_originalData, _KupInputPanel_eventNames, _KupInputPanel_eventBlurNames, _KupInputPanel_listeners, _KupInputPanel_cellTypeComponents, _KupInputPanel_cellCustomRender, _KupInputPanel_sectionRenderMap, _KupInputPanel_keysShortcut, _KupInputPanel_getCell, _KupInputPanel_renderRow, _KupInputPanel_renderCell, _KupInputPanel_renderButton, _KupInputPanel_renderDropDownButton, _KupInputPanel_renderEditor, _KupInputPanel_renderDataTable, _KupInputPanel_renderLabel, _KupInputPanel_getLabelComponent, _KupInputPanel_renderGridLayout, _KupInputPanel_renderAbsoluteLayout, _KupInputPanel_renderSection, _KupInputPanel_renderAbsoluteSection, _KupInputPanel_extractContentIds, _KupInputPanel_renderSectionTab, _KupInputPanel_renderField, _KupInputPanel_renderAbsoluteField, _KupInputPanel_mapCommands, _KupInputPanel_mapCells, _KupInputPanel_setData, _KupInputPanel_deepObjectsMerge, _KupInputPanel_reverseMapCells, _KupInputPanel_mapData, _KupInputPanel_slotData, _KupInputPanel_CHIAdapter, _KupInputPanel_GRAAdapter, _KupInputPanel_BTNAdapter, _KupInputPanel_CMBandACPAdapter, _KupInputPanel_CHKAdapter, _KupInputPanel_CLPAdapter, _KupInputPanel_EDTAdapter, _KupInputPanel_ITXAdapter, _KupInputPanel_RADAdapter, _KupInputPanel_SWTAdapter, _KupInputPanel_DateAdapter, _KupInputPanel_ObjectAdapter, _KupInputPanel_TimeAdapter, _KupInputPanel_NumberAdapter, _KupInputPanel_DataTableAdapter, _KupInputPanel_getTableUpdatedCell, _KupInputPanel_optionsTreeComboAdapter, _KupInputPanel_treeOptionsNodeAdapter, _KupInputPanel_dataTreeOptionsChildrenAdapter, _KupInputPanel_tableOptionsAdapter, _KupInputPanel_commandAdapter, _KupInputPanel_getAutocompleteEventCallback, _KupInputPanel_checkOnBlurProp, _KupInputPanel_checkOnBlurEvent, _KupInputPanel_setCellError, _KupInputPanel_areValuesUpdated, _KupInputPanel_getFunctionOnClickBTN, _KupInputPanel_getEventDetails, _KupInputPanel_contextMenuHandler, _KupInputPanel_didLoadInteractables, _KupInputPanel_setFocusOnInputElement, _KupInputPanel_findFirstInput, _KupInputPanel_setAutoSkip;
+var _KupInputPanel_instances, _KupInputPanel_kupManager, _KupInputPanel_formRef, _KupInputPanel_optionsAdapterMap, _KupInputPanel_originalData, _KupInputPanel_eventNames, _KupInputPanel_listeners, _KupInputPanel_cellTypeComponents, _KupInputPanel_cellCustomRender, _KupInputPanel_sectionRenderMap, _KupInputPanel_keysShortcut, _KupInputPanel_getCell, _KupInputPanel_renderRow, _KupInputPanel_renderCell, _KupInputPanel_renderButton, _KupInputPanel_renderDropDownButton, _KupInputPanel_renderEditor, _KupInputPanel_renderDataTable, _KupInputPanel_renderLabel, _KupInputPanel_getLabelComponent, _KupInputPanel_renderGridLayout, _KupInputPanel_renderAbsoluteLayout, _KupInputPanel_renderSection, _KupInputPanel_renderAbsoluteSection, _KupInputPanel_extractContentIds, _KupInputPanel_renderSectionTab, _KupInputPanel_renderField, _KupInputPanel_renderAbsoluteField, _KupInputPanel_mapCommands, _KupInputPanel_mapCells, _KupInputPanel_setData, _KupInputPanel_deepObjectsMerge, _KupInputPanel_reverseMapCells, _KupInputPanel_mapData, _KupInputPanel_slotData, _KupInputPanel_CHIAdapter, _KupInputPanel_GRAAdapter, _KupInputPanel_BTNAdapter, _KupInputPanel_CMBandACPAdapter, _KupInputPanel_getOptionHandler, _KupInputPanel_CHKAdapter, _KupInputPanel_CLPAdapter, _KupInputPanel_EDTAdapter, _KupInputPanel_ITXAdapter, _KupInputPanel_RADAdapter, _KupInputPanel_SWTAdapter, _KupInputPanel_DateAdapter, _KupInputPanel_ObjectAdapter, _KupInputPanel_TimeAdapter, _KupInputPanel_NumberAdapter, _KupInputPanel_DataTableAdapter, _KupInputPanel_getTableUpdatedCell, _KupInputPanel_optionsTreeComboAdapter, _KupInputPanel_treeOptionsNodeAdapter, _KupInputPanel_dataTreeOptionsChildrenAdapter, _KupInputPanel_tableOptionsAdapter, _KupInputPanel_commandAdapter, _KupInputPanel_getAutocompleteEventCallback, _KupInputPanel_onBlurHandler, _KupInputPanel_setCellError, _KupInputPanel_areValuesUpdated, _KupInputPanel_getFunctionOnClickBTN, _KupInputPanel_getEventDetails, _KupInputPanel_contextMenuHandler, _KupInputPanel_didLoadInteractables, _KupInputPanel_setFocusOnInputElement, _KupInputPanel_findFirstInput, _KupInputPanel_setAutoSkip;
 import { Host, forceUpdate, h, } from "@stencil/core";
 import { FButton } from "../../f-components/f-button/f-button";
 import { FCell } from "../../f-components/f-cell/f-cell";
@@ -73,15 +73,6 @@ export class KupInputPanel {
             [FCellTypes.COMBOBOX, ['kup-combobox-iconclick', 'kup-combobox-blur']],
             [FCellTypes.MULTI_COMBOBOX, ['kup-combobox-iconclick']],
         ]));
-        _KupInputPanel_eventBlurNames.set(this, new Map([
-            [FCellShapes.AUTOCOMPLETE, 'kup-autocomplete-blur'],
-            [FCellShapes.CHIP, 'kup-textfield-blur'],
-            [FCellShapes.COMBOBOX, 'kup-combobox-blur'],
-            [FCellShapes.DATE, 'kup-datepicker-blur'],
-            [FCellShapes.MULTI_AUTOCOMPLETE, 'kup-autocomplete-blur'],
-            [FCellShapes.MULTI_COMBOBOX, 'kup-combobox-blur'],
-            [FCellShapes.TIME, 'kup-timepicker-blur'],
-        ]));
         _KupInputPanel_listeners.set(this, []);
         _KupInputPanel_cellTypeComponents.set(this, new Map([
             [FCellTypes.DATE, 'kup-date-picker'],
@@ -199,7 +190,9 @@ export class KupInputPanel {
                 h("p", null, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.translate(KupLanguageGeneric.EMPTY_DATA)),
             ]
             : this.inputPanelCells.map((inputPanelCell) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderRow).call(this, inputPanelCell));
-        return (h(Host, { key: '6e21e639b2d2f9e1f5338319cc965c4d588c5fbe' }, h("style", { key: '435b0e0cbebad1f25b642ffc327168afe3855250' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '4cf09729bf357a5f91363c23e24dad8f414973cd', id: componentWrapperId }, inputPanelContent)));
+        return (h(Host, { key: '1316f47cce917e05cfb94bd3e68c8f1ad14a85de', "onKup-cell-blur": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_onBlurHandler).bind(this), "onKup-tabbar-click": (e) => {
+                this.tabSelected = e.detail.node.id;
+            }, "onKup-autocomplete-input": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getOptionHandler).bind(this), "onKup-autocomplete-iconclick": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getOptionHandler).bind(this), "onKup-combobox-iconclick": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getOptionHandler).bind(this) }, h("style", { key: 'f8d4834ceed60a77270667e9229090faf36c06fe' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'ca1a00d028a0a8ef030d41c2452fbb229a041c32', id: componentWrapperId }, inputPanelContent)));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.unregister(this);
@@ -675,7 +668,7 @@ export class KupInputPanel {
             }];
     }
 }
-_KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(), _KupInputPanel_optionsAdapterMap = new WeakMap(), _KupInputPanel_originalData = new WeakMap(), _KupInputPanel_eventNames = new WeakMap(), _KupInputPanel_eventBlurNames = new WeakMap(), _KupInputPanel_listeners = new WeakMap(), _KupInputPanel_cellTypeComponents = new WeakMap(), _KupInputPanel_cellCustomRender = new WeakMap(), _KupInputPanel_sectionRenderMap = new WeakMap(), _KupInputPanel_keysShortcut = new WeakMap(), _KupInputPanel_instances = new WeakSet(), _KupInputPanel_getCell = function _KupInputPanel_getCell(id) {
+_KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(), _KupInputPanel_optionsAdapterMap = new WeakMap(), _KupInputPanel_originalData = new WeakMap(), _KupInputPanel_eventNames = new WeakMap(), _KupInputPanel_listeners = new WeakMap(), _KupInputPanel_cellTypeComponents = new WeakMap(), _KupInputPanel_cellCustomRender = new WeakMap(), _KupInputPanel_sectionRenderMap = new WeakMap(), _KupInputPanel_keysShortcut = new WeakMap(), _KupInputPanel_instances = new WeakSet(), _KupInputPanel_getCell = function _KupInputPanel_getCell(id) {
     return this.inputPanelCells.reduce((cell, { cells }) => {
         if (!cell) {
             return cells.find(({ column }) => column.name === id).cell;
@@ -934,17 +927,6 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         });
     });
     const tabCustomStyle = '.tab-bar .tab-scroller .tab .tab__content { justify-content: flex-start; }';
-    if (!__classPrivateFieldGet(this, _KupInputPanel_listeners, "f").map((l) => l.event).includes('kup-tabbar-click')) {
-        const event = 'kup-tabbar-click';
-        const handler = (e) => {
-            this.tabSelected = e.detail.node.id;
-        };
-        this.rootElement.addEventListener(event, handler);
-        __classPrivateFieldGet(this, _KupInputPanel_listeners, "f").push({
-            event,
-            handler,
-        });
-    }
     return (h("div", { class: { 'input-panel__tabs_container': true } }, h("kup-tab-bar", { data: tabNodes, customStyle: tabCustomStyle }), sectionContent));
 }, _KupInputPanel_renderField = function _KupInputPanel_renderField(cells, field) {
     const fieldCell = cells.cells.find((cell) => cell.column.name === field.id);
@@ -1163,16 +1145,10 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
     }
     if (cellType === FCellTypes.MULTI_AUTOCOMPLETE ||
         cellType === FCellTypes.MULTI_COMBOBOX) {
-        return Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_CMBandACPAdapter).call(this, cell.options, col.title, null, cell, col.name)), { showDropDownIcon: true, class: '', style: { width: '100%' }, disabled: !cell.editable, id: col.name });
+        return Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_CMBandACPAdapter).call(this, cell.options, col.title, null)), { showDropDownIcon: true, class: '', style: { width: '100%' }, disabled: !cell.editable, id: col.name });
     }
     return null;
-}, _KupInputPanel_CHIAdapter = function _KupInputPanel_CHIAdapter(_options, _fieldLabel, currentValue, cell, id) {
-    var _a, _b;
-    if (((_a = cell.inputSettings) === null || _a === void 0 ? void 0 : _a.checkObject) ||
-        ((_b = cell.inputSettings) === null || _b === void 0 ? void 0 : _b.checkValueOnExit) ||
-        cell.mandatory) {
-        __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_checkOnBlurEvent).call(this, cell, id);
-    }
+}, _KupInputPanel_CHIAdapter = function _KupInputPanel_CHIAdapter(_options, _fieldLabel, currentValue) {
     return CHIAdapter(currentValue);
 }, _KupInputPanel_GRAAdapter = function _KupInputPanel_GRAAdapter() {
     //TODO: definire mapping
@@ -1198,47 +1174,20 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").keysBinding.register((_d = cell.data) === null || _d === void 0 ? void 0 : _d.keyShortcut, cell.data.onClick.bind(this));
     }
     return Object.assign({ label: cell.value, fun: cell.fun }, cell.data);
-}, _KupInputPanel_CMBandACPAdapter = function _KupInputPanel_CMBandACPAdapter(rawOptions, fieldLabel, currentValue, cell, id) {
-    var _a, _b;
+}, _KupInputPanel_CMBandACPAdapter = function _KupInputPanel_CMBandACPAdapter(rawOptions, fieldLabel, currentValue) {
     const configCMandACP = CMBandACPAdapter(currentValue, fieldLabel, []);
-    if (cell.fun) {
-        const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);
-        const evNames = __classPrivateFieldGet(this, _KupInputPanel_eventNames, "f").get(cellType);
-        if (!evNames) {
-            return;
-        }
-        evNames.map((evName) => {
-            const handler = (e) => {
-                __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getAutocompleteEventCallback).call(this, e.detail, cell.fun, configCMandACP, id, currentValue);
-            };
-            this.rootElement.addEventListener(evName, handler);
-            __classPrivateFieldGet(this, _KupInputPanel_listeners, "f").push({
-                event: evName,
-                handler,
-            });
-        });
-    }
-    else if (rawOptions) {
+    if (rawOptions) {
         configCMandACP.data['kup-list'].data =
             __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_optionsTreeComboAdapter).call(this, rawOptions, currentValue);
     }
-    if (((_a = cell.inputSettings) === null || _a === void 0 ? void 0 : _a.checkObject) ||
-        ((_b = cell.inputSettings) === null || _b === void 0 ? void 0 : _b.checkValueOnExit) ||
-        cell.mandatory) {
-        __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_checkOnBlurEvent).call(this, cell, id);
-    }
     return configCMandACP;
-}, _KupInputPanel_CHKAdapter = function _KupInputPanel_CHKAdapter(_options, fieldLabel, currentValue, cell, id) {
-    var _a, _b;
-    let data = CHKAdapter(currentValue, fieldLabel);
-    if (((_a = cell.inputSettings) === null || _a === void 0 ? void 0 : _a.checkObject) ||
-        ((_b = cell.inputSettings) === null || _b === void 0 ? void 0 : _b.checkValueOnExit) ||
-        cell.mandatory) {
-        return Object.assign(Object.assign({}, data), { onBlur: () => {
-                __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_checkOnBlurProp).call(this, cell, id);
-            } });
+}, _KupInputPanel_getOptionHandler = function _KupInputPanel_getOptionHandler({ detail }) {
+    const cell = __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getCell).call(this, detail.id);
+    if (cell.fun) {
+        __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getAutocompleteEventCallback).call(this, detail, cell);
     }
-    return data;
+}, _KupInputPanel_CHKAdapter = function _KupInputPanel_CHKAdapter(_options, fieldLabel, currentValue) {
+    return CHKAdapter(currentValue, fieldLabel);
 }, _KupInputPanel_CLPAdapter = function _KupInputPanel_CLPAdapter(_options, fieldLabel, _currentValue) {
     return {
         data: {
@@ -1252,7 +1201,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         initialValue: currentValue,
     };
 }, _KupInputPanel_ITXAdapter = function _KupInputPanel_ITXAdapter(_options, fieldLabel, _currentValue, cell, id) {
-    var _a, _b, _c;
+    var _a;
     const data = Object.assign({ label: fieldLabel }, cell.data);
     if (this.autoSkip &&
         (cell.isEditable || cell.editable) &&
@@ -1261,34 +1210,12 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
             __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_setAutoSkip).call(this, id, event);
         };
     }
-    if (((_b = cell.inputSettings) === null || _b === void 0 ? void 0 : _b.checkObject) ||
-        ((_c = cell.inputSettings) === null || _c === void 0 ? void 0 : _c.checkValueOnExit) ||
-        cell.mandatory) {
-        data.onBlur = () => {
-            __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_checkOnBlurProp).call(this, cell, id);
-        };
-    }
-    return data;
-}, _KupInputPanel_RADAdapter = function _KupInputPanel_RADAdapter(options, _fieldLabel, currentValue, cell, id) {
-    var _a, _b;
-    let data = RADAdapter(currentValue, options);
-    if (((_a = cell.inputSettings) === null || _a === void 0 ? void 0 : _a.checkObject) ||
-        ((_b = cell.inputSettings) === null || _b === void 0 ? void 0 : _b.checkValueOnExit) ||
-        cell.mandatory) {
-        return Object.assign(Object.assign({}, data), { onBlur: () => {
-                __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_checkOnBlurProp).call(this, cell, id);
-            } });
-    }
     return data;
+}, _KupInputPanel_RADAdapter = function _KupInputPanel_RADAdapter(options, _fieldLabel, currentValue) {
+    return RADAdapter(currentValue, options);
 }, _KupInputPanel_SWTAdapter = function _KupInputPanel_SWTAdapter(_options, fieldLabel, currentValue) {
     return SWTAdapter(currentValue, fieldLabel);
-}, _KupInputPanel_DateAdapter = function _KupInputPanel_DateAdapter(_options, fieldLabel, currentValue, cell, id) {
-    var _a, _b;
-    if (((_a = cell.inputSettings) === null || _a === void 0 ? void 0 : _a.checkObject) ||
-        ((_b = cell.inputSettings) === null || _b === void 0 ? void 0 : _b.checkValueOnExit) ||
-        cell.mandatory) {
-        __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_checkOnBlurEvent).call(this, cell, id);
-    }
+}, _KupInputPanel_DateAdapter = function _KupInputPanel_DateAdapter(_options, fieldLabel, currentValue) {
     return {
         data: {
             'kup-text-field': {
@@ -1297,32 +1224,13 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         },
         initialValue: currentValue !== null && currentValue !== void 0 ? currentValue : '',
     };
-}, _KupInputPanel_ObjectAdapter = function _KupInputPanel_ObjectAdapter(_options, fieldLabel, currentValue, cell, id) {
-    var _a, _b;
-    if (((_a = cell.inputSettings) === null || _a === void 0 ? void 0 : _a.checkObject) ||
-        ((_b = cell.inputSettings) === null || _b === void 0 ? void 0 : _b.checkValueOnExit) ||
-        cell.mandatory) {
-        return {
-            initialValue: currentValue || '',
-            label: fieldLabel || ' ',
-            value: currentValue || '',
-            onBlur: () => {
-                __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_checkOnBlurProp).call(this, cell, id);
-            },
-        };
-    }
+}, _KupInputPanel_ObjectAdapter = function _KupInputPanel_ObjectAdapter(_options, fieldLabel, currentValue) {
     return {
         initialValue: currentValue || '',
         label: fieldLabel || ' ',
         value: currentValue || '',
     };
-}, _KupInputPanel_TimeAdapter = function _KupInputPanel_TimeAdapter(_options, fieldLabel, currentValue, cell, id) {
-    var _a, _b;
-    if (((_a = cell.inputSettings) === null || _a === void 0 ? void 0 : _a.checkObject) ||
-        ((_b = cell.inputSettings) === null || _b === void 0 ? void 0 : _b.checkValueOnExit) ||
-        cell.mandatory) {
-        __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_checkOnBlurEvent).call(this, cell, id);
-    }
+}, _KupInputPanel_TimeAdapter = function _KupInputPanel_TimeAdapter(_options, fieldLabel, currentValue) {
     return {
         data: {
             'kup-text-field': {
@@ -1331,18 +1239,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         },
         initialValue: currentValue,
     };
-}, _KupInputPanel_NumberAdapter = function _KupInputPanel_NumberAdapter(_options, fieldLabel, _currentValue, cell, id) {
-    var _a, _b;
-    if (((_a = cell.inputSettings) === null || _a === void 0 ? void 0 : _a.checkObject) ||
-        ((_b = cell.inputSettings) === null || _b === void 0 ? void 0 : _b.checkValueOnExit) ||
-        cell.mandatory) {
-        return {
-            label: fieldLabel,
-            onBlur: () => {
-                __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_checkOnBlurProp).call(this, cell, id);
-            },
-        };
-    }
+}, _KupInputPanel_NumberAdapter = function _KupInputPanel_NumberAdapter(_options, fieldLabel, _currentValue) {
     return { label: fieldLabel };
 }, _KupInputPanel_DataTableAdapter = function _KupInputPanel_DataTableAdapter(_rawOptions, _fieldLabel, _value, cell, id) {
     try {
@@ -1448,44 +1345,42 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
     }
     const buttonCell = Object.assign(Object.assign({}, cell), { data: __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_BTNAdapter).call(this, null, null, cell.value, cell, cell.obj.k), id: cell.obj.k });
     return buttonCell;
-}, _KupInputPanel_getAutocompleteEventCallback = function _KupInputPanel_getAutocompleteEventCallback(detail, fun, data, id, currentValue) {
-    if (detail.id !== id ||
-        detail.open === false) {
-        return;
-    }
-    this.optionsHandler(fun, detail.inputValue, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_reverseMapCells).call(this), detail.id).then((options) => {
+}, _KupInputPanel_getAutocompleteEventCallback = function _KupInputPanel_getAutocompleteEventCallback(detail, cell) {
+    this.optionsHandler(cell.fun, detail.inputValue, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_reverseMapCells).call(this), detail.id).then((options) => {
         var _a;
-        data.data['kup-list'].data =
-            (_a = __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_optionsTreeComboAdapter).call(this, options, currentValue)) !== null && _a !== void 0 ? _a : [];
+        cell.data.data['kup-list'].data =
+            (_a = __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_optionsTreeComboAdapter).call(this, options, cell.value)) !== null && _a !== void 0 ? _a : [];
         detail.comp.refresh();
     });
-}, _KupInputPanel_checkOnBlurProp = async function _KupInputPanel_checkOnBlurProp(cell, id) {
+}, _KupInputPanel_onBlurHandler = async function _KupInputPanel_onBlurHandler(e) {
     var _a, _b, _c, _d, _e;
-    const currCell = __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getCell).call(this, id);
+    const { detail: { column, cell }, } = e;
+    const currCell = __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getCell).call(this, column.name);
+    const originalCell = __classPrivateFieldGet(this, _KupInputPanel_originalData, "f").rows[0].cells[column.name];
     // Required cell check
     if (cell.mandatory) {
-        __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_setCellError).call(this, id, currCell.value
-            ? ((_a = cell.data) === null || _a === void 0 ? void 0 : _a.error) || null
+        __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_setCellError).call(this, column.name, currCell.value
+            ? ((_a = originalCell.data) === null || _a === void 0 ? void 0 : _a.error) || null
             : __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.translate(KupLanguageGeneric.REQUIRED_VALUE));
-        if (!currCell.value) {
+        if (!cell.value) {
             return;
         }
     }
     else {
-        __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_setCellError).call(this, id, ((_b = cell.data) === null || _b === void 0 ? void 0 : _b.error) || null);
+        __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_setCellError).call(this, column.name, ((_b = originalCell.data) === null || _b === void 0 ? void 0 : _b.error) || null);
     }
     // Valid object check
-    if (((_c = cell.inputSettings) === null || _c === void 0 ? void 0 : _c.checkObject) && currCell.value) {
+    if ((_c = cell.inputSettings) === null || _c === void 0 ? void 0 : _c.checkObject) {
         const { valid } = await this.checkValidObjCallback({
             obj: cell.obj,
             currentState: __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_reverseMapCells).call(this),
             fun: cell.fun,
         });
         if (valid) {
-            __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_setCellError).call(this, id, ((_d = cell.data) === null || _d === void 0 ? void 0 : _d.error) || null);
+            __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_setCellError).call(this, column.name, ((_d = originalCell.data) === null || _d === void 0 ? void 0 : _d.error) || null);
         }
         else {
-            __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_setCellError).call(this, id, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.translate(KupLanguageGeneric.INVALID_VALUE));
+            __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_setCellError).call(this, column.name, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.translate(KupLanguageGeneric.INVALID_VALUE));
             return;
         }
     }
@@ -1493,58 +1388,8 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         this.checkValidValueCallback({
             before: Object.assign({}, __classPrivateFieldGet(this, _KupInputPanel_originalData, "f")),
             after: __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_reverseMapCells).call(this),
-        }, id);
+        }, column.name);
     }
-}, _KupInputPanel_checkOnBlurEvent = function _KupInputPanel_checkOnBlurEvent(cell, id) {
-    const evName = __classPrivateFieldGet(this, _KupInputPanel_eventBlurNames, "f").get(cell.shape);
-    if (!evName) {
-        return;
-    }
-    const handler = async (e) => {
-        var _a, _b, _c, _d, _e;
-        const currCell = __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getCell).call(this, id);
-        if (e.detail.id !== id) {
-            return;
-        }
-        // Required cell check
-        if (cell.mandatory) {
-            __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_setCellError).call(this, id, currCell.value
-                ? ((_a = cell.data) === null || _a === void 0 ? void 0 : _a.error) || null
-                : __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.translate(KupLanguageGeneric.REQUIRED_VALUE));
-            if (!e.detail.value) {
-                return;
-            }
-        }
-        else {
-            __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_setCellError).call(this, id, ((_b = cell.data) === null || _b === void 0 ? void 0 : _b.error) || null);
-        }
-        // Valid object check
-        if (((_c = cell.inputSettings) === null || _c === void 0 ? void 0 : _c.checkObject) && e.detail.value) {
-            const { valid } = await this.checkValidObjCallback({
-                obj: cell.obj,
-                currentState: __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_reverseMapCells).call(this),
-                fun: cell.fun,
-            });
-            __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_setCellError).call(this, id, valid
-                ? ((_d = cell.data) === null || _d === void 0 ? void 0 : _d.error) || null
-                : __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.translate(KupLanguageGeneric.INVALID_VALUE));
-            if (!valid) {
-                return;
-            }
-        }
-        if (((_e = cell.inputSettings) === null || _e === void 0 ? void 0 : _e.checkValueOnExit) &&
-            __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_areValuesUpdated).call(this)) {
-            this.checkValidValueCallback({
-                before: Object.assign({}, __classPrivateFieldGet(this, _KupInputPanel_originalData, "f")),
-                after: __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_reverseMapCells).call(this),
-            }, id);
-        }
-    };
-    this.rootElement.addEventListener(evName, handler);
-    __classPrivateFieldGet(this, _KupInputPanel_listeners, "f").push({
-        event: evName,
-        handler,
-    });
 }, _KupInputPanel_setCellError = function _KupInputPanel_setCellError(id, error) {
     this.inputPanelCells = this.inputPanelCells.map((cell) => (Object.assign(Object.assign({}, cell), { cells: cell.cells.map(({ cell, column }) => {
             const data = column.name === id

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

@@ -108,39 +108,39 @@ export class KupLazy {
         switch (this.componentName) {
             case 'kup-button':
                 //call_to_action.svg
-                resource = (h("svg", { key: '220fa65d9836c520dfed8e3dae2700c6b2b0cb9a', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '1d1e33f3ed89c32e6ee9ad2b1996fb65037cc3f2', d: "M42 6H6c-2.2 0-4 1.8-4 4v28c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4V10c0-2.2-1.8-4-4-4zm0 32H6v-6h36v6z" })));
+                resource = (h("svg", { key: '665704637b3354494ef01a225fd4d37a0188c34f', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '6a0391862537ed0250af6780a7c0fef06130b831', d: "M42 6H6c-2.2 0-4 1.8-4 4v28c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4V10c0-2.2-1.8-4-4-4zm0 32H6v-6h36v6z" })));
                 break;
             case 'kup-card':
                 //art_track.svg
-                resource = (h("svg", { key: 'd799cc013987de74e23c34201ecd2186c57b13f1', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'de98ef94a3f714e45e56a02877d4a139a8804424', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
+                resource = (h("svg", { key: 'a91f941eaf227d71122f52ef990999697e5140d2', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '9b757b8dae5fbb1d30ba262087274d6ed177b713', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
                 break;
             case 'kup-checkbox':
                 //check_box_outline_blank.svg
-                resource = (h("svg", { key: '26ad78503d5c00f5b902b2bddb782a14f1a13b73', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '03ae544d551c47e0dce8f8fbaa92b1a2a1024c55', d: "M38 10v28H10V10h28m0-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4z" })));
+                resource = (h("svg", { key: 'dd4f4172b01ef1784c3a4947940e11f6cacbe746', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '4a65af5a391cfaf3d1e82c229db9a361b493cf49', d: "M38 10v28H10V10h28m0-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4z" })));
                 break;
             case 'kup-chart':
                 //chart-bar.svg
-                resource = (h("svg", { key: 'cc70b61653552ff28e1b6eda65ca7bec5bbbe7d2', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: 'f63b011d43b7c6649e1392de9426b325259e9f38', d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
+                resource = (h("svg", { key: '593f6aa43a513b12ea0b49f7feb6680e2931c36c', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '0a24ba272bc6830f9bf356585d4a16d769b37b52', d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
                 break;
             case 'kup-data-table':
                 //table-large.svg
-                resource = (h("svg", { key: '3c6218a9e78c22aa2cfdd787a77fd7575409b926', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '28aaf9eb0e27fd2ad901866bd1f93ff181eba283', d: "M4,3H20A2,2 0 0,1 22,5V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V5A2,2 0 0,1 4,3M4,7V10H8V7H4M10,7V10H14V7H10M20,10V7H16V10H20M4,12V15H8V12H4M4,20H8V17H4V20M10,12V15H14V12H10M10,20H14V17H10V20M20,20V17H16V20H20M20,12H16V15H20V12Z" })));
+                resource = (h("svg", { key: 'fccd6198bf2c7d9b67fd9df526483f8f9dafee21', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '976cebc69cdc6153f4f91e935e48c18d5d345544', d: "M4,3H20A2,2 0 0,1 22,5V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V5A2,2 0 0,1 4,3M4,7V10H8V7H4M10,7V10H14V7H10M20,10V7H16V10H20M4,12V15H8V12H4M4,20H8V17H4V20M10,12V15H14V12H10M10,20H14V17H10V20M20,20V17H16V20H20M20,12H16V15H20V12Z" })));
                 break;
             case 'kup-image':
                 //photo.svg
-                resource = (h("svg", { key: '695002a63b98d0c090f350df167e2dec9b85c8f6', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '160f2450a206b3da182ef9514e41d0e9cfebd7dd', d: "M42 38V10c0-2.21-1.79-4-4-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4zM17 27l5 6.01L29 24l9 12H10l7-9z" })));
+                resource = (h("svg", { key: '17b1e569dabdfb945ea6880e770ae52566c14964', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '8208a3be977f5294e724adc8e0c168f3e0447940', d: "M42 38V10c0-2.21-1.79-4-4-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4zM17 27l5 6.01L29 24l9 12H10l7-9z" })));
                 break;
             case 'kup-progress-bar':
                 //linear_scale.svg
-                resource = (h("svg", { key: 'e7f09d307522f61e8448975f881fb435f0c585bd', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '2ad28af4bed1da877edb16db6acdc392bfbfb47b', d: "M39 19c-2.05 0-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3s-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3-2.77 0-5 2.23-5 5s2.23 5 5 5c2.05 0 3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3s3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3 2.77 0 5-2.23 5-5s-2.23-5-5-5z" })));
+                resource = (h("svg", { key: 'd75588e7fdd9dd67ca01598159316c0a480ff7b2', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'b6cb40a0509a7da7a0d764cb11b8170a4b083932', d: "M39 19c-2.05 0-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3s-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3-2.77 0-5 2.23-5 5s2.23 5 5 5c2.05 0 3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3s3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3 2.77 0 5-2.23 5-5s-2.23-5-5-5z" })));
                 break;
             case 'kup-radio':
                 //radio_button_unchecked.svg
-                resource = (h("svg", { key: 'c60a5e10b12c2945bdc8d0558d1fb9c46cb4ca90', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'f016960b177263ba06c3b63c4761fef4a06a4fd3', d: "M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" })));
+                resource = (h("svg", { key: '1b18bc766908f4da555824535f7dbdc93779bb60', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '0feac444636e26df8fded6a7e566252087e60e86', d: "M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" })));
                 break;
             default:
                 //art_track.svg
-                resource = (h("svg", { key: 'f221046bcd689deebeb597f557d547292518a34a', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '8cd9ec1705efd526543348dcfe793c0705399482', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
+                resource = (h("svg", { key: '455a2d22a5d9d50f071e8facd31b50b7bd3f5d92', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'fefd08ea2bbd6eaa7e4ee0fefe2b25afa81165cf', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
                 break;
         }
         if ((this.renderMode === KupLazyRender.VIEWPORT && this.isInViewport) ||
@@ -149,14 +149,14 @@ export class KupLazy {
                 this.data &&
                 this.isInViewport)) {
             let Tag = this.componentName;
-            content = (h(Tag, Object.assign({ key: 'b856e5475a8fc048cf96c0ee534f17fa2ad261fe' }, this.data, { ref: (el) => (this.lazyComponent = el) })));
+            content = (h(Tag, Object.assign({ key: 'd1d563697c56db2c3fdcf3252aae2a2966b06858' }, this.data, { ref: (el) => (this.lazyComponent = el) })));
             className += ' kup-loaded';
         }
         else if (this.showPlaceholder) {
             content = resource;
             className += ' kup-to-be-loaded';
         }
-        return (h(Host, { key: 'de01035df24b5d3811ca54bb3840bf232287103d', class: className }, h("style", { key: 'db6f4fe85ed90c8a17b598a4805eff35fbfc11af' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '00c41dbaa1579061edf0b9472b19e6c5c8f24eb9', id: componentWrapperId }, content)));
+        return (h(Host, { key: '4a055d835d8e6d3fb06bd4870fe5b13c2e4e922e', class: className }, h("style", { key: '5a8b37cd487d2db656dc8614469ba37c11809343' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '21ace7612895c14f8d63303fc171f04a66016427', id: componentWrapperId }, content)));
     }
     disconnectedCallback() {
         var _a;

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

@@ -198,6 +198,11 @@
   outline: none;
 }
 
+.scroll-list {
+  overflow-y: auto;
+  max-height: var(--kup_list_max_height_as_menu);
+}
+
 .list {
   background: var(--kup_list_background_color);
   color: var(--kup_list_text_color);
@@ -336,7 +341,6 @@
   color: var(--kup-text-color);
   display: none;
   max-height: var(--kup_list_max_height_as_menu);
-  overflow: auto;
   position: relative;
   transform: none;
   transform-origin: unset;

package/dist/collection/components/kup-list/kup-list.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 _KupList_instances, _KupList_kupManager, _KupList_radios, _KupList_listItems, _KupList_handleSelection, _KupList_isNested, _KupList_renderListItem, _KupList_getIconTag, _KupList_isMultiSelection, _KupList_isCheckBoxRule, _KupList_isRadioButtonRule, _KupList_isListBoxRule, _KupList_checkRoleType, _KupList_itemCompliant;
+var _KupList_instances, _KupList_kupManager, _KupList_globalFilterTimeout, _KupList_radios, _KupList_listItems, _KupList_handleSelection, _KupList_isNested, _KupList_renderListItem, _KupList_getIconTag, _KupList_isMultiSelection, _KupList_isCheckBoxRule, _KupList_isRadioButtonRule, _KupList_isListBoxRule, _KupList_checkRoleType, _KupList_itemCompliant, _KupList_createFilterComponent;
 import { forceUpdate, h, Host, } from "@stencil/core";
 import { KupListProps, KupListRole, } from "./kup-list-declarations";
 import { ItemsDisplayMode } from "./kup-list-declarations";
@@ -23,6 +23,8 @@ import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
 import { FImage } from "../../f-components/f-image/f-image";
 import { getProps, setProps } from "../../utils/utils";
 import { FCheckbox } from "../../f-components/f-checkbox/f-checkbox";
+import { KupLanguageSearch } from "../../managers/kup-language/kup-language-declarations";
+import { KupThemeIconValues } from "../../managers/kup-theme/kup-theme-declarations";
 export class KupList {
     constructor() {
         _KupList_instances.add(this);
@@ -33,6 +35,7 @@ export class KupList {
          * Instance of the KupManager class.
          */
         _KupList_kupManager.set(this, kupManagerInstance());
+        _KupList_globalFilterTimeout.set(this, void 0);
         _KupList_radios.set(this, []);
         _KupList_listItems.set(this, []);
         this.focused = null;
@@ -40,6 +43,7 @@ export class KupList {
         this.customStyle = '';
         this.data = [];
         this.displayMode = ItemsDisplayMode.DESCRIPTION;
+        this.showFilter = false;
         this.filter = '';
         this.hideText = false;
         this.isMenu = false;
@@ -182,6 +186,13 @@ export class KupList {
     async setProps(props) {
         setProps(this, KupListProps, props);
     }
+    onFilterValueChange({ detail }) {
+        let value = '';
+        if (detail && detail.value) {
+            value = detail.value;
+        }
+        this.filter = value;
+    }
     /*-------------------------------------------------*/
     /*          L i f e c y c l e   H o o k s          */
     /*-------------------------------------------------*/
@@ -216,6 +227,8 @@ export class KupList {
         __classPrivateFieldSet(this, _KupList_listItems, [], "f");
         let componentClass = 'list';
         let wrapperClass = undefined;
+        let filterClass = 'filter';
+        let listScrollClass = 'scroll-list';
         if (this.isMenu) {
             wrapperClass = 'kup-menu';
             if (this.menuVisible) {
@@ -242,9 +255,9 @@ export class KupList {
         }
         __classPrivateFieldSet(this, _KupList_radios, [], "f");
         let index = 0;
-        return (h(Host, { key: '08701617c26a28e330d8db4d579cda4b99f53fa4' }, h("style", { key: '12f6c1797eb686c114114eb5dce532979f6226cb' }, __classPrivateFieldGet(this, _KupList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '3bae7c17b51cf2c03835ae90661f46209bcf251b', id: "kup-component", class: wrapperClass }, h("ul", { key: '99232d1e8c3a5eb2a4c3d4ca6f080ebb5e468b95', class: componentClass, role: roleAttr, "aria-multiselectable": ariaMultiSelectable }, this.data
+        return (h(Host, { key: 'e8cdd2092681385e1066487b2b62ee82bceab891' }, h("style", { key: '336d64d0725b9eac37163b89464384ffe0b5a1f2' }, __classPrivateFieldGet(this, _KupList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '62e457fb4a4af1eadae76893c8cc247140b2fbaa', id: "kup-component", class: wrapperClass }, this.showFilter ? (h("div", { class: filterClass }, __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_createFilterComponent).call(this))) : null, h("div", { key: 'd256a7e0e34dd704d03a19d361e308fe9542540f', class: listScrollClass }, h("ul", { key: '040ad58ac8867cb5a5ae50dbf687d019a497b153', class: componentClass, role: roleAttr, "aria-multiselectable": ariaMultiSelectable }, this.data
             .filter((item) => __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_itemCompliant).call(this, item))
-            .map((item) => __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_renderListItem).call(this, item, index++))))));
+            .map((item) => __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_renderListItem).call(this, item, index++)))))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupList_kupManager, "f").theme.unregister(this);
@@ -339,6 +352,27 @@ export class KupList {
                 "reflect": false,
                 "defaultValue": "ItemsDisplayMode.DESCRIPTION"
             },
+            "showFilter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Show filter for filter elements in list"
+                },
+                "attribute": "show-filter",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "filter": {
                 "type": "string",
                 "mutable": true,
@@ -794,7 +828,7 @@ export class KupList {
             }];
     }
 }
-_KupList_kupManager = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_listItems = new WeakMap(), _KupList_instances = new WeakSet(), _KupList_handleSelection = function _KupList_handleSelection(index) {
+_KupList_kupManager = new WeakMap(), _KupList_globalFilterTimeout = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_listItems = new WeakMap(), _KupList_instances = new WeakSet(), _KupList_handleSelection = function _KupList_handleSelection(index) {
     if (index !== null && index !== undefined && !isNaN(index)) {
         const listItems = this.rootElement.shadowRoot.querySelectorAll('.list-item');
         const id = listItems[index].dataset.id;
@@ -958,4 +992,9 @@ _KupList_kupManager = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_l
     }
     return (item.id.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0 ||
         item.value.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0);
+}, _KupList_createFilterComponent = function _KupList_createFilterComponent() {
+    return (h("div", { id: "global-filter", class: "filter" }, h("kup-text-field", { fullWidth: true, label: __classPrivateFieldGet(this, _KupList_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), icon: KupThemeIconValues.SEARCH, initialValue: this.filter, "onkup-textfield-input": (event) => {
+            window.clearTimeout(this.filter);
+            __classPrivateFieldSet(this, _KupList_globalFilterTimeout, window.setTimeout(() => this.onFilterValueChange(event), 600), "f");
+        } })));
 };

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

@@ -263,11 +263,11 @@ export class KupMagicBox {
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: '8f04a5029dad9d7d8f3673124a6fb954880719d5' }, h("style", { key: 'af43ffc44c345efb6982aecac7ffeb7469a1e1ab' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '4da32884b8cfaee501fe98de3ad61dbfd40644f1', id: componentWrapperId }, h("div", { key: '3ae6ee9f2ee07d1ace113fe223bf45fe907eb1d2', class: "magic-box-wrapper" }, h("div", { key: '7331459e7beeecbad1f94907c5dfc37e6fd77221', class: "actions", id: "drag-handle" }, h("kup-combobox", Object.assign({ key: 'cf49975df5a5aa923c031c64ecee9a81ae4ad0bc' }, this.comboboxProps())), h("kup-button", { key: '9268ce09ec663aa4e00a82ba0fadef493422d12f', styling: FButtonStyling.FLAT, icon: "delete", label: "Reset", "onkup-button-click": () => {
+        return (h(Host, { key: 'cc7eb83eaccd2507c886ec16bc37d2fa567ac52e' }, h("style", { key: '809d326e5dcbf28e7aadc8901b0b4958442de680' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '1f05d7964adaebc3e44123e766f54b913b6427a4', id: componentWrapperId }, h("div", { key: '08e3fe041eca609baf1bffc35d19711a54557b92', class: "magic-box-wrapper" }, h("div", { key: 'a66c16ca2910391f07eeca825443cd13d1a9eaef', class: "actions", id: "drag-handle" }, h("kup-combobox", Object.assign({ key: '8751f6abdbb318c30470954b6b59a5ee331b3ab9' }, this.comboboxProps())), h("kup-button", { key: 'aaae57d304a47b6371f87e7be3ec6e52d6dac92f', styling: FButtonStyling.FLAT, icon: "delete", label: "Reset", "onkup-button-click": () => {
                 this.data = null;
-            } }), h("kup-button", { key: '3724463433b93aa9ae13ae19d67be8fc39c702f6', id: "close-dialog", customStyle: `:host{${KupThemeColorValues.PRIMARY}: var(${KupThemeColorValues.TITLE});}`, icon: "clear", "onkup-button-click": () => {
+            } }), h("kup-button", { key: '295644dff6eff6d80df769fd54d5e0db43de8473', id: "close-dialog", customStyle: `:host{${KupThemeColorValues.PRIMARY}: var(${KupThemeColorValues.TITLE});}`, icon: "clear", "onkup-button-click": () => {
                 this.kupManager.hideMagicBox();
-            } })), h("div", { key: '448858d039c7cd0ea8e756d9ad66af2b3baf5c52', class: "content", ref: (el) => (this.wrapperRef = el) }, this.setContent())))));
+            } })), h("div", { key: '3aedf43217a1a013c78170af418adbde5994e0cc', class: "content", ref: (el) => (this.wrapperRef = el) }, this.setContent())))));
     }
     disconnectedCallback() {
         this.kupManager.interact.unregister([

package/dist/collection/components/kup-nav-bar/kup-nav-bar.js

@@ -98,7 +98,7 @@ export class KupNavBar {
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: '0f66ceb53da3d4bdc00787c80ef4764a79d76af8', class: "header" }, h("style", { key: '6435752fbe5f0ae68649ea4c43fee53afeb2dbca' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '607495825d0febc2dd41dcfecf0ecc78924e4679', id: componentWrapperId }, h("header", { key: '21667d9c45e86eab6c011247e1717b757d92dfd4', class: `${navbarClass} ${navbarClass}--${this.styling.toLowerCase()} ` }, h("div", { key: 'da92e4ddd4ff70b4fa9632233b0345d4843bee60', class: `${navbarClass}__row` }, this.content())))));
+        return (h(Host, { key: '2a384dc4de4b550cfaaf9490579dc4ffdb469076', class: "header" }, h("style", { key: 'b91849a849d6e9509b9456f1a90be1042f7d9499' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'e1182a3b34dd471a8dd73a90119af6a408f2604e', id: componentWrapperId }, h("header", { key: '13a6491135dab2490042558ae00bfe23a55b5ed8', class: `${navbarClass} ${navbarClass}--${this.styling.toLowerCase()} ` }, h("div", { key: '2b8cae0eaf58a12769ce158effc25fc31f7ee0c9', class: `${navbarClass}__row` }, this.content())))));
     }
     disconnectedCallback() {
         this.kupManager.language.unregister(this);

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

@@ -321,7 +321,7 @@ export class KupNumericPicker {
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: '60d9439b1beeca08cd1f5d7722c8c44b387f0ea6' }, h("style", { key: 'a240244c3350a93cf6411582d4ca5a6b44775328' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '8a07726204a12434f2f00fbd88fcc926b9b0de18', id: componentWrapperId }, this.prepTextfield())));
+        return (h(Host, { key: 'de9de7129302c8b4da71cf3d7a344ac8e6a5dfaf' }, h("style", { key: 'd4b96735e89a534a50349bbd3c12d69fbf3cd32e' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '9ddac65757ea1d436f6e845155d8f4d4a1610183', id: componentWrapperId }, this.prepTextfield())));
     }
     disconnectedCallback() {
         this.kupManager.dates.unregister(this);