blue-chestnut-solar-expert 0.0.9 → 0.0.12

package/dist/components/p-D6cs3r7j.js

@@ -0,0 +1,621 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+
+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)",
+};
+const DEFAULT_SOLAR_PANEL_TYPE = {
+    widthMeters: 1.134,
+    heightMeters: 1.762,
+    kWattPeak: 0.455,
+    efficiency: 0.224,
+    price: 77.68,
+};
+
+const en = {
+    solarExpert: {
+        searchPlaceholder: "Search for a location"
+    },
+    solarSystemForm: {
+        title: "Solar System Configuration",
+        systemInformation: "System Information",
+        numberOfPanels: "Number of Solar Panels",
+        panelPeakPower: "Panel Peak Power (kW)",
+        totalSystemPeakPower: "Total System Peak Power (kW)",
+        electricityPrice: "Electricity Price (€/kWh)",
+        compensationRate: "Compensation Rate (€/kWh)",
+        autonomy: "Autonomy",
+        costSavings: "Cost Savings (€/year)",
+        householdConsumptionTitle: "Household Electricity Consumption",
+        consumptionProfileTitle: "Consumption Profile",
+        electricityCostsTitle: "Electricity Costs",
+        compensationRateTitle: "Compensation Rate",
+        resultsTitle: "Results",
+        savingsDisclaimer: "Disclaimer: The savings are based on the average electricity price in Spain.",
+        annualConsumption: "Annual Consumption (kWh)",
+        name: "Name",
+        email: "Email",
+        nameError: "Please enter your name",
+        emailError: "Please enter a valid email address",
+        consumptionProfiles: {
+            mostlyAtHome: "Mostly at home",
+            mostlyAway: "Mostly away",
+        },
+        chart: {
+            consumption: "Consumption",
+            production: "Production",
+            consumptionProfile: "Consumption Profile",
+            relativeConsumption: "Relative Consumption",
+            hourOfDay: "Hour of Day",
+        },
+        validEmailError: "Please enter a valid email address",
+        requestOffer: "Request Offer",
+        requestOfferButton: "Request Offer",
+        year: "year",
+    },
+    mapDraw: {
+        noPolygonSelected: "No polygon selected",
+        noAddressSelected: "Please select an address",
+        information: "Information",
+        calculateSolarPanels: "Calculate Solar Panels",
+        panels: "Panels",
+        area: "Area",
+        azimuth: "Azimuth",
+        pitch: "Pitch",
+        tools: {
+            roof: {
+                name: "Roof",
+                explanation: "Draw the roof of the building",
+                ariaLabel: "Roof",
+            },
+            obstruction: {
+                name: "Obstruction",
+                explanation: "Draw the obstruction of the building",
+                ariaLabel: "Obstruction",
+            },
+            delete: {
+                name: "Delete",
+                explanation: "Delete the selected polygon",
+                ariaLabel: "Delete",
+            },
+            move: {
+                name: "Move",
+                explanation: "Move the selected polygon",
+                ariaLabel: "Move",
+            },
+        },
+    }
+};
+
+const de = {
+    solarExpert: {
+        searchPlaceholder: "Suche nach einer Adresse"
+    },
+    solarSystemForm: {
+        title: "Solarsystem Konfiguration",
+        systemInformation: "System Information",
+        numberOfPanels: "Anzahl der Solarpanel",
+        panelPeakPower: "Panelleistung (kW)",
+        totalSystemPeakPower: "Maximale Anlagengröße (kWp)",
+        electricityPrice: "Strompreis (€/kWh)",
+        compensationRate: "Einspeisevergütung (€/kWh)",
+        autonomy: "Autonomie",
+        costSavings: "Einsparungen (€/Jahr)",
+        householdConsumptionTitle: "Haushaltsverbrauch",
+        consumptionProfileTitle: "Verbrauchprofil",
+        electricityCostsTitle: "Stromkosten",
+        compensationRateTitle: "Einspeisevergütung",
+        resultsTitle: "Ergebnisse",
+        savingsDisclaimer: "Disclaimer: Die Einsparungen basieren auf dem durchschnittlichen Strompreis in Spanien.",
+        annualConsumption: "Jährlicher Verbrauch (kWh)",
+        name: "Name",
+        email: "Email",
+        nameError: "Bitte geben Sie Ihren Namen ein",
+        emailError: "Bitte geben Sie eine gültige E-Mail-Adresse ein",
+        consumptionProfiles: {
+            mostlyAtHome: "Hauptsächlich zu Hause",
+            mostlyAway: "Erwerbstätig",
+        },
+        chart: {
+            consumption: "Verbrauch",
+            production: "Produktion",
+            consumptionProfile: "Verbrauchprofil",
+            relativeConsumption: "Verbrauch",
+            hourOfDay: "Stunde des Tages",
+        },
+        validEmailError: "Bitte geben Sie eine gültige E-Mail-Adresse ein",
+        requestOffer: "Angebot anfordern",
+        requestOfferButton: "Angebot anfordern",
+        year: "Jahr",
+    },
+    mapDraw: {
+        noPolygonSelected: "Kein Polygon ausgewählt",
+        noAddressSelected: "Bitte wählen Sie eine Adresse",
+        information: "Information",
+        calculateSolarPanels: "Berechnen Sie die Solarpanele",
+        panels: "Panele",
+        area: "Fläche",
+        azimuth: "Ausrichtung",
+        pitch: "Neigung",
+        tools: {
+            roof: {
+                name: "Dach",
+                explanation: "Zeichnen Sie das Dach des Gebäudes",
+                ariaLabel: "Dach",
+            },
+            obstruction: {
+                name: "Hindernis",
+                explanation: "Zeichnen Sie das Hindernis des Gebäudes",
+                ariaLabel: "Hindernis",
+            },
+            delete: {
+                name: "Löschen",
+                explanation: "Löschen Sie das ausgewählte Polygon",
+                ariaLabel: "Löschen",
+            },
+            move: {
+                name: "Verschieben",
+                explanation: "Verschieben Sie Punkte des ausgewählten Polygons",
+                ariaLabel: "Verschieben",
+            },
+        },
+    }
+};
+
+const es = {
+    solarExpert: {
+        searchPlaceholder: "Suche nach einer Adresse"
+    },
+    solarSystemForm: {
+        title: "Configuración del sistema solar",
+        systemInformation: "Información del sistema",
+        numberOfPanels: "Número de paneles solares",
+        panelPeakPower: "Potencia pico del panel (kW)",
+        totalSystemPeakPower: "Potencia pico total del sistema (kW)",
+        electricityPrice: "Precio de la electricidad (€/kWh)",
+        compensationRate: "Tasa de compensación (€/kWh)",
+        autonomy: "Autonomía",
+        costSavings: "Ahorro (€/año)",
+        householdConsumptionTitle: "Consumo de la casa",
+        consumptionProfileTitle: "Perfil de consumo",
+        electricityCostsTitle: "Costes de la electricidad",
+        compensationRateTitle: "Tasa de compensación",
+        resultsTitle: "Resultados",
+        savingsDisclaimer: "Nota: Los ahorros se basan en el precio promedio de la electricidad en España.",
+        annualConsumption: "Consumo anual (kWh)",
+        name: "Nombre",
+        email: "Email",
+        nameError: "Por favor, ingrese su nombre",
+        emailError: "Por favor, ingrese una dirección de correo electrónico válida",
+        consumptionProfiles: {
+            mostlyAtHome: "Principalmente en casa",
+            mostlyAway: "Empleo",
+        },
+        chart: {
+            consumption: "Consumo",
+            production: "Producción",
+            consumptionProfile: "Perfil de consumo",
+            relativeConsumption: "Consumo",
+            hourOfDay: "Hora del día",
+        },
+        validEmailError: "Por favor, ingrese una dirección de correo electrónico válida",
+        requestOffer: "Solicitar una oferta",
+        requestOfferButton: "Solicitar oferta",
+        year: "Año",
+    },
+    mapDraw: {
+        noPolygonSelected: "No se ha seleccionado un polígono",
+        noAddressSelected: "Por favor, seleccione una dirección",
+        information: "Información",
+        calculateSolarPanels: "Calcular paneles solares",
+        panels: "Paneles",
+        area: "Área",
+        azimuth: "Azimut",
+        pitch: "Inclinación",
+        tools: {
+            roof: {
+                name: "Tejado",
+                explanation: "Dibuje el tejado del edificio",
+                ariaLabel: "Tejado",
+            },
+            obstruction: {
+                name: "Obstrucción",
+                explanation: "Dibuje la obstrucción del edificio",
+                ariaLabel: "Obstrucción",
+            },
+            delete: {
+                name: "Eliminar",
+                explanation: "Elimine el polígono seleccionado",
+                ariaLabel: "Eliminar",
+            },
+            move: {
+                name: "Mover",
+                explanation: "Mueva los puntos del polígono seleccionado",
+                ariaLabel: "Mover",
+            },
+        },
+    }
+};
+
+const languageStrings = {
+    en: en,
+    es: es,
+    de: de,
+};
+function getLanguageStrings(lang) {
+    const defaultLang = languageStrings["en"];
+    if (lang === "en") {
+        return defaultLang;
+    }
+    const langStrings = languageStrings[lang];
+    // Deep merge the default language strings with the selected language strings
+    const mergedStrings = JSON.parse(JSON.stringify(defaultLang)); // Deep clone default
+    function deepMerge(target, source) {
+        for (const key in source) {
+            if (source[key] instanceof Object && key in target) {
+                deepMerge(target[key], source[key]);
+            }
+            else if (source[key] !== undefined) {
+                target[key] = source[key];
+            }
+        }
+    }
+    deepMerge(mergedStrings, langStrings);
+    return mergedStrings;
+}
+
+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-purple-500: oklch(62.7% 0.265 303.9);\n    --color-gray-50: oklch(98.5% 0.002 247.839);\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-xl: 36rem;\n    --container-2xl: 42rem;\n    --container-3xl: 48rem;\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    --text-3xl: 1.875rem;\n    --text-3xl--line-height: calc(2.25 / 1.875);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-xl: 0.75rem;\n    --radius-2xl: 1rem;\n    --radius-4xl: 2rem;\n    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\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  .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 {\n    top: calc(var(--spacing) * 1);\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 {\n    left: calc(var(--spacing) * 1);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-1 {\n    z-index: 1;\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .container {\n    width: 100%;\n    @media (width >= 40rem) {\n      max-width: 40rem;\n    }\n    @media (width >= 48rem) {\n      max-width: 48rem;\n    }\n    @media (width >= 64rem) {\n      max-width: 64rem;\n    }\n    @media (width >= 80rem) {\n      max-width: 80rem;\n    }\n    @media (width >= 96rem) {\n      max-width: 96rem;\n    }\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  .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  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .table {\n    display: table;\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-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-20 {\n    width: calc(var(--spacing) * 20);\n  }\n  .w-52 {\n    width: calc(var(--spacing) * 52);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-2xl {\n    max-width: var(--container-2xl);\n  }\n  .max-w-3xl {\n    max-width: var(--container-3xl);\n  }\n  .max-w-xl {\n    max-width: var(--container-xl);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .border-collapse {\n    border-collapse: collapse;\n  }\n  .-translate-x-1 {\n    --tw-translate-x: calc(var(--spacing) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\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 {\n    --tw-translate-y: calc(var(--spacing) * -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  .resize {\n    resize: both;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .auto-cols-max {\n    grid-auto-columns: max-content;\n  }\n  .grid-flow-col {\n    grid-auto-flow: column;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-4 {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, 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  .place-items-stretch {\n    place-items: stretch;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\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  .overflow-hidden {\n    overflow: hidden;\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-\\[\\#271200\\] {\n    background-color: #271200;\n  }\n  .bg-\\[\\#f3ebda\\] {\n    background-color: #f3ebda;\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-500 {\n    background-color: var(--color-gray-500);\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  .object-contain {\n    object-fit: contain;\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-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  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\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  .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-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  .underline {\n    text-decoration-line: underline;\n  }\n  .accent-\\[\\#271200\\] {\n    accent-color: #271200;\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  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\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-\\[\\#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-50 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-50);\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-500 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-500);\n      }\n    }\n  }\n  .hover\\:bg-white {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-white);\n      }\n    }\n  }\n  .hover\\:text-\\[\\#271200\\] {\n    &:hover {\n      @media (hover: hover) {\n        color: #271200;\n      }\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-\\[\\#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\\: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  .\\[\\&\\:\\:-moz-range-thumb\\]\\:h-4 {\n    &::-moz-range-thumb {\n      height: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-moz-range-thumb\\]\\:w-4 {\n    &::-moz-range-thumb {\n      width: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-moz-range-thumb\\]\\:cursor-pointer {\n    &::-moz-range-thumb {\n      cursor: pointer;\n    }\n  }\n  .\\[\\&\\:\\:-moz-range-thumb\\]\\:appearance-none {\n    &::-moz-range-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-moz-range-thumb\\]\\:rounded-full {\n    &::-moz-range-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-moz-range-thumb\\]\\:bg-\\[\\#271200\\] {\n    &::-moz-range-thumb {\n      background-color: #271200;\n    }\n  }\n  .\\[\\&\\:\\:-moz-range-track\\]\\:h-2 {\n    &::-moz-range-track {\n      height: calc(var(--spacing) * 2);\n    }\n  }\n  .\\[\\&\\:\\:-moz-range-track\\]\\:rounded-full {\n    &::-moz-range-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-moz-range-track\\]\\:bg-gray-200 {\n    &::-moz-range-track {\n      background-color: var(--color-gray-200);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:h-2 {\n    &::-webkit-slider-runnable-track {\n      height: calc(var(--spacing) * 2);\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-runnable-track\\]\\:bg-gray-200 {\n    &::-webkit-slider-runnable-track {\n      background-color: var(--color-gray-200);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-white {\n    &::-webkit-slider-runnable-track {\n      background-color: var(--color-white);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-4 {\n    &::-webkit-slider-thumb {\n      height: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[5px\\] {\n    &::-webkit-slider-thumb {\n      height: 5px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[50px\\] {\n    &::-webkit-slider-thumb {\n      height: 50px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-4 {\n    &::-webkit-slider-thumb {\n      width: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[5px\\] {\n    &::-webkit-slider-thumb {\n      width: 5px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[50px\\] {\n    &::-webkit-slider-thumb {\n      width: 50px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:cursor-pointer {\n    &::-webkit-slider-thumb {\n      cursor: pointer;\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-\\[\\#271200\\] {\n    &::-webkit-slider-thumb {\n      background-color: #271200;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-purple-500 {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-purple-500);\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-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\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-outline-style: solid;\n      --tw-duration: initial;\n    }\n  }\n}\n";
+
+const SOLAR_RADIATION = [
+    0,
+    0,
+    0,
+    0,
+    0,
+    0, // 00:00 - 05:00 - 6
+    0,
+    0.1,
+    0.2, // 8
+    0.4,
+    0.8,
+    1, // 06:00 - 11:00 - 12
+    1,
+    1,
+    1,
+    0.7,
+    0.5,
+    0.3, // 12:00 - 17:00 - 18
+    0.16,
+    0.02,
+    0,
+    0,
+    0,
+    0, // 18:00 - 23:00 - 24
+];
+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 SolarSystemForm = /*@__PURE__*/ proxyCustomElement(class SolarSystemForm extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    systemConfigs = {};
+    language = "en";
+    roofPolygons = {};
+    obstructionPolygons = {};
+    householdConsumption = 3500;
+    consumptionProfile = "mostly_at_home";
+    electricityPrice = 0.3;
+    compensationRate = 0.07;
+    autonomy = 0;
+    costSavings = 0;
+    numberOfPanels = 5;
+    panelPeakPower = 0.4; // kW per panel
+    name = "";
+    email = "";
+    nameError = "";
+    emailError = "";
+    electricCar = false;
+    heatPump = 0;
+    battery = 0;
+    // private chart: Chart | null = null;
+    // private chartRef: HTMLCanvasElement | null = null;
+    updateSystemConfigs() {
+        if (Object.keys(this.systemConfigs).length === 0) {
+            this.numberOfPanels = 0;
+            return;
+        }
+        this.numberOfPanels = 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();
+        this.updateChart();
+    }
+    recalculate() {
+        const data = CONSUMPTION_PROFILES[this.consumptionProfile];
+        const norm = data.reduce((acc, curr) => acc + curr, 0);
+        const peakKwh = this.numberOfPanels * this.panelPeakPower;
+        const production = SOLAR_RADIATION.map((radiation) => radiation * peakKwh);
+        let energyUsageOfProduction = 0;
+        for (let i = 0; i < data.length; i++) {
+            data[i] = data[i] * this.householdConsumption / norm / 365;
+            if (data[i] <= production[i]) {
+                energyUsageOfProduction += data[i];
+            }
+            else if (data[i] > production[i]) {
+                energyUsageOfProduction += production[i];
+            }
+        }
+        const energyDifference = production.map((p, i) => data[i] - p);
+        const soldEnergy = -energyDifference.filter((e) => e < 0).reduce((acc, curr) => acc + curr, 0);
+        // Calculate the cost savings
+        this.costSavings = soldEnergy * this.compensationRate * 365 +
+            energyUsageOfProduction * 365 * this.electricityPrice;
+        this.autonomy =
+            (energyUsageOfProduction / (this.householdConsumption / 365)) *
+                100;
+    }
+    updateChart() {
+        // if (!this.chartRef) return;
+        // const ctx = this.chartRef.getContext("2d");
+        // if (!ctx) return;
+        // if (this.chart) {
+        //     this.chart.destroy();
+        // }
+        // const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`);
+        // const data = CONSUMPTION_PROFILES[this.consumptionProfile];
+        // const norm = data.reduce((acc, curr) => acc + curr, 0);
+        // const peakKwh = this.numberOfPanels * this.panelPeakPower;
+        // const production = SOLAR_RADIATION.map((radiation) =>
+        //     radiation * peakKwh
+        // );
+        // for (let i = 0; i < data.length; i++) {
+        //     data[i] = data[i] * this.householdConsumption / norm / 365;
+        // }
+        // let datasets = [{
+        //     label: "Energy Consumption",
+        //     data: data,
+        //     borderColor: "#964500",
+        //     backgroundColor: "rgba(150, 69, 0, 0.1)",
+        //     fill: true,
+        //     tension: 0.4,
+        // }, {
+        //     label: "Energy Production",
+        //     data: production,
+        //     borderColor: "#000000",
+        //     backgroundColor: "rgba(0, 0, 0, 0.1)",
+        //     fill: true,
+        // }];
+        // this.chart = new Chart(ctx, {
+        //     type: "line",
+        //     data: {
+        //         labels: hours,
+        //         datasets: datasets,
+        //     },
+        //     options: {
+        //         responsive: true,
+        //         plugins: {
+        //             title: {
+        //                 display: true,
+        //                 text: "Daily Consumption Profile",
+        //             },
+        //         },
+        //         scales: {
+        //             y: {
+        //                 beginAtZero: true,
+        //                 title: {
+        //                     display: true,
+        //                     text: "Relative Consumption",
+        //                 },
+        //             },
+        //             x: {
+        //                 title: {
+        //                     display: true,
+        //                     text: "Hour of Day",
+        //                 },
+        //             },
+        //         },
+        //     },
+        // });
+    }
+    componentWillLoad() {
+        this.updateSystemConfigs();
+    }
+    validateForm() {
+        let isValid = true;
+        const t = getLanguageStrings(this.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(this.language);
+        return (h("div", { key: '8d6f829e542b2c5c181e09341b308c57cf600b9c', class: "flex flex-col justify-center items-center w-full h-full pt-4" // style={{
+        }, h("h1", { key: 'ab4006f6fbaf7ec27d97866750c1379b61eda6af', class: "text-2xl font-bold text-[#271200] mb-4 w-full" }, t.solarSystemForm.title), h("div", { key: '146e4c669d1df07359804ed38ed848ad3352837a', class: "w-full bg-[#f3ebda] rounded-4xl p-6 space-y-6" }, h("div", { key: '057ed2bbd8aeae409547a7bc6b1511ac4d1d8ed7', class: "space-y-4" }, h("h2", { key: 'f305926a4e3a15edc39a11085d6de49a4f1f5219', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.systemInformation), h("div", { key: 'ca356100529b595f5e09659af63a954402358049', class: "grid grid-rows-2 gap-0" }, h("div", { key: '82928f8746710de68a488e0354868e0535fbe233', class: "grid grid-cols-2 gap-4" }, h("label", { key: '27d40999038574b81663e718496997d7d47ced14', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.numberOfPanels), h("label", { key: 'c61daf5bbc25b15e42cc6238fbc43c68fa0aea32', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.panelPeakPower)), h("div", { key: '7ba4968d89ec6c9bde572faeb19838b2d301e29c', class: "grid grid-cols-2 gap-4" }, h("input", { key: 'c7e1e79c1151ad393b547edbef3f11e7f157f83a', 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: 'dfa15518c359c0efc12aa72043b465ad10a88412', 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: 'fe237482225d4007359614a196dc9c33a9859ef4', class: "bg-white rounded-4xl p-4" }, h("div", { key: '91f8b46c8feb1d4ed1eb5b1fcb02388bd1ba9687', class: "flex items-center justify-between" }, h("span", { key: 'f340e45aecae6bb63784389cac444cb54a18e684', class: "text-gray-600" }, t.solarSystemForm.totalSystemPeakPower), h("span", { key: '475c3c7508474fe3612d28fac781a51361135aba', class: "text-xl font-bold text-[#271200]" }, (DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *
+            this.numberOfPanels).toFixed(1), " kW")))), h("div", { key: '4c0245a98b3166da5cdc50c2c975489146456b80', class: "space-y-4" }, h("h2", { key: 'b950d4ccf23e48c72a085cc875ac9a96a7a87816', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.householdConsumptionTitle), h("div", { key: 'c805531e81121d87c33b5191ae8f9494c9fa89e6', class: "grid grid-rows-2 gap-0" }, h("div", { key: '54ba5238e1663018f2e82f991e58288816c8dfeb', class: "grid grid-cols-2 gap-4" }, h("label", { key: '20afa3d0bdfdf57c4e21cb3939fca79d904935d1', class: "block text-sm font-medium text-gray-600" }, t.solarSystemForm.annualConsumption), h("label", { key: '37c9f06e2f32ec8d9d42483da0f0a3292c1d1616', class: "block text-sm font-medium text-gray-600" }, t.solarSystemForm.consumptionProfileTitle)), h("div", { key: '6b5ce305001442946aac00b51b3afb20625cda25', class: "grid grid-cols-2 gap-4" }, h("input", { key: 'a3677da2c99e917b832c3ec9b7627e23fd080064', 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();
+                this.updateChart();
+            } }), h("select", { key: '776ab2c001ea82845136a8d5f72e75edc69817dc', 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();
+                this.updateChart();
+            } }, h("option", { key: 'b3165b60537890a35e5686ee1920fb2f95c51ac4', value: "mostly_at_home", selected: this.consumptionProfile ===
+                "mostly_at_home" }, t.solarSystemForm.consumptionProfiles
+            .mostlyAtHome), h("option", { key: 'eb39ea402951c308dce688da043a630818e88219', value: "mostly_away", selected: this.consumptionProfile ===
+                "mostly_away" }, t.solarSystemForm.consumptionProfiles
+            .mostlyAway))))), h("div", { key: '6d9b59896053431448ef4773526d55b248b94cf2', class: "space-y-4" }, h("h2", { key: 'e8408f003e0de554be8ad3eabbca0050e4f75155', class: "text-lg font-semibold text-[#271200]" }, "Additional Components"), h("div", { key: '5505fba56da71bae25767d053170dfabf8a610fe', class: "grid grid-rows-2 gap-4" })), h("div", { key: '3f727f45fea480257c41d779eb980839200209dd', class: "space-y-4" }, h("h2", { key: '9565045eb4262ad5708f0802ac9161ddb50405c9', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.electricityCostsTitle), h("div", { key: '422102ce3fbe1aca445d10c26506a50e3e5b5dcb', class: "grid grid-rows-2 gap-0" }, h("div", { key: 'e72dce6ec3f8abcc7ffc12114c669ef16ae2d1e4', class: "grid grid-cols-2 gap-4" }, h("label", { key: '1dae32e95c18b673a0dd876c4c645c0232d3bf3c', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.electricityPrice), h("label", { key: 'c6167205fc4bbf3b81e12d5e7a4b812d3cb7d7e4', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.compensationRate)), h("div", { key: '97f5a91c39a59e51e27f69227178dc7615e323da', class: "grid grid-cols-2 gap-4" }, h("input", { key: '9a6c81ab930a1db918a8b978d5a26318ad359979', 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();
+                this.updateChart();
+            } }), h("input", { key: '5052bb2f4a1cae0c1a3eae47a358be65150b07f3', 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();
+                this.updateChart();
+            } })))), h("div", { key: '963fc95e0bad78a83683c4f67fc650a109ab2690', class: "space-y-4 pt-4 border-t border-gray-200" }, h("h2", { key: '95aa13e5cacdb63899460cf7dedb76c4461ee791', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.resultsTitle), h("div", { key: '4430f65734b775429b20f6ff0416b9786b0930c7', class: "bg-white rounded-4xl p-4" }, h("div", { key: 'ad1a2599bac396857ed68f896f43de0b44de5a48', class: "flex items-center justify-between" }, h("span", { key: '978c49b1770bb649c26d7b9d23d28a7a174afc96', class: "text-gray-600" }, t.solarSystemForm.autonomy), h("span", { key: 'cc7b0dae2d4db46ca284446988767207762c2bbe', class: "text-xl font-bold text-[#271200]" }, this.autonomy.toFixed(1), "%")), h("div", { key: '8bc803b6f2fb01e5a7c5a44d0054ff0096bb1f51', class: "flex items-center justify-between mt-4" }, h("div", { key: 'bf8cec65c5d32dbb32a1fd00d8b2897789d2dc37', class: "flex items-center gap-2" }, h("span", { key: 'fe123d39da7f209d13f441082f21de2474a27364', class: "text-gray-600" }, t.solarSystemForm.costSavings), h("div", { key: '00a33ff21329f0aa105696a4ab214188e25773d6', class: "relative group" }, h("svg", { key: '6f8e03c873fc28343bd515fdf8b0f47761c7ea3d', 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: '358ba8282f5e12629d5cbb0809ddd20c0a894fbc', "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: '7c10aeaf6d2e58523f747cf4b1ce0d9d21aaaa49', 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: 'e4faed1b8f1d57d0ebbb36084f9e4f0eed602014', class: "text-xl font-bold text-green-600" }, this.costSavings.toFixed(2), "\u20AC/", t
+            .solarSystemForm.year)))), h("div", { key: '57859b85dbf1bcee0cedb6c81e8ab9beffd51738', class: "space-y-4 pt-4 border-t border-gray-200" }, h("h2", { key: 'c8bda51815a9977304a3bca1a28a63d563375177', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.requestOffer), h("div", { key: 'a58139ae6c1714267b61b98f8bcbaa78f80c5e3e', class: "grid grid-rows-2 gap-0" }, h("div", { key: '30e18db38d9f2a2bd37d34d0e364b2477ec7e30e', class: "grid grid-cols-2 gap-4" }, h("label", { key: '15dd0d8714cc9a9548a0d478dc5825a55c9a249c', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.name), h("label", { key: 'e300aa1d93c95220e8cacc2903d5198a864d177f', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.email)), h("div", { key: 'ce9010d081c9c962c09ef8094899a3ea539b8fa8', class: "grid grid-cols-2 gap-4" }, h("input", { key: 'dd6317ee394798ec4ae897e0fc1aabc4a1fda935', 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: 'b101b6a18db1fd0c528393ae19beec13099fdd80', class: "text-red-500 text-sm mt-1" }, this.nameError)), h("input", { key: '361b641612c986ed2859da069488007601d66594', 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: '504d32bba31775ba3e0ce650ee8840ea904e1877', class: "text-red-500 text-sm mt-1" }, this.emailError)))), h("div", { key: 'ade7fa72c0be4974ad6dc6d82f98cb2d11994c6f', class: "flex justify-center" }, h("button", { key: 'b2a2fdbbf4cffadc0c3d7b40027533cbfaa7943c', 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"],
+        "language": [1],
+        "roofPolygons": [16, "roof-polygons"],
+        "obstructionPolygons": [16, "obstruction-polygons"],
+        "householdConsumption": [32],
+        "consumptionProfile": [32],
+        "electricityPrice": [32],
+        "compensationRate": [32],
+        "autonomy": [32],
+        "costSavings": [32],
+        "numberOfPanels": [32],
+        "panelPeakPower": [32],
+        "name": [32],
+        "email": [32],
+        "nameError": [32],
+        "emailError": [32],
+        "electricCar": [32],
+        "heatPump": [32],
+        "battery": [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 { DEFAULT_SOLAR_EXPERT_CONFIG as D, SolarSystemForm as S, DEFAULT_SOLAR_PANEL_TYPE as a, defineCustomElement as d, getLanguageStrings as g };
+//# sourceMappingURL=p-D6cs3r7j.js.map
+
+//# sourceMappingURL=p-D6cs3r7j.js.map