blue-chestnut-solar-expert 0.0.63 → 0.0.65

package/dist/collection/components/map-draw/polygon-information.js.map

@@ -1 +1 @@
-{"version":3,"file":"polygon-information.js","sourceRoot":"","sources":["../../../src/components/map-draw/polygon-information.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport { Polygon } from \"harmonia-types\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { state } from \"../../store\";\r\nimport { azimuthToCardinal } from \"../../utils/utils\";\r\n\r\n@Component({\r\n    tag: \"polygon-information\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class PolygonInformation {\r\n    @Prop()\r\n    currentPolygon: Polygon;\r\n    @Prop()\r\n    numberOfPanels: number | undefined;\r\n    @Prop()\r\n    handleAzimuthChange: (event: Event) => void;\r\n    @Prop()\r\n    handlePitchChange: (event: Event) => void;\r\n    @Prop()\r\n    calculateSolarPanels: () => void;\r\n    @Prop()\r\n    markAsFlatRoof: () => void;\r\n    @Prop()\r\n    currentTool: string;\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n        // console.log(this.currentPolygon);\r\n\r\n        return (\r\n            <div\r\n                class=\"flex gap-4 flex-row justify-center items-center w-full rounded-4xl pb-2\"\r\n                style={{\r\n                    border: \"1px solid var(--color-border)\",\r\n                }}\r\n            >\r\n                <div class=\"w-full bg-primary rounded-4xl p-3 text-secondary\">\r\n                    <h3 class=\"text-lg font-semibold mb-4 text-center\">\r\n                        {t.mapDraw.information}\r\n                    </h3>\r\n                    <polygon-buttons\r\n                        calculateSolarPanels={this.calculateSolarPanels}\r\n                        markAsFlatRoof={this.markAsFlatRoof}\r\n                        currentTool={this.currentTool}\r\n                    />\r\n                    {this.currentPolygon?.area\r\n                        ? (\r\n                            <div class=\"space-y-4\">\r\n                                <div>\r\n                                    <div class=\"grid grid-cols-2 gap-2\">\r\n                                        <div>\r\n                                            <h4 class=\"text-sm font-medium text-text-muted\">\r\n                                                {t.mapDraw.area}\r\n                                            </h4>\r\n                                            <p class=\"text-lg\">\r\n                                                {this.currentPolygon\r\n                                                    ?.area\r\n                                                    .toFixed(2)} m²\r\n                                            </p>\r\n                                        </div>\r\n                                        <div>\r\n                                            <div>\r\n                                                <h4 class=\"text-sm font-medium text-text-muted\">\r\n                                                    {t.mapDraw.panels}\r\n                                                </h4>\r\n                                                <p class=\"text-lg\">\r\n                                                    {this.numberOfPanels ?? 0}\r\n                                                </p>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div>\r\n                                    <h4 class=\"text-sm font-medium text-text-muted\">\r\n                                        {t.mapDraw.azimuth}\r\n                                    </h4>\r\n                                    <div class=\"flex gap-2 flex-row justify-start bg-muted rounded-4xl p-2\">\r\n                                        <input\r\n                                            class=\"text-lg w-full\"\r\n                                            onKeyDown={(e) => {\r\n                                                if (e.key === \"Enter\") {\r\n                                                    this.handleAzimuthChange(\r\n                                                        e,\r\n                                                    );\r\n                                                    (e.target as HTMLInputElement)\r\n                                                        .blur();\r\n                                                }\r\n                                            }}\r\n                                            value={this.currentPolygon\r\n                                                ?.azimuth ?? 0}\r\n                                        />\r\n                                        ({azimuthToCardinal(\r\n                                            this.currentPolygon.azimuth,\r\n                                        )})\r\n                                    </div>\r\n                                    {!state.isIOS && (\r\n                                        <input\r\n                                            type=\"range\"\r\n                                            min=\"0\"\r\n                                            max=\"360\"\r\n                                            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\"\r\n                                            value={this.currentPolygon\r\n                                                ?.azimuth ?? 0}\r\n                                            onInput={(e) => {\r\n                                                this.handleAzimuthChange(e);\r\n                                            }}\r\n                                        />\r\n                                    )}\r\n                                </div>\r\n                                <div>\r\n                                    <h4 class=\"text-sm font-medium text-text-muted pl-2\">\r\n                                        {t.mapDraw.pitch}\r\n                                    </h4>\r\n                                    <div class=\"flex gap-2 flex-row justify-start bg-muted rounded-4xl p-2\">\r\n                                        <input\r\n                                            class=\"text-lg w-full\"\r\n                                            onKeyDown={(e) => {\r\n                                                if (e.key === \"Enter\") {\r\n                                                    this.handlePitchChange(\r\n                                                        e,\r\n                                                    );\r\n                                                    (e.target as HTMLInputElement)\r\n                                                        .blur();\r\n                                                }\r\n                                            }}\r\n                                            value={this.currentPolygon\r\n                                                ?.pitch ?? 0}\r\n                                        />\r\n                                        °\r\n                                    </div>\r\n                                    {!state.isIOS && (\r\n                                        <input\r\n                                            type=\"range\"\r\n                                            min=\"0\"\r\n                                            max=\"90\"\r\n                                            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\"\r\n                                            value={this.currentPolygon\r\n                                                ?.pitch ?? 0}\r\n                                            onInput={(e) => {\r\n                                                this.handlePitchChange(e);\r\n                                            }}\r\n                                        />\r\n                                    )}\r\n                                </div>\r\n                            </div>\r\n                        )\r\n                        : (\r\n                            <p class=\"text-text-secondary text-center\">\r\n                                {t.mapDraw.noPolygonSelected}\r\n                            </p>\r\n                        )}\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"polygon-information.js","sourceRoot":"","sources":["../../../src/components/map-draw/polygon-information.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport { Polygon } from \"harmonia-types\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { state } from \"../../store\";\r\nimport { azimuthToCardinal } from \"../../utils/utils\";\r\n\r\n@Component({\r\n    tag: \"polygon-information\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class PolygonInformation {\r\n    @Prop()\r\n    currentPolygon: Polygon;\r\n    @Prop()\r\n    numberOfPanels: number | undefined;\r\n    @Prop()\r\n    handleAzimuthChange: (event: Event) => void;\r\n    @Prop()\r\n    handlePitchChange: (event: Event) => void;\r\n    @Prop()\r\n    calculateSolarPanels: () => void;\r\n    @Prop()\r\n    markAsFlatRoof: () => void;\r\n    @Prop()\r\n    currentTool: string;\r\n\r\n    private getDisplayAzimuth(azimuth: number): number {\r\n        return (Math.round(azimuth) + 90) % 360;\r\n    }\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n        // console.log(this.currentPolygon);\r\n\r\n        return (\r\n            <div\r\n                class=\"flex gap-4 flex-row justify-center items-center w-full rounded-4xl pb-2\"\r\n                style={{\r\n                    border: \"1px solid var(--color-border)\",\r\n                }}\r\n            >\r\n                <div class=\"w-full bg-primary rounded-4xl p-3 text-secondary\">\r\n                    <h3 class=\"text-lg font-semibold mb-4 text-center\">\r\n                        {t.mapDraw.information}\r\n                    </h3>\r\n                    <polygon-buttons\r\n                        calculateSolarPanels={this.calculateSolarPanels}\r\n                        markAsFlatRoof={this.markAsFlatRoof}\r\n                        currentTool={this.currentTool}\r\n                    />\r\n                    {this.currentPolygon?.area\r\n                        ? (\r\n                            <div class=\"space-y-4\">\r\n                                <div>\r\n                                    <div class=\"grid grid-cols-2 gap-2\">\r\n                                        <div>\r\n                                            <h4 class=\"text-sm font-medium text-text-muted\">\r\n                                                {t.mapDraw.area}\r\n                                            </h4>\r\n                                            <p class=\"text-lg\">\r\n                                                {this.currentPolygon\r\n                                                    ?.area\r\n                                                    .toFixed(0)} m²\r\n                                            </p>\r\n                                        </div>\r\n                                        <div>\r\n                                            <div>\r\n                                                <h4 class=\"text-sm font-medium text-text-muted\">\r\n                                                    {t.mapDraw.panels}\r\n                                                </h4>\r\n                                                <p class=\"text-lg\">\r\n                                                    {this.numberOfPanels ?? 0}\r\n                                                </p>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n                                    <div>\r\n                                        <h4 class=\"text-sm font-medium text-text-muted\">\r\n                                            {t.mapDraw.azimuth}\r\n                                        </h4>\r\n                                        <div class=\"flex gap-2 flex-row justify-start bg-muted rounded-4xl p-2\">\r\n                                            <input\r\n                                                class=\"text-lg w-full\"\r\n                                                onKeyDown={(e) => {\r\n                                                    if (e.key === \"Enter\") {\r\n                                                        this.handleAzimuthChange(\r\n                                                            e,\r\n                                                        );\r\n                                                        (e.target as HTMLInputElement)\r\n                                                            .blur();\r\n                                                    }\r\n                                                }}\r\n                                                value={this.getDisplayAzimuth(\r\n                                                    this.currentPolygon\r\n                                                        ?.azimuth ??\r\n                                                        0,\r\n                                                )}\r\n                                            />\r\n                                            ({azimuthToCardinal(\r\n                                                this.getDisplayAzimuth(\r\n                                                    this.currentPolygon.azimuth,\r\n                                                ),\r\n                                            )})\r\n                                        </div>\r\n                                        {!state.isIOS && (\r\n                                            <input\r\n                                                type=\"range\"\r\n                                                min=\"0\"\r\n                                                max=\"360\"\r\n                                                step=\"1\"\r\n                                                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\"\r\n                                                value={this.getDisplayAzimuth(\r\n                                                    this.currentPolygon\r\n                                                        ?.azimuth ??\r\n                                                        0,\r\n                                                )}\r\n                                                onInput={(e) => {\r\n                                                    this.handleAzimuthChange(e);\r\n                                                }}\r\n                                            />\r\n                                        )}\r\n                                    </div>\r\n                                    <div>\r\n                                        <h4 class=\"text-sm font-medium text-text-muted md:pl-2\">\r\n                                            {t.mapDraw.pitch}\r\n                                        </h4>\r\n                                        <div class=\"flex gap-2 flex-row justify-start bg-muted rounded-4xl p-2\">\r\n                                            <input\r\n                                                class=\"text-lg w-full\"\r\n                                                onKeyDown={(e) => {\r\n                                                    if (e.key === \"Enter\") {\r\n                                                        this.handlePitchChange(\r\n                                                            e,\r\n                                                        );\r\n                                                        (e.target as HTMLInputElement)\r\n                                                            .blur();\r\n                                                    }\r\n                                                }}\r\n                                                value={Math.round(\r\n                                                    this.currentPolygon\r\n                                                        ?.pitch ??\r\n                                                        0,\r\n                                                )}\r\n                                            />\r\n                                            °\r\n                                        </div>\r\n                                        {!state.isIOS && (\r\n                                            <input\r\n                                                type=\"range\"\r\n                                                min=\"0\"\r\n                                                max=\"90\"\r\n                                                step=\"1\"\r\n                                                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\"\r\n                                                value={Math.round(\r\n                                                    this.currentPolygon\r\n                                                        ?.pitch ??\r\n                                                        0,\r\n                                                )}\r\n                                                onInput={(e) => {\r\n                                                    this.handlePitchChange(e);\r\n                                                }}\r\n                                            />\r\n                                        )}\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        )\r\n                        : (\r\n                            <p class=\"text-text-secondary text-center\">\r\n                                {t.mapDraw.noPolygonSelected}\r\n                            </p>\r\n                        )}\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/dist/collection/components/map-draw/tool-box.js

@@ -9,7 +9,7 @@ export class ToolBox {
     render() {
         const t = getLanguageStrings(state.settings.language);
         const undoToolStrings = t.mapDraw.tools[undoTool.name];
-        return (h("div", { key: '847b2ae7ebb0abf4f4a3c793b2a70fb7bec199ab', class: "flex gap-1 sm:gap-4 rounded-4xl bg-primary pt-3 pl-3 pr-3 flex-wrap justify-center w-full text-xs" }, tools.map((tool) => {
+        return (h("div", { key: 'e94d293934925254e8113349f12d9a5e22e0cbdb', class: "flex gap-1 sm:gap-4 rounded-4xl bg-primary pt-3 pl-3 pr-3 flex-wrap justify-center w-full text-xs" }, tools.map((tool) => {
             const toolStrings = t.mapDraw.tools[tool.name];
             return (h("button", { class: `px-3 py-2 rounded-4xl transition-colors duration-200 ${this.currentTool.name === tool.name
                     ? "bg-secondary hover:bg-secondary/80"
@@ -19,9 +19,9 @@ export class ToolBox {
                         : "var(--color-primary-foreground)",
                     border: "1px solid var(--color-border)",
                 }, "aria-label": toolStrings.ariaLabel, title: toolStrings.explanation, onClick: () => this.onToolSelect(tool) }, h("div", { class: "flex items-center gap-1 flex-col" }, h("icon-selector", { name: tool.icon }), h("span", null, toolStrings.name))));
-        }), h("button", { key: '76a9f6829a70dbf4f655b3af9c579e29c6fc2a82', class: `px-3 py-2 rounded-4xl transition-colors duration-200 bg-primary hover:bg-muted text-primary-foreground focus:border-2 focus:border-secondary`, style: {
+        }), h("button", { key: '500a34954e8d1ae4d2ab2083881287700db8cdd0', class: `px-3 py-2 rounded-4xl transition-colors duration-200 bg-primary hover:bg-muted text-primary-foreground focus:border-2 focus:border-secondary`, style: {
                 border: "1px solid var(--color-border)",
-            }, "aria-label": undoToolStrings.ariaLabel, title: undoToolStrings.explanation, onClick: () => this.undoCallback() }, h("div", { key: '55a26a055ebf66a977e7999f419e1ec6fd2578c1', class: "flex items-center gap-1 flex-col" }, h("undo-icon", { key: '8c05120dd0753cfe64fd9fad37f03f41e5eb2acd' }), h("span", { key: '5d9223eeb3adf8589d35db57bb5f1a4e772de765' }, undoToolStrings.name)))));
+            }, "aria-label": undoToolStrings.ariaLabel, title: undoToolStrings.explanation, onClick: () => this.undoCallback() }, h("div", { key: '9969b9c6385c876ea285c74161da6b4968c60137', class: "flex items-center gap-1 flex-col" }, h("undo-icon", { key: '1ec057295769ee14cb4d230c2b9938bd5a698e69' }), h("span", { key: '902320295d8d8a27ac95608cda564f6b193a43f2' }, undoToolStrings.name)))));
     }
     static get is() { return "tool-box"; }
     static get originalStyleUrls() {

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

@@ -45,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: 'f06f32b7c87ff5e564e1ebe70a5a9659eddc6f1f', class: "fixed inset-0 z-50 flex items-center justify-center p-4" }, h("div", { key: '753070da2f1f335b9649f998cd9997ab45a0e5ab', class: "absolute inset-0", style: {
+        return (h("div", { key: '4d8eadf62e91dedb62771ea581da55e41fef8ba6', class: "fixed inset-0 z-50 flex items-center justify-center p-4" }, h("div", { key: 'f98a839567a9ea9fd9e4583b129904a544b5815a', class: "absolute inset-0", style: {
                 backgroundColor: "rgba(0, 0, 0, 0.5)",
-            } }), 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: {
+            } }), h("div", { key: 'e454645b2f39aec48b001bc0347ef7043116b59a', class: "relative z-10 w-full max-w-2xl max-h-full overflow-y-auto" }, h("div", { key: '346bc5df81beb2c52ae52e8d08f91f572549ed99', class: "flex flex-col gap-4 bg-primary rounded-4xl p-6" }, h("div", { key: 'ea42d2e74d6c366f020a0278f4c2db4946f91082', class: "w-full text-center space-y-4" }, h("h2", { key: 'a333c82a5893b1ca389486b9b2406ab61bd040b3', class: "text-2xl font-bold text-secondary" }, tutorialTitle), h("p", { key: '1f93f58abb1fed9576f12184cb21c7b5879f5f86', class: "text-text-secondary" }, tutorialDescription)), h("div", { key: '67a59580d90d5e1371d6077e31e283b4aa78e7b6', class: "flex items-start justify-center bg-primary rounded-4xl" }, h("div", { key: '0b323406964ed2a2363d9d5eb06c8739fc49c979', class: "relative flex items-center justify-center rounded-4xl bg-secondary overflow-hidden w-64 h-64" }, this.isLoading && (h("div", { key: '5d7db35fd3798ddf92e6a7d35cd69c9d1fd9ecb0', class: "absolute inset-0 flex items-center justify-center z-10" }, h("span", { key: '34d8524c3ec0a8c7ea90baa2cb0848d6ad649c21', class: "text-text-secondary" }, t.mapDraw.loading, ".".repeat(this.dotCount)))), h("video", { key: '9d936982efbfe0be018b29b3f14c235841847b5d', 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: '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))))));
+            } }, h("source", { key: '4c7a97c3cbf02eefb40aa05da6fa0abd716fa6ab', src: videoSrc, type: "video/mp4" }), "Your browser does not support the video tag."))), h("div", { key: 'ebad42931128c694d7ddfbd9908dc5ef27e7e649', class: "w-full flex justify-center" }, h("button", { key: 'ec11a758e0ff9bd6ae728a857d03a8bbba77bbcd', 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() {

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: '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")))));
+        return (h("div", { key: 'f8adde9c8ec92d9d2caca001d4358b18ef6dcf22', class: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" }, h("div", { key: 'f86948becd9cbb35699cc7cdb1b740c61c5a92be', class: "bg-primary rounded-4xl p-6 w-full max-w-md" }, h("div", { key: 'dc629294bd72ac8793437f088db6ead138444389', class: "flex justify-between items-center mb-6" }, h("h2", { key: '5275b04e13886fde9ad977e44098e915fe6702c0', class: "text-xl font-semibold" }, "Settings"), h("button", { key: 'd0954c45456b41892e6511490c70bcb23bc27e78', class: "p-2 hover:bg-hover rounded-full transition-colors", onClick: this.handleClose }, h("svg", { key: 'e173c9534276c991321515f0aa167431b0f0608a', 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: '8975863f8837563fc49f9f0cb5efa733503b6992', x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { key: 'c6b7e15639ad9ff113c1357f42078eb8f11a17f8', x1: "6", y1: "6", x2: "18", y2: "18" })))), h("div", { key: '2fd90d727eb23c803e1dc8bac4143d41e3e2bde1', class: "space-y-4" }, h("div", { key: '7f866dc7351eee4483286c97406648f9c41a995a' }, h("h3", { key: '5f67f8e1f8c1d2998a7a4a463b6166095ebf35e9', class: "text-sm font-medium text-text-muted mb-1" }, "Debug Information"), h("p", { key: 'f7d22c9b296bbd68d08053642210c41993b54a04', class: "text-sm text-text-muted mb-1" }, "state: ", JSON.stringify(state, null, 2)), h("p", { key: '2ba352667ead4c79194688088afaf48e82e8b88f', class: "text-sm text-text-muted mb-1" }, navigator.userAgent), h("p", { key: 'ee8418f9442c9f0fb8b526bced2787321304e243', class: "text-sm text-text-muted mb-1" }, navigator.userAgent.indexOf("Safari")), h("p", { key: '928da60fdd93e326f3b0c6233228d0ecb0b7461f', class: "text-sm text-text-muted mb-1" }, "maxTouchPoints: ", navigator.maxTouchPoints), h("p", { key: '27d8913514c45e44a607a97538dc47a1754a1263', class: "text-sm text-text-muted mb-1" }, "iPhone: ", navigator.userAgent.indexOf("iPhone")), h("p", { key: 'ad0155fff5ee858cb338661cf4039c97381029d1', class: "text-sm text-text-muted mb-1" }, "Mac OS: ", navigator.userAgent.indexOf("Mac OS"))), h("div", { key: 'bab9021c0c22ab656b75ea5ea3321dd45ba209b0' }, h("label", { key: '1411e069e5acf902f960c9130b06e862ff53685f', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.language), h("select", { key: '0312d7334c9f7bb619a7480d0776cba287fb580d', class: "w-full bg-muted rounded-4xl p-2", onInput: (e) => this.handleInputChange("language", e.target
+                .value) }, h("option", { key: 'cd80c13fa677be9ca05690f576b1efb1c433f269', value: "en", selected: this.tempSettings.language ===
+                "en" }, "English"), h("option", { key: '874acf8419b05629157f6467faad007be40c0de8', value: "es", selected: this.tempSettings.language ===
+                "es" }, "Espa\u00F1ol"), h("option", { key: '489d41d87fcbdfce1f4dd7f436e5015ddce75681', value: "de", selected: this.tempSettings.language ===
+                "de" }, "Deutsch"))), h("div", { key: '1cf1f983c2f49d3df1642667c93e637277cca1d1' }, h("label", { key: '858efaf32c6d82f2e4aa89437d8fd6f123f357d8', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.rowSpacing), h("input", { key: '17b7e31de97cd5c2f5c6f4e57f8fd565b093fda9', 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: '527179b5c712ec4d6b3994e6fb961a3a7b630c07' }, h("label", { key: 'f6f0654291f3b1c30b213da3c788e2dc46ca0621', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.columnSpacing), h("input", { key: 'e9fd2507ad7b1be2571effeef376599acc70898e', 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: '57b0482cec138051d14c79150a6abd706af9b087' }, h("label", { key: '0cd3d56a354a4da3d5612ceec5b681b3fb0b8957', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.borderInset), h("input", { key: '596eb5aa465a8dedf0b230c426639720574654a9', 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: '7cda03ddb1ddbd7c0fc665b3163435622a97d6fd', class: "flex justify-end gap-4 mt-6" }, h("button", { key: '599f77090826bf664ab39137237542ece58aa5fd', class: "px-4 py-2 bg-surface rounded-4xl hover:bg-surface-hover transition-colors", onClick: this.handleClose }, "Cancel"), h("button", { key: 'c1c8b7ff81aea710e265bdab96c9bd4e5f0e1dac', 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

@@ -101,6 +101,8 @@ export class SolarExpert {
             return;
         this.autocomplete = new places.Autocomplete(this.inputElement);
         this.autocomplete.addListener("place_changed", () => {
+            state.latitude = null;
+            state.longitude = null;
             const place = this.autocomplete?.getPlace();
             this.latitude = place?.geometry?.location?.lat() ?? 0;
             this.longitude = place?.geometry?.location?.lng() ?? 0;
@@ -121,7 +123,7 @@ export class SolarExpert {
     }
     render() {
         const t = getLanguageStrings(this.language);
-        return (h("div", { key: 'b00c8771d7a4ab1015a4783bf0e8ee3c9d2dcb91', class: "flex flex-col w-full h-full p-3 m-auto", id: "solar-calculator" }, this.showMapSelector
+        return (h("div", { key: '550ceedbc1a7e5f71f2fdea4ab2066080ca55bee', 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-expert/solar-expert.js.map

@@ -1 +1 @@
-{"version":3,"file":"solar-expert.js","sourceRoot":"","sources":["../../../src/components/solar-expert/solar-expert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Env, h, Prop, State, Watch } from \"@stencil/core\";\r\nimport { Loader } from \"@googlemaps/js-api-loader\";\r\nimport { Language } from \"../../types/lang\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { onChange, state } from \"../../store\";\r\nimport { ColorScheme, DEFAULT_COLOR_SCHEME } from \"../../config\";\r\nimport { applyThemeGlobally, applyThemeToElement } from \"../../utils/theme\";\r\n\r\n@Component({\r\n    tag: \"solar-expert\",\r\n    shadow: false,\r\n    styleUrl: \"../../output.css\",\r\n    assetsDirs: [\"assets\"],\r\n})\r\nexport class SolarExpert {\r\n    @Element()\r\n    el!: HTMLElement;\r\n\r\n    @Prop()\r\n    apiKey: string = Env.GOOGLE_MAPS_API_KEY;\r\n    @Prop()\r\n    language: Language = \"en\";\r\n    @Prop()\r\n    colorScheme: Partial<ColorScheme> | null = null;\r\n    // {\r\n    //     primary: \"hsl(0 0% 100%)\",\r\n    //     secondary: \"hsl(0 0% 100%)\",\r\n    //     tertiary: \"hsl(0 0% 100%)\",\r\n    //     muted: \"hsl(0 0% 100%)\",\r\n    //     error: \"hsl(0 0% 100%)\",\r\n    //     // secondary: \"hsl(180 100% 25%)\",\r\n    //     // tertiary: \"hsl(24 100% 18%)\",\r\n    //     // muted: \"hsl(0 0% 85%)\",\r\n    //     // error: \"hsl(240 75% 29%)\",\r\n    //     primaryForeground: \"hsl(0 0% 100%)\",\r\n    //     secondaryForeground: \"hsl(0 0% 100%)\",\r\n    //     tertiaryForeground: \"hsl(0 0% 100%)\",\r\n    //     mutedForeground: \"hsl(0 0% 100%)\",\r\n    //     errorForeground: \"hsl(0 0% 100%)\",\r\n    //     surface: \"hsl(0 0% 100%)\",\r\n    //     surfaceHover: \"hsl(0 0% 100%)\",\r\n    //     surfaceActive: \"hsl(0 0% 100%)\",\r\n    //     // Text colors\r\n    //     textMuted: \"hsl(0 0% 100%)\",\r\n    //     textSecondary: \"hsl(0 0% 100%)\",\r\n    //     textPlaceholder: \"hsl(0 0% 100%)\",\r\n    //     // Border colors\r\n    //     border: \"hsl(0 0% 100%)\",\r\n    //     borderLight: \"hsl(0 0% 100%)\",\r\n    //     // Status colors\r\n    //     success: \"hsl(0 0% 100%)\",\r\n    //     info: \"hsl(0 0% 100%)\",\r\n    //     // Interactive colors\r\n    //     hover: \"hsl(0 0% 100%)\",\r\n    //     hoverDark: \"hsl(0 0% 100%)\",\r\n    //     overlay: \"hsl(0 0% 100%)\",\r\n    //     tooltip: \"hsl(0 0% 100%)\",\r\n    // };\r\n\r\n    @State()\r\n    latitude: number | null = 40.581614;\r\n    @State()\r\n    longitude: number | null = -4.128423;\r\n    @State()\r\n    isLoaded: boolean = false;\r\n    @State()\r\n    autocomplete: google.maps.places.Autocomplete | null = null;\r\n    @State()\r\n    place: google.maps.places.PlaceResult | null = null;\r\n    @State()\r\n    showMapSelector: boolean = false;\r\n\r\n    private inputElement?: HTMLInputElement;\r\n\r\n    componentWillLoad() {\r\n        state.isMobile =\r\n            /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i\r\n                .test(navigator.userAgent) || window.innerWidth < 768;\r\n        this.loadGoogleMapsScript();\r\n        onChange(\"latitude\", () => {\r\n            if (this.showMapSelector) {\r\n                this.showMapSelector = false;\r\n                this.scrollToMapDraw();\r\n            }\r\n        });\r\n        state.settings.language = this.language;\r\n\r\n        const isIPhone = navigator.userAgent.indexOf(\"iPhone\") != -1;\r\n        const isMac = navigator.userAgent.indexOf(\"Mac OS\") != -1;\r\n\r\n        state.isIOS = isIPhone || isMac;\r\n        if (!this.colorScheme) {\r\n            applyThemeToElement(this.el, DEFAULT_COLOR_SCHEME);\r\n            applyThemeGlobally(DEFAULT_COLOR_SCHEME);\r\n        }\r\n        this.applyTheme();\r\n    }\r\n\r\n    @Watch(\"colorScheme\")\r\n    colorSchemeChanged() {\r\n        this.applyTheme();\r\n    }\r\n\r\n    private applyTheme() {\r\n        if (this.colorScheme) {\r\n            // Apply theme globally for non-shadow components\r\n            applyThemeGlobally(this.colorScheme);\r\n            // Apply theme to this component's Shadow DOM host element\r\n            applyThemeToElement(this.el, this.colorScheme);\r\n        }\r\n    }\r\n\r\n    private async loadGoogleMapsScript() {\r\n        try {\r\n            const loader = new Loader({\r\n                apiKey: this.apiKey,\r\n                libraries: [\"places\", \"maps\", \"marker\"],\r\n            });\r\n\r\n            const places = await loader.importLibrary(\"places\");\r\n            this.isLoaded = true;\r\n            this.initializeAutocomplete(places);\r\n        } catch (error) {\r\n            console.error(\"Error loading Google Maps: \", error);\r\n        }\r\n    }\r\n\r\n    private initializeAutocomplete(\r\n        places: google.maps.PlacesLibrary,\r\n    ) {\r\n        if (!this.inputElement || !this.isLoaded) return;\r\n        this.autocomplete = new places.Autocomplete(this.inputElement);\r\n\r\n        this.autocomplete.addListener(\"place_changed\", () => {\r\n            const place = this.autocomplete?.getPlace();\r\n            this.latitude = place?.geometry?.location?.lat() ?? 0;\r\n            this.longitude = place?.geometry?.location?.lng() ?? 0;\r\n            state.latitude = this.latitude;\r\n            state.longitude = this.longitude;\r\n            state.location = place?.name ?? null;\r\n\r\n            this.scrollToMapDraw();\r\n        });\r\n    }\r\n\r\n    private scrollToMapDraw() {\r\n        const mapDrawElement = this.el.querySelector(\"map-draw\");\r\n        if (mapDrawElement) {\r\n            mapDrawElement.scrollIntoView({ behavior: \"smooth\" });\r\n        }\r\n    }\r\n\r\n    private handleChooseOnMap() {\r\n        this.showMapSelector = true;\r\n    }\r\n\r\n    render() {\r\n        const t = getLanguageStrings(this.language);\r\n        return (\r\n            <div\r\n                class=\"flex flex-col w-full h-full p-3 m-auto\"\r\n                id=\"solar-calculator\"\r\n            >\r\n                {this.showMapSelector\r\n                    ? (\r\n                        <map-selector\r\n                            api-key={this.apiKey}\r\n                            language={this.language}\r\n                        />\r\n                    )\r\n                    : (\r\n                        <>\r\n                            <div class=\"pb-2 flex flex-col sm:flex-row gap-2 sm:gap-4 items-stretch w-full\">\r\n                                <div class=\"relative flex-1 sm:flex-3\">\r\n                                    <div class=\"absolute left-3 top-0 h-full flex items-center text-muted-foreground pointer-events-none\">\r\n                                        <search-icon />\r\n                                    </div>\r\n                                    <input\r\n                                        ref={(el) => this.inputElement = el}\r\n                                        type=\"text\"\r\n                                        placeholder={t.solarExpert\r\n                                            .searchPlaceholder}\r\n                                        class=\"w-full pl-10 pr-4 py-2 border border-border rounded-4xl focus:ring-secondary bg-muted text-muted-foreground h-full\"\r\n                                    />\r\n                                </div>\r\n                                <button\r\n                                    onClick={() => this.handleChooseOnMap()}\r\n                                    class=\"flex-1 pl-4 pr-4 py-2 border border-border bg-muted rounded-4xl focus:ring-secondary hover:bg-surface-hover\"\r\n                                >\r\n                                    {t.mapSelector.chooseOnMap}\r\n                                </button>\r\n                            </div>\r\n                            {(state.latitude === null ||\r\n                                state.longitude === null) && (\r\n                                <div class=\"w-full pb-2\">\r\n                                    <p class=\"text-text-muted text-center flex items-center justify-center rounded-4xl px-4 py-2 w-full\">\r\n                                        {t.mapDraw.noAddressSelected}\r\n                                    </p>\r\n                                </div>\r\n                            )}\r\n                            <map-draw\r\n                                apiKey={this.apiKey}\r\n                            />\r\n                        </>\r\n                    )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"solar-expert.js","sourceRoot":"","sources":["../../../src/components/solar-expert/solar-expert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAe,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAQ5E,MAAM,OAAO,WAAW;IAEpB,EAAE,CAAe;IAGjB,MAAM,GAAW,GAAG,CAAC,mBAAmB,CAAC;IAEzC,QAAQ,GAAa,IAAI,CAAC;IAE1B,WAAW,GAAgC,IAAI,CAAC;IAChD,IAAI;IACJ,iCAAiC;IACjC,mCAAmC;IACnC,kCAAkC;IAClC,+BAA+B;IAC/B,+BAA+B;IAC/B,yCAAyC;IACzC,uCAAuC;IACvC,iCAAiC;IACjC,oCAAoC;IACpC,2CAA2C;IAC3C,6CAA6C;IAC7C,4CAA4C;IAC5C,yCAAyC;IACzC,yCAAyC;IACzC,iCAAiC;IACjC,sCAAsC;IACtC,uCAAuC;IACvC,qBAAqB;IACrB,mCAAmC;IACnC,uCAAuC;IACvC,yCAAyC;IACzC,uBAAuB;IACvB,gCAAgC;IAChC,qCAAqC;IACrC,uBAAuB;IACvB,iCAAiC;IACjC,8BAA8B;IAC9B,4BAA4B;IAC5B,+BAA+B;IAC/B,mCAAmC;IACnC,iCAAiC;IACjC,iCAAiC;IACjC,KAAK;IAGL,QAAQ,GAAkB,SAAS,CAAC;IAEpC,SAAS,GAAkB,CAAC,QAAQ,CAAC;IAErC,QAAQ,GAAY,KAAK,CAAC;IAE1B,YAAY,GAA2C,IAAI,CAAC;IAE5D,KAAK,GAA0C,IAAI,CAAC;IAEpD,eAAe,GAAY,KAAK,CAAC;IAEzB,YAAY,CAAoB;IAExC,iBAAiB;QACb,KAAK,CAAC,QAAQ;YACV,gEAAgE;iBAC3D,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,MAAM,CAAC,UAAU,GAAG,GAAG,CAAC;QAC9D,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;YACtB,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;gBACvB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;gBAC7B,IAAI,CAAC,eAAe,EAAE,CAAC;YAC3B,CAAC;QACL,CAAC,CAAC,CAAC;QACH,KAAK,CAAC,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAExC,MAAM,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;QAC7D,MAAM,KAAK,GAAG,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;QAE1D,KAAK,CAAC,KAAK,GAAG,QAAQ,IAAI,KAAK,CAAC;QAChC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACpB,mBAAmB,CAAC,IAAI,CAAC,EAAE,EAAE,oBAAoB,CAAC,CAAC;YACnD,kBAAkB,CAAC,oBAAoB,CAAC,CAAC;QAC7C,CAAC;QACD,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAGD,kBAAkB;QACd,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAEO,UAAU;QACd,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,iDAAiD;YACjD,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACrC,0DAA0D;YAC1D,mBAAmB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACnD,CAAC;IACL,CAAC;IAEO,KAAK,CAAC,oBAAoB;QAC9B,IAAI,CAAC;YACD,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC;gBACtB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC;aAC1C,CAAC,CAAC;YAEH,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YACpD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC;QACxC,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACb,OAAO,CAAC,KAAK,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC;QACxD,CAAC;IACL,CAAC;IAEO,sBAAsB,CAC1B,MAAiC;QAEjC,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QACjD,IAAI,CAAC,YAAY,GAAG,IAAI,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAE/D,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,eAAe,EAAE,GAAG,EAAE;YAChD,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;YACtB,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;YACvB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAE,CAAC;YAC5C,IAAI,CAAC,QAAQ,GAAG,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;YACtD,IAAI,CAAC,SAAS,GAAG,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;YACvD,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC/B,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;YACjC,KAAK,CAAC,QAAQ,GAAG,KAAK,EAAE,IAAI,IAAI,IAAI,CAAC;YAErC,IAAI,CAAC,eAAe,EAAE,CAAC;QAC3B,CAAC,CAAC,CAAC;IACP,CAAC;IAEO,eAAe;QACnB,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACzD,IAAI,cAAc,EAAE,CAAC;YACjB,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;QAC1D,CAAC;IACL,CAAC;IAEO,iBAAiB;QACrB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;IAChC,CAAC;IAED,MAAM;QACF,MAAM,CAAC,GAAG,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5C,OAAO,CACH,4DACI,KAAK,EAAC,wCAAwC,EAC9C,EAAE,EAAC,kBAAkB,IAEpB,IAAI,CAAC,eAAe;YACjB,CAAC,CAAC,CACE,+BACa,IAAI,CAAC,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,CACL;YACD,CAAC,CAAC,CACE;gBACI,WAAK,KAAK,EAAC,oEAAoE;oBAC3E,WAAK,KAAK,EAAC,2BAA2B;wBAClC,WAAK,KAAK,EAAC,0FAA0F;4BACjG,sBAAe,CACb;wBACN,aACI,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,EACnC,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,CAAC,CAAC,WAAW;iCACrB,iBAAiB,EACtB,KAAK,EAAC,oHAAoH,GAC5H,CACA;oBACN,cACI,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,EACvC,KAAK,EAAC,6GAA6G,IAElH,CAAC,CAAC,WAAW,CAAC,WAAW,CACrB,CACP;gBACL,CAAC,KAAK,CAAC,QAAQ,KAAK,IAAI;oBACrB,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC,IAAI,CAC7B,WAAK,KAAK,EAAC,aAAa;oBACpB,SAAG,KAAK,EAAC,2FAA2F,IAC/F,CAAC,CAAC,OAAO,CAAC,iBAAiB,CAC5B,CACF,CACT;gBACD,gBACI,MAAM,EAAE,IAAI,CAAC,MAAM,GACrB,CACH,CACN,CACH,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, Env, h, Prop, State, Watch } from \"@stencil/core\";\r\nimport { Loader } from \"@googlemaps/js-api-loader\";\r\nimport { Language } from \"../../types/lang\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { onChange, state } from \"../../store\";\r\nimport { ColorScheme, DEFAULT_COLOR_SCHEME } from \"../../config\";\r\nimport { applyThemeGlobally, applyThemeToElement } from \"../../utils/theme\";\r\n\r\n@Component({\r\n    tag: \"solar-expert\",\r\n    shadow: false,\r\n    styleUrl: \"../../output.css\",\r\n    assetsDirs: [\"assets\"],\r\n})\r\nexport class SolarExpert {\r\n    @Element()\r\n    el!: HTMLElement;\r\n\r\n    @Prop()\r\n    apiKey: string = Env.GOOGLE_MAPS_API_KEY;\r\n    @Prop()\r\n    language: Language = \"en\";\r\n    @Prop()\r\n    colorScheme: Partial<ColorScheme> | null = null;\r\n    // {\r\n    //     primary: \"hsl(0 0% 100%)\",\r\n    //     secondary: \"hsl(0 0% 100%)\",\r\n    //     tertiary: \"hsl(0 0% 100%)\",\r\n    //     muted: \"hsl(0 0% 100%)\",\r\n    //     error: \"hsl(0 0% 100%)\",\r\n    //     // secondary: \"hsl(180 100% 25%)\",\r\n    //     // tertiary: \"hsl(24 100% 18%)\",\r\n    //     // muted: \"hsl(0 0% 85%)\",\r\n    //     // error: \"hsl(240 75% 29%)\",\r\n    //     primaryForeground: \"hsl(0 0% 100%)\",\r\n    //     secondaryForeground: \"hsl(0 0% 100%)\",\r\n    //     tertiaryForeground: \"hsl(0 0% 100%)\",\r\n    //     mutedForeground: \"hsl(0 0% 100%)\",\r\n    //     errorForeground: \"hsl(0 0% 100%)\",\r\n    //     surface: \"hsl(0 0% 100%)\",\r\n    //     surfaceHover: \"hsl(0 0% 100%)\",\r\n    //     surfaceActive: \"hsl(0 0% 100%)\",\r\n    //     // Text colors\r\n    //     textMuted: \"hsl(0 0% 100%)\",\r\n    //     textSecondary: \"hsl(0 0% 100%)\",\r\n    //     textPlaceholder: \"hsl(0 0% 100%)\",\r\n    //     // Border colors\r\n    //     border: \"hsl(0 0% 100%)\",\r\n    //     borderLight: \"hsl(0 0% 100%)\",\r\n    //     // Status colors\r\n    //     success: \"hsl(0 0% 100%)\",\r\n    //     info: \"hsl(0 0% 100%)\",\r\n    //     // Interactive colors\r\n    //     hover: \"hsl(0 0% 100%)\",\r\n    //     hoverDark: \"hsl(0 0% 100%)\",\r\n    //     overlay: \"hsl(0 0% 100%)\",\r\n    //     tooltip: \"hsl(0 0% 100%)\",\r\n    // };\r\n\r\n    @State()\r\n    latitude: number | null = 40.581614;\r\n    @State()\r\n    longitude: number | null = -4.128423;\r\n    @State()\r\n    isLoaded: boolean = false;\r\n    @State()\r\n    autocomplete: google.maps.places.Autocomplete | null = null;\r\n    @State()\r\n    place: google.maps.places.PlaceResult | null = null;\r\n    @State()\r\n    showMapSelector: boolean = false;\r\n\r\n    private inputElement?: HTMLInputElement;\r\n\r\n    componentWillLoad() {\r\n        state.isMobile =\r\n            /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i\r\n                .test(navigator.userAgent) || window.innerWidth < 768;\r\n        this.loadGoogleMapsScript();\r\n        onChange(\"latitude\", () => {\r\n            if (this.showMapSelector) {\r\n                this.showMapSelector = false;\r\n                this.scrollToMapDraw();\r\n            }\r\n        });\r\n        state.settings.language = this.language;\r\n\r\n        const isIPhone = navigator.userAgent.indexOf(\"iPhone\") != -1;\r\n        const isMac = navigator.userAgent.indexOf(\"Mac OS\") != -1;\r\n\r\n        state.isIOS = isIPhone || isMac;\r\n        if (!this.colorScheme) {\r\n            applyThemeToElement(this.el, DEFAULT_COLOR_SCHEME);\r\n            applyThemeGlobally(DEFAULT_COLOR_SCHEME);\r\n        }\r\n        this.applyTheme();\r\n    }\r\n\r\n    @Watch(\"colorScheme\")\r\n    colorSchemeChanged() {\r\n        this.applyTheme();\r\n    }\r\n\r\n    private applyTheme() {\r\n        if (this.colorScheme) {\r\n            // Apply theme globally for non-shadow components\r\n            applyThemeGlobally(this.colorScheme);\r\n            // Apply theme to this component's Shadow DOM host element\r\n            applyThemeToElement(this.el, this.colorScheme);\r\n        }\r\n    }\r\n\r\n    private async loadGoogleMapsScript() {\r\n        try {\r\n            const loader = new Loader({\r\n                apiKey: this.apiKey,\r\n                libraries: [\"places\", \"maps\", \"marker\"],\r\n            });\r\n\r\n            const places = await loader.importLibrary(\"places\");\r\n            this.isLoaded = true;\r\n            this.initializeAutocomplete(places);\r\n        } catch (error) {\r\n            console.error(\"Error loading Google Maps: \", error);\r\n        }\r\n    }\r\n\r\n    private initializeAutocomplete(\r\n        places: google.maps.PlacesLibrary,\r\n    ) {\r\n        if (!this.inputElement || !this.isLoaded) return;\r\n        this.autocomplete = new places.Autocomplete(this.inputElement);\r\n\r\n        this.autocomplete.addListener(\"place_changed\", () => {\r\n            state.latitude = null;\r\n            state.longitude = null;\r\n            const place = this.autocomplete?.getPlace();\r\n            this.latitude = place?.geometry?.location?.lat() ?? 0;\r\n            this.longitude = place?.geometry?.location?.lng() ?? 0;\r\n            state.latitude = this.latitude;\r\n            state.longitude = this.longitude;\r\n            state.location = place?.name ?? null;\r\n\r\n            this.scrollToMapDraw();\r\n        });\r\n    }\r\n\r\n    private scrollToMapDraw() {\r\n        const mapDrawElement = this.el.querySelector(\"map-draw\");\r\n        if (mapDrawElement) {\r\n            mapDrawElement.scrollIntoView({ behavior: \"smooth\" });\r\n        }\r\n    }\r\n\r\n    private handleChooseOnMap() {\r\n        this.showMapSelector = true;\r\n    }\r\n\r\n    render() {\r\n        const t = getLanguageStrings(this.language);\r\n        return (\r\n            <div\r\n                class=\"flex flex-col w-full h-full p-3 m-auto\"\r\n                id=\"solar-calculator\"\r\n            >\r\n                {this.showMapSelector\r\n                    ? (\r\n                        <map-selector\r\n                            api-key={this.apiKey}\r\n                            language={this.language}\r\n                        />\r\n                    )\r\n                    : (\r\n                        <>\r\n                            <div class=\"pb-2 flex flex-col sm:flex-row gap-2 sm:gap-4 items-stretch w-full\">\r\n                                <div class=\"relative flex-1 sm:flex-3\">\r\n                                    <div class=\"absolute left-3 top-0 h-full flex items-center text-muted-foreground pointer-events-none\">\r\n                                        <search-icon />\r\n                                    </div>\r\n                                    <input\r\n                                        ref={(el) => this.inputElement = el}\r\n                                        type=\"text\"\r\n                                        placeholder={t.solarExpert\r\n                                            .searchPlaceholder}\r\n                                        class=\"w-full pl-10 pr-4 py-2 border border-border rounded-4xl focus:ring-secondary bg-muted text-muted-foreground h-full\"\r\n                                    />\r\n                                </div>\r\n                                <button\r\n                                    onClick={() => this.handleChooseOnMap()}\r\n                                    class=\"flex-1 pl-4 pr-4 py-2 border border-border bg-muted rounded-4xl focus:ring-secondary hover:bg-surface-hover\"\r\n                                >\r\n                                    {t.mapSelector.chooseOnMap}\r\n                                </button>\r\n                            </div>\r\n                            {(state.latitude === null ||\r\n                                state.longitude === null) && (\r\n                                <div class=\"w-full pb-2\">\r\n                                    <p class=\"text-text-muted text-center flex items-center justify-center rounded-4xl px-4 py-2 w-full\">\r\n                                        {t.mapDraw.noAddressSelected}\r\n                                    </p>\r\n                                </div>\r\n                            )}\r\n                            <map-draw\r\n                                apiKey={this.apiKey}\r\n                            />\r\n                        </>\r\n                    )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

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

@@ -122,8 +122,7 @@ export class SolarSystemForm {
         this.autonomy = result.autonomy * 100;
         this.totalEnergyConsumption = result.totalEnergyConsumptionDay * 365;
         // Calculate total energy production based on compensation and rate
-        this.totalEnergyProduction =
-            (result.compensationPerDay / this.compensationRate) * 365;
+        this.totalEnergyProduction = result.totalEnergyProduction * 365;
     }
     componentWillLoad() {
         this.updateSystemConfigs();
@@ -246,13 +245,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: 'c4b863b1af39c1a991ade0a6e52d4850472179fc', class: "flex flex-col justify-center items-center w-full h-full pt-4" // style={{
+        return (h("div", { key: '311a75f162c9b3d2bf0b3d4b1f46309404a4a66e', 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: '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()
+            id: "solar-system-form" }, h("h1", { key: 'db6fea28762915920105844e13a4f0d83a15034a', class: "text-2xl font-bold text-secondary mb-4 w-full" }, t.solarSystemForm.title), h("div", { key: '8f5fd44e0e0636662d4847ad99f695b79dcffb9c', class: "w-full bg-primary rounded-4xl space-y-6" }, h("div", { key: '6e67ca2315b60382e1962c31402c90b185af23d8', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: 'f68e091bc2b5ddb81cd2c1688f0c1ecfe77d8da9', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.systemInformation), h("div", { key: '8e7e789c7ea7ced4d6dff3fdba3219aa67107670', class: "flex flex-col sm:flex-row gap-4" }, h("div", { key: 'e969707b3b3f33511e8bf2675fc1a0001494d54b', class: "flex-1 bg-muted rounded-4xl p-4 space-y-3" }, h("div", { key: 'e87643a1d0ab7311735d480ebd1b84aef6c7c786', class: "flex items-center justify-between" }, h("label", { key: 'bfe9ceed374b5e9ff960ebc9f5e4d7cd6af3c753', 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 +263,34 @@ export class SolarSystemForm {
                             value;
                         this.recalculate();
                     }
-                } }))), !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.isIOS() && (h("input", { key: 'cc83c205d13a0b5ec5aef34cfd1a60859bbc377a', 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: '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) => {
+            } }))), h("div", { key: 'f325c5937603ebd211deb1cf3ae017364e296b26', class: "flex-1 bg-muted rounded-4xl p-4" }, h("div", { key: 'a62d362a9145ef8d16adc49f152961d161c4e7e2', class: "flex items-center justify-between" }, h("label", { key: '6931eef558eb8621da14badde66436003f5d12f1', class: "text-sm font-medium text-text-muted" }, t.solarSystemForm.panelPeakPower), h("span", { key: 'd72415ae3276ee7dfa5b53e899fc242c907a558f', class: "text-text-muted" }, this.panelPeakPower.toFixed(2), " kW")), h("div", { key: 'a6abf916d0cb7dbe9c31c4aa1b359c4a1fcdc3f5', class: "flex items-center justify-between mt-4" }, h("span", { key: 'bff9b4cd1fbcfd048ae9396e991e0c8a196616bc', class: "text-sm font-medium text-text-muted" }, t.solarSystemForm.totalSystemPeakPower), h("span", { key: '7838d7af86c7ecb57aaa8c503991024772ccdf54', class: "font-bold text-text-muted" }, (DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *
+            this.numberOfPanels).toFixed(1), " kWp"))))), h("div", { key: 'd9c706b013801443a5b817e0e02630f9cee9cbab', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: 'afb88035523779fbc5de4756249ba92dbddef200', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.householdConsumptionTitle), h("div", { key: '98c8e30e7e585c5a247be0e686f792724d4b7bfe', class: "grid grid-rows-2 gap-0" }, h("div", { key: '86c02c113b3539c5afb353587d375483ad533f62', class: "grid grid-cols-2 gap-4" }, h("label", { key: '15938439fe3051b67e12c10c021511096e361893', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.annualConsumption), h("label", { key: '7541d87d9cbc63c054d5cdbd7b0f7abb27fc9761', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.consumptionProfileTitle)), h("div", { key: '38684b748e232d6af285e61ce9a335e10c0d023b', class: "grid grid-cols-2 gap-4" }, h("input", { key: 'cac666a72ba7fe3da002ff7a97eaed6c7995aa20', 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: '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) => {
+            } }), h("select", { key: 'a2a0c25c560253412736f94a004ee0552faab64e', 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: '97690f14de86748d007fe5e040bceb33b818a965', value: "mostly_at_home", selected: this.consumptionProfile ===
+            } }, h("option", { key: '727866d2da3557657e1bd770a4a4bbb247406dac', value: "mostly_at_home", selected: this.consumptionProfile ===
                 "mostly_at_home" }, t.solarSystemForm.consumptionProfiles
-            .mostlyAtHome), h("option", { key: '58e6b8216e78c92e36ee98c8fca21210682c9f6b', value: "mostly_away", selected: this.consumptionProfile ===
+            .mostlyAtHome), h("option", { key: '8bc3ed0c0ac3770bad515d1f46964e9cd27a8ef3', value: "mostly_away", selected: this.consumptionProfile ===
                 "mostly_away" }, t.solarSystemForm.consumptionProfiles
-            .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) => {
+            .mostlyAway))))), h("div", { key: '4e44d5396ae94949e8239beeeb7a0a636c2c8472', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '1727e2228faf014143958328c1e7b538ab0f67f9', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.additionalComponents.title), h("div", { key: '4ff16de6af482a139e9fec5cabf8bc78a7c47f95', class: "flex flex-col gap-4" }, h("div", { key: '27992331cc4fb1c16a1f1328b70c8e4aded0ab92', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '6150dc9f6abbc97abc0f3e5ae44b2e8602ee42d2', class: "flex items-center justify-between" }, h("div", { key: 'b0e16b75c60a64e2a6a3d309519860fee1d26276', class: "flex items-center gap-2" }, h("input", { key: 'cc63c3fb3857ac03751a316be5707557aa93ff1a', 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: '2af0b5630e68197bc82559fea91dc4c368f1da24', htmlFor: "heatPump", class: "text-text-muted" }, t.solarSystemForm
+            } }), h("label", { key: 'c32094e4e1121e9e6085fee481aa293bdef2eec2', htmlFor: "heatPump", class: "text-text-muted" }, t.solarSystemForm
             .additionalComponents
-            .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()
+            .heatPump)), (this.heatPump > 0 && !this.isIOS()) && (h("span", { key: '045bebcf61f9c60665d5093a920914caf3c16e2e', class: "text-text-muted" }, this.heatPump, " m\u00B2"))), this.heatPump > 0 && (h("div", { key: 'd68c70c1134f3efd4319e7ad54d0b7f3b159fd5d', 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 +306,45 @@ export class SolarSystemForm {
                         parseInt(e.target
                             .value);
                     this.recalculate();
-                } }))))), 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) => {
+                } }))))), h("div", { key: '3402972a0d31a544bed7bbbf7dbe42299b7b66d5', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: 'b23ef38c61b55df0cb10b1a6ea2091dc9a1c3369', class: "flex items-center justify-between" }, h("div", { key: '9c065d24ba5257de49c4565d5d5c3eff72c98ecf', class: "flex items-center gap-2" }, h("input", { key: '35e60291e50c74722f96b7cb29861dfc9a73695a', 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: 'd82e6f34c13673e695ff62cddc9e2a3d1389a649', htmlFor: "electricCar", class: "text-text-muted" }, t.solarSystemForm
+            } }), h("label", { key: 'c07c96918e94336b73627b453d6ebf7df2de752a', htmlFor: "electricCar", class: "text-text-muted" }, t.solarSystemForm
             .additionalComponents
-            .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
+            .electricCar))), this.electricCar && (h("div", { key: 'c8f52e9a0382fd90beba9161007de12fc68f1243', class: "flex flex-col gap-2" }, h("div", { key: 'c18810ddb896191e91ac1a9ab8d75cbe45a1e34a', class: "grid grid-cols-2 gap-4" }, h("label", { key: '7b6cf7fc61fff0379dae3a3ba6125d2dff648f43', class: "text-sm text-text-muted" }, t.solarSystemForm
             .additionalComponents
-            .chargingTime), h("label", { key: '2c1764e5865e055c6f9b26d0bfeeecf147eb0fbf', class: "text-sm text-text-muted" }, t.solarSystemForm
+            .chargingTime), h("label", { key: '6fb22cf041d293e1ca3c9059d8d5f7044dec2e15', class: "text-sm text-text-muted" }, t.solarSystemForm
             .additionalComponents
-            .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) => {
+            .kilometersPerYear)), h("div", { key: '05e1f9a986bd2c7607019ee9c0a83e30f0eef548', class: "grid grid-cols-2 gap-4" }, h("select", { key: '9112adffaa66ab2a8c0432caf76dfd2244de7fa0', 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: '7b853c0c65c82f73de9a1f8217203aaa923d1486', value: "day", selected: this
+            }, style: borderStyle }, h("option", { key: '67bec333b8a190edc43a90424df590d3abb5024a', value: "day", selected: this
                 .electricCarChargingTime ===
                 "day" }, t.solarSystemForm
             .additionalComponents
-            .chargingTimeDay), h("option", { key: '6dc4797ab24f81dd7a2e26ff7e1a8bc56d50a532', value: "night", selected: this
+            .chargingTimeDay), h("option", { key: 'd996c506dc54d4495fc019fc3191ccd00b515788', value: "night", selected: this
                 .electricCarChargingTime ===
                 "night" }, t.solarSystemForm
             .additionalComponents
-            .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) => {
+            .chargingTimeNight)), h("input", { key: '5add5ab3deb8d0db82127793ee5dac7fcc4a93b7', 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: '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) => {
+            }, style: borderStyle }))))), h("div", { key: '041fc0246af12eb78111569c884bd20614c37322', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: 'e4ebee64adf842e629e5a1e250cfd65821eb7dbc', class: "flex items-center justify-between" }, h("div", { key: 'dac660c6e7663d4cde45757d2641aef1c0c2b835', class: "flex items-center gap-2" }, h("input", { key: 'db51aab5ce13c52db32f5ff4426bc5876cd26cc6', 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: 'e3b33f05afdbbb3cd18e9c4daad24dbb163b05d9', htmlFor: "battery", class: "text-text-muted" }, t.solarSystemForm
+            } }), h("label", { key: 'c4178834ed11cd595bbf7a5a33a6c53c24e4b0f0', htmlFor: "battery", class: "text-text-muted" }, t.solarSystemForm
             .additionalComponents
-            .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()
+            .battery)), (this.battery > 0 && !this.isIOS()) && (h("span", { key: '8026f5753a7b0ccc9f65b05f8d8ff8ab006cf0e9', class: "text-text-muted" }, this.battery, " kWh"))), this.battery > 0 && (h("div", { key: '331ec7827bae37177faeb3e956086acf954a0d7d', 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 +359,52 @@ export class SolarSystemForm {
                     this.battery = parseInt(e.target
                         .value);
                     this.recalculate();
-                } }))))))), 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: {
+                } }))))))), h("div", { key: '4be5a459e2750973741d60888bc4e3c6ab255016', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: 'c48c733e3431048476ef816b0e5bdd5baeac072c', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.electricityCostsTitle), h("div", { key: '148b904319ff9e37cff886e307925f5ceed5214b', style: {
                 display: "grid",
                 gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
                 gap: "1rem",
-            } }, 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) => {
+            } }, h("div", { key: '44dca317fe36f8b595cd2e0db43a047b79da028d' }, h("label", { key: 'af429b76716c987a36bd80328e7a6cbda115a758', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.electricityPrice), h("input", { key: '69f82fc1bf29d648da35147827934cb954e7c15f', 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: '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) => {
+            } })), h("div", { key: '556e7cac0f6eb84c712f32fb865236c117b0c850' }, h("label", { key: '8c01e4b3617b42e0c08f7c70df0bf6bd5f9a1e36', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.compensationRate), h("input", { key: '40e3f63d65fd85f95fcd872f9a6cec1a6765329c', 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: '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) => {
+            } })), h("div", { key: '5995e5ebbafe4c5c11c57c4000a6dbe91b06afd6' }, h("label", { key: '0f69d8930ca657fae719a98d042256c91d0cbd46', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.annualPriceIncrease), h("input", { key: '3c8b0670ce258ab44f5af28b94a922d81d32f793', 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: '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
+            } })))), h("div", { key: '32450c874314588fc2864bf4bc6b659c45767224', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: 'dfc1a170e86411517c465535077da5c7aacc0c3d', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.resultsTitle), h("div", { key: '464e5e32dbfda19d75f161a4cae4dd854196897a', class: "bg-muted rounded-4xl p-4" }, h("div", { key: '1c7af874a19f1463e8155c8adf678e36a10aadfa', class: "flex flex-col sm:flex-row sm:items-center justify-between" }, h("span", { key: 'caf0cc0319bb343b969e1fb53d25c51c8dd3364c', class: "text-text-muted" }, t.solarSystemForm.autonomy), h("span", { key: 'f103cc8d1d244c4075e8dfb965fae75a128605ee', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.autonomy > 100
             ? "100"
-            : 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: {
+            : this.formatEuropeanNumber(this.autonomy, 1), "%")), h("div", { key: '6b315c64fc618a5625bdf18f95807b1810fe7d02', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("span", { key: '4d9622101eaf087b28c8e446071f0dd19b537f82', class: "text-text-muted" }, t.solarSystemForm.totalEnergyConsumption), h("span", { key: '42cb8b45c2a47670a685a55e090a32e33a6ea7e8', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.totalEnergyConsumption, 0), " kWh/", t.solarSystemForm.year)), h("div", { key: 'ad73d33a4744424e62577ca61fe99a07c724a8e7', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("span", { key: 'a10a292f89d2d9b8ae0c53470fdd2a0959db662b', class: "text-text-muted" }, t.solarSystemForm.totalEnergyProduction), h("span", { key: '022d2b3e88a804c0412d199b60092b338cc5a096', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.totalEnergyProduction, 0), " kWh/", t.solarSystemForm.year)), h("div", { key: 'bd2f4c86276c958989c2e9f306b2b3fc9ad11c16', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: 'c23ffe0f98b85a0dc1a12faa81c3e6ed6728326f', class: "flex items-center gap-2" }, h("span", { key: '6bcd71b98de340cd3b963c03c7f81f154a591b0c', class: "text-text-muted" }, t.solarSystemForm.costSavings)), h("span", { key: 'b8a533e06fd8a16af4889a300962a2625dfbb414', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.costSavings), "\u20AC/", t
+            .solarSystemForm.year)), h("div", { key: '66b123f86982e0c700485d08145e48d5f11f416a', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: '78d0529ad89f93678fe1770b06bb762e36598c36', class: "flex items-center gap-2" }, h("span", { key: 'bc4c266678fe3d9ba9e74105a39fa1e806afcf11', class: "text-text-muted" }, t.solarSystemForm.compensation20Years)), h("span", { key: '82942abbb9e6c6466a897e3a6d7506a25a6e1cfa', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.compensation20Years), "\u20AC")), h("div", { key: 'b6bbec34158fe9cbee87d0f09137a2eee8413859', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: 'c53e4100aabd7666c31c992d475ceb93e0659bf6', class: "flex items-center gap-2" }, h("span", { key: '17e278b24e677d980bb0ed06b4d70ae9ed4bd43d', class: "text-text-muted" }, t.solarSystemForm
+            .monetaryBenefit20Years)), h("span", { key: '04620169c1f1e0d9f06a6a009e041d596102676b', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.savedCosts20Years), "\u20AC")))), h("div", { key: 'a973dd649f27c0a4c465ce62e197e8c1c6923e7c', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: 'c804251249a2a826d54c6f1ff253b985e52ebf93', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.requestOffer), h("div", { key: 'cc7ffe567ea55ae096f22574423629523186d849', style: {
                 display: "grid",
                 gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
                 gap: "1rem",
-            } }, 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
+            } }, h("div", { key: '2d484636c1b4d742ea2449ad9dd1c94dd396f324' }, h("label", { key: 'f668d8fd583b87ffc87fc878e90daf97d0065e34', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.name), h("input", { key: 'cf0954936ec766a5721be89c2a8dd1a21495e2da', 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: '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
+            }, placeholder: "Your name" }), this.nameError && (h("p", { key: 'e78085692549c91360110eec20dd03ed173030bd', class: "text-error text-sm mt-1" }, this.nameError))), h("div", { key: 'd5fa2f82e546bbaa4516fb83cd91dfde556b7632' }, h("label", { key: '273f77ed86813e4de109a22b5064b0ca18ec7283', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.email), h("input", { key: '6ec96604898b4f1ff0e68c7b0e74e95c67e91a33', 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: '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
+            }, placeholder: "your.email@example.com" }), this.emailError && (h("p", { key: 'f8f2deb4849f570a3ad1fb57705a9dc8f625e285', class: "text-error text-sm mt-1" }, this.emailError))), h("div", { key: 'fd790363ec794d7de01a62a947c208301c760d1f' }, h("label", { key: 'e8f9181e7f09831d4dc9ca2416d36c52d775e086', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.phone), h("input", { key: '993cbdee6308406cef97bb37242f95d0692b92d3', 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: '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() ||
+            }, placeholder: "+34 123 456 789" }), this.phoneError && (h("p", { key: 'b6f4e2fcc3408d8872786e0e73143afc47bc3340', class: "text-error text-sm mt-1" }, this.phoneError)))), h("div", { key: '23e5cfe888637f9ed46262ff36a935266fe11e1c', class: "flex flex-col items-center gap-4" }, h("button", { key: 'e8df6756b1e9c6881b239e992550600605201f15', 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 +413,9 @@ export class SolarSystemForm {
                 color: this.isSubmitting
                     ? "var(--color-text-muted)"
                     : "#ffffff",
-            } }, this.isSubmitting && (h("div", { key: '89c735be20b53bba625e9e3244cd4cf523a75ab2', class: "w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" })), this.isSubmitting
+            } }, this.isSubmitting && (h("div", { key: 'd519b1d5f66bcc30b695e8ae10396a809710b112', 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: '277990957d0396048fd8735ecfc27c9a601941a0', class: `text-sm px-4 py-2 rounded-4xl ${this.submitSuccess
+            : t.solarSystemForm.requestOfferButton), this.submitMessage && (h("div", { key: '33241fd401bd5ce53631573b04cc1a52a463f955', 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)))))));
     }