blue-chestnut-solar-expert 0.0.62 → 0.0.63

package/dist/collection/components/map-draw/tutorial-component.js

@@ -6,11 +6,38 @@ export class TutorialComponent {
     title;
     description;
     videoSource;
+    isLoading = true;
+    dotCount = 0;
+    dotInterval;
     handleCloseTutorial = () => {
         if (this.onClose) {
             this.onClose();
         }
     };
+    handleVideoLoadStart = () => {
+        this.isLoading = true;
+    };
+    handleVideoCanPlay = () => {
+        this.isLoading = false;
+        this.stopDotAnimation();
+    };
+    componentWillLoad() {
+        this.startDotAnimation();
+    }
+    componentWillUnload() {
+        this.stopDotAnimation();
+    }
+    startDotAnimation() {
+        this.dotInterval = window.setInterval(() => {
+            this.dotCount = (this.dotCount + 1) % 4; // 0, 1, 2, 3 (0 means no dots)
+        }, 500); // Change every 500ms
+    }
+    stopDotAnimation() {
+        if (this.dotInterval) {
+            clearInterval(this.dotInterval);
+            this.dotInterval = null;
+        }
+    }
     render() {
         const t = getLanguageStrings(state.settings.language);
         // Use provided props or fall back to default values
@@ -18,11 +45,11 @@ export class TutorialComponent {
         const tutorialDescription = this.description ||
             t.mapDraw.tutorial.description;
         const videoSrc = this.videoSource || "/assets/videos/tutorial1.mp4";
-        return (h("div", { key: '643a38ae57803cd738f5f464865bbec10921342b', class: "fixed inset-0 z-50 flex items-center justify-center p-4" }, h("div", { key: '1ad50622d2eb1e2c424f83419d25598981ec01c8', class: "absolute inset-0", style: {
+        return (h("div", { key: 'f06f32b7c87ff5e564e1ebe70a5a9659eddc6f1f', class: "fixed inset-0 z-50 flex items-center justify-center p-4" }, h("div", { key: '753070da2f1f335b9649f998cd9997ab45a0e5ab', class: "absolute inset-0", style: {
                 backgroundColor: "rgba(0, 0, 0, 0.5)",
-            } }), h("div", { key: '10fe5b27d17f5ec1fc28e511e0b877581257fd00', class: "relative z-10 w-full max-w-2xl max-h-full overflow-y-auto" }, h("div", { key: 'db270c472ef606242ae62682b4b2d249172674bc', class: "flex flex-col gap-4 bg-primary rounded-4xl p-6" }, h("div", { key: '6462e61e1321d3b95b034cfbbd6eceb28959b963', class: "w-full text-center space-y-4" }, h("h2", { key: 'a791ba0ffec5eb1939009302eca9e5422d0c4416', class: "text-2xl font-bold text-secondary" }, tutorialTitle), h("p", { key: '755ed2d0833e846b2b9b4670a9f5e5ec1be6ff4f', class: "text-text-secondary" }, tutorialDescription)), h("div", { key: '89f8c0c7153b01c9791c5eb0370adca0879d3aeb', class: "flex items-start justify-center bg-primary rounded-4xl" }, h("div", { key: '2ec0595cbefdb0b848dec1435d2ee5f3036ad979', class: "relative flex items-center justify-center rounded-4xl bg-secondary overflow-hidden w-64 h-64" }, h("video", { key: '2322bae4f2748420738c5ddaee1fabf47be63d27', class: "w-full h-full object-contain rounded-4xl pointer-events-none", autoplay: true, muted: true, loop: true, playsinline: true, style: {
+            } }), h("div", { key: '0ee29c7cbc4102fadf8786a7f007b8d469c0a296', class: "relative z-10 w-full max-w-2xl max-h-full overflow-y-auto" }, h("div", { key: 'd21772764706faccb28c43308478e0639b965e32', class: "flex flex-col gap-4 bg-primary rounded-4xl p-6" }, h("div", { key: '0c462275586f798c3250d11ea77ac7d72ed2685e', class: "w-full text-center space-y-4" }, h("h2", { key: '2ff78e8cae6332f44fb8ae4094c397d4df27b0ea', class: "text-2xl font-bold text-secondary" }, tutorialTitle), h("p", { key: 'e4d5dcbc9e6518843f6cf3f153e11f7d58fe3fa3', class: "text-text-secondary" }, tutorialDescription)), h("div", { key: 'a95fbf977b46f0d70b6449a8bb95a45a1bdd85e0', class: "flex items-start justify-center bg-primary rounded-4xl" }, h("div", { key: '51a5341931f6f8fa28f170b94f6a1dfa13661492', class: "relative flex items-center justify-center rounded-4xl bg-secondary overflow-hidden w-64 h-64" }, this.isLoading && (h("div", { key: 'bc23d82ce8afb8fc6552820f2de1f5075cd51d1b', class: "absolute inset-0 flex items-center justify-center z-10" }, h("span", { key: '1831b8e0c1554956739b150ab4ac0f125d3d8687', class: "text-text-secondary" }, t.mapDraw.loading, ".".repeat(this.dotCount)))), h("video", { key: '207cb656faa44c30bec05c461eb077522d65db3c', class: "w-full h-full object-contain rounded-4xl pointer-events-none", autoplay: true, muted: true, loop: true, playsinline: true, onLoadStart: this.handleVideoLoadStart, onCanPlay: this.handleVideoCanPlay, style: {
                 aspectRatio: "1/1",
-            } }, h("source", { key: '2702618ed0bee274b48f1888ac4ba2b04575db7d', src: videoSrc, type: "video/mp4" }), "Your browser does not support the video tag."))), h("div", { key: '61a438be7abd35566ebc9ad4ea97d575789bf32f', class: "w-full flex justify-center" }, h("button", { key: '139055174d1bb51a87da48787fd218526de872e1', onClick: this.handleCloseTutorial, class: "px-6 py-3 bg-tertiary text-white rounded-lg font-medium hover:bg-tertiary/80 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-tertiary focus:ring-offset-0" }, t.mapDraw.tutorial.understood))))));
+            } }, h("source", { key: 'cf85f77e9dce347d369f2e1492bb47c94cf102dc', src: videoSrc, type: "video/mp4" }), "Your browser does not support the video tag."))), h("div", { key: 'ca475e2937841dd4e7dbdb296ce1fa498b99b8cb', class: "w-full flex justify-center" }, h("button", { key: 'd5958e63936027fb12076fd48e8d595accecea20', onClick: this.handleCloseTutorial, class: "px-6 py-3 bg-tertiary text-white rounded-lg font-medium hover:bg-tertiary/80 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-tertiary focus:ring-offset-0" }, t.mapDraw.tutorial.understood))))));
     }
     static get is() { return "tutorial-component"; }
     static get originalStyleUrls() {
@@ -114,5 +141,11 @@ export class TutorialComponent {
             }
         };
     }
+    static get states() {
+        return {
+            "isLoading": {},
+            "dotCount": {}
+        };
+    }
 }
 //# sourceMappingURL=tutorial-component.js.map

package/dist/collection/components/map-draw/tutorial-component.js.map

