@sme.up/ketchup 11.0.0-SNAPSHOT-20250204102909 → 11.0.0-SNAPSHOT-20250204113836

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

@@ -0,0 +1,203 @@
+.kup-body-compact-01 {
+  font-family: var(--kup-font-family);
+  font-size: var(--kup-body-compact-01-font-size, 14px);
+  line-height: 18px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}
+
+.kup-body-01 {
+  font-family: var(--kup-font-family);
+  font-size: var(--kup-body-01-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_upload_icon_color: var(--kup-upload-icon-color, var(--kup-icon-color));
+  --kup_upload_border_color: var(
+    --kup-upload-border-color,
+    var(--kup-gray-color-30)
+  );
+  flex: 1;
+}
+:host .file-upload-spinner > * {
+  opacity: 0.6;
+  pointer-events: none;
+}
+:host .file-upload-spinner > file-upload__spinner-container {
+  opacity: 1;
+}
+:host .file-upload {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  border: 2px dashed var(--kup_upload_border_color);
+  border-radius: 4px;
+  padding: 1em;
+  position: relative;
+}
+:host .file-upload__buttons {
+  display: flex;
+  gap: 1em;
+  align-items: center;
+  justify-content: center;
+}
+:host .file-upload__buttons .spinner {
+  height: 48px;
+  margin: auto;
+  width: 48px;
+}
+:host .file-upload__list {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}
+:host .file-upload__list__item {
+  display: flex;
+  gap: 1em;
+  align-items: center;
+}
+:host .file-upload__list__item__preview {
+  height: 3em;
+  width: 3em;
+  display: flex;
+  align-items: center;
+}
+:host .file-upload__list__item__desc {
+  width: 14em;
+}
+:host .file-upload__list__item__clear {
+  background-color: var(--kup_upload_icon_color);
+  cursor: pointer;
+  height: 16px;
+  width: 16px;
+  min-width: 16px;
+  min-height: 16px;
+  outline: none;
+  pointer-events: all;
+  -webkit-mask: var(--kup-clear-icon);
+  mask: var(--kup-clear-icon);
+}
+:host .file-upload__list__item__clear:hover {
+  background-color: var(--kup-danger-color-60);
+}
+:host .file-upload__spinner-container {
+  height: calc(100% - 2em);
+  width: 20%;
+  position: absolute;
+  left: 40%;
+}

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

@@ -0,0 +1,423 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    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 { kupManagerInstance } from "../../managers/kup-manager/kup-manager";
+import { getProps, setProps } from "../../utils/utils";
+import { KupFileUploadProps, } from "./kup-file-upload-declarations";
+import { componentWrapperId } from "../../variables/GenericVariables";
+import { FButton } from "../../f-components/f-button/f-button";
+import { KupLanguageGeneric, KupLanguageUpload, } from "../../managers/kup-language/kup-language-declarations";
+import { FButtonStyling } from "../../f-components/f-button/f-button-declarations";
+import { FImage } from "../../f-components/f-image/f-image";
+export class KupFileUpload {
+    constructor() {
+        _KupFileUpload_instances.add(this);
+        //#endregion
+        //#region VARIABLES
+        /*-------------------------------------------------*/
+        /*       I n t e r n a l   V a r i a b l e s       */
+        /*-------------------------------------------------*/
+        _KupFileUpload_kupManager.set(this, kupManagerInstance());
+        _KupFileUpload_previewMap.set(this, new Map([
+            ['application/pdf', 'file-pdf'],
+            ['application/vnd.ms-excel', 'file-excel'],
+            [
+                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+                'file-excel',
+            ],
+            ['application/msword', 'file-word'],
+            [
+                'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+                'file-word',
+            ],
+        ]));
+        this.customStyle = '';
+        this.data = null;
+        this.inputRef = undefined;
+        this.files = [];
+        this.uploadSuccess = false;
+        this.showSpinner = false;
+    }
+    //#endregion
+    //#region WATCHERS
+    /*-------------------------------------------------*/
+    /*                  W a t c h e r s                */
+    /*-------------------------------------------------*/
+    onDataChanged() { }
+    //#endregion
+    //#region PUBLIC METHODS
+    /*-------------------------------------------------*/
+    /*           P u b l i c   M e t h o d s           */
+    /*-------------------------------------------------*/
+    /**
+     * Used to retrieve component's props values.
+     * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+     * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
+     */
+    async getProps(descriptions) {
+        return getProps(this, KupFileUploadProps, descriptions);
+    }
+    /**
+     * This method is used to trigger a new render of the component.
+     */
+    async refresh() {
+        forceUpdate(this);
+    }
+    /**
+     * Sets the props to the component.
+     * @param {GenericObject} props - Object containing props that will be set to the component.
+     */
+    async setProps(props) {
+        setProps(this, KupFileUploadProps, props);
+    }
+    /**
+     * Sets upload has been successfull to show success message.
+     * @param {boolean} success - Boolean to set if upload has been successfull.
+     */
+    async setSuccess(success) {
+        this.setLoading(false);
+        if (success) {
+            __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleCancel).call(this);
+            this.uploadSuccess = success;
+        }
+    }
+    /**
+     * Sets to show spinner during upload.
+     * @param {boolean} loading - Boolean to set if is loading.
+     */
+    async setLoading(loading) {
+        this.showSpinner = loading;
+    }
+    //#endregion
+    //#region LIFECYCLE HOOKS
+    /*-------------------------------------------------*/
+    /*          L i f e c y c l e   H o o k s          */
+    /*-------------------------------------------------*/
+    componentWillLoad() {
+        __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);
+    }
+    componentDidLoad() {
+        this.kupReady.emit({ comp: this, id: this.rootElement.id });
+        __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").debug.logLoad(this, true);
+    }
+    componentWillRender() {
+        __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").debug.logRender(this, false);
+    }
+    componentDidRender() {
+        __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").debug.logRender(this, true);
+    }
+    render() {
+        return (h(Host, { key: 'fe4bf368d35a09d537000b666c22b8a796e841d8' }, h("style", { key: '7f795ecba5c7187f2752051561545a27fdb4eb76' }, __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '6f998101815936c02246f56816f03e9d43c3ce8d', id: componentWrapperId }, h("div", { key: 'aa518134c9ae9a1a3645e811c75b39da73c544b3', 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: 'ed848e17a8e40fec4b5c119a316ab5a6c09c9085', type: "file", ref: (el) => (this.inputRef = el), onChange: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileChange).bind(this), multiple: true, hidden: true }), h("div", { key: 'c713ff2f83975080221437cca9ead4534dd4ef9b', class: "file-upload__buttons" }, h(FButton, { key: 'bad9df6fe8d6f45fc414b3c25559333e887d3273', 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: '3966f24556bce210cc2e84b0b34153ff7feb182c', 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: '4c538a64d604496d0d65a1c9dc3bb88ddc92df19', 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: '54782b7a4ceb1a4626255256d4832ed24be43e36', class: "file-upload__spinner-container" }, h("kup-spinner", { key: '7da8a612be8f0a9a01e96308c7492650677f7b55', active: true, layout: 14, dimensions: "7px" })))))));
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.unregister(this);
+        __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").theme.unregister(this);
+    }
+    static get is() { return "kup-file-upload"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kup-file-upload.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kup-file-upload.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"\""
+                        }, {
+                            "name": "see",
+                            "text": "https://smeup.github.io/ketchup/#/customization"
+                        }],
+                    "text": "Custom style of the component."
+                },
+                "attribute": "custom-style",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "data": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Actual data of the input field."
+                },
+                "attribute": "data",
+                "reflect": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "inputRef": {},
+            "files": {},
+            "uploadSuccess": {},
+            "showSpinner": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "kupReady",
+                "name": "kup-file-upload-ready",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When component load is complete"
+                },
+                "complexType": {
+                    "original": "KupEventPayload",
+                    "resolved": "KupEventPayload",
+                    "references": {
+                        "KupEventPayload": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::KupEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "kupUpload",
+                "name": "kup-file-upload-upload",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KupFileUploadEventPayload",
+                    "resolved": "KupFileUploadEventPayload",
+                    "references": {
+                        "KupFileUploadEventPayload": {
+                            "location": "import",
+                            "path": "./kup-file-upload-declarations",
+                            "id": "src/components/kup-file-upload/kup-file-upload-declarations.ts::KupFileUploadEventPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getProps": {
+                "complexType": {
+                    "signature": "(descriptions?: boolean) => Promise<GenericObject>",
+                    "parameters": [{
+                            "name": "descriptions",
+                            "type": "boolean",
+                            "docs": "- When provided and true, the result will be the list of props with their description."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "return": "Promise<GenericObject>"
+                },
+                "docs": {
+                    "text": "Used to retrieve component's props values.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "descriptions - When provided and true, the result will be the list of props with their description."
+                        }, {
+                            "name": "returns",
+                            "text": "List of props as object, each key will be a prop."
+                        }]
+                }
+            },
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "This method is used to trigger a new render of the component.",
+                    "tags": []
+                }
+            },
+            "setProps": {
+                "complexType": {
+                    "signature": "(props: GenericObject) => Promise<void>",
+                    "parameters": [{
+                            "name": "props",
+                            "type": "GenericObject",
+                            "docs": "- Object containing props that will be set to the component."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the props to the component.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "props - Object containing props that will be set to the component."
+                        }]
+                }
+            },
+            "setSuccess": {
+                "complexType": {
+                    "signature": "(success: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "success",
+                            "type": "boolean",
+                            "docs": "- Boolean to set if upload has been successfull."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets upload has been successfull to show success message.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "success - Boolean to set if upload has been successfull."
+                        }]
+                }
+            },
+            "setLoading": {
+                "complexType": {
+                    "signature": "(loading: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "loading",
+                            "type": "boolean",
+                            "docs": "- Boolean to set if is loading."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets to show spinner during upload.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "loading - Boolean to set if is loading."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "rootElement"; }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "onDataChanged"
+            }];
+    }
+}
+_KupFileUpload_kupManager = new WeakMap(), _KupFileUpload_previewMap = new WeakMap(), _KupFileUpload_instances = new WeakSet(), _KupFileUpload_handleClick = function _KupFileUpload_handleClick() {
+    this.inputRef.click();
+}, _KupFileUpload_handleFileChange = function _KupFileUpload_handleFileChange(event) {
+    this.uploadSuccess = false;
+    const newFiles = Array.from(event.target.files);
+    this.files = [...this.files, ...newFiles];
+}, _KupFileUpload_handleFileRemove = function _KupFileUpload_handleFileRemove(index) {
+    this.files = [
+        ...this.files.splice(0, index),
+        ...this.files.splice(index + 1),
+    ];
+}, _KupFileUpload_handleDrop = function _KupFileUpload_handleDrop(event) {
+    event.preventDefault();
+    const droppedFiles = event.dataTransfer.files;
+    if (droppedFiles.length > 0) {
+        const newFiles = Array.from(droppedFiles);
+        this.files = [...this.files, ...newFiles];
+    }
+}, _KupFileUpload_handleCancel = function _KupFileUpload_handleCancel() {
+    this.files = [];
+}, _KupFileUpload_getPreview = function _KupFileUpload_getPreview(file) {
+    const previewIcon = __classPrivateFieldGet(this, _KupFileUpload_previewMap, "f").get(file.type);
+    if (!previewIcon) {
+        if (/^image\/.*/g.test(file.type)) {
+            return URL.createObjectURL(file);
+        }
+        if (/^video\/.*/g.test(file.type)) {
+            return 'video';
+        }
+        return 'file';
+    }
+    return previewIcon;
+}, _KupFileUpload_trimFileName = function _KupFileUpload_trimFileName(fileName) {
+    return (fileName === null || fileName === void 0 ? void 0 : fileName.length) > 20
+        ? fileName.slice(0, 9) + '...' + fileName.slice(-10)
+        : fileName;
+}, _KupFileUpload_uploadClick = function _KupFileUpload_uploadClick(e) {
+    e.stopPropagation();
+    this.kupUpload.emit({
+        comp: this,
+        id: this.rootElement.id,
+        files: this.files,
+    });
+    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: '4b4c768ddde3a3e5b716aa6c78f19d124fe472ff' }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA)));
+            formContent = (h("p", { key: 'f749de74f0497b4be1fb554de9e3c9cb1464f16d' }, 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: 'fef68da43868f5b70c76102cc08fc53557b0feb8' }, h("style", { key: 'c8265a9f9c5a9bce97c8c2bbf64d3d7cbf1f57ee' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'de6c69d454396ebf0e82b5de27c7541132038eeb', id: componentWrapperId }, formContent)));
+        return (h(Host, { key: 'f32e3c7318dd06b37dda2c66fc35188671fd5c2b' }, h("style", { key: 'bda0f827c81efc66666670b3da38b699921855cf' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '07ba4ba3f36154ee5457b340993f3fd54b202b30', 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: '73403ca7422134a04fa540de2381edc011503742' }, h("style", { key: 'ff8016a1eaa68b3fcd9ae52927916f78d2261e42' }, __classPrivateFieldGet(this, _KupHTM_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '23c2612c34016052a445fdeda9162579a3e0580e', id: componentWrapperId }, h("div", { key: '62eb97d3917e7793ec633763025e50ca79f0141b', 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: '128d8986f162aa072d5b81db7f3f070115b19fa0' }, h("style", { key: 'aa84ccbba625c205995fddf63dd0af6da98c1fc5' }, __classPrivateFieldGet(this, _KupHTM_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '800b7ab6281db49fefe696b606eef763c7314d4d', id: componentWrapperId }, h("div", { key: '56e9a84d1ad20f5717d5192f1181e131208757e3', 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

@@ -204,14 +204,14 @@ export class KupImageList {
         }
         const imlClass = 'image-list' +
             (this.showFullDescription ? ' full-description' : '');
-        return (h(Host, { key: '93d70ec190a26a673d981de28090a9b5e28a65e7' }, h("style", { key: '8406886a536984f47d67b898edfc92a249fe2f10' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'e87fb1b818912e4a453fe245742a5f8e922ae304', id: componentWrapperId, ref: (el) => {
+        return (h(Host, { key: '35d589835d3ca78cf53bf059854faeea30efbc62' }, h("style", { key: '532694ef590fd4cb34182b21bef85477a44cd848' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'bc337ab92bfc3c021aa218693cfb5d329b1650a3', id: componentWrapperId, ref: (el) => {
                 __classPrivateFieldSet(this, _KupImageList_el, el, "f");
-            } }, h("div", { key: 'f2715bba9335adabc8b22d714318f9535a21b665', class: "navigation-bar" }, hasNavigation ? (h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
+            } }, h("div", { key: 'd5040fd4cfcc78cc1604d8f34979379e2dfc003b', 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), h("div", { key: '12a9125e7010fa1a48460113e1f8f71d315b680a', 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), h("div", { key: '296dbe1d4afbcf96e9a2465757051944a132ba96', 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"));