@sme.up/ketchup 10.3.6 → 10.3.8

package/dist/collection/components/kup-file-upload/kup-file-upload.js

@@ -6,7 +6,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _KupFileUpload_instances, _KupFileUpload_kupManager, _KupFileUpload_previewMap, _KupFileUpload_handleClick, _KupFileUpload_handleFileChange, _KupFileUpload_handleFileRemove, _KupFileUpload_handleDrop, _KupFileUpload_handleCancel, _KupFileUpload_getPreview, _KupFileUpload_trimFileName, _KupFileUpload_uploadClick;
-import { forceUpdate, Host, h, } from "@stencil/core";
+import { forceUpdate, Host, h, Fragment, } from "@stencil/core";
 import { kupManagerInstance } from "../../managers/kup-manager/kup-manager";
 import { getProps, setProps } from "../../utils/utils";
 import { KupFileUploadProps, } from "./kup-file-upload-declarations";
@@ -38,18 +38,42 @@ export class KupFileUpload {
             ],
         ]));
         this.customStyle = '';
-        this.data = null;
+        this.pathString = null;
+        this.FupMul = 'false';
+        this.FupAut = 'false';
+        this.FupDir = null;
+        this.FupAty = null;
+        this.error = undefined;
         this.inputRef = undefined;
-        this.files = [];
+        this.tempFiles = [];
+        this.pathFiles = [];
         this.uploadSuccess = false;
         this.showSpinner = false;
+        this.multiUpload = false;
+        this.autoUpload = false;
+        this.acceptedFiles = null;
     }
     //#endregion
     //#region WATCHERS
     /*-------------------------------------------------*/
     /*                  W a t c h e r s                */
     /*-------------------------------------------------*/
-    onDataChanged() { }
+    onDataChanged() {
+        var _a;
+        this.uploadSuccess = false;
+        __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleCancel).call(this);
+        this.pathFiles = ((_a = this.pathString) === null || _a === void 0 ? void 0 : _a.split(';')) || [];
+    }
+    onFupMulChanged() {
+        this.multiUpload = this.FupMul === 'true';
+    }
+    onFupAutChanged() {
+        this.autoUpload = this.FupAut === 'true';
+    }
+    onFupFupAtyChanged() {
+        var _a;
+        this.acceptedFiles = (_a = this.FupAty) === null || _a === void 0 ? void 0 : _a.split('|').map((ext) => `.${ext}`);
+    }
     //#endregion
     //#region PUBLIC METHODS
     /*-------------------------------------------------*/