@@ -1 +1 @@
-{"version":3,"file":"tutorial-component.js","sourceRoot":"","sources":["../../../src/components/map-draw/tutorial-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAOpC,MAAM,OAAO,iBAAiB;IAE1B,OAAO,CAAa;IAEpB,KAAK,CAAU;IAEf,WAAW,CAAU;IAErB,WAAW,CAAU;IAEb,mBAAmB,GAAG,GAAG,EAAE;QAC/B,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,IAAI,CAAC,OAAO,EAAE,CAAC;QACnB,CAAC;IACL,CAAC,CAAC;IAEF,MAAM;QACF,MAAM,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAEtD,oDAAoD;QACpD,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC;QAC7D,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW;YACxC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC;QACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,IAAI,8BAA8B,CAAC;QAEpE,OAAO,CACH,4DAAK,KAAK,EAAC,yDAAyD;YAEhE,4DACI,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAE;oBACH,eAAe,EAAE,oBAAoB;iBACxC,GACH;YAGF,4DAAK,KAAK,EAAC,2DAA2D;gBAClE,4DAAK,KAAK,EAAC,gDAAgD;oBAEvD,4DAAK,KAAK,EAAC,8BAA8B;wBACrC,2DAAI,KAAK,EAAC,mCAAmC,IACxC,aAAa,CACb;wBACL,0DAAG,KAAK,EAAC,qBAAqB,IACzB,mBAAmB,CACpB,CACF;oBAGN,4DAAK,KAAK,EAAC,wDAAwD;wBAC/D,4DAAK,KAAK,EAAC,8FAA8F;4BACrG,8DACI,KAAK,EAAC,8DAA8D,EACpE,QAAQ,QACR,KAAK,QACL,IAAI,QACJ,WAAW,QACX,KAAK,EAAE;oCACH,WAAW,EAAE,KAAK;iCACrB;gCAED,+DACI,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,WAAW,GAClB;+EAEE,CACN,CACJ;oBAGN,4DAAK,KAAK,EAAC,4BAA4B;wBACnC,+DACI,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,KAAK,EAAC,qLAAqL,IAE1L,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,UAAU,CACzB,CACP,CACJ,CACJ,CACJ,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { state } from \"../../store\";\r\n\r\n@Component({\r\n    tag: \"tutorial-component\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class TutorialComponent {\r\n    @Prop()\r\n    onClose: () => void;\r\n    @Prop()\r\n    title?: string;\r\n    @Prop()\r\n    description?: string;\r\n    @Prop()\r\n    videoSource?: string;\r\n\r\n    private handleCloseTutorial = () => {\r\n        if (this.onClose) {\r\n            this.onClose();\r\n        }\r\n    };\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n\r\n        // Use provided props or fall back to default values\r\n        const tutorialTitle = this.title || t.mapDraw.tutorial.title;\r\n        const tutorialDescription = this.description ||\r\n            t.mapDraw.tutorial.description;\r\n        const videoSrc = this.videoSource || \"/assets/videos/tutorial1.mp4\";\r\n\r\n        return (\r\n            <div class=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\r\n                {/* Backdrop */}\r\n                <div\r\n                    class=\"absolute inset-0\"\r\n                    style={{\r\n                        backgroundColor: \"rgba(0, 0, 0, 0.5)\",\r\n                    }}\r\n                />\r\n\r\n                {/* Scrollable content container */}\r\n                <div class=\"relative z-10 w-full max-w-2xl max-h-full overflow-y-auto\">\r\n                    <div class=\"flex flex-col gap-4 bg-primary rounded-4xl p-6\">\r\n                        {/* Title and Description */}\r\n                        <div class=\"w-full text-center space-y-4\">\r\n                            <h2 class=\"text-2xl font-bold text-secondary\">\r\n                                {tutorialTitle}\r\n                            </h2>\r\n                            <p class=\"text-text-secondary\">\r\n                                {tutorialDescription}\r\n                            </p>\r\n                        </div>\r\n\r\n                        {/* Tutorial Video Container */}\r\n                        <div class=\"flex items-start justify-center bg-primary rounded-4xl\">\r\n                            <div class=\"relative flex items-center justify-center rounded-4xl bg-secondary overflow-hidden w-64 h-64\">\r\n                                <video\r\n                                    class=\"w-full h-full object-contain rounded-4xl pointer-events-none\"\r\n                                    autoplay\r\n                                    muted\r\n                                    loop\r\n                                    playsinline\r\n                                    style={{\r\n                                        aspectRatio: \"1/1\",\r\n                                    }}\r\n                                >\r\n                                    <source\r\n                                        src={videoSrc}\r\n                                        type=\"video/mp4\"\r\n                                    />\r\n                                    Your browser does not support the video tag.\r\n                                </video>\r\n                            </div>\r\n                        </div>\r\n\r\n                        {/* Close Button */}\r\n                        <div class=\"w-full flex justify-center\">\r\n                            <button\r\n                                onClick={this.handleCloseTutorial}\r\n                                class=\"px-6 py-3 bg-tertiary text-white rounded-lg font-medium hover:bg-tertiary/80 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-tertiary focus:ring-offset-0\"\r\n                            >\r\n                                {t.mapDraw.tutorial.understood}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"tutorial-component.js","sourceRoot":"","sources":["../../../src/components/map-draw/tutorial-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAOpC,MAAM,OAAO,iBAAiB;IAE1B,OAAO,CAAa;IAEpB,KAAK,CAAU;IAEf,WAAW,CAAU;IAErB,WAAW,CAAU;IAGb,SAAS,GAAG,IAAI,CAAC;IAEjB,QAAQ,GAAG,CAAC,CAAC;IAEb,WAAW,CAAS;IAEpB,mBAAmB,GAAG,GAAG,EAAE;QAC/B,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,IAAI,CAAC,OAAO,EAAE,CAAC;QACnB,CAAC;IACL,CAAC,CAAC;IAEM,oBAAoB,GAAG,GAAG,EAAE;QAChC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IAC1B,CAAC,CAAC;IAEM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC5B,CAAC,CAAC;IAEF,iBAAiB;QACb,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC7B,CAAC;IAED,mBAAmB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC5B,CAAC;IAEO,iBAAiB;QACrB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE;YACvC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,+BAA+B;QAC5E,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,qBAAqB;IAClC,CAAC;IAEO,gBAAgB;QACpB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAChC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAC5B,CAAC;IACL,CAAC;IAED,MAAM;QACF,MAAM,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAEtD,oDAAoD;QACpD,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC;QAC7D,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW;YACxC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC;QACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,IAAI,8BAA8B,CAAC;QAEpE,OAAO,CACH,4DAAK,KAAK,EAAC,yDAAyD;YAEhE,4DACI,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAE;oBACH,eAAe,EAAE,oBAAoB;iBACxC,GACH;YAGF,4DAAK,KAAK,EAAC,2DAA2D;gBAClE,4DAAK,KAAK,EAAC,gDAAgD;oBAEvD,4DAAK,KAAK,EAAC,8BAA8B;wBACrC,2DAAI,KAAK,EAAC,mCAAmC,IACxC,aAAa,CACb;wBACL,0DAAG,KAAK,EAAC,qBAAqB,IACzB,mBAAmB,CACpB,CACF;oBAGN,4DAAK,KAAK,EAAC,wDAAwD;wBAC/D,4DAAK,KAAK,EAAC,8FAA8F;4BAEpG,IAAI,CAAC,SAAS,IAAI,CACf,4DAAK,KAAK,EAAC,wDAAwD;gCAC/D,6DAAM,KAAK,EAAC,qBAAqB;oCAC5B,CAAC,CAAC,OAAO,CAAC,OAAO;oCACjB,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CACvB,CACL,CACT;4BAED,8DACI,KAAK,EAAC,8DAA8D,EACpE,QAAQ,QACR,KAAK,QACL,IAAI,QACJ,WAAW,QACX,WAAW,EAAE,IAAI,CAAC,oBAAoB,EACtC,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,KAAK,EAAE;oCACH,WAAW,EAAE,KAAK;iCACrB;gCAED,+DACI,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,WAAW,GAClB;+EAEE,CACN,CACJ;oBAGN,4DAAK,KAAK,EAAC,4BAA4B;wBACnC,+DACI,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,KAAK,EAAC,qLAAqL,IAE1L,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,UAAU,CACzB,CACP,CACJ,CACJ,CACJ,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop, State } from \"@stencil/core\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { state } from \"../../store\";\r\n\r\n@Component({\r\n    tag: \"tutorial-component\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class TutorialComponent {\r\n    @Prop()\r\n    onClose: () => void;\r\n    @Prop()\r\n    title?: string;\r\n    @Prop()\r\n    description?: string;\r\n    @Prop()\r\n    videoSource?: string;\r\n\r\n    @State()\r\n    private isLoading = true;\r\n    @State()\r\n    private dotCount = 0;\r\n\r\n    private dotInterval: number;\r\n\r\n    private handleCloseTutorial = () => {\r\n        if (this.onClose) {\r\n            this.onClose();\r\n        }\r\n    };\r\n\r\n    private handleVideoLoadStart = () => {\r\n        this.isLoading = true;\r\n    };\r\n\r\n    private handleVideoCanPlay = () => {\r\n        this.isLoading = false;\r\n        this.stopDotAnimation();\r\n    };\r\n\r\n    componentWillLoad() {\r\n        this.startDotAnimation();\r\n    }\r\n\r\n    componentWillUnload() {\r\n        this.stopDotAnimation();\r\n    }\r\n\r\n    private startDotAnimation() {\r\n        this.dotInterval = window.setInterval(() => {\r\n            this.dotCount = (this.dotCount + 1) % 4; // 0, 1, 2, 3 (0 means no dots)\r\n        }, 500); // Change every 500ms\r\n    }\r\n\r\n    private stopDotAnimation() {\r\n        if (this.dotInterval) {\r\n            clearInterval(this.dotInterval);\r\n            this.dotInterval = null;\r\n        }\r\n    }\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n\r\n        // Use provided props or fall back to default values\r\n        const tutorialTitle = this.title || t.mapDraw.tutorial.title;\r\n        const tutorialDescription = this.description ||\r\n            t.mapDraw.tutorial.description;\r\n        const videoSrc = this.videoSource || \"/assets/videos/tutorial1.mp4\";\r\n\r\n        return (\r\n            <div class=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\r\n                {/* Backdrop */}\r\n                <div\r\n                    class=\"absolute inset-0\"\r\n                    style={{\r\n                        backgroundColor: \"rgba(0, 0, 0, 0.5)\",\r\n                    }}\r\n                />\r\n\r\n                {/* Scrollable content container */}\r\n                <div class=\"relative z-10 w-full max-w-2xl max-h-full overflow-y-auto\">\r\n                    <div class=\"flex flex-col gap-4 bg-primary rounded-4xl p-6\">\r\n                        {/* Title and Description */}\r\n                        <div class=\"w-full text-center space-y-4\">\r\n                            <h2 class=\"text-2xl font-bold text-secondary\">\r\n                                {tutorialTitle}\r\n                            </h2>\r\n                            <p class=\"text-text-secondary\">\r\n                                {tutorialDescription}\r\n                            </p>\r\n                        </div>\r\n\r\n                        {/* Tutorial Video Container */}\r\n                        <div class=\"flex items-start justify-center bg-primary rounded-4xl\">\r\n                            <div class=\"relative flex items-center justify-center rounded-4xl bg-secondary overflow-hidden w-64 h-64\">\r\n                                {/* Loading Spinner */}\r\n                                {this.isLoading && (\r\n                                    <div class=\"absolute inset-0 flex items-center justify-center z-10\">\r\n                                        <span class=\"text-text-secondary\">\r\n                                            {t.mapDraw.loading}\r\n                                            {\".\".repeat(this.dotCount)}\r\n                                        </span>\r\n                                    </div>\r\n                                )}\r\n\r\n                                <video\r\n                                    class=\"w-full h-full object-contain rounded-4xl pointer-events-none\"\r\n                                    autoplay\r\n                                    muted\r\n                                    loop\r\n                                    playsinline\r\n                                    onLoadStart={this.handleVideoLoadStart}\r\n                                    onCanPlay={this.handleVideoCanPlay}\r\n                                    style={{\r\n                                        aspectRatio: \"1/1\",\r\n                                    }}\r\n                                >\r\n                                    <source\r\n                                        src={videoSrc}\r\n                                        type=\"video/mp4\"\r\n                                    />\r\n                                    Your browser does not support the video tag.\r\n                                </video>\r\n                            </div>\r\n                        </div>\r\n\r\n                        {/* Close Button */}\r\n                        <div class=\"w-full flex justify-center\">\r\n                            <button\r\n                                onClick={this.handleCloseTutorial}\r\n                                class=\"px-6 py-3 bg-tertiary text-white rounded-lg font-medium hover:bg-tertiary/80 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-tertiary focus:ring-offset-0\"\r\n                            >\r\n                                {t.mapDraw.tutorial.understood}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/dist/collection/components/settings/settings.js

@@ -31,14 +31,14 @@ export class SettingsModal {
     };
     render() {
         const t = getLanguageStrings(state.settings.language);
-        return (h("div", { key: '86e2e853f3ae4fc186e301f088fa2f51ed21eb96', class: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" }, h("div", { key: 'ecbc4afefad160dd8817d0fc236398d50307fd5f', class: "bg-primary rounded-4xl p-6 w-full max-w-md" }, h("div", { key: '26db379fce6ea21297ef5637378cb8d45e65c632', class: "flex justify-between items-center mb-6" }, h("h2", { key: 'edffc0b3e2e5bd2b63a939a5e7bd859ee6544565', class: "text-xl font-semibold" }, "Settings"), h("button", { key: '1ec7763b94b8cab41086f56fcd3436cdb09d4100', class: "p-2 hover:bg-hover rounded-full transition-colors", onClick: this.handleClose }, h("svg", { key: 'a2b4082236931c900c39dafc638d4eead0545f31', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { key: '8f5a732d61e4858f14c598cba60eb0e9503b6154', x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { key: 'bc1f1e063fe710bb386952c01fc7248d1480583c', x1: "6", y1: "6", x2: "18", y2: "18" })))), h("div", { key: '22202217c1a00baf20781dc6a55ef534b0d54248', class: "space-y-4" }, h("div", { key: '0d900965d565e5339513885777faa16778d16fba' }, h("h3", { key: 'df440a1e1cc685bc7034c12abe22ab58631dc39b', class: "text-sm font-medium text-text-muted mb-1" }, "Debug Information"), h("p", { key: '1b2490b4fe7ab72f1ce00129972c8b2a1c68e98a', class: "text-sm text-text-muted mb-1" }, "state: ", JSON.stringify(state, null, 2)), h("p", { key: '02f856480ed33470efbe5a8315dbca9b5a7a77fa', class: "text-sm text-text-muted mb-1" }, navigator.userAgent), h("p", { key: '7c54fd31d753d17ec97a62d71743efe04a89adb3', class: "text-sm text-text-muted mb-1" }, navigator.userAgent.indexOf("Safari")), h("p", { key: '593a28bae68b1ee15f3f86e744a12e984ca02a37', class: "text-sm text-text-muted mb-1" }, "maxTouchPoints: ", navigator.maxTouchPoints), h("p", { key: '896bfdcae3012911e364718aaeb7a91edd367ad3', class: "text-sm text-text-muted mb-1" }, "iPhone: ", navigator.userAgent.indexOf("iPhone")), h("p", { key: '37633d9ec6303d386745742f50b9f583e966ebf6', class: "text-sm text-text-muted mb-1" }, "Mac OS: ", navigator.userAgent.indexOf("Mac OS"))), h("div", { key: '4d007f8d19fe1b3b95f80b92850fbfd6db55d656' }, h("label", { key: '1b2447f96a44ba2d1d8d0184a09a9b77106e0679', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.language), h("select", { key: '64dc07edfff00c017bb10c01b7940f3413a111d6', class: "w-full bg-muted rounded-4xl p-2", onInput: (e) => this.handleInputChange("language", e.target
-                .value) }, h("option", { key: '13e54cf9f9b27ca9bf9b9ab01ca7ee9b91887d75', value: "en", selected: this.tempSettings.language ===
-                "en" }, "English"), h("option", { key: 'abccf307e6c730659a2d68bbf8432ad7dad7a9d9', value: "es", selected: this.tempSettings.language ===
-                "es" }, "Espa\u00F1ol"), h("option", { key: '0f6e16122daace282c5ef3426ecc5875a323c9a4', value: "de", selected: this.tempSettings.language ===
-                "de" }, "Deutsch"))), h("div", { key: '33a2256b3b6000dbace5ce05baf5f535a7a3de9c' }, h("label", { key: 'b22ffcb5bd477c8298d34b2a905475d5c5aadaba', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.rowSpacing), h("input", { key: '91672a7397a83f11f3711d1ab8f52e5626b8e09f', type: "number", class: "w-full bg-muted rounded-4xl p-2", value: this.tempSettings.rowSpacing, onInput: (e) => this.handleInputChange("rowSpacing", parseFloat(e.target
-                .value)) })), h("div", { key: 'deee24a2c07fbdf4a852ba5566087a11242ee1b9' }, h("label", { key: '5384d7f0877af2b94b21f610628a410fec60d017', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.columnSpacing), h("input", { key: '17be549e097c08ae9bde1bc4f00154963b71ea33', type: "number", class: "w-full bg-muted rounded-4xl p-2", value: this.tempSettings.columnSpacing, onInput: (e) => this.handleInputChange("columnSpacing", parseFloat(e.target
-                .value)) })), h("div", { key: '026f0919812b1a45d8daba4aa71730c4b171d8a1' }, h("label", { key: '912d5ac6b6b188b29864d85af180044d551efc36', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.borderInset), h("input", { key: '8d6970dc513500a524b4fc0e825c55f51f8a47ee', type: "number", class: "w-full bg-muted rounded-4xl p-2", value: this.tempSettings.borderInset, onInput: (e) => this.handleInputChange("borderInset", parseFloat(e.target
-                .value)) }))), h("div", { key: 'ecd39b394ee608569a097305a85a197da04f41b9', class: "flex justify-end gap-4 mt-6" }, h("button", { key: '3b696ab9a2120619bd0f6b34f0c0baa9807b6a0d', class: "px-4 py-2 bg-surface rounded-4xl hover:bg-surface-hover transition-colors", onClick: this.handleClose }, "Cancel"), h("button", { key: '1c74e08866a5888acd29abd31a07149a58e41e1b', class: "px-4 py-2 bg-secondary text-muted rounded-4xl hover:bg-text-secondary transition-colors", onClick: this.handleSave }, "Save Changes")))));
+        return (h("div", { key: '79e1cd083c67acdd1f7a1389bf9d055c80b0307e', class: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" }, h("div", { key: 'c675b2595e1b0eee35b2acd41d994739295922fc', class: "bg-primary rounded-4xl p-6 w-full max-w-md" }, h("div", { key: '8c61ae50b7778543f7336f33548c10116793237e', class: "flex justify-between items-center mb-6" }, h("h2", { key: '2d81b95ad125c28d93ab20d9085d05e3d20f3fde', class: "text-xl font-semibold" }, "Settings"), h("button", { key: '8c2c4dd2d0e2bcb5be5b18087ee18be2224102ad', class: "p-2 hover:bg-hover rounded-full transition-colors", onClick: this.handleClose }, h("svg", { key: '01f5ec01e81b4c1145521453f36af208505a10b6', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { key: '24fe377f0f24149e4cd1940f7787471d31aae1b5', x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { key: '88aac15a41ba9f54115f34aa1ad01bf26de505f9', x1: "6", y1: "6", x2: "18", y2: "18" })))), h("div", { key: 'ce4111f339d0ce7c4c511de54b91932952bd76b2', class: "space-y-4" }, h("div", { key: '9a3d37a4eb7f1f602cf51e22adf5608d230bf422' }, h("h3", { key: '90cbf36a19713937f6997deb1f6ee71bfd0c8eb4', class: "text-sm font-medium text-text-muted mb-1" }, "Debug Information"), h("p", { key: '56604992a6f5e105b7c66845b5280a44d9969b10', class: "text-sm text-text-muted mb-1" }, "state: ", JSON.stringify(state, null, 2)), h("p", { key: 'b45370a529d13a62b9d170e44f26a921f2c1471f', class: "text-sm text-text-muted mb-1" }, navigator.userAgent), h("p", { key: '3538579556eb23bcd7e3a33b7e6024cc5c27b613', class: "text-sm text-text-muted mb-1" }, navigator.userAgent.indexOf("Safari")), h("p", { key: '2898296dd47b74eb2a1be6ca86ab2c995f8c8b2f', class: "text-sm text-text-muted mb-1" }, "maxTouchPoints: ", navigator.maxTouchPoints), h("p", { key: '542527164dd1a246dab085048792c182c3a9335e', class: "text-sm text-text-muted mb-1" }, "iPhone: ", navigator.userAgent.indexOf("iPhone")), h("p", { key: 'fbc7d1db71af4bba758cef38d059952eb00a7cc0', class: "text-sm text-text-muted mb-1" }, "Mac OS: ", navigator.userAgent.indexOf("Mac OS"))), h("div", { key: '2e5510d2fffa5e5aa67e69a45cb763eef9ad3569' }, h("label", { key: 'b5bd26fc4e06a4056cd72baa4872bb64a2fa0ab5', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.language), h("select", { key: '01b43ee7c6330b569c53d6604f8c34375ae06117', class: "w-full bg-muted rounded-4xl p-2", onInput: (e) => this.handleInputChange("language", e.target
+                .value) }, h("option", { key: '1220c1f58904e24775ffeacc9c78e7398eaf0327', value: "en", selected: this.tempSettings.language ===
+                "en" }, "English"), h("option", { key: 'cf7aa9e4cd1037dd0a6c30fb5b50b35f31978ef1', value: "es", selected: this.tempSettings.language ===
+                "es" }, "Espa\u00F1ol"), h("option", { key: '0cba4ecd0cf5ace0f748e7000d0242bd0bf2dadc', value: "de", selected: this.tempSettings.language ===
+                "de" }, "Deutsch"))), h("div", { key: '713ea4aa4f822ec26ff3e4444f7c253481241ef9' }, h("label", { key: '2ae2dc5d5e67bc7f58aef802dd141e1800a3a91b', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.rowSpacing), h("input", { key: 'd2f8a869e719c6fa3a12b6912209245f4b0b2050', type: "number", class: "w-full bg-muted rounded-4xl p-2", value: this.tempSettings.rowSpacing, onInput: (e) => this.handleInputChange("rowSpacing", parseFloat(e.target
+                .value)) })), h("div", { key: 'd8bb28ae6a67ef3f9235ff9f420cbf297abaed4c' }, h("label", { key: '02555451ba3f2d30f2322635805e09726a337b02', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.columnSpacing), h("input", { key: '2cd6c1ebe5d3f9a44ec160d66d2a171c17030f3d', type: "number", class: "w-full bg-muted rounded-4xl p-2", value: this.tempSettings.columnSpacing, onInput: (e) => this.handleInputChange("columnSpacing", parseFloat(e.target
+                .value)) })), h("div", { key: '17caac00506a40efdd7476ae06b0a2bf7fc8f3c4' }, h("label", { key: '418c3f29e374189ab462ea2f29bb2a9849f04e48', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.borderInset), h("input", { key: '21fa9316ae088dfd8fa0839e50a64f6282bddaa8', type: "number", class: "w-full bg-muted rounded-4xl p-2", value: this.tempSettings.borderInset, onInput: (e) => this.handleInputChange("borderInset", parseFloat(e.target
+                .value)) }))), h("div", { key: '42d0f055e5e168a18d8b84f8c84c85ec304d196a', class: "flex justify-end gap-4 mt-6" }, h("button", { key: '9e64d0c7ce6b719dda3ccc2ab8c53c1185841992', class: "px-4 py-2 bg-surface rounded-4xl hover:bg-surface-hover transition-colors", onClick: this.handleClose }, "Cancel"), h("button", { key: '075ab5698d6d8aaf9f1e6cff23f963979ffb0292', class: "px-4 py-2 bg-secondary text-muted rounded-4xl hover:bg-text-secondary transition-colors", onClick: this.handleSave }, "Save Changes")))));
     }
     static get is() { return "settings-modal"; }
     static get originalStyleUrls() {

package/dist/collection/components/solar-expert/solar-expert.js

@@ -121,7 +121,7 @@ export class SolarExpert {
     }
     render() {
         const t = getLanguageStrings(this.language);
-        return (h("div", { key: '4d40753a37e79e7f6d60c7462372cd68cef82589', class: "flex flex-col w-full h-full p-3 m-auto", id: "solar-calculator" }, this.showMapSelector
+        return (h("div", { key: 'b00c8771d7a4ab1015a4783bf0e8ee3c9d2dcb91', class: "flex flex-col w-full h-full p-3 m-auto", id: "solar-calculator" }, this.showMapSelector
             ? (h("map-selector", { "api-key": this.apiKey, language: this.language }))
             : (h(h.Fragment, null, h("div", { class: "pb-2 flex flex-col sm:flex-row gap-2 sm:gap-4 items-stretch w-full" }, h("div", { class: "relative flex-1 sm:flex-3" }, h("div", { class: "absolute left-3 top-0 h-full flex items-center text-muted-foreground pointer-events-none" }, h("search-icon", null)), h("input", { ref: (el) => this.inputElement = el, type: "text", placeholder: t.solarExpert
                     .searchPlaceholder, class: "w-full pl-10 pr-4 py-2 border border-border rounded-4xl focus:ring-secondary bg-muted text-muted-foreground h-full" })), h("button", { onClick: () => this.handleChooseOnMap(), class: "flex-1 pl-4 pr-4 py-2 border border-border bg-muted rounded-4xl focus:ring-secondary hover:bg-surface-hover" }, t.mapSelector.chooseOnMap)), (state.latitude === null ||

package/dist/collection/components/solar-system-form/solar-system-form.js

@@ -246,13 +246,13 @@ export class SolarSystemForm {
         // Reusable style objects
         const borderStyle = { border: "1px solid var(--color-border)" };
         const errorBorderStyle = { border: "1px solid var(--color-error)" };
-        return (h("div", { key: '7139c9f7a83ebbbda58963c1136bbdfd7728e0bd', class: "flex flex-col justify-center items-center w-full h-full pt-4" // style={{
+        return (h("div", { key: 'c4b863b1af39c1a991ade0a6e52d4850472179fc', class: "flex flex-col justify-center items-center w-full h-full pt-4" // style={{
             ,
             //     display: (Object.keys(this.systemConfigs).length === 0)
             //         ? "none"
             //         : "flex",
             // }}
-            id: "solar-system-form" }, h("h1", { key: '4e1cdee9c1ec934d4b874e88a96db2801c79a60d', class: "text-2xl font-bold text-secondary mb-4 w-full" }, t.solarSystemForm.title), h("div", { key: '63bb70b6c15761b9268dcc3059f44eb8ad4ef2fa', class: "w-full bg-primary rounded-4xl space-y-6" }, h("div", { key: '9f0f34af0c1dbfc1b8bb07883cb592010985692b', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '5e8a8d3554ec8d810433dd75f96c32c2545508fc', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.systemInformation), h("div", { key: 'cf72325db86b65965cdb44013533477e64c23422', class: "flex flex-col sm:flex-row gap-4" }, h("div", { key: '5241cb1db7b4d7afc9179fa138a610152a7a35e1', class: "flex-1 bg-muted rounded-4xl p-4 space-y-3" }, h("div", { key: 'bc6151b8cd4b9f2e8b1b7cd311719d9fd21fc212', class: "flex items-center justify-between" }, h("label", { key: '0c1cca4024a7274281df489cd5f7bd8b62a2c96b', class: "text-sm font-medium text-text-muted" }, t.solarSystemForm.numberOfPanels), !this.isIOS()
+            id: "solar-system-form" }, h("h1", { key: 'f16c6cb7814d89682077afde61a70a7c9a9995d5', class: "text-2xl font-bold text-secondary mb-4 w-full" }, t.solarSystemForm.title), h("div", { key: 'f67f67c14779a0b3cfbb341f3ea2ad6f92d3ce7d', class: "w-full bg-primary rounded-4xl space-y-6" }, h("div", { key: 'e3cb319a2263115003179ba6f075989cb185d8f0', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: 'd764a43bb09ce1ab2dc59a76e90d977f7f12486e', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.systemInformation), h("div", { key: '53ba8250b4dd9a59e46aea10a999724bcb5562b8', class: "flex flex-col sm:flex-row gap-4" }, h("div", { key: 'd438852a9748cd8f38856cf87adc6f184b64bd87', class: "flex-1 bg-muted rounded-4xl p-4 space-y-3" }, h("div", { key: '2c84a2cba054faed9d19e1a95604bd8fcaf08f83', class: "flex items-center justify-between" }, h("label", { key: 'bfc1e1dfbcd1ad5ad420718213c2c3163de36694', class: "text-sm font-medium text-text-muted" }, t.solarSystemForm.numberOfPanels), !this.isIOS()
             ? (h("input", { type: "number", class: "w-20 px-3 py-1 rounded-full bg-muted text-muted-foreground text-right", value: this.numberOfPanels, readOnly: true }))
             : (h("input", { type: "number", min: "1", max: this.maxPanels, class: "w-20 px-3 py-1 rounded-full focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground text-center", style: borderStyle, value: this.numberOfPanels, onInput: (e) => {
                     const value = parseInt(e.target
@@ -264,34 +264,34 @@ export class SolarSystemForm {
                             value;
                         this.recalculate();
                     }
-                } }))), !this.isIOS() && (h("input", { key: 'b7cc82a0d13854509a123976ffec2150497c54bf', type: "range", min: "1", max: this.maxPanels, step: "1", class: "input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-muted", value: this.numberOfPanels, onInput: (e) => {
+                } }))), !this.isIOS() && (h("input", { key: '700cc47abe24a8654d444d33a7919e1b2ff284e5', type: "range", min: "1", max: this.maxPanels, step: "1", class: "input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-muted", value: this.numberOfPanels, onInput: (e) => {
                 this.numberOfPanels = parseInt(e.target
                     .value);
                 this.recalculate();
-            } }))), h("div", { key: '2dd7469d204e77e97c29256a07dc164bbce62b3f', class: "flex-1 bg-muted rounded-4xl p-4" }, h("div", { key: 'd6fbb640a3093ffa56ddbdecf41fee985b7c13de', class: "flex items-center justify-between" }, h("label", { key: '5967e7593b965896fca79dc911f79dfb04bd31ba', class: "text-sm font-medium text-text-muted" }, t.solarSystemForm.panelPeakPower), h("span", { key: 'ecc8aebf57ebacdce115188308a3947d4329a4cd', class: "text-text-muted" }, this.panelPeakPower.toFixed(2), " kW")), h("div", { key: '07acff632a6492d811334c1b4fdfe7631fbf8930', class: "flex items-center justify-between mt-4" }, h("span", { key: 'f8692f2cf74cd8603775e94099752c9e4d03be9b', class: "text-sm font-medium text-text-muted" }, t.solarSystemForm.totalSystemPeakPower), h("span", { key: '7a89ad672637c04b5365e7ea034448ece3d32cf2', class: "font-bold text-text-muted" }, (DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *
-            this.numberOfPanels).toFixed(1), " kWp"))))), h("div", { key: 'c913d3a0895044e60c992aa368c27379208a197b', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: 'fc1b7bfc69f79e199a8526fda30851395e615b0f', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.householdConsumptionTitle), h("div", { key: 'dc4e9eecae7e31cded9b85c544ce13c59226efa6', class: "grid grid-rows-2 gap-0" }, h("div", { key: '5e00f5e87fdccd6dd6455c9a26e3a7ce1ae05394', class: "grid grid-cols-2 gap-4" }, h("label", { key: '155a89fbbf6ccc69bdcc0bed88d05bc7d09a866d', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.annualConsumption), h("label", { key: '3bd653254b0f2ddb0c61f452952a0ab58c4f7d40', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.consumptionProfileTitle)), h("div", { key: '33113a21857b3f4f68339fc39cd3bbc4054e1586', class: "grid grid-cols-2 gap-4" }, h("input", { key: '063500ea400d697056ec5e214b6fb530af06ccfe', type: "number", class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground", style: borderStyle, value: this.householdConsumption, onInput: (e) => {
+            } }))), h("div", { key: '2baea3c8d9771676bc807039e7d397354317edf2', class: "flex-1 bg-muted rounded-4xl p-4" }, h("div", { key: 'ee09ade37be5a6588c6734d39b2caf457ac63898', class: "flex items-center justify-between" }, h("label", { key: '9ec0e4f23d8d0215f191d57357fc9491cb719880', class: "text-sm font-medium text-text-muted" }, t.solarSystemForm.panelPeakPower), h("span", { key: 'c69a889702444acaae90beba07e5ce232c9407ca', class: "text-text-muted" }, this.panelPeakPower.toFixed(2), " kW")), h("div", { key: '9d2f6a4e1f457c8094344783d6f88b9ecf97545f', class: "flex items-center justify-between mt-4" }, h("span", { key: '50803164fd47ab8640ed30e8e82c1ab0cb03b28e', class: "text-sm font-medium text-text-muted" }, t.solarSystemForm.totalSystemPeakPower), h("span", { key: '8ac4c1d2f5317d839c63cce1210d213057da2b3d', class: "font-bold text-text-muted" }, (DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *
+            this.numberOfPanels).toFixed(1), " kWp"))))), h("div", { key: '63e105972d18a7652ffdf052b746b681991c5ce5', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '93a9476ae90f046ec7baa6fe637f93f91c344d62', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.householdConsumptionTitle), h("div", { key: 'af7168453a6ba5669aa3e5cd0c76bf50a6e4cd9a', class: "grid grid-rows-2 gap-0" }, h("div", { key: 'dfd674728bbd463e66b3973623b274f8d3b248bd', class: "grid grid-cols-2 gap-4" }, h("label", { key: '09449338c984ea791077dcc9902283fdedcbb538', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.annualConsumption), h("label", { key: 'cdafadb2d7bd8d6997cbe16bbba4301dd4548625', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.consumptionProfileTitle)), h("div", { key: 'e7a648e3551ba3ffd6f4c38a58bc0f177de23f6b', class: "grid grid-cols-2 gap-4" }, h("input", { key: '6440f88826b0306d23c3e4ec7cddec2aac472b7c', type: "number", class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground", style: borderStyle, value: this.householdConsumption, onInput: (e) => {
                 this.householdConsumption = parseInt(e.target
                     .value);
                 this.recalculate();
-            } }), h("select", { key: '48628afb1e204838358a8a56d7e3d09fc1576c10', class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground", style: borderStyle, onChange: (e) => {
+            } }), h("select", { key: '3fd073928e42130907befb795a4723a3461d6332', class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground", style: borderStyle, onChange: (e) => {
                 this.consumptionProfile =
                     e.target
                         .value;
                 this.recalculate();
-            } }, h("option", { key: 'dcdcf43433687a823b4cc617d956b10a56b82133', value: "mostly_at_home", selected: this.consumptionProfile ===
+            } }, h("option", { key: '97690f14de86748d007fe5e040bceb33b818a965', value: "mostly_at_home", selected: this.consumptionProfile ===
                 "mostly_at_home" }, t.solarSystemForm.consumptionProfiles
-            .mostlyAtHome), h("option", { key: 'ad37f3694f26f08cfc65e67f6d78e14c815478c9', value: "mostly_away", selected: this.consumptionProfile ===
+            .mostlyAtHome), h("option", { key: '58e6b8216e78c92e36ee98c8fca21210682c9f6b', value: "mostly_away", selected: this.consumptionProfile ===
                 "mostly_away" }, t.solarSystemForm.consumptionProfiles
-            .mostlyAway))))), h("div", { key: '2461025c58f8e091cf757c4968b0a21108f35e75', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '89575de1e21452e71028505f02474cc6d0de197a', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.additionalComponents.title), h("div", { key: 'b2f666cfe480ce0cc8c84c24a852034b04eca215', class: "flex flex-col gap-4" }, h("div", { key: '7a224cfb1d954bed01b45e3a9f397ba69f0055b8', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '4c0d72a28f4440e647159fbb8cfe5d3a6eda53e2', class: "flex items-center justify-between" }, h("div", { key: '928b6bf84a5349fa89e3b961894b538185d33961', class: "flex items-center gap-2" }, h("input", { key: '6f5d77b885551b0280366cd837baec595529490f', type: "checkbox", id: "heatPump", class: "w-4 h-4 accent-tertiary border-border rounded-full focus:ring-tertiary focus:ring-offset-0 focus:ring-2", checked: this.heatPump > 0, onChange: (e) => {
+            .mostlyAway))))), h("div", { key: 'a303257634f1b99fcf55caac9874a4493d66b162', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '1a71b6f0070626dfe513ead8676094283836ddf9', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.additionalComponents.title), h("div", { key: 'c589947991e8c98e26479cc9b1804438334f3097', class: "flex flex-col gap-4" }, h("div", { key: '8380ac37f31dafc4c191054fc13530c6890ff02d', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: 'd6409449bae31d2c8ede375c2ce8881cfe8f7ca5', class: "flex items-center justify-between" }, h("div", { key: '2fdf38789785d5d9033d482bf0ac7e65f17fbcd1', class: "flex items-center gap-2" }, h("input", { key: 'c7b39055708c9d817774decd4ec2c78b272a9844', type: "checkbox", id: "heatPump", class: "w-4 h-4 accent-tertiary border-border rounded-full focus:ring-tertiary focus:ring-offset-0 focus:ring-2", checked: this.heatPump > 0, onChange: (e) => {
                 this.heatPump =
                     e.target
                         .checked
                         ? 100
                         : 0;
                 this.recalculate();
-            } }), h("label", { key: '4df84acd8d1011ace4903c10674a6ea6c8320276', htmlFor: "heatPump", class: "text-text-muted" }, t.solarSystemForm
+            } }), h("label", { key: '2af0b5630e68197bc82559fea91dc4c368f1da24', htmlFor: "heatPump", class: "text-text-muted" }, t.solarSystemForm
             .additionalComponents
-            .heatPump)), (this.heatPump > 0 && !this.isIOS()) && (h("span", { key: 'e1cc7cac2dd0d3efbefd9e05ef7fe61c7a1cfe3a', class: "text-text-muted" }, this.heatPump, " m\u00B2"))), this.heatPump > 0 && (h("div", { key: '5bef4d0ac8adbd58bd8f4d56e6ba1c83f22d6f98', class: "flex flex-col gap-2" }, this.isIOS()
+            .heatPump)), (this.heatPump > 0 && !this.isIOS()) && (h("span", { key: '0c3bd6c00bdd6433b0f703d1006b6e96247fc2d3', class: "text-text-muted" }, this.heatPump, " m\u00B2"))), this.heatPump > 0 && (h("div", { key: '3e4911bf5f60f363af4ad78b6f88e531766258b2', class: "flex flex-col gap-2" }, this.isIOS()
             ? (h("div", { class: "flex items-center gap-2" }, h("input", { type: "number", min: "10", max: "300", step: "10", class: "flex-1 px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", style: borderStyle, value: this.heatPump, onInput: (e) => {
                     const value = parseInt(e.target
                         .value);
@@ -307,45 +307,45 @@ export class SolarSystemForm {
                         parseInt(e.target
                             .value);
                     this.recalculate();
-                } }))))), h("div", { key: '76a40ab1f89c47050faf446a2017b2b74703638a', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '56666133211231da0c95f3ecd058ea62615ea88c', class: "flex items-center justify-between" }, h("div", { key: '08b1d06eb90a88e5583989f5d2743f9e294a1f7e', class: "flex items-center gap-2" }, h("input", { key: 'cbd441786b9e23720e2a0aa2c39ef5bbaaed01b4', type: "checkbox", id: "electricCar", class: "w-4 h-4 accent-tertiary border-border rounded focus:ring-tertiary focus:ring-offset-0 focus:ring-2", checked: this.electricCar, onChange: (e) => {
+                } }))))), h("div", { key: 'cb2dfbdd57d0399ce19c834b077734641aeba540', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: 'bc42615ea031c82db3b7d7de78b0c04743d9d522', class: "flex items-center justify-between" }, h("div", { key: '3aee091fee293ba90a63f21a2d11ffd285253fe0', class: "flex items-center gap-2" }, h("input", { key: '4ad61f12379e9cc3df7cac76e930a248008b9eed', type: "checkbox", id: "electricCar", class: "w-4 h-4 accent-tertiary border-border rounded focus:ring-tertiary focus:ring-offset-0 focus:ring-2", checked: this.electricCar, onChange: (e) => {
                 this.electricCar =
                     e.target
                         .checked;
                 this.recalculate();
-            } }), h("label", { key: 'f746d81d324d236e53d553706a0a64f78d6ae2d8', htmlFor: "electricCar", class: "text-text-muted" }, t.solarSystemForm
+            } }), h("label", { key: 'd82e6f34c13673e695ff62cddc9e2a3d1389a649', htmlFor: "electricCar", class: "text-text-muted" }, t.solarSystemForm
             .additionalComponents
-            .electricCar))), this.electricCar && (h("div", { key: 'f2a0ff39ca1e52ba544f333ebd73da57b0803f36', class: "flex flex-col gap-2" }, h("div", { key: '052c60cf1661a8d3fe826a63e657b7ebb228bccc', class: "grid grid-cols-2 gap-4" }, h("label", { key: 'f486f4876988df361f4bbb967e566112c491036c', class: "text-sm text-text-muted" }, t.solarSystemForm
+            .electricCar))), this.electricCar && (h("div", { key: '5e02124083c1f3358bfa7e379879f3017de230d0', class: "flex flex-col gap-2" }, h("div", { key: 'fab21991242e4f34de9fe83f4a6acd6f8ca692e3', class: "grid grid-cols-2 gap-4" }, h("label", { key: '6515ec9d74efb1dac71b138ffd6840bc5c1f0eac', class: "text-sm text-text-muted" }, t.solarSystemForm
             .additionalComponents
-            .chargingTime), h("label", { key: '870bc7ff65a52cfa1bbfa0296bf8428c104d5edf', class: "text-sm text-text-muted" }, t.solarSystemForm
+            .chargingTime), h("label", { key: '2c1764e5865e055c6f9b26d0bfeeecf147eb0fbf', class: "text-sm text-text-muted" }, t.solarSystemForm
             .additionalComponents
-            .kilometersPerYear)), h("div", { key: 'e1698c0928da471f3758228502159baafecbe44b', class: "grid grid-cols-2 gap-4" }, h("select", { key: '82362f74b362a31c8a30e246d073836e93bec1c3', class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", onChange: (e) => {
+            .kilometersPerYear)), h("div", { key: 'bee6a64c20c4f6be20b13abf736fd9af7d2b55e2', class: "grid grid-cols-2 gap-4" }, h("select", { key: 'a93cc2b58ba528a7c1b418476f15d8acaea12337', class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", onChange: (e) => {
                 this.electricCarChargingTime =
                     e.target
                         .value;
                 this.recalculate();
-            }, style: borderStyle }, h("option", { key: 'c76bd6ed6abbcb624f3c79585cb6f719bc60b30e', value: "day", selected: this
+            }, style: borderStyle }, h("option", { key: '7b853c0c65c82f73de9a1f8217203aaa923d1486', value: "day", selected: this
                 .electricCarChargingTime ===
                 "day" }, t.solarSystemForm
             .additionalComponents
-            .chargingTimeDay), h("option", { key: 'abc0fd939d0d6d228b124f53e9b297bd8079fef6', value: "night", selected: this
+            .chargingTimeDay), h("option", { key: '6dc4797ab24f81dd7a2e26ff7e1a8bc56d50a532', value: "night", selected: this
                 .electricCarChargingTime ===
                 "night" }, t.solarSystemForm
             .additionalComponents
-            .chargingTimeNight)), h("input", { key: '0f8792d286b91548ca25843c1ad31dd081842f88', type: "number", min: "1000", max: "50000", step: "1000", class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", value: this.kmDrivenPerYear, onInput: (e) => {
+            .chargingTimeNight)), h("input", { key: '8fbfed0e3554130c2e81ea9e68fc8d5c28cb1a44', type: "number", min: "1000", max: "50000", step: "1000", class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", value: this.kmDrivenPerYear, onInput: (e) => {
                 this.kmDrivenPerYear =
                     parseInt(e.target
                         .value);
                 this.recalculate();
-            }, style: borderStyle }))))), h("div", { key: '3f9c6afd978a3e77435e035e64d9aaf3aa0aa97a', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '99b1f2cfbf1d8cba8d1fb19201ee59faa8943858', class: "flex items-center justify-between" }, h("div", { key: 'ae3155b4b63cea133953a9dee18629c61dbd1cc4', class: "flex items-center gap-2" }, h("input", { key: 'bbfe892ac4fe0564701d1e8a5595b6b85f0ba76a', type: "checkbox", id: "battery", class: "w-4 h-4 accent-tertiary border-border rounded-full focus:ring-tertiary focus:ring-offset-0 focus:ring-2", checked: this.battery > 0, onChange: (e) => {
+            }, style: borderStyle }))))), h("div", { key: 'a5355f0711744f72462918ba328de54fadb8fdb4', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: 'adec551d6cddee29e6c12844392ee010429e2bcc', class: "flex items-center justify-between" }, h("div", { key: '2b8150a5406c56b225390d225d59b9c691163288', class: "flex items-center gap-2" }, h("input", { key: '6a7055ea33f5a7a4e0d233715881c7e45c175821', type: "checkbox", id: "battery", class: "w-4 h-4 accent-tertiary border-border rounded-full focus:ring-tertiary focus:ring-offset-0 focus:ring-2", checked: this.battery > 0, onChange: (e) => {
                 this.battery =
                     e.target
                         .checked
                         ? 5
                         : 0;
                 this.recalculate();
-            } }), h("label", { key: 'c0da0d83bfe05a6591683e308f14f2d7aa60b3b3', htmlFor: "battery", class: "text-text-muted" }, t.solarSystemForm
+            } }), h("label", { key: 'e3b33f05afdbbb3cd18e9c4daad24dbb163b05d9', htmlFor: "battery", class: "text-text-muted" }, t.solarSystemForm
             .additionalComponents
-            .battery)), (this.battery > 0 && !this.isIOS()) && (h("span", { key: '7e7e5848a5c12d3029887800c9cfa6a97c3c5f8d', class: "text-text-muted" }, this.battery, " kWh"))), this.battery > 0 && (h("div", { key: '41ebca4575af0383bae612780942f52197835390', class: "flex flex-col gap-2" }, this.isIOS()
+            .battery)), (this.battery > 0 && !this.isIOS()) && (h("span", { key: 'bc38e845b65f9cd70bddd2d9eff0972a2a4fe1f4', class: "text-text-muted" }, this.battery, " kWh"))), this.battery > 0 && (h("div", { key: 'c2a343fdbf6fcdf7e1e29ceae2f28b1d9a71042a', class: "flex flex-col gap-2" }, this.isIOS()
             ? (h("div", { class: "flex items-center gap-2" }, h("input", { type: "number", min: "1", max: "20", step: "1", class: "flex-1 px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", value: this.battery, onInput: (e) => {
                     const value = parseInt(e.target
                         .value);
@@ -360,52 +360,52 @@ export class SolarSystemForm {
                     this.battery = parseInt(e.target
                         .value);
                     this.recalculate();
-                } }))))))), h("div", { key: '1f3db56a01db3aa71a3e732eb42feee34619c016', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '4406c2eb5ce9f2fb6c2b9ced506e2722dd33c90d', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.electricityCostsTitle), h("div", { key: '9474e98cb4f906dc7bbe9c1ae9677be099af8554', style: {
+                } }))))))), h("div", { key: 'efb2acf353a1573708eab9ecd1ac97f39299ba53', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: 'f6dbd63ed12d75ec365c4801823f69dc51a5a690', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.electricityCostsTitle), h("div", { key: '840a2b1a004146357f809abc8f02420233a97f24', style: {
                 display: "grid",
                 gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
                 gap: "1rem",
-            } }, h("div", { key: '45be0a23fce514b258b89308355512be1ab76543' }, h("label", { key: 'd4b5ae8bec34ea36437fbc80808954e3faa4b53a', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.electricityPrice), h("input", { key: '3f0f2f9f6424647f3b39fd6c1c71673c151f5168', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", style: borderStyle, value: this.electricityPrice.toFixed(2), onInput: (e) => {
+            } }, h("div", { key: '562bf90f963199666c62c4c611b4be0d377a0784' }, h("label", { key: 'c6c4e06590b5f6d0ec37965227615225c7c3d4b3', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.electricityPrice), h("input", { key: 'ea28e6bd0af236082ed6a3d35f1409e03e956ffd', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", style: borderStyle, value: this.electricityPrice.toFixed(2), onInput: (e) => {
                 this.electricityPrice = parseFloat(e.target
                     .value);
                 this.recalculate();
-            } })), h("div", { key: 'ff004d5e3a408d0b471bccff956297eb80359581' }, h("label", { key: 'afd1ecf5fcbad4ccd0a9ab091e16cffd9c21b64c', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.compensationRate), h("input", { key: 'f22a6fa86cb9ade28345570bacd51a0ca69e3ccd', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", style: borderStyle, value: this.compensationRate.toFixed(2), onInput: (e) => {
+            } })), h("div", { key: '6df3b1506de22c70a288673b656a2f8223cb896b' }, h("label", { key: 'cc3269fa97f9f6a013afa7ff5b47ff5402f41a1a', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.compensationRate), h("input", { key: '0b0524bf3a5ef85a61e16083ac5e5d51d6c5e6e3', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", style: borderStyle, value: this.compensationRate.toFixed(2), onInput: (e) => {
                 this.compensationRate = parseFloat(e.target
                     .value);
                 this.recalculate();
-            } })), h("div", { key: '2b2f63afb3a565fbd96c3e81e06c7281fb62fa3b' }, h("label", { key: '46f212c2b33c682f3b2c203dc71f7b6441cc25a5', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.annualPriceIncrease), h("input", { key: '164994dc4f1bdaa38b0fd4a069ac1fbc0f02026f', type: "number", step: "0.1", class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", style: borderStyle, value: this.annualPriceIncrease.toFixed(1), onInput: (e) => {
+            } })), h("div", { key: '5f1d4a5b6634ef69cf3f136c1cbf6bc65a279714' }, h("label", { key: '1d11a2efe7543f1c0053853a58aaaa3bb3540229', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.annualPriceIncrease), h("input", { key: 'b00e8d7c9ae066d47f8167d7d9dee712579ce169', type: "number", step: "0.1", class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", style: borderStyle, value: this.annualPriceIncrease.toFixed(1), onInput: (e) => {
                 this.annualPriceIncrease = parseFloat(e.target
                     .value);
                 this.recalculate();
-            } })))), h("div", { key: '6543bebe9a5c3ddd914cd79a1d0bccdeb064091f', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '05fafd14c233ce175189d8bd93df07121ee7c33c', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.resultsTitle), h("div", { key: '8dc5907b2cc779ff942ee0e6f2b501924f9d1a97', class: "bg-muted rounded-4xl p-4" }, h("div", { key: '8fd3a7c0ef678a57834242dbc5e655cba001888a', class: "flex flex-col sm:flex-row sm:items-center justify-between" }, h("span", { key: 'c2c32f7f9f5f50242332c6a4b5af2cedb7fb6669', class: "text-text-muted" }, t.solarSystemForm.autonomy), h("span", { key: 'd6e5824d2b44cac00cd5d712007e65b2ccd0ecfd', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.autonomy > 100
+            } })))), h("div", { key: '542b85d2919922d7b0558c27db4af5e57bb7053a', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '8b243c682f35edc432cb47893f6c3b056865d4a9', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.resultsTitle), h("div", { key: 'c9691274de7f6e36f44fc4dc963ec1f3a06f2a66', class: "bg-muted rounded-4xl p-4" }, h("div", { key: '3bf185cf97981773e8a58e28ed132e856760a656', class: "flex flex-col sm:flex-row sm:items-center justify-between" }, h("span", { key: '3b4876e1c9ebf8c031350ec81418bc184413d29d', class: "text-text-muted" }, t.solarSystemForm.autonomy), h("span", { key: 'fababe0658ec1a73e79ab063a7877cbe2322ad3f', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.autonomy > 100
             ? "100"
-            : this.formatEuropeanNumber(this.autonomy, 1), "%")), h("div", { key: '15e3620ae50666bbd4dd08379d2d276b41508379', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("span", { key: 'ff9746b6eb4046ddf4d87839555297e64205e841', class: "text-text-muted" }, t.solarSystemForm.totalEnergyConsumption), h("span", { key: '692198f0d789364993b679f4d73c098c7a2c2b93', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.totalEnergyConsumption, 0), " kWh/", t.solarSystemForm.year)), h("div", { key: '8a292497f9b701b0805e5c3a2d007c8242033891', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("span", { key: 'd156ccda8acafbc6946810493c150881bc891757', class: "text-text-muted" }, t.solarSystemForm.totalEnergyProduction), h("span", { key: 'f3b8171f54c842950cf442b51a8e712b21a28a7c', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.totalEnergyProduction, 0), " kWh/", t.solarSystemForm.year)), h("div", { key: '0ce95a5cfff5c3ae27056b680f4e290b5c383cea', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: 'e3551545706f356cbdb82b9d9b2b90c561f7895e', class: "flex items-center gap-2" }, h("span", { key: '97df861ed813711fc7d2f225b45071c9a6035e3d', class: "text-text-muted" }, t.solarSystemForm.costSavings)), h("span", { key: '0929f0961f4db248a3ad63cc685d5d48f4e0693c', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.costSavings), "\u20AC/", t
-            .solarSystemForm.year)), h("div", { key: '8658c9d6537b980d3c32f1382c9a1507de5482bf', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: 'e3b71e616e9f0be006cd48eb57161e24f5a8f204', class: "flex items-center gap-2" }, h("span", { key: 'a083ad4fec0a9d546cd2d38fdbaeb4d76e5ce091', class: "text-text-muted" }, t.solarSystemForm.compensation20Years)), h("span", { key: '028c3f9c1135bb74f4bf39baf657ac73dbd935d3', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.compensation20Years), "\u20AC")), h("div", { key: '875446618133c6cbe70c4939fa46a5b85157e6ca', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: '98b9829e57eb40d1be9f42d0497b5678363ef20b', class: "flex items-center gap-2" }, h("span", { key: '6a87d1ebb879bacade7d1de58942bdb080190e6c', class: "text-text-muted" }, t.solarSystemForm
-            .monetaryBenefit20Years)), h("span", { key: 'fcae5f3a40137fad4a51df1afa5cbb70cca43b0e', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.savedCosts20Years), "\u20AC")))), h("div", { key: 'f6298fa9bbba037cecb0b8e55bdd620b0cac1602', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: 'ba176c714d0c73cec7354b060734fbafdbbfd7b7', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.requestOffer), h("div", { key: 'e35c8b896aecc01ccc8036a64cfcd52636d7d816', style: {
+            : this.formatEuropeanNumber(this.autonomy, 1), "%")), h("div", { key: '901b8fc9418102301d901326937f59da70f7eb64', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("span", { key: '407c3df55e680c5551059a1546f7a57ae299d86e', class: "text-text-muted" }, t.solarSystemForm.totalEnergyConsumption), h("span", { key: 'c3771fa352ef8593a4c04c3dd9e1ad7bba5af746', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.totalEnergyConsumption, 0), " kWh/", t.solarSystemForm.year)), h("div", { key: 'cd75a9bf5c693a76335b428b72ae0e76c6030341', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("span", { key: 'b681aea2ce7da12ca9e4a87ae819b63ea1e37cad', class: "text-text-muted" }, t.solarSystemForm.totalEnergyProduction), h("span", { key: '2494571d91d9aedc4f73b276612e839c3b61b9f6', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.totalEnergyProduction, 0), " kWh/", t.solarSystemForm.year)), h("div", { key: 'a2710be9521b1c315cd8fedc244efa1f87c13f60', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: '4e5bc0f97624039e436e9d40bc48f3efeea026e5', class: "flex items-center gap-2" }, h("span", { key: 'a697c02032c391da80a8b19d10fb1156450238dd', class: "text-text-muted" }, t.solarSystemForm.costSavings)), h("span", { key: '335e8b5f9813d06aa08326f07f1d1d9b3a796837', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.costSavings), "\u20AC/", t
+            .solarSystemForm.year)), h("div", { key: 'a502cd4f29c72b49b4d4b2b795a501b662f965b1', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: '6304c3d74c0e84a367d15ffababd801200a19826', class: "flex items-center gap-2" }, h("span", { key: '6905528773803b5e519ba55068aed68455ef125b', class: "text-text-muted" }, t.solarSystemForm.compensation20Years)), h("span", { key: '8b0b9e3b9846519ee7a418df944dd46927376c88', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.compensation20Years), "\u20AC")), h("div", { key: '40f7aa995541d20fa20273868bf10597318c3020', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: 'e19297116ccaf4477221d262d2c0221e69d5f448', class: "flex items-center gap-2" }, h("span", { key: '6f0d9100f01d8101d872491b30c0af09119881b2', class: "text-text-muted" }, t.solarSystemForm
+            .monetaryBenefit20Years)), h("span", { key: '7175a293ddcffd1596aa19aba2dce407bb6da786', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.savedCosts20Years), "\u20AC")))), h("div", { key: '475f37f859222cdd006e5a679fd04b279a1faea6', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '4c7029beffe9ff0974314ad12b50a66953b857de', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.requestOffer), h("div", { key: '88ab4a782229eb2cc25423935a55ce6f9dfaa4e3', style: {
                 display: "grid",
                 gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
                 gap: "1rem",
-            } }, h("div", { key: 'd88465e3c4edc99871fc92a0f36900d204579d9a' }, h("label", { key: 'f0a49b5ed350c5f638a64de1fa87739e46297c9f', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.name), h("input", { key: '70eb7d64859083937ed05c85e2a433b862e7ef0c', type: "text", class: `w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`, style: this.nameError
+            } }, h("div", { key: '3f2d08e46aa39e5b2f1130bbe193c5da21ab8aef' }, h("label", { key: 'dd145c8cb7bbd54cd4f7e89aeefd87753ac9f309', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.name), h("input", { key: '2a7b3a383384bb57433574cb449414540793f9f2', type: "text", class: `w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`, style: this.nameError
                 ? errorBorderStyle
                 : borderStyle, value: this.name, onInput: (e) => {
                 this.name =
                     e.target
                         .value;
                 this.validateForm();
-            }, placeholder: "Your name" }), this.nameError && (h("p", { key: '953421511217ed5759266488e606ee706cbaaa66', class: "text-error text-sm mt-1" }, this.nameError))), h("div", { key: '7d2c2f6ce9f6161ea1123f45b017479f0a872153' }, h("label", { key: '190c752cc5f9a0db9355b871b42adfdedd7160b3', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.email), h("input", { key: 'f1bad4e18f283acd556017bb8ccb880cbbc804c4', type: "email", class: `w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`, style: this.emailError
+            }, placeholder: "Your name" }), this.nameError && (h("p", { key: '354026e9eaef5eeb86eed1e0dc358115ae298300', class: "text-error text-sm mt-1" }, this.nameError))), h("div", { key: '2eaf3db2a05f695b4ef0749d7602ecee18b5d577' }, h("label", { key: '36dff02beeca1ddea549e83ceb71966bb0aacb48', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.email), h("input", { key: '85910e2c7ee8cc88e9f996c2a0ba0fcf86d59e59', type: "email", class: `w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`, style: this.emailError
                 ? errorBorderStyle
                 : borderStyle, value: this.email, onInput: (e) => {
                 this.email =
                     e.target
                         .value;
                 this.validateForm();
-            }, placeholder: "your.email@example.com" }), this.emailError && (h("p", { key: '07e41cd62db7a0585ce03cf66978bc1b485fcd58', class: "text-error text-sm mt-1" }, this.emailError))), h("div", { key: '4ac9628f2ce4cba2fda116e2ffbb6496372dcecf' }, h("label", { key: '94e2332210a1efed939555f52645cd0ebfef2679', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.phone), h("input", { key: 'de94479e3cf9c16f35e536815f1f511e168ef8e0', type: "tel", class: `w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`, style: this.phoneError
+            }, placeholder: "your.email@example.com" }), this.emailError && (h("p", { key: '81e78ae62078c098c085d5a5fc5490f823ca6490', class: "text-error text-sm mt-1" }, this.emailError))), h("div", { key: 'fa8d532dcb2302d7a41dd8158b51c9de6b209266' }, h("label", { key: 'eab96802287ad8cca257cacdbc4fc1b3bca415f5', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.phone), h("input", { key: '787fbf9446b6d234c6c578ebcfc0fe1b542005a2', type: "tel", class: `w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`, style: this.phoneError
                 ? errorBorderStyle
                 : borderStyle, value: this.phone, onInput: (e) => {
                 this.phone =
                     e.target
                         .value;
                 this.validateForm();
-            }, placeholder: "+34 123 456 789" }), this.phoneError && (h("p", { key: '644a0267abc1fec8a6a2784b21e1327d71f091af', class: "text-error text-sm mt-1" }, this.phoneError)))), h("div", { key: '4c88bcdee1119057ecc14ead825fd144414577ba', class: "flex flex-col items-center gap-4" }, h("button", { key: 'c8c97d037ad92042100af3c3be6bfdc1ff2517a5', onClick: () => this.handleRequestOffer(), disabled: !this.name.trim() ||
+            }, placeholder: "+34 123 456 789" }), this.phoneError && (h("p", { key: '4cb74a029cd07df756d4610f75573fe203a1edf3', class: "text-error text-sm mt-1" }, this.phoneError)))), h("div", { key: 'd0448812f7243c93b0b13f39e235fb5177be69e8', class: "flex flex-col items-center gap-4" }, h("button", { key: '9036e4de438c18a1291602e58b4904dc8f4a9764', onClick: () => this.handleRequestOffer(), disabled: !this.name.trim() ||
                 !this.email.trim() || !!this.nameError ||
                 !!this.emailError || !!this.phoneError ||
                 this.isSubmitting, class: `px-6 py-3 rounded-4xl transition-colors duration-200 flex items-center gap-2 ${this.isSubmitting
@@ -414,9 +414,9 @@ export class SolarSystemForm {
                 color: this.isSubmitting
                     ? "var(--color-text-muted)"
                     : "#ffffff",
-            } }, this.isSubmitting && (h("div", { key: '78ccc59f3f59496867c0699c1370cf79b4c7fe7d', class: "w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" })), this.isSubmitting
+            } }, this.isSubmitting && (h("div", { key: '89c735be20b53bba625e9e3244cd4cf523a75ab2', class: "w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" })), this.isSubmitting
             ? t.solarSystemForm.sending
-            : t.solarSystemForm.requestOfferButton), this.submitMessage && (h("div", { key: '5a1efe7e4264d5510618570e494b7ccbfef76bfa', class: `text-sm px-4 py-2 rounded-4xl ${this.submitSuccess
+            : t.solarSystemForm.requestOfferButton), this.submitMessage && (h("div", { key: '277990957d0396048fd8735ecfc27c9a601941a0', class: `text-sm px-4 py-2 rounded-4xl ${this.submitSuccess
                 ? "bg-success/10 text-success border border-success/20"
                 : "bg-error/10 text-error border border-error/20"}` }, this.submitMessage)))))));
     }

package/dist/collection/components/widgets/loading-widget.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class LoadingWidget {
     render() {
-        return (h("div", { key: '8755b3e92bc0d590b1320e373e8d6a89078f8ce7', class: "absolute flex items-center justify-center bg-muted bg-opacity-75 z-20 pt-7 rounded-4xl" }, h("div", { key: '1e7303711abc2c88edd4db672bf73d44391fe0ae', class: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-secondary" })));
+        return (h("div", { key: '1acecea39dba1a012e6bb35b4b17f3e40aa0e8fc', class: "absolute flex items-center justify-center bg-muted bg-opacity-75 z-20 pt-7 rounded-4xl" }, h("div", { key: '1bc46dbd17c8e6ce7468876a9534c672cc198dee', class: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-secondary" })));
     }
     static get is() { return "loading-widget"; }
     static get originalStyleUrls() {

package/dist/collection/components/widgets/toast-notification.js

@@ -0,0 +1,133 @@
+import { h } from "@stencil/core";
+export class ToastNotification {
+    message = "";
+    type = "info";
+    duration = 5000; // Duration in milliseconds
+    isVisible = false;
+    isExiting = false;
+    timeoutId;
+    componentWillLoad() {
+        this.showToast();
+    }
+    showToast() {
+        this.isVisible = true;
+        this.isExiting = false;
+        // Auto-hide after duration
+        this.timeoutId = window.setTimeout(() => {
+            this.hideToast();
+        }, this.duration);
+    }
+    hideToast() {
+        this.isExiting = true;
+        // Remove from DOM after animation completes
+        // setTimeout(() => {
+        //     this.isVisible = false;
+        // }, 300); // Match the CSS transition duration
+    }
+    disconnectedCallback() {
+        if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+        }
+    }
+    getToastStyles() {
+        const baseStyles = "fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50 px-4 py-3 rounded-lg shadow-lg transition-all duration-300 ease-in-out";
+        const typeStyles = {
+            success: "bg-success/90 text-success-foreground border border-success/20",
+            info: "bg-info/90 text-info-foreground border border-info/20",
+            warning: "bg-warning/90 text-warning-foreground border border-warning/20",
+            error: "bg-error/90 text-error-foreground border border-error/20",
+        };
+        const animationStyles = this.isExiting
+            ? "opacity-0 translate-y-2 scale-95"
+            : "opacity-100 translate-y-0 scale-100";
+        return `${baseStyles} ${typeStyles[this.type]} ${animationStyles}`;
+    }
+    render() {
+        if (!this.isVisible) {
+            return null;
+        }
+        return (h("div", { class: this.getToastStyles() }, h("div", { class: "flex items-center gap-2" }, h("span", { class: "text-sm font-medium" }, this.message))));
+    }
+    static get is() { return "toast-notification"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "message": {
+                "type": "string",
+                "attribute": "message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"success\" | \"info\" | \"warning\" | \"error\"",
+                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"info\""
+            },
+            "duration": {
+                "type": "number",
+                "attribute": "duration",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "5000"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {},
+            "isExiting": {}
+        };
+    }
+}
+//# sourceMappingURL=toast-notification.js.map

package/dist/collection/components/widgets/toast-notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-notification.js","sourceRoot":"","sources":["../../../src/components/widgets/toast-notification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO1D,MAAM,OAAO,iBAAiB;IAE1B,OAAO,GAAW,EAAE,CAAC;IAErB,IAAI,GAA6C,MAAM,CAAC;IAExD,QAAQ,GAAW,IAAI,CAAC,CAAC,2BAA2B;IAG5C,SAAS,GAAY,KAAK,CAAC;IAE3B,SAAS,GAAY,KAAK,CAAC;IAE3B,SAAS,CAAS;IAE1B,iBAAiB;QACb,IAAI,CAAC,SAAS,EAAE,CAAC;IACrB,CAAC;IAEO,SAAS;QACb,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QAEvB,2BAA2B;QAC3B,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACpC,IAAI,CAAC,SAAS,EAAE,CAAC;QACrB,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtB,CAAC;IAEO,SAAS;QACb,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QAEtB,4CAA4C;QAC5C,qBAAqB;QACrB,8BAA8B;QAC9B,gDAAgD;IACpD,CAAC;IAED,oBAAoB;QAChB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACjC,CAAC;IACL,CAAC;IAEO,cAAc;QAClB,MAAM,UAAU,GACZ,gIAAgI,CAAC;QAErI,MAAM,UAAU,GAAG;YACf,OAAO,EACH,gEAAgE;YACpE,IAAI,EAAE,uDAAuD;YAC7D,OAAO,EACH,gEAAgE;YACpE,KAAK,EAAE,0DAA0D;SACpE,CAAC;QAEF,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS;YAClC,CAAC,CAAC,kCAAkC;YACpC,CAAC,CAAC,qCAAqC,CAAC;QAE5C,OAAO,GAAG,UAAU,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,eAAe,EAAE,CAAC;IACvE,CAAC;IAED,MAAM;QACF,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YAClB,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,OAAO,CACH,WAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC7B,WAAK,KAAK,EAAC,yBAAyB;gBAChC,YAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,OAAO,CAAQ,CACrD,CACJ,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: \"toast-notification\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class ToastNotification {\r\n    @Prop()\r\n    message: string = \"\";\r\n    @Prop()\r\n    type: \"success\" | \"info\" | \"warning\" | \"error\" = \"info\";\r\n    @Prop()\r\n    duration: number = 5000; // Duration in milliseconds\r\n\r\n    @State()\r\n    private isVisible: boolean = false;\r\n    @State()\r\n    private isExiting: boolean = false;\r\n\r\n    private timeoutId: number;\r\n\r\n    componentWillLoad() {\r\n        this.showToast();\r\n    }\r\n\r\n    private showToast() {\r\n        this.isVisible = true;\r\n        this.isExiting = false;\r\n\r\n        // Auto-hide after duration\r\n        this.timeoutId = window.setTimeout(() => {\r\n            this.hideToast();\r\n        }, this.duration);\r\n    }\r\n\r\n    private hideToast() {\r\n        this.isExiting = true;\r\n\r\n        // Remove from DOM after animation completes\r\n        // setTimeout(() => {\r\n        //     this.isVisible = false;\r\n        // }, 300); // Match the CSS transition duration\r\n    }\r\n\r\n    disconnectedCallback() {\r\n        if (this.timeoutId) {\r\n            clearTimeout(this.timeoutId);\r\n        }\r\n    }\r\n\r\n    private getToastStyles() {\r\n        const baseStyles =\r\n            \"fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50 px-4 py-3 rounded-lg shadow-lg transition-all duration-300 ease-in-out\";\r\n\r\n        const typeStyles = {\r\n            success:\r\n                \"bg-success/90 text-success-foreground border border-success/20\",\r\n            info: \"bg-info/90 text-info-foreground border border-info/20\",\r\n            warning:\r\n                \"bg-warning/90 text-warning-foreground border border-warning/20\",\r\n            error: \"bg-error/90 text-error-foreground border border-error/20\",\r\n        };\r\n\r\n        const animationStyles = this.isExiting\r\n            ? \"opacity-0 translate-y-2 scale-95\"\r\n            : \"opacity-100 translate-y-0 scale-100\";\r\n\r\n        return `${baseStyles} ${typeStyles[this.type]} ${animationStyles}`;\r\n    }\r\n\r\n    render() {\r\n        if (!this.isVisible) {\r\n            return null;\r\n        }\r\n\r\n        return (\r\n            <div class={this.getToastStyles()}>\r\n                <div class=\"flex items-center gap-2\">\r\n                    <span class=\"text-sm font-medium\">{this.message}</span>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}