@sme.up/ketchup 10.3.7 → 10.3.9

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_listeners, _KupInputPanel_cellTypeComponents, _KupInputPanel_cellTypesNeedingReset, _KupInputPanel_cellCustomRender, _KupInputPanel_sectionRenderMap, _KupInputPanel_readyPromise, _KupInputPanel_readyResolve, _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_skipRenderField, _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_isFCellEventPayload, _KupInputPanel_CHKAdapter, _KupInputPanel_CLPAdapter, _KupInputPanel_EDTAdapter, _KupInputPanel_ITXAdapter, _KupInputPanel_RADAdapter, _KupInputPanel_SWTAdapter, _KupInputPanel_DateAdapter, _KupInputPanel_ObjectAdapter, _KupInputPanel_ImageListAdapter, _KupInputPanel_FileUploadAdapter, _KupInputPanel_TimeAdapter, _KupInputPanel_NumberAdapter, _KupInputPanel_DataTableAdapter, _KupInputPanel_getTableUpdatedCell, _KupInputPanel_optionsTreeComboAdapter, _KupInputPanel_treeOptionsNodeAdapter, _KupInputPanel_dataTreeOptionsChildrenAdapter, _KupInputPanel_tableCMBandACPOptionsAdapter, _KupInputPanel_commandAdapter, _KupInputPanel_getAutocompleteEventCallback, _KupInputPanel_getTblAutocompleteEventCallback, _KupInputPanel_manageTblItemClick, _KupInputPanel_manageInputPanelCheck, _KupInputPanel_onCellUpdate, _KupInputPanel_setCellError, _KupInputPanel_areValuesUpdated, _KupInputPanel_getFunctionOnClickBTN, _KupInputPanel_findTraversedFCell, _KupInputPanel_getEventDetails, _KupInputPanel_didLoadInteractables, _KupInputPanel_setFocusOnInputElement, _KupInputPanel_findFirstInput, _KupInputPanel_setAutoSkip, _KupInputPanel_upload;
+var _KupInputPanel_instances, _KupInputPanel_kupManager, _KupInputPanel_formRef, _KupInputPanel_optionsAdapterMap, _KupInputPanel_originalData, _KupInputPanel_listeners, _KupInputPanel_cellTypeComponents, _KupInputPanel_cellTypesNeedingReset, _KupInputPanel_cellCustomRender, _KupInputPanel_sectionRenderMap, _KupInputPanel_readyPromise, _KupInputPanel_readyResolve, _KupInputPanel_helperEl, _KupInputPanel_getCell, _KupInputPanel_renderRow, _KupInputPanel_renderCell, _KupInputPanel_hideHelper, _KupInputPanel_showHelper, _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_skipRenderField, _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_isFCellEventPayload, _KupInputPanel_CHKAdapter, _KupInputPanel_CLPAdapter, _KupInputPanel_EDTAdapter, _KupInputPanel_ITXAdapter, _KupInputPanel_RADAdapter, _KupInputPanel_SWTAdapter, _KupInputPanel_DateAdapter, _KupInputPanel_ObjectAdapter, _KupInputPanel_ImageListAdapter, _KupInputPanel_TimeAdapter, _KupInputPanel_NumberAdapter, _KupInputPanel_DataTableAdapter, _KupInputPanel_getTableUpdatedCell, _KupInputPanel_optionsTreeComboAdapter, _KupInputPanel_treeOptionsNodeAdapter, _KupInputPanel_dataTreeOptionsChildrenAdapter, _KupInputPanel_tableCMBandACPOptionsAdapter, _KupInputPanel_commandAdapter, _KupInputPanel_getAutocompleteEventCallback, _KupInputPanel_getTblAutocompleteEventCallback, _KupInputPanel_manageTblItemClick, _KupInputPanel_manageInputPanelCheck, _KupInputPanel_onCellUpdate, _KupInputPanel_setCellError, _KupInputPanel_areValuesUpdated, _KupInputPanel_getFunctionOnClickBTN, _KupInputPanel_findTraversedFCell, _KupInputPanel_getEventDetails, _KupInputPanel_didLoadInteractables, _KupInputPanel_setFocusOnInputElement, _KupInputPanel_findFirstInput, _KupInputPanel_setAutoSkip, _KupInputPanel_upload;
 import { forceUpdate, h, Host, } from "@stencil/core";
 import { FButton } from "../../f-components/f-button/f-button";
 import { FCell } from "../../f-components/f-cell/f-cell";
@@ -83,11 +83,34 @@ export class KupInputPanel {
         ]));
         _KupInputPanel_readyPromise.set(this, void 0);
         _KupInputPanel_readyResolve.set(this, void 0);
+        _KupInputPanel_helperEl.set(this, null);
+        _KupInputPanel_hideHelper.set(this, () => {
+            if (__classPrivateFieldGet(this, _KupInputPanel_helperEl, "f")) {
+                __classPrivateFieldGet(this, _KupInputPanel_helperEl, "f").remove();
+                __classPrivateFieldSet(this, _KupInputPanel_helperEl, null, "f");
+            }
+        });
+        _KupInputPanel_showHelper.set(this, (e, text) => {
+            if (__classPrivateFieldGet(this, _KupInputPanel_helperEl, "f")) {
+                __classPrivateFieldGet(this, _KupInputPanel_helperEl, "f").style.left = `${e.clientX + 10}px`;
+                __classPrivateFieldGet(this, _KupInputPanel_helperEl, "f").style.top = `${e.clientY + 10}px`;
+                __classPrivateFieldGet(this, _KupInputPanel_helperEl, "f").innerText = text;
+            }
+            else {
+                __classPrivateFieldSet(this, _KupInputPanel_helperEl, document.createElement('div'), "f");
+                __classPrivateFieldGet(this, _KupInputPanel_helperEl, "f").className = 'input-panel__helper-tooltip';
+                __classPrivateFieldGet(this, _KupInputPanel_helperEl, "f").innerText = text;
+                __classPrivateFieldGet(this, _KupInputPanel_helperEl, "f").style.left = `${e.clientX + 10}px`;
+                __classPrivateFieldGet(this, _KupInputPanel_helperEl, "f").style.top = `${e.clientY + 10}px`;
+                document.body.appendChild(__classPrivateFieldGet(this, _KupInputPanel_helperEl, "f"));
+            }
+        });
         this.buttonPosition = KupInputPanelButtonsPositions.BOTTOM;
         this.customStyle = '';
         this.dashboardMode = false;
         this.data = null;
         this.hiddenSubmitButton = false;
+        this.commandBarPosition = undefined;
         this.inputPanelPosition = KupInputPanelPosition.COLUMNS;
         this.submitCb = null;
         this.optionsHandler = null;
@@ -115,7 +138,7 @@ export class KupInputPanel {
             });
             __classPrivateFieldSet(this, _KupInputPanel_listeners, [], "f");
         }
