blue-chestnut-solar-expert 0.0.67 → 0.0.68

package/dist/stencil-library/solar-system-form.entry.js

@@ -0,0 +1,553 @@
+
+if (typeof global === "undefined") { var global = globalThis || window || self; }
+import { r as registerInstance, h } from './index-ICfDNUMe.js';
+import { b as DEFAULT_SOLAR_PANEL_TYPE } from './config-CWfV1nKn.js';
+import { g as getLanguageStrings, s as state } from './store-CcqrFuBK.js';
+import { d as distExports, H as HEAT_PUMP_CONSUMPTION } from './constants-hboFofU4.js';
+
+async function fetchSolarData(latitude, longitude, apiKey) {
+    if (latitude === 0 || longitude === 0) {
+        return null;
+    }
+    try {
+        const args = {
+            "location.latitude": latitude.toFixed(5),
+            "location.longitude": longitude.toFixed(5),
+        };
+        const params = new URLSearchParams({
+            ...args,
+            key: apiKey,
+        });
+        const response = await fetch(`https://solar.googleapis.com/v1/buildingInsights:findClosest?${params}`);
+        if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(`HTTP error! status: ${response.status}, body: ${errorText}`);
+        }
+        const contentType = response.headers.get("content-type");
+        if (!contentType || !contentType.includes("application/json")) {
+            const text = await response.text();
+            console.error("Unexpected content type:", contentType, "Response:", text);
+            return null;
+        }
+        const rawData = await response.json();
+        return rawData;
+    }
+    catch (error) {
+        console.error("Error fetching solar data:", error);
+        if (error instanceof TypeError &&
+            error.message === "Failed to fetch") {
+            throw new Error("Unable to connect to the solar data API.");
+        }
+        throw error;
+    }
+}
+async function sendLeadToNexvoro(leadData) {
+    try {
+        const extradata = {
+            leadtype: "A-lead",
+            phase: "10 Anbahnung",
+            title: `${leadData.client.name}/solarExpert`,
+            extradata: leadData,
+        };
+        const formData = new FormData();
+        formData.append("md", "81.87.84.81.84.");
+        formData.append("token", "estwtayazyrwtddwsstqatw");
+        formData.append("NewsletterID", "20404");
+        formData.append("type", "new");
+        formData.append("data", "lead");
+        formData.append("values", JSON.stringify(extradata));
+        // Build the URL
+        const baseUrl = "https://workspace.nexvoro.cloud/exchange/extevent";
+        const url = baseUrl;
+        // Send the request with FormData to avoid CORS preflight
+        const response = await fetch(url, {
+            method: "POST",
+            body: formData,
+            // No custom headers to avoid preflight request
+        });
+        if (!response.ok) {
+            const errorText = await response.text();
+            console.error("Error sending lead to Nexvoro:", response.status, errorText);
+            throw new Error(`HTTP error! status: ${response.status}, body: ${errorText}`);
+        }
+        const result = await response.text();
+        console.log("result", result);
+        // Check if the response contains a lead ID (successful creation)
+        if (result.includes("ERROR")) {
+            return {
+                success: false,
+                message: "Lead not created",
+                leadId: result,
+            };
+        }
+        else {
+            return {
+                success: true,
+                message: "Lead submitted successfully",
+                leadId: undefined,
+            };
+        }
+    }
+    catch (error) {
+        console.error("Error sending lead to Nexvoro:", error);
+        return {
+            success: false,
+            message: error instanceof Error
+                ? error.message
+                : "Unknown error occurred",
+        };
+    }
+}
+
+const outputCss = "/*! tailwindcss v4.1.11 | 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-100: oklch(93.6% 0.032 17.717);\n    --color-red-300: oklch(80.8% 0.114 19.571);\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-red-700: oklch(50.5% 0.213 27.518);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --container-2xl: 42rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --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    --color-primary: hsl(41 51% 90%);\n    --color-primary-foreground: hsl(0 0% 0%);\n    --color-secondary: hsl(28 100% 8%);\n    --color-secondary-foreground: hsl(0 0% 100%);\n    --color-tertiary: hsl(28 100% 29%);\n    --color-tertiary-foreground: hsl(0 0% 100%);\n    --color-muted: hsl(0 0% 100%);\n    --color-muted-foreground: hsl(0 0% 0%);\n    --color-error: hsl(0 100% 50%);\n    --color-error-foreground: hsl(0 0% 100%);\n    --color-surface: hsl(0 0% 88%);\n    --color-surface-hover: hsl(0 0% 82%);\n    --color-surface-active: hsl(0 0% 64%);\n    --color-text-muted: hsl(0 0% 45%);\n    --color-text-secondary: hsl(0 0% 55%);\n    --color-text-placeholder: hsl(0 0% 73%);\n    --color-border: hsl(0 0% 82%);\n    --color-border-light: hsl(0 0% 93%);\n    --color-success: hsl(142 76% 36%);\n    --color-info: hsl(221 83% 53%);\n    --color-hover: hsl(0 0% 88%);\n    --color-hover-dark: hsl(28 100% 8%);\n    --color-overlay: rgba(0, 0, 0, 0.24);\n    --color-tooltip: hsl(0 0% 13%);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\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  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-64 {\n    height: calc(var(--spacing) * 64);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .max-h-full {\n    max-height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-20 {\n    width: calc(var(--spacing) * 20);\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-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\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-0 {\n    --tw-translate-y: calc(var(--spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-2 {\n    --tw-translate-y: calc(var(--spacing) * 2);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .scale-95 {\n    --tw-scale-x: 95%;\n    --tw-scale-y: 95%;\n    --tw-scale-z: 95%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .scale-100 {\n    --tw-scale-x: 100%;\n    --tw-scale-y: 100%;\n    --tw-scale-z: 100%;\n    scale: var(--tw-scale-x) var(--tw-scale-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-not-allowed {\n    cursor: not-allowed;\n  }\n  .resize {\n    resize: both;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-1 {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, 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  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-3 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n    }\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  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-2 {\n    border-style: var(--tw-border-style);\n    border-width: 2px;\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-border {\n    border-color: var(--color-border);\n  }\n  .border-current {\n    border-color: currentcolor;\n  }\n  .border-error\\/20 {\n    border-color: color-mix(in srgb, hsl(0 100% 50%) 20%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-error) 20%, transparent);\n    }\n  }\n  .border-info\\/20 {\n    border-color: color-mix(in srgb, hsl(221 83% 53%) 20%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-info) 20%, transparent);\n    }\n  }\n  .border-red-300 {\n    border-color: var(--color-red-300);\n  }\n  .border-secondary {\n    border-color: var(--color-secondary);\n  }\n  .border-success\\/20 {\n    border-color: color-mix(in srgb, hsl(142 76% 36%) 20%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-success) 20%, transparent);\n    }\n  }\n  .border-t-transparent {\n    border-top-color: transparent;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-error\\/10 {\n    background-color: color-mix(in srgb, hsl(0 100% 50%) 10%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-error) 10%, transparent);\n    }\n  }\n  .bg-error\\/90 {\n    background-color: color-mix(in srgb, hsl(0 100% 50%) 90%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-error) 90%, transparent);\n    }\n  }\n  .bg-info\\/90 {\n    background-color: color-mix(in srgb, hsl(221 83% 53%) 90%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-info) 90%, transparent);\n    }\n  }\n  .bg-muted {\n    background-color: var(--color-muted);\n  }\n  .bg-overlay {\n    background-color: var(--color-overlay);\n  }\n  .bg-primary {\n    background-color: var(--color-primary);\n  }\n  .bg-red-100 {\n    background-color: var(--color-red-100);\n  }\n  .bg-secondary {\n    background-color: var(--color-secondary);\n  }\n  .bg-success\\/10 {\n    background-color: color-mix(in srgb, hsl(142 76% 36%) 10%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-success) 10%, transparent);\n    }\n  }\n  .bg-success\\/90 {\n    background-color: color-mix(in srgb, hsl(142 76% 36%) 90%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-success) 90%, transparent);\n    }\n  }\n  .bg-surface {\n    background-color: var(--color-surface);\n  }\n  .bg-tertiary {\n    background-color: var(--color-tertiary);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .object-contain {\n    object-fit: contain;\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-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .pt-3 {\n    padding-top: calc(var(--spacing) * 3);\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-3 {\n    padding-right: calc(var(--spacing) * 3);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-2 {\n    padding-bottom: calc(var(--spacing) * 2);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-3 {\n    padding-left: calc(var(--spacing) * 3);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-right {\n    text-align: right;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-error {\n    color: var(--color-error);\n  }\n  .text-error-foreground {\n    color: var(--color-error-foreground);\n  }\n  .text-muted {\n    color: var(--color-muted);\n  }\n  .text-muted-foreground {\n    color: var(--color-muted-foreground);\n  }\n  .text-primary-foreground {\n    color: var(--color-primary-foreground);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-red-700 {\n    color: var(--color-red-700);\n  }\n  .text-secondary {\n    color: var(--color-secondary);\n  }\n  .text-success {\n    color: var(--color-success);\n  }\n  .text-text-muted {\n    color: var(--color-text-muted);\n  }\n  .text-text-secondary {\n    color: var(--color-text-secondary);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .accent-tertiary {\n    accent-color: var(--color-tertiary);\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-100 {\n    opacity: 100%;\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  .shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;\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-all {\n    transition-property: all;\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-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  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .duration-300 {\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n  .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n  .hover\\:bg-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-hover);\n      }\n    }\n  }\n  .hover\\:bg-muted {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-muted);\n      }\n    }\n  }\n  .hover\\:bg-overlay {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-overlay);\n      }\n    }\n  }\n  .hover\\:bg-secondary\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-surface-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-surface-hover);\n      }\n    }\n  }\n  .hover\\:bg-tertiary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-tertiary);\n      }\n    }\n  }\n  .hover\\:bg-tertiary\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, hsl(28 100% 29%) 80%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-tertiary) 80%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-text-secondary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-text-secondary);\n      }\n    }\n  }\n  .focus\\:border-2 {\n    &:focus {\n      border-style: var(--tw-border-style);\n      border-width: 2px;\n    }\n  }\n  .focus\\:border-secondary {\n    &:focus {\n      border-color: var(--color-secondary);\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-secondary {\n    &:focus {\n      --tw-ring-color: var(--color-secondary);\n    }\n  }\n  .focus\\:ring-tertiary {\n    &:focus {\n      --tw-ring-color: var(--color-tertiary);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .sm\\:mt-0 {\n    @media (width >= 40rem) {\n      margin-top: calc(var(--spacing) * 0);\n    }\n  }\n  .sm\\:flex-3 {\n    @media (width >= 40rem) {\n      flex: 3;\n    }\n  }\n  .sm\\:flex-row {\n    @media (width >= 40rem) {\n      flex-direction: row;\n    }\n  }\n  .sm\\:items-center {\n    @media (width >= 40rem) {\n      align-items: center;\n    }\n  }\n  .sm\\:gap-4 {\n    @media (width >= 40rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .md\\:grid-cols-2 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .md\\:pl-2 {\n    @media (width >= 48rem) {\n      padding-left: 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-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-muted {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-muted);\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-scale-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\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-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n      --tw-ease: initial;\n    }\n  }\n}\n";
+
+const SolarSystemForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    systemConfigs = {};
+    polygons = [];
+    roofCanvas;
+    polygonCanvas;
+    householdConsumption = 4500;
+    consumptionProfile = "mostly_at_home";
+    electricityPrice = 0.3;
+    compensationRate = 0.07;
+    annualPriceIncrease = 2;
+    autonomy = 0;
+    costSavings = 0;
+    numberOfPanels = 5;
+    panelPeakPower = 0.4; // kW per panel
+    name = "";
+    email = "";
+    phone = "";
+    nameError = "";
+    emailError = "";
+    phoneError = "";
+    electricCar = false;
+    electricCarChargingTime = "day";
+    heatPump = 0;
+    battery = 0;
+    batteryEnabled = false;
+    compensation20Years = 0;
+    savedCosts20Years = 0;
+    maxPanels = 5;
+    kmDrivenPerYear = 10000;
+    totalEnergyConsumption = 4500;
+    totalEnergyProduction = 0;
+    isSubmitting = false;
+    submitMessage = "";
+    submitSuccess = false;
+    updateSystemConfigs() {
+        if (Object.keys(this.systemConfigs).length === 0) {
+            this.numberOfPanels = 0;
+            this.maxPanels = 0;
+            return;
+        }
+        this.numberOfPanels = Object.keys(this.systemConfigs).reduce((acc, curr) => acc + this.systemConfigs[curr].numberOfPanels, 0);
+        this.maxPanels = Object.keys(this.systemConfigs).reduce((acc, curr) => acc + this.systemConfigs[curr].numberOfPanels, 0);
+        this.panelPeakPower = Object.entries(this.systemConfigs)[0][1][0]
+            ?.panel.kWattPeak ?? 0.44;
+        this.recalculate();
+    }
+    formatEuropeanNumber(num, decimals = 2) {
+        const fixed = num.toFixed(decimals);
+        const [integerPart, decimalPart] = fixed.split(".");
+        // Add dots as thousands separators
+        const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+        // Join with comma as decimal separator
+        return decimalPart
+            ? `${formattedInteger},${decimalPart}`
+            : formattedInteger;
+    }
+    recalculate() {
+        const currentSystemConfigs = {};
+        let totalNumberOfPanels = 0;
+        for (const [key, value] of Object.entries(this.systemConfigs)) {
+            if (totalNumberOfPanels >= this.numberOfPanels) {
+                break;
+            }
+            if (value.numberOfPanels + totalNumberOfPanels > this.numberOfPanels) {
+                currentSystemConfigs[key] = {
+                    ...value,
+                    numberOfPanels: this.numberOfPanels - totalNumberOfPanels,
+                };
+                totalNumberOfPanels = this.numberOfPanels;
+            }
+            else {
+                currentSystemConfigs[key] = value;
+                totalNumberOfPanels += value.numberOfPanels;
+            }
+        }
+        const simulationConfig = {
+            general: {
+                simulationYears: 20,
+            },
+            householdConsumption: {
+                consumptionProfile: this.consumptionProfile,
+                winterConsumptionFactor: 1.4,
+                summerConsumptionFactor: 0.6,
+                averageConsumption: this.householdConsumption / 365,
+            },
+            electricityPrice: {
+                purchase: this.electricityPrice,
+                sell: this.compensationRate,
+                increase: this.annualPriceIncrease / 100,
+            },
+            solarSystems: currentSystemConfigs,
+            batteryKWh: this.battery,
+            solarRadiation: {
+                winterFactor: 0.2,
+                summerFactor: 0.6,
+            },
+            heatPump: {
+                m2: this.heatPump,
+                consumptionPerM2: HEAT_PUMP_CONSUMPTION / 365,
+            },
+            electricCar: this.electricCar
+                ? {
+                    averageKilometersPerDay: this.kmDrivenPerYear / 365,
+                    consumptionkWhPer100km: 20,
+                    batteryKWh: 80,
+                    chargingHours: this.electricCarChargingTime === "day"
+                        ? distExports.generateElectricCarChargingHours(6, 18)
+                        : distExports.generateElectricCarChargingHours(18, 6),
+                }
+                : undefined,
+        };
+        const result = distExports.simulate(simulationConfig);
+        this.compensation20Years = result.compensationPerDay * 365 * 20;
+        this.savedCosts20Years = result.byYearSavedCosts.reduce((acc, curr) => acc + curr, 0) + this.compensation20Years;
+        this.costSavings = result.byYearSavedCosts[0];
+        this.autonomy = result.autonomy * 100;
+        this.totalEnergyConsumption = result.totalEnergyConsumptionDay * 365;
+        // Calculate total energy production based on compensation and rate
+        this.totalEnergyProduction = result.totalEnergyProduction * 365;
+    }
+    componentWillLoad() {
+        this.updateSystemConfigs();
+    }
+    validateForm() {
+        let isValid = true;
+        const t = getLanguageStrings(state.settings.language);
+        // Validate name
+        if (!this.name.trim()) {
+            this.nameError = t.solarSystemForm.nameError;
+            isValid = false;
+        }
+        else {
+            this.nameError = "";
+        }
+        // Validate email
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!this.email.trim()) {
+            this.emailError = t.solarSystemForm.emailError;
+            isValid = false;
+        }
+        else if (!emailRegex.test(this.email)) {
+            this.emailError = t.solarSystemForm.validEmailError;
+            isValid = false;
+        }
+        else {
+            this.emailError = "";
+        }
+        // Validate phone (optional)
+        const phoneRegex = /^[\+]?[1-9][\d]{0,15}$/;
+        if (this.phone.trim() &&
+            !phoneRegex.test(this.phone.replace(/[\s\-\(\)]/g, ""))) {
+            this.phoneError = t.solarSystemForm.phoneError;
+            isValid = false;
+        }
+        else {
+            this.phoneError = "";
+        }
+        return isValid;
+    }
+    async handleRequestOffer() {
+        if (!this.validateForm()) {
+            return;
+        }
+        this.isSubmitting = true;
+        this.submitMessage = "";
+        this.submitSuccess = false;
+        const t = getLanguageStrings(state.settings.language);
+        try {
+            const leadData = {
+                location: {
+                    name: state.location,
+                    latitude: state.latitude,
+                    longitude: state.longitude,
+                },
+                systemConfig: {
+                    maxNumberOfPanels: this.maxPanels,
+                    panelPeakPower: this.panelPeakPower,
+                    polygons: this.polygons,
+                    solarSystems: this.systemConfigs,
+                    electricityPrice: this.electricityPrice,
+                    compensationRate: this.compensationRate,
+                    annualPriceIncrease: this.annualPriceIncrease,
+                },
+                client: {
+                    name: this.name,
+                    email: this.email,
+                    phone: this.phone,
+                    consumption: this.householdConsumption,
+                    consumptionProfile: this.consumptionProfile,
+                    hasBattery: this.batteryEnabled,
+                    battery: this.battery,
+                    hasHeatPump: this.heatPump > 0,
+                    heatPumpM2: this.heatPump,
+                    hasElectricCar: this.electricCar,
+                    electricCarChargingTime: this.electricCarChargingTime,
+                    electricCarKmPerYear: this.kmDrivenPerYear,
+                },
+                images: {
+                    roof: this.roofCanvas.toDataURL(),
+                    polygon: this.polygonCanvas.toDataURL(),
+                },
+                results: {
+                    autonomy: this.autonomy,
+                    costSavings: this.costSavings,
+                    compensation20Years: this.compensation20Years,
+                    savedCosts20Years: this.savedCosts20Years,
+                    totalEnergyConsumption: this.totalEnergyConsumption,
+                },
+            };
+            console.log("leadData", leadData);
+            const result = await sendLeadToNexvoro(leadData);
+            this.submitSuccess = result.success;
+            if (result.success) {
+                console.log("Lead successfully sent to Nexvoro", result);
+                this.submitMessage = t.solarSystemForm.leadSubmitted;
+                // Optionally reset form or show success message
+            }
+            else {
+                console.error("Failed to send lead to Nexvoro:", result.message);
+                this.submitMessage = t.solarSystemForm.leadError;
+            }
+        }
+        catch (error) {
+            console.error("Error in handleRequestOffer:", error);
+            this.submitSuccess = false;
+            this.submitMessage = error instanceof Error
+                ? error.message
+                : "An unexpected error occurred";
+        }
+        finally {
+            this.isSubmitting = false;
+        }
+    }
+    isIOS() {
+        return state.isIOS;
+    }
+    render() {
+        const t = getLanguageStrings(state.settings.language);
+        // Reusable style objects
+        const borderStyle = { border: "1px solid var(--color-border)" };
+        const errorBorderStyle = { border: "1px solid var(--color-error)" };
+        return (h("div", { key: 'b3aac8c415b6f69f2853118cabc74601022d030b', class: "flex flex-col justify-center items-center w-full h-full pt-4" // style={{
+            ,
+            //     display: (Object.keys(this.systemConfigs).length === 0)
+            //         ? "none"
+            //         : "flex",
+            // }}
+            id: "solar-system-form" }, h("h1", { key: 'bc5cdebf33d124d8836da4e1088bba4450c816cd', class: "text-2xl font-bold text-secondary mb-4 w-full" }, t.solarSystemForm.title), h("div", { key: '3ab1cec7ed4bd186ba78f49c21917246c630df61', class: "w-full bg-primary rounded-4xl space-y-6" }, h("div", { key: 'c1a2dd948a840ff98d112d129317e5553f530147', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '594a62add2fd8c6288bba7daa6a012756c1d4a10', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.systemInformation), h("div", { key: '5ac796f80e17307ca0fc3259e62b372e2fa12cc4', class: "flex flex-col sm:flex-row gap-4" }, h("div", { key: '9a4bfbceb41b31404fc9e38c69e4b4177a24ec44', class: "flex-1 bg-muted rounded-4xl p-4 space-y-3" }, h("div", { key: '6fc5982c6e841f73054c144a258648b54eb82498', class: "flex items-center justify-between" }, h("label", { key: '894e19c5be12317818b6637d5f250987d8cd621e', class: "text-sm font-medium text-text-muted" }, t.solarSystemForm.numberOfPanels), !this.isIOS()
+            ? (h("input", { type: "number", class: "w-20 px-3 py-1 rounded-full bg-muted text-muted-foreground text-right", value: this.numberOfPanels, readOnly: true }))
+            : (h("input", { type: "number", min: "1", max: this.maxPanels, class: "w-20 px-3 py-1 rounded-full focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground text-center", style: borderStyle, value: this.numberOfPanels, onInput: (e) => {
+                    const value = parseInt(e.target
+                        .value);
+                    if (value >= 1 &&
+                        value <=
+                            this.maxPanels) {
+                        this.numberOfPanels =
+                            value;
+                        this.recalculate();
+                    }
+                } }))), !this.isIOS() && (h("input", { key: '449fb7456001a4a4535cca861d2f6cb5e3524207', type: "range", min: "1", max: this.maxPanels, step: "1", class: "input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-muted", value: this.numberOfPanels, onInput: (e) => {
+                this.numberOfPanels = parseInt(e.target
+                    .value);
+                if (isNaN(this.numberOfPanels)) {
+                    this.numberOfPanels = 0;
+                }
+                this.recalculate();
+            } }))), h("div", { key: '170b71239b4ad1a31a60b07ad5bbbdbe3269b32a', class: "flex-1 bg-muted rounded-4xl p-4" }, h("div", { key: '23fb2ae75eea851bf70d0d45bd6a14ad0326337f', class: "flex items-center justify-between" }, h("label", { key: '22612c4214b995fa656d6cf12e8c45906fc66f5c', class: "text-sm font-medium text-text-muted" }, t.solarSystemForm.panelPeakPower), h("span", { key: '4b05f3ca41f9956242be5426ab1a99da3a377919', class: "text-text-muted" }, this.panelPeakPower.toFixed(2), " kW")), h("div", { key: 'ffdff42649f42580a90379f59c9fcc12377871ac', class: "flex items-center justify-between mt-4" }, h("span", { key: '328257ed6094505f7382fa05dea0d5b311a01c39', class: "text-sm font-medium text-text-muted" }, t.solarSystemForm.totalSystemPeakPower), h("span", { key: '72a1d3242113d6abf88a34e804c1f1b7de4de642', class: "font-bold text-text-muted" }, (DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *
+            this.numberOfPanels).toFixed(1), " kWp"))))), h("div", { key: '5a75a286d0cf236a32486842bbf42630b063338a', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '2ea2a85bd3ea2699371ad55bc2c307c12c9422fe', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.householdConsumptionTitle), h("div", { key: '5a0806013e7772a3999fb8c33e276d28e6433570', class: "grid grid-rows-2 gap-0" }, h("div", { key: 'df6798dad3f0db54eefb9fe725fdd5dc20ab0148', class: "grid grid-cols-2 gap-4" }, h("label", { key: '08c04771886ab1ed632b2d74414fc696d5c36d48', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.annualConsumption), h("label", { key: '5f0f6fa2b92378fc99ca31438132e7b5fb384c5a', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.consumptionProfileTitle)), h("div", { key: 'faf1efc7063c7dad129ee51be3942577d4eba3d2', class: "grid grid-cols-2 gap-4" }, h("input", { key: '39020b4fd4aa42cb60ce2ba4074daa6eff49317a', type: "number", step: "100", min: "0", class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground", style: borderStyle, value: this.householdConsumption, onInput: (e) => {
+                this.householdConsumption = parseInt(e.target
+                    .value);
+                this.recalculate();
+            } }), h("select", { key: 'fbe2af24809a12043b9d1bfc23b0a480e378327b', class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground", style: borderStyle, onChange: (e) => {
+                this.consumptionProfile =
+                    e.target
+                        .value;
+                this.recalculate();
+            } }, h("option", { key: 'af56d4b4bc9d4623f03745a1bae46915e90b822b', value: "mostly_at_home", selected: this.consumptionProfile ===
+                "mostly_at_home" }, t.solarSystemForm.consumptionProfiles
+            .mostlyAtHome), h("option", { key: '03050dbc05259fd78693c68d736c65aea84c4692', value: "mostly_away", selected: this.consumptionProfile ===
+                "mostly_away" }, t.solarSystemForm.consumptionProfiles
+            .mostlyAway))))), h("div", { key: '398a347fe923ccf5c245237e4f923946ddccca2b', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '017d2e0d7f9c6bf0960d48ea46e910e52f97ddf0', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.additionalComponents.title), h("div", { key: '8a4c0f966a4256fc34d4ea326e17494cb7c38d08', class: "flex flex-col gap-4" }, h("div", { key: '2802b69b3333ba6093824b4bce0bce34838beef0', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '6eb56c4e1a05cc934539ff6834ef303f702d9230', class: "flex items-center justify-between" }, h("div", { key: '8672770642b35589cb5d2b70547545cda6436be8', class: "flex items-center gap-2" }, h("input", { key: '8cf94f816794f0d3fe9511241e33407d0db21cc9', type: "checkbox", id: "heatPump", class: "w-4 h-4 accent-tertiary border-border rounded-full focus:ring-tertiary focus:ring-offset-0 focus:ring-2", checked: this.heatPump > 0, onChange: (e) => {
+                this.heatPump =
+                    e.target
+                        .checked
+                        ? 100
+                        : 0;
+                this.recalculate();
+            } }), h("label", { key: 'd068346b88585730a99bd8c64b86c0348c40f17d', htmlFor: "heatPump", class: "text-text-muted" }, t.solarSystemForm
+            .additionalComponents
+            .heatPump)), (this.heatPump > 0 && !this.isIOS()) && (h("span", { key: '16449a80ae506fd75a2b1c4bb53745ff2dfa9fc2', class: "text-text-muted" }, this.heatPump, " m\u00B2"))), this.heatPump > 0 && (h("div", { key: 'd64daeb593cd78c0b5a6a0c595b4ea68b6f58ecf', class: "flex flex-col gap-2" }, this.isIOS()
+            ? (h("div", { class: "flex items-center gap-2" }, h("input", { type: "number", min: "10", max: "300", step: "10", class: "flex-1 px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", style: borderStyle, value: this.heatPump, onInput: (e) => {
+                    let value = parseInt(e.target
+                        .value);
+                    if (isNaN(value)) {
+                        value = 0;
+                    }
+                    if (value >= 0 &&
+                        value <= 300) {
+                        this.heatPump =
+                            value;
+                        this.recalculate();
+                    }
+                } }), h("span", { class: "text-sm text-text-muted" }, "m\u00B2")))
+            : (h("input", { type: "range", min: "10", max: "300", step: "10", class: "input-slider custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-muted", value: this.heatPump, onInput: (e) => {
+                    this.heatPump =
+                        parseInt(e.target
+                            .value);
+                    this.recalculate();
+                } }))))), h("div", { key: '96e46b97840448e5d33351bb7550d29081b283ae', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '8a5e9bfcbab6a380949cfb70aed04102e83524f9', class: "flex items-center justify-between" }, h("div", { key: '7bd3b892a195111d426571f4fd5ebc74ac8e4458', class: "flex items-center gap-2" }, h("input", { key: 'e0465348cd9edace9ea3f6d31b32c01130f599bf', type: "checkbox", id: "electricCar", class: "w-4 h-4 accent-tertiary border-border rounded focus:ring-tertiary focus:ring-offset-0 focus:ring-2", checked: this.electricCar, onChange: (e) => {
+                this.electricCar =
+                    e.target
+                        .checked;
+                this.recalculate();
+            } }), h("label", { key: '632375d50fcc5d65b6755143fce0b0c6ecc1b9eb', htmlFor: "electricCar", class: "text-text-muted" }, t.solarSystemForm
+            .additionalComponents
+            .electricCar))), this.electricCar && (h("div", { key: 'ad61c2c776efe4d9ebba427b9077bffe0539845d', class: "flex flex-col gap-2" }, h("div", { key: '5cdebf71f86045d8fad0e34e9c1b3d509c7b009e', class: "grid grid-cols-2 gap-4" }, h("label", { key: 'cf81d88d2d88f6ae1b9a5024c2936876c3ef71fd', class: "text-sm text-text-muted" }, t.solarSystemForm
+            .additionalComponents
+            .chargingTime), h("label", { key: 'da1dcb1219717fb52575c597c4800d65bb961675', class: "text-sm text-text-muted" }, t.solarSystemForm
+            .additionalComponents
+            .kilometersPerYear)), h("div", { key: 'a2757d138453d73b7d8ec6e367e8c1de108ce034', class: "grid grid-cols-2 gap-4" }, h("select", { key: '37346901d46565768147d427051b5618f9e6b116', class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", onChange: (e) => {
+                this.electricCarChargingTime =
+                    e.target
+                        .value;
+                this.recalculate();
+            }, style: borderStyle }, h("option", { key: 'd81865a15f17acd907c50cdcd78976065fa62652', value: "day", selected: this
+                .electricCarChargingTime ===
+                "day" }, t.solarSystemForm
+            .additionalComponents
+            .chargingTimeDay), h("option", { key: '210248d07239dd91b878b463029afb711da6f883', value: "night", selected: this
+                .electricCarChargingTime ===
+                "night" }, t.solarSystemForm
+            .additionalComponents
+            .chargingTimeNight)), h("input", { key: '7f34b587ffda5b9e075adbadd2a5f0bb4fbf5c49', type: "number", min: "1000", max: "100000", step: "1000", class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", value: this.kmDrivenPerYear, onInput: (e) => {
+                this.kmDrivenPerYear =
+                    parseInt(e.target
+                        .value);
+                if (isNaN(this.kmDrivenPerYear)) {
+                    this.kmDrivenPerYear =
+                        0;
+                }
+                this.recalculate();
+            }, style: borderStyle }))))), h("div", { key: '04b6c11022c91d5f5156211b52f36436e5ee0e3a', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '75ec40dd3d6d82e7a347f51e7244934834cb1796', class: "flex items-center justify-between" }, h("div", { key: 'a656e188979e1a26756b1a0e253eb64045c0b6f4', class: "flex items-center gap-2" }, h("input", { key: 'daf0d7f659cbd8c6313a2b633b22853fa3ac1439', type: "checkbox", id: "battery", class: "w-4 h-4 accent-tertiary border-border rounded-full focus:ring-tertiary focus:ring-offset-0 focus:ring-2", checked: this.batteryEnabled, onChange: (e) => {
+                this.batteryEnabled =
+                    e.target
+                        .checked;
+                this.battery =
+                    this.batteryEnabled
+                        ? 5
+                        : 0;
+                this.recalculate();
+            } }), h("label", { key: '934f7b42b97134a6dcbdb566392a331a9824f4b9', htmlFor: "battery", class: "text-text-muted" }, t.solarSystemForm
+            .additionalComponents
+            .battery)), (this.batteryEnabled && !this.isIOS()) && (h("span", { key: '2b82db24bc6ea580b38a47720d39180727569fcf', class: "text-text-muted" }, this.battery, " kWh"))), this.batteryEnabled && (h("div", { key: '9cb0af19acffe8b6a22f8dab52d7b58748b89fa7', class: "flex flex-col gap-2" }, this.isIOS()
+            ? (h("div", { class: "flex items-center gap-2" }, h("input", { type: "number", min: "0", max: "20", step: "1", class: "flex-1 px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", value: this.battery, onInput: (e) => {
+                    let value = parseInt(e.target
+                        .value);
+                    if (isNaN(value)) {
+                        value = 0;
+                    }
+                    if (value >= 0 &&
+                        value <= 20) {
+                        this.battery =
+                            value;
+                    }
+                    else {
+                        this.battery =
+                            20;
+                    }
+                    this.recalculate();
+                }, style: borderStyle }), h("span", { class: "text-sm text-text-muted" }, "kWh")))
+            : (h("input", { type: "range", min: "1", max: "20", step: "1", class: "input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-muted", value: this.battery, onInput: (e) => {
+                    const value = parseInt(e.target
+                        .value);
+                    this.battery = value;
+                    this.batteryEnabled =
+                        value > 0;
+                    this.recalculate();
+                } }))))))), h("div", { key: 'ab35064c9f135bd5b0a3de1e8b58778773bb7183', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: 'f083142c6a3f5943f03f4c8c91e5b0191da2f18a', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.electricityCostsTitle), h("div", { key: '149f07c47577bfa66044711d00950d16f20b4daa', style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(100px, 1fr))",
+                gap: "1rem",
+            } }, h("div", { key: '7c0c06f3f5de6192ad6f88ca405bebc8164b776e' }, h("label", { key: '4e2624714478f92ee78cd826cb65976b4e1eedfe', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.electricityPrice), h("input", { key: 'c5ee3300484d227731ad4cf9ff156b1523262ce5', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", style: borderStyle, value: this.electricityPrice.toFixed(2), onInput: (e) => {
+                this.electricityPrice = parseFloat(e.target
+                    .value);
+                this.recalculate();
+            } })), h("div", { key: '4220bc2ed90aac8e1ac60385872f10503aac2053' }, h("label", { key: '0b10f5c64eb7c77ea4895449726b19aa1450217f', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.compensationRate), h("input", { key: '794d102dfe59d68563e89b5da8ab5b93f66e9ccc', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", style: borderStyle, value: this.compensationRate.toFixed(2), onInput: (e) => {
+                this.compensationRate = parseFloat(e.target
+                    .value);
+                this.recalculate();
+            } })), h("div", { key: '10081bb97392c16a1d99e644cf4d392edee2ffd3' }, h("label", { key: '9727ffc2d1f89923cf0d569dd59f86868b54b723', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.annualPriceIncrease), h("input", { key: 'dca5fa0137b2366589d5adc68ce961c8084a1ea3', type: "number", step: "0.1", class: "w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", style: borderStyle, value: this.annualPriceIncrease.toFixed(1), onInput: (e) => {
+                this.annualPriceIncrease = parseFloat(e.target
+                    .value);
+                this.recalculate();
+            } })))), h("div", { key: 'ce396dfca25c42f00914f04db39aeb28465e3ed8', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: 'de2feec636ca79e02f9b895bea7ba35ba2dbe729', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.resultsTitle), h("div", { key: 'c0301e4286db317a049fe43f486db72c9c4632e6', class: "bg-muted rounded-4xl p-4" }, h("div", { key: 'f7eeb9506a80a2111681ba179b2570ae2f823188', class: "flex flex-col sm:flex-row sm:items-center justify-between" }, h("span", { key: '7384e4ef01cdf238dc584def68b9b82dabcf5f90', class: "text-text-muted" }, t.solarSystemForm.autonomy), h("span", { key: 'e015f0adf8216e61e823479687e62e1dc0cd1416', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.autonomy > 100
+            ? "100"
+            : this.formatEuropeanNumber(this.autonomy, 1), "%")), h("div", { key: '573898821896ccb941a4952db93e1ddcd02f1048', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("span", { key: 'acda47ca6f86a0059de4014c43e4c9da8cf8375a', class: "text-text-muted" }, t.solarSystemForm.totalEnergyConsumption), h("span", { key: 'c7a11736f29c94e9c12aeba2c4f8b4c9a90dabd2', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.totalEnergyConsumption, 0), " kWh/", t.solarSystemForm.year)), h("div", { key: 'c2d7dd0636d540a2cfaadb46d51dcca2302a8948', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("span", { key: 'bd7c6d95d354688b6d82dda1d6da8cda06663a77', class: "text-text-muted" }, t.solarSystemForm.totalEnergyProduction), h("span", { key: '2f3a04b1649248b79945aa8fe87f4dfa4e17f074', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.totalEnergyProduction, 0), " kWh/", t.solarSystemForm.year)), h("div", { key: 'd56b792fd2305eef5b79da1402a7595e788d6312', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: '92deb1c8bfc0f4b30a70becbad935ab9f21c82f1', class: "flex items-center gap-2" }, h("span", { key: '0be5fbc8919d64438c098338731c3e3599b6a031', class: "text-text-muted" }, t.solarSystemForm.costSavings)), h("span", { key: '8693ccc59f8171aa5ac99cbf2c0e52e7a8e93b1c', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.costSavings), " \u20AC/", t
+            .solarSystemForm.year)), h("div", { key: 'dcdfb4fd6f8599f3a8c680c460f4257365abb588', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: '974783bd031dfb875215603e91a43fb324b64a59', class: "flex items-center gap-2" }, h("span", { key: '63453ca13b706b8f8d28471083f568433d938b29', class: "text-text-muted" }, t.solarSystemForm.compensation20Years)), h("span", { key: '4442d42f3f5fea6de6ebfe95eff0773b63384e37', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.compensation20Years), " \u20AC")), h("div", { key: '1ef46e878482497336b6ea9ef07ea6b6b39ca568', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: 'b603edaa11df95af89dc40101a0501e95c272383', class: "flex items-center gap-2" }, h("span", { key: '8ad1f403369170986a4bb11f710f5f46a18f8bb9', class: "text-text-muted" }, t.solarSystemForm
+            .monetaryBenefit20Years)), h("span", { key: 'b02d50932181c8ce00c2ef8be4e1418814e145c6', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.savedCosts20Years), " \u20AC")))), h("div", { key: '8985466e01091bc03c45b0543c5ee26b5f5386db', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '248f011371b5f188bc95347f4a6d38f85743526a', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.requestOffer), h("div", { key: 'c096a6fe9ff9b41f95b6481dead7af57ba961b72', style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(1 00px, 1fr))",
+                gap: "1rem",
+            } }, h("div", { key: '7f700d4bd04704f7aa29d47e739c36a6e54088a6' }, h("label", { key: 'f5668d862e0d487ee0b64899c766ffeed1c25072', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.name), h("input", { key: '9c676dafa8f27c193079f0dd6d68a991c69d4750', type: "text", class: `w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`, style: this.nameError
+                ? errorBorderStyle
+                : borderStyle, value: this.name, onInput: (e) => {
+                this.name =
+                    e.target
+                        .value;
+                this.validateForm();
+            }, placeholder: "Your name" }), this.nameError && (h("p", { key: '2ef2fd8d7e69f5039dde0b137568bd45b0e91a79', class: "text-error text-sm mt-1" }, this.nameError))), h("div", { key: 'a7f1d9da636f822aa3eb1936aca6bbb935267623' }, h("label", { key: 'b6eb2ccb8bd50afb00a68ad18efcd43e06a8f2bb', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.email), h("input", { key: '10beb1d64dfd3991e4d57c0504da0326eef9cf25', type: "email", class: `w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`, style: this.emailError
+                ? errorBorderStyle
+                : borderStyle, value: this.email, onInput: (e) => {
+                this.email =
+                    e.target
+                        .value;
+                this.validateForm();
+            }, placeholder: "your.email@example.com" }), this.emailError && (h("p", { key: 'a0740a7fb12f58639e519e89389c4c60c3a594b0', class: "text-error text-sm mt-1" }, this.emailError))), h("div", { key: '9ce5e139e2c4c0c88dff3f183a42f4966cf861b7' }, h("label", { key: '67f650c9ed7e38dcc0049f3ff7bac0427ca61942', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.phone), h("input", { key: '85eac1db16306e4342f3c52300fa8284e2ea1530', type: "tel", class: `w-full px-4 py-2 rounded-4xl focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`, style: this.phoneError
+                ? errorBorderStyle
+                : borderStyle, value: this.phone, onInput: (e) => {
+                this.phone =
+                    e.target
+                        .value;
+                this.validateForm();
+            }, placeholder: "+34 123 456 789" }), this.phoneError && (h("p", { key: 'a6d4c19718f0c822698df428c5541de8e851a7da', class: "text-error text-sm mt-1" }, this.phoneError)))), h("div", { key: '7ca3546cbf81c69d47087c2faa7d1f2e13eedfbd', class: "flex flex-col items-center gap-4" }, h("button", { key: 'ba107a8d0c9bc413c0962ccf8a5aad9d85882b9c', onClick: () => this.handleRequestOffer(), disabled: !this.name.trim() ||
+                !this.email.trim() || !!this.nameError ||
+                !!this.emailError || !!this.phoneError ||
+                this.isSubmitting, class: `px-6 py-3 rounded-4xl transition-colors duration-200 flex items-center gap-2 ${this.isSubmitting
+                ? "bg-muted text-text-muted cursor-not-allowed"
+                : "bg-secondary hover:bg-tertiary"}`, style: {
+                color: this.isSubmitting
+                    ? "var(--color-text-muted)"
+                    : "#ffffff",
+            } }, this.isSubmitting && (h("div", { key: '599bf6ba45b4f79760828b166451cad579ad99a4', class: "w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" })), this.isSubmitting
+            ? t.solarSystemForm.sending
+            : t.solarSystemForm.requestOfferButton), this.submitMessage && (h("div", { key: 'bff80e01d48c64a17f556446e68b17c7a061d0fb', class: `text-sm px-4 py-2 rounded-4xl ${this.submitSuccess
+                ? "bg-success/10 text-success border border-success/20"
+                : "bg-error/10 text-error border border-error/20"}` }, this.submitMessage)))))));
+    }
+    static get watchers() { return {
+        "systemConfigs": ["updateSystemConfigs"]
+    }; }
+};
+SolarSystemForm.style = outputCss;
+
+export { SolarSystemForm as solar_system_form };
+//# sourceMappingURL=solar-system-form.entry.esm.js.map
+
+//# sourceMappingURL=solar-system-form.entry.js.map