blue-chestnut-solar-expert 0.0.22 → 0.0.24

package/dist/components/p-CTYaeZhp.js

@@ -1,555 +0,0 @@
-import { p as proxyCustomElement, H, h } from './index.js';
-import { g as getLanguageStrings, s as state } from './p-DlAht76f.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;
-    kmDrivenPerYear = 10000;
-    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: this.kmDrivenPerYear / 365,
-                    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,
-        });
-    }
-    isIOS() {
-        return state.isIOS;
-    }
-    render() {
-        const t = getLanguageStrings(state.settings.language);
-        return (h("div", { key: '2dba1a7d4b79678b3361a902cde4f01b1a60723c', class: "flex flex-col justify-center items-center w-full h-full pt-4" // style={{
-            ,
-            //     display: (Object.keys(this.systemConfigs).length === 0)
-            //         ? "none"
-            //         : "flex",
-            // }}
-            id: "solar-system-form" }, h("h1", { key: '0972b02752b45df6c041612092d464e92452b98a', class: "text-2xl font-bold text-[#271200] mb-4 w-full" }, t.solarSystemForm.title), h("div", { key: 'd66e6215be092ffed8fa69f876e2184ce734f9dc', class: "w-full bg-[#f3ebda] rounded-4xl p-6 space-y-6" }, h("div", { key: '5036c23117c8fdb9497746ad8eba7c0b4cf509e3', class: "space-y-4" }, h("h2", { key: 'f0342a639b9c11f6d30693da91001d01ea758de4', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.systemInformation), h("div", { key: 'bf6748d062b9e3d3505f77b3a3862be7f4b2d8af', class: "grid grid-rows-3 gap-0" }, h("div", { key: '21e6341bc4dadc41cfe755312ed6bf7ff24febbc', class: "grid grid-cols-2 gap-4" }, h("label", { key: 'ad9b6d44fa4a0feedcb67f9c697963af10ae3e5f', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.numberOfPanels), h("label", { key: '48045b48436b408c29e21f005fde2ace05d75703', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.panelPeakPower)), h("div", { key: '13c5228111f38d156672b74486804bfe34d28ad7', class: "grid grid-cols-2 gap-4" }, !this.isIOS()
-            ? (h("input", { type: "number", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.numberOfPanels, readOnly: true }))
-            : (h("input", { type: "number", min: "1", max: this.maxPanels, class: "flex-1 px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.numberOfPanels, onInput: (e) => {
-                    const value = parseInt(e.target
-                        .value);
-                    if (value >= 1 &&
-                        value <=
-                            this.maxPanels) {
-                        this.numberOfPanels = value;
-                        this.recalculate();
-                    }
-                } })), h("input", { key: '53d8ea2e917661f9151ddf9b185af5d6756bf632', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.panelPeakPower, readonly: true })), h("div", { key: '17477ccb77a6f5953cf9976d743f3ba7009781af', class: "grid grid-cols-2 gap-4" }, h("div", { key: '85b218da4a521d88740d6f3921fb25cfbeaf7dbe', class: "w-full pt-2" }, !this.isIOS() &&
-            (h("input", { key: '52e835a0cb277b040a36af6a06e312e9a573fe0f', type: "range", min: "1", max: this.maxPanels, step: "1", class: "input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white", value: this.numberOfPanels, onInput: (e) => {
-                    this.numberOfPanels =
-                        parseInt(e.target
-                            .value);
-                    this.recalculate();
-                } }))))), h("div", { key: 'afe5465d0eeb4de5f8cacb1defd003ebf67a8308', class: "bg-white rounded-4xl p-4" }, h("div", { key: 'caf3fa20ee512be50c0ee47dd446325589c708cb', class: "flex items-center justify-between" }, h("span", { key: '4478560c195bd1fb0c2a37b409fc94b437d89576', class: "text-gray-600" }, t.solarSystemForm.totalSystemPeakPower), h("span", { key: '955d70d3c451a120e939dd6812f6d5a56b93b91c', class: "text-xl font-bold text-[#271200]" }, (DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *
-            this.numberOfPanels).toFixed(1), " kW")))), h("div", { key: '7be99868bcb573b69940ae0eed1dd339c276182a', class: "space-y-4" }, h("h2", { key: '4c707b1f87c2f1ee48f21523910876298c1d50cc', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.householdConsumptionTitle), h("div", { key: '91275b282cd1deef545ccc09971c6e8f501c27a2', class: "grid grid-rows-2 gap-0" }, h("div", { key: 'a64d9f3934d296ee3efe68796d1dba323797d67d', class: "grid grid-cols-2 gap-4" }, h("label", { key: '63772879247a7c9a099fabcd3bcec1b0e1ab4ee8', class: "block text-sm font-medium text-gray-600" }, t.solarSystemForm.annualConsumption), h("label", { key: '6a5754992670dbe36b25f6bc0e39f4bab847dca0', class: "block text-sm font-medium text-gray-600" }, t.solarSystemForm.consumptionProfileTitle)), h("div", { key: 'cf7ff437e16df324a0f193e3b98828ec44d0c46f', class: "grid grid-cols-2 gap-4" }, h("input", { key: 'b4b67d847c8f8f9fae7a1a7d51d95cb50b8a258b', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.householdConsumption, onInput: (e) => {
-                this.householdConsumption = parseInt(e.target
-                    .value);
-                this.recalculate();
-            } }), h("select", { key: '6673bebb683bf19abe42f519f1cb04b422c6b364', class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", onChange: (e) => {
-                this.consumptionProfile =
-                    e.target
-                        .value;
-                this.recalculate();
-            } }, h("option", { key: 'b2d9dd9c783e5f245cc0b2543334e3be9ae5bd69', value: "mostly_at_home", selected: this.consumptionProfile ===
-                "mostly_at_home" }, t.solarSystemForm.consumptionProfiles
-            .mostlyAtHome), h("option", { key: 'eb3e39a87362b3d39ca11c00449456ec677cbfc8', 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) => {
-                this.heatPump =
-                    e.target
-                        .checked
-                        ? 100
-                        : 0;
-                this.recalculate();
-            } }), h("label", { key: '7845fc7124ea276e780ee5f0e53b0795f254e31f', htmlFor: "heatPump", class: "text-gray-600" }, 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) => {
-                    const value = parseInt(e.target
-                        .value);
-                    if (value >= 10 &&
-                        value <= 300) {
-                        this.heatPump =
-                            value;
-                        this.recalculate();
-                    }
-                } }), h("span", { class: "text-sm text-gray-600" }, "m\u00B2")))
-            : (h("input", { type: "range", min: "10", max: "300", step: "10", class: "input-slider custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white", value: this.heatPump, onInput: (e) => {
-                    this.heatPump =
-                        parseInt(e.target
-                            .value);
-                    this.recalculate();
-                } }))))), h("div", { key: 'dde5da644a165acb42ae0c23c8a129851728fb40', class: "flex flex-col bg-white rounded-4xl p-4 gap-4" }, h("div", { key: '657c3e78f58d54e26305071d60948a334a06e68c', class: "flex items-center justify-between" }, h("div", { key: '88718f9d326fc4824d77f5ee1ad120684f42c5c7', class: "flex items-center gap-2" }, h("input", { key: 'e2f3c3f9978d11471aea4736745169aa61a90206', type: "checkbox", id: "electricCar", class: "w-4 h-4 accent-[#964500] border-gray-300 rounded focus:ring-[#964500] focus:ring-offset-0 focus:ring-2", checked: this.electricCar, onChange: (e) => {
-                this.electricCar =
-                    e.target
-                        .checked;
-                this.recalculate();
-            } }), h("label", { key: '6df782a0b807a3c4463686804e71a65360c651ac', htmlFor: "electricCar", class: "text-gray-600" }, t.solarSystemForm
-            .additionalComponents
-            .electricCar))), this.electricCar && (h("div", { key: 'f3d23a7c239c4a32bd838825fc5c2bdb018c0922', class: "flex flex-col gap-2" }, h("div", { key: 'bf5b72bdad1771baace0b191d698c2f083d50e19', class: "grid grid-cols-2 gap-4" }, h("label", { key: '6df23bf10da5d23735c3c5cfab6301a35d9575ec', class: "text-sm text-gray-600" }, t.solarSystemForm
-            .additionalComponents
-            .chargingTime), h("label", { key: 'c33783c4485f9076190f0c47992e1594a8cc3548', class: "text-sm text-gray-600" }, 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) => {
-                this.electricCarChargingTime =
-                    e.target
-                        .value;
-                this.recalculate();
-            } }, h("option", { key: 'b25ca2e4796760fb657905e3840c073696c9ced9', value: "day", selected: this
-                .electricCarChargingTime ===
-                "day" }, t.solarSystemForm
-            .additionalComponents
-            .chargingTimeDay), h("option", { key: '8569ac468010bf4aa8017b04855a2c3eb929f9c3', 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) => {
-                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) => {
-                    const value = parseInt(e.target
-                        .value);
-                    if (value >= 0 &&
-                        value <= 20) {
-                        this.battery =
-                            value;
-                        this.recalculate();
-                    }
-                }, placeholder: "Battery capacity" }), h("span", { class: "text-sm text-gray-600" }, "kWh")))
-            : (h("input", { type: "range", min: "0", max: "20", step: "1", class: "input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white", value: this.battery, onInput: (e) => {
-                    this.battery = parseInt(e.target
-                        .value);
-                    this.recalculate();
-                } })))))), h("div", { key: '8729a38d3c447d702dbd962ce732cb835683cc40', class: "space-y-4" }, h("h2", { key: '1baeb07b6e4d9b80d8d5238730c5f24679fd8056', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.electricityCostsTitle), h("div", { key: '55af89837e9c511c6e38d13e8b43edb3a3188831', class: "grid grid-rows-2 gap-0" }, h("div", { key: '7810a1fcfa5e3bd3bae3ae8860b5f3b88cffc7fd', class: "grid grid-cols-3 gap-4" }, h("label", { key: '93f0fdcad9d8a0293686630b5bd7c1de1f2ce6f3', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.electricityPrice), h("label", { key: '4a90ddf97d30c14e7dadc0668bd99b67b67fbe10', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.compensationRate), h("label", { key: '51d4537d803746c154a0beead97fc1385c5ce3ff', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.annualPriceIncrease)), h("div", { key: 'ffe8e05a5d0cb78ce9521e45bf1432f8cf071535', class: "grid grid-cols-3 gap-4" }, h("input", { key: '589327000adc4bf5611dbfeab5146cd9dbfcd117', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.electricityPrice.toFixed(2), onInput: (e) => {
-                this.electricityPrice = parseFloat(e.target
-                    .value);
-                this.recalculate();
-            } }), h("input", { key: '385e5e85ecde6812807e02c6fb5e45f64d41bb97', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.compensationRate.toFixed(2), onInput: (e) => {
-                this.compensationRate = parseFloat(e.target
-                    .value);
-                this.recalculate();
-            } }), h("input", { key: 'f71a1b7236c0ff45b24f1c012e4e6c5fb05f512c', type: "number", step: "0.1", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.annualPriceIncrease.toFixed(1), onInput: (e) => {
-                this.annualPriceIncrease = parseFloat(e.target
-                    .value);
-                this.recalculate();
-            } })))), h("div", { key: 'ec6d113a5645a3e3de006a51ed2eb022f5545b2f', class: "space-y-4 pt-4 border-t border-gray-200" }, h("h2", { key: 'b1f8e2e61ef2e0155867bde9ca7b72ccc409bcca', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.resultsTitle), h("div", { key: 'f6f6baef1de50a71e400a86c7cf0af838430d759', class: "bg-white rounded-4xl p-4" }, h("div", { key: '21bd3865da59dfa154c371b1f0df48e94fbe2ebe', class: "flex items-center justify-between" }, h("span", { key: '8fedb2c918d3aa1d3fadb0d07aaabccb2d78281f', class: "text-gray-600" }, t.solarSystemForm.autonomy), h("span", { key: '14600dda39b1cbee3281145836b03087bfaf99e7', class: "text-xl font-bold text-[#271200]" }, this.autonomy > 100
-            ? "100"
-            : this.autonomy.toFixed(1), "%")), h("div", { key: '8be640248569dfcae408ca9b9552d23147129203', class: "flex items-center justify-between mt-4" }, h("div", { key: 'dbfc7ce335696180abfe84e5b976cdd4e820267e', class: "flex items-center gap-2" }, h("span", { key: 'b81ab0aca1d04a307a88160215188c986da9e14e', class: "text-gray-600" }, t.solarSystemForm.costSavings), h("div", { key: 'd188d4ebfc268417cafc92513ab60dda64ee4a2c', class: "relative group" }, h("svg", { key: '432b93be3b94a02afd9594183ea7aad458851cb8', xmlns: "http://www.w3.org/2000/svg", class: "h-5 w-5 text-gray-400 cursor-help", viewBox: "0 0 20 20", fill: "currentColor" }, h("path", { key: '85c79119ab2e4986dd80ebc615067881be8aef47', "fill-rule": "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z", "clip-rule": "evenodd" })), h("div", { key: '97d984d70cc4e468c96d1efa407fbb5d907f878f', class: "absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-64 p-2 bg-gray-800 text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none" }, t.solarSystemForm
-            .savingsDisclaimer))), h("span", { key: '2ebf755861a392d0334051bc74dba3ecf3da54c8', class: "text-xl font-bold text-green-600" }, this.costSavings.toFixed(2), "\u20AC/", t
-            .solarSystemForm.year)), h("div", { key: 'e8d6aed4a3090691a8e099033e10fd7402101bd0', class: "flex items-center justify-between mt-4" }, h("div", { key: '8620e5ee6cc66670ee8edc67e31ad47f5e2e7cfc', class: "flex items-center gap-2" }, h("span", { key: '7eeb068aa83f5f022f4ae89ef101239370717fb8', class: "text-gray-600" }, "Einspeiseverg\u00FCtung 25 Jahre")), h("span", { key: '2cf06969e5e77e70059e1e9394f2d8524301929c', class: "text-xl font-bold text-green-600" }, this.compensation25Years.toFixed(2), "\u20AC")), h("div", { key: '36601f46327e20a1208647b83d58bd4dbf74d27f', class: "flex items-center justify-between mt-4" }, h("div", { key: 'a14b9f951cf78e264836c2324ca67200b00d19ca', class: "flex items-center gap-2" }, h("span", { key: 'b10ccfdd861677e499c0ca6932359aed155c77fb', class: "text-gray-600" }, "Geldwerter Vorteil 25 Jahre")), h("span", { key: '4d76e1c00dc6faf30a136d4b87a9e48b10295c21', class: "text-xl font-bold text-green-600" }, this.savedCosts25Years.toFixed(2), "\u20AC")))), h("div", { key: '86702fecf5d88cffad85540fd0a6bdf85a7d2819', class: "space-y-4 pt-4 border-t border-gray-200" }, h("h2", { key: 'e5a175e49d3005cf3550870ea701f9f2a9c01563', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.requestOffer), h("div", { key: '90835fc6003c9c3aac3599b0a84c17a4db8fb234', class: "grid grid-rows-2 gap-0" }, h("div", { key: 'e06697367b1c321538d930de33135d24bc924c25', class: "grid grid-cols-2 gap-4" }, h("label", { key: '99dd59c35f123f57b8ebfc78d0c4f7dc204fb515', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.name), h("label", { key: '0a47717b2397f4cae1540992a43bf167b2f6a9a0', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.email)), h("div", { key: 'f23dba91b9af821b44119e71cc5649f61ce3e8cb', class: "grid grid-cols-2 gap-4" }, h("input", { key: '91bfb8d4c0ec6f9bc92ae3c8b96ab8cb22338c6f', type: "text", class: `w-full px-4 py-2 rounded-4xl border ${this.nameError
-                ? "border-red-500"
-                : "border-gray-300"} focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white`, value: this.name, onInput: (e) => {
-                this.name =
-                    e.target
-                        .value;
-                this.validateForm();
-            }, placeholder: "Your name" }), this.nameError && (h("p", { key: '393b5f1217e7f130d03ef1ce33f2c80d0ece5287', class: "text-red-500 text-sm mt-1" }, this.nameError)), h("input", { key: '3dad5518450c61625c301028e2ccac01ed3c1068', type: "email", class: `w-full px-4 py-2 rounded-4xl border ${this.emailError
-                ? "border-red-500"
-                : "border-gray-300"} focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white`, value: this.email, onInput: (e) => {
-                this.email =
-                    e.target
-                        .value;
-                this.validateForm();
-            }, placeholder: "your.email@example.com" }), this.emailError && (h("p", { key: 'ab9abb1cf9d94af195ab1e0db0e4ae3bfa1f9dac', class: "text-red-500 text-sm mt-1" }, this.emailError)))), h("div", { key: '30e9097ad6a2ac886da307dc199ef19f3a685e4a', class: "flex justify-center" }, h("button", { key: '6a27417c30b6dc43685e03b30593a97a70c8caa0', onClick: () => this.handleRequestOffer(), disabled: !this.name.trim() ||
-                !this.email.trim() || !!this.nameError ||
-                !!this.emailError, class: "px-4 py-2 bg-[#271200] rounded-4xl hover:bg-[#964500] transition-colors duration-200", style: { color: "white" } }, t.solarSystemForm.requestOfferButton))))));
-    }
-    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],
-        "kmDrivenPerYear": [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-CTYaeZhp.js.map
-
-//# sourceMappingURL=p-CTYaeZhp.js.map