@sme.up/ketchup 11.0.0-SNAPSHOT-20250204102828 → 11.0.0-SNAPSHOT-20250204113518

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"));

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

@@ -164,7 +164,10 @@
   --kup_input_panel_label_alignment: var(--kup-input-panel-label-alignment);
   --kup_input_panel_label_width: var(--kup-input-panel-label-width);
   --kup_input_panel_padding: var(--kup-input-panel-padding, 1em 0);
-  --kup_input_panel_padding--inline: var(--kup-input-panel-padding--inline, 0);
+  --kup_input_panel_padding--inline: var(
+    --kup-input-panel-padding--inline,
+    1em 0
+  );
   --kup_input_panel_absolute_max_height: var(
     --kup-input-panel-absolute-max-height,
     /* 716px comes from the maximum number of lines (32) multiplied by the default height per line (22px) plus 12px for the possibility that the scrollbar will be rendered */

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

@@ -202,7 +202,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: '54cdc2d3d3fc0f6b56389cb87ffc52b769549847', "onKup-cell-blur": (e) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_manageInputPanelCheck).call(this, e, CheckTriggeringEvents.BLUR), "onKup-cell-update": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_onCellUpdate).bind(this), "onKup-tabbar-click": (e) => {
+        return (h(Host, { key: '653d14985eabf32f57ac32a7445cf0d16ec0c86f', "onKup-cell-blur": (e) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_manageInputPanelCheck).call(this, e, CheckTriggeringEvents.BLUR), "onKup-cell-update": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_onCellUpdate).bind(this), "onKup-tabbar-click": (e) => {
                 this.tabSelected = e.detail.node.id;
             }, "onKup-autocomplete-input": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getOptionHandler).bind(this), "onKup-autocomplete-iconclick": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getOptionHandler).bind(this), "onKup-combobox-iconclick": (e) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getOptionHandler).call(this, e, true), "onKup-cell-itemclick": (e) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_manageInputPanelCheck).call(this, e, CheckTriggeringEvents.ITEMCLICK), "onKup-objectfield-searchpayload": (e) => {
                 this.kupInputPanelObjectFieldSearchPayload.emit(e.detail);
@@ -210,7 +210,7 @@ export class KupInputPanel {
                 this.kupInputPanelObjectFieldOpenSearchMenu.emit(e.detail);
             }, "onKup-objectfield-selectedmenuitem": (e) => {
                 this.kupInputPanelObjectFieldSelectedMenuItem.emit(e.detail);
-            } }, h("style", { key: '88f620f535c023988dc495b8dfa0107763510d52' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '0e0290905bfb285e23e60917457c2b7600bec2c8', id: componentWrapperId }, inputPanelContent)));
+            } }, h("style", { key: 'db617093a875cef47297121f4670d78fd6d0d361' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '5a8fe399355ca35012db8ef368e3ad3490cf48d4', id: componentWrapperId }, inputPanelContent)));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.unregister(this);

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

@@ -108,39 +108,39 @@ export class KupLazy {
         switch (this.componentName) {
             case 'kup-button':
                 //call_to_action.svg
-                resource = (h("svg", { key: 'fb2b8362e3dc1b12b70f15e99928a57d7b12fedf', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '436f390f7b97422e6748b2a7759d592f44c506dc', d: "M42 6H6c-2.2 0-4 1.8-4 4v28c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4V10c0-2.2-1.8-4-4-4zm0 32H6v-6h36v6z" })));
+                resource = (h("svg", { key: '8802574ba1d79ac1e274790bdf8686015476b2ad', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'c3d51c252fdf77cecf888da91a901c48d08fd69c', d: "M42 6H6c-2.2 0-4 1.8-4 4v28c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4V10c0-2.2-1.8-4-4-4zm0 32H6v-6h36v6z" })));
                 break;
             case 'kup-card':
                 //art_track.svg
