blue-chestnut-solar-expert 0.0.8 → 0.0.11

package/dist/components/p-CllhWhkE.js

@@ -0,0 +1,615 @@
+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-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  .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  .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  .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-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  .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  .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-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  .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}\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 = "";
+    // 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: 'b0a406a3e61afaf5e96e01cee612160b145bc902', class: "flex flex-col justify-center items-center w-full h-full pt-4" // style={{
+        }, h("h1", { key: '10e24c4114cb8c99b66c63085dbaff4c26a2d784', class: "text-2xl font-bold text-[#271200] mb-4 w-full" }, t.solarSystemForm.title), h("div", { key: '1badca294e702c5ee9c927bbd20c41f02ecee6a6', class: "w-full bg-[#f3ebda] rounded-4xl p-6 space-y-6" }, h("div", { key: '060730279fcb034fcfd2a1ddfd11ac0633b2fc73', class: "space-y-4" }, h("h2", { key: '71f499be9a0391ced80efd4cb316c1855a500d43', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.systemInformation), h("div", { key: '6f1d1903cc2d1b6663a1b06782bb18be00df81ed', class: "grid grid-rows-2 gap-0" }, h("div", { key: '0734194e402ebacaa7b689a2c53fe68ba6779d1c', class: "grid grid-cols-2 gap-4" }, h("label", { key: '9924155ff21e4b88d839bd7556008bda4385cee3', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.numberOfPanels), h("label", { key: 'f6ab52855564e323ade4c9d7daf29e4466ca13d1', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.panelPeakPower)), h("div", { key: '1d7b1bbc040ed2b96beaf1089f4071af37841c13', class: "grid grid-cols-2 gap-4" }, h("input", { key: '2cb11400c02982bf3e8d518b48c18cbd4cb52343', 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: '6a418ae815ea99b4b6316037144398aa500de9f6', 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: '95352d83e08f8dd84020179643315a3a8eb2f964', class: "bg-white rounded-4xl p-4" }, h("div", { key: 'f82afd12c95cd5b9d3f3b2f2e2acc9ab13b0c892', class: "flex items-center justify-between" }, h("span", { key: '9f1f9d2182583f37bff597551dc5d3cb0963dfa3', class: "text-gray-600" }, t.solarSystemForm.totalSystemPeakPower), h("span", { key: 'fffe7b7a6fbdb7342858d9c74496f5e33f68b885', class: "text-xl font-bold text-[#271200]" }, (DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *
+            this.numberOfPanels).toFixed(1), " kW")))), h("div", { key: '36a7f2c39c880b8f77a56e7a7b92ebb17e398449', class: "space-y-4" }, h("h2", { key: 'da22448bb0dc2b06a81fbcaebf3a6d21c2bc2aba', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.householdConsumptionTitle), h("div", { key: 'f95398e218dc62bcb8abb8af96f68b1ee73d48e8', class: "grid grid-rows-2 gap-0" }, h("div", { key: 'e5b652aa182e87508550ee19e97abc310b2c0e84', class: "grid grid-cols-2 gap-4" }, h("label", { key: '454931f266a394d3bc787eb5bc7b9e041941d51e', class: "block text-sm font-medium text-gray-600" }, t.solarSystemForm.annualConsumption), h("label", { key: 'f2fa110b2a728baa5d159d72d1fb537e304e4fda', class: "block text-sm font-medium text-gray-600" }, t.solarSystemForm.consumptionProfileTitle)), h("div", { key: '0ae90d2f7ed03b9dcefc577bf2d77e33530214c9', class: "grid grid-cols-2 gap-4" }, h("input", { key: '22161b32ef443506315dfd52bc63d31f3b973539', 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: '6bae7b07af670401f2a7f039973696b64bf18511', 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: '7c53f3339245af79bff307f81dd6dce55cdd77ad', value: "mostly_at_home", selected: this.consumptionProfile ===
+                "mostly_at_home" }, t.solarSystemForm.consumptionProfiles
+            .mostlyAtHome), h("option", { key: '5b3cf395b83cedba0da9ec573d75bfdd7ece1e80', value: "mostly_away", selected: this.consumptionProfile ===
+                "mostly_away" }, t.solarSystemForm.consumptionProfiles
+            .mostlyAway))))), h("div", { key: '71a0e1a8cbacbce6b9c836c68526882e2f99d638', class: "space-y-4" }, h("h2", { key: 'd7387553332fe44c62a4556dd592df7d80e38816', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.electricityCostsTitle), h("div", { key: 'b60b41db2d7d803b20d7c8c2f1520133027ac0c2', class: "grid grid-rows-2 gap-0" }, h("div", { key: '6208460d9b1176bda2ce82232283446b98b3fd20', class: "grid grid-cols-2 gap-4" }, h("label", { key: '1d7de8e25c6d464cde30bcfdf47258f8fbe5103a', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.electricityPrice), h("label", { key: 'd83a03641de312f31f63073a874cd6a8ffd16919', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.compensationRate)), h("div", { key: '231b2756d5fbbc9756a4d2b284468260249f0357', class: "grid grid-cols-2 gap-4" }, h("input", { key: 'a1f31bbeefcbf5d8d8786b75bacdadbf4603890a', 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: '2c55aa2a5efc9e8241b974b7b6bdc12effbedb10', 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: '4d6fe45c443a7ce484b02b79a2a1b835b0abbeee', class: "space-y-4 pt-4 border-t border-gray-200" }, h("h2", { key: '282e51617d2c1dd29b4631b9def26dbe98e912b5', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.resultsTitle), h("div", { key: '25dc9573694a07cf589f6dcb50896c4f28d47b57', class: "bg-white rounded-4xl p-4" }, h("div", { key: '45ac3469c96d1d4d96f4dc63abfab4401ec74cf5', class: "flex items-center justify-between" }, h("span", { key: '7729a9f5b142d8c1b981bf0734583522275e2ab4', class: "text-gray-600" }, t.solarSystemForm.autonomy), h("span", { key: 'abb4c0e3bb2a67f027ce57b6397fa539194fde3c', class: "text-xl font-bold text-[#271200]" }, this.autonomy.toFixed(1), "%")), h("div", { key: '1ef64dfc7679e8f407b2e17b4ecd61f03275959d', class: "flex items-center justify-between mt-4" }, h("div", { key: '2f1bdd7b9454b4e4b74f29727d193cad13c4ee97', class: "flex items-center gap-2" }, h("span", { key: 'a4a5eb9678ec19fb4f58efe08b729bdab58e2b0e', class: "text-gray-600" }, t.solarSystemForm.costSavings), h("div", { key: '6bfb54832f94188569bc84ca143bf7970c47790d', class: "relative group" }, h("svg", { key: '14c0290b399e2d26b5fd3145b80be1100f717882', 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: '965be62ab9e9fb1da83b7b248d0987ff6554a7ac', "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: '2e3df31e5272614139a7a064830f246099edbb4c', 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: '5d3a4271b1dff765c38b5ce4b7eb855a14ec0f53', class: "text-xl font-bold text-green-600" }, this.costSavings.toFixed(2), "\u20AC/", t
+            .solarSystemForm.year)))), h("div", { key: '1e75a090d4345d76dd7fad35882583924ae75a51', class: "space-y-4 pt-4 border-t border-gray-200" }, h("h2", { key: 'f631ba8d0709d8b8741fd0c78347ab7de1583dba', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.requestOffer), h("div", { key: '2ffc05cf09c6c328c0b98bda7800f28887c85594', class: "grid grid-rows-2 gap-0" }, h("div", { key: '914b967681d0b3a227388ba0a58c587923c01d83', class: "grid grid-cols-2 gap-4" }, h("label", { key: '2ed3105498642f20eda9f9a34dfec20c1da2b1ae', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.name), h("label", { key: 'de6e9290db4ea49b9d869b96d492900c08256cb3', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.email)), h("div", { key: '7d2d03798fe396c961922a2262a99227fbbdd577', class: "grid grid-cols-2 gap-4" }, h("input", { key: '621e7b599ed1559ad8fbc1be7c6a240004950474', 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: '4de3d0060b02d653af0f8b170b074395ba9e3ae4', class: "text-red-500 text-sm mt-1" }, this.nameError)), h("input", { key: 'a8902fa1f58a6b0c24b1d03f7798944fb5b78773', 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: '5d9a926a67725d53ed5ad5823bcac02f5b5a7be5', class: "text-red-500 text-sm mt-1" }, this.emailError)))), h("div", { key: '8ab538d452498379706b7cf84fe1b591b6d44eae', class: "flex justify-center" }, h("button", { key: 'c07d408aa160ecb113e9dd35b550e7a88d219dce', 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]
+    }, 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-CllhWhkE.js.map
+
+//# sourceMappingURL=p-CllhWhkE.js.map