blue-chestnut-solar-expert 0.0.68 → 0.0.69

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

@@ -0,0 +1,127 @@
+import { h } from "@stencil/core";
+import { state } from "../../store";
+import { getLanguageStrings } from "../../utils/lang/general";
+export class SettingsModal {
+    settings;
+    tempSettings;
+    close;
+    save;
+    componentWillLoad() {
+        this.tempSettings = { ...this.settings };
+    }
+    handleClose = () => {
+        if (JSON.stringify(this.tempSettings) !== JSON.stringify(this.settings)) {
+            if (confirm("Are you sure you want to close without saving your changes?")) {
+                this.close.emit();
+            }
+        }
+        else {
+            this.close.emit();
+        }
+    };
+    handleSave = () => {
+        this.save.emit(this.tempSettings);
+        this.close.emit();
+    };
+    handleInputChange = (key, value) => {
+        this.tempSettings = {
+            ...this.tempSettings,
+            [key]: value,
+        };
+    };
+    render() {
+        const t = getLanguageStrings(state.settings.language);
+        return (h("div", { key: '0e3c77d79dee06a39d41ea8e54808ae7d2dfbc20', class: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" }, h("div", { key: '89bb78aa78d726b26167672f28e9092291fe50a6', class: "bg-primary rounded-4xl p-6 w-full max-w-md" }, h("div", { key: '7a627d2cb08cd2fe4ed2d972c970593ebad902b4', class: "flex justify-between items-center mb-6" }, h("h2", { key: '1e0b97819493f28da6e7347e66d9dd91085bfde9', class: "text-xl font-semibold" }, "Settings"), h("button", { key: 'cdaca129254e415958d35ab25104562fe2742982', class: "p-2 hover:bg-hover rounded-full transition-colors", onClick: this.handleClose }, h("svg", { key: '9d45841f50089683c0e27c7cf87b0cc9f9c6b08f', 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: '52a7f53b7ee2fd1428708a7082f4b8ad82337cf2', x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { key: 'b3d0a74200fbca9bc2bc64ab7f0daa8cb63e8e8f', x1: "6", y1: "6", x2: "18", y2: "18" })))), h("div", { key: 'b632724625ef74b606b70586c0eab14f81ca6539', class: "space-y-4" }, h("div", { key: '5a15f11410211da1e5b1765d3b8254d9cb57331e' }, h("h3", { key: '5739e208a3f4656667b615cfe34e973ce57a3d8c', class: "text-sm font-medium text-text-muted mb-1" }, "Debug Information"), h("p", { key: 'e9351c9800425f2d2e3d8e9d262e75b9a55e5e6f', class: "text-sm text-text-muted mb-1" }, "state: ", JSON.stringify(state, null, 2)), h("p", { key: 'efd907bfe97e4372de78effde2529f9e6dce1de9', class: "text-sm text-text-muted mb-1" }, navigator.userAgent), h("p", { key: '2c1f03415528788ac4a122c9c4330d64642436a0', class: "text-sm text-text-muted mb-1" }, navigator.userAgent.indexOf("Safari")), h("p", { key: 'a5a2d0b3cd81f81fbf8efeef400e9ba4ed49be91', class: "text-sm text-text-muted mb-1" }, "maxTouchPoints: ", navigator.maxTouchPoints), h("p", { key: '84b20c7d094cc4fbadf79b35ff5070b71ef95a2b', class: "text-sm text-text-muted mb-1" }, "iPhone: ", navigator.userAgent.indexOf("iPhone")), h("p", { key: '0291e3fa7c2d5f3537d8be9cd22a3ae17c7e3996', class: "text-sm text-text-muted mb-1" }, "Mac OS: ", navigator.userAgent.indexOf("Mac OS"))), h("div", { key: '6e9d555787ee2460a3e5a7044c5583862fbbdb37' }, h("label", { key: '666b69e114688801fe718200e94f330b4f66bb4a', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.language), h("select", { key: 'b0dc0f28d16c983cadb33a0ed44a921ba7e2a765', class: "w-full bg-muted rounded-4xl p-2", onInput: (e) => this.handleInputChange("language", e.target
+                .value) }, h("option", { key: '997a1f570e1a477d515817b692950921b33df0d0', value: "en", selected: this.tempSettings.language ===
+                "en" }, "English"), h("option", { key: 'aef384455e1f8880602fdcd77a36ec6a1e49d4e2', value: "es", selected: this.tempSettings.language ===
+                "es" }, "Espa\u00F1ol"), h("option", { key: 'af08a8d991f69d1903b6cb198a3429eea4f1d95e', value: "de", selected: this.tempSettings.language ===
+                "de" }, "Deutsch"))), h("div", { key: '896ea8e61e6a4dec8c534bc42f71c4437b058c24' }, h("label", { key: '4d7c46a60f2f67ef8249f86f7762835b48ef4da3', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.rowSpacing), h("input", { key: 'abb0c8b9929745c8e066ceca3eca12f9de3c5496', 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: 'f671fce6864d0e187c0f814af1611c427e261c98' }, h("label", { key: '6859ffb44db1516c7e7cd5820c188814fcc34443', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.columnSpacing), h("input", { key: 'c9ebe64451106e9a45e13f909e4f26e571d83f82', 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: 'bb2454aeeaf6f924e59829d321210939de94ca5a' }, h("label", { key: '5929ad97adbf3048cba137de29e24c4cf13e13bc', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.borderInset), h("input", { key: '064deb239020bc56fbd810de4438b5e3418c16d6', 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: 'e9397a36adde815afea3b1855ad9d7cf422a6cf7', class: "flex justify-end gap-4 mt-6" }, h("button", { key: '25a764283801fabf1cb42ac7e3cc36a53ecdc1d8', class: "px-4 py-2 bg-surface rounded-4xl hover:bg-surface-hover transition-colors", onClick: this.handleClose }, "Cancel"), h("button", { key: '74ed7467fe3476f6fa4b82d56aba6f29350a7b87', 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() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "settings": {
+                "type": "unknown",
+                "attribute": "settings",
+                "mutable": false,
+                "complexType": {
+                    "original": "Settings",
+                    "resolved": "Settings",
+                    "references": {
+                        "Settings": {
+                            "location": "import",
+                            "path": "../../store",
+                            "id": "src/store.ts::Settings"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "tempSettings": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "save",
+                "name": "save",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Settings",
+                    "resolved": "Settings",
+                    "references": {
+                        "Settings": {
+                            "location": "import",
+                            "path": "../../store",
+                            "id": "src/store.ts::Settings"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=settings.js.map

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

@@ -0,0 +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                            <h3 class=\"text-sm font-medium text-text-muted mb-1\">\r\n                                Debug Information\r\n                            </h3>\r\n                            <p class=\"text-sm text-text-muted mb-1\">\r\n                                state: {JSON.stringify(state, null, 2)}\r\n                            </p>\r\n                            <p class=\"text-sm text-text-muted mb-1\">\r\n                                {navigator.userAgent}\r\n                            </p>\r\n                            <p class=\"text-sm text-text-muted mb-1\">\r\n                                {navigator.userAgent.indexOf(\"Safari\")}\r\n                            </p>\r\n                            <p class=\"text-sm text-text-muted mb-1\">\r\n                                maxTouchPoints: {navigator.maxTouchPoints}\r\n                            </p>\r\n                            <p class=\"text-sm text-text-muted mb-1\">\r\n                                iPhone: {navigator.userAgent.indexOf(\"iPhone\")}\r\n                            </p>\r\n                            <p class=\"text-sm text-text-muted mb-1\">\r\n                                Mac OS: {navigator.userAgent.indexOf(\"Mac OS\")}\r\n                            </p>\r\n                        </div>\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-expert/solar-expert.js

@@ -0,0 +1,241 @@
+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 { DEFAULT_COLOR_SCHEME } from "../../config";
+import { applyThemeGlobally, applyThemeToElement } 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;
+    autocomplete = null;
+    place = null;
+    showMapSelector = false;
+    inputElement;
+    componentWillLoad() {
+        state.isMobile =
+            /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
+                .test(navigator.userAgent) || window.innerWidth < 768;
+        this.loadGoogleMapsScript();
+        onChange("latitude", () => {
+            if (this.showMapSelector) {
+                this.showMapSelector = false;
+                this.scrollToMapDraw();
+            }
+        });
+        state.settings.language = this.language;
+        const isIPhone = navigator.userAgent.indexOf("iPhone") != -1;
+        const isMac = navigator.userAgent.indexOf("Mac OS") != -1;
+        state.isIOS = isIPhone || isMac;
+        if (!this.colorScheme) {
+            applyThemeToElement(this.el, DEFAULT_COLOR_SCHEME);
+            applyThemeGlobally(DEFAULT_COLOR_SCHEME);
+        }
+        this.applyTheme();
+    }
+    colorSchemeChanged() {
+        this.applyTheme();
+    }
+    applyTheme() {
+        if (this.colorScheme) {
+            // Apply theme globally for non-shadow components
+            applyThemeGlobally(this.colorScheme);
+            // Apply theme to this component's Shadow DOM host element
+            applyThemeToElement(this.el, this.colorScheme);
+        }
+    }
+    async loadGoogleMapsScript() {
+        try {
+            const loader = new Loader({
+                apiKey: this.apiKey,
+                libraries: ["places", "maps", "marker"],
+            });
+            const places = await loader.importLibrary("places");
+            this.isLoaded = true;
+            this.initializeAutocomplete(places);
+        }
+        catch (error) {
+            console.error("Error loading Google Maps: ", error);
+        }
+    }
+    initializeAutocomplete(places) {
+        if (!this.inputElement || !this.isLoaded)
+            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;
+            state.latitude = this.latitude;
+            state.longitude = this.longitude;
+            state.location = place?.name ?? null;
+            this.scrollToMapDraw();
+        });
+    }
+    scrollToMapDraw() {
+        const mapDrawElement = this.el.querySelector("map-draw");
+        if (mapDrawElement) {
+            mapDrawElement.scrollIntoView({ behavior: "smooth" });
+        }
+    }
+    handleChooseOnMap() {
+        this.showMapSelector = true;
+    }
+    render() {
+        const t = getLanguageStrings(this.language);
+        return (h("div", { key: '7ccb47dff2e8984ef657012dc04d3b14a8b15349', 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 ||
+                state.longitude === null) && (h("div", { class: "w-full pb-2" }, h("p", { class: "text-text-muted text-center flex items-center justify-center rounded-4xl px-4 py-2 w-full" }, t.mapDraw.noAddressSelected))), h("map-draw", { apiKey: this.apiKey })))));
+    }
+    static get is() { return "solar-expert"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "apiKey": {
+                "type": "string",
+                "attribute": "api-key",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "Env.GOOGLE_MAPS_API_KEY"
+            },
+            "language": {
+                "type": "string",
+                "attribute": "language",
+                "mutable": false,
+                "complexType": {
+                    "original": "Language",
+                    "resolved": "\"de\" | \"en\" | \"es\"",
+                    "references": {
+                        "Language": {
+                            "location": "import",
+                            "path": "../../types/lang",
+                            "id": "src/types/lang.ts::Language"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "latitude": {},
+            "longitude": {},
+            "isLoaded": {},
+            "autocomplete": {},
+            "place": {},
+            "showMapSelector": {}
+        };
+    }
+    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

@@ -0,0 +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            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"]}