blue-chestnut-solar-expert 0.0.9 → 0.0.11

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import Chart from "chart.js/auto";
+// import Chart from "chart.js/auto";
 import { DEFAULT_SOLAR_PANEL_TYPE } from "../../config";
 import { getLanguageStrings } from "../../utils/lang/general";
 const SOLAR_RADIATION = [
@@ -99,8 +99,8 @@ export class SolarSystemForm {
     email = "";
     nameError = "";
     emailError = "";
-    chart = null;
-    chartRef = null;
+    // private chart: Chart | null = null;
+    // private chartRef: HTMLCanvasElement | null = null;
     updateSystemConfigs() {
         if (Object.keys(this.systemConfigs).length === 0) {
             this.numberOfPanels = 0;
@@ -138,67 +138,67 @@ export class SolarSystemForm {
                 100;
     }
     updateChart() {
-        if (!this.chartRef)
-            return;
-        const ctx = this.chartRef.getContext("2d");
-        if (!ctx)
-            return;
-        if (this.chart) {
-            this.chart.destroy();
-        }
-        const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`);
-        const data = CONSUMPTION_PROFILES[this.consumptionProfile];
-        const norm = data.reduce((acc, curr) => acc + curr, 0);
-        const peakKwh = this.numberOfPanels * this.panelPeakPower;
-        const production = SOLAR_RADIATION.map((radiation) => radiation * peakKwh);
-        for (let i = 0; i < data.length; i++) {
-            data[i] = data[i] * this.householdConsumption / norm / 365;
-        }
-        let datasets = [{
-                label: "Energy Consumption",
-                data: data,
-                borderColor: "#964500",
-                backgroundColor: "rgba(150, 69, 0, 0.1)",
-                fill: true,
-                tension: 0.4,
-            }, {
-                label: "Energy Production",
-                data: production,
-                borderColor: "#000000",
-                backgroundColor: "rgba(0, 0, 0, 0.1)",
-                fill: true,
-            }];
-        this.chart = new Chart(ctx, {
-            type: "line",
-            data: {
-                labels: hours,
-                datasets: datasets,
-            },
-            options: {
-                responsive: true,
-                plugins: {
-                    title: {
-                        display: true,
-                        text: "Daily Consumption Profile",
-                    },
-                },
-                scales: {
-                    y: {
-                        beginAtZero: true,
-                        title: {
-                            display: true,
-                            text: "Relative Consumption",
-                        },
-                    },
-                    x: {
-                        title: {
-                            display: true,
-                            text: "Hour of Day",
-                        },
-                    },
-                },
-            },
-        });
+        // if (!this.chartRef) return;
+        // const ctx = this.chartRef.getContext("2d");
+        // if (!ctx) return;
+        // if (this.chart) {
+        //     this.chart.destroy();
+        // }
+        // const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`);
+        // const data = CONSUMPTION_PROFILES[this.consumptionProfile];
+        // const norm = data.reduce((acc, curr) => acc + curr, 0);
+        // const peakKwh = this.numberOfPanels * this.panelPeakPower;
+        // const production = SOLAR_RADIATION.map((radiation) =>
+        //     radiation * peakKwh
+        // );
+        // for (let i = 0; i < data.length; i++) {
+        //     data[i] = data[i] * this.householdConsumption / norm / 365;
+        // }
+        // let datasets = [{
+        //     label: "Energy Consumption",
+        //     data: data,
+        //     borderColor: "#964500",
+        //     backgroundColor: "rgba(150, 69, 0, 0.1)",
+        //     fill: true,
+        //     tension: 0.4,
+        // }, {
+        //     label: "Energy Production",
+        //     data: production,
+        //     borderColor: "#000000",
+        //     backgroundColor: "rgba(0, 0, 0, 0.1)",
+        //     fill: true,
+        // }];
+        // this.chart = new Chart(ctx, {
+        //     type: "line",
+        //     data: {
+        //         labels: hours,
+        //         datasets: datasets,
+        //     },
+        //     options: {
+        //         responsive: true,
+        //         plugins: {
+        //             title: {
+        //                 display: true,
+        //                 text: "Daily Consumption Profile",
+        //             },
+        //         },
+        //         scales: {
+        //             y: {
+        //                 beginAtZero: true,
+        //                 title: {
+        //                     display: true,
+        //                     text: "Relative Consumption",
+        //                 },
+        //             },
+        //             x: {
+        //                 title: {
+        //                     display: true,
+        //                     text: "Hour of Day",
+        //                 },
+        //             },
+        //         },
+        //     },
+        // });
     }
     componentWillLoad() {
         this.updateSystemConfigs();
@@ -247,58 +247,54 @@ export class SolarSystemForm {
     }
     render() {
         const t = getLanguageStrings(this.language);
-        return (h("div", { key: '85f0ec10f34015604a1acefcef02299b50466b6b', class: "flex flex-col justify-center items-center w-full h-full gap-4 p-4", style: {
-                display: (Object.keys(this.systemConfigs).length === 0)
-                    ? "none"
-                    : "flex",
-            } }, h("h1", { key: 'bf5f2adee5fb32b7a4b6ed215164799f834cb19d', class: "text-2xl font-bold text-[#271200] mb-4" }, t.solarSystemForm.title), h("div", { key: 'be9b94e078403ad753219dede42a9150f59fa9c2', class: "w-full max-w-2xl bg-[#f3ebda] rounded-4xl p-6 space-y-6" }, h("div", { key: 'aee08edb3ae4839d0d563a16c1dedddc20cda0ca', class: "space-y-4" }, h("h2", { key: 'a26a8f0a04be453a66e93d682fe32f886793c863', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.systemInformation), h("div", { key: '2b260f44574aecf9068c4dddff21f1dfcea1869f', class: "grid grid-cols-2 gap-4" }, h("div", { key: 'ba75503bcca9fbe04c99c0feac99eb7c7f064455' }, h("label", { key: '5ffaad1ceab5def87c9208f236b45597f539d574', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.numberOfPanels), h("input", { key: 'e984ed36d139ba29ea648122686cd71e9a01511f', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent", value: this.numberOfPanels, readOnly: true })), h("div", { key: '6d60596af443dceaccbf71738b6e161678452053' }, h("label", { key: '593fb87663cab979e4409a15199d28cd716bfa33', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.panelPeakPower), h("input", { key: '71436a23b315fd713988d8d23f0056a5b8a378ac', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent", value: this.panelPeakPower, readonly: true }))), h("div", { key: 'd8ea7e83738283446eef7c166d05692b9cff8f30', class: "bg-white rounded-4xl p-4" }, h("div", { key: '3ef0039db7abdc783a9fe2d8a5c6a5044d76b383', class: "flex items-center justify-between" }, h("span", { key: '8532b97fb829f69b338e5fba682cc5f5f68b8e2f', class: "text-gray-600" }, t.solarSystemForm.totalSystemPeakPower), h("span", { key: 'fa3835b2d2670cbd2fa11f57af60deab2cdc7142', class: "text-xl font-bold text-[#271200]" }, (DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *
-            this.numberOfPanels).toFixed(1), " kW")))), h("div", { key: '357c15507bbb1374c4d386360b3ba313fe12c71e', class: "space-y-4" }, h("h2", { key: 'd87a246f2765a91490067d8c0449741e75bf3e71', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.householdConsumptionTitle), h("div", { key: '0ba31368f5fbb4909f2858a5b325976aa6fa103f', class: "grid grid-cols-2 gap-4" }, h("div", { key: '051bd4afd32d202664e13df6dfaf92d6f2c881ea' }, h("label", { key: '56ed4f26cdc9d0c0001f0a0a602fcdd9c4e514f2', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.annualConsumption), h("input", { key: 'fe3a1e54b09104fa8829c3d8eb1337a8665aea55', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent", value: this.householdConsumption, onInput: (e) => {
+        return (h("div", { key: 'b0a406a3e61afaf5e96e01cee612160b145bc902', class: "flex flex-col justify-center items-center w-full h-full pt-4" // style={{
+        }, h("h1", { key: '10e24c4114cb8c99b66c63085dbaff4c26a2d784', class: "text-2xl font-bold text-[#271200] mb-4 w-full" }, t.solarSystemForm.title), h("div", { key: '1badca294e702c5ee9c927bbd20c41f02ecee6a6', class: "w-full bg-[#f3ebda] rounded-4xl p-6 space-y-6" }, h("div", { key: '060730279fcb034fcfd2a1ddfd11ac0633b2fc73', class: "space-y-4" }, h("h2", { key: '71f499be9a0391ced80efd4cb316c1855a500d43', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.systemInformation), h("div", { key: '6f1d1903cc2d1b6663a1b06782bb18be00df81ed', class: "grid grid-rows-2 gap-0" }, h("div", { key: '0734194e402ebacaa7b689a2c53fe68ba6779d1c', class: "grid grid-cols-2 gap-4" }, h("label", { key: '9924155ff21e4b88d839bd7556008bda4385cee3', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.numberOfPanels), h("label", { key: 'f6ab52855564e323ade4c9d7daf29e4466ca13d1', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.panelPeakPower)), h("div", { key: '1d7b1bbc040ed2b96beaf1089f4071af37841c13', class: "grid grid-cols-2 gap-4" }, h("input", { key: '2cb11400c02982bf3e8d518b48c18cbd4cb52343', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.numberOfPanels, readOnly: true }), h("input", { key: '6a418ae815ea99b4b6316037144398aa500de9f6', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.panelPeakPower, readonly: true }))), h("div", { key: '95352d83e08f8dd84020179643315a3a8eb2f964', class: "bg-white rounded-4xl p-4" }, h("div", { key: 'f82afd12c95cd5b9d3f3b2f2e2acc9ab13b0c892', class: "flex items-center justify-between" }, h("span", { key: '9f1f9d2182583f37bff597551dc5d3cb0963dfa3', class: "text-gray-600" }, t.solarSystemForm.totalSystemPeakPower), h("span", { key: 'fffe7b7a6fbdb7342858d9c74496f5e33f68b885', class: "text-xl font-bold text-[#271200]" }, (DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *
+            this.numberOfPanels).toFixed(1), " kW")))), h("div", { key: '36a7f2c39c880b8f77a56e7a7b92ebb17e398449', class: "space-y-4" }, h("h2", { key: 'da22448bb0dc2b06a81fbcaebf3a6d21c2bc2aba', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.householdConsumptionTitle), h("div", { key: 'f95398e218dc62bcb8abb8af96f68b1ee73d48e8', class: "grid grid-rows-2 gap-0" }, h("div", { key: 'e5b652aa182e87508550ee19e97abc310b2c0e84', class: "grid grid-cols-2 gap-4" }, h("label", { key: '454931f266a394d3bc787eb5bc7b9e041941d51e', class: "block text-sm font-medium text-gray-600" }, t.solarSystemForm.annualConsumption), h("label", { key: 'f2fa110b2a728baa5d159d72d1fb537e304e4fda', class: "block text-sm font-medium text-gray-600" }, t.solarSystemForm.consumptionProfileTitle)), h("div", { key: '0ae90d2f7ed03b9dcefc577bf2d77e33530214c9', class: "grid grid-cols-2 gap-4" }, h("input", { key: '22161b32ef443506315dfd52bc63d31f3b973539', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.householdConsumption, onInput: (e) => {
                 this.householdConsumption = parseInt(e.target
                     .value);
                 this.recalculate();
                 this.updateChart();
-            } })), h("div", { key: 'c33aaab13fa367d60842d9b378a8045aeee946cc' }, h("label", { key: '3bb5d0271fad3ac4d5bf45a76d62a1d31efbec06', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.consumptionProfileTitle), h("select", { key: '061a6746a1fde4aa95d39c48c772de24ca80dda6', class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent", onChange: (e) => {
+            } }), h("select", { key: '6bae7b07af670401f2a7f039973696b64bf18511', class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", onChange: (e) => {
                 this.consumptionProfile =
                     e.target
                         .value;
                 this.recalculate();
                 this.updateChart();
-            } }, h("option", { key: 'c763ff9d4bdf3c60c5067e105d00936bf32ffbd5', value: "mostly_at_home", selected: this.consumptionProfile ===
+            } }, h("option", { key: '7c53f3339245af79bff307f81dd6dce55cdd77ad', value: "mostly_at_home", selected: this.consumptionProfile ===
                 "mostly_at_home" }, t.solarSystemForm.consumptionProfiles
-            .mostlyAtHome), h("option", { key: 'df7e8cf24b1680575fcceab59a1ba7c79da39009', value: "mostly_away", selected: this.consumptionProfile ===
+            .mostlyAtHome), h("option", { key: '5b3cf395b83cedba0da9ec573d75bfdd7ece1e80', value: "mostly_away", selected: this.consumptionProfile ===
                 "mostly_away" }, t.solarSystemForm.consumptionProfiles
-            .mostlyAway)))), h("div", { key: '61df552d9e00d3acd2419071187703a8e808abd5', class: "mt-4 h-48" }, h("canvas", { key: 'fad304a8b3b6390c9ccd79dfa37cec5ec0b2bda0', ref: (el) => this.chartRef = el }))), h("div", { key: 'd7d8e5c36d883d5dcdc51cd9a2ec44092e5cb26b', class: "space-y-4" }, h("h2", { key: 'e18131dfdc84c8e0105a9ca4640d196c006e3095', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.electricityCostsTitle), h("div", { key: '1cd7f7d3d59149e79b30b9832ef7a42e2082e00d', class: "grid grid-cols-2 gap-4" }, h("div", { key: '53bead211d686cf6acc883474baa7d9135365afc' }, h("label", { key: 'c04f6d3880e9590f9d51649df7bd124073746e5b', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.electricityPrice), h("input", { key: '68e226adfe557355b89745efc3aeee88528b6710', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent", value: this.electricityPrice, onInput: (e) => {
+            .mostlyAway))))), h("div", { key: '71a0e1a8cbacbce6b9c836c68526882e2f99d638', class: "space-y-4" }, h("h2", { key: 'd7387553332fe44c62a4556dd592df7d80e38816', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.electricityCostsTitle), h("div", { key: 'b60b41db2d7d803b20d7c8c2f1520133027ac0c2', class: "grid grid-rows-2 gap-0" }, h("div", { key: '6208460d9b1176bda2ce82232283446b98b3fd20', class: "grid grid-cols-2 gap-4" }, h("label", { key: '1d7de8e25c6d464cde30bcfdf47258f8fbe5103a', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.electricityPrice), h("label", { key: 'd83a03641de312f31f63073a874cd6a8ffd16919', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.compensationRate)), h("div", { key: '231b2756d5fbbc9756a4d2b284468260249f0357', class: "grid grid-cols-2 gap-4" }, h("input", { key: 'a1f31bbeefcbf5d8d8786b75bacdadbf4603890a', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.electricityPrice.toFixed(2), onInput: (e) => {
                 this.electricityPrice = parseFloat(e.target
                     .value);
                 this.recalculate();
                 this.updateChart();
-            } })), h("div", { key: '3264cda47cb1f7f90259fc13116601ae9e636238' }, h("label", { key: '1580f49c9f24ec02fcfe5ec174e5c8087c040f4e', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.compensationRate), h("input", { key: 'f87e99c2b852da74267351cb630453f2d7cadd6f', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent", value: this.compensationRate, onInput: (e) => {
+            } }), h("input", { key: '2c55aa2a5efc9e8241b974b7b6bdc12effbedb10', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.compensationRate.toFixed(2), onInput: (e) => {
                 this.compensationRate = parseFloat(e.target
                     .value);
                 this.recalculate();
                 this.updateChart();
-            } })))), h("div", { key: 'cccd456f9ec53c92069d10a8e6d784846bf5f781', class: "space-y-4 pt-4 border-t border-gray-200" }, h("h2", { key: '3c78d0c1acc807cc98b9d9dbc3da4a4fb6cc2a8e', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.resultsTitle), h("div", { key: '91312264cd67e83a97de15523cbc6d9f82299ed4', class: "bg-white rounded-4xl p-4" }, h("div", { key: '1e85cd1784830413d0b1c004b6d8c3351190b8f3', class: "flex items-center justify-between" }, h("span", { key: '014465ba43e1c65df0ec912c5a8f7852e8606752', class: "text-gray-600" }, t.solarSystemForm.autonomy), h("span", { key: '16f0e0cec4193c35413790f24f60a96ec698271b', class: "text-xl font-bold text-[#271200]" }, this.autonomy.toFixed(1), "%")), h("div", { key: '03a768dc16689bdefe3da494e3647703f2efd975', class: "flex items-center justify-between mt-4" }, h("div", { key: '903e120975d517ddf5969f89b6abab03d25f2f0b', class: "flex items-center gap-2" }, h("span", { key: '6c1de0b96b625c0fc7bc5b376156e0e8b33c2f1b', class: "text-gray-600" }, t.solarSystemForm.costSavings), h("div", { key: 'c70b1d80322d64ccf07b9f40ca300ed4aba9da2f', class: "relative group" }, h("svg", { key: '7f8567254e065d1dd8b6da090b12305db89bb83c', xmlns: "http://www.w3.org/2000/svg", class: "h-5 w-5 text-gray-400 cursor-help", viewBox: "0 0 20 20", fill: "currentColor" }, h("path", { key: 'd374484901dcffbc35e1ff5c1d1039526ea65978', "fill-rule": "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z", "clip-rule": "evenodd" })), h("div", { key: '0f59e908dfa91226ee1648d6d4739f9e9bc54ca5', class: "absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-64 p-2 bg-gray-800 text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none" }, t.solarSystemForm
-            .savingsDisclaimer))), h("span", { key: 'bf1d7bd08a93274615b88d35e2bd359187ca085b', class: "text-xl font-bold text-green-600" }, this.costSavings.toFixed(2), "\u20AC/", t
-            .solarSystemForm.year)))), h("div", { key: 'ca60e696392cb3ef2cb66603489997869e0f51cb', class: "space-y-4 pt-4 border-t border-gray-200" }, h("h2", { key: '4f44b5774a022e8925738abc25894fdf8b6fc8fa', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.requestOffer), h("div", { key: 'fe32a47f43e742d81424980fd41631d328358695', class: "grid grid-cols-2 gap-4" }, h("div", { key: 'a2ce707a5f4b4568eabb02a08022d8f1c74137e2' }, h("label", { key: 'b38ec2029a9d9cfe29c4e2d415a03b046acba319', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.name), h("input", { key: '8f94467b24e2a11f898f258c6d4aa9ee0de34dc1', type: "text", class: `w-full px-4 py-2 rounded-4xl border ${this.nameError
+            } })))), h("div", { key: '4d6fe45c443a7ce484b02b79a2a1b835b0abbeee', class: "space-y-4 pt-4 border-t border-gray-200" }, h("h2", { key: '282e51617d2c1dd29b4631b9def26dbe98e912b5', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.resultsTitle), h("div", { key: '25dc9573694a07cf589f6dcb50896c4f28d47b57', class: "bg-white rounded-4xl p-4" }, h("div", { key: '45ac3469c96d1d4d96f4dc63abfab4401ec74cf5', class: "flex items-center justify-between" }, h("span", { key: '7729a9f5b142d8c1b981bf0734583522275e2ab4', class: "text-gray-600" }, t.solarSystemForm.autonomy), h("span", { key: 'abb4c0e3bb2a67f027ce57b6397fa539194fde3c', class: "text-xl font-bold text-[#271200]" }, this.autonomy.toFixed(1), "%")), h("div", { key: '1ef64dfc7679e8f407b2e17b4ecd61f03275959d', class: "flex items-center justify-between mt-4" }, h("div", { key: '2f1bdd7b9454b4e4b74f29727d193cad13c4ee97', class: "flex items-center gap-2" }, h("span", { key: 'a4a5eb9678ec19fb4f58efe08b729bdab58e2b0e', class: "text-gray-600" }, t.solarSystemForm.costSavings), h("div", { key: '6bfb54832f94188569bc84ca143bf7970c47790d', class: "relative group" }, h("svg", { key: '14c0290b399e2d26b5fd3145b80be1100f717882', xmlns: "http://www.w3.org/2000/svg", class: "h-5 w-5 text-gray-400 cursor-help", viewBox: "0 0 20 20", fill: "currentColor" }, h("path", { key: '965be62ab9e9fb1da83b7b248d0987ff6554a7ac', "fill-rule": "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z", "clip-rule": "evenodd" })), h("div", { key: '2e3df31e5272614139a7a064830f246099edbb4c', class: "absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-64 p-2 bg-gray-800 text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none" }, t.solarSystemForm
+            .savingsDisclaimer))), h("span", { key: '5d3a4271b1dff765c38b5ce4b7eb855a14ec0f53', class: "text-xl font-bold text-green-600" }, this.costSavings.toFixed(2), "\u20AC/", t
+            .solarSystemForm.year)))), h("div", { key: '1e75a090d4345d76dd7fad35882583924ae75a51', class: "space-y-4 pt-4 border-t border-gray-200" }, h("h2", { key: 'f631ba8d0709d8b8741fd0c78347ab7de1583dba', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.requestOffer), h("div", { key: '2ffc05cf09c6c328c0b98bda7800f28887c85594', class: "grid grid-rows-2 gap-0" }, h("div", { key: '914b967681d0b3a227388ba0a58c587923c01d83', class: "grid grid-cols-2 gap-4" }, h("label", { key: '2ed3105498642f20eda9f9a34dfec20c1da2b1ae', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.name), h("label", { key: 'de6e9290db4ea49b9d869b96d492900c08256cb3', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.email)), h("div", { key: '7d2d03798fe396c961922a2262a99227fbbdd577', class: "grid grid-cols-2 gap-4" }, h("input", { key: '621e7b599ed1559ad8fbc1be7c6a240004950474', type: "text", class: `w-full px-4 py-2 rounded-4xl border ${this.nameError
                 ? "border-red-500"
-                : "border-gray-300"} focus:ring-2 focus:ring-[#964500] focus:border-transparent`, value: this.name, onInput: (e) => {
+                : "border-gray-300"} focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white`, value: this.name, onInput: (e) => {
                 this.name =
                     e.target
                         .value;
                 this.validateForm();
-            }, placeholder: "Your name" }), this.nameError && (h("p", { key: 'e539561f556cf7914a3d888d20450e2d09b72fa2', class: "text-red-500 text-sm mt-1" }, this.nameError))), h("div", { key: '6ab0ef38a62847304aa131d41902d4eeeebd2fc9' }, h("label", { key: '336f9d727f4c556397bef6a080d969015d730036', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.email), h("input", { key: '783fe2c3552a444e300a3d36f784aa13af9cfc79', type: "email", class: `w-full px-4 py-2 rounded-4xl border ${this.emailError
+            }, placeholder: "Your name" }), this.nameError && (h("p", { key: '4de3d0060b02d653af0f8b170b074395ba9e3ae4', class: "text-red-500 text-sm mt-1" }, this.nameError)), h("input", { key: 'a8902fa1f58a6b0c24b1d03f7798944fb5b78773', type: "email", class: `w-full px-4 py-2 rounded-4xl border ${this.emailError
                 ? "border-red-500"
-                : "border-gray-300"} focus:ring-2 focus:ring-[#964500] focus:border-transparent`, value: this.email, onInput: (e) => {
+                : "border-gray-300"} focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white`, value: this.email, onInput: (e) => {
                 this.email =
                     e.target
                         .value;
                 this.validateForm();
-            }, placeholder: "your.email@example.com" }), this.emailError && (h("p", { key: '5e67155bb99c051e1a1a6d5957826ef328daa362', class: "text-red-500 text-sm mt-1" }, this.emailError)))), h("div", { key: 'd4a4ded8adfab4ef284f888556e9ad4847f0de2e', class: "flex justify-center" }, h("button", { key: 'b4eb433e4ce1e0c9128fc7c3b89670091e137c8b', onClick: () => this.handleRequestOffer(), disabled: !this.name.trim() ||
+            }, placeholder: "your.email@example.com" }), this.emailError && (h("p", { key: '5d9a926a67725d53ed5ad5823bcac02f5b5a7be5', class: "text-red-500 text-sm mt-1" }, this.emailError)))), h("div", { key: '8ab538d452498379706b7cf84fe1b591b6d44eae', class: "flex justify-center" }, h("button", { key: 'c07d408aa160ecb113e9dd35b550e7a88d219dce', onClick: () => this.handleRequestOffer(), disabled: !this.name.trim() ||
                 !this.email.trim() || !!this.nameError ||
                 !!this.emailError, class: "px-4 py-2 bg-[#271200] rounded-4xl hover:bg-[#964500] transition-colors duration-200", style: { color: "white" } }, t.solarSystemForm.requestOfferButton))))));
     }
     static get is() { return "solar-system-form"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["../../output.css"]

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

@@ -1 +1 @@
-{"version":3,"file":"solar-system-form.js","sourceRoot":"","sources":["../../../src/components/solar-system-form/solar-system-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Watch } from \"@stencil/core\";\r\nimport Chart from \"chart.js/auto\";\r\nimport { DEFAULT_SOLAR_PANEL_TYPE } from \"../../config\";\r\nimport { SolarPanelSystemPart } from \"../../utils/geometry/fitting\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { Language } from \"../../types/lang\";\r\nimport { Polygon } from \"../../types/shapes\";\r\n\r\nconst SOLAR_RADIATION = [\r\n    0,\r\n    0,\r\n    0,\r\n    0,\r\n    0,\r\n    0, // 00:00 - 05:00 - 6\r\n    0,\r\n    0.1,\r\n    0.2, // 8\r\n    0.4,\r\n    0.8,\r\n    1, // 06:00 - 11:00 - 12\r\n    1,\r\n    1,\r\n    1,\r\n    0.7,\r\n    0.5,\r\n    0.3, // 12:00 - 17:00 - 18\r\n    0.16,\r\n    0.02,\r\n    0,\r\n    0,\r\n    0,\r\n    0, // 18:00 - 23:00 - 24\r\n];\r\nconst CONSUMPTION_PROFILES = {\r\n    mostly_at_home: [\r\n        0.1,\r\n        0.1,\r\n        0.1,\r\n        0.1,\r\n        0.1,\r\n        0.15, // 00:00 - 05:00 - 6\r\n        0.23,\r\n        0.26,\r\n        0.16,\r\n        0.16,\r\n        0.15,\r\n        0.19, // 06:00 - 11:00 - 12\r\n        0.23,\r\n        0.24,\r\n        0.35,\r\n        0.28,\r\n        0.275,\r\n        0.8, // 12:00 - 17:00 - 18\r\n        0.78,\r\n        0.74,\r\n        0.75,\r\n        0.73,\r\n        0.26,\r\n        0.1, // 18:00 - 23:00 - 24\r\n    ],\r\n    mostly_away: [\r\n        0.1,\r\n        0.1,\r\n        0.1,\r\n        0.1,\r\n        0.1,\r\n        0.15, // 00:00 - 05:00 - 6\r\n        0.29,\r\n        0.32,\r\n        0.25,\r\n        0.15,\r\n        0.12,\r\n        0.14, // 06:00 - 11:00 - 12\r\n        0.15,\r\n        0.12,\r\n        0.16,\r\n        0.21,\r\n        0.285,\r\n        1, // 12:00 - 17:00 - 18\r\n        0.81,\r\n        0.77,\r\n        0.79,\r\n        0.73,\r\n        0.26,\r\n        0.1, // 18:00 - 23:00 - 24\r\n    ],\r\n};\r\n\r\n@Component({\r\n    tag: \"solar-system-form\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: true,\r\n})\r\nexport class SolarSystemForm {\r\n    @Prop()\r\n    systemConfigs: { [id: string]: SolarPanelSystemPart } = {};\r\n    @Prop()\r\n    language: Language = \"en\";\r\n    @Prop()\r\n    roofPolygons: { [id: string]: Polygon } = {};\r\n    @Prop()\r\n    obstructionPolygons: { [id: string]: Polygon } = {};\r\n\r\n    @State()\r\n    householdConsumption: number = 3500;\r\n    @State()\r\n    consumptionProfile: \"mostly_at_home\" | \"mostly_away\" = \"mostly_at_home\";\r\n    @State()\r\n    electricityPrice: number = 0.3;\r\n    @State()\r\n    compensationRate: number = 0.07;\r\n    @State()\r\n    autonomy: number = 0;\r\n    @State()\r\n    costSavings: number = 0;\r\n    @State()\r\n    numberOfPanels: number = 5;\r\n    @State()\r\n    panelPeakPower: number = 0.4; // kW per panel\r\n    @State()\r\n    name: string = \"\";\r\n    @State()\r\n    email: string = \"\";\r\n    @State()\r\n    nameError: string = \"\";\r\n    @State()\r\n    emailError: string = \"\";\r\n\r\n    private chart: Chart | null = null;\r\n    private chartRef: HTMLCanvasElement | null = null;\r\n\r\n    @Watch(\"systemConfigs\")\r\n    updateSystemConfigs() {\r\n        if (Object.keys(this.systemConfigs).length === 0) {\r\n            this.numberOfPanels = 0;\r\n            return;\r\n        }\r\n        this.numberOfPanels = Object.keys(this.systemConfigs).reduce(\r\n            (acc, curr) =>\r\n                acc + this.systemConfigs[curr].positionedPanels.length,\r\n            0,\r\n        );\r\n\r\n        this.panelPeakPower =\r\n            Object.entries(this.systemConfigs)[0][1].positionedPanels[0].panel\r\n                .kWattPeak;\r\n\r\n        this.recalculate();\r\n        this.updateChart();\r\n    }\r\n\r\n    private recalculate() {\r\n        const data = CONSUMPTION_PROFILES[this.consumptionProfile];\r\n        const norm = data.reduce((acc, curr) => acc + curr, 0);\r\n\r\n        const peakKwh = this.numberOfPanels * this.panelPeakPower;\r\n        const production = SOLAR_RADIATION.map((radiation) =>\r\n            radiation * peakKwh\r\n        );\r\n        let energyUsageOfProduction = 0;\r\n\r\n        for (let i = 0; i < data.length; i++) {\r\n            data[i] = data[i] * this.householdConsumption / norm / 365;\r\n            if (data[i] <= production[i]) {\r\n                energyUsageOfProduction += data[i];\r\n            } else if (data[i] > production[i]) {\r\n                energyUsageOfProduction += production[i];\r\n            }\r\n        }\r\n        const energyDifference = production.map((p, i) => data[i] - p);\r\n        const soldEnergy = -energyDifference.filter((e) => e < 0).reduce(\r\n            (acc, curr) => acc + curr,\r\n            0,\r\n        );\r\n        // Calculate the cost savings\r\n        this.costSavings = soldEnergy * this.compensationRate * 365 +\r\n            energyUsageOfProduction * 365 * this.electricityPrice;\r\n\r\n        this.autonomy =\r\n            (energyUsageOfProduction / (this.householdConsumption / 365)) *\r\n            100;\r\n    }\r\n\r\n    private updateChart() {\r\n        if (!this.chartRef) return;\r\n\r\n        const ctx = this.chartRef.getContext(\"2d\");\r\n        if (!ctx) return;\r\n\r\n        if (this.chart) {\r\n            this.chart.destroy();\r\n        }\r\n\r\n        const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`);\r\n        const data = CONSUMPTION_PROFILES[this.consumptionProfile];\r\n        const norm = data.reduce((acc, curr) => acc + curr, 0);\r\n\r\n        const peakKwh = this.numberOfPanels * this.panelPeakPower;\r\n        const production = SOLAR_RADIATION.map((radiation) =>\r\n            radiation * peakKwh\r\n        );\r\n\r\n        for (let i = 0; i < data.length; i++) {\r\n            data[i] = data[i] * this.householdConsumption / norm / 365;\r\n        }\r\n\r\n        let datasets = [{\r\n            label: \"Energy Consumption\",\r\n            data: data,\r\n            borderColor: \"#964500\",\r\n            backgroundColor: \"rgba(150, 69, 0, 0.1)\",\r\n            fill: true,\r\n            tension: 0.4,\r\n        }, {\r\n            label: \"Energy Production\",\r\n            data: production,\r\n            borderColor: \"#000000\",\r\n            backgroundColor: \"rgba(0, 0, 0, 0.1)\",\r\n            fill: true,\r\n        }];\r\n\r\n        this.chart = new Chart(ctx, {\r\n            type: \"line\",\r\n            data: {\r\n                labels: hours,\r\n                datasets: datasets,\r\n            },\r\n            options: {\r\n                responsive: true,\r\n                plugins: {\r\n                    title: {\r\n                        display: true,\r\n                        text: \"Daily Consumption Profile\",\r\n                    },\r\n                },\r\n                scales: {\r\n                    y: {\r\n                        beginAtZero: true,\r\n                        title: {\r\n                            display: true,\r\n                            text: \"Relative Consumption\",\r\n                        },\r\n                    },\r\n                    x: {\r\n                        title: {\r\n                            display: true,\r\n                            text: \"Hour of Day\",\r\n                        },\r\n                    },\r\n                },\r\n            },\r\n        });\r\n    }\r\n\r\n    componentWillLoad() {\r\n        this.updateSystemConfigs();\r\n    }\r\n\r\n    private validateForm(): boolean {\r\n        let isValid = true;\r\n        const t = getLanguageStrings(this.language);\r\n\r\n        // Validate name\r\n        if (!this.name.trim()) {\r\n            this.nameError = t.solarSystemForm.nameError;\r\n            isValid = false;\r\n        } else {\r\n            this.nameError = \"\";\r\n        }\r\n\r\n        // Validate email\r\n        const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\r\n        if (!this.email.trim()) {\r\n            this.emailError = t.solarSystemForm.emailError;\r\n            isValid = false;\r\n        } else if (!emailRegex.test(this.email)) {\r\n            this.emailError = t.solarSystemForm.validEmailError;\r\n            isValid = false;\r\n        } else {\r\n            this.emailError = \"\";\r\n        }\r\n\r\n        return isValid;\r\n    }\r\n\r\n    private handleRequestOffer() {\r\n        if (!this.validateForm()) {\r\n            return;\r\n        }\r\n        // Here you can implement the logic to handle the offer request\r\n        console.log(\"Requesting offer for: \", {\r\n            name: this.name,\r\n            email: this.email,\r\n            systemConfig: this.systemConfigs,\r\n            consumption: this.householdConsumption,\r\n            autonomy: this.autonomy,\r\n            costSavings: this.costSavings,\r\n            roofPolygons: this.roofPolygons,\r\n            obstructionPolygons: this.obstructionPolygons,\r\n        });\r\n    }\r\n\r\n    render() {\r\n        const t = getLanguageStrings(this.language);\r\n        return (\r\n            <div\r\n                class=\"flex flex-col justify-center items-center w-full h-full gap-4 p-4\"\r\n                style={{\r\n                    display: (Object.keys(this.systemConfigs).length === 0)\r\n                        ? \"none\"\r\n                        : \"flex\",\r\n                }}\r\n            >\r\n                <h1 class=\"text-2xl font-bold text-[#271200] mb-4\">\r\n                    {t.solarSystemForm.title}\r\n                </h1>\r\n\r\n                <div class=\"w-full max-w-2xl bg-[#f3ebda] rounded-4xl p-6 space-y-6\">\r\n                    {/* System Info Section */}\r\n                    <div class=\"space-y-4\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.systemInformation}\r\n                        </h2>\r\n                        <div class=\"grid grid-cols-2 gap-4\">\r\n                            <div>\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.numberOfPanels}\r\n                                </label>\r\n                                <input\r\n                                    type=\"number\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent\"\r\n                                    value={this.numberOfPanels}\r\n                                    readOnly\r\n                                />\r\n                            </div>\r\n                            <div>\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.panelPeakPower}\r\n                                </label>\r\n                                <input\r\n                                    type=\"number\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent\"\r\n                                    value={this.panelPeakPower}\r\n                                    readonly\r\n                                />\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"bg-white rounded-4xl p-4\">\r\n                            <div class=\"flex items-center justify-between\">\r\n                                <span class=\"text-gray-600\">\r\n                                    {t.solarSystemForm.totalSystemPeakPower}\r\n                                </span>\r\n                                <span class=\"text-xl font-bold text-[#271200]\">\r\n                                    {(DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *\r\n                                        this.numberOfPanels).toFixed(1)} kW\r\n                                </span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    {/* Household Consumption Section */}\r\n                    <div class=\"space-y-4\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.householdConsumptionTitle}\r\n                        </h2>\r\n                        <div class=\"grid grid-cols-2 gap-4\">\r\n                            <div>\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.annualConsumption}\r\n                                </label>\r\n                                <input\r\n                                    type=\"number\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent\"\r\n                                    value={this.householdConsumption}\r\n                                    onInput={(e) => {\r\n                                        this.householdConsumption = parseInt(\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value,\r\n                                        );\r\n                                        this.recalculate();\r\n                                        this.updateChart();\r\n                                    }}\r\n                                />\r\n                            </div>\r\n                            <div>\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.consumptionProfileTitle}\r\n                                </label>\r\n                                <select\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent\"\r\n                                    onChange={(e) => {\r\n                                        this.consumptionProfile =\r\n                                            (e.target as HTMLSelectElement)\r\n                                                .value as\r\n                                                    | \"mostly_at_home\"\r\n                                                    | \"mostly_away\";\r\n                                        this.recalculate();\r\n                                        this.updateChart();\r\n                                    }}\r\n                                >\r\n                                    <option\r\n                                        value=\"mostly_at_home\"\r\n                                        selected={this.consumptionProfile ===\r\n                                            \"mostly_at_home\"}\r\n                                    >\r\n                                        {t.solarSystemForm.consumptionProfiles\r\n                                            .mostlyAtHome}\r\n                                    </option>\r\n                                    <option\r\n                                        value=\"mostly_away\"\r\n                                        selected={this.consumptionProfile ===\r\n                                            \"mostly_away\"}\r\n                                    >\r\n                                        {t.solarSystemForm.consumptionProfiles\r\n                                            .mostlyAway}\r\n                                    </option>\r\n                                </select>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"mt-4 h-48\">\r\n                            <canvas ref={(el) => this.chartRef = el}></canvas>\r\n                        </div>\r\n                    </div>\r\n\r\n                    {/* Electricity Price and Compensation Section */}\r\n                    <div class=\"space-y-4\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.electricityCostsTitle}\r\n                        </h2>\r\n                        <div class=\"grid grid-cols-2 gap-4\">\r\n                            <div>\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.electricityPrice}\r\n                                </label>\r\n                                <input\r\n                                    type=\"number\"\r\n                                    step=\"0.01\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent\"\r\n                                    value={this.electricityPrice}\r\n                                    onInput={(e) => {\r\n                                        this.electricityPrice = parseFloat(\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value,\r\n                                        );\r\n                                        this.recalculate();\r\n                                        this.updateChart();\r\n                                    }}\r\n                                />\r\n                            </div>\r\n                            <div>\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.compensationRate}\r\n                                </label>\r\n                                <input\r\n                                    type=\"number\"\r\n                                    step=\"0.01\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent\"\r\n                                    value={this.compensationRate}\r\n                                    onInput={(e) => {\r\n                                        this.compensationRate = parseFloat(\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value,\r\n                                        );\r\n                                        this.recalculate();\r\n                                        this.updateChart();\r\n                                    }}\r\n                                />\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    {/* Results Section */}\r\n                    <div class=\"space-y-4 pt-4 border-t border-gray-200\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.resultsTitle}\r\n                        </h2>\r\n                        <div class=\"bg-white rounded-4xl p-4\">\r\n                            <div class=\"flex items-center justify-between\">\r\n                                <span class=\"text-gray-600\">\r\n                                    {t.solarSystemForm.autonomy}\r\n                                </span>\r\n                                <span class=\"text-xl font-bold text-[#271200]\">\r\n                                    {this.autonomy.toFixed(1)}%\r\n                                </span>\r\n                            </div>\r\n                            <div class=\"flex items-center justify-between mt-4\">\r\n                                <div class=\"flex items-center gap-2\">\r\n                                    <span class=\"text-gray-600\">\r\n                                        {t.solarSystemForm.costSavings}\r\n                                    </span>\r\n                                    <div class=\"relative group\">\r\n                                        <svg\r\n                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                            class=\"h-5 w-5 text-gray-400 cursor-help\"\r\n                                            viewBox=\"0 0 20 20\"\r\n                                            fill=\"currentColor\"\r\n                                        >\r\n                                            <path\r\n                                                fill-rule=\"evenodd\"\r\n                                                d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z\"\r\n                                                clip-rule=\"evenodd\"\r\n                                            />\r\n                                        </svg>\r\n                                        <div class=\"absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-64 p-2 bg-gray-800 text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none\">\r\n                                            {t.solarSystemForm\r\n                                                .savingsDisclaimer}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <span class=\"text-xl font-bold text-green-600\">\r\n                                    {this.costSavings.toFixed(2)}€/{t\r\n                                        .solarSystemForm.year}\r\n                                </span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    {/* Contact Information Section */}\r\n                    <div class=\"space-y-4 pt-4 border-t border-gray-200\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.requestOffer}\r\n                        </h2>\r\n                        <div class=\"grid grid-cols-2 gap-4\">\r\n                            <div>\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.name}\r\n                                </label>\r\n                                <input\r\n                                    type=\"text\"\r\n                                    class={`w-full px-4 py-2 rounded-4xl border ${\r\n                                        this.nameError\r\n                                            ? \"border-red-500\"\r\n                                            : \"border-gray-300\"\r\n                                    } focus:ring-2 focus:ring-[#964500] focus:border-transparent`}\r\n                                    value={this.name}\r\n                                    onInput={(e) => {\r\n                                        this.name =\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value;\r\n                                        this.validateForm();\r\n                                    }}\r\n                                    placeholder=\"Your name\"\r\n                                />\r\n                                {this.nameError && (\r\n                                    <p class=\"text-red-500 text-sm mt-1\">\r\n                                        {this.nameError}\r\n                                    </p>\r\n                                )}\r\n                            </div>\r\n                            <div>\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.email}\r\n                                </label>\r\n                                <input\r\n                                    type=\"email\"\r\n                                    class={`w-full px-4 py-2 rounded-4xl border ${\r\n                                        this.emailError\r\n                                            ? \"border-red-500\"\r\n                                            : \"border-gray-300\"\r\n                                    } focus:ring-2 focus:ring-[#964500] focus:border-transparent`}\r\n                                    value={this.email}\r\n                                    onInput={(e) => {\r\n                                        this.email =\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value;\r\n                                        this.validateForm();\r\n                                    }}\r\n                                    placeholder=\"your.email@example.com\"\r\n                                />\r\n                                {this.emailError && (\r\n                                    <p class=\"text-red-500 text-sm mt-1\">\r\n                                        {this.emailError}\r\n                                    </p>\r\n                                )}\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"flex justify-center\">\r\n                            <button\r\n                                onClick={() => this.handleRequestOffer()}\r\n                                disabled={!this.name.trim() ||\r\n                                    !this.email.trim() || !!this.nameError ||\r\n                                    !!this.emailError}\r\n                                class=\"px-4 py-2 bg-[#271200] rounded-4xl hover:bg-[#964500] transition-colors duration-200\"\r\n                                style={{ color: \"white\" }}\r\n                            >\r\n                                {t.solarSystemForm.requestOfferButton}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"solar-system-form.js","sourceRoot":"","sources":["../../../src/components/solar-system-form/solar-system-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Watch } from \"@stencil/core\";\r\n// import Chart from \"chart.js/auto\";\r\nimport { DEFAULT_SOLAR_PANEL_TYPE } from \"../../config\";\r\nimport { SolarPanelSystemPart } from \"../../utils/geometry/fitting\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { Language } from \"../../types/lang\";\r\nimport { Polygon } from \"../../types/shapes\";\r\n\r\nconst SOLAR_RADIATION = [\r\n    0,\r\n    0,\r\n    0,\r\n    0,\r\n    0,\r\n    0, // 00:00 - 05:00 - 6\r\n    0,\r\n    0.1,\r\n    0.2, // 8\r\n    0.4,\r\n    0.8,\r\n    1, // 06:00 - 11:00 - 12\r\n    1,\r\n    1,\r\n    1,\r\n    0.7,\r\n    0.5,\r\n    0.3, // 12:00 - 17:00 - 18\r\n    0.16,\r\n    0.02,\r\n    0,\r\n    0,\r\n    0,\r\n    0, // 18:00 - 23:00 - 24\r\n];\r\nconst CONSUMPTION_PROFILES = {\r\n    mostly_at_home: [\r\n        0.1,\r\n        0.1,\r\n        0.1,\r\n        0.1,\r\n        0.1,\r\n        0.15, // 00:00 - 05:00 - 6\r\n        0.23,\r\n        0.26,\r\n        0.16,\r\n        0.16,\r\n        0.15,\r\n        0.19, // 06:00 - 11:00 - 12\r\n        0.23,\r\n        0.24,\r\n        0.35,\r\n        0.28,\r\n        0.275,\r\n        0.8, // 12:00 - 17:00 - 18\r\n        0.78,\r\n        0.74,\r\n        0.75,\r\n        0.73,\r\n        0.26,\r\n        0.1, // 18:00 - 23:00 - 24\r\n    ],\r\n    mostly_away: [\r\n        0.1,\r\n        0.1,\r\n        0.1,\r\n        0.1,\r\n        0.1,\r\n        0.15, // 00:00 - 05:00 - 6\r\n        0.29,\r\n        0.32,\r\n        0.25,\r\n        0.15,\r\n        0.12,\r\n        0.14, // 06:00 - 11:00 - 12\r\n        0.15,\r\n        0.12,\r\n        0.16,\r\n        0.21,\r\n        0.285,\r\n        1, // 12:00 - 17:00 - 18\r\n        0.81,\r\n        0.77,\r\n        0.79,\r\n        0.73,\r\n        0.26,\r\n        0.1, // 18:00 - 23:00 - 24\r\n    ],\r\n};\r\n\r\n@Component({\r\n    tag: \"solar-system-form\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class SolarSystemForm {\r\n    @Prop()\r\n    systemConfigs: { [id: string]: SolarPanelSystemPart } = {};\r\n    @Prop()\r\n    language: Language = \"en\";\r\n    @Prop()\r\n    roofPolygons: { [id: string]: Polygon } = {};\r\n    @Prop()\r\n    obstructionPolygons: { [id: string]: Polygon } = {};\r\n\r\n    @State()\r\n    householdConsumption: number = 3500;\r\n    @State()\r\n    consumptionProfile: \"mostly_at_home\" | \"mostly_away\" = \"mostly_at_home\";\r\n    @State()\r\n    electricityPrice: number = 0.3;\r\n    @State()\r\n    compensationRate: number = 0.07;\r\n    @State()\r\n    autonomy: number = 0;\r\n    @State()\r\n    costSavings: number = 0;\r\n    @State()\r\n    numberOfPanels: number = 5;\r\n    @State()\r\n    panelPeakPower: number = 0.4; // kW per panel\r\n    @State()\r\n    name: string = \"\";\r\n    @State()\r\n    email: string = \"\";\r\n    @State()\r\n    nameError: string = \"\";\r\n    @State()\r\n    emailError: string = \"\";\r\n\r\n    // private chart: Chart | null = null;\r\n    // private chartRef: HTMLCanvasElement | null = null;\r\n\r\n    @Watch(\"systemConfigs\")\r\n    updateSystemConfigs() {\r\n        if (Object.keys(this.systemConfigs).length === 0) {\r\n            this.numberOfPanels = 0;\r\n            return;\r\n        }\r\n        this.numberOfPanels = Object.keys(this.systemConfigs).reduce(\r\n            (acc, curr) =>\r\n                acc + this.systemConfigs[curr].positionedPanels.length,\r\n            0,\r\n        );\r\n\r\n        this.panelPeakPower =\r\n            Object.entries(this.systemConfigs)[0][1].positionedPanels[0].panel\r\n                .kWattPeak;\r\n\r\n        this.recalculate();\r\n        this.updateChart();\r\n    }\r\n\r\n    private recalculate() {\r\n        const data = CONSUMPTION_PROFILES[this.consumptionProfile];\r\n        const norm = data.reduce((acc, curr) => acc + curr, 0);\r\n\r\n        const peakKwh = this.numberOfPanels * this.panelPeakPower;\r\n        const production = SOLAR_RADIATION.map((radiation) =>\r\n            radiation * peakKwh\r\n        );\r\n        let energyUsageOfProduction = 0;\r\n\r\n        for (let i = 0; i < data.length; i++) {\r\n            data[i] = data[i] * this.householdConsumption / norm / 365;\r\n            if (data[i] <= production[i]) {\r\n                energyUsageOfProduction += data[i];\r\n            } else if (data[i] > production[i]) {\r\n                energyUsageOfProduction += production[i];\r\n            }\r\n        }\r\n        const energyDifference = production.map((p, i) => data[i] - p);\r\n        const soldEnergy = -energyDifference.filter((e) => e < 0).reduce(\r\n            (acc, curr) => acc + curr,\r\n            0,\r\n        );\r\n        // Calculate the cost savings\r\n        this.costSavings = soldEnergy * this.compensationRate * 365 +\r\n            energyUsageOfProduction * 365 * this.electricityPrice;\r\n\r\n        this.autonomy =\r\n            (energyUsageOfProduction / (this.householdConsumption / 365)) *\r\n            100;\r\n    }\r\n\r\n    private updateChart() {\r\n        // if (!this.chartRef) return;\r\n\r\n        // const ctx = this.chartRef.getContext(\"2d\");\r\n        // if (!ctx) return;\r\n\r\n        // if (this.chart) {\r\n        //     this.chart.destroy();\r\n        // }\r\n\r\n        // const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`);\r\n        // const data = CONSUMPTION_PROFILES[this.consumptionProfile];\r\n        // const norm = data.reduce((acc, curr) => acc + curr, 0);\r\n\r\n        // const peakKwh = this.numberOfPanels * this.panelPeakPower;\r\n        // const production = SOLAR_RADIATION.map((radiation) =>\r\n        //     radiation * peakKwh\r\n        // );\r\n\r\n        // for (let i = 0; i < data.length; i++) {\r\n        //     data[i] = data[i] * this.householdConsumption / norm / 365;\r\n        // }\r\n\r\n        // let datasets = [{\r\n        //     label: \"Energy Consumption\",\r\n        //     data: data,\r\n        //     borderColor: \"#964500\",\r\n        //     backgroundColor: \"rgba(150, 69, 0, 0.1)\",\r\n        //     fill: true,\r\n        //     tension: 0.4,\r\n        // }, {\r\n        //     label: \"Energy Production\",\r\n        //     data: production,\r\n        //     borderColor: \"#000000\",\r\n        //     backgroundColor: \"rgba(0, 0, 0, 0.1)\",\r\n        //     fill: true,\r\n        // }];\r\n\r\n        // this.chart = new Chart(ctx, {\r\n        //     type: \"line\",\r\n        //     data: {\r\n        //         labels: hours,\r\n        //         datasets: datasets,\r\n        //     },\r\n        //     options: {\r\n        //         responsive: true,\r\n        //         plugins: {\r\n        //             title: {\r\n        //                 display: true,\r\n        //                 text: \"Daily Consumption Profile\",\r\n        //             },\r\n        //         },\r\n        //         scales: {\r\n        //             y: {\r\n        //                 beginAtZero: true,\r\n        //                 title: {\r\n        //                     display: true,\r\n        //                     text: \"Relative Consumption\",\r\n        //                 },\r\n        //             },\r\n        //             x: {\r\n        //                 title: {\r\n        //                     display: true,\r\n        //                     text: \"Hour of Day\",\r\n        //                 },\r\n        //             },\r\n        //         },\r\n        //     },\r\n        // });\r\n    }\r\n\r\n    componentWillLoad() {\r\n        this.updateSystemConfigs();\r\n    }\r\n\r\n    private validateForm(): boolean {\r\n        let isValid = true;\r\n        const t = getLanguageStrings(this.language);\r\n\r\n        // Validate name\r\n        if (!this.name.trim()) {\r\n            this.nameError = t.solarSystemForm.nameError;\r\n            isValid = false;\r\n        } else {\r\n            this.nameError = \"\";\r\n        }\r\n\r\n        // Validate email\r\n        const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\r\n        if (!this.email.trim()) {\r\n            this.emailError = t.solarSystemForm.emailError;\r\n            isValid = false;\r\n        } else if (!emailRegex.test(this.email)) {\r\n            this.emailError = t.solarSystemForm.validEmailError;\r\n            isValid = false;\r\n        } else {\r\n            this.emailError = \"\";\r\n        }\r\n\r\n        return isValid;\r\n    }\r\n\r\n    private handleRequestOffer() {\r\n        if (!this.validateForm()) {\r\n            return;\r\n        }\r\n        // Here you can implement the logic to handle the offer request\r\n        console.log(\"Requesting offer for: \", {\r\n            name: this.name,\r\n            email: this.email,\r\n            systemConfig: this.systemConfigs,\r\n            consumption: this.householdConsumption,\r\n            autonomy: this.autonomy,\r\n            costSavings: this.costSavings,\r\n            roofPolygons: this.roofPolygons,\r\n            obstructionPolygons: this.obstructionPolygons,\r\n        });\r\n    }\r\n\r\n    render() {\r\n        const t = getLanguageStrings(this.language);\r\n        return (\r\n            <div class=\"flex flex-col justify-center items-center w-full h-full pt-4\" // style={{\r\n                //     display: (Object.keys(this.systemConfigs).length === 0)\r\n                //         ? \"none\"\r\n                //         : \"flex\",\r\n                // }}\r\n            >\r\n                <h1 class=\"text-2xl font-bold text-[#271200] mb-4 w-full\">\r\n                    {t.solarSystemForm.title}\r\n                </h1>\r\n\r\n                <div class=\"w-full bg-[#f3ebda] rounded-4xl p-6 space-y-6\">\r\n                    {/* System Info Section */}\r\n                    <div class=\"space-y-4\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.systemInformation}\r\n                        </h2>\r\n                        <div class=\"grid grid-rows-2 gap-0\">\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.numberOfPanels}\r\n                                </label>\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.panelPeakPower}\r\n                                </label>\r\n                            </div>\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                    value={this.numberOfPanels}\r\n                                    readOnly\r\n                                />\r\n                                <input\r\n                                    type=\"number\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                    value={this.panelPeakPower}\r\n                                    readonly\r\n                                />\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"bg-white rounded-4xl p-4\">\r\n                            <div class=\"flex items-center justify-between\">\r\n                                <span class=\"text-gray-600\">\r\n                                    {t.solarSystemForm.totalSystemPeakPower}\r\n                                </span>\r\n                                <span class=\"text-xl font-bold text-[#271200]\">\r\n                                    {(DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *\r\n                                        this.numberOfPanels).toFixed(1)} kW\r\n                                </span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    {/* Household Consumption Section */}\r\n                    <div class=\"space-y-4\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.householdConsumptionTitle}\r\n                        </h2>\r\n                        <div class=\"grid grid-rows-2 gap-0\">\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <label class=\"block text-sm font-medium text-gray-600\">\r\n                                    {t.solarSystemForm.annualConsumption}\r\n                                </label>\r\n                                <label class=\"block text-sm font-medium text-gray-600\">\r\n                                    {t.solarSystemForm.consumptionProfileTitle}\r\n                                </label>\r\n                            </div>\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                    value={this.householdConsumption}\r\n                                    onInput={(e) => {\r\n                                        this.householdConsumption = parseInt(\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value,\r\n                                        );\r\n                                        this.recalculate();\r\n                                        this.updateChart();\r\n                                    }}\r\n                                />\r\n                                <select\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                    onChange={(e) => {\r\n                                        this.consumptionProfile =\r\n                                            (e.target as HTMLSelectElement)\r\n                                                .value as\r\n                                                    | \"mostly_at_home\"\r\n                                                    | \"mostly_away\";\r\n                                        this.recalculate();\r\n                                        this.updateChart();\r\n                                    }}\r\n                                >\r\n                                    <option\r\n                                        value=\"mostly_at_home\"\r\n                                        selected={this.consumptionProfile ===\r\n                                            \"mostly_at_home\"}\r\n                                    >\r\n                                        {t.solarSystemForm.consumptionProfiles\r\n                                            .mostlyAtHome}\r\n                                    </option>\r\n                                    <option\r\n                                        value=\"mostly_away\"\r\n                                        selected={this.consumptionProfile ===\r\n                                            \"mostly_away\"}\r\n                                    >\r\n                                        {t.solarSystemForm.consumptionProfiles\r\n                                            .mostlyAway}\r\n                                    </option>\r\n                                </select>\r\n                            </div>\r\n                        </div>\r\n                        {\r\n                            /* <div class=\"mt-4 h-48\">\r\n                            <canvas ref={(el) => this.chartRef = el}></canvas>\r\n                        </div> */\r\n                        }\r\n                    </div>\r\n\r\n                    {/* Heat Pump Section */}\r\n\r\n                    {/* Battery Section */}\r\n\r\n                    {/* Electric Car Section */}\r\n\r\n                    {/* Electricity Price and Compensation Section */}\r\n                    <div class=\"space-y-4\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.electricityCostsTitle}\r\n                        </h2>\r\n                        <div class=\"grid grid-rows-2 gap-0\">\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.electricityPrice}\r\n                                </label>\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.compensationRate}\r\n                                </label>\r\n                            </div>\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    step=\"0.01\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                    value={this.electricityPrice.toFixed(2)}\r\n                                    onInput={(e) => {\r\n                                        this.electricityPrice = parseFloat(\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value,\r\n                                        );\r\n                                        this.recalculate();\r\n                                        this.updateChart();\r\n                                    }}\r\n                                />\r\n                                <input\r\n                                    type=\"number\"\r\n                                    step=\"0.01\"\r\n                                    class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n                                    value={this.compensationRate.toFixed(2)}\r\n                                    onInput={(e) => {\r\n                                        this.compensationRate = parseFloat(\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value,\r\n                                        );\r\n                                        this.recalculate();\r\n                                        this.updateChart();\r\n                                    }}\r\n                                />\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    {/* Results Section */}\r\n                    <div class=\"space-y-4 pt-4 border-t border-gray-200\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.resultsTitle}\r\n                        </h2>\r\n                        <div class=\"bg-white rounded-4xl p-4\">\r\n                            <div class=\"flex items-center justify-between\">\r\n                                <span class=\"text-gray-600\">\r\n                                    {t.solarSystemForm.autonomy}\r\n                                </span>\r\n                                <span class=\"text-xl font-bold text-[#271200]\">\r\n                                    {this.autonomy.toFixed(1)}%\r\n                                </span>\r\n                            </div>\r\n                            <div class=\"flex items-center justify-between mt-4\">\r\n                                <div class=\"flex items-center gap-2\">\r\n                                    <span class=\"text-gray-600\">\r\n                                        {t.solarSystemForm.costSavings}\r\n                                    </span>\r\n                                    <div class=\"relative group\">\r\n                                        <svg\r\n                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                            class=\"h-5 w-5 text-gray-400 cursor-help\"\r\n                                            viewBox=\"0 0 20 20\"\r\n                                            fill=\"currentColor\"\r\n                                        >\r\n                                            <path\r\n                                                fill-rule=\"evenodd\"\r\n                                                d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z\"\r\n                                                clip-rule=\"evenodd\"\r\n                                            />\r\n                                        </svg>\r\n                                        <div class=\"absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-64 p-2 bg-gray-800 text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none\">\r\n                                            {t.solarSystemForm\r\n                                                .savingsDisclaimer}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <span class=\"text-xl font-bold text-green-600\">\r\n                                    {this.costSavings.toFixed(2)}€/{t\r\n                                        .solarSystemForm.year}\r\n                                </span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    {/* Contact Information Section */}\r\n                    <div class=\"space-y-4 pt-4 border-t border-gray-200\">\r\n                        <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n                            {t.solarSystemForm.requestOffer}\r\n                        </h2>\r\n                        <div class=\"grid grid-rows-2 gap-0\">\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.name}\r\n                                </label>\r\n                                <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n                                    {t.solarSystemForm.email}\r\n                                </label>\r\n                            </div>\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <input\r\n                                    type=\"text\"\r\n                                    class={`w-full px-4 py-2 rounded-4xl border ${\r\n                                        this.nameError\r\n                                            ? \"border-red-500\"\r\n                                            : \"border-gray-300\"\r\n                                    } focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white`}\r\n                                    value={this.name}\r\n                                    onInput={(e) => {\r\n                                        this.name =\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value;\r\n                                        this.validateForm();\r\n                                    }}\r\n                                    placeholder=\"Your name\"\r\n                                />\r\n                                {this.nameError && (\r\n                                    <p class=\"text-red-500 text-sm mt-1\">\r\n                                        {this.nameError}\r\n                                    </p>\r\n                                )}\r\n                                <input\r\n                                    type=\"email\"\r\n                                    class={`w-full px-4 py-2 rounded-4xl border ${\r\n                                        this.emailError\r\n                                            ? \"border-red-500\"\r\n                                            : \"border-gray-300\"\r\n                                    } focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white`}\r\n                                    value={this.email}\r\n                                    onInput={(e) => {\r\n                                        this.email =\r\n                                            (e.target as HTMLInputElement)\r\n                                                .value;\r\n                                        this.validateForm();\r\n                                    }}\r\n                                    placeholder=\"your.email@example.com\"\r\n                                />\r\n                                {this.emailError && (\r\n                                    <p class=\"text-red-500 text-sm mt-1\">\r\n                                        {this.emailError}\r\n                                    </p>\r\n                                )}\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"flex justify-center\">\r\n                            <button\r\n                                onClick={() => this.handleRequestOffer()}\r\n                                disabled={!this.name.trim() ||\r\n                                    !this.email.trim() || !!this.nameError ||\r\n                                    !!this.emailError}\r\n                                class=\"px-4 py-2 bg-[#271200] rounded-4xl hover:bg-[#964500] transition-colors duration-200\"\r\n                                style={{ color: \"white\" }}\r\n                            >\r\n                                {t.solarSystemForm.requestOfferButton}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/dist/collection/components/widgets/loading-widget.js

@@ -0,0 +1,18 @@
+import { h } from "@stencil/core";
+export class LoadingWidget {
+    render() {
+        return (h("div", { key: 'bae5c13e0ea557582e70570c08af16eb02eb9810', class: "absolute flex items-center justify-center bg-white bg-opacity-75 z-20 pt-7 rounded-4xl" }, h("div", { key: '376d4d3b02d83751fdf7467de211ef3d6a624fa3', class: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-[#271200]" })));
+    }
+    static get is() { return "loading-widget"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+}
+//# sourceMappingURL=loading-widget.js.map

package/dist/collection/components/widgets/loading-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-widget.js","sourceRoot":"","sources":["../../../src/components/widgets/loading-widget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,aAAa;IACtB,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAC,wFAAwF;YAC/F,4DAAK,KAAK,EAAC,4EAA4E,GACjF,CACJ,CACT,CAAC;IACN,CAAC;;;;;;;;CACJ","sourcesContent":["import { Component, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: \"loading-widget\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class LoadingWidget {\r\n    render() {\r\n        return (\r\n            <div class=\"absolute flex items-center justify-center bg-white bg-opacity-75 z-20 pt-7 rounded-4xl\">\r\n                <div class=\"animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-[#271200]\">\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}