blue-chestnut-solar-expert 0.0.22 → 0.0.24

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

@@ -143,9 +143,9 @@ export class SolarSystemForm {
             //         ? "none"
             //         : "flex",
             // }}
-            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) => {
+            id: "solar-system-form" }, h("h1", { key: '0972b02752b45df6c041612092d464e92452b98a', class: "text-2xl font-bold text-secondary mb-4 w-full" }, t.solarSystemForm.title), h("div", { key: '4c52dbb02fe992448c42eb02a329e0e5564b803c', class: "w-full bg-primary rounded-4xl p-6 space-y-6" }, h("div", { key: '3c2cf88508492490f37c653b20998304bfba2c18', class: "space-y-4" }, h("h2", { key: 'cfe3f341590f6108ba46037c0b73b44f126efd0f', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.systemInformation), h("div", { key: 'f0cd684017a6e3d3131abb9fbc4ab4e753476cb2', class: "grid grid-rows-3 gap-0" }, h("div", { key: '82cf51fc61de99e18da78ba008dabdcec3628d58', class: "grid grid-cols-2 gap-4" }, h("label", { key: '366967b6e765e98b49586a65c16837ee8f64be6f', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.numberOfPanels), h("label", { key: '106b856ad95f97707d98ae17b3ddf82fcc6a7b77', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.panelPeakPower)), h("div", { key: '0f161572faca40018ec9de3428ae3e2a624698ae', class: "grid grid-cols-2 gap-4" }, !this.isIOS()
+            ? (h("input", { type: "number", class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground", 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-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground", value: this.numberOfPanels, onInput: (e) => {
                     const value = parseInt(e.target
                         .value);
                     if (value >= 1 &&
@@ -154,37 +154,37 @@ export class SolarSystemForm {
                         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) => {
+                } })), h("input", { key: 'aeab24e38c31cfb42cf8645ac5dd6137cbb6b99b', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground", value: this.panelPeakPower, readonly: true })), h("div", { key: 'c45659a53aa8e14f6f20131d07c2c41015b5a4aa', class: "grid grid-cols-2 gap-4" }, h("div", { key: '1f467466b742dc17e3760e5aeba0e78379a5b6a8', class: "w-full pt-2" }, !this.isIOS() &&
+            (h("input", { key: '96cc91acf57870cea535401d67a5edc5a4fecaa2', 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) => {
                     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) => {
+                } }))))), h("div", { key: '7ee4bc1470263ba2ec64ed23092437c884fcd5b6', class: "bg-muted rounded-4xl p-4" }, h("div", { key: 'dbb7c15685d1d6eddaf900b3a34a69e5077b1267', class: "flex items-center justify-between" }, h("span", { key: '1190f2e3983e16e8c33691f204d4c0cc15388edd', class: "text-text-muted" }, t.solarSystemForm.totalSystemPeakPower), h("span", { key: '90aa7637936ed45bbc01af5e6340a4012404f4be', class: "text-xl font-bold text-secondary" }, (DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *
+            this.numberOfPanels).toFixed(1), " kW")))), h("div", { key: 'f6f005f65aa8e53f15ed413ef7f719cab94180d3', class: "space-y-4" }, h("h2", { key: 'ea06f893c464f9bf54125b2c2445d53603c632cd', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.householdConsumptionTitle), h("div", { key: '86baad6398558c50c5dcbdf1802508a7b48d3154', class: "grid grid-rows-2 gap-0" }, h("div", { key: 'b607928a1c76599410315522c6acf128d7a23a70', class: "grid grid-cols-2 gap-4" }, h("label", { key: '24795f49bbbf5855e7bea51f5c5f12dadab605e5', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.annualConsumption), h("label", { key: '52dc1ecbb762807fbc11b6ede8606ab4860fdb2c', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.consumptionProfileTitle)), h("div", { key: '1c9a6130eb01f0991416914846d0475a5d6274a7', class: "grid grid-cols-2 gap-4" }, h("input", { key: 'fc3736864d9ed2ea15027ffd540cc5e45f28ddf3', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground", value: this.householdConsumption, onInput: (e) => {
                 this.householdConsumption = parseInt(e.target
                     .value);
                 this.recalculate();
-            } }), 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) => {
+            } }), h("select", { key: 'c9ba1dcfeface496cf422d246f8a535caf90b21c', class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground", onChange: (e) => {
                 this.consumptionProfile =
                     e.target
                         .value;
                 this.recalculate();
-            } }, h("option", { key: 'b2d9dd9c783e5f245cc0b2543334e3be9ae5bd69', value: "mostly_at_home", selected: this.consumptionProfile ===
+            } }, h("option", { key: '7353fd6fa5b88fee3a827d219e620419b33a3e1a', value: "mostly_at_home", selected: this.consumptionProfile ===
                 "mostly_at_home" }, t.solarSystemForm.consumptionProfiles
-            .mostlyAtHome), h("option", { key: 'eb3e39a87362b3d39ca11c00449456ec677cbfc8', value: "mostly_away", selected: this.consumptionProfile ===
+            .mostlyAtHome), h("option", { key: 'bb63091b3b3c850ebbca8ba82a98df9e45e38708', value: "mostly_away", selected: this.consumptionProfile ===
                 "mostly_away" }, t.solarSystemForm.consumptionProfiles
-            .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) => {
+            .mostlyAway))))), h("div", { key: '93814a3774330bcf24ab0ce59d16fa31ff3e3b8d', class: "space-y-4" }, h("h2", { key: '6c2abe70c9d8830f731738a5715d144549b4a442', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.additionalComponents.title), h("div", { key: 'f9bbbad29cdb2519bac72812513cd0c075104ba3', class: "flex flex-col gap-4" }, h("div", { key: '89bd4e2e08dc598399a125f11ae36b7ac03a2117', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '80a82081a5d5c98d2e7490a23846d7f9a6c8346a', class: "flex items-center justify-between" }, h("div", { key: '6d24c0392d7a6e45ccc3f2ebcdf3d0d12fdcd6ad', class: "flex items-center gap-2" }, h("input", { key: 'd4244b66de0f756d768f54686e54415c062741aa', type: "checkbox", id: "heatPump", class: "w-4 h-4 accent-tertiary border-gray-300 rounded-full focus:ring-tertiary 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: '7845fc7124ea276e780ee5f0e53b0795f254e31f', htmlFor: "heatPump", class: "text-gray-600" }, t.solarSystemForm
+            } }), h("label", { key: '9c10d7836a1d03c3e42833677bb6b16c57444214', htmlFor: "heatPump", class: "text-text-muted" }, t.solarSystemForm
             .additionalComponents
-            .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) => {
+            .heatPump)), (this.heatPump > 0 && !this.isIOS()) && (h("span", { key: '05aa1682bb44f48e64663a58812fb9e105631e7a', class: "text-text-muted" }, this.heatPump, " m\u00B2"))), this.heatPump > 0 && (h("div", { key: '7fe520973be0c96d8578d354100b2e874a528798', 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-tertiary focus:border-transparent bg-muted", value: this.heatPump, onInput: (e) => {
                     const value = parseInt(e.target
                         .value);
                     if (value >= 10 &&
@@ -193,44 +193,44 @@ export class SolarSystemForm {
                             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) => {
+                } }), h("span", { class: "text-sm text-text-muted" }, "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-muted", 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) => {
+                } }))))), h("div", { key: '30caf2346f7d045d228381e3366d4fecd76916c8', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: 'a94575e1be9ecb737ba6cb5d3b5f5f537c7e979e', class: "flex items-center justify-between" }, h("div", { key: 'd86c31b017e5bf19fd9971b92f231a760dcc131a', class: "flex items-center gap-2" }, h("input", { key: '0719ff09f5a6b5a34b6cf6b54644b54a5a6a8285', type: "checkbox", id: "electricCar", class: "w-4 h-4 accent-tertiary border-gray-300 rounded focus:ring-tertiary focus:ring-offset-0 focus:ring-2", checked: this.electricCar, onChange: (e) => {
                 this.electricCar =
                     e.target
                         .checked;
                 this.recalculate();
-            } }), h("label", { key: '6df782a0b807a3c4463686804e71a65360c651ac', htmlFor: "electricCar", class: "text-gray-600" }, t.solarSystemForm
+            } }), h("label", { key: '9c4a68991e0eae216f08301d9d7f05154ce3dd81', htmlFor: "electricCar", class: "text-text-muted" }, 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
+            .electricCar))), this.electricCar && (h("div", { key: '9cd654a0808a9056182db1bc3dcc0bfe58e87aaa', class: "flex flex-col gap-2" }, h("div", { key: '8159b0a6838e542241fc19aef049c81972aab2d3', class: "grid grid-cols-2 gap-4" }, h("label", { key: '2e05407d9722ea505a807c12281e33d7a149c238', class: "text-sm text-text-muted" }, t.solarSystemForm
             .additionalComponents
-            .chargingTime), h("label", { key: 'c33783c4485f9076190f0c47992e1594a8cc3548', class: "text-sm text-gray-600" }, t.solarSystemForm
+            .chargingTime), h("label", { key: '6e0c47dbff742bab9c31f70f21ff40bb48be94ef', class: "text-sm text-text-muted" }, t.solarSystemForm
             .additionalComponents
-            .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) => {
+            .kilometersPerYear)), h("div", { key: '73625a4670dcfbad67ea71c49944f42763736a02', class: "grid grid-cols-2 gap-4" }, h("select", { key: '2c0e439fb5d5c56c9be38c674f72f24a818790e6', class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", onChange: (e) => {
                 this.electricCarChargingTime =
                     e.target
                         .value;
                 this.recalculate();
-            } }, h("option", { key: 'b25ca2e4796760fb657905e3840c073696c9ced9', value: "day", selected: this
+            } }, h("option", { key: 'db4dd978babb12922ccd16109fe5979340b4cb8e', value: "day", selected: this
                 .electricCarChargingTime ===
                 "day" }, t.solarSystemForm
             .additionalComponents
-            .chargingTimeDay), h("option", { key: '8569ac468010bf4aa8017b04855a2c3eb929f9c3', value: "night", selected: this
+            .chargingTimeDay), h("option", { key: '2038a7167c446e9545d244c7d40058a6a26cddfe', value: "night", selected: this
                 .electricCarChargingTime ===
                 "night" }, t.solarSystemForm
             .additionalComponents
-            .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) => {
+            .chargingTimeNight)), h("input", { key: '172c85052702f27664e01ed2042352cdcea5496e', 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-tertiary focus:border-transparent bg-muted", value: this.kmDrivenPerYear, onInput: (e) => {
                 this.kmDrivenPerYear =
                     parseInt(e.target
                         .value);
                 this.recalculate();
-            } }))))), 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) => {
+            } }))))), h("div", { key: 'a912cb5ce0ec49ad81686ca9e7c26eaa656882fb', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '7bbf721df9baf5474a29c833da7b43ed4f7b8526', class: "flex items-center justify-between" }, h("label", { key: '6659def780382febfba0461081b0ca8ed23b9a8b', class: "text-text-muted" }, t.solarSystemForm.additionalComponents
+            .battery), !this.isIOS() && (h("span", { key: '6efef8005f93faa641c497d1fed1095c1a02cb80', class: "text-text-muted" }, this.battery, " kWh"))), h("div", { key: '40340af8d1390650800400c04b92ba76f26add9a', 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-tertiary focus:border-transparent bg-muted", value: this.battery, onInput: (e) => {
                     const value = parseInt(e.target
                         .value);
                     if (value >= 0 &&
@@ -239,44 +239,44 @@ export class SolarSystemForm {
                             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) => {
+                }, placeholder: "Battery capacity" }), h("span", { class: "text-sm text-text-muted" }, "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-muted", 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) => {
+                } })))))), h("div", { key: '4d7fd613fd9cc27efc32889c9c9dbc88c388b20b', class: "space-y-4" }, h("h2", { key: 'f360fc63a6bc5605238f5afefc83f84fa75b5bc9', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.electricityCostsTitle), h("div", { key: '9965bdc43481024699bb3e67f126db9d00de1668', class: "grid grid-rows-2 gap-0" }, h("div", { key: 'f843661f1bbf4d95fe614f459c9944f8157ce41a', class: "grid grid-cols-3 gap-4" }, h("label", { key: 'f3ea889c003dba20cd4ccea47a9d3ba7e3139564', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.electricityPrice), h("label", { key: '7890b7ea02880952304d5aa89e6905d2694acb28', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.compensationRate), h("label", { key: 'b8e3e15772991e62933e4400458dc897b1d2cb0b', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.annualPriceIncrease)), h("div", { key: '31ba1ca8c3472f418c1ee0b5bb133c8c25d879c7', class: "grid grid-cols-3 gap-4 text-primary-foreground" }, h("input", { key: 'ebd0e2cf4ca9fe50673becc1cce15f5392fc1f6d', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", value: this.electricityPrice.toFixed(2), onInput: (e) => {
                 this.electricityPrice = parseFloat(e.target
                     .value);
                 this.recalculate();
-            } }), 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) => {
+            } }), h("input", { key: '680e9ab82f3709f64ef7f3112a669c8c036ff13c', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", value: this.compensationRate.toFixed(2), onInput: (e) => {
                 this.compensationRate = parseFloat(e.target
                     .value);
                 this.recalculate();
-            } }), 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) => {
+            } }), h("input", { key: '979a7bf13797b5d6d4c13d7817daf675867a90a5', type: "number", step: "0.1", class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", value: this.annualPriceIncrease.toFixed(1), onInput: (e) => {
                 this.annualPriceIncrease = parseFloat(e.target
                     .value);
                 this.recalculate();
-            } })))), 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
+            } })))), h("div", { key: '59b9c6e652fac3ae8e96e6faa8451dabaab5cbd9', class: "space-y-4 p-4 border border-border rounded-4xl" }, h("h2", { key: 'af81e0e13d3d737b8af89ea87f07fcaf71719da1', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.resultsTitle), h("div", { key: '4da583e8c46227758095da8a9c18ba5f121050f5', class: "bg-muted rounded-4xl p-4" }, h("div", { key: 'bf86500fb9c17a82329af4c94a5cb8221edfd529', class: "flex items-center justify-between" }, h("span", { key: '250ca2b7aae7e8175b4afda3f44538962d69d692', class: "text-text-muted" }, t.solarSystemForm.autonomy), h("span", { key: 'b17cda09be90d80c98cfcb9196be2690b7685eab', class: "text-xl font-bold text-secondary" }, this.autonomy > 100
             ? "100"
-            : 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.autonomy.toFixed(1), "%")), h("div", { key: '022068909442f3cc2b5bfad6d561fb071d762da8', class: "flex items-center justify-between mt-4" }, h("div", { key: 'e04f7302e120c169044d8325c12fa00e0ce6933d', class: "flex items-center gap-2" }, h("span", { key: 'b0557613945fcb8f854fdfe3430c2cf26b209e60', class: "text-text-muted" }, t.solarSystemForm.costSavings), h("div", { key: 'ab36a9240bc63d7d580ff7e271a7de348bccb9c9', class: "relative group" }, h("svg", { key: '6e1e253b7e340830a1807e62f06d5efe032de492', 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: 'ccd8466999aeb513036299d097a8bd6e1b0aefa0', "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: '7dcb1812df34b4e43aaa4843b1bae04a586177a1', class: "absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-64 p-2 bg-gray-800 text-muted text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none" }, t.solarSystemForm
+            .savingsDisclaimer))), h("span", { key: '95841ca5c79babb422718b7c7c7ae0f4be375b53', class: "text-xl font-bold text-success" }, this.costSavings.toFixed(2), "\u20AC/", t
+            .solarSystemForm.year)), h("div", { key: 'fb3b8dbf60b97177f883ac275f11905ff71204f7', class: "flex items-center justify-between mt-4" }, h("div", { key: 'f323402e398c6ad004e68b955850622bfd8c49a1', class: "flex items-center gap-2" }, h("span", { key: '954ab0f97db2c5410e11007254061014976138b9', class: "text-text-muted" }, "Einspeiseverg\u00FCtung 25 Jahre")), h("span", { key: '0817a48f08dc1616319ec9edddf92a143918cb4e', class: "text-xl font-bold text-success" }, this.compensation25Years.toFixed(2), "\u20AC")), h("div", { key: '97264396b8cb215dfcc101bf335f5fe5334e8818', class: "flex items-center justify-between mt-4" }, h("div", { key: 'b3376b516b92d9e807e7e4835ed850a43933b0cb', class: "flex items-center gap-2" }, h("span", { key: '85d7d56f5d6d4d199fcc60a183c8508a666980d0', class: "text-text-muted" }, "Geldwerter Vorteil 25 Jahre")), h("span", { key: '6d46adaf38514de9d02a500ea0d3f2f03969b074', class: "text-xl font-bold text-success" }, this.savedCosts25Years.toFixed(2), "\u20AC")))), h("div", { key: 'e1ddccc465c4ed07cd0727c75b0424d5562b59ca', class: "space-y-4 pt-4" }, h("h2", { key: '23001983f1f344bb8b02389b7e723d509a620db3', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.requestOffer), h("div", { key: '5febf4765ac55b6af530d50b870e10c6b62a66ee', class: "grid gap-4" }, h("div", { key: '1472213feee170225ebf41725458be7577175171', class: "grid grid-cols-2 gap-4" }, h("label", { key: 'e16155f8ba9ad10c97b45022a02a0776ab2e6c1f', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.name), h("label", { key: 'c7296bf578d483780e49a0ed88b65101716d5e29', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.email)), h("div", { key: '248016e2a7cdad117992bb8e83788cfa88b52020', class: "grid grid-cols-2 gap-4" }, h("div", { key: '588fe4128ce6fd67dcc85c59dda8a20686339664' }, h("input", { key: '04b6ae8f842c236ee3c91772a4754c29ec23f012', type: "text", class: `w-full px-4 py-2 rounded-4xl border ${this.nameError
+                ? "border-error"
+                : "border-border"} focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`, value: this.name, onInput: (e) => {
                 this.name =
                     e.target
                         .value;
                 this.validateForm();
-            }, 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) => {
+            }, placeholder: "Your name" }), this.nameError && (h("p", { key: '193f2182e3594aef71e6ff380a3049cd4477d7d4', class: "text-error text-sm mt-1" }, this.nameError))), h("div", { key: 'c9b7da8261b6a706db216987e0f43cbb8a0d2d50' }, h("input", { key: 'dc2ebde099a99f1fe095ba6d2a73b3556b042d45', type: "email", class: `w-full px-4 py-2 rounded-4xl border ${this.emailError
+                ? "border-error"
+                : "border-border"} focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`, value: this.email, onInput: (e) => {
                 this.email =
                     e.target
                         .value;
                 this.validateForm();
-            }, 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() ||
+            }, placeholder: "your.email@example.com" }), this.emailError && (h("p", { key: 'ab8081c675dca8cdd86d166f59f1d0ce8bb0b062', class: "text-error text-sm mt-1" }, this.emailError))))), h("div", { key: '36502be234be2434c054e7b40b207ab10292bcb8', class: "flex justify-center" }, h("button", { key: '991bcaeba4f6f957974d7ac77dd8a10e5813df5c', 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))))));
+                !!this.emailError, class: "px-4 py-2 bg-secondary rounded-4xl hover:bg-tertiary transition-colors duration-200 text-muted" }, t.solarSystemForm.requestOfferButton))))));
     }
     static get is() { return "solar-system-form"; }
     static get originalStyleUrls() {

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

@@ -1 +1 @@
-{"version":3,"file":"solar-system-form.js","sourceRoot":"","sources":["../../../src/components/solar-system-form/solar-system-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Watch } from \"@stencil/core\";\r\nimport { DEFAULT_SOLAR_PANEL_TYPE } from \"../../config\";\r\nimport { SolarPanelSystemPart } from \"../../utils/geometry/fitting\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { Polygon } from \"../../types/shapes\";\r\nimport { state } from \"../../store\";\r\nimport { SimulationConfig } from \"../../utils/simulation/types\";\r\nimport {\r\n    generateElectricCarChargingHours,\r\n    simulate,\r\n} from \"../../utils/simulation/simulation\";\r\n\r\n@Component({\r\n    tag: \"solar-system-form\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class SolarSystemForm {\r\n    @Prop()\r\n    systemConfigs: { [id: string]: SolarPanelSystemPart } = {};\r\n    @Prop()\r\n    roofPolygons: { [id: string]: Polygon } = {};\r\n    @Prop()\r\n    obstructionPolygons: { [id: string]: Polygon } = {};\r\n\r\n    @State()\r\n    householdConsumption: number = 4500;\r\n    @State()\r\n    consumptionProfile: \"mostly_at_home\" | \"mostly_away\" = \"mostly_at_home\";\r\n    @State()\r\n    electricityPrice: number = 0.3;\r\n    @State()\r\n    compensationRate: number = 0.07;\r\n    @State()\r\n    annualPriceIncrease: number = 2;\r\n    @State()\r\n    autonomy: number = 0;\r\n    @State()\r\n    costSavings: number = 0;\r\n    @State()\r\n    numberOfPanels: number = 5;\r\n    @State()\r\n    panelPeakPower: number = 0.4; // kW per panel\r\n    @State()\r\n    name: string = \"\";\r\n    @State()\r\n    email: string = \"\";\r\n    @State()\r\n    nameError: string = \"\";\r\n    @State()\r\n    emailError: string = \"\";\r\n    @State()\r\n    electricCar: boolean = false;\r\n    @State()\r\n    electricCarChargingTime: \"day\" | \"night\" = \"day\";\r\n    @State()\r\n    heatPump: number = 0;\r\n    @State()\r\n    battery: number = 0;\r\n\r\n    @State()\r\n    compensation25Years: number = 0;\r\n    @State()\r\n    savedCosts25Years: number = 0;\r\n    @State()\r\n    maxPanels: number = 5;\r\n    @State()\r\n    kmDrivenPerYear: number = 10000;\r\n\r\n    @Watch(\"systemConfigs\")\r\n    updateSystemConfigs() {\r\n        if (Object.keys(this.systemConfigs).length === 0) {\r\n            this.numberOfPanels = 0;\r\n            this.maxPanels = 0;\r\n            return;\r\n        }\r\n        this.numberOfPanels = Object.keys(this.systemConfigs).reduce(\r\n            (acc, curr) =>\r\n                acc + this.systemConfigs[curr].positionedPanels.length,\r\n            0,\r\n        );\r\n        this.maxPanels = Object.keys(this.systemConfigs).reduce(\r\n            (acc, curr) =>\r\n                acc + this.systemConfigs[curr].positionedPanels.length,\r\n            0,\r\n        );\r\n\r\n        this.panelPeakPower =\r\n            Object.entries(this.systemConfigs)[0][1].positionedPanels[0].panel\r\n                .kWattPeak;\r\n\r\n        this.recalculate();\r\n    }\r\n\r\n    private recalculate() {\r\n        const simulationConfig: SimulationConfig = {\r\n            general: {\r\n                simulationYears: 25,\r\n            },\r\n            householdConsumption: {\r\n                consumptionProfile: this.consumptionProfile,\r\n                winterConsumptionFactor: 1.2,\r\n                summerConsumptionFactor: 0.8,\r\n                averageConsumption: this.householdConsumption / 365,\r\n            },\r\n            electricityPrice: {\r\n                purchase: this.electricityPrice,\r\n                sell: this.compensationRate,\r\n                increase: this.annualPriceIncrease / 100,\r\n            },\r\n            solarSystem: {\r\n                numberOfPanels: this.numberOfPanels,\r\n                panelType: DEFAULT_SOLAR_PANEL_TYPE,\r\n                pitch: 30,\r\n            },\r\n            batteryKWh: this.battery,\r\n            solarRadiation: {\r\n                winterFactor: 0.2,\r\n                summerFactor: 0.6,\r\n            },\r\n            heatPump: {\r\n                m2: this.heatPump,\r\n            },\r\n            electricCar: this.electricCar\r\n                ? {\r\n                    averageKilometersPerDay: this.kmDrivenPerYear / 365,\r\n                    consumptionkWhPer100km: 17,\r\n                    batteryKWh: 20,\r\n                    chargingHours: this.electricCarChargingTime === \"day\"\r\n                        ? generateElectricCarChargingHours(6, 18)\r\n                        : generateElectricCarChargingHours(18, 6),\r\n                }\r\n                : undefined,\r\n        };\r\n\r\n        const result = simulate(simulationConfig);\r\n\r\n        this.compensation25Years = result.compensationPerDay * 365 * 25;\r\n        this.savedCosts25Years = result.byYearSavedCosts.reduce(\r\n            (acc, curr) => acc + curr,\r\n            0,\r\n        );\r\n        this.costSavings = result.compensationPerDay * 365;\r\n        this.autonomy = result.autonomy * 100;\r\n    }\r\n\r\n    componentWillLoad() {\r\n        this.updateSystemConfigs();\r\n    }\r\n\r\n    private validateForm(): boolean {\r\n        let isValid = true;\r\n        const t = getLanguageStrings(state.settings.language);\r\n\r\n        // Validate name\r\n        if (!this.name.trim()) {\r\n            this.nameError = t.solarSystemForm.nameError;\r\n            isValid = false;\r\n        } else {\r\n            this.nameError = \"\";\r\n        }\r\n\r\n        // Validate email\r\n        const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\r\n        if (!this.email.trim()) {\r\n            this.emailError = t.solarSystemForm.emailError;\r\n            isValid = false;\r\n        } else if (!emailRegex.test(this.email)) {\r\n            this.emailError = t.solarSystemForm.validEmailError;\r\n            isValid = false;\r\n        } else {\r\n            this.emailError = \"\";\r\n        }\r\n\r\n        return isValid;\r\n    }\r\n\r\n    private handleRequestOffer() {\r\n        if (!this.validateForm()) {\r\n            return;\r\n        }\r\n        // Here you can implement the logic to handle the offer request\r\n        console.log(\"Requesting offer for: \", {\r\n            name: this.name,\r\n            email: this.email,\r\n            systemConfig: this.systemConfigs,\r\n            consumption: this.householdConsumption,\r\n            autonomy: this.autonomy,\r\n            costSavings: this.costSavings,\r\n            roofPolygons: this.roofPolygons,\r\n            obstructionPolygons: this.obstructionPolygons,\r\n        });\r\n    }\r\n\r\n    private isIOS(): boolean {\r\n        return state.isIOS;\r\n    }\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n        return (\r\n            <div\r\n                class=\"flex flex-col justify-center items-center w-full h-full pt-4\" // style={{\r\n                //     display: (Object.keys(this.systemConfigs).length === 0)\r\n                //         ? \"none\"\r\n                //         : \"flex\",\r\n                // }}\r\n                id=\"solar-system-form\"\r\n            >\r\n                <h1 class=\"text-2xl font-bold text-[#271200] mb-4 w-full\">\r\n                    {t.solarSystemForm.title}\r\n                </h1>\r\n\r\n                <div class=\"w-full bg-[#f3ebda] rounded-4xl p-6 space-y-6\">\r\n                    {/* System Info Section */}\r\n                    <div class=\"space-y-4\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.systemInformation}\r\n                        </h2>\r\n                        <div class=\"grid grid-rows-3 gap-0\">\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.numberOfPanels}\r\n                                </label>\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.panelPeakPower}\r\n                                </label>\r\n                            </div>\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                {!this.isIOS()\r\n                                    ? (\r\n                                        <input\r\n                                            type=\"number\"\r\n                                            class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                            value={this.numberOfPanels}\r\n                                            readOnly\r\n                                        />\r\n                                    )\r\n                                    : (\r\n                                        <input\r\n                                            type=\"number\"\r\n                                            min=\"1\"\r\n                                            max={this.maxPanels}\r\n                                            class=\"flex-1 px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                            value={this.numberOfPanels}\r\n                                            onInput={(e) => {\r\n                                                const value = parseInt(\r\n                                                    (e.target as HTMLInputElement)\r\n                                                        .value,\r\n                                                );\r\n                                                if (\r\n                                                    value >= 1 &&\r\n                                                    value <=\r\n                                                        this.maxPanels\r\n                                                ) {\r\n                                                    this.numberOfPanels = value;\r\n                                                    this.recalculate();\r\n                                                }\r\n                                            }}\r\n                                        />\r\n                                    )}\r\n                                <input\r\n                                    type=\"number\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                    value={this.panelPeakPower}\r\n                                    readonly\r\n                                />\r\n                            </div>\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <div class=\"w-full pt-2\">\r\n                                    {!this.isIOS() &&\r\n                                        (\r\n                                            <input\r\n                                                type=\"range\"\r\n                                                min=\"1\"\r\n                                                max={this.maxPanels}\r\n                                                step=\"1\"\r\n                                                class=\"input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white\"\r\n                                                value={this.numberOfPanels}\r\n                                                onInput={(e) => {\r\n                                                    this.numberOfPanels =\r\n                                                        parseInt(\r\n                                                            (e.target as HTMLInputElement)\r\n                                                                .value,\r\n                                                        );\r\n                                                    this.recalculate();\r\n                                                }}\r\n                                            />\r\n                                        )}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"bg-white rounded-4xl p-4\">\r\n                            <div class=\"flex items-center justify-between\">\r\n                                <span class=\"text-gray-600\">\r\n                                    {t.solarSystemForm.totalSystemPeakPower}\r\n                                </span>\r\n                                <span class=\"text-xl font-bold text-[#271200]\">\r\n                                    {(DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *\r\n                                        this.numberOfPanels).toFixed(1)} kW\r\n                                </span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    {/* Household Consumption Section */}\r\n                    <div class=\"space-y-4\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.householdConsumptionTitle}\r\n                        </h2>\r\n                        <div class=\"grid grid-rows-2 gap-0\">\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <label class=\"block text-sm font-medium text-gray-600\">\r\n                                    {t.solarSystemForm.annualConsumption}\r\n                                </label>\r\n                                <label class=\"block text-sm font-medium text-gray-600\">\r\n                                    {t.solarSystemForm.consumptionProfileTitle}\r\n                                </label>\r\n                            </div>\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                    value={this.householdConsumption}\r\n                                    onInput={(e) => {\r\n                                        this.householdConsumption = parseInt(\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value,\r\n                                        );\r\n                                        this.recalculate();\r\n                                    }}\r\n                                />\r\n                                <select\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                    onChange={(e) => {\r\n                                        this.consumptionProfile =\r\n                                            (e.target as HTMLSelectElement)\r\n                                                .value as\r\n                                                    | \"mostly_at_home\"\r\n                                                    | \"mostly_away\";\r\n                                        this.recalculate();\r\n                                    }}\r\n                                >\r\n                                    <option\r\n                                        value=\"mostly_at_home\"\r\n                                        selected={this.consumptionProfile ===\r\n                                            \"mostly_at_home\"}\r\n                                    >\r\n                                        {t.solarSystemForm.consumptionProfiles\r\n                                            .mostlyAtHome}\r\n                                    </option>\r\n                                    <option\r\n                                        value=\"mostly_away\"\r\n                                        selected={this.consumptionProfile ===\r\n                                            \"mostly_away\"}\r\n                                    >\r\n                                        {t.solarSystemForm.consumptionProfiles\r\n                                            .mostlyAway}\r\n                                    </option>\r\n                                </select>\r\n                            </div>\r\n                        </div>\r\n                        {\r\n                            /* <div class=\"mt-4 h-48\">\r\n                            <canvas ref={(el) => this.chartRef = el}></canvas>\r\n                        </div> */\r\n                        }\r\n                    </div>\r\n                    <div class=\"space-y-4\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.additionalComponents.title}\r\n                        </h2>\r\n                        <div class=\"flex flex-col gap-4\">\r\n                            {/* Heat Pump Section */}\r\n                            <div class=\"flex flex-col bg-white rounded-4xl p-4 gap-4\">\r\n                                <div class=\"flex items-center justify-between\">\r\n                                    <div class=\"flex items-center gap-2\">\r\n                                        <input\r\n                                            type=\"checkbox\"\r\n                                            id=\"heatPump\"\r\n                                            class=\"w-4 h-4 accent-[#964500] border-gray-300 rounded-full focus:ring-[#964500] focus:ring-offset-0 focus:ring-2\"\r\n                                            checked={this.heatPump > 0}\r\n                                            onChange={(e) => {\r\n                                                this.heatPump =\r\n                                                    (e.target as HTMLInputElement)\r\n                                                            .checked\r\n                                                        ? 100\r\n                                                        : 0;\r\n                                                this.recalculate();\r\n                                            }}\r\n                                        />\r\n                                        <label\r\n                                            htmlFor=\"heatPump\"\r\n                                            class=\"text-gray-600\"\r\n                                        >\r\n                                            {t.solarSystemForm\r\n                                                .additionalComponents\r\n                                                .heatPump}\r\n                                        </label>\r\n                                    </div>\r\n                                    {(this.heatPump > 0 && !this.isIOS()) && (\r\n                                        <span class=\"text-gray-600\">\r\n                                            {this.heatPump} m²\r\n                                        </span>\r\n                                    )}\r\n                                </div>\r\n                                {this.heatPump > 0 && (\r\n                                    <div class=\"flex flex-col gap-2\">\r\n                                        {this.isIOS()\r\n                                            ? (\r\n                                                <div class=\"flex items-center gap-2\">\r\n                                                    <input\r\n                                                        type=\"number\"\r\n                                                        min=\"10\"\r\n                                                        max=\"300\"\r\n                                                        step=\"10\"\r\n                                                        class=\"flex-1 px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                                        value={this.heatPump}\r\n                                                        onInput={(e) => {\r\n                                                            const value =\r\n                                                                parseInt(\r\n                                                                    (e.target as HTMLInputElement)\r\n                                                                        .value,\r\n                                                                );\r\n                                                            if (\r\n                                                                value >= 10 &&\r\n                                                                value <= 300\r\n                                                            ) {\r\n                                                                this.heatPump =\r\n                                                                    value;\r\n                                                                this.recalculate();\r\n                                                            }\r\n                                                        }}\r\n                                                    />\r\n                                                    <span class=\"text-sm text-gray-600\">\r\n                                                        m²\r\n                                                    </span>\r\n                                                </div>\r\n                                            )\r\n                                            : (\r\n                                                <input\r\n                                                    type=\"range\"\r\n                                                    min=\"10\"\r\n                                                    max=\"300\"\r\n                                                    step=\"10\"\r\n                                                    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\"\r\n                                                    value={this.heatPump}\r\n                                                    onInput={(e) => {\r\n                                                        this.heatPump =\r\n                                                            parseInt(\r\n                                                                (e.target as HTMLInputElement)\r\n                                                                    .value,\r\n                                                            );\r\n                                                        this.recalculate();\r\n                                                    }}\r\n                                                />\r\n                                            )}\r\n                                    </div>\r\n                                )}\r\n                            </div>\r\n\r\n                            {/* Electric Car Section */}\r\n                            <div class=\"flex flex-col bg-white rounded-4xl p-4 gap-4\">\r\n                                <div class=\"flex items-center justify-between\">\r\n                                    <div class=\"flex items-center gap-2\">\r\n                                        <input\r\n                                            type=\"checkbox\"\r\n                                            id=\"electricCar\"\r\n                                            class=\"w-4 h-4 accent-[#964500] border-gray-300 rounded focus:ring-[#964500] focus:ring-offset-0 focus:ring-2\"\r\n                                            checked={this.electricCar}\r\n                                            onChange={(e) => {\r\n                                                this.electricCar =\r\n                                                    (e.target as HTMLInputElement)\r\n                                                        .checked;\r\n                                                this.recalculate();\r\n                                            }}\r\n                                        />\r\n                                        <label\r\n                                            htmlFor=\"electricCar\"\r\n                                            class=\"text-gray-600\"\r\n                                        >\r\n                                            {t.solarSystemForm\r\n                                                .additionalComponents\r\n                                                .electricCar}\r\n                                        </label>\r\n                                    </div>\r\n                                </div>\r\n                                {this.electricCar && (\r\n                                    <div class=\"flex flex-col gap-2\">\r\n                                        <div class=\"grid grid-cols-2 gap-4\">\r\n                                            <label class=\"text-sm text-gray-600\">\r\n                                                {t.solarSystemForm\r\n                                                    .additionalComponents\r\n                                                    .chargingTime}\r\n                                            </label>\r\n                                            <label class=\"text-sm text-gray-600\">\r\n                                                {t.solarSystemForm\r\n                                                    .additionalComponents\r\n                                                    .kilometersPerYear}\r\n                                            </label>\r\n                                        </div>\r\n                                        <div class=\"grid grid-cols-2 gap-4\">\r\n                                            <select\r\n                                                class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                                onChange={(e) => {\r\n                                                    this.electricCarChargingTime =\r\n                                                        (e.target as HTMLSelectElement)\r\n                                                            .value as\r\n                                                                | \"day\"\r\n                                                                | \"night\";\r\n                                                    this.recalculate();\r\n                                                }}\r\n                                            >\r\n                                                <option\r\n                                                    value=\"day\"\r\n                                                    selected={this\r\n                                                        .electricCarChargingTime ===\r\n                                                        \"day\"}\r\n                                                >\r\n                                                    {t.solarSystemForm\r\n                                                        .additionalComponents\r\n                                                        .chargingTimeDay}\r\n                                                </option>\r\n                                                <option\r\n                                                    value=\"night\"\r\n                                                    selected={this\r\n                                                        .electricCarChargingTime ===\r\n                                                        \"night\"}\r\n                                                >\r\n                                                    {t.solarSystemForm\r\n                                                        .additionalComponents\r\n                                                        .chargingTimeNight}\r\n                                                </option>\r\n                                            </select>\r\n                                            <input\r\n                                                type=\"number\"\r\n                                                min=\"1000\"\r\n                                                max=\"50000\"\r\n                                                step=\"1000\"\r\n                                                class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                                value={this.kmDrivenPerYear}\r\n                                                onInput={(e) => {\r\n                                                    this.kmDrivenPerYear =\r\n                                                        parseInt(\r\n                                                            (e.target as HTMLInputElement)\r\n                                                                .value,\r\n                                                        );\r\n                                                    this.recalculate();\r\n                                                }}\r\n                                            />\r\n                                        </div>\r\n                                    </div>\r\n                                )}\r\n                            </div>\r\n\r\n                            {/* Battery Section */}\r\n                            <div class=\"flex flex-col bg-white rounded-4xl p-4 gap-4\">\r\n                                <div class=\"flex items-center justify-between\">\r\n                                    <label class=\"text-gray-600\">\r\n                                        {t.solarSystemForm.additionalComponents\r\n                                            .battery}\r\n                                    </label>\r\n                                    {!this.isIOS() && (\r\n                                        <span class=\"text-gray-600\">\r\n                                            {this.battery} kWh\r\n                                        </span>\r\n                                    )}\r\n                                </div>\r\n                                <div class=\"flex flex-col gap-2\">\r\n                                    {this.isIOS()\r\n                                        ? (\r\n                                            <div class=\"flex items-center gap-2\">\r\n                                                <input\r\n                                                    type=\"number\"\r\n                                                    min=\"0\"\r\n                                                    max=\"20\"\r\n                                                    step=\"1\"\r\n                                                    class=\"flex-1 px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                                    value={this.battery}\r\n                                                    onInput={(e) => {\r\n                                                        const value = parseInt(\r\n                                                            (e.target as HTMLInputElement)\r\n                                                                .value,\r\n                                                        );\r\n                                                        if (\r\n                                                            value >= 0 &&\r\n                                                            value <= 20\r\n                                                        ) {\r\n                                                            this.battery =\r\n                                                                value;\r\n                                                            this.recalculate();\r\n                                                        }\r\n                                                    }}\r\n                                                    placeholder=\"Battery capacity\"\r\n                                                />\r\n                                                <span class=\"text-sm text-gray-600\">\r\n                                                    kWh\r\n                                                </span>\r\n                                            </div>\r\n                                        )\r\n                                        : (\r\n                                            <input\r\n                                                type=\"range\"\r\n                                                min=\"0\"\r\n                                                max=\"20\"\r\n                                                step=\"1\"\r\n                                                class=\"input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white\"\r\n                                                value={this.battery}\r\n                                                onInput={(e) => {\r\n                                                    this.battery = parseInt(\r\n                                                        (e.target as HTMLInputElement)\r\n                                                            .value,\r\n                                                    );\r\n                                                    this.recalculate();\r\n                                                }}\r\n                                            />\r\n                                        )}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    {/* Electricity Price and Compensation Section */}\r\n                    <div class=\"space-y-4\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.electricityCostsTitle}\r\n                        </h2>\r\n                        <div class=\"grid grid-rows-2 gap-0\">\r\n                            <div class=\"grid grid-cols-3 gap-4\">\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.electricityPrice}\r\n                                </label>\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.compensationRate}\r\n                                </label>\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.annualPriceIncrease}\r\n                                </label>\r\n                            </div>\r\n                            <div class=\"grid grid-cols-3 gap-4\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    step=\"0.01\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                    value={this.electricityPrice.toFixed(2)}\r\n                                    onInput={(e) => {\r\n                                        this.electricityPrice = parseFloat(\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value,\r\n                                        );\r\n                                        this.recalculate();\r\n                                    }}\r\n                                />\r\n                                <input\r\n                                    type=\"number\"\r\n                                    step=\"0.01\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                    value={this.compensationRate.toFixed(2)}\r\n                                    onInput={(e) => {\r\n                                        this.compensationRate = parseFloat(\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value,\r\n                                        );\r\n                                        this.recalculate();\r\n                                    }}\r\n                                />\r\n                                <input\r\n                                    type=\"number\"\r\n                                    step=\"0.1\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                    value={this.annualPriceIncrease.toFixed(1)}\r\n                                    onInput={(e) => {\r\n                                        this.annualPriceIncrease = parseFloat(\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value,\r\n                                        );\r\n                                        this.recalculate();\r\n                                    }}\r\n                                />\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    {/* Results Section */}\r\n                    <div class=\"space-y-4 pt-4 border-t border-gray-200\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.resultsTitle}\r\n                        </h2>\r\n                        <div class=\"bg-white rounded-4xl p-4\">\r\n                            <div class=\"flex items-center justify-between\">\r\n                                <span class=\"text-gray-600\">\r\n                                    {t.solarSystemForm.autonomy}\r\n                                </span>\r\n                                <span class=\"text-xl font-bold text-[#271200]\">\r\n                                    {this.autonomy > 100\r\n                                        ? \"100\"\r\n                                        : this.autonomy.toFixed(1)}%\r\n                                </span>\r\n                            </div>\r\n                            <div class=\"flex items-center justify-between mt-4\">\r\n                                <div class=\"flex items-center gap-2\">\r\n                                    <span class=\"text-gray-600\">\r\n                                        {t.solarSystemForm.costSavings}\r\n                                    </span>\r\n                                    <div class=\"relative group\">\r\n                                        <svg\r\n                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                            class=\"h-5 w-5 text-gray-400 cursor-help\"\r\n                                            viewBox=\"0 0 20 20\"\r\n                                            fill=\"currentColor\"\r\n                                        >\r\n                                            <path\r\n                                                fill-rule=\"evenodd\"\r\n                                                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\"\r\n                                                clip-rule=\"evenodd\"\r\n                                            />\r\n                                        </svg>\r\n                                        <div 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\">\r\n                                            {t.solarSystemForm\r\n                                                .savingsDisclaimer}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <span class=\"text-xl font-bold text-green-600\">\r\n                                    {this.costSavings.toFixed(2)}€/{t\r\n                                        .solarSystemForm.year}\r\n                                </span>\r\n                            </div>\r\n                            <div class=\"flex items-center justify-between mt-4\">\r\n                                <div class=\"flex items-center gap-2\">\r\n                                    <span class=\"text-gray-600\">\r\n                                        Einspeisevergütung 25 Jahre\r\n                                    </span>\r\n                                </div>\r\n                                <span class=\"text-xl font-bold text-green-600\">\r\n                                    {this.compensation25Years.toFixed(2)}€\r\n                                </span>\r\n                            </div>\r\n                            <div class=\"flex items-center justify-between mt-4\">\r\n                                <div class=\"flex items-center gap-2\">\r\n                                    <span class=\"text-gray-600\">\r\n                                        Geldwerter Vorteil 25 Jahre\r\n                                    </span>\r\n                                </div>\r\n                                <span class=\"text-xl font-bold text-green-600\">\r\n                                    {this.savedCosts25Years.toFixed(2)}€\r\n                                </span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    {/* Contact Information Section */}\r\n                    <div class=\"space-y-4 pt-4 border-t border-gray-200\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.requestOffer}\r\n                        </h2>\r\n                        <div class=\"grid grid-rows-2 gap-0\">\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.name}\r\n                                </label>\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.email}\r\n                                </label>\r\n                            </div>\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <input\r\n                                    type=\"text\"\r\n                                    class={`w-full px-4 py-2 rounded-4xl border ${\r\n                                        this.nameError\r\n                                            ? \"border-red-500\"\r\n                                            : \"border-gray-300\"\r\n                                    } focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white`}\r\n                                    value={this.name}\r\n                                    onInput={(e) => {\r\n                                        this.name =\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value;\r\n                                        this.validateForm();\r\n                                    }}\r\n                                    placeholder=\"Your name\"\r\n                                />\r\n                                {this.nameError && (\r\n                                    <p class=\"text-red-500 text-sm mt-1\">\r\n                                        {this.nameError}\r\n                                    </p>\r\n                                )}\r\n                                <input\r\n                                    type=\"email\"\r\n                                    class={`w-full px-4 py-2 rounded-4xl border ${\r\n                                        this.emailError\r\n                                            ? \"border-red-500\"\r\n                                            : \"border-gray-300\"\r\n                                    } focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white`}\r\n                                    value={this.email}\r\n                                    onInput={(e) => {\r\n                                        this.email =\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value;\r\n                                        this.validateForm();\r\n                                    }}\r\n                                    placeholder=\"your.email@example.com\"\r\n                                />\r\n                                {this.emailError && (\r\n                                    <p class=\"text-red-500 text-sm mt-1\">\r\n                                        {this.emailError}\r\n                                    </p>\r\n                                )}\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"flex justify-center\">\r\n                            <button\r\n                                onClick={() => this.handleRequestOffer()}\r\n                                disabled={!this.name.trim() ||\r\n                                    !this.email.trim() || !!this.nameError ||\r\n                                    !!this.emailError}\r\n                                class=\"px-4 py-2 bg-[#271200] rounded-4xl hover:bg-[#964500] transition-colors duration-200\"\r\n                                style={{ color: \"white\" }}\r\n                            >\r\n                                {t.solarSystemForm.requestOfferButton}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"solar-system-form.js","sourceRoot":"","sources":["../../../src/components/solar-system-form/solar-system-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Watch } from \"@stencil/core\";\r\nimport { DEFAULT_SOLAR_PANEL_TYPE } from \"../../config\";\r\nimport { SolarPanelSystemPart } from \"../../utils/geometry/fitting\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { Polygon } from \"../../types/shapes\";\r\nimport { state } from \"../../store\";\r\nimport { SimulationConfig } from \"../../utils/simulation/types\";\r\nimport {\r\n    generateElectricCarChargingHours,\r\n    simulate,\r\n} from \"../../utils/simulation/simulation\";\r\n\r\n@Component({\r\n    tag: \"solar-system-form\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class SolarSystemForm {\r\n    @Prop()\r\n    systemConfigs: { [id: string]: SolarPanelSystemPart } = {};\r\n    @Prop()\r\n    roofPolygons: { [id: string]: Polygon } = {};\r\n    @Prop()\r\n    obstructionPolygons: { [id: string]: Polygon } = {};\r\n\r\n    @State()\r\n    householdConsumption: number = 4500;\r\n    @State()\r\n    consumptionProfile: \"mostly_at_home\" | \"mostly_away\" = \"mostly_at_home\";\r\n    @State()\r\n    electricityPrice: number = 0.3;\r\n    @State()\r\n    compensationRate: number = 0.07;\r\n    @State()\r\n    annualPriceIncrease: number = 2;\r\n    @State()\r\n    autonomy: number = 0;\r\n    @State()\r\n    costSavings: number = 0;\r\n    @State()\r\n    numberOfPanels: number = 5;\r\n    @State()\r\n    panelPeakPower: number = 0.4; // kW per panel\r\n    @State()\r\n    name: string = \"\";\r\n    @State()\r\n    email: string = \"\";\r\n    @State()\r\n    nameError: string = \"\";\r\n    @State()\r\n    emailError: string = \"\";\r\n    @State()\r\n    electricCar: boolean = false;\r\n    @State()\r\n    electricCarChargingTime: \"day\" | \"night\" = \"day\";\r\n    @State()\r\n    heatPump: number = 0;\r\n    @State()\r\n    battery: number = 0;\r\n\r\n    @State()\r\n    compensation25Years: number = 0;\r\n    @State()\r\n    savedCosts25Years: number = 0;\r\n    @State()\r\n    maxPanels: number = 5;\r\n    @State()\r\n    kmDrivenPerYear: number = 10000;\r\n\r\n    @Watch(\"systemConfigs\")\r\n    updateSystemConfigs() {\r\n        if (Object.keys(this.systemConfigs).length === 0) {\r\n            this.numberOfPanels = 0;\r\n            this.maxPanels = 0;\r\n            return;\r\n        }\r\n        this.numberOfPanels = Object.keys(this.systemConfigs).reduce(\r\n            (acc, curr) =>\r\n                acc + this.systemConfigs[curr].positionedPanels.length,\r\n            0,\r\n        );\r\n        this.maxPanels = Object.keys(this.systemConfigs).reduce(\r\n            (acc, curr) =>\r\n                acc + this.systemConfigs[curr].positionedPanels.length,\r\n            0,\r\n        );\r\n\r\n        this.panelPeakPower =\r\n            Object.entries(this.systemConfigs)[0][1].positionedPanels[0].panel\r\n                .kWattPeak;\r\n\r\n        this.recalculate();\r\n    }\r\n\r\n    private recalculate() {\r\n        const simulationConfig: SimulationConfig = {\r\n            general: {\r\n                simulationYears: 25,\r\n            },\r\n            householdConsumption: {\r\n                consumptionProfile: this.consumptionProfile,\r\n                winterConsumptionFactor: 1.2,\r\n                summerConsumptionFactor: 0.8,\r\n                averageConsumption: this.householdConsumption / 365,\r\n            },\r\n            electricityPrice: {\r\n                purchase: this.electricityPrice,\r\n                sell: this.compensationRate,\r\n                increase: this.annualPriceIncrease / 100,\r\n            },\r\n            solarSystem: {\r\n                numberOfPanels: this.numberOfPanels,\r\n                panelType: DEFAULT_SOLAR_PANEL_TYPE,\r\n                pitch: 30,\r\n            },\r\n            batteryKWh: this.battery,\r\n            solarRadiation: {\r\n                winterFactor: 0.2,\r\n                summerFactor: 0.6,\r\n            },\r\n            heatPump: {\r\n                m2: this.heatPump,\r\n            },\r\n            electricCar: this.electricCar\r\n                ? {\r\n                    averageKilometersPerDay: this.kmDrivenPerYear / 365,\r\n                    consumptionkWhPer100km: 17,\r\n                    batteryKWh: 20,\r\n                    chargingHours: this.electricCarChargingTime === \"day\"\r\n                        ? generateElectricCarChargingHours(6, 18)\r\n                        : generateElectricCarChargingHours(18, 6),\r\n                }\r\n                : undefined,\r\n        };\r\n\r\n        const result = simulate(simulationConfig);\r\n\r\n        this.compensation25Years = result.compensationPerDay * 365 * 25;\r\n        this.savedCosts25Years = result.byYearSavedCosts.reduce(\r\n            (acc, curr) => acc + curr,\r\n            0,\r\n        );\r\n        this.costSavings = result.compensationPerDay * 365;\r\n        this.autonomy = result.autonomy * 100;\r\n    }\r\n\r\n    componentWillLoad() {\r\n        this.updateSystemConfigs();\r\n    }\r\n\r\n    private validateForm(): boolean {\r\n        let isValid = true;\r\n        const t = getLanguageStrings(state.settings.language);\r\n\r\n        // Validate name\r\n        if (!this.name.trim()) {\r\n            this.nameError = t.solarSystemForm.nameError;\r\n            isValid = false;\r\n        } else {\r\n            this.nameError = \"\";\r\n        }\r\n\r\n        // Validate email\r\n        const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\r\n        if (!this.email.trim()) {\r\n            this.emailError = t.solarSystemForm.emailError;\r\n            isValid = false;\r\n        } else if (!emailRegex.test(this.email)) {\r\n            this.emailError = t.solarSystemForm.validEmailError;\r\n            isValid = false;\r\n        } else {\r\n            this.emailError = \"\";\r\n        }\r\n\r\n        return isValid;\r\n    }\r\n\r\n    private handleRequestOffer() {\r\n        if (!this.validateForm()) {\r\n            return;\r\n        }\r\n        // Here you can implement the logic to handle the offer request\r\n        console.log(\"Requesting offer for: \", {\r\n            name: this.name,\r\n            email: this.email,\r\n            systemConfig: this.systemConfigs,\r\n            consumption: this.householdConsumption,\r\n            autonomy: this.autonomy,\r\n            costSavings: this.costSavings,\r\n            roofPolygons: this.roofPolygons,\r\n            obstructionPolygons: this.obstructionPolygons,\r\n        });\r\n    }\r\n\r\n    private isIOS(): boolean {\r\n        return state.isIOS;\r\n    }\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n        return (\r\n            <div\r\n                class=\"flex flex-col justify-center items-center w-full h-full pt-4\" // style={{\r\n                //     display: (Object.keys(this.systemConfigs).length === 0)\r\n                //         ? \"none\"\r\n                //         : \"flex\",\r\n                // }}\r\n                id=\"solar-system-form\"\r\n            >\r\n                <h1 class=\"text-2xl font-bold text-secondary mb-4 w-full\">\r\n                    {t.solarSystemForm.title}\r\n                </h1>\r\n\r\n                <div class=\"w-full bg-primary rounded-4xl p-6 space-y-6\">\r\n                    {/* System Info Section */}\r\n                    <div class=\"space-y-4\">\r\n                        <h2 class=\"text-lg font-semibold text-secondary\">\r\n                            {t.solarSystemForm.systemInformation}\r\n                        </h2>\r\n                        <div class=\"grid grid-rows-3 gap-0\">\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <label class=\"block text-sm font-medium text-text-muted mb-1\">\r\n                                    {t.solarSystemForm.numberOfPanels}\r\n                                </label>\r\n                                <label class=\"block text-sm font-medium text-text-muted mb-1\">\r\n                                    {t.solarSystemForm.panelPeakPower}\r\n                                </label>\r\n                            </div>\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                {!this.isIOS()\r\n                                    ? (\r\n                                        <input\r\n                                            type=\"number\"\r\n                                            class=\"w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground\"\r\n                                            value={this.numberOfPanels}\r\n                                            readOnly\r\n                                        />\r\n                                    )\r\n                                    : (\r\n                                        <input\r\n                                            type=\"number\"\r\n                                            min=\"1\"\r\n                                            max={this.maxPanels}\r\n                                            class=\"flex-1 px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground\"\r\n                                            value={this.numberOfPanels}\r\n                                            onInput={(e) => {\r\n                                                const value = parseInt(\r\n                                                    (e.target as HTMLInputElement)\r\n                                                        .value,\r\n                                                );\r\n                                                if (\r\n                                                    value >= 1 &&\r\n                                                    value <=\r\n                                                        this.maxPanels\r\n                                                ) {\r\n                                                    this.numberOfPanels = value;\r\n                                                    this.recalculate();\r\n                                                }\r\n                                            }}\r\n                                        />\r\n                                    )}\r\n                                <input\r\n                                    type=\"number\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground\"\r\n                                    value={this.panelPeakPower}\r\n                                    readonly\r\n                                />\r\n                            </div>\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <div class=\"w-full pt-2\">\r\n                                    {!this.isIOS() &&\r\n                                        (\r\n                                            <input\r\n                                                type=\"range\"\r\n                                                min=\"1\"\r\n                                                max={this.maxPanels}\r\n                                                step=\"1\"\r\n                                                class=\"input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-muted\"\r\n                                                value={this.numberOfPanels}\r\n                                                onInput={(e) => {\r\n                                                    this.numberOfPanels =\r\n                                                        parseInt(\r\n                                                            (e.target as HTMLInputElement)\r\n                                                                .value,\r\n                                                        );\r\n                                                    this.recalculate();\r\n                                                }}\r\n                                            />\r\n                                        )}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"bg-muted rounded-4xl p-4\">\r\n                            <div class=\"flex items-center justify-between\">\r\n                                <span class=\"text-text-muted\">\r\n                                    {t.solarSystemForm.totalSystemPeakPower}\r\n                                </span>\r\n                                <span class=\"text-xl font-bold text-secondary\">\r\n                                    {(DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *\r\n                                        this.numberOfPanels).toFixed(1)} kW\r\n                                </span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    {/* Household Consumption Section */}\r\n                    <div class=\"space-y-4\">\r\n                        <h2 class=\"text-lg font-semibold text-secondary\">\r\n                            {t.solarSystemForm.householdConsumptionTitle}\r\n                        </h2>\r\n                        <div class=\"grid grid-rows-2 gap-0\">\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <label class=\"block text-sm font-medium text-text-muted\">\r\n                                    {t.solarSystemForm.annualConsumption}\r\n                                </label>\r\n                                <label class=\"block text-sm font-medium text-text-muted\">\r\n                                    {t.solarSystemForm.consumptionProfileTitle}\r\n                                </label>\r\n                            </div>\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground\"\r\n                                    value={this.householdConsumption}\r\n                                    onInput={(e) => {\r\n                                        this.householdConsumption = parseInt(\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value,\r\n                                        );\r\n                                        this.recalculate();\r\n                                    }}\r\n                                />\r\n                                <select\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground\"\r\n                                    onChange={(e) => {\r\n                                        this.consumptionProfile =\r\n                                            (e.target as HTMLSelectElement)\r\n                                                .value as\r\n                                                    | \"mostly_at_home\"\r\n                                                    | \"mostly_away\";\r\n                                        this.recalculate();\r\n                                    }}\r\n                                >\r\n                                    <option\r\n                                        value=\"mostly_at_home\"\r\n                                        selected={this.consumptionProfile ===\r\n                                            \"mostly_at_home\"}\r\n                                    >\r\n                                        {t.solarSystemForm.consumptionProfiles\r\n                                            .mostlyAtHome}\r\n                                    </option>\r\n                                    <option\r\n                                        value=\"mostly_away\"\r\n                                        selected={this.consumptionProfile ===\r\n                                            \"mostly_away\"}\r\n                                    >\r\n                                        {t.solarSystemForm.consumptionProfiles\r\n                                            .mostlyAway}\r\n                                    </option>\r\n                                </select>\r\n                            </div>\r\n                        </div>\r\n                        {\r\n                            /* <div class=\"mt-4 h-48\">\r\n                            <canvas ref={(el) => this.chartRef = el}></canvas>\r\n                        </div> */\r\n                        }\r\n                    </div>\r\n                    <div class=\"space-y-4\">\r\n                        <h2 class=\"text-lg font-semibold text-secondary\">\r\n                            {t.solarSystemForm.additionalComponents.title}\r\n                        </h2>\r\n                        <div class=\"flex flex-col gap-4\">\r\n                            {/* Heat Pump Section */}\r\n                            <div class=\"flex flex-col bg-muted rounded-4xl p-4 gap-4\">\r\n                                <div class=\"flex items-center justify-between\">\r\n                                    <div class=\"flex items-center gap-2\">\r\n                                        <input\r\n                                            type=\"checkbox\"\r\n                                            id=\"heatPump\"\r\n                                            class=\"w-4 h-4 accent-tertiary border-gray-300 rounded-full focus:ring-tertiary focus:ring-offset-0 focus:ring-2\"\r\n                                            checked={this.heatPump > 0}\r\n                                            onChange={(e) => {\r\n                                                this.heatPump =\r\n                                                    (e.target as HTMLInputElement)\r\n                                                            .checked\r\n                                                        ? 100\r\n                                                        : 0;\r\n                                                this.recalculate();\r\n                                            }}\r\n                                        />\r\n                                        <label\r\n                                            htmlFor=\"heatPump\"\r\n                                            class=\"text-text-muted\"\r\n                                        >\r\n                                            {t.solarSystemForm\r\n                                                .additionalComponents\r\n                                                .heatPump}\r\n                                        </label>\r\n                                    </div>\r\n                                    {(this.heatPump > 0 && !this.isIOS()) && (\r\n                                        <span class=\"text-text-muted\">\r\n                                            {this.heatPump} m²\r\n                                        </span>\r\n                                    )}\r\n                                </div>\r\n                                {this.heatPump > 0 && (\r\n                                    <div class=\"flex flex-col gap-2\">\r\n                                        {this.isIOS()\r\n                                            ? (\r\n                                                <div class=\"flex items-center gap-2\">\r\n                                                    <input\r\n                                                        type=\"number\"\r\n                                                        min=\"10\"\r\n                                                        max=\"300\"\r\n                                                        step=\"10\"\r\n                                                        class=\"flex-1 px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted\"\r\n                                                        value={this.heatPump}\r\n                                                        onInput={(e) => {\r\n                                                            const value =\r\n                                                                parseInt(\r\n                                                                    (e.target as HTMLInputElement)\r\n                                                                        .value,\r\n                                                                );\r\n                                                            if (\r\n                                                                value >= 10 &&\r\n                                                                value <= 300\r\n                                                            ) {\r\n                                                                this.heatPump =\r\n                                                                    value;\r\n                                                                this.recalculate();\r\n                                                            }\r\n                                                        }}\r\n                                                    />\r\n                                                    <span class=\"text-sm text-text-muted\">\r\n                                                        m²\r\n                                                    </span>\r\n                                                </div>\r\n                                            )\r\n                                            : (\r\n                                                <input\r\n                                                    type=\"range\"\r\n                                                    min=\"10\"\r\n                                                    max=\"300\"\r\n                                                    step=\"10\"\r\n                                                    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-muted\"\r\n                                                    value={this.heatPump}\r\n                                                    onInput={(e) => {\r\n                                                        this.heatPump =\r\n                                                            parseInt(\r\n                                                                (e.target as HTMLInputElement)\r\n                                                                    .value,\r\n                                                            );\r\n                                                        this.recalculate();\r\n                                                    }}\r\n                                                />\r\n                                            )}\r\n                                    </div>\r\n                                )}\r\n                            </div>\r\n\r\n                            {/* Electric Car Section */}\r\n                            <div class=\"flex flex-col bg-muted rounded-4xl p-4 gap-4\">\r\n                                <div class=\"flex items-center justify-between\">\r\n                                    <div class=\"flex items-center gap-2\">\r\n                                        <input\r\n                                            type=\"checkbox\"\r\n                                            id=\"electricCar\"\r\n                                            class=\"w-4 h-4 accent-tertiary border-gray-300 rounded focus:ring-tertiary focus:ring-offset-0 focus:ring-2\"\r\n                                            checked={this.electricCar}\r\n                                            onChange={(e) => {\r\n                                                this.electricCar =\r\n                                                    (e.target as HTMLInputElement)\r\n                                                        .checked;\r\n                                                this.recalculate();\r\n                                            }}\r\n                                        />\r\n                                        <label\r\n                                            htmlFor=\"electricCar\"\r\n                                            class=\"text-text-muted\"\r\n                                        >\r\n                                            {t.solarSystemForm\r\n                                                .additionalComponents\r\n                                                .electricCar}\r\n                                        </label>\r\n                                    </div>\r\n                                </div>\r\n                                {this.electricCar && (\r\n                                    <div class=\"flex flex-col gap-2\">\r\n                                        <div class=\"grid grid-cols-2 gap-4\">\r\n                                            <label class=\"text-sm text-text-muted\">\r\n                                                {t.solarSystemForm\r\n                                                    .additionalComponents\r\n                                                    .chargingTime}\r\n                                            </label>\r\n                                            <label class=\"text-sm text-text-muted\">\r\n                                                {t.solarSystemForm\r\n                                                    .additionalComponents\r\n                                                    .kilometersPerYear}\r\n                                            </label>\r\n                                        </div>\r\n                                        <div class=\"grid grid-cols-2 gap-4\">\r\n                                            <select\r\n                                                class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted\"\r\n                                                onChange={(e) => {\r\n                                                    this.electricCarChargingTime =\r\n                                                        (e.target as HTMLSelectElement)\r\n                                                            .value as\r\n                                                                | \"day\"\r\n                                                                | \"night\";\r\n                                                    this.recalculate();\r\n                                                }}\r\n                                            >\r\n                                                <option\r\n                                                    value=\"day\"\r\n                                                    selected={this\r\n                                                        .electricCarChargingTime ===\r\n                                                        \"day\"}\r\n                                                >\r\n                                                    {t.solarSystemForm\r\n                                                        .additionalComponents\r\n                                                        .chargingTimeDay}\r\n                                                </option>\r\n                                                <option\r\n                                                    value=\"night\"\r\n                                                    selected={this\r\n                                                        .electricCarChargingTime ===\r\n                                                        \"night\"}\r\n                                                >\r\n                                                    {t.solarSystemForm\r\n                                                        .additionalComponents\r\n                                                        .chargingTimeNight}\r\n                                                </option>\r\n                                            </select>\r\n                                            <input\r\n                                                type=\"number\"\r\n                                                min=\"1000\"\r\n                                                max=\"50000\"\r\n                                                step=\"1000\"\r\n                                                class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted\"\r\n                                                value={this.kmDrivenPerYear}\r\n                                                onInput={(e) => {\r\n                                                    this.kmDrivenPerYear =\r\n                                                        parseInt(\r\n                                                            (e.target as HTMLInputElement)\r\n                                                                .value,\r\n                                                        );\r\n                                                    this.recalculate();\r\n                                                }}\r\n                                            />\r\n                                        </div>\r\n                                    </div>\r\n                                )}\r\n                            </div>\r\n\r\n                            {/* Battery Section */}\r\n                            <div class=\"flex flex-col bg-muted rounded-4xl p-4 gap-4\">\r\n                                <div class=\"flex items-center justify-between\">\r\n                                    <label class=\"text-text-muted\">\r\n                                        {t.solarSystemForm.additionalComponents\r\n                                            .battery}\r\n                                    </label>\r\n                                    {!this.isIOS() && (\r\n                                        <span class=\"text-text-muted\">\r\n                                            {this.battery} kWh\r\n                                        </span>\r\n                                    )}\r\n                                </div>\r\n                                <div class=\"flex flex-col gap-2\">\r\n                                    {this.isIOS()\r\n                                        ? (\r\n                                            <div class=\"flex items-center gap-2\">\r\n                                                <input\r\n                                                    type=\"number\"\r\n                                                    min=\"0\"\r\n                                                    max=\"20\"\r\n                                                    step=\"1\"\r\n                                                    class=\"flex-1 px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted\"\r\n                                                    value={this.battery}\r\n                                                    onInput={(e) => {\r\n                                                        const value = parseInt(\r\n                                                            (e.target as HTMLInputElement)\r\n                                                                .value,\r\n                                                        );\r\n                                                        if (\r\n                                                            value >= 0 &&\r\n                                                            value <= 20\r\n                                                        ) {\r\n                                                            this.battery =\r\n                                                                value;\r\n                                                            this.recalculate();\r\n                                                        }\r\n                                                    }}\r\n                                                    placeholder=\"Battery capacity\"\r\n                                                />\r\n                                                <span class=\"text-sm text-text-muted\">\r\n                                                    kWh\r\n                                                </span>\r\n                                            </div>\r\n                                        )\r\n                                        : (\r\n                                            <input\r\n                                                type=\"range\"\r\n                                                min=\"0\"\r\n                                                max=\"20\"\r\n                                                step=\"1\"\r\n                                                class=\"input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-muted\"\r\n                                                value={this.battery}\r\n                                                onInput={(e) => {\r\n                                                    this.battery = parseInt(\r\n                                                        (e.target as HTMLInputElement)\r\n                                                            .value,\r\n                                                    );\r\n                                                    this.recalculate();\r\n                                                }}\r\n                                            />\r\n                                        )}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    {/* Electricity Price and Compensation Section */}\r\n                    <div class=\"space-y-4\">\r\n                        <h2 class=\"text-lg font-semibold text-secondary\">\r\n                            {t.solarSystemForm.electricityCostsTitle}\r\n                        </h2>\r\n                        <div class=\"grid grid-rows-2 gap-0\">\r\n                            <div class=\"grid grid-cols-3 gap-4\">\r\n                                <label class=\"block text-sm font-medium text-text-muted mb-1\">\r\n                                    {t.solarSystemForm.electricityPrice}\r\n                                </label>\r\n                                <label class=\"block text-sm font-medium text-text-muted mb-1\">\r\n                                    {t.solarSystemForm.compensationRate}\r\n                                </label>\r\n                                <label class=\"block text-sm font-medium text-text-muted mb-1\">\r\n                                    {t.solarSystemForm.annualPriceIncrease}\r\n                                </label>\r\n                            </div>\r\n                            <div class=\"grid grid-cols-3 gap-4 text-primary-foreground\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    step=\"0.01\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted\"\r\n                                    value={this.electricityPrice.toFixed(2)}\r\n                                    onInput={(e) => {\r\n                                        this.electricityPrice = parseFloat(\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value,\r\n                                        );\r\n                                        this.recalculate();\r\n                                    }}\r\n                                />\r\n                                <input\r\n                                    type=\"number\"\r\n                                    step=\"0.01\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted\"\r\n                                    value={this.compensationRate.toFixed(2)}\r\n                                    onInput={(e) => {\r\n                                        this.compensationRate = parseFloat(\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value,\r\n                                        );\r\n                                        this.recalculate();\r\n                                    }}\r\n                                />\r\n                                <input\r\n                                    type=\"number\"\r\n                                    step=\"0.1\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted\"\r\n                                    value={this.annualPriceIncrease.toFixed(1)}\r\n                                    onInput={(e) => {\r\n                                        this.annualPriceIncrease = parseFloat(\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value,\r\n                                        );\r\n                                        this.recalculate();\r\n                                    }}\r\n                                />\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    {/* Results Section */}\r\n                    <div class=\"space-y-4 p-4 border border-border rounded-4xl\">\r\n                        <h2 class=\"text-lg font-semibold text-secondary\">\r\n                            {t.solarSystemForm.resultsTitle}\r\n                        </h2>\r\n                        <div class=\"bg-muted rounded-4xl p-4\">\r\n                            <div class=\"flex items-center justify-between\">\r\n                                <span class=\"text-text-muted\">\r\n                                    {t.solarSystemForm.autonomy}\r\n                                </span>\r\n                                <span class=\"text-xl font-bold text-secondary\">\r\n                                    {this.autonomy > 100\r\n                                        ? \"100\"\r\n                                        : this.autonomy.toFixed(1)}%\r\n                                </span>\r\n                            </div>\r\n                            <div class=\"flex items-center justify-between mt-4\">\r\n                                <div class=\"flex items-center gap-2\">\r\n                                    <span class=\"text-text-muted\">\r\n                                        {t.solarSystemForm.costSavings}\r\n                                    </span>\r\n                                    <div class=\"relative group\">\r\n                                        <svg\r\n                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                            class=\"h-5 w-5 text-gray-400 cursor-help\"\r\n                                            viewBox=\"0 0 20 20\"\r\n                                            fill=\"currentColor\"\r\n                                        >\r\n                                            <path\r\n                                                fill-rule=\"evenodd\"\r\n                                                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\"\r\n                                                clip-rule=\"evenodd\"\r\n                                            />\r\n                                        </svg>\r\n                                        <div class=\"absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-64 p-2 bg-gray-800 text-muted text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none\">\r\n                                            {t.solarSystemForm\r\n                                                .savingsDisclaimer}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <span class=\"text-xl font-bold text-success\">\r\n                                    {this.costSavings.toFixed(2)}€/{t\r\n                                        .solarSystemForm.year}\r\n                                </span>\r\n                            </div>\r\n                            <div class=\"flex items-center justify-between mt-4\">\r\n                                <div class=\"flex items-center gap-2\">\r\n                                    <span class=\"text-text-muted\">\r\n                                        Einspeisevergütung 25 Jahre\r\n                                    </span>\r\n                                </div>\r\n                                <span class=\"text-xl font-bold text-success\">\r\n                                    {this.compensation25Years.toFixed(2)}€\r\n                                </span>\r\n                            </div>\r\n                            <div class=\"flex items-center justify-between mt-4\">\r\n                                <div class=\"flex items-center gap-2\">\r\n                                    <span class=\"text-text-muted\">\r\n                                        Geldwerter Vorteil 25 Jahre\r\n                                    </span>\r\n                                </div>\r\n                                <span class=\"text-xl font-bold text-success\">\r\n                                    {this.savedCosts25Years.toFixed(2)}€\r\n                                </span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    {/* Contact Information Section */}\r\n                    <div class=\"space-y-4 pt-4\">\r\n                        <h2 class=\"text-lg font-semibold text-secondary\">\r\n                            {t.solarSystemForm.requestOffer}\r\n                        </h2>\r\n                        <div class=\"grid gap-4\">\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <label class=\"block text-sm font-medium text-text-muted mb-1\">\r\n                                    {t.solarSystemForm.name}\r\n                                </label>\r\n                                <label class=\"block text-sm font-medium text-text-muted mb-1\">\r\n                                    {t.solarSystemForm.email}\r\n                                </label>\r\n                            </div>\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <div>\r\n                                    <input\r\n                                        type=\"text\"\r\n                                        class={`w-full px-4 py-2 rounded-4xl border ${\r\n                                            this.nameError\r\n                                                ? \"border-error\"\r\n                                                : \"border-border\"\r\n                                        } focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`}\r\n                                        value={this.name}\r\n                                        onInput={(e) => {\r\n                                            this.name =\r\n                                                (e.target as HTMLInputElement)\r\n                                                    .value;\r\n                                            this.validateForm();\r\n                                        }}\r\n                                        placeholder=\"Your name\"\r\n                                    />\r\n                                    {this.nameError && (\r\n                                        <p class=\"text-error text-sm mt-1\">\r\n                                            {this.nameError}\r\n                                        </p>\r\n                                    )}\r\n                                </div>\r\n                                <div>\r\n                                    <input\r\n                                        type=\"email\"\r\n                                        class={`w-full px-4 py-2 rounded-4xl border ${\r\n                                            this.emailError\r\n                                                ? \"border-error\"\r\n                                                : \"border-border\"\r\n                                        } focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`}\r\n                                        value={this.email}\r\n                                        onInput={(e) => {\r\n                                            this.email =\r\n                                                (e.target as HTMLInputElement)\r\n                                                    .value;\r\n                                            this.validateForm();\r\n                                        }}\r\n                                        placeholder=\"your.email@example.com\"\r\n                                    />\r\n                                    {this.emailError && (\r\n                                        <p class=\"text-error text-sm mt-1\">\r\n                                            {this.emailError}\r\n                                        </p>\r\n                                    )}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"flex justify-center\">\r\n                            <button\r\n                                onClick={() => this.handleRequestOffer()}\r\n                                disabled={!this.name.trim() ||\r\n                                    !this.email.trim() || !!this.nameError ||\r\n                                    !!this.emailError}\r\n                                class=\"px-4 py-2 bg-secondary rounded-4xl hover:bg-tertiary transition-colors duration-200 text-muted\"\r\n                            >\r\n                                {t.solarSystemForm.requestOfferButton}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/dist/collection/components/widgets/loading-widget.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class LoadingWidget {
     render() {
-        return (h("div", { key: '90187981b5843b365c5f8bf66c575f31d4fa5cca', class: "absolute flex items-center justify-center bg-white bg-opacity-75 z-20 pt-7 rounded-4xl" }, h("div", { key: 'c98e2aa7f46344897cbeeb85cabb8d962fb0f138', class: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-[#271200]" })));
+        return (h("div", { key: '9352dcd45754fb5ce49405774a7cf16689ee8c10', class: "absolute flex items-center justify-center bg-muted bg-opacity-75 z-20 pt-7 rounded-4xl" }, h("div", { key: 'a8cb7bfccfd18837e44aa1ad437b94f2632e18ba', class: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-secondary" })));
     }
     static get is() { return "loading-widget"; }
     static get originalStyleUrls() {