blue-chestnut-solar-expert 0.0.18 → 0.0.20

package/dist/components/p-CmFUQbz_.js

@@ -0,0 +1,507 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+import { g as getLanguageStrings, s as state } from './p-CwVUc6Hq.js';
+
+const DOTTED_LINE_COLOR = "rgba(0, 0, 0, 0.5)";
+const ROW_SPACING = 1;
+const COLUMN_SPACING = 1;
+const BORDER_INSET = 0;
+const DEFAULT_SUNNINESS = 600;
+const HEAT_PUMP_CONSUMPTION = 0.05; // kWh per m² per day
+const CONSUMPTION_PROFILES = {
+    mostly_at_home: [
+        0.1,
+        0.1,
+        0.1,
+        0.1,
+        0.1,
+        0.15, // 00:00 - 05:00 - 6
+        0.23,
+        0.26,
+        0.16,
+        0.16,
+        0.15,
+        0.19, // 06:00 - 11:00 - 12
+        0.23,
+        0.24,
+        0.35,
+        0.28,
+        0.275,
+        0.8, // 12:00 - 17:00 - 18
+        0.78,
+        0.74,
+        0.75,
+        0.73,
+        0.26,
+        0.1, // 18:00 - 23:00 - 24
+    ],
+    mostly_away: [
+        0.1,
+        0.1,
+        0.1,
+        0.1,
+        0.1,
+        0.15, // 00:00 - 05:00 - 6
+        0.29,
+        0.32,
+        0.25,
+        0.15,
+        0.12,
+        0.14, // 06:00 - 11:00 - 12
+        0.15,
+        0.12,
+        0.16,
+        0.21,
+        0.285,
+        1, // 12:00 - 17:00 - 18
+        0.81,
+        0.77,
+        0.79,
+        0.73,
+        0.26,
+        0.1, // 18:00 - 23:00 - 24
+    ],
+};
+
+const DEFAULT_SOLAR_EXPERT_CONFIG = {
+    openRoofColor: "#d6eeff",
+    closedRoofColor: "#ffffff",
+    openObstructionColor: "#f57242",
+    closedObstructionColor: "rgba(255, 132, 107, 0.8)",
+    roofPolygonFillColor: "rgba(92, 187, 255, 0.5)",
+    obstructionPolygonFillColor: "rgba(255, 132, 107, 0.5)",
+    roofPolygonHoverFillColor: "rgba(92, 187, 255, 0.8)",
+    obstructionPolygonHoverFillColor: "rgba(255, 132, 107, 0.8)",
+    roofPolygonSelectedFillColor: "rgba(92, 187, 255, 0.7)",
+    obstructionPolygonSelectedFillColor: "rgba(255, 132, 107, 0.7)",
+    highlightColor: "rgba(0, 89, 255, 1)",
+};
+const DEFAULT_SOLAR_PANEL_TYPE = {
+    widthMeters: 1.134,
+    heightMeters: 1.762,
+    kWattPeak: 0.455,
+    efficiency: 0.224,
+    price: 77.68,
+};
+
+const SOLAR_RADIATION = [
+    0,
+    0,
+    0,
+    0,
+    0,
+    0, // 00:00 - 05:00 - 6
+    0,
+    0.1,
+    0.2, // 8
+    0.4,
+    0.8,
+    0.9, // 06:00 - 11:00 - 12
+    1,
+    0.95,
+    0.9,
+    0.7,
+    0.5,
+    0.3, // 12:00 - 17:00 - 18
+    0.16,
+    0.02,
+    0,
+    0,
+    0,
+    0, // 18:00 - 23:00 - 24
+];
+function getSolarRadiation(discountFactor) {
+    return SOLAR_RADIATION.map(value => value * discountFactor);
+}
+
+const DEFAULT_GENERAL_SIMULATION_CONFIG = {
+    simulationYears: 25,
+};
+
+function generateElectricCarChargingHours(start, end) {
+    let hours = new Array(24).fill(false);
+    if (start < end) {
+        for (let i = start; i <= end; i++) {
+            hours[i] = true;
+        }
+    }
+    else {
+        for (let i = start; i <= 24; i++) {
+            hours[i] = true;
+        }
+        for (let i = 0; i <= end; i++) {
+            hours[i] = true;
+        }
+    }
+    return hours;
+}
+function simulateDay(production, consumption, dailyConsumption, battery) {
+    let batteryCharge = 0;
+    let soldEnergy = 0;
+    let energyUsageOfProduction = 0;
+    for (let hour = 0; hour < production.length; hour++) {
+        const energyDifference = production[hour] - consumption[hour];
+        if (energyDifference > 0) {
+            energyUsageOfProduction += consumption[hour];
+            if (batteryCharge < battery) {
+                batteryCharge = Math.min(batteryCharge + energyDifference, battery);
+            }
+            else {
+                soldEnergy += energyDifference;
+            }
+        }
+        else {
+            if (batteryCharge > 0) {
+                if (batteryCharge >= -energyDifference) {
+                    batteryCharge += energyDifference;
+                    energyUsageOfProduction += consumption[hour];
+                }
+                else {
+                    energyUsageOfProduction += production[hour] + batteryCharge;
+                    soldEnergy -= energyDifference + batteryCharge;
+                    batteryCharge = 0;
+                }
+            }
+            else {
+                energyUsageOfProduction += production[hour];
+            }
+        }
+    }
+    if (batteryCharge > 0) {
+        soldEnergy += batteryCharge;
+    }
+    const autonomy = energyUsageOfProduction / dailyConsumption;
+    return {
+        autonomy: autonomy > 1 ? 1 : autonomy,
+        soldEnergy,
+        energyUsageOfProduction,
+    };
+}
+function simulate(config) {
+    const generalConfig = {
+        ...DEFAULT_GENERAL_SIMULATION_CONFIG,
+        ...config.general
+    };
+    const consumption = CONSUMPTION_PROFILES[config.householdConsumption.consumptionProfile];
+    const norm = consumption.reduce((acc, curr) => acc + curr, 0);
+    const additionalConsumption = config.heatPump?.m2 * HEAT_PUMP_CONSUMPTION || 0;
+    let electricCarConsumption = 0;
+    let electricCarNorm = 1;
+    let electricCarChargingHours = consumption.map(_ => false);
+    if (config.electricCar) {
+        electricCarChargingHours = config.electricCar.chargingHours;
+        const dailyCarUsage = config.electricCar.averageKilometersPerDay / 100 * config.electricCar.consumptionkWhPer100km;
+        electricCarConsumption = Math.min(dailyCarUsage, config.electricCar.batteryKWh);
+        electricCarNorm = config.electricCar.chargingHours.reduce((acc, curr) => acc + (curr ? 1 : 0), 0);
+        if (electricCarNorm === 0) {
+            electricCarNorm = 1;
+        }
+    }
+    const systemSize = config.solarSystem.numberOfPanels * config.solarSystem.panelType.kWattPeak;
+    const summerProduction = getSolarRadiation(config.solarRadiation.summerFactor * systemSize);
+    const winterProduction = getSolarRadiation(config.solarRadiation.winterFactor * systemSize);
+    const summerConsumptionWholeDay = config.householdConsumption.averageConsumption * config.householdConsumption.summerConsumptionFactor + additionalConsumption * config.householdConsumption.summerConsumptionFactor;
+    const summerConsumptionDaily = consumption.map((c, i) => c / norm * summerConsumptionWholeDay + electricCarConsumption / electricCarNorm * (electricCarChargingHours[i] ? 1 : 0));
+    const winterConsumptionWholeDay = config.householdConsumption.averageConsumption * config.householdConsumption.winterConsumptionFactor + additionalConsumption * config.householdConsumption.winterConsumptionFactor;
+    const winterConsumptionDaily = consumption.map((c, i) => c / norm * winterConsumptionWholeDay + electricCarConsumption / electricCarNorm * (electricCarChargingHours[i] ? 1 : 0));
+    const summerDay = simulateDay(summerProduction, summerConsumptionDaily, summerConsumptionWholeDay + electricCarConsumption, config.batteryKWh);
+    const winterDay = simulateDay(winterProduction, winterConsumptionDaily, winterConsumptionWholeDay + electricCarConsumption, config.batteryKWh);
+    let savedCostsByYear = [];
+    const soldEnergy = (summerDay.soldEnergy + winterDay.soldEnergy) / 2;
+    const ownConsumption = (summerDay.energyUsageOfProduction + winterDay.energyUsageOfProduction) / 2;
+    let energyPrice = config.electricityPrice.purchase;
+    for (let i = 0; i < generalConfig.simulationYears; i++) {
+        const savedCostsThisYear = ownConsumption * energyPrice * 365;
+        savedCostsByYear.push(savedCostsThisYear);
+        energyPrice = (1 + config.electricityPrice.increase) * energyPrice;
+    }
+    return {
+        autonomy: (summerDay.autonomy + winterDay.autonomy) / 2,
+        compensationPerDay: soldEnergy * config.electricityPrice.sell,
+        byYearSavedCosts: savedCostsByYear,
+    };
+}
+
+const outputCss = "/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .grid-rows-3 {\n    grid-template-rows: repeat(3, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-\\[\\#271200\\] {\n    border-color: #271200;\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-red-500 {\n    border-color: var(--color-red-500);\n  }\n  .bg-\\[\\#00000056\\] {\n    background-color: #00000056;\n  }\n  .bg-\\[\\#271200\\] {\n    background-color: #271200;\n  }\n  .bg-\\[\\#f3ebda\\] {\n    background-color: #f3ebda;\n  }\n  .bg-\\[\\#ffffff\\] {\n    background-color: #ffffff;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-\\[\\#271200\\] {\n    color: #271200;\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .accent-\\[\\#964500\\] {\n    accent-color: #964500;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#0000003c\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0000003c;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#3a1b00\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #3a1b00;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#271200\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #271200;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#964500\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #964500;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#ffffff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #ffffff;\n      }\n    }\n  }\n  .hover\\:bg-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-gray-500 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-500);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n  .focus\\:border-2 {\n    &:focus {\n      border-style: var(--tw-border-style);\n      border-width: 2px;\n    }\n  }\n  .focus\\:border-black {\n    &:focus {\n      border-color: var(--color-black);\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-\\[\\#271200\\] {\n    &:focus {\n      --tw-ring-color: #271200;\n    }\n  }\n  .focus\\:ring-\\[\\#964500\\] {\n    &:focus {\n      --tw-ring-color: #964500;\n    }\n  }\n  .focus\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-white {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-white);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n";
+
+const SolarSystemForm = /*@__PURE__*/ proxyCustomElement(class SolarSystemForm extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    systemConfigs = {};
+    roofPolygons = {};
+    obstructionPolygons = {};
+    householdConsumption = 4500;
+    consumptionProfile = "mostly_at_home";
+    electricityPrice = 0.3;
+    compensationRate = 0.07;
+    annualPriceIncrease = 2;
+    autonomy = 0;
+    costSavings = 0;
+    numberOfPanels = 5;
+    panelPeakPower = 0.4; // kW per panel
+    name = "";
+    email = "";
+    nameError = "";
+    emailError = "";
+    electricCar = false;
+    electricCarChargingTime = "day";
+    heatPump = 0;
+    battery = 0;
+    compensation25Years = 0;
+    savedCosts25Years = 0;
+    maxPanels = 5;
+    updateSystemConfigs() {
+        if (Object.keys(this.systemConfigs).length === 0) {
+            this.numberOfPanels = 0;
+            this.maxPanels = 0;
+            return;
+        }
+        this.numberOfPanels = Object.keys(this.systemConfigs).reduce((acc, curr) => acc + this.systemConfigs[curr].positionedPanels.length, 0);
+        this.maxPanels = Object.keys(this.systemConfigs).reduce((acc, curr) => acc + this.systemConfigs[curr].positionedPanels.length, 0);
+        this.panelPeakPower =
+            Object.entries(this.systemConfigs)[0][1].positionedPanels[0].panel
+                .kWattPeak;
+        this.recalculate();
+    }
+    recalculate() {
+        const simulationConfig = {
+            general: {
+                simulationYears: 25,
+            },
+            householdConsumption: {
+                consumptionProfile: this.consumptionProfile,
+                winterConsumptionFactor: 1.2,
+                summerConsumptionFactor: 0.8,
+                averageConsumption: this.householdConsumption / 365,
+            },
+            electricityPrice: {
+                purchase: this.electricityPrice,
+                sell: this.compensationRate,
+                increase: this.annualPriceIncrease / 100,
+            },
+            solarSystem: {
+                numberOfPanels: this.numberOfPanels,
+                panelType: DEFAULT_SOLAR_PANEL_TYPE,
+                pitch: 30,
+            },
+            batteryKWh: this.battery,
+            solarRadiation: {
+                winterFactor: 0.2,
+                summerFactor: 0.6,
+            },
+            heatPump: {
+                m2: this.heatPump,
+            },
+            electricCar: this.electricCar
+                ? {
+                    averageKilometersPerDay: 50,
+                    consumptionkWhPer100km: 17,
+                    batteryKWh: 20,
+                    chargingHours: this.electricCarChargingTime === "day"
+                        ? generateElectricCarChargingHours(6, 18)
+                        : generateElectricCarChargingHours(18, 6),
+                }
+                : undefined,
+        };
+        const result = simulate(simulationConfig);
+        this.compensation25Years = result.compensationPerDay * 365 * 25;
+        this.savedCosts25Years = result.byYearSavedCosts.reduce((acc, curr) => acc + curr, 0);
+        this.costSavings = result.compensationPerDay * 365;
+        this.autonomy = result.autonomy * 100;
+    }
+    componentWillLoad() {
+        this.updateSystemConfigs();
+    }
+    validateForm() {
+        let isValid = true;
+        const t = getLanguageStrings(state.settings.language);
+        // Validate name
+        if (!this.name.trim()) {
+            this.nameError = t.solarSystemForm.nameError;
+            isValid = false;
+        }
+        else {
+            this.nameError = "";
+        }
+        // Validate email
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!this.email.trim()) {
+            this.emailError = t.solarSystemForm.emailError;
+            isValid = false;
+        }
+        else if (!emailRegex.test(this.email)) {
+            this.emailError = t.solarSystemForm.validEmailError;
+            isValid = false;
+        }
+        else {
+            this.emailError = "";
+        }
+        return isValid;
+    }
+    handleRequestOffer() {
+        if (!this.validateForm()) {
+            return;
+        }
+        // Here you can implement the logic to handle the offer request
+        console.log("Requesting offer for: ", {
+            name: this.name,
+            email: this.email,
+            systemConfig: this.systemConfigs,
+            consumption: this.householdConsumption,
+            autonomy: this.autonomy,
+            costSavings: this.costSavings,
+            roofPolygons: this.roofPolygons,
+            obstructionPolygons: this.obstructionPolygons,
+        });
+    }
+    render() {
+        const t = getLanguageStrings(state.settings.language);
+        return (h("div", { key: '744d980cd58f2d3d04f7f3ff4938781a6c645fe5', class: "flex flex-col justify-center items-center w-full h-full pt-4" // style={{
+            ,
+            //     display: (Object.keys(this.systemConfigs).length === 0)
+            //         ? "none"
+            //         : "flex",
+            // }}
+            id: "solar-system-form" }, h("h1", { key: 'f003bc55e2f63531822bd23ac3d39946d730df69', class: "text-2xl font-bold text-[#271200] mb-4 w-full" }, t.solarSystemForm.title), h("div", { key: '20c215156baabe57b3188759741d7d20c99270ef', class: "w-full bg-[#f3ebda] rounded-4xl p-6 space-y-6" }, h("div", { key: '7372fb2f5dadd14e0bc411773598c1316b7d1607', class: "space-y-4" }, h("h2", { key: '05978eeb5b39b5e37e40cd052bb64f9f239b1a01', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.systemInformation), h("div", { key: '005128f28eee0bba612bcc5b65f81a546d52e754', class: "grid grid-rows-3 gap-0" }, h("div", { key: '9095d807e024286e0ddd505e4f0c4d6311e92f99', class: "grid grid-cols-2 gap-4" }, h("label", { key: 'ce78ba6e92916f72a53698c1372637d065010d22', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.numberOfPanels), h("label", { key: '4c2f7e8a88baa146a4f01e2dabafaea416c74acd', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.panelPeakPower)), h("div", { key: 'fc7b28c8de9de709b7116612213f993e37598b09', class: "grid grid-cols-2 gap-4" }, h("input", { key: 'b7b63eb3667e664c6b7dcf251b786a20882b500d', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.numberOfPanels, readOnly: true }), h("input", { key: 'c500aa9a91ce6b21f734d95d92532d82be154055', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.panelPeakPower, readonly: true })), h("div", { key: 'd69c51ebd1188abaf61de239ce5d537ad9115a7e', class: "grid grid-cols-2 gap-4" }, h("div", { key: 'ecac73eba72e206b678d86ba18b4ba04e72d6e2d', class: "w-full pt-2" }, h("input", { key: '48a2fda42efcbd457df3c21ba63cb73066471052', type: "range", min: "1", max: this.maxPanels, step: "1", class: "input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white", value: this.numberOfPanels, onInput: (e) => {
+                this.numberOfPanels = parseInt(e.target
+                    .value);
+                this.recalculate();
+            } })))), h("div", { key: 'b01c9bbec27359126ed3283a14e275861ca79194', class: "bg-white rounded-4xl p-4" }, h("div", { key: '4be558f4d94a68bda294dc32155df64243e3f2c7', class: "flex items-center justify-between" }, h("span", { key: '677a12d0236e17349fff064f6fad76279a51299a', class: "text-gray-600" }, t.solarSystemForm.totalSystemPeakPower), h("span", { key: '15f819a867ee238aeeb4f9cfc24b7b5e607176c8', class: "text-xl font-bold text-[#271200]" }, (DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *
+            this.numberOfPanels).toFixed(1), " kW")))), h("div", { key: '0adcb579dce8f9357c2631b4b6fa8dc0e66a5727', class: "space-y-4" }, h("h2", { key: '93ce837e4b57123e19629499d371211c82b67f17', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.householdConsumptionTitle), h("div", { key: '7c1b46ffac1807ffa75b98b9ff317250cb7f4f3f', class: "grid grid-rows-2 gap-0" }, h("div", { key: '115981c3667bdd500bb9ed9862dfcf6c57cf3488', class: "grid grid-cols-2 gap-4" }, h("label", { key: '1d36b519882a44f84f948594f2aac031c8b14785', class: "block text-sm font-medium text-gray-600" }, t.solarSystemForm.annualConsumption), h("label", { key: 'd0360fb66300f6a1048d6318ad388a28c25ede1c', class: "block text-sm font-medium text-gray-600" }, t.solarSystemForm.consumptionProfileTitle)), h("div", { key: '830c929bedc1731853b8abb4602c1a183b31c5d9', class: "grid grid-cols-2 gap-4" }, h("input", { key: '1f0625102ccf8711c5d25b8b42086ddacf0f5bce', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.householdConsumption, onInput: (e) => {
+                this.householdConsumption = parseInt(e.target
+                    .value);
+                this.recalculate();
+            } }), h("select", { key: '39cec2d7c15bd3eec6091b3dc6384ab7ed95310c', class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", onChange: (e) => {
+                this.consumptionProfile =
+                    e.target
+                        .value;
+                this.recalculate();
+            } }, h("option", { key: '74b10c47b8fefb3aee7c818d35797649cd9cf700', value: "mostly_at_home", selected: this.consumptionProfile ===
+                "mostly_at_home" }, t.solarSystemForm.consumptionProfiles
+            .mostlyAtHome), h("option", { key: '650009f75563391223500548984d7c36ad6c13b2', value: "mostly_away", selected: this.consumptionProfile ===
+                "mostly_away" }, t.solarSystemForm.consumptionProfiles
+            .mostlyAway))))), h("div", { key: '86a106ff0692fe3387ac8cd885120933b4f0e4d0', class: "space-y-4" }, h("h2", { key: 'ec07a0b6a96ed21036fb01ec15b5e14f26c05717', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.additionalComponents.title), h("div", { key: '2406008f140b2e6118a1158c40170db3049d1d0e', class: "flex flex-col gap-4" }, h("div", { key: '7e11cbbb64c167795b8f3d67e81936cbcab7e437', class: "flex flex-col bg-white rounded-4xl p-4 gap-4" }, h("div", { key: '4939f5f7fc79efadbc861f5b5d64730fe6dd08ec', class: "flex items-center justify-between" }, h("div", { key: 'e8a076f0129819d83c021baf76f9051e32a51745', class: "flex items-center gap-2" }, h("input", { key: 'acc0ae74a9fcd0bedce903ffa5d38f2174ba2874', type: "checkbox", id: "heatPump", class: "w-4 h-4 accent-[#964500] border-gray-300 rounded-full focus:ring-[#964500] focus:ring-offset-0 focus:ring-2", checked: this.heatPump > 0, onChange: (e) => {
+                this.heatPump =
+                    e.target
+                        .checked
+                        ? 100
+                        : 0;
+                this.recalculate();
+            } }), h("label", { key: 'cd903331c1dadec8fb8e32fb292a35e833349dde', htmlFor: "heatPump", class: "text-gray-600" }, t.solarSystemForm
+            .additionalComponents
+            .heatPump)), this.heatPump > 0 && (h("span", { key: 'a4b28f091c369e7b8167326f6f0ce7ce2ed87403', class: "text-gray-600" }, this.heatPump, " m\u00B2"))), this.heatPump > 0 && (h("div", { key: '21799a5144de79e95bd82efd8e32d9a77d939e82', class: "flex flex-col gap-2" }, h("input", { key: 'c378e59e2421626b59aab30dca50d689318ea1c5', type: "range", min: "10", max: "300", step: "10", class: "input-slider custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white", value: this.heatPump, onInput: (e) => {
+                this.heatPump = parseInt(e.target
+                    .value);
+                this.recalculate();
+            } })))), h("div", { key: 'f361c0fc04391089240776a5dd76eb4a1f139dc2', class: "flex flex-col bg-white rounded-4xl p-4 gap-4" }, h("div", { key: '02bc28aff14eb518268cabb806caf30749fee32e', class: "flex items-center justify-between" }, h("div", { key: 'f53cb4db1f15b85743a2ba6d20486d0c12da3447', class: "flex items-center gap-2" }, h("input", { key: 'b6e4a0f08869fa9e7950371d590b9991ec03d452', type: "checkbox", id: "electricCar", class: "w-4 h-4 accent-[#964500] border-gray-300 rounded focus:ring-[#964500] focus:ring-offset-0 focus:ring-2", checked: this.electricCar, onChange: (e) => {
+                this.electricCar =
+                    e.target
+                        .checked;
+                this.recalculate();
+            } }), h("label", { key: 'a607d596e03ee4969111bd4124507814f1ea048d', htmlFor: "electricCar", class: "text-gray-600" }, t.solarSystemForm
+            .additionalComponents
+            .electricCar))), this.electricCar && (h("div", { key: '65681c033ecb581ac19c28034b456d3d2dc8bb6c', class: "flex flex-col gap-2" }, h("label", { key: 'e95874e8b94206c57fe44ed7355be4e38ddbd2ed', class: "text-sm text-gray-600" }, t.solarSystemForm
+            .additionalComponents
+            .chargingTime), h("select", { key: '47ed96b55ae0b40ab0bd40236f3f1def09701548', class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", onChange: (e) => {
+                this.electricCarChargingTime =
+                    e.target
+                        .value;
+                this.recalculate();
+            } }, h("option", { key: '1c48c51cae0282d0f2663ee0683e0d828e2cc508', value: "day", selected: this
+                .electricCarChargingTime ===
+                "day" }, t.solarSystemForm
+            .additionalComponents
+            .chargingTimeDay), h("option", { key: 'a8f55ef8f4bfecca29290ae2bd49975bd3cfc386', value: "night", selected: this
+                .electricCarChargingTime ===
+                "night" }, t.solarSystemForm
+            .additionalComponents
+            .chargingTimeNight))))), h("div", { key: '5050cb4356d0f01bd6de72c778efd3d74dc48fcc', class: "flex flex-col bg-white rounded-4xl p-4 gap-4" }, h("div", { key: '94bc81576b9f577edf0eb5a50e5a72ea70a6a23c', class: "flex items-center justify-between" }, h("label", { key: '78374a6a108650c6e9da3d690c5cde3409009b64', class: "text-gray-600" }, t.solarSystemForm.additionalComponents
+            .battery), h("span", { key: '7dc59ee19216c1a59a19b3c6cd0889faebb9af85', class: "text-gray-600" }, this.battery, " kWh")), h("div", { key: '6880afe65e17ecfb231d994cc03618457738c68f', class: "flex flex-col gap-2" }, h("input", { key: 'e07afb820af65843e68e34a84730edc5b214440b', type: "range", min: "0", max: "20", step: "1", class: "input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white", value: this.battery, onInput: (e) => {
+                this.battery = parseInt(e.target
+                    .value);
+                this.recalculate();
+            } }))))), h("div", { key: 'a4bfb580de1e3c45a9f3b25acdec60008be691ce', class: "space-y-4" }, h("h2", { key: 'dfd3a5492bc3b57e800b3c946e95ada611190378', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.electricityCostsTitle), h("div", { key: '51e1bce640dd72353ee4f163c4d0db3343a87504', class: "grid grid-rows-2 gap-0" }, h("div", { key: '96422dfb55d394ad3678a924681e954b7ce22df3', class: "grid grid-cols-3 gap-4" }, h("label", { key: 'cf0d91a03cc3daef6fa6d82be31871bab5f7c100', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.electricityPrice), h("label", { key: '8ddfef1b47fb2ed3408a94244ed34d03d20445b7', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.compensationRate), h("label", { key: 'b6f72c81858b794c1326c13ebf1e7874d8a73375', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.annualPriceIncrease)), h("div", { key: '53bb5a5f2332e2a47c1266f22106809128678e56', class: "grid grid-cols-3 gap-4" }, h("input", { key: '5244283ad3af74ecdc19e6007088cb0ce1b36664', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.electricityPrice.toFixed(2), onInput: (e) => {
+                this.electricityPrice = parseFloat(e.target
+                    .value);
+                this.recalculate();
+            } }), h("input", { key: '156f947d4e06d7a3cc6ad217ec5d9fa2951ad4dc', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.compensationRate.toFixed(2), onInput: (e) => {
+                this.compensationRate = parseFloat(e.target
+                    .value);
+                this.recalculate();
+            } }), h("input", { key: '98143e54459b81a7b7264bffc923dd371bc1742f', type: "number", step: "0.1", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.annualPriceIncrease.toFixed(1), onInput: (e) => {
+                this.annualPriceIncrease = parseFloat(e.target
+                    .value);
+                this.recalculate();
+            } })))), h("div", { key: '86b293619777e18d63b305ca07bc7e797fb0d70e', class: "space-y-4 pt-4 border-t border-gray-200" }, h("h2", { key: 'a68bcc7eeec7f0be54aea7c029e52ba1b0609638', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.resultsTitle), h("div", { key: 'b7ba73455969d9bd125c96a1f33dcf48c1418c37', class: "bg-white rounded-4xl p-4" }, h("div", { key: '18c3105018499d3b3a637aed351d91714ba5a612', class: "flex items-center justify-between" }, h("span", { key: '0035e2b15865f8227cbc114d38ebf5ccc00b656b', class: "text-gray-600" }, t.solarSystemForm.autonomy), h("span", { key: 'fb045f2880eeb51734f97d6a77a7319fca895ee9', class: "text-xl font-bold text-[#271200]" }, this.autonomy > 100
+            ? "100"
+            : this.autonomy.toFixed(1), "%")), h("div", { key: '0b496be58c3105ffd4ce3e8bbb5647cf4b3ed92e', class: "flex items-center justify-between mt-4" }, h("div", { key: '3e08d94b99e63a9b52d9b1ac4eb1662023afebf8', class: "flex items-center gap-2" }, h("span", { key: 'abe46d153767c62c13d2d8b3eef0ccc89fa5f22e', class: "text-gray-600" }, t.solarSystemForm.costSavings), h("div", { key: '51d67b7365530344639c8df9122c4c52803fbe0f', class: "relative group" }, h("svg", { key: '0bc8015429f01fb53ae07c1921152a1493d87a2d', xmlns: "http://www.w3.org/2000/svg", class: "h-5 w-5 text-gray-400 cursor-help", viewBox: "0 0 20 20", fill: "currentColor" }, h("path", { key: '593c7428f06632d9e46d8d7ecb06ca1e25fb6c4f', "fill-rule": "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z", "clip-rule": "evenodd" })), h("div", { key: 'ce7e6f853ea5370a2dbdfd392fef232f21bdc0d1', class: "absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-64 p-2 bg-gray-800 text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none" }, t.solarSystemForm
+            .savingsDisclaimer))), h("span", { key: '2d89f0f4d9437d5b75b1bc5c34140bc8502f2b23', class: "text-xl font-bold text-green-600" }, this.costSavings.toFixed(2), "\u20AC/", t
+            .solarSystemForm.year)), h("div", { key: 'ae58b2b27ba70aa4f18dce63c507395255452db6', class: "flex items-center justify-between mt-4" }, h("div", { key: '7a0a1c6d8948a475374537eee1d9054b6824c38c', class: "flex items-center gap-2" }, h("span", { key: '4537c21706ee095f3e3ed263f0a99386eec92795', class: "text-gray-600" }, "Einspeiseverg\u00FCtung 25 Jahre")), h("span", { key: '75955814953cb2c9e0f311aaa1e3d04f19fc89fb', class: "text-xl font-bold text-green-600" }, this.compensation25Years.toFixed(2), "\u20AC")), h("div", { key: '06c3fa7e43948fb35f09e6e98716cbcd7d064d6c', class: "flex items-center justify-between mt-4" }, h("div", { key: '01210645e518efbc462feebc9980d24a6c09c163', class: "flex items-center gap-2" }, h("span", { key: 'f2519b5004a17f4ea09ac6ec374b73a553706ab5', class: "text-gray-600" }, "Geldwerter Vorteil 25 Jahre")), h("span", { key: 'b4e92d010609ac4a571e2c2732f62bf8dc836133', class: "text-xl font-bold text-green-600" }, this.savedCosts25Years.toFixed(2), "\u20AC")))), h("div", { key: '8d0dba4bcddfaf4e1509713c54d6474787b6254d', class: "space-y-4 pt-4 border-t border-gray-200" }, h("h2", { key: '26c08b27f7282f261f5a4779caaba766f20a8ca4', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.requestOffer), h("div", { key: 'a9366b58ac1e04aac462f0b9e21513400c053cb0', class: "grid grid-rows-2 gap-0" }, h("div", { key: 'a49322839297e3c7593236f071a8094138a32b47', class: "grid grid-cols-2 gap-4" }, h("label", { key: '3676b60ef2f4fd8edcea20b86c9c0c0321829e95', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.name), h("label", { key: 'f41e248f056c96db5cfd225a79d1ec70ced03586', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.email)), h("div", { key: '3facacede4f9f59c96332e8caa76dd017c2640d6', class: "grid grid-cols-2 gap-4" }, h("input", { key: 'e31c14c1bdc5e50b833f1868bd03157e3919a585', type: "text", class: `w-full px-4 py-2 rounded-4xl border ${this.nameError
+                ? "border-red-500"
+                : "border-gray-300"} focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white`, value: this.name, onInput: (e) => {
+                this.name =
+                    e.target
+                        .value;
+                this.validateForm();
+            }, placeholder: "Your name" }), this.nameError && (h("p", { key: '9d04539c41c625e235ba6589d7bce5599d06a39e', class: "text-red-500 text-sm mt-1" }, this.nameError)), h("input", { key: 'eb8fe3b14a98867a9f62cfd4db4b2104ae2864eb', type: "email", class: `w-full px-4 py-2 rounded-4xl border ${this.emailError
+                ? "border-red-500"
+                : "border-gray-300"} focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white`, value: this.email, onInput: (e) => {
+                this.email =
+                    e.target
+                        .value;
+                this.validateForm();
+            }, placeholder: "your.email@example.com" }), this.emailError && (h("p", { key: '0c53594a4dc486f83fd05b09547b2a41297165bb', class: "text-red-500 text-sm mt-1" }, this.emailError)))), h("div", { key: '9a975e258e31e3b1b592b7b6bd4518be55d4c42d', class: "flex justify-center" }, h("button", { key: '5eb37544172e568838477368f62dfc84696d3ba6', onClick: () => this.handleRequestOffer(), disabled: !this.name.trim() ||
+                !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))))));
+    }
+    static get watchers() { return {
+        "systemConfigs": ["updateSystemConfigs"]
+    }; }
+    static get style() { return outputCss; }
+}, [0, "solar-system-form", {
+        "systemConfigs": [16, "system-configs"],
+        "roofPolygons": [16, "roof-polygons"],
+        "obstructionPolygons": [16, "obstruction-polygons"],
+        "householdConsumption": [32],
+        "consumptionProfile": [32],
+        "electricityPrice": [32],
+        "compensationRate": [32],
+        "annualPriceIncrease": [32],
+        "autonomy": [32],
+        "costSavings": [32],
+        "numberOfPanels": [32],
+        "panelPeakPower": [32],
+        "name": [32],
+        "email": [32],
+        "nameError": [32],
+        "emailError": [32],
+        "electricCar": [32],
+        "electricCarChargingTime": [32],
+        "heatPump": [32],
+        "battery": [32],
+        "compensation25Years": [32],
+        "savedCosts25Years": [32],
+        "maxPanels": [32]
+    }, undefined, {
+        "systemConfigs": ["updateSystemConfigs"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["solar-system-form"];
+    components.forEach(tagName => { switch (tagName) {
+        case "solar-system-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SolarSystemForm);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BORDER_INSET as B, COLUMN_SPACING as C, DOTTED_LINE_COLOR as D, ROW_SPACING as R, SolarSystemForm as S, DEFAULT_SOLAR_EXPERT_CONFIG as a, DEFAULT_SOLAR_PANEL_TYPE as b, DEFAULT_SUNNINESS as c, defineCustomElement as d };
+//# sourceMappingURL=p-CmFUQbz_.js.map
+
+//# sourceMappingURL=p-CmFUQbz_.js.map