blue-chestnut-solar-expert 0.0.67 → 0.0.69
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/eraser-icon_19.cjs.entry.js +1 -1
- package/dist/cjs/{lerc-v64rYVDy.js → lerc-Bdx5y-yw.js} +3 -3
- package/dist/cjs/{lerc-v64rYVDy.js.map → lerc-Bdx5y-yw.js.map} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/loading-widget.cjs.entry.js +1 -1
- package/dist/cjs/stencil-library.cjs.js +1 -1
- package/dist/collection/components/map-draw/map-draw.js +54 -25
- package/dist/collection/components/map-draw/map-draw.js.map +1 -1
- package/dist/collection/components/map-draw/map-selector.js +3 -3
- package/dist/collection/components/map-draw/polygon-buttons.js +1 -1
- package/dist/collection/components/map-draw/polygon-information.js +2 -2
- package/dist/collection/components/map-draw/tool-box.js +3 -3
- package/dist/collection/components/map-draw/tutorial-component.js +72 -4
- package/dist/collection/components/map-draw/tutorial-component.js.map +1 -1
- package/dist/collection/components/settings/settings.js +8 -8
- package/dist/collection/components/solar-expert/solar-expert.js +1 -1
- package/dist/collection/components/solar-system-form/solar-system-form.js +57 -36
- package/dist/collection/components/solar-system-form/solar-system-form.js.map +1 -1
- package/dist/collection/components/widgets/loading-widget.js +1 -1
- package/dist/collection/types/lang.js.map +1 -1
- package/dist/collection/utils/api.js +3 -2
- package/dist/collection/utils/api.js.map +1 -1
- package/dist/collection/utils/lang/english.js +7 -0
- package/dist/collection/utils/lang/english.js.map +1 -1
- package/dist/collection/utils/lang/german.js +7 -0
- package/dist/collection/utils/lang/german.js.map +1 -1
- package/dist/collection/utils/lang/spanish.js +7 -0
- package/dist/collection/utils/lang/spanish.js.map +1 -1
- package/dist/collection/utils/solar.js +0 -1
- package/dist/collection/utils/solar.js.map +1 -1
- package/dist/components/loading-widget.js +1 -1
- package/dist/components/map-draw.js +1 -1
- package/dist/components/map-selector.js +1 -1
- package/dist/components/{p-i1uLweD0.js → p-26DHwbCE.js} +4 -4
- package/dist/components/{p-i1uLweD0.js.map → p-26DHwbCE.js.map} +1 -1
- package/dist/components/{p-DlNHVTGB.js → p-BOe-Z8rz.js} +1462 -1088
- package/dist/components/p-BOe-Z8rz.js.map +1 -0
- package/dist/components/{p-Bopprtc7.js → p-Bduzzygj.js} +6 -6
- package/dist/components/{p-Bopprtc7.js.map → p-Bduzzygj.js.map} +1 -1
- package/dist/components/p-C3ZXE525.js +855 -0
- package/dist/components/p-C3ZXE525.js.map +1 -0
- package/dist/components/{p-DWirjxpO.js → p-Cx7fffWb.js} +6 -6
- package/dist/components/{p-DWirjxpO.js.map → p-Cx7fffWb.js.map} +1 -1
- package/dist/components/{p-Dzl6kfPI.js → p-D2AHNjbG.js} +39 -7
- package/dist/components/p-D2AHNjbG.js.map +1 -0
- package/dist/components/{p-BcVa4_YP.js → p-DLWzgdrw.js} +3 -3
- package/dist/components/{p-BcVa4_YP.js.map → p-DLWzgdrw.js.map} +1 -1
- package/dist/components/{p-B4X-RCW0.js → p-Ddk3b30j.js} +11 -11
- package/dist/components/{p-B4X-RCW0.js.map → p-Ddk3b30j.js.map} +1 -1
- package/dist/components/{p-eDwaXClX.js → p-DfzSejIb.js} +23 -2
- package/dist/components/p-DfzSejIb.js.map +1 -0
- package/dist/components/{p-BFJHTJPM.js → p-OxUYjaAL.js} +6 -6
- package/dist/components/{p-BFJHTJPM.js.map → p-OxUYjaAL.js.map} +1 -1
- package/dist/components/polygon-buttons.js +1 -1
- package/dist/components/polygon-information.js +1 -1
- package/dist/components/settings-modal.js +1 -1
- package/dist/components/solar-expert.js +10 -10
- package/dist/components/solar-system-form.js +1 -1
- package/dist/components/tool-box.js +1 -1
- package/dist/components/tutorial-component.js +1 -1
- package/dist/esm/eraser-icon_19.entry.js +1 -1
- package/dist/esm/{lerc-CAiDQjTu.js → lerc-DF5Lrv5A.js} +3 -3
- package/dist/esm/{lerc-CAiDQjTu.js.map → lerc-DF5Lrv5A.js.map} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/loading-widget.entry.js +1 -1
- package/dist/esm/stencil-library.js +1 -1
- package/dist/stencil-library/assets/tutorial4.mp4 +0 -0
- package/dist/stencil-library/{p-ab0f2031.entry.js → p-9b4e52c3.entry.js} +2 -2
- package/dist/stencil-library/p-CymYGBJH.js +2 -0
- package/dist/stencil-library/p-CymYGBJH.js.map +1 -0
- package/dist/stencil-library/{p-cAuhy_jT.js → p-DHgjDQwz.js} +4 -4
- package/dist/stencil-library/{p-cAuhy_jT.js.map → p-DHgjDQwz.js.map} +1 -1
- package/dist/stencil-library/{p-e7b94dbb.entry.js → p-ba64c5e4.entry.js} +2 -2
- package/dist/stencil-library/stencil-library.esm.js +1 -1
- package/dist/types/components/map-draw/map-draw.d.ts +5 -0
- package/dist/types/components/map-draw/tutorial-component.d.ts +7 -0
- package/dist/types/components/solar-system-form/solar-system-form.d.ts +1 -0
- package/dist/types/components.d.ts +6 -0
- package/dist/types/types/lang.d.ts +7 -0
- package/dist/types/utils/api.d.ts +1 -0
- package/package.json +1 -1
- package/dist/components/p-DlNHVTGB.js.map +0 -1
- package/dist/components/p-Dzl6kfPI.js.map +0 -1
- package/dist/components/p-PkMjF2if.js +0 -1985
- package/dist/components/p-PkMjF2if.js.map +0 -1
- package/dist/components/p-eDwaXClX.js.map +0 -1
- package/dist/stencil-library/p-BBtmpSUK.js +0 -2
- package/dist/stencil-library/p-BBtmpSUK.js.map +0 -1
- /package/dist/stencil-library/{p-ab0f2031.entry.js.map → p-9b4e52c3.entry.js.map} +0 -0
- /package/dist/stencil-library/{p-e7b94dbb.entry.js.map → p-ba64c5e4.entry.js.map} +0 -0
|
@@ -16,9 +16,9 @@ export class PolygonInformation {
|
|
|
16
16
|
render() {
|
|
17
17
|
const t = getLanguageStrings(state.settings.language);
|
|
18
18
|
// console.log(this.currentPolygon);
|
|
19
|
-
return (h("div", { key: '
|
|
19
|
+
return (h("div", { key: '060e66e13afe182ecbf621c096f1c6f153e74b41', class: "flex gap-4 flex-row justify-center items-center w-full rounded-4xl pb-2", style: {
|
|
20
20
|
border: "1px solid var(--color-border)",
|
|
21
|
-
} }, h("div", { key: '
|
|
21
|
+
} }, h("div", { key: '2d0461d15674861e3823cb0d431ca9ef6dd7e5e3', class: "w-full bg-primary rounded-4xl p-3 text-secondary" }, h("h3", { key: '904865a975021b13726c7b4e7f8ca1500ff0b9dd', class: "text-lg font-semibold mb-4 text-center" }, t.mapDraw.information), h("polygon-buttons", { key: 'e8dbba596ca4e30c305967eb5ff2510134fffc02', calculateSolarPanels: this.calculateSolarPanels, markAsFlatRoof: this.markAsFlatRoof, currentTool: this.currentTool }), this.currentPolygon?.area
|
|
22
22
|
? (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
|
|
23
23
|
?.area
|
|
24
24
|
.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) => {
|
|
@@ -9,7 +9,7 @@ export class ToolBox {
|
|
|
9
9
|
render() {
|
|
10
10
|
const t = getLanguageStrings(state.settings.language);
|
|
11
11
|
const undoToolStrings = t.mapDraw.tools[undoTool.name];
|
|
12
|
-
return (h("div", { key: '
|
|
12
|
+
return (h("div", { key: '2d370aab5a5abc591a825e8731427987bc025104', 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) => {
|
|
13
13
|
const toolStrings = t.mapDraw.tools[tool.name];
|
|
14
14
|
return (h("button", { class: `px-3 py-2 rounded-4xl transition-colors duration-200 ${this.currentTool.name === tool.name
|
|
15
15
|
? "bg-secondary hover:bg-secondary/80"
|
|
@@ -19,9 +19,9 @@ export class ToolBox {
|
|
|
19
19
|
: "var(--color-primary-foreground)",
|
|
20
20
|
border: "1px solid var(--color-border)",
|
|
21
21
|
}, "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))));
|
|
22
|
-
}), h("button", { key: '
|
|
22
|
+
}), h("button", { key: '528e903d4e16afd09c583c1ac5e4472862e4a83d', 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: {
|
|
23
23
|
border: "1px solid var(--color-border)",
|
|
24
|
-
}, "aria-label": undoToolStrings.ariaLabel, title: undoToolStrings.explanation, onClick: () => this.undoCallback() }, h("div", { key: '
|
|
24
|
+
}, "aria-label": undoToolStrings.ariaLabel, title: undoToolStrings.explanation, onClick: () => this.undoCallback() }, h("div", { key: '2e04251067a1c45dda457ed0803b1949b0425898', class: "flex items-center gap-1 flex-col" }, h("undo-icon", { key: '4aa276bbf830aab8849641af22a0bfb3da01191b' }), h("span", { key: '1378fa20a41e5e510c96346f085502ed2aaaea95' }, undoToolStrings.name)))));
|
|
25
25
|
}
|
|
26
26
|
static get is() { return "tool-box"; }
|
|
27
27
|
static get originalStyleUrls() {
|
|
@@ -3,17 +3,25 @@ import { getLanguageStrings } from "../../utils/lang/general";
|
|
|
3
3
|
import { state } from "../../store";
|
|
4
4
|
export class TutorialComponent {
|
|
5
5
|
onClose;
|
|
6
|
+
onSkip;
|
|
7
|
+
showSkipButton = false;
|
|
6
8
|
title;
|
|
7
9
|
description;
|
|
8
10
|
videoSource;
|
|
9
11
|
isLoading = true;
|
|
10
12
|
dotCount = 0;
|
|
13
|
+
isVideoPlaying = false;
|
|
11
14
|
dotInterval;
|
|
12
15
|
handleCloseTutorial = () => {
|
|
13
16
|
if (this.onClose) {
|
|
14
17
|
this.onClose();
|
|
15
18
|
}
|
|
16
19
|
};
|
|
20
|
+
handleSkipTutorial = () => {
|
|
21
|
+
if (this.onSkip) {
|
|
22
|
+
this.onSkip();
|
|
23
|
+
}
|
|
24
|
+
};
|
|
17
25
|
handleVideoLoadStart = () => {
|
|
18
26
|
this.isLoading = true;
|
|
19
27
|
};
|
|
@@ -21,6 +29,25 @@ export class TutorialComponent {
|
|
|
21
29
|
this.isLoading = false;
|
|
22
30
|
this.stopDotAnimation();
|
|
23
31
|
};
|
|
32
|
+
handleVideoPlay = () => {
|
|
33
|
+
this.isVideoPlaying = true;
|
|
34
|
+
};
|
|
35
|
+
handleVideoPause = () => {
|
|
36
|
+
this.isVideoPlaying = false;
|
|
37
|
+
};
|
|
38
|
+
handleVideoClick = () => {
|
|
39
|
+
if (state.isMobile) {
|
|
40
|
+
const video = document.querySelector("video");
|
|
41
|
+
if (video) {
|
|
42
|
+
if (video.paused) {
|
|
43
|
+
video.play();
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
video.pause();
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
};
|
|
24
51
|
componentWillLoad() {
|
|
25
52
|
this.startDotAnimation();
|
|
26
53
|
}
|
|
@@ -45,11 +72,13 @@ export class TutorialComponent {
|
|
|
45
72
|
const tutorialDescription = this.description ||
|
|
46
73
|
t.mapDraw.tutorial.description;
|
|
47
74
|
const videoSrc = this.videoSource || "/assets/videos/tutorial1.mp4";
|
|
48
|
-
return (h("div", { key: '
|
|
75
|
+
return (h("div", { key: '2f9134a303787f3f1bef384971812aebb664ef44', class: "fixed inset-0 z-50 flex items-center justify-center p-4" }, h("div", { key: '98d065ba7e264dfe3317defec98dda11dac51315', class: "absolute inset-0", style: {
|
|
49
76
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
50
|
-
} }), h("div", { key: '
|
|
77
|
+
} }), h("div", { key: 'cf65eb0cf7a7663fa9e199089e115117dbcf3ee7', class: "relative z-10 w-full max-w-2xl max-h-full overflow-y-auto" }, h("div", { key: 'df0111b1ab74a04b5141eed9f44c2a7a25c2d363', class: "flex flex-col gap-4 bg-primary rounded-4xl p-6" }, h("div", { key: 'ce343c8ce4216038e523a86ea64233177d4da27d', class: "w-full text-center space-y-4" }, h("h2", { key: 'fbedfae3afbd578e20a2b42bcafbed33636d4206', class: "text-2xl font-bold text-secondary" }, tutorialTitle), h("p", { key: 'd13ab83f9278cd645a0bb03010d7c703b930ad23', class: "text-text-secondary" }, tutorialDescription)), h("div", { key: '46a5cd8d8dc850b4eeda9eaa6066d1de1bae98d2', class: "flex items-start justify-center bg-primary rounded-4xl" }, h("div", { key: 'd2ece90512af28d8fa078be7a0a9e354ce3c4cf0', class: "relative flex items-center justify-center rounded-4xl bg-secondary overflow-hidden w-64 h-64" }, this.isLoading && (h("div", { key: 'd9d72623a1947f094fa60fd2fdfeaa95297b7849', class: "absolute inset-0 flex items-center justify-center z-10" }, h("span", { key: '4b18decb7ac66203d7a227d48c70ff91c9ec6824', class: "text-text-secondary" }, t.mapDraw.loading, ".".repeat(this.dotCount)))), h("video", { key: '19ceccc0a48869f3fc1c5b0de0a8bbf6786e5d0e', class: `w-full h-full object-contain rounded-4xl ${state.isMobile
|
|
78
|
+
? "cursor-pointer"
|
|
79
|
+
: "pointer-events-none"}`, autoplay: true, muted: true, loop: true, playsinline: true, onLoadStart: this.handleVideoLoadStart, onCanPlay: this.handleVideoCanPlay, onPlay: this.handleVideoPlay, onPause: this.handleVideoPause, onClick: this.handleVideoClick, style: {
|
|
51
80
|
aspectRatio: "1/1",
|
|
52
|
-
} }, h("source", { key: '
|
|
81
|
+
} }, h("source", { key: '3652b2397c4397578049cec441a50f0dcb02ad7d', src: videoSrc, type: "video/mp4" }), "Your browser does not support the video tag."))), state.isMobile && !this.isVideoPlaying && (h("div", { key: '41e7cebeb19caa36e6e89df1dc042314b069892e', class: "text-center" }, h("p", { key: '970fbbe47bec2c4beecd966179d3d8693326aa8d', class: "text-sm text-text-secondary" }, t.mapDraw.tutorial.mobileInstruction))), h("div", { key: '206ec33205f1353533edcb5598b523892ed9c80d', class: "w-full flex justify-center gap-4" }, this.showSkipButton && (h("button", { key: 'd849283abdb80d41f39d5a0b0ec5f116d9e498a5', onClick: this.handleSkipTutorial, class: "px-6 py-3 bg-gray-500 text-white rounded-lg font-medium hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-0" }, t.mapDraw.tutorial.obstacle.skip)), h("button", { key: 'e4fcd08b350da47dc2849eec3ff72b682d89fb83', 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))))));
|
|
53
82
|
}
|
|
54
83
|
static get is() { return "tutorial-component"; }
|
|
55
84
|
static get originalStyleUrls() {
|
|
@@ -82,6 +111,44 @@ export class TutorialComponent {
|
|
|
82
111
|
"getter": false,
|
|
83
112
|
"setter": false
|
|
84
113
|
},
|
|
114
|
+
"onSkip": {
|
|
115
|
+
"type": "unknown",
|
|
116
|
+
"attribute": "on-skip",
|
|
117
|
+
"mutable": false,
|
|
118
|
+
"complexType": {
|
|
119
|
+
"original": "() => void",
|
|
120
|
+
"resolved": "() => void",
|
|
121
|
+
"references": {}
|
|
122
|
+
},
|
|
123
|
+
"required": false,
|
|
124
|
+
"optional": true,
|
|
125
|
+
"docs": {
|
|
126
|
+
"tags": [],
|
|
127
|
+
"text": ""
|
|
128
|
+
},
|
|
129
|
+
"getter": false,
|
|
130
|
+
"setter": false
|
|
131
|
+
},
|
|
132
|
+
"showSkipButton": {
|
|
133
|
+
"type": "boolean",
|
|
134
|
+
"attribute": "show-skip-button",
|
|
135
|
+
"mutable": false,
|
|
136
|
+
"complexType": {
|
|
137
|
+
"original": "boolean",
|
|
138
|
+
"resolved": "boolean",
|
|
139
|
+
"references": {}
|
|
140
|
+
},
|
|
141
|
+
"required": false,
|
|
142
|
+
"optional": true,
|
|
143
|
+
"docs": {
|
|
144
|
+
"tags": [],
|
|
145
|
+
"text": ""
|
|
146
|
+
},
|
|
147
|
+
"getter": false,
|
|
148
|
+
"setter": false,
|
|
149
|
+
"reflect": false,
|
|
150
|
+
"defaultValue": "false"
|
|
151
|
+
},
|
|
85
152
|
"title": {
|
|
86
153
|
"type": "string",
|
|
87
154
|
"attribute": "title",
|
|
@@ -144,7 +211,8 @@ export class TutorialComponent {
|
|
|
144
211
|
static get states() {
|
|
145
212
|
return {
|
|
146
213
|
"isLoading": {},
|
|
147
|
-
"dotCount": {}
|
|
214
|
+
"dotCount": {},
|
|
215
|
+
"isVideoPlaying": {}
|
|
148
216
|
};
|
|
149
217
|
}
|
|
150
218
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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"]}
|
|
1
|
+
{"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 onSkip?: () => void;\r\n @Prop()\r\n showSkipButton?: boolean = false;\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 @State()\r\n private isVideoPlaying = false;\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 handleSkipTutorial = () => {\r\n if (this.onSkip) {\r\n this.onSkip();\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 private handleVideoPlay = () => {\r\n this.isVideoPlaying = true;\r\n };\r\n\r\n private handleVideoPause = () => {\r\n this.isVideoPlaying = false;\r\n };\r\n\r\n private handleVideoClick = () => {\r\n if (state.isMobile) {\r\n const video = document.querySelector(\"video\") as HTMLVideoElement;\r\n if (video) {\r\n if (video.paused) {\r\n video.play();\r\n } else {\r\n video.pause();\r\n }\r\n }\r\n }\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 ${\r\n state.isMobile\r\n ? \"cursor-pointer\"\r\n : \"pointer-events-none\"\r\n }`}\r\n autoplay\r\n muted\r\n loop\r\n playsinline\r\n onLoadStart={this.handleVideoLoadStart}\r\n onCanPlay={this.handleVideoCanPlay}\r\n onPlay={this.handleVideoPlay}\r\n onPause={this.handleVideoPause}\r\n onClick={this.handleVideoClick}\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 {/* Mobile Instruction Text */}\r\n {state.isMobile && !this.isVideoPlaying && (\r\n <div class=\"text-center\">\r\n <p class=\"text-sm text-text-secondary\">\r\n {t.mapDraw.tutorial.mobileInstruction}\r\n </p>\r\n </div>\r\n )}\r\n\r\n {/* Close Button */}\r\n <div class=\"w-full flex justify-center gap-4\">\r\n {this.showSkipButton && (\r\n <button\r\n onClick={this.handleSkipTutorial}\r\n class=\"px-6 py-3 bg-gray-500 text-white rounded-lg font-medium hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-0\"\r\n >\r\n {t.mapDraw.tutorial.obstacle.skip}\r\n </button>\r\n )}\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"]}
|
|
@@ -31,14 +31,14 @@ export class SettingsModal {
|
|
|
31
31
|
};
|
|
32
32
|
render() {
|
|
33
33
|
const t = getLanguageStrings(state.settings.language);
|
|
34
|
-
return (h("div", { key: '
|
|
35
|
-
.value) }, h("option", { key: '
|
|
36
|
-
"en" }, "English"), h("option", { key: '
|
|
37
|
-
"es" }, "Espa\u00F1ol"), h("option", { key: '
|
|
38
|
-
"de" }, "Deutsch"))), h("div", { key: '
|
|
39
|
-
.value)) })), h("div", { key: '
|
|
40
|
-
.value)) })), h("div", { key: '
|
|
41
|
-
.value)) }))), h("div", { key: '
|
|
34
|
+
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
|
|
35
|
+
.value) }, h("option", { key: '997a1f570e1a477d515817b692950921b33df0d0', value: "en", selected: this.tempSettings.language ===
|
|
36
|
+
"en" }, "English"), h("option", { key: 'aef384455e1f8880602fdcd77a36ec6a1e49d4e2', value: "es", selected: this.tempSettings.language ===
|
|
37
|
+
"es" }, "Espa\u00F1ol"), h("option", { key: 'af08a8d991f69d1903b6cb198a3429eea4f1d95e', value: "de", selected: this.tempSettings.language ===
|
|
38
|
+
"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
|
|
39
|
+
.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
|
|
40
|
+
.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
|
|
41
|
+
.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")))));
|
|
42
42
|
}
|
|
43
43
|
static get is() { return "settings-modal"; }
|
|
44
44
|
static get originalStyleUrls() {
|
|
@@ -123,7 +123,7 @@ export class SolarExpert {
|
|
|
123
123
|
}
|
|
124
124
|
render() {
|
|
125
125
|
const t = getLanguageStrings(this.language);
|
|
126
|
-
return (h("div", { key: '
|
|
126
|
+
return (h("div", { key: '7ccb47dff2e8984ef657012dc04d3b14a8b15349', class: "flex flex-col w-full h-full p-3 m-auto", id: "solar-calculator" }, this.showMapSelector
|
|
127
127
|
? (h("map-selector", { "api-key": this.apiKey, language: this.language }))
|
|
128
128
|
: (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
|
|
129
129
|
.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 ||
|
|
@@ -10,6 +10,7 @@ export class SolarSystemForm {
|
|
|
10
10
|
polygons = [];
|
|
11
11
|
roofCanvas;
|
|
12
12
|
polygonCanvas;
|
|
13
|
+
pixelInMeters;
|
|
13
14
|
householdConsumption = 4500;
|
|
14
15
|
consumptionProfile = "mostly_at_home";
|
|
15
16
|
electricityPrice = 0.3;
|
|
@@ -205,6 +206,7 @@ export class SolarSystemForm {
|
|
|
205
206
|
images: {
|
|
206
207
|
roof: this.roofCanvas.toDataURL(),
|
|
207
208
|
polygon: this.polygonCanvas.toDataURL(),
|
|
209
|
+
pixelInMeters: this.pixelInMeters,
|
|
208
210
|
},
|
|
209
211
|
results: {
|
|
210
212
|
autonomy: this.autonomy,
|
|
@@ -246,13 +248,13 @@ export class SolarSystemForm {
|
|
|
246
248
|
// Reusable style objects
|
|
247
249
|
const borderStyle = { border: "1px solid var(--color-border)" };
|
|
248
250
|
const errorBorderStyle = { border: "1px solid var(--color-error)" };
|
|
249
|
-
return (h("div", { key: '
|
|
251
|
+
return (h("div", { key: '42867ab1fc1201f981ee3c96a138ff5d999740fc', class: "flex flex-col justify-center items-center w-full h-full pt-4" // style={{
|
|
250
252
|
,
|
|
251
253
|
// display: (Object.keys(this.systemConfigs).length === 0)
|
|
252
254
|
// ? "none"
|
|
253
255
|
// : "flex",
|
|
254
256
|
// }}
|
|
255
|
-
id: "solar-system-form" }, h("h1", { key: '
|
|
257
|
+
id: "solar-system-form" }, h("h1", { key: 'ee1db435412a97d54333c36fc0c1a6fab5fe597f', class: "text-2xl font-bold text-secondary mb-4 w-full" }, t.solarSystemForm.title), h("div", { key: '27dcc67909fcbafd2093792e2ee822d233a23421', class: "w-full bg-primary rounded-4xl space-y-6" }, h("div", { key: '93ae54e79a272a01acdcfe21f1e0983811669ca6', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '2998dbde483a512c28d6b02ace04944eda49ff7c', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.systemInformation), h("div", { key: 'a169b4bdfd3c0b6c175971cfa119c48bdde6ff9d', class: "flex flex-col sm:flex-row gap-4" }, h("div", { key: '72a5c0c40117ddee1d14808898703869e34afb23', class: "flex-1 bg-muted rounded-4xl p-4 space-y-3" }, h("div", { key: '286c9346d417f9325aeb4653a428fc527317f1f2', class: "flex items-center justify-between" }, h("label", { key: 'cd78273dbacea60dfa7d3cd52fd61709c728c179', class: "text-sm font-medium text-text-muted" }, t.solarSystemForm.numberOfPanels), !this.isIOS()
|
|
256
258
|
? (h("input", { type: "number", class: "w-20 px-3 py-1 rounded-full bg-muted text-muted-foreground text-right", value: this.numberOfPanels, readOnly: true }))
|
|
257
259
|
: (h("input", { type: "number", min: "1", max: this.maxPanels, class: "w-20 px-3 py-1 rounded-full focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground text-center", style: borderStyle, value: this.numberOfPanels, onInput: (e) => {
|
|
258
260
|
const value = parseInt(e.target
|
|
@@ -264,37 +266,37 @@ export class SolarSystemForm {
|
|
|
264
266
|
value;
|
|
265
267
|
this.recalculate();
|
|
266
268
|
}
|
|
267
|
-
} }))), !this.isIOS() && (h("input", { key: '
|
|
269
|
+
} }))), !this.isIOS() && (h("input", { key: 'db21c520b3151ab4f766bd99092a36707fad3922', type: "range", min: "1", max: this.maxPanels, 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.numberOfPanels, onInput: (e) => {
|
|
268
270
|
this.numberOfPanels = parseInt(e.target
|
|
269
271
|
.value);
|
|
270
272
|
if (isNaN(this.numberOfPanels)) {
|
|
271
273
|
this.numberOfPanels = 0;
|
|
272
274
|
}
|
|
273
275
|
this.recalculate();
|
|
274
|
-
} }))), h("div", { key: '
|
|
275
|
-
this.numberOfPanels).toFixed(1), " kWp"))))), h("div", { key: '
|
|
276
|
+
} }))), h("div", { key: 'fed7b9efc92d01c73a34da7dfa3663d801f40ebb', class: "flex-1 bg-muted rounded-4xl p-4" }, h("div", { key: '97cf3fef6db644774469fbca6b7681c5865b54d2', class: "flex items-center justify-between" }, h("label", { key: '7471aeacdeddfe2951b474bb0006bc018b52528c', class: "text-sm font-medium text-text-muted" }, t.solarSystemForm.panelPeakPower), h("span", { key: 'cad4639ae980b4228723c78f0b0bbbc27d9322c0', class: "text-text-muted" }, this.panelPeakPower.toFixed(2), " kW")), h("div", { key: 'b344c0c87bbd7e016681034434a36982759f4107', class: "flex items-center justify-between mt-4" }, h("span", { key: '8619d3662fb929a2b9f185f556ded70de0210f70', class: "text-sm font-medium text-text-muted" }, t.solarSystemForm.totalSystemPeakPower), h("span", { key: '2ad8de7cb701e9410425bb762d03e03a5e9b3181', class: "font-bold text-text-muted" }, (DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *
|
|
277
|
+
this.numberOfPanels).toFixed(1), " kWp"))))), h("div", { key: '2cacc97462ac629a060baad3975179da6ad94e53', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: 'c10ec73052c222c5b3d75f2b28ae98189cf51380', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.householdConsumptionTitle), h("div", { key: '0279cc5c0f7cf3dcfd5c59075f4136edfde0b557', class: "grid grid-rows-2 gap-0" }, h("div", { key: '9e4b72083f26c1c540f757f74297f2bf1fe0c93c', class: "grid grid-cols-2 gap-4" }, h("label", { key: '7a5e9bf3b54bbc8328755837542a3766315247ef', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.annualConsumption), h("label", { key: '5e75002062d1e932d451f8350078afe3b34c3126', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.consumptionProfileTitle)), h("div", { key: '28ead4dbbe0258b6134a5c0c948ae993865c7da9', class: "grid grid-cols-2 gap-4" }, h("input", { key: '3b4cebdf7e4d38b3503d49f2c3cb2291ad17c6d0', type: "number", step: "100", min: "0", class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground", style: borderStyle, value: this.householdConsumption, onInput: (e) => {
|
|
276
278
|
this.householdConsumption = parseInt(e.target
|
|
277
279
|
.value);
|
|
278
280
|
this.recalculate();
|
|
279
|
-
} }), h("select", { key: '
|
|
281
|
+
} }), h("select", { key: '76994946ffe5e5d53037a58ed13fe103d8af3e64', class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground", style: borderStyle, onChange: (e) => {
|
|
280
282
|
this.consumptionProfile =
|
|
281
283
|
e.target
|
|
282
284
|
.value;
|
|
283
285
|
this.recalculate();
|
|
284
|
-
} }, h("option", { key: '
|
|
286
|
+
} }, h("option", { key: 'c7d2c8ec8d92f9339e33d5532504e92e1868bd0b', value: "mostly_at_home", selected: this.consumptionProfile ===
|
|
285
287
|
"mostly_at_home" }, t.solarSystemForm.consumptionProfiles
|
|
286
|
-
.mostlyAtHome), h("option", { key: '
|
|
288
|
+
.mostlyAtHome), h("option", { key: '668d7edd27b5c923c944ab442b960ae94c12af00', value: "mostly_away", selected: this.consumptionProfile ===
|
|
287
289
|
"mostly_away" }, t.solarSystemForm.consumptionProfiles
|
|
288
|
-
.mostlyAway))))), h("div", { key: '
|
|
290
|
+
.mostlyAway))))), h("div", { key: 'e2e2e002761485d99790c4727bd46ed1ed190123', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '46f8a7b7fc363d6eca28fbe5701d04c7d95e54e5', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.additionalComponents.title), h("div", { key: '08eaa438ae318304b5f2c3de023823b21f19eb75', class: "flex flex-col gap-4" }, h("div", { key: '4d56b31df0ca2935710fcd8d1733ba5f5ef07d92', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '0f399db912c4851d1d22d430c479f35a684e8405', class: "flex items-center justify-between" }, h("div", { key: 'af002c41ce930b0c1cb7bd9f9e58890064fc3fe8', class: "flex items-center gap-2" }, h("input", { key: '781624b2b616de5b5d9ade954911950c77224d55', type: "checkbox", id: "heatPump", class: "w-4 h-4 accent-tertiary border-border rounded-full focus:ring-tertiary focus:ring-offset-0 focus:ring-2", checked: this.heatPump > 0, onChange: (e) => {
|
|
289
291
|
this.heatPump =
|
|
290
292
|
e.target
|
|
291
293
|
.checked
|
|
292
294
|
? 100
|
|
293
295
|
: 0;
|
|
294
296
|
this.recalculate();
|
|
295
|
-
} }), h("label", { key: '
|
|
297
|
+
} }), h("label", { key: '94e129a09f3af63d049c3b58bb6d3bb1b788739c', htmlFor: "heatPump", class: "text-text-muted" }, t.solarSystemForm
|
|
296
298
|
.additionalComponents
|
|
297
|
-
.heatPump)), (this.heatPump > 0 && !this.isIOS()) && (h("span", { key: '
|
|
299
|
+
.heatPump)), (this.heatPump > 0 && !this.isIOS()) && (h("span", { key: '9a9c4208690edaa0809435a9bfb219d65ac825a1', class: "text-text-muted" }, this.heatPump, " m\u00B2"))), this.heatPump > 0 && (h("div", { key: 'b71000e853b6f5317f5b5190fdfe57582217dbbe', class: "flex flex-col gap-2" }, this.isIOS()
|
|
298
300
|
? (h("div", { class: "flex items-center gap-2" }, h("input", { type: "number", min: "10", max: "300", step: "10", class: "flex-1 px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", style: borderStyle, value: this.heatPump, onInput: (e) => {
|
|
299
301
|
let value = parseInt(e.target
|
|
300
302
|
.value);
|
|
@@ -313,31 +315,31 @@ export class SolarSystemForm {
|
|
|
313
315
|
parseInt(e.target
|
|
314
316
|
.value);
|
|
315
317
|
this.recalculate();
|
|
316
|
-
} }))))), h("div", { key: '
|
|
318
|
+
} }))))), h("div", { key: 'a3ffb277ff4f4c5539c8484c1e2b9e9c5dbff64f', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '520a1c1f3aff8482bab8206e72fd0f8480192e31', class: "flex items-center justify-between" }, h("div", { key: 'c5dee085ffcc1b93acacf451ce7044c1dbbbd5ae', class: "flex items-center gap-2" }, h("input", { key: '835135fc8cd50873fdc2611526735b2a8b8d238c', type: "checkbox", id: "electricCar", class: "w-4 h-4 accent-tertiary border-border rounded focus:ring-tertiary focus:ring-offset-0 focus:ring-2", checked: this.electricCar, onChange: (e) => {
|
|
317
319
|
this.electricCar =
|
|
318
320
|
e.target
|
|
319
321
|
.checked;
|
|
320
322
|
this.recalculate();
|
|
321
|
-
} }), h("label", { key: '
|
|
323
|
+
} }), h("label", { key: 'f401eb62de0b05c0e65c89294d65e78925f19749', htmlFor: "electricCar", class: "text-text-muted" }, t.solarSystemForm
|
|
322
324
|
.additionalComponents
|
|
323
|
-
.electricCar))), this.electricCar && (h("div", { key: '
|
|
325
|
+
.electricCar))), this.electricCar && (h("div", { key: 'a53474411832751c7a30aeb5ea02db0f9f512963', class: "flex flex-col gap-2" }, h("div", { key: '19f2e4448eaaa94fba0b6d922ecb18ff28d052bc', class: "grid grid-cols-2 gap-4" }, h("label", { key: 'bd92f4dd142ef6a732c85d9b71bc9eb3c6b60fa6', class: "text-sm text-text-muted" }, t.solarSystemForm
|
|
324
326
|
.additionalComponents
|
|
325
|
-
.chargingTime), h("label", { key: '
|
|
327
|
+
.chargingTime), h("label", { key: 'bb0552899cf2642b866213d91d5d90d2d8a1424e', class: "text-sm text-text-muted" }, t.solarSystemForm
|
|
326
328
|
.additionalComponents
|
|
327
|
-
.kilometersPerYear)), h("div", { key: '
|
|
329
|
+
.kilometersPerYear)), h("div", { key: '35ef876cab7b2d4fe0fea2eb2b821b5c59cdbd34', class: "grid grid-cols-2 gap-4" }, h("select", { key: '9b6961f77e163568d4c09b207cec5958c2a5302b', class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", onChange: (e) => {
|
|
328
330
|
this.electricCarChargingTime =
|
|
329
331
|
e.target
|
|
330
332
|
.value;
|
|
331
333
|
this.recalculate();
|
|
332
|
-
}, style: borderStyle }, h("option", { key: '
|
|
334
|
+
}, style: borderStyle }, h("option", { key: '5e67bdee8a891ace0299fbc3f2faaa82ceab9963', value: "day", selected: this
|
|
333
335
|
.electricCarChargingTime ===
|
|
334
336
|
"day" }, t.solarSystemForm
|
|
335
337
|
.additionalComponents
|
|
336
|
-
.chargingTimeDay), h("option", { key: '
|
|
338
|
+
.chargingTimeDay), h("option", { key: '00649f89de616ada4292ff71eb15524a5b946059', value: "night", selected: this
|
|
337
339
|
.electricCarChargingTime ===
|
|
338
340
|
"night" }, t.solarSystemForm
|
|
339
341
|
.additionalComponents
|
|
340
|
-
.chargingTimeNight)), h("input", { key: '
|
|
342
|
+
.chargingTimeNight)), h("input", { key: '3234b8ac6c559b57b8d24bacb1794fd2860aab24', type: "number", min: "1000", max: "100000", step: "1000", class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", value: this.kmDrivenPerYear, onInput: (e) => {
|
|
341
343
|
this.kmDrivenPerYear =
|
|
342
344
|
parseInt(e.target
|
|
343
345
|
.value);
|
|
@@ -346,7 +348,7 @@ export class SolarSystemForm {
|
|
|
346
348
|
0;
|
|
347
349
|
}
|
|
348
350
|
this.recalculate();
|
|
349
|
-
}, style: borderStyle }))))), h("div", { key: '
|
|
351
|
+
}, style: borderStyle }))))), h("div", { key: '8d5eec07f8446d8984d3f6b767b404e5840dc67f', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '2321a2419b1f6ab4ab591ac09a44bc9168b591c2', class: "flex items-center justify-between" }, h("div", { key: '33cbfd3dbfac3a3077e73ad3d5a61bd845cfe1c8', class: "flex items-center gap-2" }, h("input", { key: 'd3d6b513e7eb73cc96f4ed1b5b70f4d46eebb8b1', type: "checkbox", id: "battery", class: "w-4 h-4 accent-tertiary border-border rounded-full focus:ring-tertiary focus:ring-offset-0 focus:ring-2", checked: this.batteryEnabled, onChange: (e) => {
|
|
350
352
|
this.batteryEnabled =
|
|
351
353
|
e.target
|
|
352
354
|
.checked;
|
|
@@ -355,9 +357,9 @@ export class SolarSystemForm {
|
|
|
355
357
|
? 5
|
|
356
358
|
: 0;
|
|
357
359
|
this.recalculate();
|
|
358
|
-
} }), h("label", { key: '
|
|
360
|
+
} }), h("label", { key: 'd73591c77f3b04c2b78c33a6d71808cdddd782e7', htmlFor: "battery", class: "text-text-muted" }, t.solarSystemForm
|
|
359
361
|
.additionalComponents
|
|
360
|
-
.battery)), (this.batteryEnabled && !this.isIOS()) && (h("span", { key: '
|
|
362
|
+
.battery)), (this.batteryEnabled && !this.isIOS()) && (h("span", { key: 'dffc91a5159c4e2b8889175751c432e318f47dae', class: "text-text-muted" }, this.battery, " kWh"))), this.batteryEnabled && (h("div", { key: 'ead4529d83f84e9f8e762e7ccc6203c886fea2cf', class: "flex flex-col gap-2" }, this.isIOS()
|
|
361
363
|
? (h("div", { class: "flex items-center gap-2" }, h("input", { type: "number", min: "0", max: "20", step: "1", class: "flex-1 px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", value: this.battery, onInput: (e) => {
|
|
362
364
|
let value = parseInt(e.target
|
|
363
365
|
.value);
|
|
@@ -382,52 +384,52 @@ export class SolarSystemForm {
|
|
|
382
384
|
this.batteryEnabled =
|
|
383
385
|
value > 0;
|
|
384
386
|
this.recalculate();
|
|
385
|
-
} }))))))), h("div", { key: '
|
|
387
|
+
} }))))))), h("div", { key: 'cc21f52e0e1ea5d1f731951325053a4615641288', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '413db6f645abd608dc74c0fe9dd2b8538e439ff3', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.electricityCostsTitle), h("div", { key: '36a7f1d8ca5b115cf86c136ab8b2834c621cbff4', style: {
|
|
386
388
|
display: "grid",
|
|
387
389
|
gridTemplateColumns: "repeat(auto-fit, minmax(100px, 1fr))",
|
|
388
390
|
gap: "1rem",
|
|
389
|
-
} }, h("div", { key: '
|
|
391
|
+
} }, h("div", { key: '393a18f5a6d81a557d85a77ec83a764ee22043cb' }, h("label", { key: '23c407eba1f39251193d83320f79feb88a709ce9', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.electricityPrice), h("input", { key: '6e9a5ed3a36231ffccc9dcaa00ac6919668078c7', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", style: borderStyle, value: this.electricityPrice.toFixed(2), onInput: (e) => {
|
|
390
392
|
this.electricityPrice = parseFloat(e.target
|
|
391
393
|
.value);
|
|
392
394
|
this.recalculate();
|
|
393
|
-
} })), h("div", { key: '
|
|
395
|
+
} })), h("div", { key: '3942694c95b0b451bca63341cdfb92b5f5829593' }, h("label", { key: 'bdb87c826d37b147c031a2ca53411a7432c845fd', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.compensationRate), h("input", { key: 'b91214ef6aebe7c342ec4bb604f6e3a37b189488', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", style: borderStyle, value: this.compensationRate.toFixed(2), onInput: (e) => {
|
|
394
396
|
this.compensationRate = parseFloat(e.target
|
|
395
397
|
.value);
|
|
396
398
|
this.recalculate();
|
|
397
|
-
} })), h("div", { key: '
|
|
399
|
+
} })), h("div", { key: '56684c4d9d65272834bd4cebe8c4c167bb16a958' }, h("label", { key: 'af7337ddaa1529dbc6b07704a2c313a591b6e3bd', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.annualPriceIncrease), h("input", { key: '90bef6067bf8fae6b598a551ab2ddbb4f0725b29', type: "number", step: "0.1", class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", style: borderStyle, value: this.annualPriceIncrease.toFixed(1), onInput: (e) => {
|
|
398
400
|
this.annualPriceIncrease = parseFloat(e.target
|
|
399
401
|
.value);
|
|
400
402
|
this.recalculate();
|
|
401
|
-
} })))), h("div", { key: '
|
|
403
|
+
} })))), h("div", { key: '266bd42a4b60349bbb098f8a56a1af6444b85fad', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: 'c24a5e56041eeaf26a5648af092a942ccd41e739', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.resultsTitle), h("div", { key: '3fd59700c6cdb99662f8a7232141d1f7efb2109f', class: "bg-muted rounded-4xl p-4" }, h("div", { key: '25708d8c8cdd04b21e66ac05776cef76ce53725a', class: "flex flex-col sm:flex-row sm:items-center justify-between" }, h("span", { key: '0b45f781be44dd70a66d68446319f17800357984', class: "text-text-muted" }, t.solarSystemForm.autonomy), h("span", { key: 'a56d5b093834c6a42f74619ab569a983057e91a0', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.autonomy > 100
|
|
402
404
|
? "100"
|
|
403
|
-
: this.formatEuropeanNumber(this.autonomy, 1), "%")), h("div", { key: '
|
|
404
|
-
.solarSystemForm.year)), h("div", { key: '
|
|
405
|
-
.monetaryBenefit20Years)), h("span", { key: '
|
|
405
|
+
: this.formatEuropeanNumber(this.autonomy, 1), "%")), h("div", { key: 'feea3eca497e8f14eb619c4f2ece03c39394ca74', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("span", { key: '3b5ae4b3be1368da0a8c6eb0c9e1c07c6ef6e2d7', class: "text-text-muted" }, t.solarSystemForm.totalEnergyConsumption), h("span", { key: '04d21a3ce938bd47aee28598467984d467c19fba', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.totalEnergyConsumption, 0), " kWh/", t.solarSystemForm.year)), h("div", { key: '6812053410e4372e791cf1fc7f74b411549fc8d9', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("span", { key: '2451f60fe0ec7edb6312bc7b8a50b63c4e4af182', class: "text-text-muted" }, t.solarSystemForm.totalEnergyProduction), h("span", { key: '8695bcaee81b83829460639976872d141734bf16', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.totalEnergyProduction, 0), " kWh/", t.solarSystemForm.year)), h("div", { key: 'c7bc91f11c89d492cdd4545a96af349e2a643fc9', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: 'b28127d6c7cb295a61cd5a5e0a21dbba9acbbdba', class: "flex items-center gap-2" }, h("span", { key: 'f0a7b0e4359155d99e0859da98eb9cbedcd53a00', class: "text-text-muted" }, t.solarSystemForm.costSavings)), h("span", { key: 'ec566bd9d9fb4f2757c8467525bef7a4e584642a', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.costSavings), " \u20AC/", t
|
|
406
|
+
.solarSystemForm.year)), h("div", { key: 'f68554341ba8b734ea64507f705a0d1318317598', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: '95ea75c1ada49b28ccbba230fb696660e5892538', class: "flex items-center gap-2" }, h("span", { key: '169dd5d92dad7d8fb54a24eee3f736b30f635600', class: "text-text-muted" }, t.solarSystemForm.compensation20Years)), h("span", { key: 'c1445a608709f8202bf9e9cdc06cce961e1b949f', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.compensation20Years), " \u20AC")), h("div", { key: '9a45d97faab0feefdbbef029c664579347f48aaf', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: 'dce377238f8650fb00f90eb31e533e2282e8c02b', class: "flex items-center gap-2" }, h("span", { key: 'd0c04b9c4aca6c4605f04f68eb86d21f994ea7a9', class: "text-text-muted" }, t.solarSystemForm
|
|
407
|
+
.monetaryBenefit20Years)), h("span", { key: 'f56d1995af5bda25c068ee58c36edf4cd6a61d9f', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.savedCosts20Years), " \u20AC")))), h("div", { key: '6b8acc3f0c13fa2b70854214d5882f8024dbcc8c', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '216a6809e770f9e67d9731e104ed50ec68a3d187', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.requestOffer), h("div", { key: '7ed284d01cc4f3375e20f8b85d2c0d1af287227e', style: {
|
|
406
408
|
display: "grid",
|
|
407
409
|
gridTemplateColumns: "repeat(auto-fit, minmax(1 00px, 1fr))",
|
|
408
410
|
gap: "1rem",
|
|
409
|
-
} }, h("div", { key: '
|
|
411
|
+
} }, h("div", { key: 'e0f7dc87d379fdccbe3c28fbae46b3104235b68d' }, h("label", { key: '6f3b10b41a081224855dd6aa68df0ede72e0a6c7', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.name), h("input", { key: '1e8f43f9818f896e53fa0fcb859b7865e64a2a64', type: "text", class: `w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`, style: this.nameError
|
|
410
412
|
? errorBorderStyle
|
|
411
413
|
: borderStyle, value: this.name, onInput: (e) => {
|
|
412
414
|
this.name =
|
|
413
415
|
e.target
|
|
414
416
|
.value;
|
|
415
417
|
this.validateForm();
|
|
416
|
-
}, placeholder: "Your name" }), this.nameError && (h("p", { key: '
|
|
418
|
+
}, placeholder: "Your name" }), this.nameError && (h("p", { key: '2057d743304e3e4fbb1367971ac7ff5a008b8ae7', class: "text-error text-sm mt-1" }, this.nameError))), h("div", { key: '4884e8d194a8be9c17ca8f38fc4349e5e79396bb' }, h("label", { key: '329f5d0502c8e685a4abc2f49e153f6c3e69f13f', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.email), h("input", { key: '847cff5833cc8d1872fc8a620344085a74d885ca', type: "email", class: `w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`, style: this.emailError
|
|
417
419
|
? errorBorderStyle
|
|
418
420
|
: borderStyle, value: this.email, onInput: (e) => {
|
|
419
421
|
this.email =
|
|
420
422
|
e.target
|
|
421
423
|
.value;
|
|
422
424
|
this.validateForm();
|
|
423
|
-
}, placeholder: "your.email@example.com" }), this.emailError && (h("p", { key: '
|
|
425
|
+
}, placeholder: "your.email@example.com" }), this.emailError && (h("p", { key: '956e51452f32f6c92d70de7ca28beab4922850f9', class: "text-error text-sm mt-1" }, this.emailError))), h("div", { key: '48e2718dd33ab7efa45e0992c8f281083e77b2de' }, h("label", { key: '545eca60f2f30861cbb49f12391098fcd437d51b', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.phone), h("input", { key: '9baca33fb75c16ca3500b8980c6b55ffe35bedfc', type: "tel", class: `w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`, style: this.phoneError
|
|
424
426
|
? errorBorderStyle
|
|
425
427
|
: borderStyle, value: this.phone, onInput: (e) => {
|
|
426
428
|
this.phone =
|
|
427
429
|
e.target
|
|
428
430
|
.value;
|
|
429
431
|
this.validateForm();
|
|
430
|
-
}, placeholder: "+34 123 456 789" }), this.phoneError && (h("p", { key: '
|
|
432
|
+
}, placeholder: "+34 123 456 789" }), this.phoneError && (h("p", { key: '23c1d5ee25d9b01295627db3feea507e2e0804a4', class: "text-error text-sm mt-1" }, this.phoneError)))), h("div", { key: '155f8a5dcecdb0c330b6ce3f3455f39c1d7689b5', class: "flex flex-col items-center gap-4" }, h("button", { key: 'fabacedfac41216d9b48beed1fce03ccd39dd5cd', onClick: () => this.handleRequestOffer(), disabled: !this.name.trim() ||
|
|
431
433
|
!this.email.trim() || !!this.nameError ||
|
|
432
434
|
!!this.emailError || !!this.phoneError ||
|
|
433
435
|
this.isSubmitting, class: `px-6 py-3 rounded-4xl transition-colors duration-200 flex items-center gap-2 ${this.isSubmitting
|
|
@@ -436,9 +438,9 @@ export class SolarSystemForm {
|
|
|
436
438
|
color: this.isSubmitting
|
|
437
439
|
? "var(--color-text-muted)"
|
|
438
440
|
: "#ffffff",
|
|
439
|
-
} }, this.isSubmitting && (h("div", { key: '
|
|
441
|
+
} }, this.isSubmitting && (h("div", { key: '51b7a0add44644aa898060aeba67ef74cdb32d5d', class: "w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" })), this.isSubmitting
|
|
440
442
|
? t.solarSystemForm.sending
|
|
441
|
-
: t.solarSystemForm.requestOfferButton), this.submitMessage && (h("div", { key: '
|
|
443
|
+
: t.solarSystemForm.requestOfferButton), this.submitMessage && (h("div", { key: 'cb54060dff88997e93fc105ebb876c8e518de545', class: `text-sm px-4 py-2 rounded-4xl ${this.submitSuccess
|
|
442
444
|
? "bg-success/10 text-success border border-success/20"
|
|
443
445
|
: "bg-error/10 text-error border border-error/20"}` }, this.submitMessage)))))));
|
|
444
446
|
}
|
|
@@ -550,6 +552,25 @@ export class SolarSystemForm {
|
|
|
550
552
|
},
|
|
551
553
|
"getter": false,
|
|
552
554
|
"setter": false
|
|
555
|
+
},
|
|
556
|
+
"pixelInMeters": {
|
|
557
|
+
"type": "number",
|
|
558
|
+
"attribute": "pixel-in-meters",
|
|
559
|
+
"mutable": false,
|
|
560
|
+
"complexType": {
|
|
561
|
+
"original": "number",
|
|
562
|
+
"resolved": "number",
|
|
563
|
+
"references": {}
|
|
564
|
+
},
|
|
565
|
+
"required": false,
|
|
566
|
+
"optional": false,
|
|
567
|
+
"docs": {
|
|
568
|
+
"tags": [],
|
|
569
|
+
"text": ""
|
|
570
|
+
},
|
|
571
|
+
"getter": false,
|
|
572
|
+
"setter": false,
|
|
573
|
+
"reflect": false
|
|
553
574
|
}
|
|
554
575
|
};
|
|
555
576
|
}
|