@sme.up/ketchup 9.6.6 → 9.6.7

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

@@ -264,14 +264,16 @@ export class KupBox {
         return sortByArray;
     }
     checkScrollOnHover() {
-        if (!this.kupManager.scrollOnHover.isRegistered(this.boxContainer)) {
-            if (this.scrollOnHover) {
-                this.kupManager.scrollOnHover.register(this.boxContainer);
+        if (this.boxContainer) {
+            if (!this.kupManager.scrollOnHover.isRegistered(this.boxContainer)) {
+                if (this.scrollOnHover) {
+                    this.kupManager.scrollOnHover.register(this.boxContainer);
+                }
             }
-        }
-        else {
-            if (!this.scrollOnHover) {
-                this.kupManager.scrollOnHover.unregister(this.boxContainer);
+            else {
+                if (!this.scrollOnHover) {
+                    this.kupManager.scrollOnHover.unregister(this.boxContainer);
+                }
             }
         }
     }
@@ -782,7 +784,11 @@ export class KupBox {
             column: !horizontal,
         };
         const rowStyle = row.style || {};
-        return (h("div", { class: "box-wrapper", style: rowStyle, ref: (el) => __classPrivateFieldGet(this, _KupBox_rowsRefs, "f").push(el) }, h("div", { class: boxClass, "data-row": row, ref: (el) => this.rowsRefs.push(el) }, multiSel, boxContent, badges), rowObject));
+        return (h("div", { class: "box-wrapper", style: rowStyle, ref: (el) => {
+                if (el) {
+                    __classPrivateFieldGet(this, _KupBox_rowsRefs, "f").push(el);
+                }
+            } }, h("div", { class: boxClass, "data-row": row, ref: (el) => this.rowsRefs.push(el) }, multiSel, boxContent, badges), rowObject));
     }
     renderSection(section, parent, row, visibleColumns) {
         let sectionContent = null;
@@ -1184,6 +1190,7 @@ export class KupBox {
         this.kupManager.debug.logRender(this, true);
     }
     render() {
+        __classPrivateFieldSet(this, _KupBox_rowsRefs, [], "f");
         const isKanban = !!(typeof this.kanban === 'object' && this.kanban !== null);
         let sortPanel = null;
         if (this.sortEnabled) {

package/dist/collection/components/kup-editor/kup-editor-declarations.js

@@ -9,6 +9,7 @@ export 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.";

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

@@ -49,6 +49,7 @@ export class KupEditor {
         this.initialValue = '';
         this.isReadOnly = false;
         this.previewStyle = 'vertical';
+        this.selectedTab = 'write';
         this.showSaveButton = true;
         this.showToolbar = true;
     }
@@ -69,7 +70,14 @@ export class KupEditor {
         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);
         }
     }
@@ -108,6 +116,13 @@ export class KupEditor {
         }
         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();
@@ -289,6 +304,15 @@ export class KupEditor {
     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: [
@@ -363,7 +387,7 @@ export class KupEditor {
         __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);
@@ -509,6 +533,33 @@ export class KupEditor {
                 "reflect": false,
                 "defaultValue": "'vertical'"
             },
+            "selectedTab": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupEditorSelectedTab",
+                    "resolved": "\"preview\" | \"write\"",
+                    "references": {
+                        "KupEditorSelectedTab": {
+                            "location": "import",
+                            "path": "./kup-editor-declarations",
+                            "id": "src/components/kup-editor/kup-editor-declarations.ts::KupEditorSelectedTab"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'write'"
+                        }],
+                    "text": "The markdown editor selected tab."
+                },
+                "attribute": "selected-tab",
+                "reflect": false,
+                "defaultValue": "'write'"
+            },
             "showSaveButton": {
                 "type": "boolean",
                 "mutable": false,
@@ -759,6 +810,9 @@ export class KupEditor {
             }, {
                 "propName": "previewStyle",
                 "methodName": "onPreviewStyleChanged"
+            }, {
+                "propName": "selectedTab",
+                "methodName": "onMarkdownPreviewTabChanged"
             }, {
                 "propName": "showSaveButton",
                 "methodName": "onShowSaveButtonChanged"

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

@@ -23,6 +23,7 @@ export class KupImage {
         this.data = null;
         this.feedback = false;
         this.isCanvas = false;
+        this.placeholderResource = '';
         this.resource = null;
         this.sizeX = '100%';
         this.sizeY = '100%';
@@ -116,6 +117,7 @@ export class KupImage {
             color: this.color,
             data: this.data,
             fit: this.rootElement.classList.contains('kup-fit') ? true : false,
+            placeholderResource: this.placeholderResource,
             resource: this.resource,
             sizeX: this.sizeX,
             sizeY: this.sizeY,
@@ -300,6 +302,27 @@ export class KupImage {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "placeholderResource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"\""
+                        }],
+                    "text": "An SVG that will be displayed until the image is loaded."
+                },
+                "attribute": "placeholder-resource",
+                "reflect": false,
+                "defaultValue": "''"
+            },
             "resource": {
                 "type": "string",
                 "mutable": false,

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

@@ -153,6 +153,7 @@
   overflow: auto;
   padding: var(--kup_input_panel_padding);
   position: relative;
+  gap: 2rem;
 }
 :host .input-panel--column {
   flex-direction: column;
@@ -160,10 +161,21 @@
 :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;
 }

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

@@ -14,7 +14,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _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;
 import { Host, forceUpdate, h, } from "@stencil/core";
 import { FButton } from "../../f-components/f-button/f-button";
 import { FCell } from "../../f-components/f-cell/f-cell";
@@ -40,6 +40,14 @@ export class KupInputPanel {
             ['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;
@@ -53,8 +61,12 @@ export class KupInputPanel {
     /*                  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);
     }
@@ -98,22 +110,6 @@ export class KupInputPanel {
     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);
@@ -135,7 +131,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: '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);
@@ -255,7 +251,7 @@ export class KupInputPanel {
                 "mutable": false,
                 "complexType": {
                     "original": "InputPanelOptionsHandler",
-                    "resolved": "(fun: string) => Promise<GenericObject>",
+                    "resolved": "(fun: string, inputValue: string, currentState: KupInputPanelData) => Promise<GenericObject>",
                     "references": {
                         "InputPanelOptionsHandler": {
                             "location": "import",
@@ -396,7 +392,7 @@ export class KupInputPanel {
             }];
     }
 }
-_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;
@@ -425,11 +421,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 = [];
@@ -484,7 +493,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 }];
@@ -532,7 +541,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);
@@ -579,7 +588,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': {
@@ -592,19 +601,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) {
@@ -666,4 +685,15 @@ _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();
+    });
 };

package/dist/collection/f-components/f-image/f-image.js

@@ -3,6 +3,9 @@ import { getAssetPath, h } from "@stencil/core";
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
+let img;
+let placeholder;
+const HIDDEN_CLASS = 'f-image__hidden';
 export const FImage = (props) => {
     let el;
     let style;
@@ -21,7 +24,7 @@ export 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) {
@@ -37,32 +40,51 @@ export const FImage = (props) => {
             badgeCollection.push(h("kup-badge", Object.assign({}, props.badgeData[index])));
         }
     }
-    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 }), el, ...badgeCollection));
+    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/components/kup-autocomplete2.js

@@ -1115,6 +1115,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;
@@ -1133,7 +1136,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) {
@@ -1150,33 +1153,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 = [];
@@ -18078,6 +18101,7 @@ const KupImage = /*@__PURE__*/ proxyCustomElement(class KupImage extends HTMLEle
         this.data = null;
         this.feedback = false;
         this.isCanvas = false;
+        this.placeholderResource = '';
         this.resource = null;
         this.sizeX = '100%';
         this.sizeY = '100%';
@@ -18171,6 +18195,7 @@ const KupImage = /*@__PURE__*/ proxyCustomElement(class KupImage extends HTMLEle
             color: this.color,
             data: this.data,
             fit: this.rootElement.classList.contains('kup-fit') ? true : false,
+            placeholderResource: this.placeholderResource,
             resource: this.resource,
             sizeX: this.sizeX,
             sizeY: this.sizeY,
@@ -18213,6 +18238,7 @@ const KupImage = /*@__PURE__*/ proxyCustomElement(class KupImage extends HTMLEle
         "data": [16],
         "feedback": [4],
         "isCanvas": [4, "is-canvas"],
+        "placeholderResource": [1, "placeholder-resource"],
         "resource": [1],
         "sizeX": [1, "size-x"],
         "sizeY": [1, "size-y"],

package/dist/components/kup-box2.js

@@ -327,14 +327,16 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends HTMLElement
         return sortByArray;
     }
     checkScrollOnHover() {
-        if (!this.kupManager.scrollOnHover.isRegistered(this.boxContainer)) {
-            if (this.scrollOnHover) {
-                this.kupManager.scrollOnHover.register(this.boxContainer);
+        if (this.boxContainer) {
+            if (!this.kupManager.scrollOnHover.isRegistered(this.boxContainer)) {
+                if (this.scrollOnHover) {
+                    this.kupManager.scrollOnHover.register(this.boxContainer);
+                }
             }
-        }
-        else {
-            if (!this.scrollOnHover) {
-                this.kupManager.scrollOnHover.unregister(this.boxContainer);
+            else {
+                if (!this.scrollOnHover) {
+                    this.kupManager.scrollOnHover.unregister(this.boxContainer);
+                }
             }
         }
     }
@@ -843,7 +845,11 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends HTMLElement
             column: !horizontal,
         };
         const rowStyle = row.style || {};
-        return (h("div", { class: "box-wrapper", style: rowStyle, ref: (el) => __classPrivateFieldGet(this, _KupBox_rowsRefs, "f").push(el) }, h("div", { class: boxClass, "data-row": row, ref: (el) => this.rowsRefs.push(el) }, multiSel, boxContent, badges), rowObject));
+        return (h("div", { class: "box-wrapper", style: rowStyle, ref: (el) => {
+                if (el) {
+                    __classPrivateFieldGet(this, _KupBox_rowsRefs, "f").push(el);
+                }
+            } }, h("div", { class: boxClass, "data-row": row, ref: (el) => this.rowsRefs.push(el) }, multiSel, boxContent, badges), rowObject));
     }
     renderSection(section, parent, row, visibleColumns) {
         let sectionContent = null;
@@ -1245,6 +1251,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends HTMLElement
         this.kupManager.debug.logRender(this, true);
     }
     render() {
+        __classPrivateFieldSet(this, _KupBox_rowsRefs, [], "f");
         const isKanban = !!(typeof this.kanban === 'object' && this.kanban !== null);
         let sortPanel = null;
         if (this.sortEnabled) {