-        if (this.data) {
+        if (this.data && this.data.columns && this.data.rows) {
             __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_mapCells).call(this, this.data);
         }
     }
@@ -249,7 +272,7 @@ 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: '41506c3d7a6888eeeda1dd5c300f36673b366510', "onKup-cell-blur": (e) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_manageInputPanelCheck).call(this, e, CheckTriggeringEvents.BLUR), "onKup-cell-update": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_onCellUpdate).bind(this), "onKup-tabbar-click": (e) => {
+        return (h(Host, { key: '5f400adad4ef13867fa4cef8db5537f2e660808f', "onKup-cell-blur": (e) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_manageInputPanelCheck).call(this, e, CheckTriggeringEvents.BLUR), "onKup-cell-update": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_onCellUpdate).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": (e) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getOptionHandler).call(this, e, true), "onKup-cell-itemclick": (e) => {
                 __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_manageInputPanelCheck).call(this, e, CheckTriggeringEvents.ITEMCLICK);
@@ -259,7 +282,7 @@ export class KupInputPanel {
                 this.kupInputPanelObjectFieldOpenSearchMenu.emit(e.detail);
             }, "onKup-objectfield-selectedmenuitem": (e) => {
                 this.kupInputPanelObjectFieldSelectedMenuItem.emit(e.detail);
-            }, "onKup-file-upload-upload": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_upload).bind(this) }, h("style", { key: '2b875bc91534289b075e8fac561d2eaeb5b732d1' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'ecfbac6227c007eadf2e63c2d936d72e7c132936', id: componentWrapperId }, inputPanelContent)));
+            }, "onKup-file-upload-upload": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_upload).bind(this) }, h("style", { key: 'ac5331c087b8cd5e9908361cf83d10857c956bb4' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'cd01a86ec411b5b10e8af83f3986c3fa3b55b8f5', id: componentWrapperId }, inputPanelContent)));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.unregister(this);
@@ -397,6 +420,26 @@ export class KupInputPanel {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "commandBarPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom' | 'left' | 'right'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'bottom'"
+                        }],
+                    "text": "Position of the command bar (submit button and other commands)"
+                },
+                "attribute": "command-bar-position",
+                "reflect": false
+            },
             "inputPanelPosition": {
                 "type": "string",
                 "mutable": false,
@@ -911,7 +954,7 @@ export class KupInputPanel {
             }];
     }
 }
-_KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(), _KupInputPanel_optionsAdapterMap = new WeakMap(), _KupInputPanel_originalData = new WeakMap(), _KupInputPanel_listeners = new WeakMap(), _KupInputPanel_cellTypeComponents = new WeakMap(), _KupInputPanel_cellTypesNeedingReset = new WeakMap(), _KupInputPanel_cellCustomRender = new WeakMap(), _KupInputPanel_sectionRenderMap = new WeakMap(), _KupInputPanel_readyPromise = new WeakMap(), _KupInputPanel_readyResolve = 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_listeners = new WeakMap(), _KupInputPanel_cellTypeComponents = new WeakMap(), _KupInputPanel_cellTypesNeedingReset = new WeakMap(), _KupInputPanel_cellCustomRender = new WeakMap(), _KupInputPanel_sectionRenderMap = new WeakMap(), _KupInputPanel_readyPromise = new WeakMap(), _KupInputPanel_readyResolve = new WeakMap(), _KupInputPanel_helperEl = new WeakMap(), _KupInputPanel_hideHelper = new WeakMap(), _KupInputPanel_showHelper = new WeakMap(), _KupInputPanel_instances = new WeakSet(), _KupInputPanel_getCell = function _KupInputPanel_getCell(id) {
     if (!id) {
         return null;
     }
@@ -1004,7 +1047,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         } }, ((_b = layout === null || layout === void 0 ? void 0 : layout.sections) === null || _b === void 0 ? void 0 : _b.length) == 1 &&
         ((_c = layout === null || layout === void 0 ? void 0 : layout.sections[0]) === null || _c === void 0 ? void 0 : _c.title) && (h("div", { class: "input-panel__typography" }, h(FTypography, { value: layout.sections[0].title, type: FTypographyType.HEADING1 }))), h("div", { class: classObj, style: styleObj }, rowContent), h("div", { class: commandsClass }, h(FButton, { buttonType: "submit", label: __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.translate(KupLanguageGeneric.CONFIRM), wrapperClass: "form__submit", invisible: this.hiddenSubmitButton }), this.fieldReset && (h(FButton, { buttonType: "reset", label: "Reset", wrapperClass: "form__submit", icon: "broom" })), this.inputPanelCommands))));
 }, _KupInputPanel_renderCell = function _KupInputPanel_renderCell(cell, row, column) {
-    var _a;
+    var _a, _b;
     if (!cell) {
         return;
     }
@@ -1012,7 +1055,19 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
     if (customRender !== undefined) {
         return customRender(cell, column, (_a = row.layout) === null || _a === void 0 ? void 0 : _a.absolute);
     }
-    cell.data = Object.assign(Object.assign({}, cell.data), { sizing: 'extra-small' });
+    cell.data = Object.assign(Object.assign({}, cell.data), { sizing: 'extra-small', labelHelper: column.helper });
+    const subcompData = (_b = cell.data) === null || _b === void 0 ? void 0 : _b.data;
+    if (subcompData) {
+        const hasTextFieldProps = Object.keys(subcompData).includes('kup-text-field');
+        if (!hasTextFieldProps) {
+            subcompData['kup-text-field'] = {
+                labelHelper: column.helper,
+            };
+        }
+        else {
+            subcompData['kup-text-field'].labelHelper = column.helper;
+        }
+    }
     const cellProps = {
         cell,
         column,
@@ -1023,10 +1078,27 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         setSizes: true,
     };
     const label = __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getLabelComponent).call(this, cell, column.title);
+    const fcell = h(FCell, Object.assign({}, cellProps));
     if (label) {
-        return (h("div", { class: { 'input-panel__label_container': true } }, label, h(FCell, Object.assign({}, cellProps))));
+        /*
+        const hasHelper = Boolean(column?.helper) || true;
+        const helper = hasHelper ? (
+            <span
+                class="input-panel__helper-icon"
+                onPointerMove={(e) => this.#showHelper(e, column.helper)}
+                onPointerDown={(e) => this.#showHelper(e, column.helper)}
+                onPointerOut={() => this.#hideHelper()}
+            >
+                <FImage
+                    resource="info-outline"
+                    title={column.helper}
+                ></FImage>
+            </span>
+        ) : null;
+        */
+        return (h("div", { class: { 'input-panel__label_container': true } }, label, fcell));
     }
