npm - blue-chestnut-solar-expert - Versions diffs - 0.0.22 → 0.0.23 - Mend

blue-chestnut-solar-expert 0.0.22 → 0.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (177) hide show

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

@@ -10,11 +10,11 @@ export class PolygonInformation {
     calculateSolarPanels;
     render() {
         const t = getLanguageStrings(state.settings.language);
-        return (h("div", { key: 'd6ab424241a7a68ed6e9c8732d7142b2097d0491', class: "flex gap-4 flex-row justify-center items-center w-full" }, h("div", { key: '1e5870aa04b0d26668a28663779e3f4248eb5791', class: "w-full bg-[#f3ebda] rounded-4xl p-4" }, h("h3", { key: 'db95c0cb87f0c922f4c03ee3b6bd4c5f5b0131df', class: "text-lg font-semibold mb-4 text-center" }, t.mapDraw.information), this.currentPolygon?.details
-            ? (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-gray-600" }, t.mapDraw.area), h("p", { class: "text-lg" }, this.currentPolygon.details
+        return (h("div", { key: 'e7d612eebc40e57e1fb4f2828f052e71dd41cecd', class: "flex gap-4 flex-row justify-center items-center w-full" }, h("div", { key: '257fd1d17428e53c4ea334b7d7a51c5d4dbaed17', class: "w-full bg-primary rounded-4xl p-4 text-secondary" }, h("h3", { key: 'b7fdad47b78b1634f1abe941fa2e74b339a4c2f7', class: "text-lg font-semibold mb-4 text-center" }, t.mapDraw.information), this.currentPolygon?.details
+            ? (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.details
                 ?.area
-                .toFixed(2), " m\u00B2")), h("div", null, h("div", null, h("h4", { class: "text-sm font-medium text-gray-600" }, t.mapDraw.panels), h("p", { class: "text-lg" }, this.positionedPanels
-                ?.length ?? 0))))), h("div", null, h("h4", { class: "text-sm font-medium text-gray-600" }, t.mapDraw.azimuth), h("div", { class: "flex gap-2 flex-row justify-start bg-white rounded-4xl p-2" }, h("input", { class: "text-lg w-full", onKeyDown: (e) => {
+                .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.positionedPanels
+                ?.length ?? 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) => {
                     if (e.key === "Enter") {
                         this.handleAzimuthChange(e);
                         e.target
@@ -23,7 +23,7 @@ export class PolygonInformation {
                 }, value: this.currentPolygon
                     .details
                     ?.azimuth }), "(", azimuthToCardinal(this.currentPolygon.details
-                ?.azimuth), ")"), 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-white", value: 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
                     .details?.azimuth, onInput: (e) => {
                     const target = e
                         .target;
@@ -36,7 +36,7 @@ export class PolygonInformation {
                         this.positionedPanels) {
                         this.calculateSolarPanels();
                     }
-                } })), h("div", null, h("h4", { class: "text-sm font-medium text-gray-600 pl-2" }, t.mapDraw.pitch), h("div", { class: "flex gap-2 flex-row justify-start bg-white 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 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
@@ -44,7 +44,7 @@ export class PolygonInformation {
                     }
                 }, value: this.currentPolygon
                     .details
-                    ?.pitch }), "\u00B0"), 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-white", value: this.currentPolygon
+                    ?.pitch }), "\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
                     .details?.pitch, onInput: (e) => {
                     const target = e
                         .target;
@@ -57,11 +57,10 @@ export class PolygonInformation {
                         this.positionedPanels) {
                         this.calculateSolarPanels();
                     }
-                } }))))
-            : (h("p", { class: "text-gray-500 text-center" }, t.mapDraw.noPolygonSelected)))));
+                } })))))
+            : (h("p", { class: "text-text-secondary text-center" }, t.mapDraw.noPolygonSelected)))));
     }
     static get is() { return "polygon-information"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["../../output.css"]

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

	@@ -1 +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, SolarPanelSystemPart } from \"../../components\";\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: true,\r\n})\r\nexport class PolygonInformation {\r\n @Prop()\r\n currentPolygon: Polygon;\r\n @Prop()\r\n positionedPanels: SolarPanelSystemPart[] \| 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\r\n render() {\r\n const t = getLanguageStrings(state.settings.language);\r\n\r\n return (\r\n <div class=\"flex gap-4 flex-row justify-center items-center w-full\">\r\n <div class=\"w-full bg-[#f3ebda] rounded-4xl p-4\">\r\n <h3 class=\"text-lg font-semibold mb-4 text-center\">\r\n {t.mapDraw.information}\r\n </h3>\r\n {this.currentPolygon?.details\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-gray-600\">\r\n {t.mapDraw.area}\r\n </h4>\r\n <p class=\"text-lg\">\r\n {this.currentPolygon.details\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-gray-600\">\r\n {t.mapDraw.panels}\r\n </h4>\r\n <p class=\"text-lg\">\r\n {this.positionedPanels\r\n ?.length ?? 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-gray-600\">\r\n {t.mapDraw.azimuth}\r\n </h4>\r\n <div class=\"flex gap-2 flex-row justify-start bg-white 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 .details\r\n ?.azimuth}\r\n />\r\n ({azimuthToCardinal(\r\n this.currentPolygon.details\r\n ?.azimuth,\r\n )})\r\n </div>\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-white\"\r\n value={this.currentPolygon\r\n .details?.azimuth}\r\n onInput={(e) => {\r\n const target = e\r\n .target as HTMLInputElement;\r\n const azimuth = parseFloat(\r\n target.value,\r\n );\r\n this.currentPolygon.details\r\n .azimuth = azimuth;\r\n if (\r\n this.currentPolygon\r\n .type ===\r\n \"roof\" &&\r\n this.positionedPanels\r\n ) {\r\n this.calculateSolarPanels();\r\n }\r\n }}\r\n />\r\n </div>\r\n <div>\r\n <h4 class=\"text-sm font-medium text-gray-600 pl-2\">\r\n {t.mapDraw.pitch}\r\n </h4>\r\n <div class=\"flex gap-2 flex-row justify-start bg-white 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 .details\r\n ?.pitch}\r\n />\r\n °\r\n </div>\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-white\"\r\n value={this.currentPolygon\r\n .details?.pitch}\r\n onInput={(e) => {\r\n const target = e\r\n .target as HTMLInputElement;\r\n const pitch = parseFloat(\r\n target.value,\r\n );\r\n this.currentPolygon.details\r\n .pitch = pitch;\r\n if (\r\n this.currentPolygon\r\n .type ===\r\n \"roof\" &&\r\n this.positionedPanels\r\n ) {\r\n this.calculateSolarPanels();\r\n }\r\n }}\r\n />\r\n </div>\r\n </div>\r\n )\r\n : (\r\n <p class=\"text-gray-500 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"]}
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, SolarPanelSystemPart } from \"../../components\";\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 positionedPanels: SolarPanelSystemPart[] \| 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\r\n render() {\r\n const t = getLanguageStrings(state.settings.language);\r\n\r\n return (\r\n <div class=\"flex gap-4 flex-row justify-center items-center w-full\">\r\n <div class=\"w-full bg-primary rounded-4xl p-4 text-secondary\">\r\n <h3 class=\"text-lg font-semibold mb-4 text-center\">\r\n {t.mapDraw.information}\r\n </h3>\r\n {this.currentPolygon?.details\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.details\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.positionedPanels\r\n ?.length ?? 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 .details\r\n ?.azimuth}\r\n />\r\n ({azimuthToCardinal(\r\n this.currentPolygon.details\r\n ?.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 .details?.azimuth}\r\n onInput={(e) => {\r\n const target = e\r\n .target as HTMLInputElement;\r\n const azimuth = parseFloat(\r\n target.value,\r\n );\r\n this.currentPolygon.details\r\n .azimuth = azimuth;\r\n if (\r\n this.currentPolygon\r\n .type ===\r\n \"roof\" &&\r\n this.positionedPanels\r\n ) {\r\n this.calculateSolarPanels();\r\n }\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 .details\r\n ?.pitch}\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 .details?.pitch}\r\n onInput={(e) => {\r\n const target = e\r\n .target as HTMLInputElement;\r\n const pitch = parseFloat(\r\n target.value,\r\n );\r\n this.currentPolygon.details\r\n .pitch = pitch;\r\n if (\r\n this.currentPolygon\r\n .type ===\r\n \"roof\" &&\r\n this.positionedPanels\r\n ) {\r\n this.calculateSolarPanels();\r\n }\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"]}

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