-                resource = (h("svg", { key: 'f3c05242075e730bc7105c53bd62b18aecf5ec3d', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'a2eee16a6ace543cac444d960a62b59a086eb744', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
+                resource = (h("svg", { key: '4a1d1532c15748b95b0584f5d004bf5804417bc2', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '20e5ab4bd0690a0599a28e05b355a405e07f7cad', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
                 break;
             case 'kup-checkbox':
                 //check_box_outline_blank.svg
-                resource = (h("svg", { key: 'f6716e9ce1594db32cc40769a2670f5eaab944ec', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '7a5d24b382c912f86930086ea47d5352f7d268c0', d: "M38 10v28H10V10h28m0-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4z" })));
+                resource = (h("svg", { key: '99d255a35e9890c805abb2994b6174223184cfd0', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '513cf3606dfd9bde023162e079dee3cf54304084', d: "M38 10v28H10V10h28m0-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4z" })));
                 break;
             case 'kup-chart':
                 //chart-bar.svg
-                resource = (h("svg", { key: '282e8485c65d6c90cc6742fab3ea8826eeb3579a', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: 'ff9a9420e091b9f5ccf64c2a248715445a3ea89b', d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
+                resource = (h("svg", { key: '842f850f0b3532fd388a8e1ebf48c11161d95561', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: 'b2e747170adf5dbe81a80a7a4ccc4df71abe776d', d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
                 break;
             case 'kup-data-table':
                 //table-large.svg
-                resource = (h("svg", { key: 'eaffa11808d13d6a30fff31bea6530830f69d88f', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: 'c0eac37b259ccaa3176fb122208202dc8885de85', d: "M4,3H20A2,2 0 0,1 22,5V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V5A2,2 0 0,1 4,3M4,7V10H8V7H4M10,7V10H14V7H10M20,10V7H16V10H20M4,12V15H8V12H4M4,20H8V17H4V20M10,12V15H14V12H10M10,20H14V17H10V20M20,20V17H16V20H20M20,12H16V15H20V12Z" })));
+                resource = (h("svg", { key: '252aee5d61964d1580283ae5edb5fb8064f3d668', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '876b7590622878f40fe3ee89aa880d187a69cb91', d: "M4,3H20A2,2 0 0,1 22,5V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V5A2,2 0 0,1 4,3M4,7V10H8V7H4M10,7V10H14V7H10M20,10V7H16V10H20M4,12V15H8V12H4M4,20H8V17H4V20M10,12V15H14V12H10M10,20H14V17H10V20M20,20V17H16V20H20M20,12H16V15H20V12Z" })));
                 break;
             case 'kup-image':
                 //photo.svg
-                resource = (h("svg", { key: '0fc683ca7735ac9d5f48d9c1350d67549444a37e', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'dc800aa000585a00f390e3e92f9456af2c83b121', d: "M42 38V10c0-2.21-1.79-4-4-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4zM17 27l5 6.01L29 24l9 12H10l7-9z" })));
+                resource = (h("svg", { key: 'a43007f243ee6855d8ae9b7ff517d471e37164d8', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '7f6654a6ddabef4701471ddd4c49c4eef87cc20f', d: "M42 38V10c0-2.21-1.79-4-4-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4zM17 27l5 6.01L29 24l9 12H10l7-9z" })));
                 break;
             case 'kup-progress-bar':
                 //linear_scale.svg
-                resource = (h("svg", { key: '6703f804c86f98915b6fca8d561b79e818480ee0', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '5b473c7582738c69b3e693b653eb8e83f0a5bd7d', d: "M39 19c-2.05 0-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3s-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3-2.77 0-5 2.23-5 5s2.23 5 5 5c2.05 0 3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3s3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3 2.77 0 5-2.23 5-5s-2.23-5-5-5z" })));
+                resource = (h("svg", { key: '23dfbe528bbea80630394aaa91f09dd687cecb9d', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '0615b03884b85a2e1215d3a25bfe225f43f0c84e', d: "M39 19c-2.05 0-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3s-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3-2.77 0-5 2.23-5 5s2.23 5 5 5c2.05 0 3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3s3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3 2.77 0 5-2.23 5-5s-2.23-5-5-5z" })));
                 break;
             case 'kup-radio':
                 //radio_button_unchecked.svg
-                resource = (h("svg", { key: 'b5020673fe0d60ddcb887878d027f9be1a04f611', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'ca7c15a6029ffb8468db47603eae20f8db8eaa54', d: "M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" })));
+                resource = (h("svg", { key: '9614fc7450e6a432fb6645911a0ee3739c3bdba1', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'd3d77ee72693ca34d75bb90a020c0904d8345897', d: "M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" })));
                 break;
             default:
                 //art_track.svg
-                resource = (h("svg", { key: '6e916204ad921b9387a2da59225277a12bdfee97', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '2397c3c58a7ac2ddfe1c4d95680c805b410a1cda', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
+                resource = (h("svg", { key: '7e9e25c82c6a968df1e34d6404a5b6a26208a1d2', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '3355655ef7a1bd635fd287bd72124fc409acdb90', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
                 break;
         }
         if ((this.renderMode === KupLazyRender.VIEWPORT && this.isInViewport) ||
@@ -149,14 +149,14 @@ export class KupLazy {
                 this.data &&
                 this.isInViewport)) {
             let Tag = this.componentName;
-            content = (h(Tag, Object.assign({ key: '55d8ffa08667bdf2f90e278bd6d28e94d5a5fd90' }, this.data, { ref: (el) => (this.lazyComponent = el) })));
+            content = (h(Tag, Object.assign({ key: '598ae9bb03885be0e6f25ca73b9ee2cf52a6ab8e' }, this.data, { ref: (el) => (this.lazyComponent = el) })));
             className += ' kup-loaded';
         }
         else if (this.showPlaceholder) {
             content = resource;
             className += ' kup-to-be-loaded';
         }
-        return (h(Host, { key: 'b51dd829f66bf9958780ca2a106bd265097e0212', class: className }, h("style", { key: '5f16dbbf7222c11e5e3daf2d914b0cbb4f7d757a' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'c0c9f7471b8e6529fa510db940edbbd2505deb86', id: componentWrapperId }, content)));
+        return (h(Host, { key: 'fdc3a6a971b8c6b74129d1d8c561fce5e52c3b44', class: className }, h("style", { key: 'b8d687d0af73cc123bc465d481c4c37b0ba6c552' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '9c9f61bc50d5badca2f000fe40817eba70e6a4c5', id: componentWrapperId }, content)));
     }
     disconnectedCallback() {
         var _a;

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

@@ -263,11 +263,11 @@ export class KupMagicBox {
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: '579cf183f0915d864820f3d06bc1576ab11ae1a4' }, h("style", { key: '9128110fcaca2c1da80ce29a30b17f26d287ccb3' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'a23742c2083fc1ef92fbc370da846dc8b9182116', id: componentWrapperId }, h("div", { key: '1c23fa7eb08e82493c2279f975425297dbcc46fd', class: "magic-box-wrapper" }, h("div", { key: '3c1f251962659f982d0d68108fdb0476d0fa065a', class: "actions", id: "drag-handle" }, h("kup-combobox", Object.assign({ key: '30fbff2375c6872fc6ae239a7a215928a4512e3c' }, this.comboboxProps())), h("kup-button", { key: 'de990f96f370f26bd847d90bb555cd818ce59b4e', styling: FButtonStyling.FLAT, icon: "delete", label: "Reset", "onkup-button-click": () => {
+        return (h(Host, { key: '965bc0e815b0a0054521248bd377cb16856fc415' }, h("style", { key: '66c60a18972e45960bd47a7ab2d491c39809b485' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '4dfcddb31127f78e68b1e37dc35c82a2734ba350', id: componentWrapperId }, h("div", { key: '571076a5c66c80d91c4c43160f8d2ca1ac29c54c', class: "magic-box-wrapper" }, h("div", { key: '92f135694c618cddc6325e8b1ed39270027aae06', class: "actions", id: "drag-handle" }, h("kup-combobox", Object.assign({ key: '4fabc4f0737bf3d0548793194834d8bd9785557e' }, this.comboboxProps())), h("kup-button", { key: '2b1ae00bc73ce74d2d4ad850d458782ea788d94b', styling: FButtonStyling.FLAT, icon: "delete", label: "Reset", "onkup-button-click": () => {
                 this.data = null;
-            } }), h("kup-button", { key: '867ec9ed075ae869dc9350e00096036d3af780e6', id: "close-dialog", customStyle: `:host{${KupThemeColorValues.PRIMARY}: var(${KupThemeColorValues.TITLE});}`, icon: "clear", "onkup-button-click": () => {
+            } }), h("kup-button", { key: '000ddc9301085892b967678b42a1a8154a7679d1', id: "close-dialog", customStyle: `:host{${KupThemeColorValues.PRIMARY}: var(${KupThemeColorValues.TITLE});}`, icon: "clear", "onkup-button-click": () => {
                 this.kupManager.hideMagicBox();
-            } })), h("div", { key: '279780fb00c2ad681ff42f266ad08a25705928fe', class: "content", ref: (el) => (this.wrapperRef = el) }, this.setContent())))));
+            } })), h("div", { key: '74bd8964eca9d638a197ed748d51d746f250afe5', class: "content", ref: (el) => (this.wrapperRef = el) }, this.setContent())))));
     }
     disconnectedCallback() {
         this.kupManager.interact.unregister([

package/dist/collection/components/kup-nav-bar/kup-nav-bar.js

@@ -98,7 +98,7 @@ export class KupNavBar {
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: '78c7f252d8e16460a2108c898e025209183103c8', class: "header" }, h("style", { key: 'f18b1188fbc590427245dd6acaeed14f3aba3033' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '58a440f172111617ad78da7352b3803356a16015', id: componentWrapperId }, h("header", { key: 'cb2783014d79eee887c8507a06d504fa614fdd77', class: `${navbarClass} ${navbarClass}--${this.styling.toLowerCase()} ` }, h("div", { key: 'e9ca378c0a88b69abc3933780fcc4f33a6d9e6ed', class: `${navbarClass}__row` }, this.content())))));
+        return (h(Host, { key: '1a06d28ec363f674f615ca16916eee913ca20015', class: "header" }, h("style", { key: '7bbf690ff318025c09177de7f50b1090fee08b26' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '998dd20d642ac4b6c9c41e7d829279c66b456c24', id: componentWrapperId }, h("header", { key: '2510f5028b269724e936f8e3a64cb3968fc2954f', class: `${navbarClass} ${navbarClass}--${this.styling.toLowerCase()} ` }, h("div", { key: '0bb71e253c2ccb01647f2806561940c975ec81cc', class: `${navbarClass}__row` }, this.content())))));
     }
     disconnectedCallback() {
         this.kupManager.language.unregister(this);

package/dist/collection/components/kup-numeric-picker/kup-numeric-picker.js

@@ -321,7 +321,7 @@ export class KupNumericPicker {
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: 'e4971105409f3f1d053379189bb98a5cee25e986' }, h("style", { key: 'a15921df3d5f4bf5542216219197383b5a8c04e1' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'e1e1ccc7e4a954956fb4a49f2aeb43a113e25030', id: componentWrapperId }, this.prepTextfield())));
+        return (h(Host, { key: '08eefc0738bf43f53540b2985b753e4f6d636eca' }, h("style", { key: '233812ade3df39cd82f66c7af937cdf6d23a8a1b' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'ac5004a45b7535c7efa2cfb4c59d70d93c0ad21b', id: componentWrapperId }, this.prepTextfield())));
     }
     disconnectedCallback() {
         this.kupManager.dates.unregister(this);