blue-chestnut-solar-expert 0.0.62 → 0.0.64

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

@@ -10,7 +10,7 @@ export class PolygonButtons {
         const buttonStyles = {
             border: "1px solid #ccc",
         };
-        return (h("div", { key: '965884d5e648b65093b2795bf67bcd9bf78ac391', class: "flex w-full gap-2 justify-center pb-3" }, h("button", { key: '43f6d313baff9a9e9ed8b6b6891333f130b96f43', class: "px-4 py-2 rounded-4xl hover:bg-muted text-secondary transition-colors duration-200 text-xs", style: buttonStyles, onClick: () => this.markAsFlatRoof() }, t.mapDraw.markAsFlatRoof), h("button", { key: '88a54c8a862ed1491946dba83db13a7ee5c45b8a', class: "px-4 py-2 rounded-4xl hover:bg-muted text-secondary transition-colors duration-200 text-xs", style: buttonStyles, onClick: () => this.calculateSolarPanels() }, t.mapDraw.calculateSolarPanels)));
+        return (h("div", { key: '34f927bc31835e3c2de862c1ebd6768bef1a10d5', class: "flex w-full gap-2 justify-center pb-3" }, h("button", { key: 'c2871599ac6e76bf46dc67d622bbbe452ac8bc0c', class: "px-4 py-2 rounded-4xl hover:bg-muted text-secondary transition-colors duration-200 text-xs", style: buttonStyles, onClick: () => this.markAsFlatRoof() }, t.mapDraw.markAsFlatRoof), h("button", { key: '33a055a5a3cbbf6c1bff49d1cb72862443d9f90a', class: "px-4 py-2 rounded-4xl hover:bg-muted text-secondary transition-colors duration-200 text-xs", style: buttonStyles, onClick: () => this.calculateSolarPanels() }, t.mapDraw.calculateSolarPanels)));
     }
     static get is() { return "polygon-buttons"; }
     static get originalStyleUrls() {

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

@@ -10,35 +10,42 @@ export class PolygonInformation {
     calculateSolarPanels;
     markAsFlatRoof;
     currentTool;
+    getDisplayAzimuth(azimuth) {
+        return (Math.round(azimuth) + 90) % 360;
+    }
     render() {
         const t = getLanguageStrings(state.settings.language);
         // console.log(this.currentPolygon);
-        return (h("div", { key: 'ea12d974f8928984d3ef4138bdd516dec317c5b0', class: "flex gap-4 flex-row justify-center items-center w-full rounded-4xl pb-2", style: {
+        return (h("div", { key: '3a990afcf454f56f227c7af7c17602edca65a1d4', class: "flex gap-4 flex-row justify-center items-center w-full rounded-4xl pb-2", style: {
                 border: "1px solid var(--color-border)",
-            } }, h("div", { key: 'dd5c55a781b771779783e1e90c5918089d668de9', class: "w-full bg-primary rounded-4xl p-3 text-secondary" }, h("h3", { key: 'beb6358d3ec077a11163f377829182f0d21a115d', class: "text-lg font-semibold mb-4 text-center" }, t.mapDraw.information), h("polygon-buttons", { key: '1d866d933593dbd31b385a1aeb2b384144b1aa10', calculateSolarPanels: this.calculateSolarPanels, markAsFlatRoof: this.markAsFlatRoof, currentTool: this.currentTool }), this.currentPolygon?.area
+            } }, h("div", { key: '1437eb984f29bfd29c568ec1f7b6e03c8166c3bb', class: "w-full bg-primary rounded-4xl p-3 text-secondary" }, h("h3", { key: 'b5bef8848258179149295c739b1c6bb335d850a9', class: "text-lg font-semibold mb-4 text-center" }, t.mapDraw.information), h("polygon-buttons", { key: '5ed316c2783784f78d910dd26f588a3d1f2aead0', calculateSolarPanels: this.calculateSolarPanels, markAsFlatRoof: this.markAsFlatRoof, currentTool: this.currentTool }), this.currentPolygon?.area
             ? (h("div", { class: "space-y-4" }, h("div", null, h("div", { class: "grid grid-cols-2 gap-2" }, h("div", null, h("h4", { class: "text-sm font-medium text-text-muted" }, t.mapDraw.area), h("p", { class: "text-lg" }, this.currentPolygon
                 ?.area
-                .toFixed(2), " m\u00B2")), h("div", null, h("div", null, h("h4", { class: "text-sm font-medium text-text-muted" }, t.mapDraw.panels), h("p", { class: "text-lg" }, this.numberOfPanels ?? 0))))), h("div", null, h("h4", { class: "text-sm font-medium text-text-muted" }, t.mapDraw.azimuth), h("div", { class: "flex gap-2 flex-row justify-start bg-muted rounded-4xl p-2" }, h("input", { class: "text-lg w-full", onKeyDown: (e) => {
+                .toFixed(0), " m\u00B2")), h("div", null, h("div", null, h("h4", { class: "text-sm font-medium text-text-muted" }, t.mapDraw.panels), h("p", { class: "text-lg" }, this.numberOfPanels ?? 0))))), h("div", { class: "grid grid-cols-1 md:grid-cols-2 gap-4" }, h("div", null, h("h4", { class: "text-sm font-medium text-text-muted" }, t.mapDraw.azimuth), h("div", { class: "flex gap-2 flex-row justify-start bg-muted rounded-4xl p-2" }, h("input", { class: "text-lg w-full", onKeyDown: (e) => {
                     if (e.key === "Enter") {
                         this.handleAzimuthChange(e);
                         e.target
                             .blur();
                     }
-                }, value: this.currentPolygon
-                    ?.azimuth ?? 0 }), "(", azimuthToCardinal(this.currentPolygon.azimuth), ")"), !state.isIOS && (h("input", { type: "range", min: "0", max: "360", 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.currentPolygon
-                    ?.azimuth ?? 0, onInput: (e) => {
+                }, value: this.getDisplayAzimuth(this.currentPolygon
+                    ?.azimuth ??
+                    0) }), "(", azimuthToCardinal(this.getDisplayAzimuth(this.currentPolygon.azimuth)), ")"), !state.isIOS && (h("input", { type: "range", min: "0", max: "360", 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.getDisplayAzimuth(this.currentPolygon
+                    ?.azimuth ??
+                    0), onInput: (e) => {
                     this.handleAzimuthChange(e);
-                } }))), h("div", null, h("h4", { class: "text-sm font-medium text-text-muted pl-2" }, t.mapDraw.pitch), h("div", { class: "flex gap-2 flex-row justify-start bg-muted rounded-4xl p-2" }, h("input", { class: "text-lg w-full", onKeyDown: (e) => {
+                } }))), h("div", null, h("h4", { class: "text-sm font-medium text-text-muted md:pl-2" }, t.mapDraw.pitch), h("div", { class: "flex gap-2 flex-row justify-start bg-muted rounded-4xl p-2" }, h("input", { class: "text-lg w-full", onKeyDown: (e) => {
                     if (e.key === "Enter") {
                         this.handlePitchChange(e);
                         e.target
                             .blur();
                     }
-                }, value: this.currentPolygon
-                    ?.pitch ?? 0 }), "\u00B0"), !state.isIOS && (h("input", { type: "range", min: "0", max: "90", 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.currentPolygon
-                    ?.pitch ?? 0, onInput: (e) => {
+                }, value: Math.round(this.currentPolygon
+                    ?.pitch ??
+                    0) }), "\u00B0"), !state.isIOS && (h("input", { type: "range", min: "0", max: "90", 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: Math.round(this.currentPolygon
+                    ?.pitch ??
+                    0), onInput: (e) => {
                     this.handlePitchChange(e);
-                } })))))
+                } }))))))
             : (h("p", { class: "text-text-secondary text-center" }, t.mapDraw.noPolygonSelected)))));
     }
     static get is() { return "polygon-information"; }

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: '8e967f7d9c64bb3144fb452fafc507e46e4943d1', 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: 'ef4c27258c2cfa29ad937319c8260f885d94b234', 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: '37d59dc02ab0a8f61a9ef983030756a56dc2c8dc', class: "flex items-center gap-1 flex-col" }, h("undo-icon", { key: 'a4a581a73623722219ecf944bf9eda8613a31944' }), h("span", { key: 'df5e5aeca411a468f4024037d8cc27c7038c3dae' }, 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

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

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

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

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

@@ -31,14 +31,14 @@ export class SettingsModal {
     };
     render() {
         const t = getLanguageStrings(state.settings.language);
-        return (h("div", { key: '86e2e853f3ae4fc186e301f088fa2f51ed21eb96', class: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" }, h("div", { key: 'ecbc4afefad160dd8817d0fc236398d50307fd5f', class: "bg-primary rounded-4xl p-6 w-full max-w-md" }, h("div", { key: '26db379fce6ea21297ef5637378cb8d45e65c632', class: "flex justify-between items-center mb-6" }, h("h2", { key: 'edffc0b3e2e5bd2b63a939a5e7bd859ee6544565', class: "text-xl font-semibold" }, "Settings"), h("button", { key: '1ec7763b94b8cab41086f56fcd3436cdb09d4100', class: "p-2 hover:bg-hover rounded-full transition-colors", onClick: this.handleClose }, h("svg", { key: 'a2b4082236931c900c39dafc638d4eead0545f31', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { key: '8f5a732d61e4858f14c598cba60eb0e9503b6154', x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { key: 'bc1f1e063fe710bb386952c01fc7248d1480583c', x1: "6", y1: "6", x2: "18", y2: "18" })))), h("div", { key: '22202217c1a00baf20781dc6a55ef534b0d54248', class: "space-y-4" }, h("div", { key: '0d900965d565e5339513885777faa16778d16fba' }, h("h3", { key: 'df440a1e1cc685bc7034c12abe22ab58631dc39b', class: "text-sm font-medium text-text-muted mb-1" }, "Debug Information"), h("p", { key: '1b2490b4fe7ab72f1ce00129972c8b2a1c68e98a', class: "text-sm text-text-muted mb-1" }, "state: ", JSON.stringify(state, null, 2)), h("p", { key: '02f856480ed33470efbe5a8315dbca9b5a7a77fa', class: "text-sm text-text-muted mb-1" }, navigator.userAgent), h("p", { key: '7c54fd31d753d17ec97a62d71743efe04a89adb3', class: "text-sm text-text-muted mb-1" }, navigator.userAgent.indexOf("Safari")), h("p", { key: '593a28bae68b1ee15f3f86e744a12e984ca02a37', class: "text-sm text-text-muted mb-1" }, "maxTouchPoints: ", navigator.maxTouchPoints), h("p", { key: '896bfdcae3012911e364718aaeb7a91edd367ad3', class: "text-sm text-text-muted mb-1" }, "iPhone: ", navigator.userAgent.indexOf("iPhone")), h("p", { key: '37633d9ec6303d386745742f50b9f583e966ebf6', class: "text-sm text-text-muted mb-1" }, "Mac OS: ", navigator.userAgent.indexOf("Mac OS"))), h("div", { key: '4d007f8d19fe1b3b95f80b92850fbfd6db55d656' }, h("label", { key: '1b2447f96a44ba2d1d8d0184a09a9b77106e0679', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.language), h("select", { key: '64dc07edfff00c017bb10c01b7940f3413a111d6', class: "w-full bg-muted rounded-4xl p-2", onInput: (e) => this.handleInputChange("language", e.target
-                .value) }, h("option", { key: '13e54cf9f9b27ca9bf9b9ab01ca7ee9b91887d75', value: "en", selected: this.tempSettings.language ===
-                "en" }, "English"), h("option", { key: 'abccf307e6c730659a2d68bbf8432ad7dad7a9d9', value: "es", selected: this.tempSettings.language ===
-                "es" }, "Espa\u00F1ol"), h("option", { key: '0f6e16122daace282c5ef3426ecc5875a323c9a4', value: "de", selected: this.tempSettings.language ===
-                "de" }, "Deutsch"))), h("div", { key: '33a2256b3b6000dbace5ce05baf5f535a7a3de9c' }, h("label", { key: 'b22ffcb5bd477c8298d34b2a905475d5c5aadaba', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.rowSpacing), h("input", { key: '91672a7397a83f11f3711d1ab8f52e5626b8e09f', type: "number", class: "w-full bg-muted rounded-4xl p-2", value: this.tempSettings.rowSpacing, onInput: (e) => this.handleInputChange("rowSpacing", parseFloat(e.target
-                .value)) })), h("div", { key: 'deee24a2c07fbdf4a852ba5566087a11242ee1b9' }, h("label", { key: '5384d7f0877af2b94b21f610628a410fec60d017', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.columnSpacing), h("input", { key: '17be549e097c08ae9bde1bc4f00154963b71ea33', type: "number", class: "w-full bg-muted rounded-4xl p-2", value: this.tempSettings.columnSpacing, onInput: (e) => this.handleInputChange("columnSpacing", parseFloat(e.target
-                .value)) })), h("div", { key: '026f0919812b1a45d8daba4aa71730c4b171d8a1' }, h("label", { key: '912d5ac6b6b188b29864d85af180044d551efc36', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.borderInset), h("input", { key: '8d6970dc513500a524b4fc0e825c55f51f8a47ee', type: "number", class: "w-full bg-muted rounded-4xl p-2", value: this.tempSettings.borderInset, onInput: (e) => this.handleInputChange("borderInset", parseFloat(e.target
-                .value)) }))), h("div", { key: 'ecd39b394ee608569a097305a85a197da04f41b9', class: "flex justify-end gap-4 mt-6" }, h("button", { key: '3b696ab9a2120619bd0f6b34f0c0baa9807b6a0d', class: "px-4 py-2 bg-surface rounded-4xl hover:bg-surface-hover transition-colors", onClick: this.handleClose }, "Cancel"), h("button", { key: '1c74e08866a5888acd29abd31a07149a58e41e1b', class: "px-4 py-2 bg-secondary text-muted rounded-4xl hover:bg-text-secondary transition-colors", onClick: this.handleSave }, "Save Changes")))));
+        return (h("div", { key: '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: '4d40753a37e79e7f6d60c7462372cd68cef82589', 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"]}