@@ -9,20 +9,12 @@ export class ToolBox {
     render() {
         const t = getLanguageStrings(state.settings.language);
         const undoToolStrings = t.mapDraw.tools[undoTool.name];
-        return (h("div", { key: '21ef401acdfa0169902c72c51a7fad31c6fd75c4', class: "flex lg:gap-4 rounded-4xl bg-[#f3ebda] p-4 flex-wrap justify-center w-full text-xs" }, tools.map((tool) => {
+        return (h("div", { key: '6a249c8eddd0bf541a98f77d09bcc9e297e8ec63', class: "flex lg:gap-4 rounded-4xl bg-primary p-4 flex-wrap justify-center w-full text-xs" }, tools.map((tool) => {
             const toolStrings = t.mapDraw.tools[tool.name];
-            return (h("button", { class: `px-4 py-2 rounded-4xl transition-colors duration-200 hover:bg-[#ffffff] ${this.currentTool.name === tool.name
-                    ? "bg-[#271200] hover:bg-gray-500"
-                    : "bg-[#f3ebda] hover:bg-[#ffffff]"}`, style: {
-                    color: this.currentTool.name === tool.name
-                        ? "#ffffff"
-                        : "#000000",
-                }, "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: '2de8094cce52d847d6cf65966876e449b86156af', class: `px-4 py-2 rounded-4xl transition-colors duration-200 hover:bg-[#ffffff] ${this.currentTool.name === undoTool.name
-                ? "bg-[#271200] hover:bg-gray-500"
-                : "bg-[#f3ebda] hover:bg-[#ffffff]"}`, style: {
-                color: "#000000",
-            }, "aria-label": undoToolStrings.ariaLabel, title: undoToolStrings.explanation, onClick: () => this.undoCallback() }, h("div", { key: '559227361f76ce39b4c2e48f216d477737e46d6c', class: "flex items-center gap-1 flex-col" }, h("undo-icon", { key: '6b97156dfd7d50c11ad627e9b6d11539e4b0fc7e' }), h("span", { key: '6307014e12640793d7e2511b790d192824a8d2fa' }, undoToolStrings.name)))));
+            return (h("button", { class: `px-4 py-2 rounded-4xl transition-colors duration-200 ${this.currentTool.name === tool.name
+                    ? "bg-secondary hover:bg-secondary/80 text-secondary-foreground"
+                    : "bg-primary hover:bg-muted text-primary-foreground"}`, "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: 'bc2dc6f90419ca7a8ff0ede18b82c2ad51b94280', class: `px-4 py-2 rounded-4xl transition-colors duration-200 bg-primary hover:bg-muted text-primary-foreground`, "aria-label": undoToolStrings.ariaLabel, title: undoToolStrings.explanation, onClick: () => this.undoCallback() }, h("div", { key: '1112ed1599e5ef3c007dd9122cca62b42137852c', class: "flex items-center gap-1 flex-col" }, h("undo-icon", { key: '3b7425e904e07e8c17fb538eef2bfedb74837ab3' }), h("span", { key: 'b5df30aa88a8d323ff9855ebcdc3a54226092a46' }, undoToolStrings.name)))));
     }
     static get is() { return "tool-box"; }
     static get originalStyleUrls() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tool-box.js","sourceRoot":"","sources":["../../../src/components/map-draw/tool-box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAO3D,MAAM,OAAO,OAAO;IAEhB,WAAW,CAAO;IAElB,YAAY,CAAa;IAEzB,YAAY,CAAuB;IAEnC,MAAM;QACF,MAAM,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACtD,MAAM,eAAe,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEvD,OAAO,CACH,4DAAK,KAAK,EAAC,~~oFAAoF~~;~~YAC1F~~,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBAChB,MAAM,WAAW,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC/C,OAAO,CACH,cACI,KAAK,EAAE,~~2EACH~~,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;wBAC/B,CAAC,CAAC,~~gCAAgC~~;~~wBAClC~~,CAAC,CAAC,~~iCACV~~,EAAE,~~EACF~~,~~KAAK,EAAE;wBACH,KAAK,EAAE,IAAI,CAAC,~~WAAW,CAAC,~~IAAI,KAAK,IAAI,CAAC,IAAI;4BACtC,CAAC,CAAC,~~SAAS~~;4BACX~~,~~CAAC,CAAC,SAAS;qBAClB,gBACW,WAAW,CAAC,SAAS,~~EACjC,KAAK,EAAE,WAAW,CAAC,WAAW,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;oBAEtC,WAAK,KAAK,EAAC,kCAAkC;wBACzC,qBAAe,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;wBAClC,gBAAO,WAAW,CAAC,IAAI,CAAQ,CAC7B,CACD,CACZ,CAAC;YACN,CAAC,CAAC;YACF,+DACI,KAAK,EAAE,~~2EACH~~,~~IAAI~~,~~CAAC,WAAW,CAAC,IAAI,KAAK,QAAQ,CAAC,IAAI;oBACnC,CAAC,CAAC,gCAAgC;oBAClC,CAAC,CAAC,iCACV,EAAE,EACF,KAAK,EAAE;oBACH,KAAK,EAAE,SAAS;iBACnB,gBACW,~~eAAe,CAAC,SAAS,EACrC,KAAK,EAAE,eAAe,CAAC,WAAW,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;gBAElC,4DAAK,KAAK,EAAC,kCAAkC;oBACzC,mEAAa;oBACb,+DAAO,eAAe,CAAC,IAAI,CAAQ,CACjC,CACD,CACP,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport { Tool } from \"../../utils/render/tools\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { state } from \"../../store\";\r\nimport { tools, undoTool } from \"../../utils/render/tools\";\r\n\r\n@Component({\r\n tag: \"tool-box\",\r\n styleUrl: \"../../output.css\",\r\n shadow: false,\r\n})\r\nexport class ToolBox {\r\n @Prop()\r\n currentTool: Tool;\r\n @Prop()\r\n undoCallback: () => void;\r\n @Prop()\r\n onToolSelect: (tool: Tool) => void;\r\n\r\n render() {\r\n const t = getLanguageStrings(state.settings.language);\r\n const undoToolStrings = t.mapDraw.tools[undoTool.name];\r\n\r\n return (\r\n <div class=\"flex lg:gap-4 rounded-4xl bg-~~[#f3ebda]~~ p-4 flex-wrap justify-center w-full text-xs\">\r\n {tools.map((tool) => {\r\n const toolStrings = t.mapDraw.tools[tool.name];\r\n return (\r\n <button\r\n class={`px-4 py-2 rounded-4xl transition-colors duration-200 ~~hover:bg-[#ffffff]~~ ${\r\n this.currentTool.name === tool.name\r\n ? \"bg-~~[#271200]~~ hover:bg-~~gray~~-~~500~~\"\r\n : \"bg-~~[#f3ebda]~~ hover:bg-~~[#ffffff]~~\"\r\n }`}\r\n style={{\r\n color: this.currentTool.name === tool.name\r\n ? \"#ffffff\"\r\n : \"#000000\",\r\n }}\r\n aria-label={toolStrings.ariaLabel}\r\n title={toolStrings.explanation}\r\n onClick={() => this.onToolSelect(tool)}\r\n >\r\n <div class=\"flex items-center gap-1 flex-col\">\r\n <icon-selector name={tool.icon} />\r\n <span>{toolStrings.name}</span>\r\n </div>\r\n </button>\r\n );\r\n })}\r\n <button\r\n class={`px-4 py-2 rounded-4xl transition-colors duration-200 ~~hover:~~bg-~~[#ffffff]~~ ~~${\r\n this.currentTool.name === undoTool.name\r\n ? \"bg-[#271200]~~ hover:bg-~~gray-500\"\r\n :~~ ~~\"bg~~-~~[#f3ebda] hover:bg~~-~~[#ffffff]\"\r\n }~~`}\r\n ~~style={{\r\n color: \"#000000\",\r\n }}\r\n~~ aria-label={undoToolStrings.ariaLabel}\r\n title={undoToolStrings.explanation}\r\n onClick={() => this.undoCallback()}\r\n >\r\n <div class=\"flex items-center gap-1 flex-col\">\r\n <undo-icon />\r\n <span>{undoToolStrings.name}</span>\r\n </div>\r\n </button>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"tool-box.js","sourceRoot":"","sources":["../../../src/components/map-draw/tool-box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAO3D,MAAM,OAAO,OAAO;IAEhB,WAAW,CAAO;IAElB,YAAY,CAAa;IAEzB,YAAY,CAAuB;IAEnC,MAAM;QACF,MAAM,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACtD,MAAM,eAAe,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEvD,OAAO,CACH,4DAAK,KAAK,EAAC,kFAAkF;YACxF,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBAChB,MAAM,WAAW,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC/C,OAAO,CACH,cACI,KAAK,EAAE,wDACH,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;wBAC/B,CAAC,CAAC,8DAA8D;wBAChE,CAAC,CAAC,mDACV,EAAE,gBACU,WAAW,CAAC,SAAS,EACjC,KAAK,EAAE,WAAW,CAAC,WAAW,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;oBAEtC,WAAK,KAAK,EAAC,kCAAkC;wBACzC,qBAAe,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;wBAClC,gBAAO,WAAW,CAAC,IAAI,CAAQ,CAC7B,CACD,CACZ,CAAC;YACN,CAAC,CAAC;YACF,+DACI,KAAK,EAAE,wGAAwG,gBACnG,eAAe,CAAC,SAAS,EACrC,KAAK,EAAE,eAAe,CAAC,WAAW,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;gBAElC,4DAAK,KAAK,EAAC,kCAAkC;oBACzC,mEAAa;oBACb,+DAAO,eAAe,CAAC,IAAI,CAAQ,CACjC,CACD,CACP,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport { Tool } from \"../../utils/render/tools\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { state } from \"../../store\";\r\nimport { tools, undoTool } from \"../../utils/render/tools\";\r\n\r\n@Component({\r\n tag: \"tool-box\",\r\n styleUrl: \"../../output.css\",\r\n shadow: false,\r\n})\r\nexport class ToolBox {\r\n @Prop()\r\n currentTool: Tool;\r\n @Prop()\r\n undoCallback: () => void;\r\n @Prop()\r\n onToolSelect: (tool: Tool) => void;\r\n\r\n render() {\r\n const t = getLanguageStrings(state.settings.language);\r\n const undoToolStrings = t.mapDraw.tools[undoTool.name];\r\n\r\n return (\r\n <div class=\"flex lg:gap-4 rounded-4xl bg-primary p-4 flex-wrap justify-center w-full text-xs\">\r\n {tools.map((tool) => {\r\n const toolStrings = t.mapDraw.tools[tool.name];\r\n return (\r\n <button\r\n class={`px-4 py-2 rounded-4xl transition-colors duration-200 ${\r\n this.currentTool.name === tool.name\r\n ? \"bg-secondary hover:bg-secondary/80 text-secondary-foreground\"\r\n : \"bg-primary hover:bg-muted text-primary-foreground\"\r\n }`}\r\n aria-label={toolStrings.ariaLabel}\r\n title={toolStrings.explanation}\r\n onClick={() => this.onToolSelect(tool)}\r\n >\r\n <div class=\"flex items-center gap-1 flex-col\">\r\n <icon-selector name={tool.icon} />\r\n <span>{toolStrings.name}</span>\r\n </div>\r\n </button>\r\n );\r\n })}\r\n <button\r\n class={`px-4 py-2 rounded-4xl transition-colors duration-200 bg-primary hover:bg-muted text-primary-foreground`}\r\n aria-label={undoToolStrings.ariaLabel}\r\n title={undoToolStrings.explanation}\r\n onClick={() => this.undoCallback()}\r\n >\r\n <div class=\"flex items-center gap-1 flex-col\">\r\n <undo-icon />\r\n <span>{undoToolStrings.name}</span>\r\n </div>\r\n </button>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

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

@@ -31,14 +31,14 @@ export class SettingsModal {
     };
     render() {
         const t = getLanguageStrings(state.settings.language);
-        return (h("div", { key: '69815a7efeb8f52a5d3422b06dc212a50b9f405b', class: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" }, h("div", { key: '29bdfcdafa5765b3357633d3f6519be2abda0f31', class: "bg-[#f3ebda] rounded-4xl p-6 w-full max-w-md" }, h("div", { key: 'c764738701a7bb98247dd394126c70a257c014bf', class: "flex justify-between items-center mb-6" }, h("h2", { key: '5ebd4cae530c898c297f7db28ec96888c2981f2a', class: "text-xl font-semibold" }, "Settings"), h("button", { key: 'f7bea1c79bb453fbb62b478a361a55de0f2d2765', class: "p-2 hover:bg-gray-200 rounded-full transition-colors", onClick: this.handleClose }, h("svg", { key: '972c54d0ff2815eb425e24d1ad9082a7e0c97f01', 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: 'f11390a3eb51c202edbee1f590a7fa393a9185fd', x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { key: 'a019cd26820d563689c10961770dd87b09103047', x1: "6", y1: "6", x2: "18", y2: "18" })))), h("div", { key: '4b801dd8b6dbba9c7a2b2e08f03f36202bebbd67', class: "space-y-4" }, h("div", { key: 'f4a1894419edad7da806a2806f77a8fe60ced341' }, h("label", { key: 'da3bb6927298f85bdc73ed89bdb990e52b17ea15', class: "block text-sm font-medium text-gray-600 mb-1" }, t.settings.language), h("select", { key: '825705965ddf8fa20d05905759f2b3b460d52b55', class: "w-full bg-white rounded-4xl p-2", onInput: (e) => this.handleInputChange("language", e.target
-                .value) }, h("option", { key: 'cfed58aefbe6ebc59702f663308d2d8561cff28d', value: "en", selected: this.tempSettings.language ===
-                "en" }, "English"), h("option", { key: '2318d8bf1585a7a1fd025f46d01b2bb81363497e', value: "es", selected: this.tempSettings.language ===
-                "es" }, "Espa\u00F1ol"), h("option", { key: '17b93bbcd8284497f0cef3d6e23ad034621b58af', value: "de", selected: this.tempSettings.language ===
-                "de" }, "Deutsch"))), h("div", { key: 'c482c4e8dd6ffab0de3d41cb7e41a391dedb714d' }, h("label", { key: 'c1abc00b0fb193044e73db048bf8eed03770a10d', class: "block text-sm font-medium text-gray-600 mb-1" }, t.settings.rowSpacing), h("input", { key: '55458c275f594da462e5665a4f74dcd117ba1de2', type: "number", class: "w-full bg-white rounded-4xl p-2", value: this.tempSettings.rowSpacing, onInput: (e) => this.handleInputChange("rowSpacing", parseFloat(e.target
-                .value)) })), h("div", { key: 'b2ae04d05ba09bd10619c3bf0608864c2a76870a' }, h("label", { key: '8b7959e10de695570f258e10d67e83a7a360ef6d', class: "block text-sm font-medium text-gray-600 mb-1" }, t.settings.columnSpacing), h("input", { key: 'c67d963036385a0a97fc70ea8b6aadd9c9f65a85', type: "number", class: "w-full bg-white rounded-4xl p-2", value: this.tempSettings.columnSpacing, onInput: (e) => this.handleInputChange("columnSpacing", parseFloat(e.target
-                .value)) })), h("div", { key: '383a7f16994f833850cb86ba1f1bdd305f94a135' }, h("label", { key: '03605c7ae69c6afeaab0cdfefa491008b49f331c', class: "block text-sm font-medium text-gray-600 mb-1" }, t.settings.borderInset), h("input", { key: '8cb1be4539c7a9677a6138279363e835048e789f', type: "number", class: "w-full bg-white rounded-4xl p-2", value: this.tempSettings.borderInset, onInput: (e) => this.handleInputChange("borderInset", parseFloat(e.target
-                .value)) }))), h("div", { key: '6774337949104e019f7fb0b028e4f000308f9aeb', class: "flex justify-end gap-4 mt-6" }, h("button", { key: 'c0ec044e5e67450e65c7fb478afc93e476d9450c', class: "px-4 py-2 bg-gray-200 rounded-4xl hover:bg-gray-300 transition-colors", onClick: this.handleClose }, "Cancel"), h("button", { key: 'c9727418d8e49647f8eb0aa11e6051997766becf', class: "px-4 py-2 bg-[#271200] text-white rounded-4xl hover:bg-gray-500 transition-colors", onClick: this.handleSave }, "Save Changes")))));
+        return (h("div", { key: '69815a7efeb8f52a5d3422b06dc212a50b9f405b', class: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" }, h("div", { key: 'ed368ae8d0d6d2946c5a4ecc559f018521e1bce8', class: "bg-primary rounded-4xl p-6 w-full max-w-md" }, h("div", { key: 'f51088beb4d8445503fa08c3dd2a2b8c886f79ce', class: "flex justify-between items-center mb-6" }, h("h2", { key: 'a9bcb7b893961bbf2032c1b8a110624ec3a95e65', class: "text-xl font-semibold" }, "Settings"), h("button", { key: '47d4dc1cc0789485da95218becfc921ae5db177c', class: "p-2 hover:bg-hover rounded-full transition-colors", onClick: this.handleClose }, h("svg", { key: '42923fdd6d5c96ceee98bdddca2e7e6bda42dcfa', 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: '751c5243b5b785a21131b02a3142c6d46e0cffeb', x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { key: 'e26bd2a1b20aa718ced6183130e962c9dbd159b9', x1: "6", y1: "6", x2: "18", y2: "18" })))), h("div", { key: '560be61d72a1a98eea4d2788d49eee7a3107470d', class: "space-y-4" }, h("div", { key: '2e6422d175602e7a53eb3d629c37c47980c08da1' }, h("label", { key: '56a2f53ae26c3e7d90519b85f3466604ea46b469', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.language), h("select", { key: 'ab444c024a2dfefd46ba6fb09878e75d52db9478', class: "w-full bg-muted rounded-4xl p-2", onInput: (e) => this.handleInputChange("language", e.target
+                .value) }, h("option", { key: 'eb6b88689002c9f379af1c157f19fc123dbe7b4f', value: "en", selected: this.tempSettings.language ===
+                "en" }, "English"), h("option", { key: '2203e1615212fdf96463185e9a06df2f65898dc4', value: "es", selected: this.tempSettings.language ===
+                "es" }, "Espa\u00F1ol"), h("option", { key: 'ec91327e0070e0045079f63476aab7ea90da43ee', value: "de", selected: this.tempSettings.language ===
+                "de" }, "Deutsch"))), h("div", { key: 'ff8d7f227f166862303f666bea321d13b50e79c8' }, h("label", { key: '778fefd538acc3601d8733e8b10e08c7f749cfb2', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.rowSpacing), h("input", { key: 'ebd39dcc7fbb5bb6e806b6482fe5a22730dcc31d', 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: '0f770fa12c399fb1282a95cdaa873d3c4c4591f8' }, h("label", { key: 'bcfdb9dc84393770c93a982e34e38198f2cb59df', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.columnSpacing), h("input", { key: '574dc95db00f9c1725004e6c074e537f1ba51b60', 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: '286a6121aace1b97724bf7c88975a172f0fe1a68' }, h("label", { key: '96b65a6ce1591e0188544db161e018ce90f151e2', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.borderInset), h("input", { key: '264728330a50df7b3ba02a568ff683dce895b2b3', 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: 'd73a232b24082a9c0bef75612184c71f52c59139', class: "flex justify-end gap-4 mt-6" }, h("button", { key: '981039537b08be95b180cc6672725f6b2a5c9281', class: "px-4 py-2 bg-surface rounded-4xl hover:bg-surface-hover transition-colors", onClick: this.handleClose }, "Cancel"), h("button", { key: '7f30b8e87d03e4ab2afe77c0579052993b57d3d3', 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/settings/settings.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"settings.js","sourceRoot":"","sources":["../../../src/components/settings/settings.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, State } from \"@stencil/core\";\r\nimport { Settings, state } from \"../../store\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { Language } from \"../../types/lang\";\r\n\r\n@Component({\r\n tag: \"settings-modal\",\r\n styleUrl: \"../../output.css\",\r\n shadow: false,\r\n})\r\nexport class SettingsModal {\r\n @Prop()\r\n settings: Settings;\r\n\r\n @State()\r\n private tempSettings: Settings;\r\n\r\n @Event()\r\n close: EventEmitter<void>;\r\n\r\n @Event()\r\n save: EventEmitter<Settings>;\r\n\r\n componentWillLoad() {\r\n this.tempSettings = { ...this.settings };\r\n }\r\n\r\n private handleClose = () => {\r\n if (\r\n JSON.stringify(this.tempSettings) !== JSON.stringify(this.settings)\r\n ) {\r\n if (\r\n confirm(\r\n \"Are you sure you want to close without saving your changes?\",\r\n )\r\n ) {\r\n this.close.emit();\r\n }\r\n } else {\r\n this.close.emit();\r\n }\r\n };\r\n\r\n private handleSave = () => {\r\n this.save.emit(this.tempSettings);\r\n this.close.emit();\r\n };\r\n\r\n private handleInputChange = (\r\n key: keyof Settings,\r\n value: number \| Language,\r\n ) => {\r\n this.tempSettings = {\r\n ...this.tempSettings,\r\n [key]: value,\r\n };\r\n };\r\n\r\n render() {\r\n const t = getLanguageStrings(state.settings.language);\r\n return (\r\n <div class=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50\">\r\n <div class=\"bg-[#f3ebda] rounded-4xl p-6 w-full max-w-md\">\r\n <div class=\"flex justify-between items-center mb-6\">\r\n <h2 class=\"text-xl font-semibold\">Settings</h2>\r\n <button\r\n class=\"p-2 hover:bg-gray-200 rounded-full transition-colors\"\r\n onClick={this.handleClose}\r\n >\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <div class=\"space-y-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n {t.settings.language}\r\n </label>\r\n <select\r\n class=\"w-full bg-white rounded-4xl p-2\"\r\n onInput={(e) =>\r\n this.handleInputChange(\r\n \"language\",\r\n (e.target as HTMLSelectElement)\r\n .value as Language,\r\n )}\r\n >\r\n <option\r\n value=\"en\"\r\n selected={this.tempSettings.language ===\r\n \"en\"}\r\n >\r\n English\r\n </option>\r\n <option\r\n value=\"es\"\r\n selected={this.tempSettings.language ===\r\n \"es\"}\r\n >\r\n Español\r\n </option>\r\n <option\r\n value=\"de\"\r\n selected={this.tempSettings.language ===\r\n \"de\"}\r\n >\r\n Deutsch\r\n </option>\r\n </select>\r\n </div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n {t.settings.rowSpacing}\r\n </label>\r\n <input\r\n type=\"number\"\r\n class=\"w-full bg-white rounded-4xl p-2\"\r\n value={this.tempSettings.rowSpacing}\r\n onInput={(e) =>\r\n this.handleInputChange(\r\n \"rowSpacing\",\r\n parseFloat(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n ),\r\n )}\r\n />\r\n </div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n {t.settings.columnSpacing}\r\n </label>\r\n <input\r\n type=\"number\"\r\n class=\"w-full bg-white rounded-4xl p-2\"\r\n value={this.tempSettings.columnSpacing}\r\n onInput={(e) =>\r\n this.handleInputChange(\r\n \"columnSpacing\",\r\n parseFloat(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n ),\r\n )}\r\n />\r\n </div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n {t.settings.borderInset}\r\n </label>\r\n <input\r\n type=\"number\"\r\n class=\"w-full bg-white rounded-4xl p-2\"\r\n value={this.tempSettings.borderInset}\r\n onInput={(e) =>\r\n this.handleInputChange(\r\n \"borderInset\",\r\n parseFloat(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n ),\r\n )}\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex justify-end gap-4 mt-6\">\r\n <button\r\n class=\"px-4 py-2 bg-gray-200 rounded-4xl hover:bg-gray-300 transition-colors\"\r\n onClick={this.handleClose}\r\n >\r\n Cancel\r\n </button>\r\n <button\r\n class=\"px-4 py-2 bg-[#271200] text-white rounded-4xl hover:bg-gray-500 transition-colors\"\r\n onClick={this.handleSave}\r\n >\r\n Save Changes\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"settings.js","sourceRoot":"","sources":["../../../src/components/settings/settings.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, State } from \"@stencil/core\";\r\nimport { Settings, state } from \"../../store\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { Language } from \"../../types/lang\";\r\n\r\n@Component({\r\n tag: \"settings-modal\",\r\n styleUrl: \"../../output.css\",\r\n shadow: false,\r\n})\r\nexport class SettingsModal {\r\n @Prop()\r\n settings: Settings;\r\n\r\n @State()\r\n private tempSettings: Settings;\r\n\r\n @Event()\r\n close: EventEmitter<void>;\r\n\r\n @Event()\r\n save: EventEmitter<Settings>;\r\n\r\n componentWillLoad() {\r\n this.tempSettings = { ...this.settings };\r\n }\r\n\r\n private handleClose = () => {\r\n if (\r\n JSON.stringify(this.tempSettings) !== JSON.stringify(this.settings)\r\n ) {\r\n if (\r\n confirm(\r\n \"Are you sure you want to close without saving your changes?\",\r\n )\r\n ) {\r\n this.close.emit();\r\n }\r\n } else {\r\n this.close.emit();\r\n }\r\n };\r\n\r\n private handleSave = () => {\r\n this.save.emit(this.tempSettings);\r\n this.close.emit();\r\n };\r\n\r\n private handleInputChange = (\r\n key: keyof Settings,\r\n value: number \| Language,\r\n ) => {\r\n this.tempSettings = {\r\n ...this.tempSettings,\r\n [key]: value,\r\n };\r\n };\r\n\r\n render() {\r\n const t = getLanguageStrings(state.settings.language);\r\n return (\r\n <div class=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50\">\r\n <div class=\"bg-primary rounded-4xl p-6 w-full max-w-md\">\r\n <div class=\"flex justify-between items-center mb-6\">\r\n <h2 class=\"text-xl font-semibold\">Settings</h2>\r\n <button\r\n class=\"p-2 hover:bg-hover rounded-full transition-colors\"\r\n onClick={this.handleClose}\r\n >\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <div class=\"space-y-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-text-muted mb-1\">\r\n {t.settings.language}\r\n </label>\r\n <select\r\n class=\"w-full bg-muted rounded-4xl p-2\"\r\n onInput={(e) =>\r\n this.handleInputChange(\r\n \"language\",\r\n (e.target as HTMLSelectElement)\r\n .value as Language,\r\n )}\r\n >\r\n <option\r\n value=\"en\"\r\n selected={this.tempSettings.language ===\r\n \"en\"}\r\n >\r\n English\r\n </option>\r\n <option\r\n value=\"es\"\r\n selected={this.tempSettings.language ===\r\n \"es\"}\r\n >\r\n Español\r\n </option>\r\n <option\r\n value=\"de\"\r\n selected={this.tempSettings.language ===\r\n \"de\"}\r\n >\r\n Deutsch\r\n </option>\r\n </select>\r\n </div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-text-muted mb-1\">\r\n {t.settings.rowSpacing}\r\n </label>\r\n <input\r\n type=\"number\"\r\n class=\"w-full bg-muted rounded-4xl p-2\"\r\n value={this.tempSettings.rowSpacing}\r\n onInput={(e) =>\r\n this.handleInputChange(\r\n \"rowSpacing\",\r\n parseFloat(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n ),\r\n )}\r\n />\r\n </div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-text-muted mb-1\">\r\n {t.settings.columnSpacing}\r\n </label>\r\n <input\r\n type=\"number\"\r\n class=\"w-full bg-muted rounded-4xl p-2\"\r\n value={this.tempSettings.columnSpacing}\r\n onInput={(e) =>\r\n this.handleInputChange(\r\n \"columnSpacing\",\r\n parseFloat(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n ),\r\n )}\r\n />\r\n </div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-text-muted mb-1\">\r\n {t.settings.borderInset}\r\n </label>\r\n <input\r\n type=\"number\"\r\n class=\"w-full bg-muted rounded-4xl p-2\"\r\n value={this.tempSettings.borderInset}\r\n onInput={(e) =>\r\n this.handleInputChange(\r\n \"borderInset\",\r\n parseFloat(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n ),\r\n )}\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex justify-end gap-4 mt-6\">\r\n <button\r\n class=\"px-4 py-2 bg-surface rounded-4xl hover:bg-surface-hover transition-colors\"\r\n onClick={this.handleClose}\r\n >\r\n Cancel\r\n </button>\r\n <button\r\n class=\"px-4 py-2 bg-secondary text-muted rounded-4xl hover:bg-text-secondary transition-colors\"\r\n onClick={this.handleSave}\r\n >\r\n Save Changes\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/solar-calculator/solar-calculator.js CHANGED Viewed

@@ -54,7 +54,7 @@ export class SolarCalculator {
         });
     }
     render() {
-        return (h("div", { key: 'caa09baccc8825a26b3917be5123d0d25d4e55b0', class: "flex flex-col w-full h-full p-3" }, h("div", { key: '770f517caa0a3e92d4233b1d5e3d29a84b4674be', class: "pb-3" }, h("div", { key: '1e35a2da7b80bd678eaffb81f01baa18ca7a72cf', class: "relative" }, h("i", { key: 'e2a5867e28e59c83c9ba52e25745b5c6de185e20', "data-lucide": "search", class: "absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 " }), h("input", { key: 'ef54e7eb669fcf89bf742fe7cd50bc7af5810665', ref: (el) => this.inputElement = el, type: "text", placeholder: "Search for a location", class: "w-full pl-10 pr-4 py-2 border border-gray-300 rounded-4xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white" }))), this.buildingInsights && (h("div", { key: 'ded8f8896117935be39ef2da2e9afc770131125f' }, "buildingInsights", h("div", { key: '4bcf38d36a48ed699c66b896434bb6d35d90c61a' }, JSON.stringify(this.buildingInsights))))));
+        return (h("div", { key: 'caa09baccc8825a26b3917be5123d0d25d4e55b0', class: "flex flex-col w-full h-full p-3" }, h("div", { key: '770f517caa0a3e92d4233b1d5e3d29a84b4674be', class: "pb-3" }, h("div", { key: '1e35a2da7b80bd678eaffb81f01baa18ca7a72cf', class: "relative" }, h("i", { key: 'e5cc8ff44508ace9147e90041fe3e817da9eff5d', "data-lucide": "search", class: "absolute left-3 top-1/2 transform -translate-y-1/2 text-text-placeholder " }), h("input", { key: '568e1e0dbdb207ca496062302bee33d4c3e726d6', ref: (el) => this.inputElement = el, type: "text", placeholder: "Search for a location", class: "w-full pl-10 pr-4 py-2 border border-border rounded-4xl focus:outline-none focus:ring-2 focus:ring-info bg-muted" }))), this.buildingInsights && (h("div", { key: 'f3669e7ef307e641867f18cdb07523a7ee4c5838' }, "buildingInsights", h("div", { key: '6fc1aa4732666fcb25c61c41871c0769897317d8' }, JSON.stringify(this.buildingInsights))))));
     }
     static get is() { return "solar-calculator"; }
     static get originalStyleUrls() {

package/dist/collection/components/solar-calculator/solar-calculator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"solar-calculator.js","sourceRoot":"","sources":["../../../src/components/solar-calculator/solar-calculator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE/D,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAO7C,MAAM,OAAO,eAAe;IAExB,MAAM,GAAW,GAAG,CAAC,mBAAmB,CAAC;IAGzC,gBAAgB,CAA2B;IAE3C,QAAQ,GAAY,KAAK,CAAC;IAE1B,YAAY,GAA2C,IAAI,CAAC;IAE5D,KAAK,GAA0C,IAAI,CAAC;IAE5C,YAAY,CAAoB;IAExC,iBAAiB;QACb,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAChC,CAAC;IAED,gBAAgB;QACZ,WAAW,CAAC;YACR,KAAK,EAAE;gBACH,MAAM;aACT;YACD,QAAQ,EAAE,aAAa;SAC1B,CAAC,CAAC;IACP,CAAC;IAED,KAAK,CAAC,mBAAmB;QACrB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YACd,OAAO;QACX,CAAC;QACD,IAAI,CAAC,gBAAgB,GAAG,MAAM,cAAc,CACxC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,EAAE,EAClC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,EAAE,EAClC,IAAI,CAAC,MAAM,CACd,CAAC;QACF,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACzB,KAAK,CAAC,yDAAyD,CAAC,CAAC;QACrE,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,CAAC;aACxB,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,4BAA4B,EAAE,KAAK,CAAC,CAAC;QACvD,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,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAE,CAAC;YAC5C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC/B,CAAC,CAAC,CAAC;IACP,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAC,iCAAiC;YACxC,4DAAK,KAAK,EAAC,MAAM;gBACb,4DAAK,KAAK,EAAC,UAAU;oBACjB,yEACgB,QAAQ,EACpB,KAAK,EAAC,~~mEAAmE~~,~~GAC3E~~;oBACF,8DACI,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,EACnC,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,uBAAuB,EACnC,KAAK,EAAC,~~wHAAwH~~,~~GAChI~~,CACA,CACJ;YACL,IAAI,CAAC,gBAAgB,IAAI,CACtB;;gBAEI,8DACK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,CACpC,CAIJ,CACT,CACC,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Env, h, Prop, State } from \"@stencil/core\";\r\nimport { BuildingInsightsResponse } from \"../../utils/solar\";\r\nimport { Loader } from \"@googlemaps/js-api-loader\";\r\nimport { fetchSolarData } from \"../../utils/api\";\r\nimport { createIcons, Search } from \"lucide\";\r\n\r\n@Component({\r\n tag: \"solar-calculator\",\r\n styleUrl: \"../../output.css\",\r\n shadow: false,\r\n})\r\nexport class SolarCalculator {\r\n @Prop()\r\n apiKey: string = Env.GOOGLE_MAPS_API_KEY;\r\n\r\n @State()\r\n buildingInsights: BuildingInsightsResponse;\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\r\n private inputElement?: HTMLInputElement;\r\n\r\n componentWillLoad() {\r\n this.loadGoogleMapsScript();\r\n }\r\n\r\n componentDidLoad() {\r\n createIcons({\r\n icons: {\r\n Search,\r\n },\r\n nameAttr: \"data-lucide\",\r\n });\r\n }\r\n\r\n async getBuildingInsights() {\r\n if (!this.place) {\r\n return;\r\n }\r\n this.buildingInsights = await fetchSolarData(\r\n this.place.geometry.location.lat(),\r\n this.place.geometry.location.lng(),\r\n this.apiKey,\r\n );\r\n if (!this.buildingInsights) {\r\n alert(\"No building insights found. Please enter them manually.\");\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\"],\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.place = place;\r\n this.getBuildingInsights();\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"flex flex-col w-full h-full p-3\">\r\n <div class=\"pb-3\">\r\n <div class=\"relative\">\r\n <i\r\n data-lucide=\"search\"\r\n class=\"absolute left-3 top-1/2 transform -translate-y-1/2 text-~~gray~~-~~400~~ \"\r\n />\r\n <input\r\n ref={(el) => this.inputElement = el}\r\n type=\"text\"\r\n placeholder=\"Search for a location\"\r\n class=\"w-full pl-10 pr-4 py-2 border border-~~gray-300~~ rounded-4xl focus:outline-none focus:ring-2 focus:ring-~~blue-500~~ bg-~~white~~\"\r\n />\r\n </div>\r\n </div>\r\n {this.buildingInsights && (\r\n <div>\r\n buildingInsights\r\n <div>\r\n {JSON.stringify(this.buildingInsights)}\r\n </div>\r\n {/* Consumption /}\r\n {/ Configuration (roof, orientation, battery, etc) /}\r\n {/ Results (suggested system size, cost, etc.) */}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"solar-calculator.js","sourceRoot":"","sources":["../../../src/components/solar-calculator/solar-calculator.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Env, h, Prop, State } from \"@stencil/core\";\r\nimport { BuildingInsightsResponse } from \"../../utils/solar\";\r\nimport { Loader } from \"@googlemaps/js-api-loader\";\r\nimport { fetchSolarData } from \"../../utils/api\";\r\nimport { createIcons, Search } from \"lucide\";\r\n\r\n@Component({\r\n tag: \"solar-calculator\",\r\n styleUrl: \"../../output.css\",\r\n shadow: false,\r\n})\r\nexport class SolarCalculator {\r\n @Prop()\r\n apiKey: string = Env.GOOGLE_MAPS_API_KEY;\r\n\r\n @State()\r\n buildingInsights: BuildingInsightsResponse;\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\r\n private inputElement?: HTMLInputElement;\r\n\r\n componentWillLoad() {\r\n this.loadGoogleMapsScript();\r\n }\r\n\r\n componentDidLoad() {\r\n createIcons({\r\n icons: {\r\n Search,\r\n },\r\n nameAttr: \"data-lucide\",\r\n });\r\n }\r\n\r\n async getBuildingInsights() {\r\n if (!this.place) {\r\n return;\r\n }\r\n this.buildingInsights = await fetchSolarData(\r\n this.place.geometry.location.lat(),\r\n this.place.geometry.location.lng(),\r\n this.apiKey,\r\n );\r\n if (!this.buildingInsights) {\r\n alert(\"No building insights found. Please enter them manually.\");\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\"],\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.place = place;\r\n this.getBuildingInsights();\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"flex flex-col w-full h-full p-3\">\r\n <div class=\"pb-3\">\r\n <div class=\"relative\">\r\n <i\r\n data-lucide=\"search\"\r\n class=\"absolute left-3 top-1/2 transform -translate-y-1/2 text-text-placeholder \"\r\n />\r\n <input\r\n ref={(el) => this.inputElement = el}\r\n type=\"text\"\r\n placeholder=\"Search for a location\"\r\n class=\"w-full pl-10 pr-4 py-2 border border-border rounded-4xl focus:outline-none focus:ring-2 focus:ring-info bg-muted\"\r\n />\r\n </div>\r\n </div>\r\n {this.buildingInsights && (\r\n <div>\r\n buildingInsights\r\n <div>\r\n {JSON.stringify(this.buildingInsights)}\r\n </div>\r\n {/* Consumption /}\r\n {/ Configuration (roof, orientation, battery, etc) /}\r\n {/ Results (suggested system size, cost, etc.) */}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

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

@@ -2,10 +2,46 @@ import { Env, h } from "@stencil/core";
 import { Loader } from "@googlemaps/js-api-loader";
 import { getLanguageStrings } from "../../utils/lang/general";
 import { onChange, state } from "../../store";
+import { applyThemeGlobally } from "../../utils/theme";
 export class SolarExpert {
     el;
     apiKey = Env.GOOGLE_MAPS_API_KEY;
     language = "en";
+    colorScheme = null;
+    // {
+    //     primary: "hsl(0 0% 100%)",
+    //     secondary: "hsl(0 0% 100%)",
+    //     tertiary: "hsl(0 0% 100%)",
+    //     muted: "hsl(0 0% 100%)",
+    //     error: "hsl(0 0% 100%)",
+    //     // secondary: "hsl(180 100% 25%)",
+    //     // tertiary: "hsl(24 100% 18%)",
+    //     // muted: "hsl(0 0% 85%)",
+    //     // error: "hsl(240 75% 29%)",
+    //     primaryForeground: "hsl(0 0% 100%)",
+    //     secondaryForeground: "hsl(0 0% 100%)",
+    //     tertiaryForeground: "hsl(0 0% 100%)",
+    //     mutedForeground: "hsl(0 0% 100%)",
+    //     errorForeground: "hsl(0 0% 100%)",
+    //     surface: "hsl(0 0% 100%)",
+    //     surfaceHover: "hsl(0 0% 100%)",
+    //     surfaceActive: "hsl(0 0% 100%)",
+    //     // Text colors
+    //     textMuted: "hsl(0 0% 100%)",
+    //     textSecondary: "hsl(0 0% 100%)",
+    //     textPlaceholder: "hsl(0 0% 100%)",
+    //     // Border colors
+    //     border: "hsl(0 0% 100%)",
+    //     borderLight: "hsl(0 0% 100%)",
+    //     // Status colors
+    //     success: "hsl(0 0% 100%)",
+    //     info: "hsl(0 0% 100%)",
+    //     // Interactive colors
+    //     hover: "hsl(0 0% 100%)",
+    //     hoverDark: "hsl(0 0% 100%)",
+    //     overlay: "hsl(0 0% 100%)",
+    //     tooltip: "hsl(0 0% 100%)",
+    // };
     latitude = 40.581614;
     longitude = -4.128423;
     isLoaded = false;
@@ -25,8 +61,16 @@ export class SolarExpert {
             }
         });
         state.settings.language = this.language;
-        state.isIOS = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-        console.log(state.isIOS);
+        state.isIOS = /iPhone|iPad|iPod/.test(navigator.userAgent);
+        this.applyTheme();
+    }
+    colorSchemeChanged() {
+        this.applyTheme();
+    }
+    applyTheme() {
+        if (this.colorScheme) {
+            applyThemeGlobally(this.colorScheme);
+        }
     }
     async loadGoogleMapsScript() {
         try {
@@ -74,10 +118,10 @@ export class SolarExpert {
     }
     render() {
         const t = getLanguageStrings(this.language);
-        return (h("div", { key: 'f084aa6d49f5c3ee21168d322d58de159b9ad7b9', class: "flex flex-col w-full h-full p-3 m-auto", id: "solar-calculator" }, this.showMapSelector
+        return (h("div", { key: '871984aabe069426250bc1118fa55a74f928144f', 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-3 flex flex-row gap-4 items-stretch w-full" }, h("div", { class: "relative flex-3" }, h("div", { class: "absolute left-3 top-1/2 transform -translate-y-1/2" }, 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-gray-300 rounded-4xl focus:ring-[#271200] bg-white h-full" })), h("button", { onClick: () => this.handleChooseOnMap(), class: "flex-1 pl-4 pr-4 py-2 border border-gray-300 bg-white rounded-4xl focus:ring-[#271200] hover:bg-[#271200] hover:text-white" }, t.mapSelector.chooseOnMap)), h("map-draw", { apiKey: this.apiKey })))));
+            : (h(h.Fragment, null, h("div", { class: "pb-3 flex flex-row gap-4 items-stretch w-full bg-primary" }, h("div", { class: "relative flex-3" }, h("div", { class: "absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground" }, 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-secondary hover:text-muted" }, t.mapSelector.chooseOnMap)), h("map-draw", { apiKey: this.apiKey })))));
     }
     static get is() { return "solar-expert"; }
     static get originalStyleUrls() {
@@ -137,6 +181,35 @@ export class SolarExpert {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "\"en\""
+            },
+            "colorScheme": {
+                "type": "unknown",
+                "attribute": "color-scheme",
+                "mutable": false,
+                "complexType": {
+                    "original": "Partial<ColorScheme> | null",
+                    "resolved": "{ primary?: string; primaryForeground?: string; secondary?: string; secondaryForeground?: string; tertiary?: string; tertiaryForeground?: string; muted?: string; mutedForeground?: string; error?: string; errorForeground?: string; surface?: string; surfaceHover?: string; surfaceActive?: string; textMuted?: string; textSecondary?: string; textPlaceholder?: string; border?: string; borderLight?: string; success?: string; info?: string; hover?: string; hoverDark?: string; overlay?: string; tooltip?: string; }",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "ColorScheme": {
+                            "location": "import",
+                            "path": "../../config",
+                            "id": "src/config.ts::ColorScheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
             }
         };
     }
@@ -151,5 +224,11 @@ export class SolarExpert {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "colorScheme",
+                "methodName": "colorSchemeChanged"
+            }];
+    }
 }
 //# sourceMappingURL=solar-expert.js.map

package/dist/collection/components/solar-expert/solar-expert.js.map CHANGED Viewed

	@@ -1 +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 } 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\n\r\n@Component({\r\n tag: \"solar-expert\",\r\n shadow: false,\r\n styleUrl: \"../../output.css\",\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\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 state.isIOS = /^((?!chrome\|android).)*safari/i.test(\r\n navigator.userAgent,\r\n );\r\n console.log(state.isIOS);\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\r\n this.scrollToMapDraw();\r\n });\r\n }\r\n\r\n private scrollToMapDraw() {\r\n if (state.isMobile) {\r\n const solarSystemFormElement = this.el.querySelector(\r\n \"solar-system-form\",\r\n );\r\n if (solarSystemFormElement) {\r\n solarSystemFormElement.scrollIntoView({ behavior: \"smooth\" });\r\n }\r\n } else {\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\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-3 flex flex-row gap-4 items-stretch w-full\">\r\n <div class=\"relative flex-3\">\r\n <div class=\"absolute left-3 top-1/2 transform -translate-y-1/2\">\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-gray-300 rounded-4xl focus:ring-[#271200] bg-white 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-gray-300 bg-white rounded-4xl focus:ring-[#271200] hover:bg-[#271200] hover:text-white\"\r\n >\r\n {t.mapSelector.chooseOnMap}\r\n </button>\r\n </div>\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"]}
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 } from \"../../config\";\r\nimport { applyThemeGlobally } from \"../../utils/theme\";\r\n\r\n@Component({\r\n tag: \"solar-expert\",\r\n shadow: false,\r\n styleUrl: \"../../output.css\",\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 state.isIOS = /iPhone\|iPad\|iPod/.test(navigator.userAgent);\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 applyThemeGlobally(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\r\n this.scrollToMapDraw();\r\n });\r\n }\r\n\r\n private scrollToMapDraw() {\r\n if (state.isMobile) {\r\n const solarSystemFormElement = this.el.querySelector(\r\n \"solar-system-form\",\r\n );\r\n if (solarSystemFormElement) {\r\n solarSystemFormElement.scrollIntoView({ behavior: \"smooth\" });\r\n }\r\n } else {\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\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-3 flex flex-row gap-4 items-stretch w-full bg-primary\">\r\n <div class=\"relative flex-3\">\r\n <div class=\"absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground\">\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-secondary hover:text-muted\"\r\n >\r\n {t.mapSelector.chooseOnMap}\r\n </button>\r\n </div>\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"]}