@sme.up/ketchup 11.0.0-SNAPSHOT-20241023082921 → 11.0.0-SNAPSHOT-20241023092659

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

@@ -0,0 +1,225 @@
+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 _KupHTM_kupManager;
+import { forceUpdate, h, Host, Fragment, } from "@stencil/core";
+import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
+import { componentWrapperId } from "../../variables/GenericVariables";
+import { getProps, setProps } from "../../utils/utils";
+import { KupHTMProps } from "./kup-htm-declarations";
+import { KupLanguageGeneric } from "../../managers/kup-language/kup-language-declarations";
+export class KupHTM {
+    constructor() {
+        /*-------------------------------------------------*/
+        /*       I n t e r n a l   V a r i a b l e s       */
+        /*-------------------------------------------------*/
+        _KupHTM_kupManager.set(this, kupManagerInstance());
+        this.data = undefined;
+    }
+    /*-------------------------------------------------*/
+    /*           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, KupHTMProps, 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, KupHTMProps, props);
+    }
+    /*-------------------------------------------------*/
+    /*          L i f e c y c l e   H o o k s          */
+    /*-------------------------------------------------*/
+    componentWillLoad() {
+        __classPrivateFieldGet(this, _KupHTM_kupManager, "f").debug.logLoad(this, false);
+        __classPrivateFieldGet(this, _KupHTM_kupManager, "f").theme.register(this);
+        __classPrivateFieldGet(this, _KupHTM_kupManager, "f").language.register(this);
+    }
+    componentDidLoad() {
+        this.kupReady.emit({
+            comp: this,
+            id: this.rootElement.id,
+        });
+        __classPrivateFieldGet(this, _KupHTM_kupManager, "f").debug.logLoad(this, true);
+    }
+    componentWillRender() {
+        __classPrivateFieldGet(this, _KupHTM_kupManager, "f").debug.logRender(this, false);
+    }
+    componentDidRender() {
+        __classPrivateFieldGet(this, _KupHTM_kupManager, "f").debug.logRender(this, true);
+    }
+    render() {
+        const isLink = __classPrivateFieldGet(this, _KupHTM_kupManager, "f").objects.isLink(this.data.obj);
+        return (h(Host, { key: 'e973cfb80ddc6aba894dd2994b3be82fc93a07bc' }, h("style", { key: 'cd5f18859b77dfbaa1008cfe37183e18780b8e38' }, __classPrivateFieldGet(this, _KupHTM_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '69a912436a0c644bbe0ca38efe2aff60c31b15e4', id: componentWrapperId }, h("div", { key: '5e057d8c92cbfd479a57c10c205e96be51475007', 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);
+        __classPrivateFieldGet(this, _KupHTM_kupManager, "f").language.unregister(this);
+    }
+    static get is() { return "kup-htm"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kup-htm.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kup-htm.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupDataCell",
+                    "resolved": "KupDataCell",
+                    "references": {
+                        "KupDataCell": {
+                            "location": "import",
+                            "path": "../../managers/kup-data/kup-data-declarations",
+                            "id": "src/managers/kup-data/kup-data-declarations.ts::KupDataCell"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Data containing the url or html."
+                }
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "kupReady",
+                "name": "kup-htm-ready",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered when the component is ready."
+                },
+                "complexType": {
+                    "original": "KupEventPayload",
+                    "resolved": "KupEventPayload",
+                    "references": {
+                        "KupEventPayload": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::KupEventPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    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."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "rootElement"; }
+}
+_KupHTM_kupManager = new WeakMap();
+//# sourceMappingURL=kup-htm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kup-htm.js","sourceRoot":"","sources":["../../../src/components/kup-htm/kup-htm.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,WAAW,EACX,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,QAAQ,GACX,MAAM,eAAe,CAAC;AACvB,OAAO,EAEH,kBAAkB,GACrB,MAAM,wCAAwC,CAAC;AAEhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAMtE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uDAAuD,CAAC;AAO3F,MAAM,OAAO,MAAM;;QAgBf,qDAAqD;QACrD,qDAAqD;QACrD,qDAAqD;QAErD,6BAA0B,kBAAkB,EAAE,EAAC;;;IAiB/C,qDAAqD;IACrD,qDAAqD;IACrD,qDAAqD;IAErD;;;;OAIG;IAEH,KAAK,CAAC,QAAQ,CAAC,YAAsB;QACjC,OAAO,QAAQ,CAAC,IAAI,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;IACrD,CAAC;IACD;;OAEG;IAEH,KAAK,CAAC,OAAO;QACT,WAAW,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC;IACD;;;OAGG;IAEH,KAAK,CAAC,QAAQ,CAAC,KAAoB;QAC/B,QAAQ,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC;IACvC,CAAC;IAED,qDAAqD;IACrD,qDAAqD;IACrD,qDAAqD;IAErD,iBAAiB;QACb,uBAAA,IAAI,0BAAY,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC5C,uBAAA,IAAI,0BAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACtC,uBAAA,IAAI,0BAAY,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,CAAC;IAED,gBAAgB;QACZ,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACf,IAAI,EAAE,IAAI;YACV,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,EAAE;SAC1B,CAAC,CAAC;QACH,uBAAA,IAAI,0BAAY,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC/C,CAAC;IAED,mBAAmB;QACf,uBAAA,IAAI,0BAAY,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAClD,CAAC;IAED,kBAAkB;QACd,uBAAA,IAAI,0BAAY,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACjD,CAAC;IAED,MAAM;QACF,MAAM,MAAM,GAAG,uBAAA,IAAI,0BAAY,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE9D,OAAO,CACH,EAAC,IAAI;YACD,gEACK,uBAAA,IAAI,0BAAY,CAAC,KAAK,CAAC,WAAW,CAC/B,IAAI,CAAC,WAA2B,CACnC,CACG;YACR,4DAAK,EAAE,EAAE,kBAAkB;gBACvB,4DAAK,KAAK,EAAE,WAAW,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,IAC3C,MAAM,CAAC,CAAC,CAAC,CACN,EAAC,QAAQ;oBACL,SACI,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,EACrB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,IAExB,uBAAA,IAAI,0BAAY,CAAC,QAAQ,CAAC,SAAS,CAChC,kBAAkB,CAAC,eAAe,CACrC,CACD;oBACJ,cACI,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,EACpB,WAAW,EAAC,GAAG,GACT,CACH,CACd,CAAC,CAAC,CAAC,CACA,WAAK,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,GAAI,CACtC,CACC,CACJ,CACH,CACV,CAAC;IACN,CAAC;IAED,oBAAoB;QAChB,uBAAA,IAAI,0BAAY,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACxC,uBAAA,IAAI,0BAAY,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    forceUpdate,\n    h,\n    Host,\n    Method,\n    Prop,\n    Fragment,\n} from '@stencil/core';\nimport {\n    KupManager,\n    kupManagerInstance,\n} from '../../managers/kup-manager/kup-manager';\nimport { KupDataCell } from '../../managers/kup-data/kup-data-declarations';\nimport { componentWrapperId } from '../../variables/GenericVariables';\nimport {\n    GenericObject,\n    KupComponent,\n    KupEventPayload,\n} from '../../types/GenericTypes';\nimport { getProps, setProps } from '../../utils/utils';\nimport { KupHTMProps } from './kup-htm-declarations';\nimport { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';\n\n@Component({\n    tag: 'kup-htm',\n    styleUrl: 'kup-htm.scss',\n    shadow: true,\n})\nexport class KupHTM {\n    /**\n     * References the root HTML element of the component (<kup-htm>).\n     */\n    @Element() rootElement: HTMLElement;\n\n    /*-------------------------------------------------*/\n    /*                    P r o p s                    */\n    /*-------------------------------------------------*/\n\n    /**\n     *  Data containing the url or html.\n     * @default null\n     */\n    @Prop() data: KupDataCell;\n\n    /*-------------------------------------------------*/\n    /*       I n t e r n a l   V a r i a b l e s       */\n    /*-------------------------------------------------*/\n\n    #kupManager: KupManager = kupManagerInstance();\n\n    /*-------------------------------------------------*/\n    /*                   E v e n t s                   */\n    /*-------------------------------------------------*/\n\n    /**\n     * Triggered when the component is ready.\n     */\n    @Event({\n        eventName: 'kup-htm-ready',\n        composed: true,\n        cancelable: false,\n        bubbles: true,\n    })\n    kupReady: EventEmitter<KupEventPayload>;\n\n    /*-------------------------------------------------*/\n    /*           P u b l i c   M e t h o d s           */\n    /*-------------------------------------------------*/\n\n    /**\n     * Used to retrieve component's props values.\n     * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.\n     * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.\n     */\n    @Method()\n    async getProps(descriptions?: boolean): Promise<GenericObject> {\n        return getProps(this, KupHTMProps, descriptions);\n    }\n    /**\n     * This method is used to trigger a new render of the component.\n     */\n    @Method()\n    async refresh(): Promise<void> {\n        forceUpdate(this);\n    }\n    /**\n     * Sets the props to the component.\n     * @param {GenericObject} props - Object containing props that will be set to the component.\n     */\n    @Method()\n    async setProps(props: GenericObject): Promise<void> {\n        setProps(this, KupHTMProps, props);\n    }\n\n    /*-------------------------------------------------*/\n    /*          L i f e c y c l e   H o o k s          */\n    /*-------------------------------------------------*/\n\n    componentWillLoad() {\n        this.#kupManager.debug.logLoad(this, false);\n        this.#kupManager.theme.register(this);\n        this.#kupManager.language.register(this);\n    }\n\n    componentDidLoad() {\n        this.kupReady.emit({\n            comp: this,\n            id: this.rootElement.id,\n        });\n        this.#kupManager.debug.logLoad(this, true);\n    }\n\n    componentWillRender() {\n        this.#kupManager.debug.logRender(this, false);\n    }\n\n    componentDidRender() {\n        this.#kupManager.debug.logRender(this, true);\n    }\n\n    render() {\n        const isLink = this.#kupManager.objects.isLink(this.data.obj);\n\n        return (\n            <Host>\n                <style>\n                    {this.#kupManager.theme.setKupStyle(\n                        this.rootElement as KupComponent\n                    )}\n                </style>\n                <div id={componentWrapperId}>\n                    <div class={`kup-htm ${isLink ? 'is-link' : ''}`}>\n                        {isLink ? (\n                            <Fragment>\n                                <a\n                                    href={this.data.value}\n                                    target=\"_blank\"\n                                    rel=\"noopener noreferrer\"\n                                >\n                                    {this.#kupManager.language.translate(\n                                        KupLanguageGeneric.OPEN_IN_NEW_TAB\n                                    )}\n                                </a>\n                                <iframe\n                                    src={this.data.value}\n                                    frameBorder=\"0\"\n                                ></iframe>\n                            </Fragment>\n                        ) : (\n                            <div innerHTML={this.data.value} />\n                        )}\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n\n    disconnectedCallback() {\n        this.#kupManager.theme.unregister(this);\n        this.#kupManager.language.unregister(this);\n    }\n}\n"]}

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

@@ -201,14 +201,14 @@ export class KupImageList {
             };
             combinedGridStyle = Object.assign(Object.assign({}, combinedGridStyle), gridRowsStyle);
         }
-        return (h(Host, { key: 'a739d3569084048dfbfbcfb797a1a69e3b30647f' }, h("style", { key: '5703cab616be68410bfcc78016598049e939caf5' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'dcac9252c2ec7bfad10836a4e7193289612a7179', id: componentWrapperId, ref: (el) => {
+        return (h(Host, { key: '81da022bca5cec8e7a25ae5854126fc8d1df1949' }, h("style", { key: 'e7ca04de4d67ec2bfd6b069f560c9cf5f131a235' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'bb9852654bdef8112a36d4fe096a39e4b925cd0c', id: componentWrapperId, ref: (el) => {
                 __classPrivateFieldSet(this, _KupImageList_el, el, "f");
-            } }, h("div", { key: '21c0bc1aab2d618da88ccb4dbbf240afc5146cb2', class: "navigation-bar" }, hasNavigation ? (h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
+            } }, h("div", { key: '3547692cbbe395329b3f9ee5f6c5a9c35171e7a6', 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: 'f2a6f4fecf1a38fc173ab4569277772baf8e91b0', class: "image-list", 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: '60eb2ce4d81bfdaf39310d9276edfab440200ab6', class: "image-list", 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.js

@@ -175,7 +175,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: '93af46e356581180658ec85aacb6315d0fc23770' }, h("style", { key: '99c8f160706db2a9c5419b574f39adcbf1df8a5a' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '21a361de12cecf8363088cbb936ce5337ee45e63', id: componentWrapperId }, inputPanelContent)));
+        return (h(Host, { key: '62cdea4b11e55aaf3a71231851f798bee78bf60e' }, h("style", { key: 'de02343d1c662d98d2fb9acce6222072cf61e4fb' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '76c0582d6e71eff483aa177d252eea61b7804f1b', 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: '142ecf1bc4606810244eee4d37220b10dfb13c33', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '09ac2094fee710434998fe06d2fbac5ab0ea2bab', 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: '220fa65d9836c520dfed8e3dae2700c6b2b0cb9a', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '1d1e33f3ed89c32e6ee9ad2b1996fb65037cc3f2', 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: 'dd62523adb23354d1c2f9a786a45250d6dc30eb7', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'b821b9703a1b37f39c866d24ffd9106d369d2279', 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: 'd799cc013987de74e23c34201ecd2186c57b13f1', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'de98ef94a3f714e45e56a02877d4a139a8804424', 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: '3b2d93abfa208eb9dd0f8b159b51c2268c4daab4', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '0e41239707e74680252d041a8e6d14e1c4b9bb74', 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: '26ad78503d5c00f5b902b2bddb782a14f1a13b73', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '03ae544d551c47e0dce8f8fbaa92b1a2a1024c55', 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: 'b2bf0893222cb4fa17069327b4df6c432f3f912a', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: 'f0ed2001a3697f63cafb42c95c275e2522d431fa', d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
+                resource = (h("svg", { key: 'cc70b61653552ff28e1b6eda65ca7bec5bbbe7d2', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: 'f63b011d43b7c6649e1392de9426b325259e9f38', d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
                 break;
             case 'kup-data-table':
                 //table-large.svg
-                resource = (h("svg", { key: '084d0f8abaa50390fe0f1e7cbcce5ea771937d35', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '442510a55fa566bd83b2f631c05d778d4be7d5fe', 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: '3c6218a9e78c22aa2cfdd787a77fd7575409b926', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '28aaf9eb0e27fd2ad901866bd1f93ff181eba283', 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: 'c2dd9ee9c12dcf7b782f0bdd04370da959dafb1a', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'bcf61cc6292bb257e361d11e3a1097eb98f6597a', 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: '695002a63b98d0c090f350df167e2dec9b85c8f6', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '160f2450a206b3da182ef9514e41d0e9cfebd7dd', 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: '2dec9530bdb12f97736d48518edfe5294cca0214', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'a1bdb54b3d9570d154a65ed27d77c4681672c601', 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: 'e7f09d307522f61e8448975f881fb435f0c585bd', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '2ad28af4bed1da877edb16db6acdc392bfbfb47b', 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: '452bb4adbfc904d56c3298b32beac0281abb7353', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'd5b58baa6fbb481587efd2384dd5fb30f2f1ef9e', 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: 'c60a5e10b12c2945bdc8d0558d1fb9c46cb4ca90', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'f016960b177263ba06c3b63c4761fef4a06a4fd3', 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: '08e04f703cbe01a686aaa2056b31d956d8c1ea39', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '11e39f63de784e1600605fd35fa2d9b506fdeb87', 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: 'f221046bcd689deebeb597f557d547292518a34a', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '8cd9ec1705efd526543348dcfe793c0705399482', 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: '085714fe736dba6ddf9c94d0a2243f792d040675' }, this.data, { ref: (el) => (this.lazyComponent = el) })));
+            content = (h(Tag, Object.assign({ key: 'b856e5475a8fc048cf96c0ee534f17fa2ad261fe' }, 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: '802fd7017a1f67bd03d02b6458c2b77c1f8465a6', class: className }, h("style", { key: 'c2d8c919c9b72fef9e7cb5826f026983ce6cd6fe' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '6ce3ca10b77781163bc8f97c963bf2fa207a2e05', id: componentWrapperId }, content)));
+        return (h(Host, { key: 'de01035df24b5d3811ca54bb3840bf232287103d', class: className }, h("style", { key: 'db6f4fe85ed90c8a17b598a4805eff35fbfc11af' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '00c41dbaa1579061edf0b9472b19e6c5c8f24eb9', 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: 'f472c456d846a8db13368b9f54e5a092225f22d3' }, h("style", { key: '0d90e35e265af8810a2b5873b7bef9dd48fb9bd8' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '87cdb1e3bdcb196b71031c160aa6608dbd298c5c', id: componentWrapperId }, h("div", { key: 'c99994dc335f14d63208b0fee2b67632c0ff1161', class: "magic-box-wrapper" }, h("div", { key: 'b318cdac704373547ece7c0a4e770a6b83a1c784', class: "actions", id: "drag-handle" }, h("kup-combobox", Object.assign({ key: '77800dd052310dade4154a339e08e6e25c0d8cb7' }, this.comboboxProps())), h("kup-button", { key: 'ad5e58acb8806b8f9f271e9ed33aa61f5ec0d0cd', styling: FButtonStyling.FLAT, icon: "delete", label: "Reset", "onkup-button-click": () => {
+        return (h(Host, { key: '8f04a5029dad9d7d8f3673124a6fb954880719d5' }, h("style", { key: 'af43ffc44c345efb6982aecac7ffeb7469a1e1ab' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '4da32884b8cfaee501fe98de3ad61dbfd40644f1', id: componentWrapperId }, h("div", { key: '3ae6ee9f2ee07d1ace113fe223bf45fe907eb1d2', class: "magic-box-wrapper" }, h("div", { key: '7331459e7beeecbad1f94907c5dfc37e6fd77221', class: "actions", id: "drag-handle" }, h("kup-combobox", Object.assign({ key: 'cf49975df5a5aa923c031c64ecee9a81ae4ad0bc' }, this.comboboxProps())), h("kup-button", { key: '9268ce09ec663aa4e00a82ba0fadef493422d12f', styling: FButtonStyling.FLAT, icon: "delete", label: "Reset", "onkup-button-click": () => {
                 this.data = null;
-            } }), h("kup-button", { key: '243a20cf6a6bbd9182290d4bdf6994386bf79d94', id: "close-dialog", customStyle: `:host{${KupThemeColorValues.PRIMARY}: var(${KupThemeColorValues.TITLE});}`, icon: "clear", "onkup-button-click": () => {
+            } }), h("kup-button", { key: '3724463433b93aa9ae13ae19d67be8fc39c702f6', id: "close-dialog", customStyle: `:host{${KupThemeColorValues.PRIMARY}: var(${KupThemeColorValues.TITLE});}`, icon: "clear", "onkup-button-click": () => {
                 this.kupManager.hideMagicBox();
-            } })), h("div", { key: '35cae487666a6cadd2e205971b080692a84e2d7f', class: "content", ref: (el) => (this.wrapperRef = el) }, this.setContent())))));
+            } })), h("div", { key: '448858d039c7cd0ea8e756d9ad66af2b3baf5c52', 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: 'b53200bbb8e99b1357a1f12747f22aa1c7e0ef38', class: "header" }, h("style", { key: 'c84079987ac63f9eabde7379f37c5cb35d0b3134' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '9773a5835ae5514ed277f27c1643ff2de73051b9', id: componentWrapperId }, h("header", { key: '11afd8d7c2cbdadd3fb7f991f60d8cacdaa4647a', class: `${navbarClass} ${navbarClass}--${this.styling.toLowerCase()} ` }, h("div", { key: 'b5724ddecf17ebeafb772a2289378d7783ac5c37', class: `${navbarClass}__row` }, this.content())))));
+        return (h(Host, { key: '0f66ceb53da3d4bdc00787c80ef4764a79d76af8', class: "header" }, h("style", { key: '6435752fbe5f0ae68649ea4c43fee53afeb2dbca' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '607495825d0febc2dd41dcfecf0ecc78924e4679', id: componentWrapperId }, h("header", { key: '21667d9c45e86eab6c011247e1717b757d92dfd4', class: `${navbarClass} ${navbarClass}--${this.styling.toLowerCase()} ` }, h("div", { key: 'da92e4ddd4ff70b4fa9632233b0345d4843bee60', 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: '6facc37e24731377be34e65dcc123692e5c3e828' }, h("style", { key: '54b8ddc07dc8d32c3b72da8ab2734e760d867c1b' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'e8c0c5d2bbee71b78cd513554d2708c9f9b0f2c1', id: componentWrapperId }, this.prepTextfield())));
+        return (h(Host, { key: '60d9439b1beeca08cd1f5d7722c8c44b387f0ea6' }, h("style", { key: 'a240244c3350a93cf6411582d4ca5a6b44775328' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '8a07726204a12434f2f00fbd88fcc926b9b0de18', id: componentWrapperId }, this.prepTextfield())));
     }
     disconnectedCallback() {
         this.kupManager.dates.unregister(this);

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

@@ -105,7 +105,7 @@ export class KupPdf {
         catch (error) { }
     }
     render() {
-        return (h(Host, { key: '2a3b734bf003893e73498e706f61496e2d12bb21' }, h("div", { key: '71419dc64be983e72599bcff5565390966d9afe0', id: componentWrapperId, ref: (el) => (this.wrapperRef = el) })));
+        return (h(Host, { key: 'fee8236cc49ba230b6e0f03578a627da544d2b0f' }, h("div", { key: '7c8bd36dc5c78f67d7a210e239d9279281741d5f', id: componentWrapperId, ref: (el) => (this.wrapperRef = el) })));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupPdf_kupManager, "f").theme.unregister(this);

package/dist/collection/components/kup-photo-frame/kup-photo-frame.js

@@ -99,9 +99,9 @@ export class KupPhotoFrame {
         if (this.isInViewport && !__classPrivateFieldGet(this, _KupPhotoFrame_renderResource, "f")) {
             __classPrivateFieldSet(this, _KupPhotoFrame_renderResource, true, "f");
         }
-        return (h(Host, { key: '96e9dc9b29a8715944440efb3cde806001db9841' }, h("style", { key: '1a9d6f8d9163c49ec458f52fcc47e3b83b37fd95' }, __classPrivateFieldGet(this, _KupPhotoFrame_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'c41d71aba188a432bcbbd1e81234d4eb84ac5cad', id: componentWrapperId, ref: (el) => {
+        return (h(Host, { key: '1f1b2dda7b9619e04131d9dbc11291542f1c7631' }, h("style", { key: '44413efc368dbc28957c544475889f184ef1a16b' }, __classPrivateFieldGet(this, _KupPhotoFrame_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '05a0107e2d49e41242312ab842ed63eea72e2321', id: componentWrapperId, ref: (el) => {
                 __classPrivateFieldSet(this, _KupPhotoFrame_wrapperEl, el, "f");
-            } }, h("img", Object.assign({ key: '66a44a24938c4fa72cd984729d2c5edd37c357eb' }, this.placeholderAttrs, { class: "placeholder", ref: (el) => (__classPrivateFieldSet(this, _KupPhotoFrame_placeholderEl, el, "f")), onLoad: () => {
+            } }, h("img", Object.assign({ key: '029fbad45e5aba99bbab99c52f5ba30ee74e1c1d' }, this.placeholderAttrs, { class: "placeholder", ref: (el) => (__classPrivateFieldSet(this, _KupPhotoFrame_placeholderEl, el, "f")), onLoad: () => {
                 if (__classPrivateFieldGet(this, _KupPhotoFrame_placeholderEl, "f").naturalWidth >
                     __classPrivateFieldGet(this, _KupPhotoFrame_placeholderEl, "f").naturalHeight) {
                     __classPrivateFieldGet(this, _KupPhotoFrame_wrapperEl, "f").classList.add('horizontal');

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

@@ -523,7 +523,7 @@ export class KupPlanner {
         if ((_b = this.plannerProps) === null || _b === void 0 ? void 0 : _b.secondaryGantt) {
             plannerProps.secondaryGantt = Object.assign(Object.assign({}, this.plannerProps.secondaryGantt), { onScrollY: this.handleDetailGanttScrollY.bind(this) });
         }
-        return (h(Host, { key: 'ab02db06dbbc4cec735bfe4a94be886dccdd074b' }, h("style", { key: 'a8e138dc9432e9a72e35c5ebbdd90a6ac7a4cdcb' }, __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '5a7c342a7ca934a076dce7ff708cb4d7c24f430a', id: componentWrapperId, style: { maxWidth: this.maxWidth } }, this.plannerProps && (h("kup-planner-renderer", { key: 'fb472e15412e52ab4df9fb3c64d37bb00c6d3bfc', props: plannerProps, ref: (el) => (this.plannerRenderer = el) }))), h("div", { key: '96a4a1cc970e0e1babf8814becbd057eb3c02ee4', style: { display: this.plannerProps ? 'none' : '' } }, h(FTextField, { key: 'ff0b0c6354de9bad576fa94012693e74565c0392', icon: KupThemeIconValues.SEARCH, id: "main-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
+        return (h(Host, { key: 'ec595d6944c84d1ff3419a4f9ea4b05b9daa7c8c' }, h("style", { key: '9476707409a3f42a4053432d9516fda679f96341' }, __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'ebcc7405f609f4ecffee385e5c3e710e67e67493', id: componentWrapperId, style: { maxWidth: this.maxWidth } }, this.plannerProps && (h("kup-planner-renderer", { key: '9cb8c0178398029f74dded13fb14d96d5a3f3652', props: plannerProps, ref: (el) => (this.plannerRenderer = el) }))), h("div", { key: '227fba551833686254d2f9d904093fb1cd6afb31', style: { display: this.plannerProps ? 'none' : '' } }, h(FTextField, { key: '4cb494e54f8ca483dd46165b606ab1b54c5da58a', icon: KupThemeIconValues.SEARCH, id: "main-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
                 if (e.key === 'Enter') {
                     __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_onFilter).call(this, e.target.value);
                 }

package/dist/collection/components/kup-planner/utils/custom-task-list-header.js

@@ -8,11 +8,11 @@ export class KupCustomTaskListHeader {
         this.fontSize = undefined;
     }
     render() {
-        return (h("div", { key: 'ecc21b370cd5f68c2928ef67a30632fda38be930', class: "custom-task-list-wrapper", style: {
+        return (h("div", { key: 'dfcd0fb852559b2ffcb4fb167c7639d3f7debf8b', class: "custom-task-list-wrapper", style: {
                 height: '25px',
                 fontFamily: this.fontFamily,
                 fontSize: this.fontSize,
-            } }, h("div", { key: '86caff8ac99996d0cc06b9597df5df1d795f4fc0', class: "title" }, h("span", { key: 'cb691bc12b557add501a84c7149e10d84ee5c727' }, this.label)), this.setDoubleView !== undefined && (h("div", { key: '928749a2d5262e797f41f20670fe71ffb7808cb7', class: "toggler" }, h("label", { key: 'fe9abaea6c7db34d10b4965e96280d4c886f9800', htmlFor: "ch2", class: "switch" }, h("input", { key: 'fd77a93eab96b375ab6093a31309c50be2eeb745', class: "input", id: "ch2", type: "checkbox", checked: this.doubleView, onClick: () => this.setDoubleView(!this.doubleView) }), h("span", { key: '91626e6138c5efb0fd95517a6d6fcf4580853851', class: "slider" })), h("span", { key: 'ce4ec303663fed2ef214806f74c4a62b939bddcc', class: "label" }, "Previsioni")))));
+            } }, h("div", { key: '59e157d30f9573922fa456b1f6ea1132fc192089', class: "title" }, h("span", { key: '73a2095bf91d0846df1ad2bf1fb2d7425b3210f0' }, this.label)), this.setDoubleView !== undefined && (h("div", { key: 'fcc17da264378828c9494c571f24f8c072508dd0', class: "toggler" }, h("label", { key: '94edc43752e00d5b12fa516712b6eb7230720891', htmlFor: "ch2", class: "switch" }, h("input", { key: '3a0c8a9cbae7a67f93afea19013cccdd9a97c053', class: "input", id: "ch2", type: "checkbox", checked: this.doubleView, onClick: () => this.setDoubleView(!this.doubleView) }), h("span", { key: '5fd1f6bcfe2f27d73f1c84938dda32c8fdebbf67', class: "slider" })), h("span", { key: '117ddb88804955dbad7f5acc69fcfc1b4701fccb', class: "label" }, "Previsioni")))));
     }
     static get is() { return "kup-custom-task-list-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/kup-planner/utils/kup-gantt/kup-gantt.js

@@ -563,9 +563,9 @@ export class KupGantt {
             TaskListHeader: this.TaskListHeader,
             TaskListTable: this.TaskListTable
         };
-        return (h("div", { key: '289593765ef7125e06f4c4494afda7c7826a425a', class: "gannt-wrapper-main" }, h("div", { key: '7331caa09620441f546ef4e392489f7e7141f0b1', class: "wrapper", onKeyDown: this.handleKeyDown.bind(this), tabIndex: 0, ref: (el) => (this.wrapperRef = el) }, this.listCellWidth && (h("kup-task-list", Object.assign({ key: '94888a0b29649deede01fc1ee50bff7329a0e0a6', currentTasks: this.currentTasks, handleClick: this.handleClick, handleDblClick: this.handleDblClick, handleContextMenu: this.handleContextMenu, ganttOnClick: this.ganttOnClick, ganttOnDblClick: this.ganttOnDblClick, ganttonOnContextMenu: this.ganttonOnContextMenu, label: this.label, doubleView: this.doubleView, setDoubleView: this.setDoubleView }, tableProps, { class: "tasks", scrollableTaskList: this.scrollableTaskList, updateTaskListScrollX: this.ignoreScrollEvent, ontaskListScrollWidth: (width) => {
+        return (h("div", { key: '836af3f1012d6eb8276048866fc9a976b349775e', class: "gannt-wrapper-main" }, h("div", { key: '67654e8431be67e00d1bff668d9d90b3a7b3b21f', class: "wrapper", onKeyDown: this.handleKeyDown.bind(this), tabIndex: 0, ref: (el) => (this.wrapperRef = el) }, this.listCellWidth && (h("kup-task-list", Object.assign({ key: '2e419799a7a5ad604357225ec48b6be0b6a9353a', currentTasks: this.currentTasks, handleClick: this.handleClick, handleDblClick: this.handleDblClick, handleContextMenu: this.handleContextMenu, ganttOnClick: this.ganttOnClick, ganttOnDblClick: this.ganttOnDblClick, ganttonOnContextMenu: this.ganttonOnContextMenu, label: this.label, doubleView: this.doubleView, setDoubleView: this.setDoubleView }, tableProps, { class: "tasks", scrollableTaskList: this.scrollableTaskList, updateTaskListScrollX: this.ignoreScrollEvent, ontaskListScrollWidth: (width) => {
                 this.taskListScrollWidth = width;
-            }, taskListScrollX: this.taskListScrollX, ref: (el) => (this.taskListTrueRef = el) }))), h("kup-task-gantt", { key: '80ba048340da0aae3a00ba3536fc0a1563fdcaf8', gridProps: gridProps, calendarProps: calendarProps, barProps: barProps, ganttHeight: this.ganttHeight, taskGanttRef: this.taskGanttRef, scrollY: this.scrollY, scrollX: this.scrollX, phaseDragScroll: this.handlePhaseDragScroll.bind(this), class: "ganttContainer" }), this.ganttEvent.changedTask && (h("kup-tooltip", { key: 'e27894aa55d62e3dc59a07a05fb3aaeaaf3c9b40', arrowIndent: this.arrowIndent, rowHeight: this.rowHeight, svgContainerHeight: this.svgContainerHeight, svgContainerWidth: this.svgContainerWidth, fontFamily: this.fontFamily, fontSize: this.fontSize, scrollX: this.scrollX, scrollY: this.scrollY, task: this.ganttEvent.changedTask, headerHeight: this.headerHeight, taskListWidth: this.taskListWidth, TooltipContent: this.TooltipContent, rtl: this.rtl, svgWidth: this.svgWidth })), h("kup-vertical-scroll", { key: '52380d31a6dc13aac1eb97d41f9e9c3a5d05a2e8', ganttFullHeight: this.ganttFullHeight, ganttHeight: this.ganttHeight, headerHeight: this.headerHeight, scrollNumber: this.scrollY, verticalScroll: this.handleScrollY.bind(this), rtl: this.rtl })), this.taskGanttRef && (h("kup-horizontal-scroll", { key: '2a9aedcb55249a1c027cafaa8230d17896353ec0', svgWidth: this.svgWidth, taskListTrueRef: this.taskListTrueRef, taskListWidth: this.taskListWidth, scrollNumber: this.scrollX, rtl: this.rtl, horizontalScroll: this.handleScrollX.bind(this), horizontalTaskListScroll: this.handleTaskListScrollX.bind(this), listCellWidth: this.listCellWidth, scrollableTaskList: this.scrollableTaskList, taskListScrollWidth: this.taskListScrollWidth, taskListScrollNumber: this.taskListScrollX }))));
+            }, taskListScrollX: this.taskListScrollX, ref: (el) => (this.taskListTrueRef = el) }))), h("kup-task-gantt", { key: '4587424ff6d24d47b471cfc28972cb34e42ba0c7', gridProps: gridProps, calendarProps: calendarProps, barProps: barProps, ganttHeight: this.ganttHeight, taskGanttRef: this.taskGanttRef, scrollY: this.scrollY, scrollX: this.scrollX, phaseDragScroll: this.handlePhaseDragScroll.bind(this), class: "ganttContainer" }), this.ganttEvent.changedTask && (h("kup-tooltip", { key: 'a2c655b425591b41492f4b77c9f8e3b1130565a4', arrowIndent: this.arrowIndent, rowHeight: this.rowHeight, svgContainerHeight: this.svgContainerHeight, svgContainerWidth: this.svgContainerWidth, fontFamily: this.fontFamily, fontSize: this.fontSize, scrollX: this.scrollX, scrollY: this.scrollY, task: this.ganttEvent.changedTask, headerHeight: this.headerHeight, taskListWidth: this.taskListWidth, TooltipContent: this.TooltipContent, rtl: this.rtl, svgWidth: this.svgWidth })), h("kup-vertical-scroll", { key: '2122835b9bf5929d76ee7cf28c60be64bc2b2a01', ganttFullHeight: this.ganttFullHeight, ganttHeight: this.ganttHeight, headerHeight: this.headerHeight, scrollNumber: this.scrollY, verticalScroll: this.handleScrollY.bind(this), rtl: this.rtl })), this.taskGanttRef && (h("kup-horizontal-scroll", { key: '167011334f0919c9df59bb91c54be5d039a8e261', svgWidth: this.svgWidth, taskListTrueRef: this.taskListTrueRef, taskListWidth: this.taskListWidth, scrollNumber: this.scrollX, rtl: this.rtl, horizontalScroll: this.handleScrollX.bind(this), horizontalTaskListScroll: this.handleTaskListScrollX.bind(this), listCellWidth: this.listCellWidth, scrollableTaskList: this.scrollableTaskList, taskListScrollWidth: this.taskListScrollWidth, taskListScrollNumber: this.taskListScrollX }))));
     }
     static get is() { return "kup-gantt"; }
     static get originalStyleUrls() {

package/dist/collection/components/kup-planner/utils/kup-gantt-calendar/kup-gantt-calendar.js

@@ -225,11 +225,11 @@ export class KupGanttCalendar {
         this.simplifiedHeader =
             this.singleLineHeader && this.dateSetup.viewMode !== 'year';
         const [topValues, bottomValues] = this.getTopAndBottomValues();
-        return (h("svg", { key: 'eb5996256c199bb4d5f60df2d1f9c7378a480e0f', xmlns: "http://www.w3.org/2000/svg", width: this.svgWidth, height: this.headerHeight }, h("g", { key: '491a7ddf831ba0b6d373d058f223f8dab6d76954', class: "calendar", "font-size": this.fontSize, "font-family": this.fontFamily }, h("rect", { key: 'cd64c9a42c8c68d067e6a37cfb049bc77c15ac2d', x: 0, y: 0, width: this.columnWidth * this.dateSetup.dates.length, height: this.headerHeight, class: "calendarHeader" }), this.simplifiedHeader ? null : bottomValues, this.simplifiedHeader
+        return (h("svg", { key: '4ad5b9ccca0df392a83070e15b28fd3f8e72e70f', xmlns: "http://www.w3.org/2000/svg", width: this.svgWidth, height: this.headerHeight }, h("g", { key: 'da7da862b4f407c73f351fa1b8e3e4beb240db65', class: "calendar", "font-size": this.fontSize, "font-family": this.fontFamily }, h("rect", { key: '515bd9ab381247ee55813b3f40fa453b2f366467', x: 0, y: 0, width: this.columnWidth * this.dateSetup.dates.length, height: this.headerHeight, class: "calendarHeader" }), this.simplifiedHeader ? null : bottomValues, this.simplifiedHeader
             ? topValues.map((topValue) => (h("g", { class: "calendarTop" }, h("line", { x1: topValue.x1Line, y1: topValue.y2Line * 2, x2: topValue.x1Line, y2: topValue.y2Line, class: "calendarTopTick", key: topValue.value + 'line' }), h("text", { key: topValue.value + 'text', y: topValue.yText, x: topValue.xText, class: "calendarTopText" }, topValue.value))))
             : topValues.map((topValue) => (h("g", { class: "calendarTop" }, h("line", { x1: topValue.x1Line, y1: topValue.y1Line, x2: topValue.x1Line, y2: topValue.y2Line, class: "calendarTopTick", key: topValue.value + 'line' }), h("text", { key: topValue.value + 'text', y: topValue.yText, x: topValue.xText, class: "calendarTopText" }, topValue.value)))), this.currentDateIndicator && (
         // current date indicator
-        h("circle", { key: 'ccc563c883e85c17c839dd6414fba8e0845c4eac', fill: this.currentDateIndicator.color, cx: this.currentDateIndicator.x + 2.5, cy: this.headerHeight - 8, r: "8" })))));
+        h("circle", { key: '609d5428fdfc27ba6ac1bdc2a2799fea5089dee7', fill: this.currentDateIndicator.color, cx: this.currentDateIndicator.x + 2.5, cy: this.headerHeight - 8, r: "8" })))));
     }
     static get is() { return "kup-gantt-calendar"; }
     static get originalStyleUrls() {

package/dist/collection/components/kup-planner/utils/kup-grid-renderer/kup-grid-renderer.js

@@ -509,13 +509,13 @@ export class KupGridRenderer {
             // }
             tickX += this.columnWidth;
         }
-        return (h("svg", { key: '5a7273db0e78764c1432747471f093f71021dfd2', xmlns: "http://www.w3.org/2000/svg", width: this.gridProps.svgWidth, height: `${this.rowHeight * this.tasks.length}px`, "font-family": this.fontFamily, ref: (el) => (this.svg = el) }, h("g", { key: '192f07e833557179530a07e525b107e38300365f', class: "grid" }, h("g", { key: '0e08f10c0b0ef19518ab95591dbdb0c3213ba82e', class: "rows" }, gridRows), h("g", { key: '7aaa532f82aa195e00e0f0af6af59019216b7734', class: "rowLines" }, rowLines), h("g", { key: '716e07303c5e16fc662e3c859727c2be325edd9e', class: "ticks" }, ticks)), h("g", { key: 'a2663516577a108f216a65307b9f183c659a92a8', class: "content" }, this.currentDateIndicator && (h("rect", { key: '7afb39c47ec99b8268757dab9a85c20eed6eeb4b', fill: this.currentDateIndicator.color, x: this.currentDateIndicator.x + 1.5, y: "0", width: "2", height: "100%" })), this.projection && (h("rect", { key: '8348ee9e06dad473af617d618252405a114a3d36', fill: this.projection.color, x: this.projection.x0, y: "0", width: this.projection.xf - this.projection.x0, height: "100%", "fill-opacity": "0.35" })), h("g", { key: '16b5df90351a040c71d8895a30ac9367d9a53b2e', class: "arrows", fill: this.arrowColor, stroke: this.arrowColor }, this.tasks.map((task) => {
+        return (h("svg", { key: '6e2c05f30bc3155b36dc0433a116410048042015', xmlns: "http://www.w3.org/2000/svg", width: this.gridProps.svgWidth, height: `${this.rowHeight * this.tasks.length}px`, "font-family": this.fontFamily, ref: (el) => (this.svg = el) }, h("g", { key: '0530506fe65e0b1a8e6fdb018689d094a16820a4', class: "grid" }, h("g", { key: 'd189d3654b50f9bb34dc0800faef0a67780b4525', class: "rows" }, gridRows), h("g", { key: 'd53aee95bb1542041abbbf1425b2c2d2eb0dda9d', class: "rowLines" }, rowLines), h("g", { key: '3d238c6efd1dfacc8319782d1be07eb9c9a7f596', class: "ticks" }, ticks)), h("g", { key: '72d0cc281ff3a10943d27b3b8a029379f78f6c93', class: "content" }, this.currentDateIndicator && (h("rect", { key: '519244fbac413f1bc538441e19fef3ff57e55b3d', fill: this.currentDateIndicator.color, x: this.currentDateIndicator.x + 1.5, y: "0", width: "2", height: "100%" })), this.projection && (h("rect", { key: 'a0f3fcb8e27562a64862817ba4f7056e0a0e2123', fill: this.projection.color, x: this.projection.x0, y: "0", width: this.projection.xf - this.projection.x0, height: "100%", "fill-opacity": "0.35" })), h("g", { key: 'a050c973b2219e0f2bac273c53d934da444a4024', class: "arrows", fill: this.arrowColor, stroke: this.arrowColor }, this.tasks.map((task) => {
             return task.barChildren.map((child) => {
                 if (task.type !== 'timeline') {
                     this.renderKupArrow(task, child);
                 }
             });
-        })), h("g", { key: '67a5d0a4c0e3e655c0ea4c4373e765c12d25cc02', class: "bar", "font-family": this.fontFamily, "font-size": this.fontSize }, this.tasks.map((task) => {
+        })), h("g", { key: 'ad2c626a9b4a5277eba2fa154602c68d41a127a8', class: "bar", "font-family": this.fontFamily, "font-size": this.fontSize }, this.tasks.map((task) => {
             const forbidResize = task.type === 'project';
             return (h("g", { onKeyDown: (e) => {
                     switch (e.key) {
@@ -575,7 +575,7 @@ export class KupGridRenderer {
                         return this.renderKupBar(task, props.isSelected, isDateResizable, isProgressChangeable);
                 }
             })()));
-        }), this.currentTarget && this.ganttEvent.changedTask && (h("g", { key: '37c27322df479348c58dcebb92ad110ad813e939', class: "task-wrapper" }, this.renderKupBar(this.ganttEvent.changedTask, false, false, false)))))));
+        }), this.currentTarget && this.ganttEvent.changedTask && (h("g", { key: '6da45035c94f4e976172186d6929ad693ba40e77', class: "task-wrapper" }, this.renderKupBar(this.ganttEvent.changedTask, false, false, false)))))));
     }
     static get is() { return "kup-grid-renderer"; }
     static get originalStyleUrls() {

package/dist/collection/components/kup-planner/utils/kup-horizontal-scroll/kup-horizontal-scroll.js

@@ -53,20 +53,20 @@ export class HorizontalScroll {
         var _a, _b;
         const w = (_b = ((_a = this.taskListTrueRef) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) + 24 * 1.5) !== null && _b !== void 0 ? _b : 0; // 24 * 2 is the sum of padding and margin for both list and gantt, multiplied by 1.5 cause we need to add the other half to the right
         const width = +this.listCellWidth.replace('px', '');
-        return (h(Fragment, { key: '540bfcce78395efa06fc99af47fb1973216e493e' }, h("div", { key: '40a90b5d4c70fca0632770ed07cd25b1fe8818f6', class: "scroll-container" }, this.scrollableTaskList &&
-            this.taskListScrollWidth > width && (h("div", { key: 'a1b800c1244c20cbac1d9d62c099a6ce3534ab9e', dir: "ltr", style: {
+        return (h(Fragment, { key: '0359e34c59e8f83b91edf4ea4455f9b0b818b187' }, h("div", { key: '1f959a14bd712c24fd9247aeeba42d4702f4a647', class: "scroll-container" }, this.scrollableTaskList &&
+            this.taskListScrollWidth > width && (h("div", { key: '0c90c113ae5ad82ce41a1dd30037c14f0d3aa071', dir: "ltr", style: {
                 margin: this.rtl
                     ? `0px 20px 0px 20px`
                     : `0px 20px 0px 20px`,
                 maxWidth: `${width + 20}px`,
                 minWidth: `${width + 20}px`,
-            }, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalTaskListScroll }, h("div", { key: '2f617fa83a89cf4028412c95581be2168f0e2498', style: {
+            }, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalTaskListScroll }, h("div", { key: '2baa4a929f17a9fb7df2a74328ad231445fd9639', style: {
                 width: `${this.taskListScrollWidth}px`,
-            }, class: "scroll" }))), h("div", { key: 'f41a1fc76a99cb06fba8abf111b91551f9da91ad', dir: "ltr", style: {
+            }, class: "scroll" }))), h("div", { key: '070aa5027e20fc0f31d3ab66672789ce29d3ad8a', dir: "ltr", style: {
                 margin: this.rtl
                     ? `0px ${this.scrollableTaskList && this.taskListScrollWidth > width ? 40 : w}px 0px 12px`
                     : `0px 12px 0px ${this.scrollableTaskList && this.taskListScrollWidth > width ? 40 : w}px`,
-            }, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalScroll }, h("div", { key: '540f86357ea1efc90f0443fb587905a0a7e16629', style: { width: `${this.svgWidth}px` }, class: "scroll" })))));
+            }, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalScroll }, h("div", { key: '509f0a35443c329e6c86bafbb1a7f93919b62f48', style: { width: `${this.svgWidth}px` }, class: "scroll" })))));
     }
     static get is() { return "kup-horizontal-scroll"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/kup-planner/utils/kup-planner-renderer.js

@@ -220,13 +220,13 @@ export class KupPlannerRenderer {
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: 'ef64ebfca1179e885670c4570ad6708e1e7cf16a', class: "planner-render" }, h("kup-switcher", { key: '4080da8f661b375bbe8fa23bca79deb1aff0f5a4', timeUnitChange: (timeUnit) => {
+        return (h("div", { key: '36516935d5c7bd442298edf8626770b47d67d8a1', class: "planner-render" }, h("kup-switcher", { key: '4780f53ca74985bf1744f97dc16ccfcc45c2c937', timeUnitChange: (timeUnit) => {
                 var _a, _b;
                 (_b = (_a = this.props).onSetViewMode) === null || _b === void 0 ? void 0 : _b.call(_a, timeUnit);
                 this.timeUnit = timeUnit;
                 this.viewDate = undefined;
                 this.scrollX = -1;
-            } }), this.props && (h("div", { key: '7df3c02f9d67e4858e360e5873e141ae6eca7f0a', style: {
+            } }), this.props && (h("div", { key: 'fdd8ec8f405dcb3aeb3dcb882314a2042eee6ddc', style: {
                 display: 'flex',
                 flexDirection: 'column',
             } }, h("kup-gantt", Object.assign({ ref: (el) => (this.mainGantt = el), ganttId: KUP_PLANNER_MAIN_GANTT_ID, key: KUP_PLANNER_MAIN_GANTT_ID, filter: this.props.mainGantt.filter, hideLabel: this.props.mainGantt.hideLabel, showSecondaryDates: this.mainGanttDoubleView, hideDependencies: this.props.mainGantt.hideDependencies, ganttHeight: this.props.mainGantt.ganttHeight, displayedStartDate: this.displayedDates.displayedStartDate, displayedEndDate: this.displayedDates.displayedEndDate, viewDate: this.viewDate, tasks: this.tasks, columnWidth: columnWidthForTimeUnit(this.timeUnit), viewMode: this.timeUnit }, this.props.mainGantt.stylingOptions, { TaskListHeader: this.props.mainGantt.taskListHeaderProject, TaskListTable: this.props.mainGantt.taskListTableProject, TooltipContent: (_a = this.props.mainGantt.tooltipContent) !== null && _a !== void 0 ? _a : CustomTooltipHOC(), barClick: (task) => {

package/dist/collection/components/kup-planner/utils/kup-switcher/kup-switcher.js

@@ -16,7 +16,7 @@ export class KupSwitcher {
             this.activeButton = mode;
             this.timeUnitChange(mode);
         };
-        return (h("div", { key: '85a0bdefe806ecb41b60f6ee14791e1599f64f63', class: "switcher" }, this.buttonLabels.map((label) => (h("button", { type: "button", class: {
+        return (h("div", { key: '9540112cd61ae116e61feca0d2424e3511139f25', class: "switcher" }, this.buttonLabels.map((label) => (h("button", { type: "button", class: {
                 button: true,
                 buttonActive: this.activeButton === label,
             }, onClick: () => handleButtonClick(label) }, h("span", { class: "label" }, label.charAt(0).toUpperCase() + label.slice(1)))))));