blue-chestnut-solar-expert 0.0.67 → 0.0.68

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

@@ -1,211 +0,0 @@
-import { h } from "@stencil/core";
-import { getLanguageStrings } from "../../utils/lang/general";
-import { state } from "../../store";
-import { azimuthToCardinal } from "../../utils/utils";
-export class PolygonInformation {
-    currentPolygon;
-    numberOfPanels;
-    handleAzimuthChange;
-    handlePitchChange;
-    calculateSolarPanels;
-    markAsFlatRoof;
-    currentTool;
-    getDisplayAzimuth(azimuth) {
-        return (Math.round(azimuth) + 90) % 360;
-    }
-    render() {
-        const t = getLanguageStrings(state.settings.language);
-        // console.log(this.currentPolygon);
-        return (h("div", { key: '3a990afcf454f56f227c7af7c17602edca65a1d4', class: "flex gap-4 flex-row justify-center items-center w-full rounded-4xl pb-2", style: {
-                border: "1px solid var(--color-border)",
-            } }, h("div", { key: '1437eb984f29bfd29c568ec1f7b6e03c8166c3bb', class: "w-full bg-primary rounded-4xl p-3 text-secondary" }, h("h3", { key: 'b5bef8848258179149295c739b1c6bb335d850a9', class: "text-lg font-semibold mb-4 text-center" }, t.mapDraw.information), h("polygon-buttons", { key: '5ed316c2783784f78d910dd26f588a3d1f2aead0', calculateSolarPanels: this.calculateSolarPanels, markAsFlatRoof: this.markAsFlatRoof, currentTool: this.currentTool }), this.currentPolygon?.area
-            ? (h("div", { class: "space-y-4" }, h("div", null, h("div", { class: "grid grid-cols-2 gap-2" }, h("div", null, h("h4", { class: "text-sm font-medium text-text-muted" }, t.mapDraw.area), h("p", { class: "text-lg" }, this.currentPolygon
-                ?.area
-                .toFixed(0), " m\u00B2")), h("div", null, h("div", null, h("h4", { class: "text-sm font-medium text-text-muted" }, t.mapDraw.panels), h("p", { class: "text-lg" }, this.numberOfPanels ?? 0))))), h("div", { class: "grid grid-cols-1 md:grid-cols-2 gap-4" }, h("div", null, h("h4", { class: "text-sm font-medium text-text-muted" }, t.mapDraw.azimuth), h("div", { class: "flex gap-2 flex-row justify-start bg-muted rounded-4xl p-2" }, h("input", { class: "text-lg w-full", onKeyDown: (e) => {
-                    if (e.key === "Enter") {
-                        this.handleAzimuthChange(e);
-                        e.target
-                            .blur();
-                    }
-                }, value: this.getDisplayAzimuth(this.currentPolygon
-                    ?.azimuth ??
-                    0) }), "(", azimuthToCardinal(this.getDisplayAzimuth(this.currentPolygon.azimuth)), ")"), !state.isIOS && (h("input", { type: "range", min: "0", max: "360", step: "1", class: "input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-muted", value: this.getDisplayAzimuth(this.currentPolygon
-                    ?.azimuth ??
-                    0), onInput: (e) => {
-                    this.handleAzimuthChange(e);
-                } }))), h("div", null, h("h4", { class: "text-sm font-medium text-text-muted md:pl-2" }, t.mapDraw.pitch), h("div", { class: "flex gap-2 flex-row justify-start bg-muted rounded-4xl p-2" }, h("input", { class: "text-lg w-full", onKeyDown: (e) => {
-                    if (e.key === "Enter") {
-                        this.handlePitchChange(e);
-                        e.target
-                            .blur();
-                    }
-                }, value: Math.round(this.currentPolygon
-                    ?.pitch ??
-                    0) }), "\u00B0"), !state.isIOS && (h("input", { type: "range", min: "0", max: "90", step: "1", class: "input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-muted", value: Math.round(this.currentPolygon
-                    ?.pitch ??
-                    0), onInput: (e) => {
-                    this.handlePitchChange(e);
-                } }))))))
-            : (h("p", { class: "text-text-secondary text-center" }, t.mapDraw.noPolygonSelected)))));
-    }
-    static get is() { return "polygon-information"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["../../output.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["../../output.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "currentPolygon": {
-                "type": "unknown",
-                "attribute": "current-polygon",
-                "mutable": false,
-                "complexType": {
-                    "original": "Polygon",
-                    "resolved": "Polygon",
-                    "references": {
-                        "Polygon": {
-                            "location": "import",
-                            "path": "harmonia-types",
-                            "id": "../../../harmonia/packages/harmonia-types/dist/index.d.ts::Polygon"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "numberOfPanels": {
-                "type": "number",
-                "attribute": "number-of-panels",
-                "mutable": false,
-                "complexType": {
-                    "original": "number | undefined",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "handleAzimuthChange": {
-                "type": "unknown",
-                "attribute": "handle-azimuth-change",
-                "mutable": false,
-                "complexType": {
-                    "original": "(event: Event) => void",
-                    "resolved": "(event: Event) => void",
-                    "references": {
-                        "Event": {
-                            "location": "global",
-                            "id": "global::Event"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "handlePitchChange": {
-                "type": "unknown",
-                "attribute": "handle-pitch-change",
-                "mutable": false,
-                "complexType": {
-                    "original": "(event: Event) => void",
-                    "resolved": "(event: Event) => void",
-                    "references": {
-                        "Event": {
-                            "location": "global",
-                            "id": "global::Event"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "calculateSolarPanels": {
-                "type": "unknown",
-                "attribute": "calculate-solar-panels",
-                "mutable": false,
-                "complexType": {
-                    "original": "() => void",
-                    "resolved": "() => void",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "markAsFlatRoof": {
-                "type": "unknown",
-                "attribute": "mark-as-flat-roof",
-                "mutable": false,
-                "complexType": {
-                    "original": "() => void",
-                    "resolved": "() => void",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "currentTool": {
-                "type": "string",
-                "attribute": "current-tool",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            }
-        };
-    }
-}
-//# sourceMappingURL=polygon-information.js.map

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

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

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

@@ -1,108 +0,0 @@
-import { h } from "@stencil/core";
-import { getLanguageStrings } from "../../utils/lang/general";
-import { state } from "../../store";
-import { tools, undoTool } from "../../utils/render/tools";
-export class ToolBox {
-    currentTool;
-    undoCallback;
-    onToolSelect;
-    render() {
-        const t = getLanguageStrings(state.settings.language);
-        const undoToolStrings = t.mapDraw.tools[undoTool.name];
-        return (h("div", { key: 'e94d293934925254e8113349f12d9a5e22e0cbdb', class: "flex gap-1 sm:gap-4 rounded-4xl bg-primary pt-3 pl-3 pr-3 flex-wrap justify-center w-full text-xs" }, tools.map((tool) => {
-            const toolStrings = t.mapDraw.tools[tool.name];
-            return (h("button", { class: `px-3 py-2 rounded-4xl transition-colors duration-200 ${this.currentTool.name === tool.name
-                    ? "bg-secondary hover:bg-secondary/80"
-                    : "bg-primary hover:bg-muted"}`, style: {
-                    color: this.currentTool.name === tool.name
-                        ? "var(--color-secondary-foreground)"
-                        : "var(--color-primary-foreground)",
-                    border: "1px solid var(--color-border)",
-                }, "aria-label": toolStrings.ariaLabel, title: toolStrings.explanation, onClick: () => this.onToolSelect(tool) }, h("div", { class: "flex items-center gap-1 flex-col" }, h("icon-selector", { name: tool.icon }), h("span", null, toolStrings.name))));
-        }), h("button", { key: '500a34954e8d1ae4d2ab2083881287700db8cdd0', class: `px-3 py-2 rounded-4xl transition-colors duration-200 bg-primary hover:bg-muted text-primary-foreground focus:border-2 focus:border-secondary`, style: {
-                border: "1px solid var(--color-border)",
-            }, "aria-label": undoToolStrings.ariaLabel, title: undoToolStrings.explanation, onClick: () => this.undoCallback() }, h("div", { key: '9969b9c6385c876ea285c74161da6b4968c60137', class: "flex items-center gap-1 flex-col" }, h("undo-icon", { key: '1ec057295769ee14cb4d230c2b9938bd5a698e69' }), h("span", { key: '902320295d8d8a27ac95608cda564f6b193a43f2' }, undoToolStrings.name)))));
-    }
-    static get is() { return "tool-box"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["../../output.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["../../output.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "currentTool": {
-                "type": "unknown",
-                "attribute": "current-tool",
-                "mutable": false,
-                "complexType": {
-                    "original": "Tool",
-                    "resolved": "Tool",
-                    "references": {
-                        "Tool": {
-                            "location": "import",
-                            "path": "../../utils/render/tools",
-                            "id": "src/utils/render/tools.ts::Tool"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "undoCallback": {
-                "type": "unknown",
-                "attribute": "undo-callback",
-                "mutable": false,
-                "complexType": {
-                    "original": "() => void",
-                    "resolved": "() => void",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "onToolSelect": {
-                "type": "unknown",
-                "attribute": "on-tool-select",
-                "mutable": false,
-                "complexType": {
-                    "original": "(tool: Tool) => void",
-                    "resolved": "(tool: Tool) => void",
-                    "references": {
-                        "Tool": {
-                            "location": "import",
-                            "path": "../../utils/render/tools",
-                            "id": "src/utils/render/tools.ts::Tool"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            }
-        };
-    }
-}
-//# sourceMappingURL=tool-box.js.map

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

@@ -1 +0,0 @@
-{"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,mGAAmG;YACzG,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,oCAAoC;wBACtC,CAAC,CAAC,2BACV,EAAE,EACF,KAAK,EAAE;wBACH,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;4BACtC,CAAC,CAAC,mCAAmC;4BACrC,CAAC,CAAC,iCAAiC;wBACvC,MAAM,EAAE,+BAA+B;qBAC1C,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,8IAA8I,EACrJ,KAAK,EAAE;oBACH,MAAM,EAAE,+BAA+B;iBAC1C,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 gap-1 sm:gap-4 rounded-4xl bg-primary pt-3 pl-3 pr-3 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-3 py-2 rounded-4xl transition-colors duration-200 ${\r\n                                this.currentTool.name === tool.name\r\n                                    ? \"bg-secondary hover:bg-secondary/80\"\r\n                                    : \"bg-primary hover:bg-muted\"\r\n                            }`}\r\n                            style={{\r\n                                color: this.currentTool.name === tool.name\r\n                                    ? \"var(--color-secondary-foreground)\"\r\n                                    : \"var(--color-primary-foreground)\",\r\n                                border: \"1px solid var(--color-border)\",\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-3 py-2 rounded-4xl transition-colors duration-200 bg-primary hover:bg-muted text-primary-foreground focus:border-2 focus:border-secondary`}\r\n                    style={{\r\n                        border: \"1px solid var(--color-border)\",\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"]}

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

@@ -1,151 +0,0 @@
-import { h } from "@stencil/core";
-import { getLanguageStrings } from "../../utils/lang/general";
-import { state } from "../../store";
-export class TutorialComponent {
-    onClose;
-    title;
-    description;
-    videoSource;
-    isLoading = true;
-    dotCount = 0;
-    dotInterval;
-    handleCloseTutorial = () => {
-        if (this.onClose) {
-            this.onClose();
-        }
-    };
-    handleVideoLoadStart = () => {
-        this.isLoading = true;
-    };
-    handleVideoCanPlay = () => {
-        this.isLoading = false;
-        this.stopDotAnimation();
-    };
-    componentWillLoad() {
-        this.startDotAnimation();
-    }
-    componentWillUnload() {
-        this.stopDotAnimation();
-    }
-    startDotAnimation() {
-        this.dotInterval = window.setInterval(() => {
-            this.dotCount = (this.dotCount + 1) % 4; // 0, 1, 2, 3 (0 means no dots)
-        }, 500); // Change every 500ms
-    }
-    stopDotAnimation() {
-        if (this.dotInterval) {
-            clearInterval(this.dotInterval);
-            this.dotInterval = null;
-        }
-    }
-    render() {
-        const t = getLanguageStrings(state.settings.language);
-        // Use provided props or fall back to default values
-        const tutorialTitle = this.title || t.mapDraw.tutorial.title;
-        const tutorialDescription = this.description ||
-            t.mapDraw.tutorial.description;
-        const videoSrc = this.videoSource || "/assets/videos/tutorial1.mp4";
-        return (h("div", { key: '4d8eadf62e91dedb62771ea581da55e41fef8ba6', class: "fixed inset-0 z-50 flex items-center justify-center p-4" }, h("div", { key: 'f98a839567a9ea9fd9e4583b129904a544b5815a', class: "absolute inset-0", style: {
-                backgroundColor: "rgba(0, 0, 0, 0.5)",
-            } }), h("div", { key: 'e454645b2f39aec48b001bc0347ef7043116b59a', class: "relative z-10 w-full max-w-2xl max-h-full overflow-y-auto" }, h("div", { key: '346bc5df81beb2c52ae52e8d08f91f572549ed99', class: "flex flex-col gap-4 bg-primary rounded-4xl p-6" }, h("div", { key: 'ea42d2e74d6c366f020a0278f4c2db4946f91082', class: "w-full text-center space-y-4" }, h("h2", { key: 'a333c82a5893b1ca389486b9b2406ab61bd040b3', class: "text-2xl font-bold text-secondary" }, tutorialTitle), h("p", { key: '1f93f58abb1fed9576f12184cb21c7b5879f5f86', class: "text-text-secondary" }, tutorialDescription)), h("div", { key: '67a59580d90d5e1371d6077e31e283b4aa78e7b6', class: "flex items-start justify-center bg-primary rounded-4xl" }, h("div", { key: '0b323406964ed2a2363d9d5eb06c8739fc49c979', class: "relative flex items-center justify-center rounded-4xl bg-secondary overflow-hidden w-64 h-64" }, this.isLoading && (h("div", { key: '5d7db35fd3798ddf92e6a7d35cd69c9d1fd9ecb0', class: "absolute inset-0 flex items-center justify-center z-10" }, h("span", { key: '34d8524c3ec0a8c7ea90baa2cb0848d6ad649c21', class: "text-text-secondary" }, t.mapDraw.loading, ".".repeat(this.dotCount)))), h("video", { key: '9d936982efbfe0be018b29b3f14c235841847b5d', class: "w-full h-full object-contain rounded-4xl pointer-events-none", autoplay: true, muted: true, loop: true, playsinline: true, onLoadStart: this.handleVideoLoadStart, onCanPlay: this.handleVideoCanPlay, style: {
-                aspectRatio: "1/1",
-            } }, h("source", { key: '4c7a97c3cbf02eefb40aa05da6fa0abd716fa6ab', src: videoSrc, type: "video/mp4" }), "Your browser does not support the video tag."))), h("div", { key: 'ebad42931128c694d7ddfbd9908dc5ef27e7e649', class: "w-full flex justify-center" }, h("button", { key: 'ec11a758e0ff9bd6ae728a857d03a8bbba77bbcd', onClick: this.handleCloseTutorial, class: "px-6 py-3 bg-tertiary text-white rounded-lg font-medium hover:bg-tertiary/80 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-tertiary focus:ring-offset-0" }, t.mapDraw.tutorial.understood))))));
-    }
-    static get is() { return "tutorial-component"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["../../output.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["../../output.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "onClose": {
-                "type": "unknown",
-                "attribute": "on-close",
-                "mutable": false,
-                "complexType": {
-                    "original": "() => void",
-                    "resolved": "() => void",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "title": {
-                "type": "string",
-                "attribute": "title",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "description": {
-                "type": "string",
-                "attribute": "description",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "videoSource": {
-                "type": "string",
-                "attribute": "video-source",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isLoading": {},
-            "dotCount": {}
-        };
-    }
-}
-//# sourceMappingURL=tutorial-component.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tutorial-component.js","sourceRoot":"","sources":["../../../src/components/map-draw/tutorial-component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State } from \"@stencil/core\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { state } from \"../../store\";\r\n\r\n@Component({\r\n    tag: \"tutorial-component\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class TutorialComponent {\r\n    @Prop()\r\n    onClose: () => void;\r\n    @Prop()\r\n    title?: string;\r\n    @Prop()\r\n    description?: string;\r\n    @Prop()\r\n    videoSource?: string;\r\n\r\n    @State()\r\n    private isLoading = true;\r\n    @State()\r\n    private dotCount = 0;\r\n\r\n    private dotInterval: number;\r\n\r\n    private handleCloseTutorial = () => {\r\n        if (this.onClose) {\r\n            this.onClose();\r\n        }\r\n    };\r\n\r\n    private handleVideoLoadStart = () => {\r\n        this.isLoading = true;\r\n    };\r\n\r\n    private handleVideoCanPlay = () => {\r\n        this.isLoading = false;\r\n        this.stopDotAnimation();\r\n    };\r\n\r\n    componentWillLoad() {\r\n        this.startDotAnimation();\r\n    }\r\n\r\n    componentWillUnload() {\r\n        this.stopDotAnimation();\r\n    }\r\n\r\n    private startDotAnimation() {\r\n        this.dotInterval = window.setInterval(() => {\r\n            this.dotCount = (this.dotCount + 1) % 4; // 0, 1, 2, 3 (0 means no dots)\r\n        }, 500); // Change every 500ms\r\n    }\r\n\r\n    private stopDotAnimation() {\r\n        if (this.dotInterval) {\r\n            clearInterval(this.dotInterval);\r\n            this.dotInterval = null;\r\n        }\r\n    }\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n\r\n        // Use provided props or fall back to default values\r\n        const tutorialTitle = this.title || t.mapDraw.tutorial.title;\r\n        const tutorialDescription = this.description ||\r\n            t.mapDraw.tutorial.description;\r\n        const videoSrc = this.videoSource || \"/assets/videos/tutorial1.mp4\";\r\n\r\n        return (\r\n            <div class=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\r\n                {/* Backdrop */}\r\n                <div\r\n                    class=\"absolute inset-0\"\r\n                    style={{\r\n                        backgroundColor: \"rgba(0, 0, 0, 0.5)\",\r\n                    }}\r\n                />\r\n\r\n                {/* Scrollable content container */}\r\n                <div class=\"relative z-10 w-full max-w-2xl max-h-full overflow-y-auto\">\r\n                    <div class=\"flex flex-col gap-4 bg-primary rounded-4xl p-6\">\r\n                        {/* Title and Description */}\r\n                        <div class=\"w-full text-center space-y-4\">\r\n                            <h2 class=\"text-2xl font-bold text-secondary\">\r\n                                {tutorialTitle}\r\n                            </h2>\r\n                            <p class=\"text-text-secondary\">\r\n                                {tutorialDescription}\r\n                            </p>\r\n                        </div>\r\n\r\n                        {/* Tutorial Video Container */}\r\n                        <div class=\"flex items-start justify-center bg-primary rounded-4xl\">\r\n                            <div class=\"relative flex items-center justify-center rounded-4xl bg-secondary overflow-hidden w-64 h-64\">\r\n                                {/* Loading Spinner */}\r\n                                {this.isLoading && (\r\n                                    <div class=\"absolute inset-0 flex items-center justify-center z-10\">\r\n                                        <span class=\"text-text-secondary\">\r\n                                            {t.mapDraw.loading}\r\n                                            {\".\".repeat(this.dotCount)}\r\n                                        </span>\r\n                                    </div>\r\n                                )}\r\n\r\n                                <video\r\n                                    class=\"w-full h-full object-contain rounded-4xl pointer-events-none\"\r\n                                    autoplay\r\n                                    muted\r\n                                    loop\r\n                                    playsinline\r\n                                    onLoadStart={this.handleVideoLoadStart}\r\n                                    onCanPlay={this.handleVideoCanPlay}\r\n                                    style={{\r\n                                        aspectRatio: \"1/1\",\r\n                                    }}\r\n                                >\r\n                                    <source\r\n                                        src={videoSrc}\r\n                                        type=\"video/mp4\"\r\n                                    />\r\n                                    Your browser does not support the video tag.\r\n                                </video>\r\n                            </div>\r\n                        </div>\r\n\r\n                        {/* Close Button */}\r\n                        <div class=\"w-full flex justify-center\">\r\n                            <button\r\n                                onClick={this.handleCloseTutorial}\r\n                                class=\"px-6 py-3 bg-tertiary text-white rounded-lg font-medium hover:bg-tertiary/80 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-tertiary focus:ring-offset-0\"\r\n                            >\r\n                                {t.mapDraw.tutorial.understood}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}