blue-chestnut-solar-expert 0.0.20 → 0.0.22

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["loading-widget.cjs",[[0,"loading-widget"]]],["solar-calculator.cjs",[[0,"solar-calculator",{"apiKey":[1,"api-key"],"buildingInsights":[32],"isLoaded":[32],"autocomplete":[32],"place":[32]}]]],["eraser-icon_16.cjs",[[0,"solar-expert",{"apiKey":[1,"api-key"],"language":[1],"latitude":[32],"longitude":[32],"isLoaded":[32],"autocomplete":[32],"place":[32],"showMapSelector":[32]}],[0,"map-draw",{"apiKey":[1,"api-key"],"config":[16],"solarPanel":[16,"solar-panel"],"showInstructions":[32],"showSettings":[32],"zoom":[32],"loadingState":[32],"rgbTiff":[32],"draggedPointIndex":[32],"hoveredPointIndex":[32],"hoveredPolygon":[32],"shiftKeyPressed":[32],"altKeyPressed":[32],"mousePoint":[32],"currentTool":[32],"roofPolygons":[32],"roofPolygonsSolarPanels":[32],"obstructionPolygons":[32],"selectedPolygon":[32],"buildingInsights":[32],"pixelInMeters":[32],"isMobile":[32],"highlightedEdge":[32]},[[5,"mousemove","handleMouseMove"],[4,"keydown","handleKeyDown"],[4,"keyup","handleKeyUp"],[5,"mousedown","handleMouseDown"],[5,"mouseup","handleMouseUp"]],{"rgbTiff":["drawMap"],"buildingInsights":["drawMap"],"canvasElement":["drawMap"]}],[1,"map-selector",{"apiKey":[1,"api-key"],"language":[1],"isLoaded":[32],"autocomplete":[32],"map":[32],"marker":[32],"circle":[32],"radius":[32],"latitude":[32],"longitude":[32]}],[0,"tool-box",{"currentTool":[16,"current-tool"],"undoCallback":[16,"undo-callback"],"onToolSelect":[16,"on-tool-select"]}],[0,"polygon-buttons",{"calculateSolarPanels":[16,"calculate-solar-panels"],"selectEdgeTool":[16,"select-edge-tool"],"currentTool":[1,"current-tool"]}],[1,"polygon-information",{"currentPolygon":[8,"current-polygon"],"positionedPanels":[16,"positioned-panels"],"handleAzimuthChange":[16,"handle-azimuth-change"],"handlePitchChange":[16,"handle-pitch-change"],"calculateSolarPanels":[16,"calculate-solar-panels"]}],[0,"settings-modal",{"settings":[16],"tempSettings":[32]}],[0,"solar-system-form",{"systemConfigs":[16,"system-configs"],"roofPolygons":[16,"roof-polygons"],"obstructionPolygons":[16,"obstruction-polygons"],"householdConsumption":[32],"consumptionProfile":[32],"electricityPrice":[32],"compensationRate":[32],"annualPriceIncrease":[32],"autonomy":[32],"costSavings":[32],"numberOfPanels":[32],"panelPeakPower":[32],"name":[32],"email":[32],"nameError":[32],"emailError":[32],"electricCar":[32],"electricCarChargingTime":[32],"heatPump":[32],"battery":[32],"compensation25Years":[32],"savedCosts25Years":[32],"maxPanels":[32]},null,{"systemConfigs":["updateSystemConfigs"]}],[0,"icon-selector",{"name":[1],"inline":[4],"size":[2]}],[0,"eraser-icon",{"inline":[4],"size":[2]}],[0,"house-icon",{"inline":[4],"size":[2]}],[0,"move-icon",{"inline":[4],"size":[2]}],[0,"octagon-minus-icon",{"inline":[4],"size":[2]}],[0,"settings-icon",{"inline":[4],"size":[2]}],[0,"undo-icon",{"inline":[4],"size":[2]}],[0,"search-icon",{"inline":[4],"size":[2]}]]]], options);
+  return index.bootstrapLazy([["loading-widget.cjs",[[0,"loading-widget"]]],["solar-calculator.cjs",[[0,"solar-calculator",{"apiKey":[1,"api-key"],"buildingInsights":[32],"isLoaded":[32],"autocomplete":[32],"place":[32]}]]],["eraser-icon_16.cjs",[[0,"solar-expert",{"apiKey":[1,"api-key"],"language":[1],"latitude":[32],"longitude":[32],"isLoaded":[32],"autocomplete":[32],"place":[32],"showMapSelector":[32]}],[0,"map-draw",{"apiKey":[1,"api-key"],"config":[16],"solarPanel":[16,"solar-panel"],"showInstructions":[32],"showSettings":[32],"zoom":[32],"loadingState":[32],"rgbTiff":[32],"draggedPointIndex":[32],"hoveredPointIndex":[32],"hoveredPolygon":[32],"shiftKeyPressed":[32],"altKeyPressed":[32],"mousePoint":[32],"currentTool":[32],"roofPolygons":[32],"roofPolygonsSolarPanels":[32],"obstructionPolygons":[32],"selectedPolygon":[32],"buildingInsights":[32],"pixelInMeters":[32],"isMobile":[32],"highlightedEdge":[32]},[[5,"mousemove","handleMouseMove"],[4,"keydown","handleKeyDown"],[4,"keyup","handleKeyUp"],[5,"mousedown","handleMouseDown"],[5,"mouseup","handleMouseUp"]],{"rgbTiff":["drawMap"],"buildingInsights":["drawMap"],"canvasElement":["drawMap"]}],[1,"map-selector",{"apiKey":[1,"api-key"],"language":[1],"isLoaded":[32],"autocomplete":[32],"map":[32],"marker":[32],"circle":[32],"radius":[32],"latitude":[32],"longitude":[32]}],[0,"tool-box",{"currentTool":[16,"current-tool"],"undoCallback":[16,"undo-callback"],"onToolSelect":[16,"on-tool-select"]}],[0,"polygon-buttons",{"calculateSolarPanels":[16,"calculate-solar-panels"],"selectEdgeTool":[16,"select-edge-tool"],"currentTool":[1,"current-tool"]}],[1,"polygon-information",{"currentPolygon":[8,"current-polygon"],"positionedPanels":[16,"positioned-panels"],"handleAzimuthChange":[16,"handle-azimuth-change"],"handlePitchChange":[16,"handle-pitch-change"],"calculateSolarPanels":[16,"calculate-solar-panels"]}],[0,"settings-modal",{"settings":[16],"tempSettings":[32]}],[0,"solar-system-form",{"systemConfigs":[16,"system-configs"],"roofPolygons":[16,"roof-polygons"],"obstructionPolygons":[16,"obstruction-polygons"],"householdConsumption":[32],"consumptionProfile":[32],"electricityPrice":[32],"compensationRate":[32],"annualPriceIncrease":[32],"autonomy":[32],"costSavings":[32],"numberOfPanels":[32],"panelPeakPower":[32],"name":[32],"email":[32],"nameError":[32],"emailError":[32],"electricCar":[32],"electricCarChargingTime":[32],"heatPump":[32],"battery":[32],"compensation25Years":[32],"savedCosts25Years":[32],"maxPanels":[32],"kmDrivenPerYear":[32]},null,{"systemConfigs":["updateSystemConfigs"]}],[0,"icon-selector",{"name":[1],"inline":[4],"size":[2]}],[0,"eraser-icon",{"inline":[4],"size":[2]}],[0,"house-icon",{"inline":[4],"size":[2]}],[0,"move-icon",{"inline":[4],"size":[2]}],[0,"octagon-minus-icon",{"inline":[4],"size":[2]}],[0,"settings-icon",{"inline":[4],"size":[2]}],[0,"undo-icon",{"inline":[4],"size":[2]}],[0,"search-icon",{"inline":[4],"size":[2]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/loading-widget.cjs.entry.js

@@ -9,7 +9,7 @@ const LoadingWidget = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'e93f3726f7d6e40cbea2c8f9c7e5ad66ed1fd2fd', class: "absolute flex items-center justify-center bg-white bg-opacity-75 z-20 pt-7 rounded-4xl" }, index.h("div", { key: 'a929727aad29ecbb0e9fffa71b82a9de061810ec', class: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-[#271200]" })));
+        return (index.h("div", { key: '90187981b5843b365c5f8bf66c575f31d4fa5cca', class: "absolute flex items-center justify-center bg-white bg-opacity-75 z-20 pt-7 rounded-4xl" }, index.h("div", { key: 'c98e2aa7f46344897cbeeb85cabb8d962fb0f138', class: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-[#271200]" })));
     }
 };
 LoadingWidget.style = outputCss;

package/dist/cjs/stencil-library.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["loading-widget.cjs",[[0,"loading-widget"]]],["solar-calculator.cjs",[[0,"solar-calculator",{"apiKey":[1,"api-key"],"buildingInsights":[32],"isLoaded":[32],"autocomplete":[32],"place":[32]}]]],["eraser-icon_16.cjs",[[0,"solar-expert",{"apiKey":[1,"api-key"],"language":[1],"latitude":[32],"longitude":[32],"isLoaded":[32],"autocomplete":[32],"place":[32],"showMapSelector":[32]}],[0,"map-draw",{"apiKey":[1,"api-key"],"config":[16],"solarPanel":[16,"solar-panel"],"showInstructions":[32],"showSettings":[32],"zoom":[32],"loadingState":[32],"rgbTiff":[32],"draggedPointIndex":[32],"hoveredPointIndex":[32],"hoveredPolygon":[32],"shiftKeyPressed":[32],"altKeyPressed":[32],"mousePoint":[32],"currentTool":[32],"roofPolygons":[32],"roofPolygonsSolarPanels":[32],"obstructionPolygons":[32],"selectedPolygon":[32],"buildingInsights":[32],"pixelInMeters":[32],"isMobile":[32],"highlightedEdge":[32]},[[5,"mousemove","handleMouseMove"],[4,"keydown","handleKeyDown"],[4,"keyup","handleKeyUp"],[5,"mousedown","handleMouseDown"],[5,"mouseup","handleMouseUp"]],{"rgbTiff":["drawMap"],"buildingInsights":["drawMap"],"canvasElement":["drawMap"]}],[1,"map-selector",{"apiKey":[1,"api-key"],"language":[1],"isLoaded":[32],"autocomplete":[32],"map":[32],"marker":[32],"circle":[32],"radius":[32],"latitude":[32],"longitude":[32]}],[0,"tool-box",{"currentTool":[16,"current-tool"],"undoCallback":[16,"undo-callback"],"onToolSelect":[16,"on-tool-select"]}],[0,"polygon-buttons",{"calculateSolarPanels":[16,"calculate-solar-panels"],"selectEdgeTool":[16,"select-edge-tool"],"currentTool":[1,"current-tool"]}],[1,"polygon-information",{"currentPolygon":[8,"current-polygon"],"positionedPanels":[16,"positioned-panels"],"handleAzimuthChange":[16,"handle-azimuth-change"],"handlePitchChange":[16,"handle-pitch-change"],"calculateSolarPanels":[16,"calculate-solar-panels"]}],[0,"settings-modal",{"settings":[16],"tempSettings":[32]}],[0,"solar-system-form",{"systemConfigs":[16,"system-configs"],"roofPolygons":[16,"roof-polygons"],"obstructionPolygons":[16,"obstruction-polygons"],"householdConsumption":[32],"consumptionProfile":[32],"electricityPrice":[32],"compensationRate":[32],"annualPriceIncrease":[32],"autonomy":[32],"costSavings":[32],"numberOfPanels":[32],"panelPeakPower":[32],"name":[32],"email":[32],"nameError":[32],"emailError":[32],"electricCar":[32],"electricCarChargingTime":[32],"heatPump":[32],"battery":[32],"compensation25Years":[32],"savedCosts25Years":[32],"maxPanels":[32]},null,{"systemConfigs":["updateSystemConfigs"]}],[0,"icon-selector",{"name":[1],"inline":[4],"size":[2]}],[0,"eraser-icon",{"inline":[4],"size":[2]}],[0,"house-icon",{"inline":[4],"size":[2]}],[0,"move-icon",{"inline":[4],"size":[2]}],[0,"octagon-minus-icon",{"inline":[4],"size":[2]}],[0,"settings-icon",{"inline":[4],"size":[2]}],[0,"undo-icon",{"inline":[4],"size":[2]}],[0,"search-icon",{"inline":[4],"size":[2]}]]]], options);
+  return index.bootstrapLazy([["loading-widget.cjs",[[0,"loading-widget"]]],["solar-calculator.cjs",[[0,"solar-calculator",{"apiKey":[1,"api-key"],"buildingInsights":[32],"isLoaded":[32],"autocomplete":[32],"place":[32]}]]],["eraser-icon_16.cjs",[[0,"solar-expert",{"apiKey":[1,"api-key"],"language":[1],"latitude":[32],"longitude":[32],"isLoaded":[32],"autocomplete":[32],"place":[32],"showMapSelector":[32]}],[0,"map-draw",{"apiKey":[1,"api-key"],"config":[16],"solarPanel":[16,"solar-panel"],"showInstructions":[32],"showSettings":[32],"zoom":[32],"loadingState":[32],"rgbTiff":[32],"draggedPointIndex":[32],"hoveredPointIndex":[32],"hoveredPolygon":[32],"shiftKeyPressed":[32],"altKeyPressed":[32],"mousePoint":[32],"currentTool":[32],"roofPolygons":[32],"roofPolygonsSolarPanels":[32],"obstructionPolygons":[32],"selectedPolygon":[32],"buildingInsights":[32],"pixelInMeters":[32],"isMobile":[32],"highlightedEdge":[32]},[[5,"mousemove","handleMouseMove"],[4,"keydown","handleKeyDown"],[4,"keyup","handleKeyUp"],[5,"mousedown","handleMouseDown"],[5,"mouseup","handleMouseUp"]],{"rgbTiff":["drawMap"],"buildingInsights":["drawMap"],"canvasElement":["drawMap"]}],[1,"map-selector",{"apiKey":[1,"api-key"],"language":[1],"isLoaded":[32],"autocomplete":[32],"map":[32],"marker":[32],"circle":[32],"radius":[32],"latitude":[32],"longitude":[32]}],[0,"tool-box",{"currentTool":[16,"current-tool"],"undoCallback":[16,"undo-callback"],"onToolSelect":[16,"on-tool-select"]}],[0,"polygon-buttons",{"calculateSolarPanels":[16,"calculate-solar-panels"],"selectEdgeTool":[16,"select-edge-tool"],"currentTool":[1,"current-tool"]}],[1,"polygon-information",{"currentPolygon":[8,"current-polygon"],"positionedPanels":[16,"positioned-panels"],"handleAzimuthChange":[16,"handle-azimuth-change"],"handlePitchChange":[16,"handle-pitch-change"],"calculateSolarPanels":[16,"calculate-solar-panels"]}],[0,"settings-modal",{"settings":[16],"tempSettings":[32]}],[0,"solar-system-form",{"systemConfigs":[16,"system-configs"],"roofPolygons":[16,"roof-polygons"],"obstructionPolygons":[16,"obstruction-polygons"],"householdConsumption":[32],"consumptionProfile":[32],"electricityPrice":[32],"compensationRate":[32],"annualPriceIncrease":[32],"autonomy":[32],"costSavings":[32],"numberOfPanels":[32],"panelPeakPower":[32],"name":[32],"email":[32],"nameError":[32],"emailError":[32],"electricCar":[32],"electricCarChargingTime":[32],"heatPump":[32],"battery":[32],"compensation25Years":[32],"savedCosts25Years":[32],"maxPanels":[32],"kmDrivenPerYear":[32]},null,{"systemConfigs":["updateSystemConfigs"]}],[0,"icon-selector",{"name":[1],"inline":[4],"size":[2]}],[0,"eraser-icon",{"inline":[4],"size":[2]}],[0,"house-icon",{"inline":[4],"size":[2]}],[0,"move-icon",{"inline":[4],"size":[2]}],[0,"octagon-minus-icon",{"inline":[4],"size":[2]}],[0,"settings-icon",{"inline":[4],"size":[2]}],[0,"undo-icon",{"inline":[4],"size":[2]}],[0,"search-icon",{"inline":[4],"size":[2]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -7,12 +7,11 @@ export class PolygonButtons {
     currentTool;
     render() {
         const t = getLanguageStrings(state.settings.language);
-        console.log("currentTool", this.currentTool);
-        return (h("div", { key: '0395148df27fa4749435da350c48b48f48631b9e', class: "flex w-full gap-2 justify-end" }, h("button", { key: '8e1c15c7ebfca7970c240c02f1280834100fea59', class: `px-4 py-2 rounded-4xl hover:bg-[#0000003c] text-[#271200] transition-colors duration-200 text-xs ${this.currentTool === "markRoofEdge"
+        return (h("div", { key: 'bfd9f90e4d9102dd46b27a74e53d8f6f58af9361', class: "flex w-full gap-2 justify-end" }, h("button", { key: '3b0866d091627579b479b3009800f12b27d13d5e', class: `px-4 py-2 rounded-4xl hover:bg-[#0000003c] text-[#271200] transition-colors duration-200 text-xs ${this.currentTool === "markRoofEdge"
                 ? "bg-[#00000056]"
                 : "bg-white"}`,
             // style={edgeSelectedStyle}
-            onClick: () => this.selectEdgeTool() }, t.mapDraw.markRoofEdge), h("button", { key: '0d5cf42d7af65b4e17fefc466d8925051db45f6f', class: "px-4 py-2 rounded-4xl hover:bg-[#0000003c] text-[#271200] transition-colors duration-200 text-xs bg-[#ffffff]", onClick: () => this.calculateSolarPanels() }, t.mapDraw.calculateSolarPanels)));
+            onClick: () => this.selectEdgeTool() }, t.mapDraw.markRoofEdge), h("button", { key: '12f39460c0a87249a639d2834f923f7abd0e592d', class: "px-4 py-2 rounded-4xl hover:bg-[#0000003c] text-[#271200] transition-colors duration-200 text-xs bg-[#ffffff]", onClick: () => this.calculateSolarPanels() }, t.mapDraw.calculateSolarPanels)));
     }
     static get is() { return "polygon-buttons"; }
     static get originalStyleUrls() {

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

@@ -1 +1 @@
-{"version":3,"file":"polygon-buttons.js","sourceRoot":"","sources":["../../../src/components/map-draw/polygon-buttons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAO9D,MAAM,OAAO,cAAc;IAEvB,oBAAoB,CAAa;IAEjC,cAAc,CAAa;IAE3B,WAAW,CAAS;IAEpB,MAAM;QACF,MAAM,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACtD,OAAO,CAAC,GAAG,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QAE7C,OAAO,CACH,4DAAK,KAAK,EAAC,+BAA+B;YACtC,+DACI,KAAK,EAAE,oGACH,IAAI,CAAC,WAAW,KAAK,cAAc;oBAC/B,CAAC,CAAC,gBAAgB;oBAClB,CAAC,CAAC,UACV,EAAE;gBACF,4BAA4B;gBAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAEnC,CAAC,CAAC,OAAO,CAAC,YAAY,CAClB;YACT,+DACI,KAAK,EAAC,+GAA+G,EACrH,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,IAEzC,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAC1B,CACP,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport { state } from \"../../store\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\n\r\n@Component({\r\n    tag: \"polygon-buttons\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class PolygonButtons {\r\n    @Prop()\r\n    calculateSolarPanels: () => void;\r\n    @Prop()\r\n    selectEdgeTool: () => void;\r\n    @Prop()\r\n    currentTool: string;\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n        console.log(\"currentTool\", this.currentTool);\r\n\r\n        return (\r\n            <div class=\"flex w-full gap-2 justify-end\">\r\n                <button\r\n                    class={`px-4 py-2 rounded-4xl hover:bg-[#0000003c] text-[#271200] transition-colors duration-200 text-xs ${\r\n                        this.currentTool === \"markRoofEdge\"\r\n                            ? \"bg-[#00000056]\"\r\n                            : \"bg-white\"\r\n                    }`}\r\n                    // style={edgeSelectedStyle}\r\n                    onClick={() => this.selectEdgeTool()}\r\n                >\r\n                    {t.mapDraw.markRoofEdge}\r\n                </button>\r\n                <button\r\n                    class=\"px-4 py-2 rounded-4xl hover:bg-[#0000003c] text-[#271200] transition-colors duration-200 text-xs bg-[#ffffff]\"\r\n                    onClick={() => this.calculateSolarPanels()}\r\n                >\r\n                    {t.mapDraw.calculateSolarPanels}\r\n                </button>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"polygon-buttons.js","sourceRoot":"","sources":["../../../src/components/map-draw/polygon-buttons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAO9D,MAAM,OAAO,cAAc;IAEvB,oBAAoB,CAAa;IAEjC,cAAc,CAAa;IAE3B,WAAW,CAAS;IAEpB,MAAM;QACF,MAAM,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAEtD,OAAO,CACH,4DAAK,KAAK,EAAC,+BAA+B;YACtC,+DACI,KAAK,EAAE,oGACH,IAAI,CAAC,WAAW,KAAK,cAAc;oBAC/B,CAAC,CAAC,gBAAgB;oBAClB,CAAC,CAAC,UACV,EAAE;gBACF,4BAA4B;gBAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAEnC,CAAC,CAAC,OAAO,CAAC,YAAY,CAClB;YACT,+DACI,KAAK,EAAC,+GAA+G,EACrH,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,IAEzC,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAC1B,CACP,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport { state } from \"../../store\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\n\r\n@Component({\r\n    tag: \"polygon-buttons\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class PolygonButtons {\r\n    @Prop()\r\n    calculateSolarPanels: () => void;\r\n    @Prop()\r\n    selectEdgeTool: () => void;\r\n    @Prop()\r\n    currentTool: string;\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n\r\n        return (\r\n            <div class=\"flex w-full gap-2 justify-end\">\r\n                <button\r\n                    class={`px-4 py-2 rounded-4xl hover:bg-[#0000003c] text-[#271200] transition-colors duration-200 text-xs ${\r\n                        this.currentTool === \"markRoofEdge\"\r\n                            ? \"bg-[#00000056]\"\r\n                            : \"bg-white\"\r\n                    }`}\r\n                    // style={edgeSelectedStyle}\r\n                    onClick={() => this.selectEdgeTool()}\r\n                >\r\n                    {t.mapDraw.markRoofEdge}\r\n                </button>\r\n                <button\r\n                    class=\"px-4 py-2 rounded-4xl hover:bg-[#0000003c] text-[#271200] transition-colors duration-200 text-xs bg-[#ffffff]\"\r\n                    onClick={() => this.calculateSolarPanels()}\r\n                >\r\n                    {t.mapDraw.calculateSolarPanels}\r\n                </button>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

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

@@ -13,17 +13,6 @@ export class SolarExpert {
     place = null;
     showMapSelector = false;
     inputElement;
-    iosPolyfill(slider, e) {
-        var val = (e.pageX - slider.getBoundingClientRect().left) /
-            (slider.getBoundingClientRect().right -
-                slider.getBoundingClientRect().left), max = parseInt(slider.getAttribute("max") || "0", 10), segment = 1 / (max - 1), segmentArr = [];
-        max++;
-        for (var i = 0; i < max; i++) {
-            segmentArr.push(segment * i);
-        }
-        var segCopy = segmentArr.slice(), ind = segmentArr.sort((a, b) => Math.abs(val - a) - Math.abs(val - b))[0];
-        slider.value = String(segCopy.indexOf(ind) + 1);
-    }
     componentWillLoad() {
         state.isMobile =
             /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
@@ -36,10 +25,8 @@ export class SolarExpert {
             }
         });
         state.settings.language = this.language;
-        const sliders = document.querySelectorAll(".input-slider");
-        sliders.forEach((slider) => {
-            slider.addEventListener("touchend", (e) => this.iosPolyfill(slider, e), { passive: true });
-        });
+        state.isIOS = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+        console.log(state.isIOS);
     }
     async loadGoogleMapsScript() {
         try {
@@ -87,7 +74,7 @@ export class SolarExpert {
     }
     render() {
         const t = getLanguageStrings(this.language);
-        return (h("div", { key: 'e9007293338ea321ee12563815ec22f625e6abfc', class: "flex flex-col w-full h-full p-3 m-auto", id: "solar-calculator" }, this.showMapSelector
+        return (h("div", { key: 'f084aa6d49f5c3ee21168d322d58de159b9ad7b9', class: "flex flex-col w-full h-full p-3 m-auto", id: "solar-calculator" }, this.showMapSelector
             ? (h("map-selector", { "api-key": this.apiKey, language: this.language }))
             : (h(h.Fragment, null, h("div", { class: "pb-3 flex flex-row gap-4 items-stretch w-full" }, h("div", { class: "relative flex-3" }, h("div", { class: "absolute left-3 top-1/2 transform -translate-y-1/2" }, h("search-icon", null)), h("input", { ref: (el) => this.inputElement = el, type: "text", placeholder: t.solarExpert
                     .searchPlaceholder, class: "w-full pl-10 pr-4 py-2 border border-gray-300 rounded-4xl focus:ring-[#271200] bg-white h-full" })), h("button", { onClick: () => this.handleChooseOnMap(), class: "flex-1 pl-4 pr-4 py-2 border border-gray-300 bg-white rounded-4xl focus:ring-[#271200] hover:bg-[#271200] hover:text-white" }, t.mapSelector.chooseOnMap)), h("map-draw", { apiKey: this.apiKey })))));

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

@@ -1 +1 @@
-{"version":3,"file":"solar-expert.js","sourceRoot":"","sources":["../../../src/components/solar-expert/solar-expert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Env, h, Prop, State } from \"@stencil/core\";\r\nimport { Loader } from \"@googlemaps/js-api-loader\";\r\nimport { Language } from \"../../types/lang\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { onChange, state } from \"../../store\";\r\n\r\n@Component({\r\n    tag: \"solar-expert\",\r\n    shadow: false,\r\n    styleUrl: \"../../output.css\",\r\n})\r\nexport class SolarExpert {\r\n    @Element()\r\n    el!: HTMLElement;\r\n\r\n    @Prop()\r\n    apiKey: string = Env.GOOGLE_MAPS_API_KEY;\r\n    @Prop()\r\n    language: Language = \"en\";\r\n\r\n    @State()\r\n    latitude: number | null = 40.581614;\r\n    @State()\r\n    longitude: number | null = -4.128423;\r\n    @State()\r\n    isLoaded: boolean = false;\r\n    @State()\r\n    autocomplete: google.maps.places.Autocomplete | null = null;\r\n    @State()\r\n    place: google.maps.places.PlaceResult | null = null;\r\n    @State()\r\n    showMapSelector: boolean = false;\r\n\r\n    private inputElement?: HTMLInputElement;\r\n\r\n    private iosPolyfill(slider: HTMLInputElement, e) {\r\n        var val = (e.pageX - slider.getBoundingClientRect().left) /\r\n                (slider.getBoundingClientRect().right -\r\n                    slider.getBoundingClientRect().left),\r\n            max = parseInt(slider.getAttribute(\"max\") || \"0\", 10),\r\n            segment = 1 / (max - 1),\r\n            segmentArr = [];\r\n\r\n        max++;\r\n\r\n        for (var i = 0; i < max; i++) {\r\n            segmentArr.push(segment * i);\r\n        }\r\n\r\n        var segCopy = segmentArr.slice(),\r\n            ind =\r\n                segmentArr.sort((a, b) =>\r\n                    Math.abs(val - a) - Math.abs(val - b)\r\n                )[0];\r\n\r\n        slider.value = String(segCopy.indexOf(ind) + 1);\r\n    }\r\n\r\n    componentWillLoad() {\r\n        state.isMobile =\r\n            /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i\r\n                .test(navigator.userAgent) || window.innerWidth < 768;\r\n        this.loadGoogleMapsScript();\r\n        onChange(\"latitude\", () => {\r\n            if (this.showMapSelector) {\r\n                this.showMapSelector = false;\r\n                this.scrollToMapDraw();\r\n            }\r\n        });\r\n        state.settings.language = this.language;\r\n\r\n        const sliders = document.querySelectorAll(\".input-slider\");\r\n        sliders.forEach((slider) => {\r\n            slider.addEventListener(\r\n                \"touchend\",\r\n                (e) => this.iosPolyfill(slider as HTMLInputElement, e),\r\n                { passive: true },\r\n            );\r\n        });\r\n    }\r\n\r\n    private async loadGoogleMapsScript() {\r\n        try {\r\n            const loader = new Loader({\r\n                apiKey: this.apiKey,\r\n                libraries: [\"places\", \"maps\", \"marker\"],\r\n            });\r\n\r\n            const places = await loader.importLibrary(\"places\");\r\n            this.isLoaded = true;\r\n            this.initializeAutocomplete(places);\r\n        } catch (error) {\r\n            console.error(\"Error loading Google Maps: \", error);\r\n        }\r\n    }\r\n\r\n    private initializeAutocomplete(\r\n        places: google.maps.PlacesLibrary,\r\n    ) {\r\n        if (!this.inputElement || !this.isLoaded) return;\r\n        this.autocomplete = new places.Autocomplete(this.inputElement);\r\n\r\n        this.autocomplete.addListener(\"place_changed\", () => {\r\n            const place = this.autocomplete?.getPlace();\r\n            this.latitude = place?.geometry?.location?.lat() ?? 0;\r\n            this.longitude = place?.geometry?.location?.lng() ?? 0;\r\n            state.latitude = this.latitude;\r\n            state.longitude = this.longitude;\r\n\r\n            this.scrollToMapDraw();\r\n        });\r\n    }\r\n\r\n    private scrollToMapDraw() {\r\n        if (state.isMobile) {\r\n            const solarSystemFormElement = this.el.querySelector(\r\n                \"solar-system-form\",\r\n            );\r\n            if (solarSystemFormElement) {\r\n                solarSystemFormElement.scrollIntoView({ behavior: \"smooth\" });\r\n            }\r\n        } else {\r\n            const mapDrawElement = this.el.querySelector(\"map-draw\");\r\n            if (mapDrawElement) {\r\n                mapDrawElement.scrollIntoView({ behavior: \"smooth\" });\r\n            }\r\n        }\r\n    }\r\n\r\n    private handleChooseOnMap() {\r\n        this.showMapSelector = true;\r\n    }\r\n\r\n    render() {\r\n        const t = getLanguageStrings(this.language);\r\n        return (\r\n            <div\r\n                class=\"flex flex-col w-full h-full p-3 m-auto\"\r\n                id=\"solar-calculator\"\r\n            >\r\n                {this.showMapSelector\r\n                    ? (\r\n                        <map-selector\r\n                            api-key={this.apiKey}\r\n                            language={this.language}\r\n                        />\r\n                    )\r\n                    : (\r\n                        <>\r\n                            <div class=\"pb-3 flex flex-row gap-4 items-stretch w-full\">\r\n                                <div class=\"relative flex-3\">\r\n                                    <div class=\"absolute left-3 top-1/2 transform -translate-y-1/2\">\r\n                                        <search-icon />\r\n                                    </div>\r\n                                    <input\r\n                                        ref={(el) => this.inputElement = el}\r\n                                        type=\"text\"\r\n                                        placeholder={t.solarExpert\r\n                                            .searchPlaceholder}\r\n                                        class=\"w-full pl-10 pr-4 py-2 border border-gray-300 rounded-4xl focus:ring-[#271200] bg-white h-full\"\r\n                                    />\r\n                                </div>\r\n                                <button\r\n                                    onClick={() => this.handleChooseOnMap()}\r\n                                    class=\"flex-1 pl-4 pr-4 py-2 border border-gray-300 bg-white rounded-4xl focus:ring-[#271200] hover:bg-[#271200] hover:text-white\"\r\n                                >\r\n                                    {t.mapSelector.chooseOnMap}\r\n                                </button>\r\n                            </div>\r\n                            <map-draw\r\n                                apiKey={this.apiKey}\r\n                            />\r\n                        </>\r\n                    )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"solar-expert.js","sourceRoot":"","sources":["../../../src/components/solar-expert/solar-expert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Env, h, Prop, State } from \"@stencil/core\";\r\nimport { Loader } from \"@googlemaps/js-api-loader\";\r\nimport { Language } from \"../../types/lang\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { onChange, state } from \"../../store\";\r\n\r\n@Component({\r\n    tag: \"solar-expert\",\r\n    shadow: false,\r\n    styleUrl: \"../../output.css\",\r\n})\r\nexport class SolarExpert {\r\n    @Element()\r\n    el!: HTMLElement;\r\n\r\n    @Prop()\r\n    apiKey: string = Env.GOOGLE_MAPS_API_KEY;\r\n    @Prop()\r\n    language: Language = \"en\";\r\n\r\n    @State()\r\n    latitude: number | null = 40.581614;\r\n    @State()\r\n    longitude: number | null = -4.128423;\r\n    @State()\r\n    isLoaded: boolean = false;\r\n    @State()\r\n    autocomplete: google.maps.places.Autocomplete | null = null;\r\n    @State()\r\n    place: google.maps.places.PlaceResult | null = null;\r\n    @State()\r\n    showMapSelector: boolean = false;\r\n\r\n    private inputElement?: HTMLInputElement;\r\n\r\n    componentWillLoad() {\r\n        state.isMobile =\r\n            /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i\r\n                .test(navigator.userAgent) || window.innerWidth < 768;\r\n        this.loadGoogleMapsScript();\r\n        onChange(\"latitude\", () => {\r\n            if (this.showMapSelector) {\r\n                this.showMapSelector = false;\r\n                this.scrollToMapDraw();\r\n            }\r\n        });\r\n        state.settings.language = this.language;\r\n        state.isIOS = /^((?!chrome|android).)*safari/i.test(\r\n            navigator.userAgent,\r\n        );\r\n        console.log(state.isIOS);\r\n    }\r\n\r\n    private async loadGoogleMapsScript() {\r\n        try {\r\n            const loader = new Loader({\r\n                apiKey: this.apiKey,\r\n                libraries: [\"places\", \"maps\", \"marker\"],\r\n            });\r\n\r\n            const places = await loader.importLibrary(\"places\");\r\n            this.isLoaded = true;\r\n            this.initializeAutocomplete(places);\r\n        } catch (error) {\r\n            console.error(\"Error loading Google Maps: \", error);\r\n        }\r\n    }\r\n\r\n    private initializeAutocomplete(\r\n        places: google.maps.PlacesLibrary,\r\n    ) {\r\n        if (!this.inputElement || !this.isLoaded) return;\r\n        this.autocomplete = new places.Autocomplete(this.inputElement);\r\n\r\n        this.autocomplete.addListener(\"place_changed\", () => {\r\n            const place = this.autocomplete?.getPlace();\r\n            this.latitude = place?.geometry?.location?.lat() ?? 0;\r\n            this.longitude = place?.geometry?.location?.lng() ?? 0;\r\n            state.latitude = this.latitude;\r\n            state.longitude = this.longitude;\r\n\r\n            this.scrollToMapDraw();\r\n        });\r\n    }\r\n\r\n    private scrollToMapDraw() {\r\n        if (state.isMobile) {\r\n            const solarSystemFormElement = this.el.querySelector(\r\n                \"solar-system-form\",\r\n            );\r\n            if (solarSystemFormElement) {\r\n                solarSystemFormElement.scrollIntoView({ behavior: \"smooth\" });\r\n            }\r\n        } else {\r\n            const mapDrawElement = this.el.querySelector(\"map-draw\");\r\n            if (mapDrawElement) {\r\n                mapDrawElement.scrollIntoView({ behavior: \"smooth\" });\r\n            }\r\n        }\r\n    }\r\n\r\n    private handleChooseOnMap() {\r\n        this.showMapSelector = true;\r\n    }\r\n\r\n    render() {\r\n        const t = getLanguageStrings(this.language);\r\n        return (\r\n            <div\r\n                class=\"flex flex-col w-full h-full p-3 m-auto\"\r\n                id=\"solar-calculator\"\r\n            >\r\n                {this.showMapSelector\r\n                    ? (\r\n                        <map-selector\r\n                            api-key={this.apiKey}\r\n                            language={this.language}\r\n                        />\r\n                    )\r\n                    : (\r\n                        <>\r\n                            <div class=\"pb-3 flex flex-row gap-4 items-stretch w-full\">\r\n                                <div class=\"relative flex-3\">\r\n                                    <div class=\"absolute left-3 top-1/2 transform -translate-y-1/2\">\r\n                                        <search-icon />\r\n                                    </div>\r\n                                    <input\r\n                                        ref={(el) => this.inputElement = el}\r\n                                        type=\"text\"\r\n                                        placeholder={t.solarExpert\r\n                                            .searchPlaceholder}\r\n                                        class=\"w-full pl-10 pr-4 py-2 border border-gray-300 rounded-4xl focus:ring-[#271200] bg-white h-full\"\r\n                                    />\r\n                                </div>\r\n                                <button\r\n                                    onClick={() => this.handleChooseOnMap()}\r\n                                    class=\"flex-1 pl-4 pr-4 py-2 border border-gray-300 bg-white rounded-4xl focus:ring-[#271200] hover:bg-[#271200] hover:text-white\"\r\n                                >\r\n                                    {t.mapSelector.chooseOnMap}\r\n                                </button>\r\n                            </div>\r\n                            <map-draw\r\n                                apiKey={this.apiKey}\r\n                            />\r\n                        </>\r\n                    )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/dist/collection/components/solar-system-form/solar-system-form.js

@@ -27,6 +27,7 @@ export class SolarSystemForm {
     compensation25Years = 0;
     savedCosts25Years = 0;
     maxPanels = 5;
+    kmDrivenPerYear = 10000;
     updateSystemConfigs() {
         if (Object.keys(this.systemConfigs).length === 0) {
             this.numberOfPanels = 0;
@@ -71,7 +72,7 @@ export class SolarSystemForm {
             },
             electricCar: this.electricCar
                 ? {
-                    averageKilometersPerDay: 50,
+                    averageKilometersPerDay: this.kmDrivenPerYear / 365,
                     consumptionkWhPer100km: 17,
                     batteryKWh: 20,
                     chargingHours: this.electricCarChargingTime === "day"
@@ -131,103 +132,149 @@ export class SolarSystemForm {
             obstructionPolygons: this.obstructionPolygons,
         });
     }
+    isIOS() {
+        return state.isIOS;
+    }
     render() {
         const t = getLanguageStrings(state.settings.language);
-        return (h("div", { key: '744d980cd58f2d3d04f7f3ff4938781a6c645fe5', class: "flex flex-col justify-center items-center w-full h-full pt-4" // style={{
+        return (h("div", { key: '2dba1a7d4b79678b3361a902cde4f01b1a60723c', class: "flex flex-col justify-center items-center w-full h-full pt-4" // style={{
             ,
             //     display: (Object.keys(this.systemConfigs).length === 0)
             //         ? "none"
             //         : "flex",
             // }}
-            id: "solar-system-form" }, h("h1", { key: 'f003bc55e2f63531822bd23ac3d39946d730df69', class: "text-2xl font-bold text-[#271200] mb-4 w-full" }, t.solarSystemForm.title), h("div", { key: '20c215156baabe57b3188759741d7d20c99270ef', class: "w-full bg-[#f3ebda] rounded-4xl p-6 space-y-6" }, h("div", { key: '7372fb2f5dadd14e0bc411773598c1316b7d1607', class: "space-y-4" }, h("h2", { key: '05978eeb5b39b5e37e40cd052bb64f9f239b1a01', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.systemInformation), h("div", { key: '005128f28eee0bba612bcc5b65f81a546d52e754', class: "grid grid-rows-3 gap-0" }, h("div", { key: '9095d807e024286e0ddd505e4f0c4d6311e92f99', class: "grid grid-cols-2 gap-4" }, h("label", { key: 'ce78ba6e92916f72a53698c1372637d065010d22', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.numberOfPanels), h("label", { key: '4c2f7e8a88baa146a4f01e2dabafaea416c74acd', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.panelPeakPower)), h("div", { key: 'fc7b28c8de9de709b7116612213f993e37598b09', class: "grid grid-cols-2 gap-4" }, h("input", { key: 'b7b63eb3667e664c6b7dcf251b786a20882b500d', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.numberOfPanels, readOnly: true }), h("input", { key: 'c500aa9a91ce6b21f734d95d92532d82be154055', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.panelPeakPower, readonly: true })), h("div", { key: 'd69c51ebd1188abaf61de239ce5d537ad9115a7e', class: "grid grid-cols-2 gap-4" }, h("div", { key: 'ecac73eba72e206b678d86ba18b4ba04e72d6e2d', class: "w-full pt-2" }, h("input", { key: '48a2fda42efcbd457df3c21ba63cb73066471052', 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-white", value: this.numberOfPanels, onInput: (e) => {
-                this.numberOfPanels = parseInt(e.target
-                    .value);
-                this.recalculate();
-            } })))), h("div", { key: 'b01c9bbec27359126ed3283a14e275861ca79194', class: "bg-white rounded-4xl p-4" }, h("div", { key: '4be558f4d94a68bda294dc32155df64243e3f2c7', class: "flex items-center justify-between" }, h("span", { key: '677a12d0236e17349fff064f6fad76279a51299a', class: "text-gray-600" }, t.solarSystemForm.totalSystemPeakPower), h("span", { key: '15f819a867ee238aeeb4f9cfc24b7b5e607176c8', class: "text-xl font-bold text-[#271200]" }, (DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *
-            this.numberOfPanels).toFixed(1), " kW")))), h("div", { key: '0adcb579dce8f9357c2631b4b6fa8dc0e66a5727', class: "space-y-4" }, h("h2", { key: '93ce837e4b57123e19629499d371211c82b67f17', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.householdConsumptionTitle), h("div", { key: '7c1b46ffac1807ffa75b98b9ff317250cb7f4f3f', class: "grid grid-rows-2 gap-0" }, h("div", { key: '115981c3667bdd500bb9ed9862dfcf6c57cf3488', class: "grid grid-cols-2 gap-4" }, h("label", { key: '1d36b519882a44f84f948594f2aac031c8b14785', class: "block text-sm font-medium text-gray-600" }, t.solarSystemForm.annualConsumption), h("label", { key: 'd0360fb66300f6a1048d6318ad388a28c25ede1c', class: "block text-sm font-medium text-gray-600" }, t.solarSystemForm.consumptionProfileTitle)), h("div", { key: '830c929bedc1731853b8abb4602c1a183b31c5d9', class: "grid grid-cols-2 gap-4" }, h("input", { key: '1f0625102ccf8711c5d25b8b42086ddacf0f5bce', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.householdConsumption, onInput: (e) => {
+            id: "solar-system-form" }, h("h1", { key: '0972b02752b45df6c041612092d464e92452b98a', class: "text-2xl font-bold text-[#271200] mb-4 w-full" }, t.solarSystemForm.title), h("div", { key: 'd66e6215be092ffed8fa69f876e2184ce734f9dc', class: "w-full bg-[#f3ebda] rounded-4xl p-6 space-y-6" }, h("div", { key: '5036c23117c8fdb9497746ad8eba7c0b4cf509e3', class: "space-y-4" }, h("h2", { key: 'f0342a639b9c11f6d30693da91001d01ea758de4', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.systemInformation), h("div", { key: 'bf6748d062b9e3d3505f77b3a3862be7f4b2d8af', class: "grid grid-rows-3 gap-0" }, h("div", { key: '21e6341bc4dadc41cfe755312ed6bf7ff24febbc', class: "grid grid-cols-2 gap-4" }, h("label", { key: 'ad9b6d44fa4a0feedcb67f9c697963af10ae3e5f', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.numberOfPanels), h("label", { key: '48045b48436b408c29e21f005fde2ace05d75703', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.panelPeakPower)), h("div", { key: '13c5228111f38d156672b74486804bfe34d28ad7', class: "grid grid-cols-2 gap-4" }, !this.isIOS()
+            ? (h("input", { type: "number", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.numberOfPanels, readOnly: true }))
+            : (h("input", { type: "number", min: "1", max: this.maxPanels, class: "flex-1 px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.numberOfPanels, onInput: (e) => {
+                    const value = parseInt(e.target
+                        .value);
+                    if (value >= 1 &&
+                        value <=
+                            this.maxPanels) {
+                        this.numberOfPanels = value;
+                        this.recalculate();
+                    }
+                } })), h("input", { key: '53d8ea2e917661f9151ddf9b185af5d6756bf632', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.panelPeakPower, readonly: true })), h("div", { key: '17477ccb77a6f5953cf9976d743f3ba7009781af', class: "grid grid-cols-2 gap-4" }, h("div", { key: '85b218da4a521d88740d6f3921fb25cfbeaf7dbe', class: "w-full pt-2" }, !this.isIOS() &&
+            (h("input", { key: '52e835a0cb277b040a36af6a06e312e9a573fe0f', 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-white", value: this.numberOfPanels, onInput: (e) => {
+                    this.numberOfPanels =
+                        parseInt(e.target
+                            .value);
+                    this.recalculate();
+                } }))))), h("div", { key: 'afe5465d0eeb4de5f8cacb1defd003ebf67a8308', class: "bg-white rounded-4xl p-4" }, h("div", { key: 'caf3fa20ee512be50c0ee47dd446325589c708cb', class: "flex items-center justify-between" }, h("span", { key: '4478560c195bd1fb0c2a37b409fc94b437d89576', class: "text-gray-600" }, t.solarSystemForm.totalSystemPeakPower), h("span", { key: '955d70d3c451a120e939dd6812f6d5a56b93b91c', class: "text-xl font-bold text-[#271200]" }, (DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *
+            this.numberOfPanels).toFixed(1), " kW")))), h("div", { key: '7be99868bcb573b69940ae0eed1dd339c276182a', class: "space-y-4" }, h("h2", { key: '4c707b1f87c2f1ee48f21523910876298c1d50cc', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.householdConsumptionTitle), h("div", { key: '91275b282cd1deef545ccc09971c6e8f501c27a2', class: "grid grid-rows-2 gap-0" }, h("div", { key: 'a64d9f3934d296ee3efe68796d1dba323797d67d', class: "grid grid-cols-2 gap-4" }, h("label", { key: '63772879247a7c9a099fabcd3bcec1b0e1ab4ee8', class: "block text-sm font-medium text-gray-600" }, t.solarSystemForm.annualConsumption), h("label", { key: '6a5754992670dbe36b25f6bc0e39f4bab847dca0', class: "block text-sm font-medium text-gray-600" }, t.solarSystemForm.consumptionProfileTitle)), h("div", { key: 'cf7ff437e16df324a0f193e3b98828ec44d0c46f', class: "grid grid-cols-2 gap-4" }, h("input", { key: 'b4b67d847c8f8f9fae7a1a7d51d95cb50b8a258b', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.householdConsumption, onInput: (e) => {
                 this.householdConsumption = parseInt(e.target
                     .value);
                 this.recalculate();
-            } }), h("select", { key: '39cec2d7c15bd3eec6091b3dc6384ab7ed95310c', class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", onChange: (e) => {
+            } }), h("select", { key: '6673bebb683bf19abe42f519f1cb04b422c6b364', class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", onChange: (e) => {
                 this.consumptionProfile =
                     e.target
                         .value;
                 this.recalculate();
-            } }, h("option", { key: '74b10c47b8fefb3aee7c818d35797649cd9cf700', value: "mostly_at_home", selected: this.consumptionProfile ===
+            } }, h("option", { key: 'b2d9dd9c783e5f245cc0b2543334e3be9ae5bd69', value: "mostly_at_home", selected: this.consumptionProfile ===
                 "mostly_at_home" }, t.solarSystemForm.consumptionProfiles
-            .mostlyAtHome), h("option", { key: '650009f75563391223500548984d7c36ad6c13b2', value: "mostly_away", selected: this.consumptionProfile ===
+            .mostlyAtHome), h("option", { key: 'eb3e39a87362b3d39ca11c00449456ec677cbfc8', value: "mostly_away", selected: this.consumptionProfile ===
                 "mostly_away" }, t.solarSystemForm.consumptionProfiles
-            .mostlyAway))))), h("div", { key: '86a106ff0692fe3387ac8cd885120933b4f0e4d0', class: "space-y-4" }, h("h2", { key: 'ec07a0b6a96ed21036fb01ec15b5e14f26c05717', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.additionalComponents.title), h("div", { key: '2406008f140b2e6118a1158c40170db3049d1d0e', class: "flex flex-col gap-4" }, h("div", { key: '7e11cbbb64c167795b8f3d67e81936cbcab7e437', class: "flex flex-col bg-white rounded-4xl p-4 gap-4" }, h("div", { key: '4939f5f7fc79efadbc861f5b5d64730fe6dd08ec', class: "flex items-center justify-between" }, h("div", { key: 'e8a076f0129819d83c021baf76f9051e32a51745', class: "flex items-center gap-2" }, h("input", { key: 'acc0ae74a9fcd0bedce903ffa5d38f2174ba2874', type: "checkbox", id: "heatPump", class: "w-4 h-4 accent-[#964500] border-gray-300 rounded-full focus:ring-[#964500] focus:ring-offset-0 focus:ring-2", checked: this.heatPump > 0, onChange: (e) => {
+            .mostlyAway))))), h("div", { key: '1e5da3eb5db4fcb7c48d667e0a2cd5fa7a54faed', class: "space-y-4" }, h("h2", { key: 'f9b05e006eee674279060a15f1f1dbb9d6c10d50', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.additionalComponents.title), h("div", { key: '0b9489a8e1ce2adcdce15f3223ac88601173a801', class: "flex flex-col gap-4" }, h("div", { key: 'c89bb7cc403c428bbd443ca87e8992e91785fde4', class: "flex flex-col bg-white rounded-4xl p-4 gap-4" }, h("div", { key: '273475b46f1486f1e7231f44349322a91c3c301b', class: "flex items-center justify-between" }, h("div", { key: '4bbf86342e38d59b24c3a7417374452a3c73b8ed', class: "flex items-center gap-2" }, h("input", { key: '124da317438aa1e19c3d5ac68af68266cd1e3564', type: "checkbox", id: "heatPump", class: "w-4 h-4 accent-[#964500] border-gray-300 rounded-full focus:ring-[#964500] focus:ring-offset-0 focus:ring-2", checked: this.heatPump > 0, onChange: (e) => {
                 this.heatPump =
                     e.target
                         .checked
                         ? 100
                         : 0;
                 this.recalculate();
-            } }), h("label", { key: 'cd903331c1dadec8fb8e32fb292a35e833349dde', htmlFor: "heatPump", class: "text-gray-600" }, t.solarSystemForm
+            } }), h("label", { key: '7845fc7124ea276e780ee5f0e53b0795f254e31f', htmlFor: "heatPump", class: "text-gray-600" }, t.solarSystemForm
             .additionalComponents
-            .heatPump)), this.heatPump > 0 && (h("span", { key: 'a4b28f091c369e7b8167326f6f0ce7ce2ed87403', class: "text-gray-600" }, this.heatPump, " m\u00B2"))), this.heatPump > 0 && (h("div", { key: '21799a5144de79e95bd82efd8e32d9a77d939e82', class: "flex flex-col gap-2" }, h("input", { key: 'c378e59e2421626b59aab30dca50d689318ea1c5', type: "range", min: "10", max: "300", step: "10", class: "input-slider custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white", value: this.heatPump, onInput: (e) => {
-                this.heatPump = parseInt(e.target
-                    .value);
-                this.recalculate();
-            } })))), h("div", { key: 'f361c0fc04391089240776a5dd76eb4a1f139dc2', class: "flex flex-col bg-white rounded-4xl p-4 gap-4" }, h("div", { key: '02bc28aff14eb518268cabb806caf30749fee32e', class: "flex items-center justify-between" }, h("div", { key: 'f53cb4db1f15b85743a2ba6d20486d0c12da3447', class: "flex items-center gap-2" }, h("input", { key: 'b6e4a0f08869fa9e7950371d590b9991ec03d452', type: "checkbox", id: "electricCar", class: "w-4 h-4 accent-[#964500] border-gray-300 rounded focus:ring-[#964500] focus:ring-offset-0 focus:ring-2", checked: this.electricCar, onChange: (e) => {
+            .heatPump)), (this.heatPump > 0 && !this.isIOS()) && (h("span", { key: '0eda4b5459b14430bc9be00ef740e216df7cd15c', class: "text-gray-600" }, this.heatPump, " m\u00B2"))), this.heatPump > 0 && (h("div", { key: '91f8bf5247aa936892ed10e3987f8201f078cd92', class: "flex flex-col gap-2" }, this.isIOS()
+            ? (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 border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.heatPump, onInput: (e) => {
+                    const value = parseInt(e.target
+                        .value);
+                    if (value >= 10 &&
+                        value <= 300) {
+                        this.heatPump =
+                            value;
+                        this.recalculate();
+                    }
+                } }), h("span", { class: "text-sm text-gray-600" }, "m\u00B2")))
+            : (h("input", { type: "range", min: "10", max: "300", step: "10", class: "input-slider custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white", value: this.heatPump, onInput: (e) => {
+                    this.heatPump =
+                        parseInt(e.target
+                            .value);
+                    this.recalculate();
+                } }))))), h("div", { key: 'dde5da644a165acb42ae0c23c8a129851728fb40', class: "flex flex-col bg-white rounded-4xl p-4 gap-4" }, h("div", { key: '657c3e78f58d54e26305071d60948a334a06e68c', class: "flex items-center justify-between" }, h("div", { key: '88718f9d326fc4824d77f5ee1ad120684f42c5c7', class: "flex items-center gap-2" }, h("input", { key: 'e2f3c3f9978d11471aea4736745169aa61a90206', type: "checkbox", id: "electricCar", class: "w-4 h-4 accent-[#964500] border-gray-300 rounded focus:ring-[#964500] focus:ring-offset-0 focus:ring-2", checked: this.electricCar, onChange: (e) => {
                 this.electricCar =
                     e.target
                         .checked;
                 this.recalculate();
-            } }), h("label", { key: 'a607d596e03ee4969111bd4124507814f1ea048d', htmlFor: "electricCar", class: "text-gray-600" }, t.solarSystemForm
+            } }), h("label", { key: '6df782a0b807a3c4463686804e71a65360c651ac', htmlFor: "electricCar", class: "text-gray-600" }, t.solarSystemForm
+            .additionalComponents
+            .electricCar))), this.electricCar && (h("div", { key: 'f3d23a7c239c4a32bd838825fc5c2bdb018c0922', class: "flex flex-col gap-2" }, h("div", { key: 'bf5b72bdad1771baace0b191d698c2f083d50e19', class: "grid grid-cols-2 gap-4" }, h("label", { key: '6df23bf10da5d23735c3c5cfab6301a35d9575ec', class: "text-sm text-gray-600" }, t.solarSystemForm
             .additionalComponents
-            .electricCar))), this.electricCar && (h("div", { key: '65681c033ecb581ac19c28034b456d3d2dc8bb6c', class: "flex flex-col gap-2" }, h("label", { key: 'e95874e8b94206c57fe44ed7355be4e38ddbd2ed', class: "text-sm text-gray-600" }, t.solarSystemForm
+            .chargingTime), h("label", { key: 'c33783c4485f9076190f0c47992e1594a8cc3548', class: "text-sm text-gray-600" }, t.solarSystemForm
             .additionalComponents
-            .chargingTime), h("select", { key: '47ed96b55ae0b40ab0bd40236f3f1def09701548', class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", onChange: (e) => {
+            .kilometersPerYear)), h("div", { key: '5722c0e3fca87593f93bb22168a776dc7d12a51f', class: "grid grid-cols-2 gap-4" }, h("select", { key: '0f38ea2f92d1bbb1aa24dca501a46ef510c3de9d', class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", onChange: (e) => {
                 this.electricCarChargingTime =
                     e.target
                         .value;
                 this.recalculate();
-            } }, h("option", { key: '1c48c51cae0282d0f2663ee0683e0d828e2cc508', value: "day", selected: this
+            } }, h("option", { key: 'b25ca2e4796760fb657905e3840c073696c9ced9', value: "day", selected: this
                 .electricCarChargingTime ===
                 "day" }, t.solarSystemForm
             .additionalComponents
-            .chargingTimeDay), h("option", { key: 'a8f55ef8f4bfecca29290ae2bd49975bd3cfc386', value: "night", selected: this
+            .chargingTimeDay), h("option", { key: '8569ac468010bf4aa8017b04855a2c3eb929f9c3', value: "night", selected: this
                 .electricCarChargingTime ===
                 "night" }, t.solarSystemForm
             .additionalComponents
-            .chargingTimeNight))))), h("div", { key: '5050cb4356d0f01bd6de72c778efd3d74dc48fcc', class: "flex flex-col bg-white rounded-4xl p-4 gap-4" }, h("div", { key: '94bc81576b9f577edf0eb5a50e5a72ea70a6a23c', class: "flex items-center justify-between" }, h("label", { key: '78374a6a108650c6e9da3d690c5cde3409009b64', class: "text-gray-600" }, t.solarSystemForm.additionalComponents
-            .battery), h("span", { key: '7dc59ee19216c1a59a19b3c6cd0889faebb9af85', class: "text-gray-600" }, this.battery, " kWh")), h("div", { key: '6880afe65e17ecfb231d994cc03618457738c68f', class: "flex flex-col gap-2" }, h("input", { key: 'e07afb820af65843e68e34a84730edc5b214440b', type: "range", min: "0", max: "20", 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-white", value: this.battery, onInput: (e) => {
-                this.battery = parseInt(e.target
-                    .value);
+            .chargingTimeNight)), h("input", { key: '234a97ea1a54194dd5213debeafdcee3d18472af', type: "number", min: "1000", max: "50000", step: "1000", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.kmDrivenPerYear, onInput: (e) => {
+                this.kmDrivenPerYear =
+                    parseInt(e.target
+                        .value);
                 this.recalculate();
-            } }))))), h("div", { key: 'a4bfb580de1e3c45a9f3b25acdec60008be691ce', class: "space-y-4" }, h("h2", { key: 'dfd3a5492bc3b57e800b3c946e95ada611190378', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.electricityCostsTitle), h("div", { key: '51e1bce640dd72353ee4f163c4d0db3343a87504', class: "grid grid-rows-2 gap-0" }, h("div", { key: '96422dfb55d394ad3678a924681e954b7ce22df3', class: "grid grid-cols-3 gap-4" }, h("label", { key: 'cf0d91a03cc3daef6fa6d82be31871bab5f7c100', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.electricityPrice), h("label", { key: '8ddfef1b47fb2ed3408a94244ed34d03d20445b7', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.compensationRate), h("label", { key: 'b6f72c81858b794c1326c13ebf1e7874d8a73375', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.annualPriceIncrease)), h("div", { key: '53bb5a5f2332e2a47c1266f22106809128678e56', class: "grid grid-cols-3 gap-4" }, h("input", { key: '5244283ad3af74ecdc19e6007088cb0ce1b36664', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.electricityPrice.toFixed(2), onInput: (e) => {
+            } }))))), h("div", { key: '2b9ec6f3abefbc9a12a0c412376a117201d9cbf7', class: "flex flex-col bg-white rounded-4xl p-4 gap-4" }, h("div", { key: 'b8007674c3f2fcaa9b1120f452804737c2e60b61', class: "flex items-center justify-between" }, h("label", { key: 'b10b40d2079c8a6643e0e5c7078170c8ec1fd07a', class: "text-gray-600" }, t.solarSystemForm.additionalComponents
+            .battery), !this.isIOS() && (h("span", { key: '8abfc38292626294d96cd46134ae6c9efcd45caf', class: "text-gray-600" }, this.battery, " kWh"))), h("div", { key: '89dd22648545df7ea017a704793aeab8cf193437', class: "flex flex-col gap-2" }, this.isIOS()
+            ? (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 border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.battery, onInput: (e) => {
+                    const value = parseInt(e.target
+                        .value);
+                    if (value >= 0 &&
+                        value <= 20) {
+                        this.battery =
+                            value;
+                        this.recalculate();
+                    }
+                }, placeholder: "Battery capacity" }), h("span", { class: "text-sm text-gray-600" }, "kWh")))
+            : (h("input", { type: "range", min: "0", max: "20", 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-white", value: this.battery, onInput: (e) => {
+                    this.battery = parseInt(e.target
+                        .value);
+                    this.recalculate();
+                } })))))), h("div", { key: '8729a38d3c447d702dbd962ce732cb835683cc40', class: "space-y-4" }, h("h2", { key: '1baeb07b6e4d9b80d8d5238730c5f24679fd8056', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.electricityCostsTitle), h("div", { key: '55af89837e9c511c6e38d13e8b43edb3a3188831', class: "grid grid-rows-2 gap-0" }, h("div", { key: '7810a1fcfa5e3bd3bae3ae8860b5f3b88cffc7fd', class: "grid grid-cols-3 gap-4" }, h("label", { key: '93f0fdcad9d8a0293686630b5bd7c1de1f2ce6f3', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.electricityPrice), h("label", { key: '4a90ddf97d30c14e7dadc0668bd99b67b67fbe10', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.compensationRate), h("label", { key: '51d4537d803746c154a0beead97fc1385c5ce3ff', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.annualPriceIncrease)), h("div", { key: 'ffe8e05a5d0cb78ce9521e45bf1432f8cf071535', class: "grid grid-cols-3 gap-4" }, h("input", { key: '589327000adc4bf5611dbfeab5146cd9dbfcd117', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.electricityPrice.toFixed(2), onInput: (e) => {
                 this.electricityPrice = parseFloat(e.target
                     .value);
                 this.recalculate();
-            } }), h("input", { key: '156f947d4e06d7a3cc6ad217ec5d9fa2951ad4dc', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.compensationRate.toFixed(2), onInput: (e) => {
+            } }), h("input", { key: '385e5e85ecde6812807e02c6fb5e45f64d41bb97', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.compensationRate.toFixed(2), onInput: (e) => {
                 this.compensationRate = parseFloat(e.target
                     .value);
                 this.recalculate();
-            } }), h("input", { key: '98143e54459b81a7b7264bffc923dd371bc1742f', type: "number", step: "0.1", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.annualPriceIncrease.toFixed(1), onInput: (e) => {
+            } }), h("input", { key: 'f71a1b7236c0ff45b24f1c012e4e6c5fb05f512c', type: "number", step: "0.1", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.annualPriceIncrease.toFixed(1), onInput: (e) => {
                 this.annualPriceIncrease = parseFloat(e.target
                     .value);
                 this.recalculate();
-            } })))), h("div", { key: '86b293619777e18d63b305ca07bc7e797fb0d70e', class: "space-y-4 pt-4 border-t border-gray-200" }, h("h2", { key: 'a68bcc7eeec7f0be54aea7c029e52ba1b0609638', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.resultsTitle), h("div", { key: 'b7ba73455969d9bd125c96a1f33dcf48c1418c37', class: "bg-white rounded-4xl p-4" }, h("div", { key: '18c3105018499d3b3a637aed351d91714ba5a612', class: "flex items-center justify-between" }, h("span", { key: '0035e2b15865f8227cbc114d38ebf5ccc00b656b', class: "text-gray-600" }, t.solarSystemForm.autonomy), h("span", { key: 'fb045f2880eeb51734f97d6a77a7319fca895ee9', class: "text-xl font-bold text-[#271200]" }, this.autonomy > 100
+            } })))), h("div", { key: 'ec6d113a5645a3e3de006a51ed2eb022f5545b2f', class: "space-y-4 pt-4 border-t border-gray-200" }, h("h2", { key: 'b1f8e2e61ef2e0155867bde9ca7b72ccc409bcca', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.resultsTitle), h("div", { key: 'f6f6baef1de50a71e400a86c7cf0af838430d759', class: "bg-white rounded-4xl p-4" }, h("div", { key: '21bd3865da59dfa154c371b1f0df48e94fbe2ebe', class: "flex items-center justify-between" }, h("span", { key: '8fedb2c918d3aa1d3fadb0d07aaabccb2d78281f', class: "text-gray-600" }, t.solarSystemForm.autonomy), h("span", { key: '14600dda39b1cbee3281145836b03087bfaf99e7', class: "text-xl font-bold text-[#271200]" }, this.autonomy > 100
             ? "100"
-            : this.autonomy.toFixed(1), "%")), h("div", { key: '0b496be58c3105ffd4ce3e8bbb5647cf4b3ed92e', class: "flex items-center justify-between mt-4" }, h("div", { key: '3e08d94b99e63a9b52d9b1ac4eb1662023afebf8', class: "flex items-center gap-2" }, h("span", { key: 'abe46d153767c62c13d2d8b3eef0ccc89fa5f22e', class: "text-gray-600" }, t.solarSystemForm.costSavings), h("div", { key: '51d67b7365530344639c8df9122c4c52803fbe0f', class: "relative group" }, h("svg", { key: '0bc8015429f01fb53ae07c1921152a1493d87a2d', xmlns: "http://www.w3.org/2000/svg", class: "h-5 w-5 text-gray-400 cursor-help", viewBox: "0 0 20 20", fill: "currentColor" }, h("path", { key: '593c7428f06632d9e46d8d7ecb06ca1e25fb6c4f', "fill-rule": "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z", "clip-rule": "evenodd" })), h("div", { key: 'ce7e6f853ea5370a2dbdfd392fef232f21bdc0d1', class: "absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-64 p-2 bg-gray-800 text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none" }, t.solarSystemForm
-            .savingsDisclaimer))), h("span", { key: '2d89f0f4d9437d5b75b1bc5c34140bc8502f2b23', class: "text-xl font-bold text-green-600" }, this.costSavings.toFixed(2), "\u20AC/", t
-            .solarSystemForm.year)), h("div", { key: 'ae58b2b27ba70aa4f18dce63c507395255452db6', class: "flex items-center justify-between mt-4" }, h("div", { key: '7a0a1c6d8948a475374537eee1d9054b6824c38c', class: "flex items-center gap-2" }, h("span", { key: '4537c21706ee095f3e3ed263f0a99386eec92795', class: "text-gray-600" }, "Einspeiseverg\u00FCtung 25 Jahre")), h("span", { key: '75955814953cb2c9e0f311aaa1e3d04f19fc89fb', class: "text-xl font-bold text-green-600" }, this.compensation25Years.toFixed(2), "\u20AC")), h("div", { key: '06c3fa7e43948fb35f09e6e98716cbcd7d064d6c', class: "flex items-center justify-between mt-4" }, h("div", { key: '01210645e518efbc462feebc9980d24a6c09c163', class: "flex items-center gap-2" }, h("span", { key: 'f2519b5004a17f4ea09ac6ec374b73a553706ab5', class: "text-gray-600" }, "Geldwerter Vorteil 25 Jahre")), h("span", { key: 'b4e92d010609ac4a571e2c2732f62bf8dc836133', class: "text-xl font-bold text-green-600" }, this.savedCosts25Years.toFixed(2), "\u20AC")))), h("div", { key: '8d0dba4bcddfaf4e1509713c54d6474787b6254d', class: "space-y-4 pt-4 border-t border-gray-200" }, h("h2", { key: '26c08b27f7282f261f5a4779caaba766f20a8ca4', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.requestOffer), h("div", { key: 'a9366b58ac1e04aac462f0b9e21513400c053cb0', class: "grid grid-rows-2 gap-0" }, h("div", { key: 'a49322839297e3c7593236f071a8094138a32b47', class: "grid grid-cols-2 gap-4" }, h("label", { key: '3676b60ef2f4fd8edcea20b86c9c0c0321829e95', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.name), h("label", { key: 'f41e248f056c96db5cfd225a79d1ec70ced03586', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.email)), h("div", { key: '3facacede4f9f59c96332e8caa76dd017c2640d6', class: "grid grid-cols-2 gap-4" }, h("input", { key: 'e31c14c1bdc5e50b833f1868bd03157e3919a585', type: "text", class: `w-full px-4 py-2 rounded-4xl border ${this.nameError
+            : this.autonomy.toFixed(1), "%")), h("div", { key: '8be640248569dfcae408ca9b9552d23147129203', class: "flex items-center justify-between mt-4" }, h("div", { key: 'dbfc7ce335696180abfe84e5b976cdd4e820267e', class: "flex items-center gap-2" }, h("span", { key: 'b81ab0aca1d04a307a88160215188c986da9e14e', class: "text-gray-600" }, t.solarSystemForm.costSavings), h("div", { key: 'd188d4ebfc268417cafc92513ab60dda64ee4a2c', class: "relative group" }, h("svg", { key: '432b93be3b94a02afd9594183ea7aad458851cb8', xmlns: "http://www.w3.org/2000/svg", class: "h-5 w-5 text-gray-400 cursor-help", viewBox: "0 0 20 20", fill: "currentColor" }, h("path", { key: '85c79119ab2e4986dd80ebc615067881be8aef47', "fill-rule": "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z", "clip-rule": "evenodd" })), h("div", { key: '97d984d70cc4e468c96d1efa407fbb5d907f878f', class: "absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-64 p-2 bg-gray-800 text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none" }, t.solarSystemForm
+            .savingsDisclaimer))), h("span", { key: '2ebf755861a392d0334051bc74dba3ecf3da54c8', class: "text-xl font-bold text-green-600" }, this.costSavings.toFixed(2), "\u20AC/", t
+            .solarSystemForm.year)), h("div", { key: 'e8d6aed4a3090691a8e099033e10fd7402101bd0', class: "flex items-center justify-between mt-4" }, h("div", { key: '8620e5ee6cc66670ee8edc67e31ad47f5e2e7cfc', class: "flex items-center gap-2" }, h("span", { key: '7eeb068aa83f5f022f4ae89ef101239370717fb8', class: "text-gray-600" }, "Einspeiseverg\u00FCtung 25 Jahre")), h("span", { key: '2cf06969e5e77e70059e1e9394f2d8524301929c', class: "text-xl font-bold text-green-600" }, this.compensation25Years.toFixed(2), "\u20AC")), h("div", { key: '36601f46327e20a1208647b83d58bd4dbf74d27f', class: "flex items-center justify-between mt-4" }, h("div", { key: 'a14b9f951cf78e264836c2324ca67200b00d19ca', class: "flex items-center gap-2" }, h("span", { key: 'b10ccfdd861677e499c0ca6932359aed155c77fb', class: "text-gray-600" }, "Geldwerter Vorteil 25 Jahre")), h("span", { key: '4d76e1c00dc6faf30a136d4b87a9e48b10295c21', class: "text-xl font-bold text-green-600" }, this.savedCosts25Years.toFixed(2), "\u20AC")))), h("div", { key: '86702fecf5d88cffad85540fd0a6bdf85a7d2819', class: "space-y-4 pt-4 border-t border-gray-200" }, h("h2", { key: 'e5a175e49d3005cf3550870ea701f9f2a9c01563', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.requestOffer), h("div", { key: '90835fc6003c9c3aac3599b0a84c17a4db8fb234', class: "grid grid-rows-2 gap-0" }, h("div", { key: 'e06697367b1c321538d930de33135d24bc924c25', class: "grid grid-cols-2 gap-4" }, h("label", { key: '99dd59c35f123f57b8ebfc78d0c4f7dc204fb515', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.name), h("label", { key: '0a47717b2397f4cae1540992a43bf167b2f6a9a0', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.email)), h("div", { key: 'f23dba91b9af821b44119e71cc5649f61ce3e8cb', class: "grid grid-cols-2 gap-4" }, h("input", { key: '91bfb8d4c0ec6f9bc92ae3c8b96ab8cb22338c6f', type: "text", class: `w-full px-4 py-2 rounded-4xl border ${this.nameError
                 ? "border-red-500"
                 : "border-gray-300"} focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white`, value: this.name, onInput: (e) => {
                 this.name =
                     e.target
                         .value;
                 this.validateForm();
-            }, placeholder: "Your name" }), this.nameError && (h("p", { key: '9d04539c41c625e235ba6589d7bce5599d06a39e', class: "text-red-500 text-sm mt-1" }, this.nameError)), h("input", { key: 'eb8fe3b14a98867a9f62cfd4db4b2104ae2864eb', type: "email", class: `w-full px-4 py-2 rounded-4xl border ${this.emailError
+            }, placeholder: "Your name" }), this.nameError && (h("p", { key: '393b5f1217e7f130d03ef1ce33f2c80d0ece5287', class: "text-red-500 text-sm mt-1" }, this.nameError)), h("input", { key: '3dad5518450c61625c301028e2ccac01ed3c1068', type: "email", class: `w-full px-4 py-2 rounded-4xl border ${this.emailError
                 ? "border-red-500"
                 : "border-gray-300"} focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white`, value: this.email, onInput: (e) => {
                 this.email =
                     e.target
                         .value;
                 this.validateForm();
-            }, placeholder: "your.email@example.com" }), this.emailError && (h("p", { key: '0c53594a4dc486f83fd05b09547b2a41297165bb', class: "text-red-500 text-sm mt-1" }, this.emailError)))), h("div", { key: '9a975e258e31e3b1b592b7b6bd4518be55d4c42d', class: "flex justify-center" }, h("button", { key: '5eb37544172e568838477368f62dfc84696d3ba6', onClick: () => this.handleRequestOffer(), disabled: !this.name.trim() ||
+            }, placeholder: "your.email@example.com" }), this.emailError && (h("p", { key: 'ab9abb1cf9d94af195ab1e0db0e4ae3bfa1f9dac', class: "text-red-500 text-sm mt-1" }, this.emailError)))), h("div", { key: '30e9097ad6a2ac886da307dc199ef19f3a685e4a', class: "flex justify-center" }, h("button", { key: '6a27417c30b6dc43685e03b30593a97a70c8caa0', onClick: () => this.handleRequestOffer(), disabled: !this.name.trim() ||
                 !this.email.trim() || !!this.nameError ||
                 !!this.emailError, class: "px-4 py-2 bg-[#271200] rounded-4xl hover:bg-[#964500] transition-colors duration-200", style: { color: "white" } }, t.solarSystemForm.requestOfferButton))))));
     }
@@ -342,7 +389,8 @@ export class SolarSystemForm {
             "battery": {},
             "compensation25Years": {},
             "savedCosts25Years": {},
-            "maxPanels": {}
+            "maxPanels": {},
+            "kmDrivenPerYear": {}
         };
     }
     static get watchers() {