blue-chestnut-solar-expert 0.0.68 → 0.0.69

package/dist/collection/components/solar-system-form/solar-system-form.js

@@ -0,0 +1,617 @@
+import { h } from "@stencil/core";
+import { DEFAULT_SOLAR_PANEL_TYPE } from "../../config";
+import { getLanguageStrings } from "../../utils/lang/general";
+import { state } from "../../store";
+import { generateElectricCarChargingHours, simulate } from "harmonia-sim";
+import { HEAT_PUMP_CONSUMPTION } from "../../constants";
+import { sendLeadToNexvoro } from "../../utils/api";
+export class SolarSystemForm {
+    systemConfigs = {};
+    polygons = [];
+    roofCanvas;
+    polygonCanvas;
+    pixelInMeters;
+    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"
+                        ? generateElectricCarChargingHours(6, 18)
+                        : generateElectricCarChargingHours(18, 6),
+                }
+                : undefined,
+        };
+        const result = 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(),
+                    pixelInMeters: this.pixelInMeters,
+                },
+                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: '42867ab1fc1201f981ee3c96a138ff5d999740fc', 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: 'ee1db435412a97d54333c36fc0c1a6fab5fe597f', class: "text-2xl font-bold text-secondary mb-4 w-full" }, t.solarSystemForm.title), h("div", { key: '27dcc67909fcbafd2093792e2ee822d233a23421', class: "w-full bg-primary rounded-4xl space-y-6" }, h("div", { key: '93ae54e79a272a01acdcfe21f1e0983811669ca6', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '2998dbde483a512c28d6b02ace04944eda49ff7c', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.systemInformation), h("div", { key: 'a169b4bdfd3c0b6c175971cfa119c48bdde6ff9d', class: "flex flex-col sm:flex-row gap-4" }, h("div", { key: '72a5c0c40117ddee1d14808898703869e34afb23', class: "flex-1 bg-muted rounded-4xl p-4 space-y-3" }, h("div", { key: '286c9346d417f9325aeb4653a428fc527317f1f2', class: "flex items-center justify-between" }, h("label", { key: 'cd78273dbacea60dfa7d3cd52fd61709c728c179', 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: 'db21c520b3151ab4f766bd99092a36707fad3922', 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: 'fed7b9efc92d01c73a34da7dfa3663d801f40ebb', class: "flex-1 bg-muted rounded-4xl p-4" }, h("div", { key: '97cf3fef6db644774469fbca6b7681c5865b54d2', class: "flex items-center justify-between" }, h("label", { key: '7471aeacdeddfe2951b474bb0006bc018b52528c', class: "text-sm font-medium text-text-muted" }, t.solarSystemForm.panelPeakPower), h("span", { key: 'cad4639ae980b4228723c78f0b0bbbc27d9322c0', class: "text-text-muted" }, this.panelPeakPower.toFixed(2), " kW")), h("div", { key: 'b344c0c87bbd7e016681034434a36982759f4107', class: "flex items-center justify-between mt-4" }, h("span", { key: '8619d3662fb929a2b9f185f556ded70de0210f70', class: "text-sm font-medium text-text-muted" }, t.solarSystemForm.totalSystemPeakPower), h("span", { key: '2ad8de7cb701e9410425bb762d03e03a5e9b3181', class: "font-bold text-text-muted" }, (DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *
+            this.numberOfPanels).toFixed(1), " kWp"))))), h("div", { key: '2cacc97462ac629a060baad3975179da6ad94e53', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: 'c10ec73052c222c5b3d75f2b28ae98189cf51380', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.householdConsumptionTitle), h("div", { key: '0279cc5c0f7cf3dcfd5c59075f4136edfde0b557', class: "grid grid-rows-2 gap-0" }, h("div", { key: '9e4b72083f26c1c540f757f74297f2bf1fe0c93c', class: "grid grid-cols-2 gap-4" }, h("label", { key: '7a5e9bf3b54bbc8328755837542a3766315247ef', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.annualConsumption), h("label", { key: '5e75002062d1e932d451f8350078afe3b34c3126', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.consumptionProfileTitle)), h("div", { key: '28ead4dbbe0258b6134a5c0c948ae993865c7da9', class: "grid grid-cols-2 gap-4" }, h("input", { key: '3b4cebdf7e4d38b3503d49f2c3cb2291ad17c6d0', 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: '76994946ffe5e5d53037a58ed13fe103d8af3e64', 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: 'c7d2c8ec8d92f9339e33d5532504e92e1868bd0b', value: "mostly_at_home", selected: this.consumptionProfile ===
+                "mostly_at_home" }, t.solarSystemForm.consumptionProfiles
+            .mostlyAtHome), h("option", { key: '668d7edd27b5c923c944ab442b960ae94c12af00', value: "mostly_away", selected: this.consumptionProfile ===
+                "mostly_away" }, t.solarSystemForm.consumptionProfiles
+            .mostlyAway))))), h("div", { key: 'e2e2e002761485d99790c4727bd46ed1ed190123', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '46f8a7b7fc363d6eca28fbe5701d04c7d95e54e5', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.additionalComponents.title), h("div", { key: '08eaa438ae318304b5f2c3de023823b21f19eb75', class: "flex flex-col gap-4" }, h("div", { key: '4d56b31df0ca2935710fcd8d1733ba5f5ef07d92', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '0f399db912c4851d1d22d430c479f35a684e8405', class: "flex items-center justify-between" }, h("div", { key: 'af002c41ce930b0c1cb7bd9f9e58890064fc3fe8', class: "flex items-center gap-2" }, h("input", { key: '781624b2b616de5b5d9ade954911950c77224d55', 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: '94e129a09f3af63d049c3b58bb6d3bb1b788739c', htmlFor: "heatPump", class: "text-text-muted" }, t.solarSystemForm
+            .additionalComponents
+            .heatPump)), (this.heatPump > 0 && !this.isIOS()) && (h("span", { key: '9a9c4208690edaa0809435a9bfb219d65ac825a1', class: "text-text-muted" }, this.heatPump, " m\u00B2"))), this.heatPump > 0 && (h("div", { key: 'b71000e853b6f5317f5b5190fdfe57582217dbbe', 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: 'a3ffb277ff4f4c5539c8484c1e2b9e9c5dbff64f', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '520a1c1f3aff8482bab8206e72fd0f8480192e31', class: "flex items-center justify-between" }, h("div", { key: 'c5dee085ffcc1b93acacf451ce7044c1dbbbd5ae', class: "flex items-center gap-2" }, h("input", { key: '835135fc8cd50873fdc2611526735b2a8b8d238c', 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: 'f401eb62de0b05c0e65c89294d65e78925f19749', htmlFor: "electricCar", class: "text-text-muted" }, t.solarSystemForm
+            .additionalComponents
+            .electricCar))), this.electricCar && (h("div", { key: 'a53474411832751c7a30aeb5ea02db0f9f512963', class: "flex flex-col gap-2" }, h("div", { key: '19f2e4448eaaa94fba0b6d922ecb18ff28d052bc', class: "grid grid-cols-2 gap-4" }, h("label", { key: 'bd92f4dd142ef6a732c85d9b71bc9eb3c6b60fa6', class: "text-sm text-text-muted" }, t.solarSystemForm
+            .additionalComponents
+            .chargingTime), h("label", { key: 'bb0552899cf2642b866213d91d5d90d2d8a1424e', class: "text-sm text-text-muted" }, t.solarSystemForm
+            .additionalComponents
+            .kilometersPerYear)), h("div", { key: '35ef876cab7b2d4fe0fea2eb2b821b5c59cdbd34', class: "grid grid-cols-2 gap-4" }, h("select", { key: '9b6961f77e163568d4c09b207cec5958c2a5302b', 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: '5e67bdee8a891ace0299fbc3f2faaa82ceab9963', value: "day", selected: this
+                .electricCarChargingTime ===
+                "day" }, t.solarSystemForm
+            .additionalComponents
+            .chargingTimeDay), h("option", { key: '00649f89de616ada4292ff71eb15524a5b946059', value: "night", selected: this
+                .electricCarChargingTime ===
+                "night" }, t.solarSystemForm
+            .additionalComponents
+            .chargingTimeNight)), h("input", { key: '3234b8ac6c559b57b8d24bacb1794fd2860aab24', 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: '8d5eec07f8446d8984d3f6b767b404e5840dc67f', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '2321a2419b1f6ab4ab591ac09a44bc9168b591c2', class: "flex items-center justify-between" }, h("div", { key: '33cbfd3dbfac3a3077e73ad3d5a61bd845cfe1c8', class: "flex items-center gap-2" }, h("input", { key: 'd3d6b513e7eb73cc96f4ed1b5b70f4d46eebb8b1', 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: 'd73591c77f3b04c2b78c33a6d71808cdddd782e7', htmlFor: "battery", class: "text-text-muted" }, t.solarSystemForm
+            .additionalComponents
+            .battery)), (this.batteryEnabled && !this.isIOS()) && (h("span", { key: 'dffc91a5159c4e2b8889175751c432e318f47dae', class: "text-text-muted" }, this.battery, " kWh"))), this.batteryEnabled && (h("div", { key: 'ead4529d83f84e9f8e762e7ccc6203c886fea2cf', 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: 'cc21f52e0e1ea5d1f731951325053a4615641288', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '413db6f645abd608dc74c0fe9dd2b8538e439ff3', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.electricityCostsTitle), h("div", { key: '36a7f1d8ca5b115cf86c136ab8b2834c621cbff4', style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(100px, 1fr))",
+                gap: "1rem",
+            } }, h("div", { key: '393a18f5a6d81a557d85a77ec83a764ee22043cb' }, h("label", { key: '23c407eba1f39251193d83320f79feb88a709ce9', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.electricityPrice), h("input", { key: '6e9a5ed3a36231ffccc9dcaa00ac6919668078c7', 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: '3942694c95b0b451bca63341cdfb92b5f5829593' }, h("label", { key: 'bdb87c826d37b147c031a2ca53411a7432c845fd', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.compensationRate), h("input", { key: 'b91214ef6aebe7c342ec4bb604f6e3a37b189488', 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: '56684c4d9d65272834bd4cebe8c4c167bb16a958' }, h("label", { key: 'af7337ddaa1529dbc6b07704a2c313a591b6e3bd', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.annualPriceIncrease), h("input", { key: '90bef6067bf8fae6b598a551ab2ddbb4f0725b29', 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: '266bd42a4b60349bbb098f8a56a1af6444b85fad', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: 'c24a5e56041eeaf26a5648af092a942ccd41e739', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.resultsTitle), h("div", { key: '3fd59700c6cdb99662f8a7232141d1f7efb2109f', class: "bg-muted rounded-4xl p-4" }, h("div", { key: '25708d8c8cdd04b21e66ac05776cef76ce53725a', class: "flex flex-col sm:flex-row sm:items-center justify-between" }, h("span", { key: '0b45f781be44dd70a66d68446319f17800357984', class: "text-text-muted" }, t.solarSystemForm.autonomy), h("span", { key: 'a56d5b093834c6a42f74619ab569a983057e91a0', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.autonomy > 100
+            ? "100"
+            : this.formatEuropeanNumber(this.autonomy, 1), "%")), h("div", { key: 'feea3eca497e8f14eb619c4f2ece03c39394ca74', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("span", { key: '3b5ae4b3be1368da0a8c6eb0c9e1c07c6ef6e2d7', class: "text-text-muted" }, t.solarSystemForm.totalEnergyConsumption), h("span", { key: '04d21a3ce938bd47aee28598467984d467c19fba', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.totalEnergyConsumption, 0), " kWh/", t.solarSystemForm.year)), h("div", { key: '6812053410e4372e791cf1fc7f74b411549fc8d9', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("span", { key: '2451f60fe0ec7edb6312bc7b8a50b63c4e4af182', class: "text-text-muted" }, t.solarSystemForm.totalEnergyProduction), h("span", { key: '8695bcaee81b83829460639976872d141734bf16', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.totalEnergyProduction, 0), " kWh/", t.solarSystemForm.year)), h("div", { key: 'c7bc91f11c89d492cdd4545a96af349e2a643fc9', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: 'b28127d6c7cb295a61cd5a5e0a21dbba9acbbdba', class: "flex items-center gap-2" }, h("span", { key: 'f0a7b0e4359155d99e0859da98eb9cbedcd53a00', class: "text-text-muted" }, t.solarSystemForm.costSavings)), h("span", { key: 'ec566bd9d9fb4f2757c8467525bef7a4e584642a', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.costSavings), " \u20AC/", t
+            .solarSystemForm.year)), h("div", { key: 'f68554341ba8b734ea64507f705a0d1318317598', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: '95ea75c1ada49b28ccbba230fb696660e5892538', class: "flex items-center gap-2" }, h("span", { key: '169dd5d92dad7d8fb54a24eee3f736b30f635600', class: "text-text-muted" }, t.solarSystemForm.compensation20Years)), h("span", { key: 'c1445a608709f8202bf9e9cdc06cce961e1b949f', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.compensation20Years), " \u20AC")), h("div", { key: '9a45d97faab0feefdbbef029c664579347f48aaf', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: 'dce377238f8650fb00f90eb31e533e2282e8c02b', class: "flex items-center gap-2" }, h("span", { key: 'd0c04b9c4aca6c4605f04f68eb86d21f994ea7a9', class: "text-text-muted" }, t.solarSystemForm
+            .monetaryBenefit20Years)), h("span", { key: 'f56d1995af5bda25c068ee58c36edf4cd6a61d9f', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.savedCosts20Years), " \u20AC")))), h("div", { key: '6b8acc3f0c13fa2b70854214d5882f8024dbcc8c', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '216a6809e770f9e67d9731e104ed50ec68a3d187', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.requestOffer), h("div", { key: '7ed284d01cc4f3375e20f8b85d2c0d1af287227e', style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(1 00px, 1fr))",
+                gap: "1rem",
+            } }, h("div", { key: 'e0f7dc87d379fdccbe3c28fbae46b3104235b68d' }, h("label", { key: '6f3b10b41a081224855dd6aa68df0ede72e0a6c7', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.name), h("input", { key: '1e8f43f9818f896e53fa0fcb859b7865e64a2a64', 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: '2057d743304e3e4fbb1367971ac7ff5a008b8ae7', class: "text-error text-sm mt-1" }, this.nameError))), h("div", { key: '4884e8d194a8be9c17ca8f38fc4349e5e79396bb' }, h("label", { key: '329f5d0502c8e685a4abc2f49e153f6c3e69f13f', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.email), h("input", { key: '847cff5833cc8d1872fc8a620344085a74d885ca', 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: '956e51452f32f6c92d70de7ca28beab4922850f9', class: "text-error text-sm mt-1" }, this.emailError))), h("div", { key: '48e2718dd33ab7efa45e0992c8f281083e77b2de' }, h("label", { key: '545eca60f2f30861cbb49f12391098fcd437d51b', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.phone), h("input", { key: '9baca33fb75c16ca3500b8980c6b55ffe35bedfc', 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: '23c1d5ee25d9b01295627db3feea507e2e0804a4', class: "text-error text-sm mt-1" }, this.phoneError)))), h("div", { key: '155f8a5dcecdb0c330b6ce3f3455f39c1d7689b5', class: "flex flex-col items-center gap-4" }, h("button", { key: 'fabacedfac41216d9b48beed1fce03ccd39dd5cd', 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: '51b7a0add44644aa898060aeba67ef74cdb32d5d', 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: 'cb54060dff88997e93fc105ebb876c8e518de545', 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 is() { return "solar-system-form"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "systemConfigs": {
+                "type": "unknown",
+                "attribute": "system-configs",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [id: string]: SolarSystem }",
+                    "resolved": "{ [id: string]: SolarSystem; }",
+                    "references": {
+                        "SolarSystem": {
+                            "location": "import",
+                            "path": "harmonia-sim",
+                            "id": "../../../harmonia/packages/harmonia-sim/dist/index.d.ts::SolarSystem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "polygons": {
+                "type": "unknown",
+                "attribute": "polygons",
+                "mutable": false,
+                "complexType": {
+                    "original": "Polygon[]",
+                    "resolved": "Polygon[]",
+                    "references": {
+                        "Polygon": {
+                            "location": "import",
+                            "path": "harmonia-types",
+                            "id": "../../../harmonia/packages/harmonia-types/dist/index.d.ts::Polygon"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "roofCanvas": {
+                "type": "unknown",
+                "attribute": "roof-canvas",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLCanvasElement",
+                    "resolved": "HTMLCanvasElement",
+                    "references": {
+                        "HTMLCanvasElement": {
+                            "location": "global",
+                            "id": "global::HTMLCanvasElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "polygonCanvas": {
+                "type": "unknown",
+                "attribute": "polygon-canvas",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLCanvasElement",
+                    "resolved": "HTMLCanvasElement",
+                    "references": {
+                        "HTMLCanvasElement": {
+                            "location": "global",
+                            "id": "global::HTMLCanvasElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "pixelInMeters": {
+                "type": "number",
+                "attribute": "pixel-in-meters",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "householdConsumption": {},
+            "consumptionProfile": {},
+            "electricityPrice": {},
+            "compensationRate": {},
+            "annualPriceIncrease": {},
+            "autonomy": {},
+            "costSavings": {},
+            "numberOfPanels": {},
+            "panelPeakPower": {},
+            "name": {},
+            "email": {},
+            "phone": {},
+            "nameError": {},
+            "emailError": {},
+            "phoneError": {},
+            "electricCar": {},
+            "electricCarChargingTime": {},
+            "heatPump": {},
+            "battery": {},
+            "batteryEnabled": {},
+            "compensation20Years": {},
+            "savedCosts20Years": {},
+            "maxPanels": {},
+            "kmDrivenPerYear": {},
+            "totalEnergyConsumption": {},
+            "totalEnergyProduction": {},
+            "isSubmitting": {},
+            "submitMessage": {},
+            "submitSuccess": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "systemConfigs",
+                "methodName": "updateSystemConfigs"
+            }];
+    }
+}
+//# sourceMappingURL=solar-system-form.js.map