@sme.up/ketchup 9.6.6 → 9.6.7

package/dist/components/kup-editor.js

@@ -39121,6 +39121,7 @@ var KupEditorProps;
     KupEditorProps["initialEditType"] = "Initializes editor with the specified editor type. Suported values: \"markdown\", \"wysiwyg\".";
     KupEditorProps["initialValue"] = "Initializes editor with the specified string.";
     KupEditorProps["isReadOnly"] = "Defaults at false. When set, When set, the editor\u2019s content can\u2019t be changed..";
+    KupEditorProps["selectedTab"] = "Sets the markdown editor with the specified tab. Supported values: \"preview\", \"write\".";
     KupEditorProps["previewStyle"] = "Initializes editor with the specified preview type. Suported values: \"tab\", \"vertical\".";
     KupEditorProps["showSaveButton"] = "When set, a save button shown in the editor\u2019s toolbar.";
     KupEditorProps["showToolbar"] = "When set to false, the toolbar will not be shown.";
@@ -45920,6 +45921,7 @@ const KupEditor$1 = /*@__PURE__*/ proxyCustomElement(class KupEditor extends HTM
         this.initialValue = '';
         this.isReadOnly = false;
         this.previewStyle = 'vertical';
+        this.selectedTab = 'write';
         this.showSaveButton = true;
         this.showToolbar = true;
     }
@@ -45940,7 +45942,14 @@ const KupEditor$1 = /*@__PURE__*/ proxyCustomElement(class KupEditor extends HTM
         if (this.editor) {
             // to give focus to editor
             setTimeout(() => {
-                this.editor && this.editor.moveCursorToStart();
+                if (this.editor) {
+                    this.editor.moveCursorToStart();
+                    if (this.initialEditType === 'markdown' &&
+                        this.previewStyle === 'tab' &&
+                        this.selectedTab === 'preview') {
+                        this.updateMarkDownPreviewTab();
+                    }
+                }
             }, 100);
         }
     }
@@ -45979,6 +45988,13 @@ const KupEditor$1 = /*@__PURE__*/ proxyCustomElement(class KupEditor extends HTM
         }
         this.updateToolbarVisiblity();
     }