@@ -80,11 +104,19 @@ export class KupFileUpload {
      * Sets upload has been successfull to show success message.
      * @param {boolean} success - Boolean to set if upload has been successfull.
      */
-    async setSuccess(success) {
+    async setSuccess(success, pathFiles) {
         this.setLoading(false);
-        if (success) {
+        if (success && pathFiles) {
             __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleCancel).call(this);
             this.uploadSuccess = success;
+            this.pathFiles = this.multiUpload
+                ? [...this.pathFiles, ...pathFiles.split(';')]
+                : [pathFiles.split(';')[0]];
+            this.kupChange.emit({
+                comp: this,
+                id: this.rootElement.id,
+                value: this.pathFiles.join(';'),
+            });
         }
     }
     /**
@@ -100,9 +132,13 @@ export class KupFileUpload {
     /*          L i f e c y c l e   H o o k s          */
     /*-------------------------------------------------*/
     componentWillLoad() {
+        var _a;
         __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").debug.logLoad(this, false);
         __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.register(this);
         __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").theme.register(this);
+        this.multiUpload = this.FupMul === 'true';
+        this.autoUpload = this.FupAut === 'true';
+        this.acceptedFiles = (_a = this.FupAty) === null || _a === void 0 ? void 0 : _a.split('|').map((ext) => `.${ext}`);
     }
     componentDidLoad() {
         this.kupReady.emit({ comp: this, id: this.rootElement.id });
@@ -115,10 +151,11 @@ export class KupFileUpload {
         __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: 'c1d2c71efa28c233051bdfeb1535bcb07149c660' }, h("style", { key: '9fb2a5e633f49bac0fe1c8673869ac8b29c1272b' }, __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'b43469650151abf962aba80f54e15343c2a95767', id: componentWrapperId }, h("div", { key: '18489f11209ad6cf55c2de3e232b2b0888a4f505', class: {
+        var _a;
+        return (h(Host, { key: 'f08391eac6f841cb117304af6a09ae63ff92549b' }, h("style", { key: 'acc0df4a07fdd65f35182769077763a9643f34b0' }, __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '11e1fb63a9949c804f9b41236c218b80eef965a1', id: componentWrapperId }, h("div", { key: '8cf8270d6e066bc361feda602a82ac97657853a4', class: {
                 'file-upload': true,
                 'file-upload-spinner': this.showSpinner,
-            }, onDrop: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleDrop).bind(this), onDragOver: (event) => event.preventDefault() }, h("input", { key: '8a700a42c034d2604bfe84199212123dd082c64a', type: "file", ref: (el) => (this.inputRef = el), onChange: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileChange).bind(this), multiple: true, hidden: true }), h("div", { key: '5279ca7bbb0468519c8cb4ae223c0d4e1e6dc7a5', class: "file-upload__buttons" }, h(FButton, { key: '76b00cac757d67e629a043f123217cdbc0b3dc58', icon: "upload", label: __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.CHOOSE), onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleClick).bind(this) }), h(FButton, { key: 'ddec08321006f92257b336530f168cbabcdb0796', icon: "save", disabled: !this.files.length, label: __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.UPLOAD), onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_uploadClick).bind(this), styling: FButtonStyling.FLAT }), h(FButton, { key: '1e70cb49c36286d5e72dd412b776c9002194102e', icon: "clear", disabled: !this.files.length, label: __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.ABORT), onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleCancel).bind(this), styling: FButtonStyling.FLAT })), this.uploadSuccess ? (h("span", null, __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageUpload.SUCCESS))) : (h("div", { class: "file-upload__list" }, this.files.map((file, i) => (h("div", { class: "file-upload__list__item" }, h("div", { class: "file-upload__list__item__preview" }, h(FImage, { resource: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_getPreview).call(this, file) })), h("span", { class: "file-upload__list__item__desc", title: file.name }, __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_trimFileName).call(this, file.name)), h("span", { class: "file-upload__list__item__clear", onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileRemove).bind(this, i) })))))), this.showSpinner && (h("div", { key: 'f6a8de73c3109a9067866628f78698150bc83bdc', class: "file-upload__spinner-container" }, h("kup-spinner", { key: 'ca00b8efcae2be30f8ea5028d6c2a7e3839d63a4', active: true, layout: 14, dimensions: "7px" })))))));
+            }, onDrop: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleDrop).bind(this), onDragOver: (event) => event.preventDefault() }, h("input", { key: 'a34748d05872c863c0f96ef5a8e4fa36f549f1ae', type: "file", ref: (el) => (this.inputRef = el), onChange: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileChange).bind(this), multiple: this.multiUpload, accept: (_a = this.acceptedFiles) === null || _a === void 0 ? void 0 : _a.join(','), hidden: true }), h("div", { key: 'cc13058c673bc816ff51e8278b187c87a1ef4467', class: "file-upload__buttons" }, h(FButton, { key: 'b54e4ff41658b67e1700b2d4c06885ea37ae3004', icon: "upload", label: __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.CHOOSE), onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleClick).bind(this) }), !this.autoUpload && (h(Fragment, { key: 'd2df1fc3e94dc20573226456a5131599140817d3' }, h(FButton, { key: '6b05c656c460218841c85e4f07dde8965f47c36e', icon: "save", disabled: !this.tempFiles.length, label: __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.UPLOAD), onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_uploadClick).bind(this), styling: FButtonStyling.FLAT }), h(FButton, { key: '70ac6c463966d7e0fd2f69a59a648334587d46ef', icon: "clear", disabled: !this.tempFiles.length, label: __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.ABORT), onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleCancel).bind(this), styling: FButtonStyling.FLAT })))), this.error && (h("div", { key: '90c46db7caa99ba8460b0b925135ef1c9223e3e8', class: "file-upload__error" }, h("span", { key: '5a50f58e4d6e6cd87ac3074d48c849fc54716de5', class: "mdc-error-message" }, this.error))), this.uploadSuccess ? (h("span", null, __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageUpload.SUCCESS))) : (h("div", { class: "file-upload__list" }, this.tempFiles.map((file, i) => (h("div", { class: "file-upload__list__item" }, h("div", { class: "file-upload__list__item__preview" }, h(FImage, { resource: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_getPreview).call(this, file), placeholderResource: "file" })), h("span", { class: "file-upload__list__item__desc", title: file.name }, __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_trimFileName).call(this, file.name)), h("span", { class: "file-upload__list__item__clear", onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileRemove).bind(this, i) })))))), this.pathFiles.length ? (h("div", { class: "file-upload__list" }, this.pathFiles.map((path, i) => (h("span", { class: "file-upload__list__item" }, h("span", null, i + 1, ". ", path)))))) : null, this.showSpinner && (h("div", { key: '4cf819053c80ffaff9225fa351e9c1c3f37791b6', class: "file-upload__spinner-container" }, h("kup-spinner", { key: '3e1c322698976c8243fd6e9aefc678727056f8ea', active: true, layout: 14, dimensions: "7px" })))))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.unregister(this);
@@ -162,12 +199,96 @@ export class KupFileUpload {
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "data": {
-                "type": "any",
+            "pathString": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "The initial filepaths"
+                },
+                "attribute": "path-string",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "FupMul": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'false'"
+                        }],
+                    "text": "Sets the multiple upload"
+                },
+                "attribute": "fup-mul",
+                "reflect": false,
+                "defaultValue": "'false'"
+            },
+            "FupAut": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'false'"
+                        }],
+                    "text": "Sets the auto upload of select file"
+                },
+                "attribute": "fup-aut",
+                "reflect": false,
+                "defaultValue": "'false'"
+            },
+            "FupDir": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Sets the custom dir to upload files"
+                },
+                "attribute": "fup-dir",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "FupAty": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -177,20 +298,45 @@ export class KupFileUpload {
                             "name": "default",
                             "text": "null"
                         }],
