blue-chestnut-solar-expert 0.0.54 → 0.0.56

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

@@ -0,0 +1,573 @@
+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;
+    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;
+    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.compensationPerDay / this.compensationRate) * 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.battery > 0,
+                    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: '7139c9f7a83ebbbda58963c1136bbdfd7728e0bd', 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: '4e1cdee9c1ec934d4b874e88a96db2801c79a60d', class: "text-2xl font-bold text-secondary mb-4 w-full" }, t.solarSystemForm.title), h("div", { key: '63bb70b6c15761b9268dcc3059f44eb8ad4ef2fa', class: "w-full bg-primary rounded-4xl space-y-6" }, h("div", { key: '9f0f34af0c1dbfc1b8bb07883cb592010985692b', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '5e8a8d3554ec8d810433dd75f96c32c2545508fc', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.systemInformation), h("div", { key: 'cf72325db86b65965cdb44013533477e64c23422', class: "flex flex-col sm:flex-row gap-4" }, h("div", { key: '5241cb1db7b4d7afc9179fa138a610152a7a35e1', class: "flex-1 bg-muted rounded-4xl p-4 space-y-3" }, h("div", { key: 'bc6151b8cd4b9f2e8b1b7cd311719d9fd21fc212', class: "flex items-center justify-between" }, h("label", { key: '0c1cca4024a7274281df489cd5f7bd8b62a2c96b', 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: 'b7cc82a0d13854509a123976ffec2150497c54bf', 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);
+                this.recalculate();
+            } }))), h("div", { key: '2dd7469d204e77e97c29256a07dc164bbce62b3f', class: "flex-1 bg-muted rounded-4xl p-4" }, h("div", { key: 'd6fbb640a3093ffa56ddbdecf41fee985b7c13de', class: "flex items-center justify-between" }, h("label", { key: '5967e7593b965896fca79dc911f79dfb04bd31ba', class: "text-sm font-medium text-text-muted" }, t.solarSystemForm.panelPeakPower), h("span", { key: 'ecc8aebf57ebacdce115188308a3947d4329a4cd', class: "text-text-muted" }, this.panelPeakPower.toFixed(2), " kW")), h("div", { key: '07acff632a6492d811334c1b4fdfe7631fbf8930', class: "flex items-center justify-between mt-4" }, h("span", { key: 'f8692f2cf74cd8603775e94099752c9e4d03be9b', class: "text-sm font-medium text-text-muted" }, t.solarSystemForm.totalSystemPeakPower), h("span", { key: '7a89ad672637c04b5365e7ea034448ece3d32cf2', class: "font-bold text-text-muted" }, (DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *
+            this.numberOfPanels).toFixed(1), " kWp"))))), h("div", { key: 'c913d3a0895044e60c992aa368c27379208a197b', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: 'fc1b7bfc69f79e199a8526fda30851395e615b0f', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.householdConsumptionTitle), h("div", { key: 'dc4e9eecae7e31cded9b85c544ce13c59226efa6', class: "grid grid-rows-2 gap-0" }, h("div", { key: '5e00f5e87fdccd6dd6455c9a26e3a7ce1ae05394', class: "grid grid-cols-2 gap-4" }, h("label", { key: '155a89fbbf6ccc69bdcc0bed88d05bc7d09a866d', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.annualConsumption), h("label", { key: '3bd653254b0f2ddb0c61f452952a0ab58c4f7d40', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.consumptionProfileTitle)), h("div", { key: '33113a21857b3f4f68339fc39cd3bbc4054e1586', class: "grid grid-cols-2 gap-4" }, h("input", { key: '063500ea400d697056ec5e214b6fb530af06ccfe', type: "number", 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: '48628afb1e204838358a8a56d7e3d09fc1576c10', 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: 'dcdcf43433687a823b4cc617d956b10a56b82133', value: "mostly_at_home", selected: this.consumptionProfile ===
+                "mostly_at_home" }, t.solarSystemForm.consumptionProfiles
+            .mostlyAtHome), h("option", { key: 'ad37f3694f26f08cfc65e67f6d78e14c815478c9', value: "mostly_away", selected: this.consumptionProfile ===
+                "mostly_away" }, t.solarSystemForm.consumptionProfiles
+            .mostlyAway))))), h("div", { key: '2461025c58f8e091cf757c4968b0a21108f35e75', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '89575de1e21452e71028505f02474cc6d0de197a', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.additionalComponents.title), h("div", { key: 'b2f666cfe480ce0cc8c84c24a852034b04eca215', class: "flex flex-col gap-4" }, h("div", { key: '7a224cfb1d954bed01b45e3a9f397ba69f0055b8', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '4c0d72a28f4440e647159fbb8cfe5d3a6eda53e2', class: "flex items-center justify-between" }, h("div", { key: '928b6bf84a5349fa89e3b961894b538185d33961', class: "flex items-center gap-2" }, h("input", { key: '6f5d77b885551b0280366cd837baec595529490f', 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: '4df84acd8d1011ace4903c10674a6ea6c8320276', htmlFor: "heatPump", class: "text-text-muted" }, t.solarSystemForm
+            .additionalComponents
+            .heatPump)), (this.heatPump > 0 && !this.isIOS()) && (h("span", { key: 'e1cc7cac2dd0d3efbefd9e05ef7fe61c7a1cfe3a', class: "text-text-muted" }, this.heatPump, " m\u00B2"))), this.heatPump > 0 && (h("div", { key: '5bef4d0ac8adbd58bd8f4d56e6ba1c83f22d6f98', 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) => {
+                    const value = parseInt(e.target
+                        .value);
+                    if (value >= 10 &&
+                        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: '76a40ab1f89c47050faf446a2017b2b74703638a', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '56666133211231da0c95f3ecd058ea62615ea88c', class: "flex items-center justify-between" }, h("div", { key: '08b1d06eb90a88e5583989f5d2743f9e294a1f7e', class: "flex items-center gap-2" }, h("input", { key: 'cbd441786b9e23720e2a0aa2c39ef5bbaaed01b4', 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: 'f746d81d324d236e53d553706a0a64f78d6ae2d8', htmlFor: "electricCar", class: "text-text-muted" }, t.solarSystemForm
+            .additionalComponents
+            .electricCar))), this.electricCar && (h("div", { key: 'f2a0ff39ca1e52ba544f333ebd73da57b0803f36', class: "flex flex-col gap-2" }, h("div", { key: '052c60cf1661a8d3fe826a63e657b7ebb228bccc', class: "grid grid-cols-2 gap-4" }, h("label", { key: 'f486f4876988df361f4bbb967e566112c491036c', class: "text-sm text-text-muted" }, t.solarSystemForm
+            .additionalComponents
+            .chargingTime), h("label", { key: '870bc7ff65a52cfa1bbfa0296bf8428c104d5edf', class: "text-sm text-text-muted" }, t.solarSystemForm
+            .additionalComponents
+            .kilometersPerYear)), h("div", { key: 'e1698c0928da471f3758228502159baafecbe44b', class: "grid grid-cols-2 gap-4" }, h("select", { key: '82362f74b362a31c8a30e246d073836e93bec1c3', 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: 'c76bd6ed6abbcb624f3c79585cb6f719bc60b30e', value: "day", selected: this
+                .electricCarChargingTime ===
+                "day" }, t.solarSystemForm
+            .additionalComponents
+            .chargingTimeDay), h("option", { key: 'abc0fd939d0d6d228b124f53e9b297bd8079fef6', value: "night", selected: this
+                .electricCarChargingTime ===
+                "night" }, t.solarSystemForm
+            .additionalComponents
+            .chargingTimeNight)), h("input", { key: '0f8792d286b91548ca25843c1ad31dd081842f88', type: "number", min: "1000", max: "50000", 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);
+                this.recalculate();
+            }, style: borderStyle }))))), h("div", { key: '3f9c6afd978a3e77435e035e64d9aaf3aa0aa97a', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '99b1f2cfbf1d8cba8d1fb19201ee59faa8943858', class: "flex items-center justify-between" }, h("div", { key: 'ae3155b4b63cea133953a9dee18629c61dbd1cc4', class: "flex items-center gap-2" }, h("input", { key: 'bbfe892ac4fe0564701d1e8a5595b6b85f0ba76a', 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.battery > 0, onChange: (e) => {
+                this.battery =
+                    e.target
+                        .checked
+                        ? 5
+                        : 0;
+                this.recalculate();
+            } }), h("label", { key: 'c0da0d83bfe05a6591683e308f14f2d7aa60b3b3', htmlFor: "battery", class: "text-text-muted" }, t.solarSystemForm
+            .additionalComponents
+            .battery)), (this.battery > 0 && !this.isIOS()) && (h("span", { key: '7e7e5848a5c12d3029887800c9cfa6a97c3c5f8d', class: "text-text-muted" }, this.battery, " kWh"))), this.battery > 0 && (h("div", { key: '41ebca4575af0383bae612780942f52197835390', class: "flex flex-col gap-2" }, this.isIOS()
+            ? (h("div", { class: "flex items-center gap-2" }, h("input", { type: "number", min: "1", 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) => {
+                    const value = parseInt(e.target
+                        .value);
+                    if (value >= 1 &&
+                        value <= 20) {
+                        this.battery =
+                            value;
+                        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) => {
+                    this.battery = parseInt(e.target
+                        .value);
+                    this.recalculate();
+                } }))))))), h("div", { key: '1f3db56a01db3aa71a3e732eb42feee34619c016', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '4406c2eb5ce9f2fb6c2b9ced506e2722dd33c90d', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.electricityCostsTitle), h("div", { key: '9474e98cb4f906dc7bbe9c1ae9677be099af8554', style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
+                gap: "1rem",
+            } }, h("div", { key: '45be0a23fce514b258b89308355512be1ab76543' }, h("label", { key: 'd4b5ae8bec34ea36437fbc80808954e3faa4b53a', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.electricityPrice), h("input", { key: '3f0f2f9f6424647f3b39fd6c1c71673c151f5168', 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: 'ff004d5e3a408d0b471bccff956297eb80359581' }, h("label", { key: 'afd1ecf5fcbad4ccd0a9ab091e16cffd9c21b64c', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.compensationRate), h("input", { key: 'f22a6fa86cb9ade28345570bacd51a0ca69e3ccd', 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: '2b2f63afb3a565fbd96c3e81e06c7281fb62fa3b' }, h("label", { key: '46f212c2b33c682f3b2c203dc71f7b6441cc25a5', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.annualPriceIncrease), h("input", { key: '164994dc4f1bdaa38b0fd4a069ac1fbc0f02026f', 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: '6543bebe9a5c3ddd914cd79a1d0bccdeb064091f', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '05fafd14c233ce175189d8bd93df07121ee7c33c', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.resultsTitle), h("div", { key: '8dc5907b2cc779ff942ee0e6f2b501924f9d1a97', class: "bg-muted rounded-4xl p-4" }, h("div", { key: '8fd3a7c0ef678a57834242dbc5e655cba001888a', class: "flex flex-col sm:flex-row sm:items-center justify-between" }, h("span", { key: 'c2c32f7f9f5f50242332c6a4b5af2cedb7fb6669', class: "text-text-muted" }, t.solarSystemForm.autonomy), h("span", { key: 'd6e5824d2b44cac00cd5d712007e65b2ccd0ecfd', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.autonomy > 100
+            ? "100"
+            : this.formatEuropeanNumber(this.autonomy, 1), "%")), h("div", { key: '15e3620ae50666bbd4dd08379d2d276b41508379', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("span", { key: 'ff9746b6eb4046ddf4d87839555297e64205e841', class: "text-text-muted" }, t.solarSystemForm.totalEnergyConsumption), h("span", { key: '692198f0d789364993b679f4d73c098c7a2c2b93', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.totalEnergyConsumption, 0), " kWh/", t.solarSystemForm.year)), h("div", { key: '8a292497f9b701b0805e5c3a2d007c8242033891', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("span", { key: 'd156ccda8acafbc6946810493c150881bc891757', class: "text-text-muted" }, t.solarSystemForm.totalEnergyProduction), h("span", { key: 'f3b8171f54c842950cf442b51a8e712b21a28a7c', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.totalEnergyProduction, 0), " kWh/", t.solarSystemForm.year)), h("div", { key: '0ce95a5cfff5c3ae27056b680f4e290b5c383cea', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: 'e3551545706f356cbdb82b9d9b2b90c561f7895e', class: "flex items-center gap-2" }, h("span", { key: '97df861ed813711fc7d2f225b45071c9a6035e3d', class: "text-text-muted" }, t.solarSystemForm.costSavings)), h("span", { key: '0929f0961f4db248a3ad63cc685d5d48f4e0693c', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.costSavings), "\u20AC/", t
+            .solarSystemForm.year)), h("div", { key: '8658c9d6537b980d3c32f1382c9a1507de5482bf', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: 'e3b71e616e9f0be006cd48eb57161e24f5a8f204', class: "flex items-center gap-2" }, h("span", { key: 'a083ad4fec0a9d546cd2d38fdbaeb4d76e5ce091', class: "text-text-muted" }, t.solarSystemForm.compensation20Years)), h("span", { key: '028c3f9c1135bb74f4bf39baf657ac73dbd935d3', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.compensation20Years), "\u20AC")), h("div", { key: '875446618133c6cbe70c4939fa46a5b85157e6ca', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: '98b9829e57eb40d1be9f42d0497b5678363ef20b', class: "flex items-center gap-2" }, h("span", { key: '6a87d1ebb879bacade7d1de58942bdb080190e6c', class: "text-text-muted" }, t.solarSystemForm
+            .monetaryBenefit20Years)), h("span", { key: 'fcae5f3a40137fad4a51df1afa5cbb70cca43b0e', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.savedCosts20Years), "\u20AC")))), h("div", { key: 'f6298fa9bbba037cecb0b8e55bdd620b0cac1602', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: 'ba176c714d0c73cec7354b060734fbafdbbfd7b7', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.requestOffer), h("div", { key: 'e35c8b896aecc01ccc8036a64cfcd52636d7d816', style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
+                gap: "1rem",
+            } }, h("div", { key: 'd88465e3c4edc99871fc92a0f36900d204579d9a' }, h("label", { key: 'f0a49b5ed350c5f638a64de1fa87739e46297c9f', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.name), h("input", { key: '70eb7d64859083937ed05c85e2a433b862e7ef0c', 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: '953421511217ed5759266488e606ee706cbaaa66', class: "text-error text-sm mt-1" }, this.nameError))), h("div", { key: '7d2c2f6ce9f6161ea1123f45b017479f0a872153' }, h("label", { key: '190c752cc5f9a0db9355b871b42adfdedd7160b3', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.email), h("input", { key: 'f1bad4e18f283acd556017bb8ccb880cbbc804c4', 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: '07e41cd62db7a0585ce03cf66978bc1b485fcd58', class: "text-error text-sm mt-1" }, this.emailError))), h("div", { key: '4ac9628f2ce4cba2fda116e2ffbb6496372dcecf' }, h("label", { key: '94e2332210a1efed939555f52645cd0ebfef2679', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.phone), h("input", { key: 'de94479e3cf9c16f35e536815f1f511e168ef8e0', 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: '644a0267abc1fec8a6a2784b21e1327d71f091af', class: "text-error text-sm mt-1" }, this.phoneError)))), h("div", { key: '4c88bcdee1119057ecc14ead825fd144414577ba', class: "flex flex-col items-center gap-4" }, h("button", { key: 'c8c97d037ad92042100af3c3be6bfdc1ff2517a5', 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: '78ccc59f3f59496867c0699c1370cf79b4c7fe7d', 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: '5a1efe7e4264d5510618570e494b7ccbfef76bfa', 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
+            }
+        };
+    }
+    static get states() {
+        return {
+            "householdConsumption": {},
+            "consumptionProfile": {},
+            "electricityPrice": {},
+            "compensationRate": {},
+            "annualPriceIncrease": {},
+            "autonomy": {},
+            "costSavings": {},
+            "numberOfPanels": {},
+            "panelPeakPower": {},
+            "name": {},
+            "email": {},
+            "phone": {},
+            "nameError": {},
+            "emailError": {},
+            "phoneError": {},
+            "electricCar": {},
+            "electricCarChargingTime": {},
+            "heatPump": {},
+            "battery": {},
+            "compensation20Years": {},
+            "savedCosts20Years": {},
+            "maxPanels": {},
+            "kmDrivenPerYear": {},
+            "totalEnergyConsumption": {},
+            "totalEnergyProduction": {},
+            "isSubmitting": {},
+            "submitMessage": {},
+            "submitSuccess": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "systemConfigs",
+                "methodName": "updateSystemConfigs"
+            }];
+    }
+}
+//# sourceMappingURL=solar-system-form.js.map