+    onMarkdownPreviewTabChanged() {
+        if ((this.initialEditType != 'markdown' &&
+            this.previewStyle != 'tab') ||
+            !this.editor)
+            return;
+        this.updateMarkDownPreviewTab();
+    }
     onShowSaveButtonChanged() {
         if (this.editor) {
             const toolbar = this.editor.getUI().getToolbar();
@@ -46160,6 +46176,15 @@ const KupEditor$1 = /*@__PURE__*/ proxyCustomElement(class KupEditor extends HTM
     onEditorAutoSave() {
         this.kupAutoSave.emit(this.getSaveAndAutoSaveProps());
     }
+    updateMarkDownPreviewTab() {
+        const tabSection = this.rootElement.querySelector('.te-markdown-tab-section');
+        if (!tabSection)
+            return;
+        this.selectedTab === 'preview' &&
+            tabSection.querySelector('button:last-child').click();
+        this.selectedTab === 'write' &&
+            tabSection.querySelector('button').click();
+    }
     getToolBarWithSaveButton(includeDefaultItems = true) {
         const options = {
             toolbarItems: [
@@ -46234,7 +46259,7 @@ const KupEditor$1 = /*@__PURE__*/ proxyCustomElement(class KupEditor extends HTM
         __classPrivateFieldGet(this, _KupEditor_kupManager, "f").debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: '3f805266152bcfa247db425e76489a602ba8195e' }, h("div", { key: '6393c5d731d432d926a755573e1087dfa453465b', id: componentWrapperId }, h("div", { key: this.rootElement.id, ref: (el) => (this.editorRef = el), class: "kup-editor" }))));
+        return (h(Host, { key: 'f414260cec0a8190bdd9f5958d7eef3199866068' }, h("div", { key: '285a3de0a62a09bac44d88a949f33d415ca433b6', id: componentWrapperId }, h("div", { key: this.rootElement.id, ref: (el) => (this.editorRef = el), class: "kup-editor" }))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupEditor_kupManager, "f").theme.unregister(this);
@@ -46247,6 +46272,7 @@ const KupEditor$1 = /*@__PURE__*/ proxyCustomElement(class KupEditor extends HTM
         "initialEditType": ["onInitialEditTypeChanged"],
         "isReadOnly": ["onIsReadOnlyChanged"],
         "previewStyle": ["onPreviewStyleChanged"],
+        "selectedTab": ["onMarkdownPreviewTabChanged"],
         "showSaveButton": ["onShowSaveButtonChanged"],
         "showToolbar": ["onShowToolBarChanged"],
         "autosaveTimer": ["onAutosaveTimerChanged"]
@@ -46258,6 +46284,7 @@ const KupEditor$1 = /*@__PURE__*/ proxyCustomElement(class KupEditor extends HTM
         "initialValue": [1, "initial-value"],
         "isReadOnly": [4, "is-read-only"],
         "previewStyle": [1, "preview-style"],
+        "selectedTab": [1, "selected-tab"],
         "showSaveButton": [4, "show-save-button"],
         "showToolbar": [4, "show-toolbar"],
         "editor": [32],
@@ -46274,6 +46301,7 @@ const KupEditor$1 = /*@__PURE__*/ proxyCustomElement(class KupEditor extends HTM
         "initialEditType": ["onInitialEditTypeChanged"],
         "isReadOnly": ["onIsReadOnlyChanged"],
         "previewStyle": ["onPreviewStyleChanged"],
+        "selectedTab": ["onMarkdownPreviewTabChanged"],
         "showSaveButton": ["onShowSaveButtonChanged"],
         "showToolbar": ["onShowToolBarChanged"],
         "autosaveTimer": ["onAutosaveTimerChanged"]

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { N as FTextFieldMDC, c as componentWrapperId, R as FButton, J as FCell, d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, e as defineCustomElement$5, f as defineCustomElement$6, g as defineCustomElement$7, h as defineCustomElement$8, i as defineCustomElement$9, j as defineCustomElement$a, k as defineCustomElement$b, l as defineCustomElement$c, m as defineCustomElement$d, n as defineCustomElement$e, o as defineCustomElement$f, p as defineCustomElement$g, q as defineCustomElement$h, r as defineCustomElement$i, s as defineCustomElement$j, t as defineCustomElement$k, u as defineCustomElement$l, v as defineCustomElement$m, w as defineCustomElement$n, x as defineCustomElement$o, y as defineCustomElement$p, z as defineCustomElement$q, A as defineCustomElement$r, B as defineCustomElement$s } from './kup-autocomplete2.js';
-import { k as kupManagerInstance, g as getProps, s as setProps, c as KupLanguageGeneric, F as FCellTypes } from './kup-manager.js';
+import { k as kupManagerInstance, F as FCellTypes, g as getProps, s as setProps, c as KupLanguageGeneric } from './kup-manager.js';
 
 var KupInputPanelProps;
 (function (KupInputPanelProps) {
@@ -11,7 +11,7 @@ var KupInputPanelProps;
     KupInputPanelProps["optionsHandler"] = "Sets the callback function to recieve options";
 })(KupInputPanelProps || (KupInputPanelProps = {}));
 
-const kupInputPanelCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_input_panel_background_color:var(--kup-input-panel-background-color,\n      var(--kup-background-color));--kup_input_panel_color:var(--kup-input-panel-color, var(--kup-text-color));--kup_input_panel_font_family:var(--kup-input-panel-font-family, var(--kup-font-family));--kup_input_panel_font_size:var(--kup-input-panel-font-size, var(--kup-font-size));--kup_input_panel_label_alignment:var(--kup-input-panel-label-alignment);--kup_input_panel_label_width:var(--kup-input-panel-label-width);--kup_input_panel_padding:var(--kup-input-panel-padding, 1em 0)}:host .input-panel{background:var(--kup_input_panel_background_color);color:var(--kup_input_panel_color);display:flex;flex-grow:1;overflow:auto;padding:var(--kup_input_panel_padding);position:relative}:host .input-panel--column{flex-direction:column}:host .input-panel__section{display:grid}:host .input-panel__horizontal-section{display:inline-grid}:host .input-panel .f-cell .f-checkbox .checkbox .checkbox__native-control{height:40px;width:40px}";
+const kupInputPanelCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_input_panel_background_color:var(--kup-input-panel-background-color,\n      var(--kup-background-color));--kup_input_panel_color:var(--kup-input-panel-color, var(--kup-text-color));--kup_input_panel_font_family:var(--kup-input-panel-font-family, var(--kup-font-family));--kup_input_panel_font_size:var(--kup-input-panel-font-size, var(--kup-font-size));--kup_input_panel_label_alignment:var(--kup-input-panel-label-alignment);--kup_input_panel_label_width:var(--kup-input-panel-label-width);--kup_input_panel_padding:var(--kup-input-panel-padding, 1em 0)}:host .input-panel{background:var(--kup_input_panel_background_color);color:var(--kup_input_panel_color);display:flex;flex-grow:1;overflow:auto;padding:var(--kup_input_panel_padding);position:relative;gap:2rem}:host .input-panel--column{flex-direction:column}:host .input-panel__section{display:grid}:host .input-panel__section .f-cell__content>*{width:100%}:host .input-panel__horizontal-section{display:inline-grid}:host .input-panel .f-cell .f-checkbox .checkbox .checkbox__native-control{height:40px;width:40px}:host .input-panel__label_container{display:flex;flex-direction:column;justify-content:center}:host .input-panel__label_container>.f-cell{flex:1}";
 const KupInputPanelStyle0 = kupInputPanelCss;
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
@@ -30,7 +30,7 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         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 _KupInputPanel_instances, _KupInputPanel_kupManager, _KupInputPanel_optionsAdapterMap, _KupInputPanel_originalData, _KupInputPanel_renderRow, _KupInputPanel_renderCell, _KupInputPanel_renderSection, _KupInputPanel_renderField, _KupInputPanel_mapCells, _KupInputPanel_reverseMapCells, _KupInputPanel_mapData, _KupInputPanel_slotData, _KupInputPanel_CHIAdapter, _KupInputPanel_GRAAdapter, _KupInputPanel_BTNAdapter, _KupInputPanel_CMBandACPAdapter, _KupInputPanel_CHKAdapter, _KupInputPanel_CLPAdapter, _KupInputPanel_ITXAdapter, _KupInputPanel_RADAdapter, _KupInputPanel_optionsTreeComboAdapter, _KupInputPanel_treeOptionsNodeAdapter, _KupInputPanel_tableOptionsAdapter;
+var _KupInputPanel_instances, _KupInputPanel_kupManager, _KupInputPanel_optionsAdapterMap, _KupInputPanel_originalData, _KupInputPanel_eventNames, _KupInputPanel_listeners, _KupInputPanel_renderRow, _KupInputPanel_renderCell, _KupInputPanel_getLabelComponent, _KupInputPanel_renderSection, _KupInputPanel_renderField, _KupInputPanel_mapCells, _KupInputPanel_reverseMapCells, _KupInputPanel_mapData, _KupInputPanel_slotData, _KupInputPanel_CHIAdapter, _KupInputPanel_GRAAdapter, _KupInputPanel_BTNAdapter, _KupInputPanel_CMBandACPAdapter, _KupInputPanel_CHKAdapter, _KupInputPanel_CLPAdapter, _KupInputPanel_ITXAdapter, _KupInputPanel_RADAdapter, _KupInputPanel_optionsTreeComboAdapter, _KupInputPanel_treeOptionsNodeAdapter, _KupInputPanel_tableOptionsAdapter, _KupInputPanel_getAutocompleteEventCallback;
 const dom = document.documentElement;
 const KupInputPanel$1 = /*@__PURE__*/ proxyCustomElement(class KupInputPanel extends HTMLElement {
     constructor() {
@@ -50,6 +50,14 @@ const KupInputPanel$1 = /*@__PURE__*/ proxyCustomElement(class KupInputPanel ext
             ['SmeupTable', __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_tableOptionsAdapter).bind(this)],
         ]));
         _KupInputPanel_originalData.set(this, null);
+        _KupInputPanel_eventNames.set(this, new Map([
+            [
+                FCellTypes.AUTOCOMPLETE,
+                ['kup-autocomplete-input', 'kup-autocomplete-iconclick'],
+            ],
+            [FCellTypes.COMBOBOX, ['kup-combobox-iconclick']],
+        ]));
+        _KupInputPanel_listeners.set(this, []);
         this.customStyle = '';
         this.data = null;
         this.hiddenSubmitButton = false;
@@ -63,8 +71,12 @@ const KupInputPanel$1 = /*@__PURE__*/ proxyCustomElement(class KupInputPanel ext
     /*                  W a t c h e r s                */
     /*-------------------------------------------------*/
     onDataChanged() {
-        if (!__classPrivateFieldGet(this, _KupInputPanel_originalData, "f")) {
-            __classPrivateFieldSet(this, _KupInputPanel_originalData, structuredClone(this.data), "f");
+        __classPrivateFieldSet(this, _KupInputPanel_originalData, structuredClone(this.data), "f");
+        if (__classPrivateFieldGet(this, _KupInputPanel_listeners, "f").length) {
+            __classPrivateFieldGet(this, _KupInputPanel_listeners, "f").map(({ event, handler }) => {
+                this.rootElement.removeEventListener(event, handler);
+            });
+            __classPrivateFieldSet(this, _KupInputPanel_listeners, [], "f");
         }
         __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_mapCells).call(this, this.data);
     }
@@ -108,22 +120,6 @@ const KupInputPanel$1 = /*@__PURE__*/ proxyCustomElement(class KupInputPanel ext
     componentDidLoad() {
         this.kupReady.emit({ comp: this, id: this.rootElement.id });
         __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").debug.logLoad(this, true);
-        // this.handleEventsCallbacks.map((cbData) => {
-        //     this.rootElement.addEventListener(cbData.eventName, (e: any) => {
-        //         const inputPanelEvent: InputPanelEvent = {
-        //             state: this.inputPanelCells.find((data) =>
-        //                 data.cells.find(
-        //                     (cell) => cell.column.name === e.detail.id
-        //                 )
-        //             ).cells,
-        //             data: {
-        //                 field: e.detail.id,
-        //                 value: e.detail.inputValue || e.detail.value,
-        //             },
-        //         };
-        //         cbData.eventCallback(inputPanelEvent);
-        //     });
-        // });
     }
     componentWillRender() {
         __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").debug.logRender(this, false);
@@ -145,7 +141,7 @@ const KupInputPanel$1 = /*@__PURE__*/ proxyCustomElement(class KupInputPanel ext
                 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: '6e78872e9b75498a6655f27837c5f1288578572b' }, h("style", { key: '6afe29e3990b45067aac30c0f11c98d9cd7948c2' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'c525883822492dfb322153c8f8a25470b370ad5c', id: componentWrapperId }, inputPanelContent)));
+        return (h(Host, { key: 'ae9e00db322fcda0ee1f996c5ba7f92d337ab03c' }, h("style", { key: '0aea3b4b3c388f5887a5440d05a7cafa1f1c24aa' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '181bc90607f56adf9b5ee12f0716693ed425cd88', id: componentWrapperId }, inputPanelContent)));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.unregister(this);
@@ -169,7 +165,7 @@ const KupInputPanel$1 = /*@__PURE__*/ proxyCustomElement(class KupInputPanel ext
     }, undefined, {
         "data": ["onDataChanged"]
     }]);
-_KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_optionsAdapterMap = new WeakMap(), _KupInputPanel_originalData = new WeakMap(), _KupInputPanel_instances = new WeakSet(), _KupInputPanel_renderRow = function _KupInputPanel_renderRow(inputPanelCell) {
+_KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_optionsAdapterMap = new WeakMap(), _KupInputPanel_originalData = new WeakMap(), _KupInputPanel_eventNames = new WeakMap(), _KupInputPanel_listeners = new WeakMap(), _KupInputPanel_instances = new WeakSet(), _KupInputPanel_renderRow = function _KupInputPanel_renderRow(inputPanelCell) {
     var _a;
     const layout = inputPanelCell.row.layout;
     const horizontal = (layout === null || layout === void 0 ? void 0 : layout.horizontal) || false;
@@ -198,11 +194,24 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_optionsAdapterMap = ne
         column,
         row,
         component: this,
-        editable: cell.isEditable,
+        editable: true,
         renderKup: true,
         setSizes: true,
     };
+    const label = __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getLabelComponent).call(this, cell, column.title);
+    if (label) {
+        return (h("div", { class: { 'input-panel__label_container': true } }, label, h(FCell, Object.assign({}, cellProps))));
+    }
     return h(FCell, Object.assign({}, cellProps));
+}, _KupInputPanel_getLabelComponent = function _KupInputPanel_getLabelComponent(cell, label) {
+    if (!label) {
+        return null;
+    }
+    const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);
+    if (cellType === FCellTypes.RADIO) {
+        return h("span", null, label);
+    }
+    return null;
 }, _KupInputPanel_renderSection = function _KupInputPanel_renderSection(cells, section) {
     var _a, _b, _c, _d;
     let content = [];
@@ -257,7 +266,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_optionsAdapterMap = ne
                 .filter((column) => column.visible)
                 .map((column) => {
                 const cell = structuredClone(row.cells[column.name]);
-                const mappedCell = Object.assign(Object.assign({}, cell), { data: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_mapData).call(this, cell, column)), { id: column.name }), slotData: __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_slotData).call(this, cell, column), isEditable: cell.editable });
+                const mappedCell = Object.assign(Object.assign({}, cell), { data: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_mapData).call(this, cell, column)), { disabled: !cell.editable, id: column.name }), slotData: __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_slotData).call(this, cell, column), isEditable: true });
                 return { column, cell: mappedCell };
             });
             return [...inpuPanelCells, { cells, row }];