-                    "text": "Actual data of the input field."
+                    "text": "Sets the accepted extensions"
                 },
-                "attribute": "data",
+                "attribute": "fup-aty",
                 "reflect": false,
                 "defaultValue": "null"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'false'"
+                        }],
+                    "text": "Error string to render in component"
+                },
+                "attribute": "error",
+                "reflect": false,
+                "defaultValue": "undefined"
             }
         };
     }
     static get states() {
         return {
             "inputRef": {},
-            "files": {},
+            "tempFiles": {},
+            "pathFiles": {},
             "uploadSuccess": {},
-            "showSpinner": {}
+            "showSpinner": {},
+            "multiUpload": {},
+            "autoUpload": {},
+            "acceptedFiles": {}
         };
     }
     static get events() {
@@ -236,6 +382,27 @@ export class KupFileUpload {
                         }
                     }
                 }
+            }, {
+                "method": "kupChange",
+                "name": "kup-file-upload-change",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KupFileUploadChangeEventPayload",
+                    "resolved": "KupFileUploadChangeEventPayload",
+                    "references": {
+                        "KupFileUploadChangeEventPayload": {
+                            "location": "import",
+                            "path": "./kup-file-upload-declarations",
+                            "id": "src/components/kup-file-upload/kup-file-upload-declarations.ts::KupFileUploadChangeEventPayload"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {
@@ -320,11 +487,15 @@ export class KupFileUpload {
             },
             "setSuccess": {
                 "complexType": {
-                    "signature": "(success: boolean) => Promise<void>",
+                    "signature": "(success: boolean, pathFiles: string) => Promise<void>",
                     "parameters": [{
                             "name": "success",
                             "type": "boolean",
                             "docs": "- Boolean to set if upload has been successfull."
+                        }, {
+                            "name": "pathFiles",
+                            "type": "string",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -371,8 +542,17 @@ export class KupFileUpload {
     static get elementRef() { return "rootElement"; }
     static get watchers() {
         return [{
-                "propName": "data",
+                "propName": "pathString",
                 "methodName": "onDataChanged"
+            }, {
+                "propName": "FupMul",
+                "methodName": "onFupMulChanged"
+            }, {
+                "propName": "FupAut",
+                "methodName": "onFupAutChanged"
+            }, {
+                "propName": "FupAty",
+                "methodName": "onFupFupAtyChanged"
             }];
     }
 }
@@ -380,12 +560,22 @@ _KupFileUpload_kupManager = new WeakMap(), _KupFileUpload_previewMap = new WeakM
     this.inputRef.click();
 }, _KupFileUpload_handleFileChange = function _KupFileUpload_handleFileChange(event) {
     this.uploadSuccess = false;
+    this.error = '';
     const newFiles = Array.from(event.target.files);
-    this.files = [...this.files, ...newFiles];
+    this.tempFiles = [...this.tempFiles, ...newFiles];
+    this.inputRef.value = '';
+    if (this.autoUpload) {
+        this.kupUpload.emit({
+            comp: this,
+            id: this.rootElement.id,
+            files: this.tempFiles,
+        });
+        this.setLoading(true);
+    }
 }, _KupFileUpload_handleFileRemove = function _KupFileUpload_handleFileRemove(index) {
-    this.files = [
-        ...this.files.splice(0, index),
-        ...this.files.splice(index + 1),
+    this.tempFiles = [
+        ...this.tempFiles.splice(0, index),
+        ...this.tempFiles.splice(index + 1),
     ];
 }, _KupFileUpload_handleDrop = function _KupFileUpload_handleDrop(event) {
     event.preventDefault();
@@ -393,10 +583,10 @@ _KupFileUpload_kupManager = new WeakMap(), _KupFileUpload_previewMap = new WeakM
     const droppedFiles = event.dataTransfer.files;
     if (droppedFiles.length > 0) {
         const newFiles = Array.from(droppedFiles);
-        this.files = [...this.files, ...newFiles];
+        this.tempFiles = [...this.tempFiles, ...newFiles];
     }
 }, _KupFileUpload_handleCancel = function _KupFileUpload_handleCancel() {
-    this.files = [];
+    this.tempFiles = [];
 }, _KupFileUpload_getPreview = function _KupFileUpload_getPreview(file) {
     const previewIcon = __classPrivateFieldGet(this, _KupFileUpload_previewMap, "f").get(file.type);
     if (!previewIcon) {
@@ -418,7 +608,7 @@ _KupFileUpload_kupManager = new WeakMap(), _KupFileUpload_previewMap = new WeakM
     this.kupUpload.emit({
         comp: this,
         id: this.rootElement.id,
-        files: this.files,
+        files: this.tempFiles,
     });
     this.setLoading(true);
 };

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

@@ -408,7 +408,7 @@ export class KupForm {
     render() {
         let formContent = null;
         if (this.data.rows.length === 0) {
-            formContent = (h("p", { key: 'cf8c793fae4b7ab811ed6385dd446ce1603d4921' }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA)));
+            formContent = (h("p", { key: '103de9b30f44f7958a691e5dccc8698e49ca76cf' }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA)));
         }
         else {
             const rows = this.data.rows;
@@ -419,7 +419,7 @@ export class KupForm {
                 formContent.push(this.renderRow(rows[cnt++]));
             }
         }
-        return (h(Host, { key: 'a97811d53f4ed45ced27c021e1cf164f093b04d2' }, h("style", { key: '5531da216461ca36e3efb0f0a365517eb8494d64' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '50e19a44c0be7805bf35215fbc079924178458f9', id: componentWrapperId }, formContent)));
+        return (h(Host, { key: 'cdaa7ff6add189834cc6f570d2a7cd032d3a0b3c' }, h("style", { key: 'd9eff3af01d39df16086be74e2c893b64f861e52' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'd4dd031f9dac773296738ebfe27510be56af8e5a', id: componentWrapperId }, formContent)));
     }
     disconnectedCallback() {
         this.kupManager.language.unregister(this);

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

@@ -69,7 +69,7 @@ export class KupHTM {
     render() {
         var _a;
         const isLink = __classPrivateFieldGet(this, _KupHTM_instances, "m", _KupHTM_isObjectCompatibleWithHTM).call(this, (_a = this === null || this === void 0 ? void 0 : this.data) === null || _a === void 0 ? void 0 : _a.obj);
-        return (h(Host, { key: '5fd7a24633313c182200d98e795cd27938bdd0ed' }, h("style", { key: '283f61604341bc317f9eece1bacdfd6f394d73b6' }, __classPrivateFieldGet(this, _KupHTM_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '2e35f4c034756925be450b15a14b54acd3e496fa', id: componentWrapperId }, h("div", { key: 'a7372f43ada38738eb4134e8feaade2c9db14c13', class: `kup-htm ${isLink ? 'is-link' : ''}` }, isLink ? (h(Fragment, null, h("a", { href: this.data.value, target: "_blank", rel: "noopener noreferrer" }, __classPrivateFieldGet(this, _KupHTM_kupManager, "f").language.translate(KupLanguageGeneric.OPEN_IN_NEW_TAB)), h("iframe", { src: this.data.value, frameBorder: "0" }))) : (h("div", { innerHTML: this.data.value }))))));
+        return (h(Host, { key: 'd4c059a573d252c5809a77375222a78bcdee56bc' }, h("style", { key: '46ea04367aae5ad0602ab6f84dc0cb904b14e091' }, __classPrivateFieldGet(this, _KupHTM_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '3d2ad3be208bd0cb850e66113155b70ace70983c', id: componentWrapperId }, h("div", { key: '075017b3ef686bfc5d6cee4035c3b053c11d67af', class: `kup-htm ${isLink ? 'is-link' : ''}` }, isLink ? (h(Fragment, null, h("a", { href: this.data.value, target: "_blank", rel: "noopener noreferrer" }, __classPrivateFieldGet(this, _KupHTM_kupManager, "f").language.translate(KupLanguageGeneric.OPEN_IN_NEW_TAB)), h("iframe", { src: this.data.value, frameBorder: "0" }))) : (h("div", { innerHTML: this.data.value }))))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupHTM_kupManager, "f").theme.unregister(this);

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

@@ -205,14 +205,14 @@ export class KupImageList {
         }
         const imlClass = 'image-list' +
             (this.showFullDescription ? ' full-description' : '');
-        return (h(Host, { key: 'e126ffca6f4a347874e940c20833b9a211d75139' }, h("style", { key: 'ecf74bc3247070d5f246cd334885a281e8f71ecc' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '2d742444cbca6dab5060901ef99313817ec95893', id: componentWrapperId, ref: (el) => {
+        return (h(Host, { key: '4a3c80748fec9b98c9268077893643042b2c4ade' }, h("style", { key: '5fbc10ef98292d3cc1919d26cf64baa1286611e4' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '52254d30b66446960be0db63fdf486420d35a7ce', id: componentWrapperId, ref: (el) => {
                 __classPrivateFieldSet(this, _KupImageList_el, el, "f");
-            } }, h("div", { key: '1bc44a87241d1488cfe012a2a83567a9d6391414', class: "navigation-bar" }, hasNavigation ? (h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
+            } }, h("div", { key: '68cb3d98496d6314556ad5d777e6a67543a14ff3', class: "navigation-bar" }, hasNavigation ? (h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
                 ? 'navigation-bar__wrapper--active'
                 : ''}` }, h("div", { class: `navigation-bar__title`, onClick: () => {
                 this.navigationBarToggled =
                     !this.navigationBarToggled;
-            } }, h(FImage, { fit: true, resource: this.currentNode.icon, placeholderResource: this.currentNode.placeholderIcon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), h("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.BACK) })), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.TOP) })))) : null), this.leadingLabel && (h("div", { key: 'a527e20f9633054995f013cd550aae7c9254b492', class: "mdc-text-field__label-container" }, h("label", { key: '8fd3989537d74e0363c822bee6dc3a12eca276d9', class: "mdc-label" }, this.leadingLabel))), h("div", { key: '55329659aec995c3da9718b553ce93efe04cc6e4', class: imlClass, style: combinedGridStyle }, ...__classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
+            } }, h(FImage, { fit: true, resource: this.currentNode.icon, placeholderResource: this.currentNode.placeholderIcon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), h("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.BACK) })), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.TOP) })))) : null), this.leadingLabel && (h("div", { key: '4b808d9230730a0eb49c5eca46a8130eda1c0f51', class: "mdc-text-field__label-container" }, h("label", { key: 'c1fcdb83116da8e7591091fcb97ea6c4ecb19a27', class: "mdc-label" }, this.leadingLabel))), h("div", { key: 'f0b462e13602be5a3a8c00ffd993fd9c8b02476a', class: imlClass, style: combinedGridStyle }, ...__classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.unregister(__classPrivateFieldGet(this, _KupImageList_interactableTouch, "f"));