blue-chestnut-solar-expert 0.0.67 → 0.0.68

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

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

@@ -1 +0,0 @@
-{"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

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

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