-    return h(FCell, Object.assign({}, cellProps));
+    return fcell;
 }, _KupInputPanel_renderButton = function _KupInputPanel_renderButton(cell, { name }) {
     const renderedButton = (h(FButton, Object.assign({ icon: cell.icon, placeholderIcon: cell.placeholderIcon, id: name }, cell.data, { wrapperClass: "form__submit" })));
     return renderedButton;
@@ -1446,13 +1518,13 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         [FCellTypes.TABLE, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_DataTableAdapter).bind(this)],
         [FCellTypes.TIME, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_TimeAdapter).bind(this)],
         [FCellTypes.IMAGE_LIST, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_ImageListAdapter).bind(this)],
-        [FCellTypes.FILE_UPLOAD, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_FileUploadAdapter).bind(this)],
     ]);
     const adapter = dataAdapterMap.get(cellType);
     return adapter
         ? adapter(options, fieldLabel, currentValue, cell, col.name, layout)
         : null;
 }, _KupInputPanel_slotData = function _KupInputPanel_slotData(cell, col) {
+    var _a;
     const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);
     if (cellType === FCellTypes.CHIP) {
         return {
@@ -1465,7 +1537,11 @@ _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)), { showDropDownIcon: true, class: '', style: { width: '100%' }, disabled: !cell.isEditable, id: col.name });
+        const props = Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_CMBandACPAdapter).call(this, cell.options, col.title, null, cell)), { showDropDownIcon: true, class: '', style: { width: '100%' }, disabled: !cell.isEditable, id: col.name });
+        if ((_a = props === null || props === void 0 ? void 0 : props.data) === null || _a === void 0 ? void 0 : _a['kup-text-field']) {
+            props.data['kup-text-field'].labelHelper = col.helper;
+        }
+        return props;
     }
     return null;
 }, _KupInputPanel_CHIAdapter = function _KupInputPanel_CHIAdapter(_options, _fieldLabel, currentValue, cell) {
@@ -1489,8 +1565,8 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
     cell.data.onClick = () => {
         __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getFunctionOnClickBTN).call(this, cell, id);
     };