@@ -305,7 +314,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_optionsAdapterMap = ne
     ]);
     const adapter = dataAdapterMap.get(cellType);
     return adapter
-        ? adapter(options, fieldLabel, currentValue, cell.fun)
+        ? adapter(options, fieldLabel, currentValue, cell, col.name)
         : null;
 }, _KupInputPanel_slotData = function _KupInputPanel_slotData(cell, col) {
     const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);
@@ -352,7 +361,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_optionsAdapterMap = ne
             { data: { dropdownOnly: false, label: 'Valerio' } },
         ],
     };
-}, _KupInputPanel_CMBandACPAdapter = function _KupInputPanel_CMBandACPAdapter(rawOptions, fieldLabel, currentValue, fun) {
+}, _KupInputPanel_CMBandACPAdapter = function _KupInputPanel_CMBandACPAdapter(rawOptions, fieldLabel, currentValue, cell, id) {
     const configCMandACP = {
         data: {
             'kup-text-field': {
@@ -365,19 +374,29 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_optionsAdapterMap = ne
                 data: [],
             },
         },
+        initialValue: currentValue,
         label: fieldLabel,
     };
-    const options = fun ? this.optionsHandler(fun) : rawOptions;
-    if (options instanceof Promise) {
-        options.then((data) => {
-            var _a;
-            return (configCMandACP.data['kup-list'].data =
-                (_a = __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_optionsTreeComboAdapter).call(this, data, currentValue)) !== null && _a !== void 0 ? _a : []);
+    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 (options) {
+    else if (rawOptions) {
         configCMandACP.data['kup-list'].data =
-            __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_optionsTreeComboAdapter).call(this, options, currentValue);
+            __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_optionsTreeComboAdapter).call(this, rawOptions, currentValue);
     }
     return configCMandACP;
 }, _KupInputPanel_CHKAdapter = function _KupInputPanel_CHKAdapter(_options, fieldLabel, currentValue) {
@@ -439,6 +458,17 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_optionsAdapterMap = ne
         }));
     })
         .flat();
