@sme.up/ketchup 10.1.0 → 10.2.0

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

@@ -0,0 +1,424 @@
+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: 'e143d3c489688e407f713b20c5ae427797141bc6' }, h("style", { key: '99f08c09b494f7e16ef281f954714eff1182ae1f' }, __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '7d5a7b4fbe15ce43bea1a957efbf6314ea65c6c6', id: componentWrapperId }, h("div", { key: 'eababb5992fd22bcd6b1d036dc058eaf30554613', 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: '9f326f25f1976b64caac0bf0bb7c6390519df02d', type: "file", ref: (el) => (this.inputRef = el), onChange: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileChange).bind(this), multiple: true, hidden: true }), h("div", { key: '470189c4ff4e0376b0b46104e7b0748e09f2a52f', class: "file-upload__buttons" }, h(FButton, { key: 'c7b8810f0c783cdbe16c9f10cd569717de360602', 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: 'b0c4678d433916abfe9265760c2133f337e9c536', 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: '34205b6c5db56c861be73aa7471ba886884f0009', 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: 'fbbce7bf09bbdfa87d395773f3eaa1d39b995171', class: "file-upload__spinner-container" }, h("kup-spinner", { key: '2fb0b8832149034fd650d52aeddfc0e478ebadc0', 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();
+    this.uploadSuccess = false;
+    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.css

@@ -24,7 +24,7 @@
 
 .kup-label-01 {
   font-family: var(--kup-font-family);
-  font-size: 12px;
+  font-size: var(--kup-label-01-font-size, 12px);
   line-height: 16px;
   font-weight: 400;
   letter-spacing: 0.32px;
@@ -56,7 +56,7 @@
 
 .kup-heading-compact-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -64,7 +64,7 @@
 
 .kup-heading-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-01-font-size, 14px);
   line-height: 20px;
   font-weight: 600;
   letter-spacing: 0.16px;

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: '6899dc3e662b51db77418c6e37e6a9172f402656' }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA)));
+            formContent = (h("p", { key: '07600a04c3f15543fc67c6524d273bcbfbdae951' }, 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: '874201ef495207b04e74ea2320ae6d4f85f51896' }, h("style", { key: '6377d10866b65c575ad9004450cb9c0b1595e98c' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'e87722451d4d87812a483a5b9356ea9f0e4481fc', id: componentWrapperId }, formContent)));
+        return (h(Host, { key: '68a9e2e5b9c07904b53b265235b6c2b4fe9590e5' }, h("style", { key: '16282a283ab8f5a848c5675b0b27f2437b57f542' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'b37f1997e8891928f5a3d765b90bcc82c965aeb2', id: componentWrapperId }, formContent)));
     }
     disconnectedCallback() {
         this.kupManager.language.unregister(this);

package/dist/collection/components/kup-gauge/kup-gauge.css

@@ -24,7 +24,7 @@
 
 .kup-label-01 {
   font-family: var(--kup-font-family);
-  font-size: 12px;
+  font-size: var(--kup-label-01-font-size, 12px);
   line-height: 16px;
   font-weight: 400;
   letter-spacing: 0.32px;
@@ -56,7 +56,7 @@
 
 .kup-heading-compact-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -64,7 +64,7 @@
 
 .kup-heading-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-01-font-size, 14px);
   line-height: 20px;
   font-weight: 600;
   letter-spacing: 0.16px;

package/dist/collection/components/kup-grid/kup-grid.css

@@ -24,7 +24,7 @@
 
 .kup-label-01 {
   font-family: var(--kup-font-family);
-  font-size: 12px;
+  font-size: var(--kup-label-01-font-size, 12px);
   line-height: 16px;
   font-weight: 400;
   letter-spacing: 0.32px;
@@ -56,7 +56,7 @@
 
 .kup-heading-compact-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -64,7 +64,7 @@
 
 .kup-heading-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-01-font-size, 14px);
   line-height: 20px;
   font-weight: 600;
   letter-spacing: 0.16px;

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

@@ -24,7 +24,7 @@
 
 .kup-label-01 {
   font-family: var(--kup-font-family);
-  font-size: 12px;
+  font-size: var(--kup-label-01-font-size, 12px);
   line-height: 16px;
   font-weight: 400;
   letter-spacing: 0.32px;
@@ -56,7 +56,7 @@
 
 .kup-heading-compact-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -64,7 +64,7 @@
 
 .kup-heading-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-01-font-size, 14px);
   line-height: 20px;
   font-weight: 600;
   letter-spacing: 0.16px;

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: '0fba9ea3feb2ce426d647717b466eafd881925ba' }, h("style", { key: '96c71d0600f39cab4c271d934399dc260e39260e' }, __classPrivateFieldGet(this, _KupHTM_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '7ab9096b4f45f86dabfc922427412bb10e90c898', id: componentWrapperId }, h("div", { key: '24f260480432b9d80acbdd6525b5e4c85773101e', 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: '5a79767bda05f81fbfa3b44c06592ce9d338c859' }, h("style", { key: '4977d1d9a029a0669695ac206ecbd306b467cf21' }, __classPrivateFieldGet(this, _KupHTM_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'f8e7cdc3e1992853c090f3204fed1a0de76b904b', id: componentWrapperId }, h("div", { key: '0c6724dc5d6c2b8f53ca7573424aab59adbcf6a4', 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-iframe/kup-iframe.css

@@ -24,7 +24,7 @@
 
 .kup-label-01 {
   font-family: var(--kup-font-family);
-  font-size: 12px;
+  font-size: var(--kup-label-01-font-size, 12px);
   line-height: 16px;
   font-weight: 400;
   letter-spacing: 0.32px;
@@ -56,7 +56,7 @@
 
 .kup-heading-compact-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -64,7 +64,7 @@
 
 .kup-heading-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-01-font-size, 14px);
   line-height: 20px;
   font-weight: 600;
   letter-spacing: 0.16px;

package/dist/collection/components/kup-image/assets/svg/circle.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 12.0007C22 17.5236 17.5228 22.0007 12 22.0007C6.47715 22.0007 2 17.5236 2 12.0007C2 6.47789 6.47715 2.00074 12 2.00074C17.5228 2.00074 22 6.47789 22 12.0007Z" fill="#7B7B7B"/>
+</svg>

package/dist/collection/components/kup-image/assets/svg/up.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 256 256" style="enable-background:new 0 0 256 256;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.2;fill:#727272;enable-background:new    ;}
+	.st1{fill:none;}
+	.st2{clip-path:url(#SVGID_2_);}
+	.st3{clip-path:url(#SVGID_4_);fill:#747474;}
+</style>
+<rect x="0" y="-0.1" class="st0" width="255.8" height="255.9"/>
+<path class="st1" d="M58.8,60.1h134.7v134.7H58.8V60.1z"/>
+<g id="Disegno_10_1_">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="69.4" y="69.4" width="117.2" height="117.2"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st2">
+			<defs>
+				<rect id="SVGID_3_" x="69.4" y="69.4" width="117.2" height="117.2"/>
+			</defs>
+			<clipPath id="SVGID_4_">
+				<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+			</clipPath>
+			<path class="st3" d="M176.6,69.4H79.4c0,0-9.9,0-9.9,10.8v95.5c0,0,0,10.8,9.9,10.8h97.3c0,0,9.9,0,9.9-10.8V80.3
+				C186.6,80.3,186.6,69.4,176.6,69.4 M120.8,140.5c0,1.4-0.2,2.6-0.6,3.4c-0.4,0.9-1.3,1.7-2.7,2.5c-1.6,0.9-3.7,1.7-6.5,2.5
+				c-2.8,0.8-6.1,1.2-9.9,1.2c-6.8,0-12-1.5-15.6-4.5c-3.6-3-5.4-7.7-5.4-14.1v-29.6c0.3-0.1,0.9-0.3,1.6-0.5
+				c0.7-0.2,1.5-0.3,2.3-0.3c2.8,0,4.3,1.3,4.3,3.8v26.2c0,4.4,1.2,7.6,3.5,9.4c2.3,1.9,5.5,2.8,9.6,2.8c2.7,0,5-0.3,6.9-0.9
+				c1.9-0.6,3.4-1.2,4.5-1.8v-38.8c0.3-0.1,0.9-0.3,1.6-0.5c0.7-0.2,1.4-0.3,2.2-0.3c2.9,0,4.4,1.3,4.4,3.8V140.5z M174,136.3
+				c-1.1,3.1-2.7,5.7-4.7,7.8c-2,2.1-4.5,3.6-7.3,4.6c-2.8,1-5.9,1.5-9.2,1.5c-2.4,0-4.6-0.3-6.7-0.8c-2.1-0.5-3.8-1.2-5.2-1.9v19.8
+				c-0.3,0.1-0.8,0.3-1.5,0.5c-0.7,0.2-1.4,0.3-2.2,0.3c-2.9,0-4.4-1.3-4.4-3.8v-53.8c0-1.4,0.2-2.4,0.7-3.3c0.5-0.8,1.5-1.7,3-2.5
+				c1.8-1,4-2,6.6-2.8c2.5-0.8,5.4-1.3,8.7-1.3c3.3,0,6.5,0.5,9.4,1.4c3,1,5.5,2.4,7.6,4.4c2.1,2,3.8,4.6,5.1,7.7
+				c1.3,3.1,1.9,6.9,1.9,11.2C175.7,129.5,175.1,133.1,174,136.3"/>
+			<path class="st3" d="M162.7,111.2c-1.5-1.4-3.1-2.4-5-3.1c-1.9-0.6-3.9-0.9-6-0.9c-2.4,0-4.5,0.3-6.2,0.9c-1.7,0.6-3.2,1.3-4.6,2
+				v30c1.3,1,2.8,1.7,4.6,2.3c1.8,0.6,3.8,0.9,6.2,0.9c4.8,0,8.6-1.4,11.5-4.3c2.9-2.9,4.3-7.5,4.3-13.9c0-3.3-0.4-6.1-1.3-8.5
+				C165.3,114.5,164.2,112.6,162.7,111.2"/>
+		</g>
+	</g>
+</g>
+</svg>

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

@@ -24,7 +24,7 @@
 
 .kup-label-01 {
   font-family: var(--kup-font-family);
-  font-size: 12px;
+  font-size: var(--kup-label-01-font-size, 12px);
   line-height: 16px;
   font-weight: 400;
   letter-spacing: 0.32px;
@@ -56,7 +56,7 @@
 
 .kup-heading-compact-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -64,7 +64,7 @@
 
 .kup-heading-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-01-font-size, 14px);
   line-height: 20px;
   font-weight: 600;
   letter-spacing: 0.16px;