-    if (cell.data.BtnMap) {
-        const concurrentCommand = (_b = (_a = this.data.setup) === null || _a === void 0 ? void 0 : _a.commands) === null || _b === void 0 ? void 0 : _b.find((command) => command.obj.k === cell.data.BtnMap);
+    if (cell.data.mappedCommandId) {
+        const concurrentCommand = (_b = (_a = this.data.setup) === null || _a === void 0 ? void 0 : _a.commands) === null || _b === void 0 ? void 0 : _b.find((command) => command.obj.k === cell.data.mappedCommandId);
         if (concurrentCommand) {
             cell.isEditable = true;
             cell.data.onClick = () => {
@@ -1591,8 +1667,6 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         leadingLabel: fieldLabel || '',
         value: currentValue || '',
     };
-}, _KupInputPanel_FileUploadAdapter = function _KupInputPanel_FileUploadAdapter(_options, _fieldLabel, currentValue, cell) {
-    return Object.assign({ pathString: currentValue }, cell.data);
 }, _KupInputPanel_TimeAdapter = function _KupInputPanel_TimeAdapter(_options, fieldLabel, currentValue) {
     return {
         data: {
@@ -1630,7 +1704,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
                 }),
                 rows: data.rows.map((row) => (Object.assign(Object.assign({}, row), { cells: Object.keys(row.cells).reduce((cell, key) => {
                         const column = data.columns.find((col) => col.name === key);
-                        return Object.assign(Object.assign({}, cell), { [key]: Object.assign(Object.assign({}, row.cells[key]), { data: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_mapData).call(this, row.cells[key], column, layout)), { disabled: row.cells[key].editable === false, id: column.id }) }) });
+                        return Object.assign(Object.assign({}, cell), { [key]: Object.assign(Object.assign({}, row.cells[key]), { data: Object.assign(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_mapData).call(this, row.cells[key], column, layout)), { disabled: row.cells[key].editable === false, id: column.id }), row.cells[key].data) }) });
                     }, {}) }))),
             },
         };

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: '82d1c572d3d994d79f682a81484c140ca6cfd512', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '5bef88d3b797414102e78e45a03c3b94c9f3255d', 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: '5e72b30a0f1e3430f6156e38ec21e5ab4fbad8f3', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'aa48fb656f7dc30746dd11d4d3405b60a312f2c3', 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: '7513b2807db3c80a1bf40c06afcc9368e6fdb294', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '5e527bd9fbcae6e3ee52e84a4fb67b476c154f10', 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: '5f448fd1eb1ab0270cf458177c3966ba6000295b', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'bad66bec1cb624efd059126cec4f98846cdeef75', 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: '5475f432000e828ec98dcb4eadbf7112d7c20861', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '954ddd01b7398bf0989d134a69254f448221bfb7', 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: '138d53448f4c329478d24d246d0fef6fbcb62d7a', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '96079538dc0737b2e7b7a376b4e0283a829a0143', 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: 'a42af94d1f6c0c5adab4eade6af3813ad05e7b63', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: 'e296f6c9fffb236c8aad51403237745e03994e9e', d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
+                resource = (h("svg", { key: '3ea391531e961b72fb84c7265e3b398a4e40028a', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '54773da2ab16358a610b96ce742288fa8a2ca362', d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
                 break;
             case 'kup-data-table':
                 //table-large.svg
-                resource = (h("svg", { key: '6f755edd48a59c2857dc6d8935909faf648d9a03', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '6951d2f06986b335eea5bef530c7a4bf9aa311ab', 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: '899606089c5e7b4e1a88823c8cb27e5f86aa1d4c', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '17bb02d78bb042ae255314ea8f68b1ce7481e993', 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: 'e4de60a5e5d48cb7726b88abf06b7bc5c889d422', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '63ffecb16ce4107ac9ffbfbad8cd655e34e900f3', 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: '049a62d7a9dccfee4a2fae8e0cd5869b85e06d46', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'b27ed54889308bf056f24c70511d39e134603f89', 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: 'b8e2b4a9382a3e9483da1f0efbbef9566b8f39ab', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '339f3815ac768a03ad3b8ba78d6bce5c6879402d', 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: '686ea803a443610674b2bf9282801cedc627b64e', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '2e64b70e935e82ebbca79a89202ccdc19ba666df', 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: '15c32aad0b8ff81e43a869c14de3872ab4a608ff', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'd4388b9681629f14c0c4c385448ed4765cc92a9e', 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: '0fff99e133a6a1795ee1d9797746efbefaf82fbf', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'db92d5a4868e8c8d8120d136621df4bf17c4679b', 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: '132ad10f47b212eac81a40954eb7b5f0fe46ff85', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '45015c39db68faa73d2ee7398f55137880277146', 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: 'b9d19e00ae1ae630128d73243861f6479b1455dc', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'e7ca81f490462908580b0a7509ec3811dbd85eaf', 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: '872b8eb5d96b68cfcd1e4900bfca772bab11ab3a' }, this.data, { ref: (el) => (this.lazyComponent = el) })));
+            content = (h(Tag, Object.assign({ key: 'e93f7f4ac49af252f791a4f7cb9be5e83d1df7bf' }, 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: '9c1dbf24aa0e68330251b4e9a35e17c7a9e23539', class: className }, h("style", { key: 'e74a571399d27dcac499e341dd6e19535e66f1c2' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '6aaca6cb575a7662770bb31abf1883ca96a7c543', id: componentWrapperId }, content)));
+        return (h(Host, { key: '99f35069da0886b3174bff35eaeae29d19a9fe2f', class: className }, h("style", { key: '4acddcd21d8ed89d235f7012fff7c7ea4abef2d1' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'e7b4a285865ec15115437f06a3873349e4e5965c', id: componentWrapperId }, content)));
     }
     disconnectedCallback() {
         var _a;

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: '76b8180fd4034de65e028b585a4fb002c8bcdfca' }, h("style", { key: '9ba35b5e148e6e50d8a9f830f5db48612581e69b' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'a3d292ce29fa8539e9c66275ac569c28cf3a54e1', id: componentWrapperId }, h("div", { key: 'fa29976b5702fedb46d7d91b618f2231ae7ddef1', class: "magic-box-wrapper" }, h("div", { key: '7f61c00fce84bcf7f36b8c47fe69fd5556aee41f', class: "actions", id: "drag-handle" }, h("kup-combobox", Object.assign({ key: '5f5aa592fe3eaf815677f238064425857d0b2f7a' }, this.comboboxProps())), h("kup-button", { key: '3708c650c5e31029f801386565bba2a1ccfc0e43', styling: FButtonStyling.FLAT, icon: "delete", label: "Reset", "onkup-button-click": () => {
+        return (h(Host, { key: '049e0e429c4deb0c4b42aa4119630553269b4b5f' }, h("style", { key: '5141bbd9f761950b9c661aac8724d9bc7ddd00b3' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '22518e2bc9311b8d0989418f3185a91dd95c54c2', id: componentWrapperId }, h("div", { key: 'a0929d74cc1e8f7b4b72fd481bed66683c77fc81', class: "magic-box-wrapper" }, h("div", { key: '2550b87cb0ff859cf32756cb34932f2c1a2e1ed7', class: "actions", id: "drag-handle" }, h("kup-combobox", Object.assign({ key: 'cf84762570b8c0c7e27158725cba90ac10bb91a6' }, this.comboboxProps())), h("kup-button", { key: '4325adf34dc50fa7c34d037784eeaa7f994f0f21', styling: FButtonStyling.FLAT, icon: "delete", label: "Reset", "onkup-button-click": () => {
                 this.data = null;
-            } }), h("kup-button", { key: '9306931f703349e28310daaeaf82f126bdaf94ad', id: "close-dialog", customStyle: `:host{${KupThemeColorValues.PRIMARY}: var(${KupThemeColorValues.TITLE});}`, icon: "clear", "onkup-button-click": () => {
+            } }), h("kup-button", { key: 'f635e3b8e1abbde80eddf0092f6b9538031fd7c6', id: "close-dialog", customStyle: `:host{${KupThemeColorValues.PRIMARY}: var(${KupThemeColorValues.TITLE});}`, icon: "clear", "onkup-button-click": () => {
                 this.kupManager.hideMagicBox();
-            } })), h("div", { key: '560c6c700d9e4699ac3c800d36648a16afdcff8f', class: "content", ref: (el) => (this.wrapperRef = el) }, this.setContent())))));
+            } })), h("div", { key: 'e5f3e3497af54d3e3061f28abf0dc8e69ed18959', 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: 'dcdc392d8ec19c3ddb52ce654bf90f60796aa0da', class: "header" }, h("style", { key: 'c5633275f41d89e7dbd3058e5ec66218c896ee2b' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'ba15568ef90710d4d95d46cd1cc8ecdf728cf430', id: componentWrapperId }, h("header", { key: 'a0af5b7234bd7eef6e85a7d06aef9c26e3f7abed', class: `${navbarClass} ${navbarClass}--${this.styling.toLowerCase()} ` }, h("div", { key: '362841f2ab4d775e8d2e950adcd53ec8cd3be565', class: `${navbarClass}__row` }, this.content())))));
+        return (h(Host, { key: 'd093a8d45896d85fd71e3d92a7451efccc3a10ba', class: "header" }, h("style", { key: '59a661649f8a7b81b3258e56ae93bc18f2a5f3fd' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'a44b81214556b495f7cb253f16085cd1a884c717', id: componentWrapperId }, h("header", { key: '91e08ad248d5a56aa9eebc753e883c0cbe8a77ec', class: `${navbarClass} ${navbarClass}--${this.styling.toLowerCase()} ` }, h("div", { key: '4f5f6924c6b311ffb8f46f26a4ac266f42aaf6a4', 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: '9e001513a9402a9c840d21a5a76b641784b1fac6' }, h("style", { key: 'b7a7783eecb0c775f0b5bc972e0683f59be394a3' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '45467aed59b8f4f24597cb7e7cbf7ae94856fbba', id: componentWrapperId }, this.prepTextfield())));
+        return (h(Host, { key: '22a6ef8139d04934008071cfa9f9d395144cf82c' }, h("style", { key: '3631b7dedacb5a4732a78a36ab6a4ddd772ae632' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '9496502390810c10eb60f5fad738d99ee2cbaef5', id: componentWrapperId }, this.prepTextfield())));
     }
     disconnectedCallback() {
         this.kupManager.dates.unregister(this);

package/dist/collection/components/kup-object-field/kup-object-field.js

@@ -79,7 +79,7 @@ export class KupObjectField {
             inputValue: this.inputValue,
             onChange: null,
         };
-        return (h(Host, { key: 'bd9185b4bec628e4d5b9f8f12d1fd5bf2450cd42' }, h("style", { key: '51eb6f40a02581178ca4056781fa09af8d317ea1' }, __classPrivateFieldGet(this, _KupObjectField_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '3ca583dc21c02be577ff43ecefd3616f102dc0a4', id: componentWrapperId }, h(FObjectField, Object.assign({ key: '2455ce8729ce87a4445883ed0e7763eef31b7f90' }, props)))));
+        return (h(Host, { key: '5eaf6b26539f0d6301e19077a29419bb91e11629' }, h("style", { key: '03944bfc8cd00d94e11aef6ccfc55e7ffe73f741' }, __classPrivateFieldGet(this, _KupObjectField_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'e0336a46ae9b6b0cce2dbf83498508560414ecca', id: componentWrapperId }, h(FObjectField, Object.assign({ key: '1f82d5ee84dedcf85d67536a2e4667bf51a70485' }, props)))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupObjectField_kupManager, "f").theme.unregister(this);

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

@@ -105,7 +105,7 @@ export class KupPdf {
         catch (error) { }
     }
     render() {
-        return (h(Host, { key: '1f04063ce0d949cd00d384678c19adf794312057' }, h("div", { key: '5173ada8185dc56b0638c4038e915f549f2c991f', id: componentWrapperId, ref: (el) => (this.wrapperRef = el) })));
+        return (h(Host, { key: '56dc837db190498749a7536216871f33da6fa6a5' }, h("div", { key: '43e4a5818a404361bc9f9f47744e798f37e02ac2', id: componentWrapperId, ref: (el) => (this.wrapperRef = el) })));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupPdf_kupManager, "f").theme.unregister(this);

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

@@ -523,7 +523,7 @@ export class KupPlanner {
         if ((_b = this.plannerProps) === null || _b === void 0 ? void 0 : _b.secondaryGantt) {
             plannerProps.secondaryGantt = Object.assign(Object.assign({}, this.plannerProps.secondaryGantt), { onScrollY: this.handleDetailGanttScrollY.bind(this) });
         }
-        return (h(Host, { key: 'ed62d6c7e75169f47cb83311fb28827da0afe0ca' }, h("style", { key: '422a78066f27c04c488750ac66b9f4c10d0211c9' }, __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '4122f3114a4e24119551e2724790c15c2eead874', id: componentWrapperId, style: { maxWidth: this.maxWidth } }, this.plannerProps && (h("kup-planner-renderer", { key: '20afe8320d1439bf34942faab0a5a107498fc373', props: plannerProps, ref: (el) => (this.plannerRenderer = el) }))), h("div", { key: '5ed8092953f35078fd5bdaa84d8ce9d8a7cae6bd', style: { display: this.plannerProps ? 'none' : '' } }, h(FTextField, { key: '38a860e8afdf0ce1e048211622a5280986dbccb8', icon: KupThemeIconValues.SEARCH, id: "main-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
+        return (h(Host, { key: '07f4dd3d5e91864ee8f6d01705a89b3ff14a99f7' }, h("style", { key: '9e415c959cb6757efa80680eac6920cc19a82b89' }, __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'fde2bd441bbf3df7a423f97bc3d5dc97cbb7f943', id: componentWrapperId, style: { maxWidth: this.maxWidth } }, this.plannerProps && (h("kup-planner-renderer", { key: 'c389726acbf2859a311ace7121423260de2b3b2c', props: plannerProps, ref: (el) => (this.plannerRenderer = el) }))), h("div", { key: '92758b8acc38cfca30d65b405888e58f4a4bd1f1', style: { display: this.plannerProps ? 'none' : '' } }, h(FTextField, { key: '8645ce7ea69ec2e2d084a7487c691d7291de8a67', icon: KupThemeIconValues.SEARCH, id: "main-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
                 if (e.key === 'Enter') {
                     __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_onFilter).call(this, e.target.value);
                 }

package/dist/collection/components/kup-planner/utils/custom-task-list-header.js

@@ -8,11 +8,11 @@ export class KupCustomTaskListHeader {
         this.fontSize = undefined;
     }
     render() {
-        return (h("div", { key: '73c099362f8bfffd1912c4415f818ec0e3f527d9', class: "custom-task-list-wrapper", style: {
+        return (h("div", { key: '23f119a1f4df86a9c9518014672600827ef3946a', class: "custom-task-list-wrapper", style: {
                 height: '25px',
                 fontFamily: this.fontFamily,
                 fontSize: this.fontSize,
-            } }, h("div", { key: 'd8e4e9d3323c7fd476295b6fcb81354a7af6d076', class: "title" }, h("span", { key: '26c697a8d3c453ad2f8dc17aced9c90af15fabd5' }, this.label)), this.setDoubleView !== undefined && (h("div", { key: '52d6dc0de21e77aecaac420c51c4b368c81dac33', class: "toggler" }, h("label", { key: 'f680cd1356907075f76245b1ae6b5885595f1205', htmlFor: "ch2", class: "switch" }, h("input", { key: 'b3111df49ce385f294d9050f61d534ccabc22047', class: "input", id: "ch2", type: "checkbox", checked: this.doubleView, onClick: () => this.setDoubleView(!this.doubleView) }), h("span", { key: '75ea0aef920da62c94749d3bd2ef2fa029e5d1d8', class: "slider" })), h("span", { key: '1a31bbb00ebb13d1943ed8620ea1d3569da8cc06', class: "label" }, "Previsioni")))));
+            } }, h("div", { key: 'be428c1fa53e5d20c10b7841ed711678ca46ca50', class: "title" }, h("span", { key: '5c6742dd5a63dbf837e1df3f7daa422925be102b' }, this.label)), this.setDoubleView !== undefined && (h("div", { key: '7dee3b1d2c665d5360b85a59fdafc2902f1fec01', class: "toggler" }, h("label", { key: '2ff7fb287c8901f60018d57a3f91e4827d49fc0a', htmlFor: "ch2", class: "switch" }, h("input", { key: '3b8df0b5b2b66b34ffa0151c2b62523d9b756885', class: "input", id: "ch2", type: "checkbox", checked: this.doubleView, onClick: () => this.setDoubleView(!this.doubleView) }), h("span", { key: 'f38b848a394283807290d19c2188d8255745ea89', class: "slider" })), h("span", { key: '03870d86ee67071fc114da83ffc4fe3a8abc897d', class: "label" }, "Previsioni")))));
     }
     static get is() { return "kup-custom-task-list-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/kup-planner/utils/custom-task-list-table.js

@@ -27,17 +27,25 @@ export class KupCustomTaskListTable {
     }
     updateTaskListScroll() {
         this.projectWrapperRef &&
-            (this.projectWrapperRef.parentElement.scrollLeft = this.taskListScrollX);
+            (this.projectWrapperRef.parentElement.scrollLeft =
+                this.taskListScrollX);
     }
     render() {
+        var _a;
         const kupDates = new KupDates();
         const scrollableStyle = {};
         if (this.scrollableTaskList) {
             scrollableStyle['width'] = this.rowWidth;
         }
-        const spansToShow = this.tasks.reduce((prev, curr) => {
-            return prev.valuesToShow.length > curr.valuesToShow.length ? prev : curr;
-        }).valuesToShow.length + 1;
+        const spansToShow = this.tasks && this.tasks.length > 0
+            ? ((_a = this.tasks.reduce((prev, curr) => {
+                var _a, _b;
+                return ((_a = prev.valuesToShow) === null || _a === void 0 ? void 0 : _a.length) >
+                    ((_b = curr.valuesToShow) === null || _b === void 0 ? void 0 : _b.length)
+                    ? prev
+                    : curr;
+            }).valuesToShow) === null || _a === void 0 ? void 0 : _a.length) + 1 || 1
+            : 1;
         return (h("div", { class: `container ${this.scrollableTaskList ? 'scrollable' : ''}`, style: scrollableStyle }, h("div", { class: "project-wrapper", ref: (el) => (this.projectWrapperRef = el) }, this.tasks.map((task) => {
             var _a, _b, _c, _d;
             return (h(Fragment, null, task.type === 'project' ? (h("div", { class: "project", style: {
@@ -61,10 +69,14 @@ export class KupCustomTaskListTable {
                     ? kupDates.formatToLocaleSimple(task.start)
                     : v === '#END#'
                         ? kupDates.formatToLocaleSimple(task.end)
-                        : v))), this.scrollableTaskList && spansToShow > task.valuesToShow.length && ((() => {
-                const spansToIterate = createArrayFromNum(spansToShow - task.valuesToShow.length);
-                return (spansToIterate.map((element) => (h("span", { key: element }))));
-            })()))) : task.type === 'task' ? (h("div", { class: "subrow", style: {
+                        : v))), this.scrollableTaskList &&
+                spansToShow >
+                    task.valuesToShow.length &&
+                (() => {
+                    const spansToIterate = createArrayFromNum(spansToShow -
+                        task.valuesToShow.length);
+                    return spansToIterate.map((element) => (h("span", { key: element })));
+                })())) : task.type === 'task' ? (h("div", { class: "subrow", style: {
                     height: `${this.rowHeight}px`,
                     width: this.rowWidth,
                     fontFamily: this.fontFamily,
@@ -96,10 +108,16 @@ export class KupCustomTaskListTable {
                     ? kupDates.formatToLocaleSimple(task.start)
                     : v === '#END#'
                         ? kupDates.formatToLocaleSimple(task.end)
-                        : v))), this.scrollableTaskList && spansToShow > task.valuesToShow.length && ((() => {
-                const spansToIterate = createArrayFromNum(spansToShow - task.valuesToShow.length - 1);
-                return (spansToIterate.map((element) => (h("span", { key: element }))));
-            })()))) : ((() => {
+                        : v))), this.scrollableTaskList &&
+                spansToShow >
+                    task.valuesToShow.length &&
+                (() => {
+                    const spansToIterate = createArrayFromNum(spansToShow -
+                        task.valuesToShow
+                            .length -
+                        1);
+                    return spansToIterate.map((element) => (h("span", { key: element })));
+                })())) : ((() => {
                 var _a;
                 let str = '';
                 for (let i = 0; i < task.valuesToShow.length; i++) {

package/dist/collection/components/kup-planner/utils/kup-gantt/kup-gantt.js

@@ -563,9 +563,9 @@ export class KupGantt {
             TaskListHeader: this.TaskListHeader,
             TaskListTable: this.TaskListTable
         };
-        return (h("div", { key: '4736e4cf20dd8123991c6407053d6bf63b3895e3', class: "gannt-wrapper-main" }, h("div", { key: '9e6c79472018cf176e6ff854f088c51a9f0dd31d', class: "wrapper", onKeyDown: this.handleKeyDown.bind(this), tabIndex: 0, ref: (el) => (this.wrapperRef = el) }, this.listCellWidth && (h("kup-task-list", Object.assign({ key: '916157b026b48ef1ebc1ab893fe032f6b71fb2d2', currentTasks: this.currentTasks, handleClick: this.handleClick, handleDblClick: this.handleDblClick, handleContextMenu: this.handleContextMenu, ganttOnClick: this.ganttOnClick, ganttOnDblClick: this.ganttOnDblClick, ganttonOnContextMenu: this.ganttonOnContextMenu, label: this.label, doubleView: this.doubleView, setDoubleView: this.setDoubleView }, tableProps, { class: "tasks", scrollableTaskList: this.scrollableTaskList, updateTaskListScrollX: this.ignoreScrollEvent, ontaskListScrollWidth: (width) => {
+        return (h("div", { key: '369ec43109afb9a6f40446e806faf1f54dd67a43', class: "gannt-wrapper-main" }, h("div", { key: '52c2d71a0508119b1e252d196079af28c36ffea9', class: "wrapper", onKeyDown: this.handleKeyDown.bind(this), tabIndex: 0, ref: (el) => (this.wrapperRef = el) }, this.listCellWidth && (h("kup-task-list", Object.assign({ key: '7bff507a44beaae83ac961dea8bad526b684d3b2', currentTasks: this.currentTasks, handleClick: this.handleClick, handleDblClick: this.handleDblClick, handleContextMenu: this.handleContextMenu, ganttOnClick: this.ganttOnClick, ganttOnDblClick: this.ganttOnDblClick, ganttonOnContextMenu: this.ganttonOnContextMenu, label: this.label, doubleView: this.doubleView, setDoubleView: this.setDoubleView }, tableProps, { class: "tasks", scrollableTaskList: this.scrollableTaskList, updateTaskListScrollX: this.ignoreScrollEvent, ontaskListScrollWidth: (width) => {
                 this.taskListScrollWidth = width;
-            }, taskListScrollX: this.taskListScrollX, ref: (el) => (this.taskListTrueRef = el) }))), h("kup-task-gantt", { key: '839ae03ea863d3be1c041e73622d7eb2f9b7120a', gridProps: gridProps, calendarProps: calendarProps, barProps: barProps, ganttHeight: this.ganttHeight, taskGanttRef: this.taskGanttRef, scrollY: this.scrollY, scrollX: this.scrollX, phaseDragScroll: this.handlePhaseDragScroll.bind(this), class: "ganttContainer" }), this.ganttEvent.changedTask && (h("kup-tooltip", { key: 'b09acf310161f6fba7eb0e91de6ba53c31d43d40', arrowIndent: this.arrowIndent, rowHeight: this.rowHeight, svgContainerHeight: this.svgContainerHeight, svgContainerWidth: this.svgContainerWidth, fontFamily: this.fontFamily, fontSize: this.fontSize, scrollX: this.scrollX, scrollY: this.scrollY, task: this.ganttEvent.changedTask, headerHeight: this.headerHeight, taskListWidth: this.taskListWidth, TooltipContent: this.TooltipContent, rtl: this.rtl, svgWidth: this.svgWidth })), h("kup-vertical-scroll", { key: '756d1a3866665286e3c49c78e634ea8664f7da75', ganttFullHeight: this.ganttFullHeight, ganttHeight: this.ganttHeight, headerHeight: this.headerHeight, scrollNumber: this.scrollY, verticalScroll: this.handleScrollY.bind(this), rtl: this.rtl })), this.taskGanttRef && (h("kup-horizontal-scroll", { key: '73c8b8e4fd4ae1502287c724094e690995cb509f', svgWidth: this.svgWidth, taskListTrueRef: this.taskListTrueRef, taskListWidth: this.taskListWidth, scrollNumber: this.scrollX, rtl: this.rtl, horizontalScroll: this.handleScrollX.bind(this), horizontalTaskListScroll: this.handleTaskListScrollX.bind(this), listCellWidth: this.listCellWidth, scrollableTaskList: this.scrollableTaskList, taskListScrollWidth: this.taskListScrollWidth, taskListScrollNumber: this.taskListScrollX }))));
+            }, taskListScrollX: this.taskListScrollX, ref: (el) => (this.taskListTrueRef = el) }))), h("kup-task-gantt", { key: '6d82fda19eaaf819c71a5772a52ec63319c34174', gridProps: gridProps, calendarProps: calendarProps, barProps: barProps, ganttHeight: this.ganttHeight, taskGanttRef: this.taskGanttRef, scrollY: this.scrollY, scrollX: this.scrollX, phaseDragScroll: this.handlePhaseDragScroll.bind(this), class: "ganttContainer" }), this.ganttEvent.changedTask && (h("kup-tooltip", { key: 'b2b16a3153dac7ee314be92db91cafd2279df83e', arrowIndent: this.arrowIndent, rowHeight: this.rowHeight, svgContainerHeight: this.svgContainerHeight, svgContainerWidth: this.svgContainerWidth, fontFamily: this.fontFamily, fontSize: this.fontSize, scrollX: this.scrollX, scrollY: this.scrollY, task: this.ganttEvent.changedTask, headerHeight: this.headerHeight, taskListWidth: this.taskListWidth, TooltipContent: this.TooltipContent, rtl: this.rtl, svgWidth: this.svgWidth })), h("kup-vertical-scroll", { key: 'c3bfcc814a946ec6c32f372288fb020c31906eee', ganttFullHeight: this.ganttFullHeight, ganttHeight: this.ganttHeight, headerHeight: this.headerHeight, scrollNumber: this.scrollY, verticalScroll: this.handleScrollY.bind(this), rtl: this.rtl })), this.taskGanttRef && (h("kup-horizontal-scroll", { key: 'faafe36d199295d0d3d53405c8df3c5fe67cf94e', svgWidth: this.svgWidth, taskListTrueRef: this.taskListTrueRef, taskListWidth: this.taskListWidth, scrollNumber: this.scrollX, rtl: this.rtl, horizontalScroll: this.handleScrollX.bind(this), horizontalTaskListScroll: this.handleTaskListScrollX.bind(this), listCellWidth: this.listCellWidth, scrollableTaskList: this.scrollableTaskList, taskListScrollWidth: this.taskListScrollWidth, taskListScrollNumber: this.taskListScrollX }))));
     }
     static get is() { return "kup-gantt"; }
     static get originalStyleUrls() {

package/dist/collection/components/kup-planner/utils/kup-gantt-calendar/kup-gantt-calendar.js

@@ -225,11 +225,11 @@ export class KupGanttCalendar {
         this.simplifiedHeader =
             this.singleLineHeader && this.dateSetup.viewMode !== 'year';
         const [topValues, bottomValues] = this.getTopAndBottomValues();
-        return (h("svg", { key: '746671a52e6654cd1ff1789c76e25d0aa8f3905b', xmlns: "http://www.w3.org/2000/svg", width: this.svgWidth, height: this.headerHeight }, h("g", { key: '74a463a10c7124779eb5aa313bca389591fc131b', class: "calendar", "font-size": this.fontSize, "font-family": this.fontFamily }, h("rect", { key: 'e8a8a2b86f963588af95a8a829993e5757b638cb', x: 0, y: 0, width: this.columnWidth * this.dateSetup.dates.length, height: this.headerHeight, class: "calendarHeader" }), this.simplifiedHeader ? null : bottomValues, this.simplifiedHeader
+        return (h("svg", { key: '4bca0e060f56a7fe37e05b75d5d6869f040704a6', xmlns: "http://www.w3.org/2000/svg", width: this.svgWidth, height: this.headerHeight }, h("g", { key: '7d8e96b34aeb2d6fda64ca62c8f85669609d6dbb', class: "calendar", "font-size": this.fontSize, "font-family": this.fontFamily }, h("rect", { key: '8e7726a396d3f38f4b264acaeb6b28e998bfb60c', x: 0, y: 0, width: this.columnWidth * this.dateSetup.dates.length, height: this.headerHeight, class: "calendarHeader" }), this.simplifiedHeader ? null : bottomValues, this.simplifiedHeader
             ? topValues.map((topValue) => (h("g", { class: "calendarTop" }, h("line", { x1: topValue.x1Line, y1: topValue.y2Line * 2, x2: topValue.x1Line, y2: topValue.y2Line, class: "calendarTopTick", key: topValue.value + 'line' }), h("text", { key: topValue.value + 'text', y: topValue.yText, x: topValue.xText, class: "calendarTopText" }, topValue.value))))
             : topValues.map((topValue) => (h("g", { class: "calendarTop" }, h("line", { x1: topValue.x1Line, y1: topValue.y1Line, x2: topValue.x1Line, y2: topValue.y2Line, class: "calendarTopTick", key: topValue.value + 'line' }), h("text", { key: topValue.value + 'text', y: topValue.yText, x: topValue.xText, class: "calendarTopText" }, topValue.value)))), this.currentDateIndicator && (
         // current date indicator
-        h("circle", { key: '40cca30be82870be76d4ceaba428bf91bca3d515', fill: this.currentDateIndicator.color, cx: this.currentDateIndicator.x + 2.5, cy: this.headerHeight - 8, r: "8" })))));
+        h("circle", { key: '8a301e27afb5737f85421156a63ce577096846a7', fill: this.currentDateIndicator.color, cx: this.currentDateIndicator.x + 2.5, cy: this.headerHeight - 8, r: "8" })))));
     }
     static get is() { return "kup-gantt-calendar"; }
     static get originalStyleUrls() {

package/dist/collection/components/kup-planner/utils/kup-grid-renderer/kup-grid-renderer.js

@@ -509,13 +509,13 @@ export class KupGridRenderer {
             // }
             tickX += this.columnWidth;
         }
-        return (h("svg", { key: '15d6401730e0f2fa9fef8b9d25d0fad2f9c80e62', xmlns: "http://www.w3.org/2000/svg", width: this.gridProps.svgWidth, height: `${this.rowHeight * this.tasks.length}px`, "font-family": this.fontFamily, ref: (el) => (this.svg = el) }, h("g", { key: '8457770216910c3ac143ef21abaf8ac3af292d80', class: "grid" }, h("g", { key: 'eb4fa2b2561b38678bd76652c4b29257c83e9673', class: "rows" }, gridRows), h("g", { key: '467972ed8379d0d81f9cd093f5290426551da51a', class: "rowLines" }, rowLines), h("g", { key: '0a3e0808f240aacc430a462281defa95f0490542', class: "ticks" }, ticks)), h("g", { key: '46e17c947f42fad3546158f68d27177c5ddf11cb', class: "content" }, this.currentDateIndicator && (h("rect", { key: '4c4674f8d1137b3fb7f71e7321975ce35e677af4', fill: this.currentDateIndicator.color, x: this.currentDateIndicator.x + 1.5, y: "0", width: "2", height: "100%" })), this.projection && (h("rect", { key: 'b7c01acefae65d8ecf48c6a5c949bc3a3fea8e0c', fill: this.projection.color, x: this.projection.x0, y: "0", width: this.projection.xf - this.projection.x0, height: "100%", "fill-opacity": "0.35" })), h("g", { key: '04d8f68e95536914c109b253dc5c3e12f60f975b', class: "arrows", fill: this.arrowColor, stroke: this.arrowColor }, this.tasks.map((task) => {
+        return (h("svg", { key: '380a83d730b9c011e576a588f689e88bf6bd1814', xmlns: "http://www.w3.org/2000/svg", width: this.gridProps.svgWidth, height: `${this.rowHeight * this.tasks.length}px`, "font-family": this.fontFamily, ref: (el) => (this.svg = el) }, h("g", { key: 'a9a83e3ec574b36a1ce9d012f6f1e13bffe8eed5', class: "grid" }, h("g", { key: '10d5b31ee258f91aac82ce3dc441871f57fe76f6', class: "rows" }, gridRows), h("g", { key: 'ddae99458fa1c0ce5b96ac9846bfb167d0f6d7a5', class: "rowLines" }, rowLines), h("g", { key: '3a30ca604d25216ecfcea251bced32d9ac211932', class: "ticks" }, ticks)), h("g", { key: '46d90e500351f11ffda906eb5c31fea195cc0223', class: "content" }, this.currentDateIndicator && (h("rect", { key: '167a7fa6be1cccaea4d57a2c687a0628e91c00d7', fill: this.currentDateIndicator.color, x: this.currentDateIndicator.x + 1.5, y: "0", width: "2", height: "100%" })), this.projection && (h("rect", { key: '310e6996cddec5650662b08289bb42c1715dcba5', fill: this.projection.color, x: this.projection.x0, y: "0", width: this.projection.xf - this.projection.x0, height: "100%", "fill-opacity": "0.35" })), h("g", { key: '48d1b6330012fc1cb1bbdd87a25afc9e3e868867', class: "arrows", fill: this.arrowColor, stroke: this.arrowColor }, this.tasks.map((task) => {
             return task.barChildren.map((child) => {
                 if (task.type !== 'timeline') {
                     this.renderKupArrow(task, child);
                 }
             });
-        })), h("g", { key: 'e5824ca36bfb53ad9a52cfcac9507c91b86b7c43', class: "bar", "font-family": this.fontFamily, "font-size": this.fontSize }, this.tasks.map((task) => {
+        })), h("g", { key: '92d9c57208504e793e94742c5d0a718b2a1ffa5e', class: "bar", "font-family": this.fontFamily, "font-size": this.fontSize }, this.tasks.map((task) => {
             const forbidResize = task.type === 'project';
             return (h("g", { onKeyDown: (e) => {
                     switch (e.key) {
@@ -575,7 +575,7 @@ export class KupGridRenderer {
                         return this.renderKupBar(task, props.isSelected, isDateResizable, isProgressChangeable);
                 }
             })()));
-        }), this.currentTarget && this.ganttEvent.changedTask && (h("g", { key: 'f970fe6a4ac6e192f5fc012f39a027866fdfa6cf', class: "task-wrapper" }, this.renderKupBar(this.ganttEvent.changedTask, false, false, false)))))));
+        }), this.currentTarget && this.ganttEvent.changedTask && (h("g", { key: 'e42b2b38135aab0c22be661f29774c02341c3f87', class: "task-wrapper" }, this.renderKupBar(this.ganttEvent.changedTask, false, false, false)))))));
     }
     static get is() { return "kup-grid-renderer"; }
     static get originalStyleUrls() {

package/dist/collection/components/kup-planner/utils/kup-horizontal-scroll/kup-horizontal-scroll.js

@@ -53,20 +53,20 @@ export class HorizontalScroll {
         var _a, _b;
         const w = (_b = ((_a = this.taskListTrueRef) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) + 24 * 1.5) !== null && _b !== void 0 ? _b : 0; // 24 * 2 is the sum of padding and margin for both list and gantt, multiplied by 1.5 cause we need to add the other half to the right
         const width = +this.listCellWidth.replace('px', '');
-        return (h(Fragment, { key: 'a1de0371e5f6db61fa0d2cfdd4f2072799d490f3' }, h("div", { key: 'eaa300f7e8ccc68935482c59022ed81027c2eb62', class: "scroll-container" }, this.scrollableTaskList &&
-            this.taskListScrollWidth > width && (h("div", { key: '234a646226e466d2d629afa3eb223676f1c4c291', dir: "ltr", style: {
+        return (h(Fragment, { key: '1cb5cc72c0e08db314e6ead1a39180e6a20ed6f9' }, h("div", { key: 'da412f0efab8374f0bbc7cf4ab125d7e113543ee', class: "scroll-container" }, this.scrollableTaskList &&
+            this.taskListScrollWidth > width && (h("div", { key: '40344cef778d4b9051cf1d321b7b49e82e3bb35c', dir: "ltr", style: {
                 margin: this.rtl
                     ? `0px 20px 0px 20px`
                     : `0px 20px 0px 20px`,
                 maxWidth: `${width + 20}px`,
                 minWidth: `${width + 20}px`,
-            }, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalTaskListScroll }, h("div", { key: '8fc96a9408d05d7e6106de2e37cdc5c97966aaab', style: {
+            }, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalTaskListScroll }, h("div", { key: 'f39845955cc68e1900c597bc13966e2daf6e336c', style: {
                 width: `${this.taskListScrollWidth}px`,
-            }, class: "scroll" }))), h("div", { key: '6246de0f7f602ee5de894d14dd1b06a13beb3ad1', dir: "ltr", style: {
+            }, class: "scroll" }))), h("div", { key: '8aa6d6fbbd7fea960479851a816d93b31c971269', dir: "ltr", style: {
                 margin: this.rtl
                     ? `0px ${this.scrollableTaskList && this.taskListScrollWidth > width ? 40 : w}px 0px 12px`
                     : `0px 12px 0px ${this.scrollableTaskList && this.taskListScrollWidth > width ? 40 : w}px`,
-            }, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalScroll }, h("div", { key: '356cb5a2da83d6811866404b19ac02d917edc065', style: { width: `${this.svgWidth}px` }, class: "scroll" })))));
+            }, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalScroll }, h("div", { key: 'd0502cab3f7a0e3cb145f903b4ce5c708ec5917e', style: { width: `${this.svgWidth}px` }, class: "scroll" })))));
     }
     static get is() { return "kup-horizontal-scroll"; }
     static get encapsulation() { return "shadow"; }