+}, _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)).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 : [];
+        detail.comp.refresh();
+    });
 };
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/kup-manager.js

@@ -5777,7 +5777,7 @@ const fCheckboxCss$1 = fCheckboxCss;
 const fChipCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.f-chip{--kup_chip_background_color:var( --kup-chip-background-color, var(--kup-background-color) );--kup_chip_border_radius:var(--kup-chip-border-radius, 16px);--kup_chip_font_family:var(--kup-chip-font-family, var(--kup-font-family));--kup_chip_font_size:var(--kup-chip-font-size, var(--kup-font-size));--kup_chip_font_weight:var(--kup-chip-font-weight, var(--kup-font-weight));--kup_chip_height:var(--kup-chip-height, 32px);--kup_chip_indent_multiplier:var(--kup-chip-indent-multiplier, 10);--kup_chip_margin:var(--kup-chip-margin, 4px);--kup_chip_padding:var(--kup-chip-padding, 0 12px);--kup_chip_primary_color:var( --kup-chip-primary-color, var(--kup-primary-color) );--kup_chip_primary_color_rgb:var( --kup-chip-primary-color-rgb, var(--kup-primary-color-rgb) );--kup_chip_text_color:var(--kup-chip-text-color, var(--kup-text-color));--kup_chip_text_color_rgb:var( --kup-chip-text-color-rgb, var(--kup-text-color-rgb) );font-family:var(--kup_chip_font_family);font-size:var(--kup_chip_font_size)}.f-chip .chip-set{padding:4px;display:flex;flex-wrap:wrap;box-sizing:border-box}.f-chip .chip-set .chip-set__item{display:flex;flex-direction:column}.f-chip .chip-set .chip-set__wrapper{display:flex}.f-chip .chip-set .chip-set__wrapper .dropdown-icon{cursor:pointer;margin:auto 0;transform:rotate(180deg);transform-origin:unset}.f-chip .chip-set .chip-set__wrapper .dropdown-icon:hover{opacity:.75}.f-chip .chip-set .chip-set__wrapper--hidden-children .dropdown-icon{transform:unset}.f-chip .chip-set .chip-set__indent{width:calc(var(--kup_chip_margin)*var(--kup_chip_indent_offset)*var(--kup_chip_indent_multiplier))}.f-chip .chip-set .chip{align-items:center;background-color:var(--kup_chip_background_color);background-image:linear-gradient(to right, rgba(var(--kup_chip_text_color_rgb), 0.1) 0%, rgba(var(--kup_chip_text_color_rgb), 0.1) 0.1%, rgba(var(--kup_chip_text_color_rgb), 0.1));border-radius:var(--kup_chip_border_radius);border-width:0;box-sizing:border-box;color:var(--kup_chip_text_color);cursor:pointer;display:inline-flex;font-size:.875em;font-weight:var(--kup_chip_font_weight);height:var(--kup_chip_height);letter-spacing:0.0178571429em;margin:var(--kup_chip_margin);max-width:max-content;outline:none;padding:var(--kup_chip_padding);position:relative;text-decoration:inherit;text-transform:inherit}.f-chip .chip-set .chip .chip__icon--leading{color:var(--kup_chip_text_color)}.f-chip .chip-set .chip .chip__icon--leading:not(.chip__icon--leading-hidden){margin-left:-4px;margin-right:6px}.f-chip .chip-set .chip .chip__icon--leading .chip__icon--trailing{position:relative}.f-chip .chip-set .chip--only-icon .chip__icon.f-image{margin:0}.f-chip .chip-set .chip .chip__icon{border-radius:50%;outline:none;vertical-align:middle}.f-chip .chip-set .chip .chip__icon .chip_icon--leading:not(.chip__icon--leading-hidden){width:20px;height:20px;font-size:20px}.f-chip .chip-set .chip .chip__icon .f-image__icon{margin:auto;height:var(--kup_image_height, 100%);width:var(--kup_image_width, 100%)}.f-chip .chip-set .chip .chip__checkmark-svg{width:0;height:20px;transition:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.f-chip .chip-set .chip .chip__checkmark-path{transition:stroke-dashoffset 150ms 50ms cubic-bezier(0.4, 0, 0.6, 1);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.f-chip .chip-set .chip svg path{color:var(--kup_chip_text_color);stroke:var(--kup_chip_text_color)}.f-chip .chip-set .chip .kup-icon{background:var(--kup_chip_text_color);display:block;width:18px;height:18px}.f-chip .chip-set .chip .chip__primary-action{outline:none}.f-chip .chip-set .chip .chip__primary-action .chip__text{white-space:nowrap}.f-chip .chip-set.chip-set--choice .chip--selected{background-color:var(--kup_chip_background_color);background-image:linear-gradient(to right, rgba(var(--kup_chip_primary_color_rgb), 0.25) 0%, rgba(var(--kup_chip_primary_color_rgb), 0.25) 0.1%, rgba(var(--kup_chip_primary_color_rgb), 0.25));color:var(--kup_chip_primary_color)}.f-chip .chip-set.chip-set--filter .chip__icon--leading{opacity:1;transition:opacity 75ms linear;transition-delay:-50ms}.f-chip .chip-set.chip-set--filter .chip__icon--leading+.chip__checkmark{opacity:0;transition:opacity 75ms linear;transition-delay:80ms}.f-chip .chip-set.chip-set--filter .chip__icon--leading+.chip__checkmark .chip__checkmark-svg{transition:width 0ms}.f-chip .chip-set.chip-set--filter .chip__icon--leading.chip__icon--leading-hidden{display:none;width:0;opacity:0}.f-chip .chip-set.chip-set--filter .chip__icon--leading.chip__icon--leading-hidden+.chip__checkmark{height:20px;width:20px;opacity:1}.f-chip .chip-set.chip-set--filter .chip--selected .chip__icon--leading{opacity:0}.f-chip .chip-set.chip-set--filter .chip--selected .chip__checkmark-path{stroke-dashoffset:0}.f-chip .chip-set.chip-set--filter .chip--selected .chip__checkmark{margin-left:-4px;margin-right:4px}.f-chip .chip-set.chip-set--filter .chip--selected .chip__checkmark .chip__checkmark-svg{height:20px;width:20px}.f-chip .chip-set.chip-set--input .kup-clear-icon{margin-left:4px;margin-right:-4px}.f-chip .chip-set.chip-set--input .kup-clear-icon:hover{opacity:.75}.f-chip :not(svg){transform-origin:0px 0px}.f-chip.kup-danger{--kup-chip-primary-color:var(--kup-danger-color);--kup-chip-primary-color-rgb:var(--kup-danger-color-rgb)}.f-chip.kup-info{--kup-chip-primary-color:var(--kup-info-color);--kup-chip-primary-color-rgb:var(--kup-info-color-rgb)}.f-chip.kup-secondary{--kup-chip-primary-color:var(--kup-secondary-color);--kup-chip-primary-color-rgb:var(--kup-secondary-color-rgb)}.f-chip.kup-success{--kup-chip-primary-color:var(--kup-success-color);--kup-chip-primary-color-rgb:var(--kup-success-color-rgb)}.f-chip.kup-warning{--kup-chip-primary-color:var(--kup-warning-color);--kup-chip-primary-color-rgb:var(--kup-warning-color-rgb)}.f-chip .kup-icon.kup-dropdown-icon{-webkit-mask:var(--kup-dropdown-icon);mask:var(--kup-dropdown-icon);transition:opacity 125ms,transform .15s}.f-chip .kup-icon.kup-clear-icon{-webkit-mask:var(--kup-clear-icon);mask:var(--kup-clear-icon)}";
 const fChipCss$1 = fChipCss;
 
-const fImageCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.f-image{display:block;margin:auto;position:relative;height:var(--kup_image_height, 100%);width:var(--kup_image_width, 100%)}.f-image.kup-fit img{max-width:max-content;object-fit:contain}.f-image img{display:block;margin:auto;height:var(--kup_image_height, 100%);width:var(--kup_image_width, 100%)}.f-image .f-image__css{overflow:hidden;height:var(--kup_image_height, 100%);width:var(--kup_image_width, 100%)}.f-image .f-image__icon{margin:auto;height:var(--kup_image_height, 100%);width:var(--kup_image_width, 100%)}.f-image .css-step.bottom-aligned{bottom:0;position:absolute}";
+const fImageCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.f-image{display:block;margin:auto;position:relative;height:var(--kup_image_height, 100%);width:var(--kup_image_width, 100%)}.f-image.kup-fit img{max-width:max-content;object-fit:contain}.f-image img{display:block;margin:auto;height:var(--kup_image_height, 100%);width:var(--kup_image_width, 100%)}.f-image .f-image__css{overflow:hidden;height:var(--kup_image_height, 100%);width:var(--kup_image_width, 100%)}.f-image .f-image__icon{margin:auto;height:var(--kup_image_height, 100%);width:var(--kup_image_width, 100%)}.f-image .f-image__placeholder{height:100%;position:absolute;width:100%}.f-image .f-image__hidden{visibility:hidden}.f-image .css-step.bottom-aligned{bottom:0;position:absolute}";
 const fImageCss$1 = fImageCss;
 
 const fPaginatorCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.f-paginator{margin:.5em 0;display:flex;flex-wrap:wrap;align-items:start}.f-paginator .prev-page,.f-paginator .next-page{margin:0 .25em}.f-paginator kup-combobox{display:inline-block;margin:0 .25em;z-index:0}.f-paginator kup-combobox.page-selector{width:100px}.f-paginator kup-combobox.rows-selector{width:150px}";

package/dist/esm/{f-button-e63b4537.js → f-button-07a6ea71.js}

@@ -1,6 +1,6 @@
 import { h } from './index-95bb3410.js';
 import { F as FButtonStyling } from './f-button-declarations-9bdc6f26.js';
-import { F as FImage } from './f-image-20e217c8.js';
+import { F as FImage } from './f-image-46787842.js';
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */

package/dist/esm/{f-cell-262f3239.js → f-cell-819033de.js}

@@ -1,10 +1,10 @@
-import { a6 as editableTypes, a7 as kupTypes, c as KupThemeColorValues, a3 as FCellTypes, a8 as KupTagNames, F as FCellShapes, a9 as fullWidthFieldsComps, aa as FCellClasses, ab as autoCenterComps, ac as getCellValueForDisplay, ad as FCellEvents, d as KupDebugCategory } from './kup-manager-c974dda6.js';
+import { a6 as editableTypes, a7 as kupTypes, c as KupThemeColorValues, a3 as FCellTypes, a8 as KupTagNames, F as FCellShapes, a9 as fullWidthFieldsComps, aa as FCellClasses, ab as autoCenterComps, ac as getCellValueForDisplay, ad as FCellEvents, d as KupDebugCategory } from './kup-manager-7b151628.js';
 import { h, g as getAssetPath } from './index-95bb3410.js';
 import { F as FCheckbox } from './f-checkbox-61c142b8.js';
-import { F as FTextField } from './f-text-field-17075562.js';
-import { F as FImage } from './f-image-20e217c8.js';
-import { F as FChipType, a as FChip } from './f-chip-eaf517ff.js';
-import { F as FButton } from './f-button-e63b4537.js';
+import { F as FTextField } from './f-text-field-52de97f3.js';
+import { F as FImage } from './f-image-46787842.js';
+import { F as FChipType, a as FChip } from './f-chip-71ce7cab.js';
+import { F as FButton } from './f-button-07a6ea71.js';
 
 /**
  * Props of the kup-list component.

package/dist/esm/{f-chip-eaf517ff.js → f-chip-71ce7cab.js}

@@ -1,6 +1,6 @@
 import { h } from './index-95bb3410.js';
-import { F as FImage } from './f-image-20e217c8.js';
-import { a as KupThemeIconValues, l as KupLanguageGeneric, c as KupThemeColorValues } from './kup-manager-c974dda6.js';
+import { F as FImage } from './f-image-46787842.js';
+import { a as KupThemeIconValues, l as KupLanguageGeneric, c as KupThemeColorValues } from './kup-manager-7b151628.js';
 
 /**
  * Types of the f-chip component.

package/dist/esm/{f-image-20e217c8.js → f-image-46787842.js}

@@ -12,6 +12,9 @@ var FImageShape;
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
+let img;
+let placeholder;
+const HIDDEN_CLASS = 'f-image__hidden';
 const FImage = (props) => {
     let el;
     let style;
@@ -30,7 +33,7 @@ const FImage = (props) => {
                 '--kup_image_height': props.sizeY ? props.sizeY : '100%',
                 '--kup_image_width': props.sizeX ? props.sizeX : '100%',
             };
-            el = createIcon(props);
+            el = createIcon(props.resource, props.color);
         }
     }
     else if (props.data) {
@@ -47,33 +50,53 @@ const FImage = (props) => {
         }
     }
     return (h("div", Object.assign({ class: `f-image ${props.wrapperClass ? props.wrapperClass : ''} ` }, props.dataSet, { id: props.id, style: style, title: props.title, onClick: props.onClick }),
+        props.placeholderResource
+            ? createIcon(props.placeholderResource, props.color, 'f-image__placeholder ' + HIDDEN_CLASS)
+            : undefined,
         el,
         ...badgeCollection));
 };
 /*-------------------------------------------------*/
 /*                  M e t h o d s                  */
 /*-------------------------------------------------*/
-function createIcon(props) {
+function createIcon(icon, color, iconClass = 'f-image__icon') {
     const classObj = {
-        'f-image__icon': true,
+        [iconClass]: true,
     };
     const style = {
-        background: props.color ? props.color : `var(--kup-gray-color-70)`,
+        background: color ? color : `var(--kup-gray-color-70)`,
     };
-    if (props.resource.indexOf('--kup') > -1) {
-        let themeIcon = props.resource.replace('--', '');
+    if (icon.indexOf('--kup') > -1) {
+        let themeIcon = icon.replace('--', '');
         classObj['kup-icon'] = true;
         classObj[themeIcon] = true;
     }
     else {
-        const path = getAssetPath(`./assets/svg/${props.resource}.svg`);
+        const path = getAssetPath(`./assets/svg/${icon}.svg`);
         style.mask = `url('${path}') no-repeat center`;
         style.webkitMask = `url('${path}') no-repeat center`;
     }
-    return h("div", { class: classObj, style: style });
+    return (h("div", { class: classObj, ref: (el) => {
+            if (iconClass.indexOf('placeholder') > 1) {
+                placeholder = el;
+            }
+        }, style: style }));
 }
 function createImage(props) {
-    return h("img", { onLoad: props.onLoad, src: props.resource });
+    return (h("img", { class: props.placeholderResource ? HIDDEN_CLASS : '', onLoad: (e) => {
+            if (props.onLoad) {
+                props.onLoad(e);
+            }
+            if (placeholder) {
+                placeholder.classList.add(HIDDEN_CLASS);
+                img.classList.remove(HIDDEN_CLASS);
+            }
+        }, onError: () => {
+            if (placeholder) {
+                placeholder.classList.remove(HIDDEN_CLASS);
+                img.classList.add(HIDDEN_CLASS);
+            }
+        }, ref: (el) => (img = el), src: props.resource }));
 }
 function createBar(data) {
     const steps = [];

package/dist/esm/{f-paginator-utils-7ed775bd.js → f-paginator-utils-a8f895d1.js}

@@ -1,7 +1,7 @@
-import { B as Filters, E as FilterInterval, C as getValueForDisplay, A as getValueForDisplay2, ac as getCellValueForDisplay, u as getColumnByName, w as KupObjects, ae as KupData, af as compareCell, I as TotalMode, $ as SortMode, ag as KupLanguagePage, q as KupLanguageRow, l as KupLanguageGeneric } from './kup-manager-c974dda6.js';
+import { B as Filters, E as FilterInterval, C as getValueForDisplay, A as getValueForDisplay2, ac as getCellValueForDisplay, u as getColumnByName, w as KupObjects, ae as KupData, af as compareCell, I as TotalMode, $ as SortMode, ag as KupLanguagePage, q as KupLanguageRow, l as KupLanguageGeneric } from './kup-manager-7b151628.js';
 import { K as KupDatesFormats } from './kup-dates-26a56bf7.js';
 import { h } from './index-95bb3410.js';
-import { F as FButton } from './f-button-e63b4537.js';
+import { F as FButton } from './f-button-07a6ea71.js';
 import { F as FButtonStyling } from './f-button-declarations-9bdc6f26.js';
 
 /**

package/dist/esm/{f-text-field-17075562.js → f-text-field-52de97f3.js}

@@ -1,5 +1,5 @@
 import { h, g as getAssetPath } from './index-95bb3410.js';
-import { a as KupThemeIconValues } from './kup-manager-c974dda6.js';
+import { a as KupThemeIconValues } from './kup-manager-7b151628.js';
 
 const dom = document.documentElement;
 /*-------------------------------------------------*/

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { K as KupManager } from './kup-manager-c974dda6.js';
+import { K as KupManager } from './kup-manager-7b151628.js';
 import './kup-dates-26a56bf7.js';
 import './index-95bb3410.js';