blue-chestnut-solar-expert 0.0.62 → 0.0.64

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

@@ -246,13 +246,13 @@ export class SolarSystemForm {
         // 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={{
+        return (h("div", { key: 'd2ba771761d0de6db760488b3be5be4e39091f14', 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()
+            id: "solar-system-form" }, h("h1", { key: '905b435114ee0379b4858110085b7d1c7c679f1f', class: "text-2xl font-bold text-secondary mb-4 w-full" }, t.solarSystemForm.title), h("div", { key: '3857d2a6b47a172f128d6226f456aec4d7d9eb7f', class: "w-full bg-primary rounded-4xl space-y-6" }, h("div", { key: '3ddafc4ed02b8b352e6c14e3efe249ed60d1729b', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: 'e2098c3681dbd8862b253498262bb852ea39b125', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.systemInformation), h("div", { key: '6d134107926d09325557d4e03bf85def6081c180', class: "flex flex-col sm:flex-row gap-4" }, h("div", { key: '61341c64c166fde66baf893bcffab45476e9ec9e', class: "flex-1 bg-muted rounded-4xl p-4 space-y-3" }, h("div", { key: '79077e45f09655beaafe72b73ea6ba0cf394684a', class: "flex items-center justify-between" }, h("label", { key: 'a0ff494e0e639457cd8eb2d421cb1aad0fae8caa', 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
@@ -264,34 +264,34 @@ export class SolarSystemForm {
                             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.isIOS() && (h("input", { key: '0c51740b74dae1c33f148978b53296c7343044e0', 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) => {
+            } }))), h("div", { key: 'd37d9e324d98cde4d5e91b186c91d5b08b630f1d', class: "flex-1 bg-muted rounded-4xl p-4" }, h("div", { key: '0454b3be5e44d069651606746430a4ca6a96f240', class: "flex items-center justify-between" }, h("label", { key: 'b0e37bc9d9e332266e4bcee1b3a9582566aff797', class: "text-sm font-medium text-text-muted" }, t.solarSystemForm.panelPeakPower), h("span", { key: 'f13b8dfa1a0a3ce76da4ae6cf2d74756d0def935', class: "text-text-muted" }, this.panelPeakPower.toFixed(2), " kW")), h("div", { key: 'c58b782a4f08dfb3cbf51d280e7285e40e473aaa', class: "flex items-center justify-between mt-4" }, h("span", { key: '55bcaa73ff1681ee7e4e3b790e25b75aa35434b6', class: "text-sm font-medium text-text-muted" }, t.solarSystemForm.totalSystemPeakPower), h("span", { key: 'd9a24f29e8a0eb735cad45884d86aefdcc9c3b1b', class: "font-bold text-text-muted" }, (DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *
+            this.numberOfPanels).toFixed(1), " kWp"))))), h("div", { key: '2722b473b27781e6cce9b22bfef5a0a74fc7ee4d', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: 'f51c3e70d734140390984e715a2b578ebb6a3a18', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.householdConsumptionTitle), h("div", { key: '43a0ac5205e3f0b936871ad9418cade350ff5dfe', class: "grid grid-rows-2 gap-0" }, h("div", { key: '1e96d71a0e95a8fee9a0b6d85754bf4f22a6bf36', class: "grid grid-cols-2 gap-4" }, h("label", { key: 'cfc68e2c7b6b979fe23b167212ca1038ebeb9632', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.annualConsumption), h("label", { key: '86c4d0e244d5de9926f9b6c61b64385788f32669', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.consumptionProfileTitle)), h("div", { key: '0beea23733546568caad0f3dee93d63606d6fdfe', class: "grid grid-cols-2 gap-4" }, h("input", { key: '13c721565b5f97af85b5dda3c345a339c43cfd0e', 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) => {
+            } }), h("select", { key: 'f3840f0c92a359686f2a16cca5b0472f30ea15e3', 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 ===
+            } }, h("option", { key: 'fa946a4c17516db99ab4240d6160103f4955c9b3', value: "mostly_at_home", selected: this.consumptionProfile ===
                 "mostly_at_home" }, t.solarSystemForm.consumptionProfiles
-            .mostlyAtHome), h("option", { key: 'ad37f3694f26f08cfc65e67f6d78e14c815478c9', value: "mostly_away", selected: this.consumptionProfile ===
+            .mostlyAtHome), h("option", { key: '0ed9a688409a796c860759dc35a28454e2bbc894', 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) => {
+            .mostlyAway))))), h("div", { key: '4ae5e9540c0e71b641cb3bb61d4e5ff0cc1be91b', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '22d6f4d6fa2f131be325bfd560e0f1d44531bde8', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.additionalComponents.title), h("div", { key: 'e8ad78b747eabb39af1bbf6beb9d85b935090fbd', class: "flex flex-col gap-4" }, h("div", { key: 'f9690d6dd03f15f5eedfba7bf0189e0407e2ecd4', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: 'd113b871187187b085236f8ef4dbc20672c3e2ec', class: "flex items-center justify-between" }, h("div", { key: '4751e61f1ccd565432b97fb3c324a4660d3faed6', class: "flex items-center gap-2" }, h("input", { key: 'd0118bb3d5ee004ad0fd44a3c137333e0eeb2a8b', 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
+            } }), h("label", { key: '5fe137e7cec477774d9e53ee20e1d1d537894d2c', 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()
+            .heatPump)), (this.heatPump > 0 && !this.isIOS()) && (h("span", { key: '8772c0bcebf70cd19cf885fa7806c50dc8539097', class: "text-text-muted" }, this.heatPump, " m\u00B2"))), this.heatPump > 0 && (h("div", { key: 'de748c4ad3d677984fc1cca40e593ab714ccbf48', 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);
@@ -307,45 +307,45 @@ export class SolarSystemForm {
                         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) => {
+                } }))))), h("div", { key: '6c8c7115d55e2c5ee6a54851cdfba688661ede4b', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '0a4809e48ac74da215370f112349e32a6f08e76e', class: "flex items-center justify-between" }, h("div", { key: '5f62212ef256e052b06db9e98399201bde8037b6', class: "flex items-center gap-2" }, h("input", { key: 'f2bf729c5ab14e7d9b703d8039f59090e639682f', 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
+            } }), h("label", { key: '8a9821d04372700dbded0cb3f9717f9fd4b1b1cc', 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
+            .electricCar))), this.electricCar && (h("div", { key: '6a5a852117986816aac6f472640c8b0b8a690ce4', class: "flex flex-col gap-2" }, h("div", { key: 'ec9676e4e6d833cab01cfc3cadab9549f548087e', class: "grid grid-cols-2 gap-4" }, h("label", { key: 'a1a3e882c0baff681967e07d68eb071b722a0863', class: "text-sm text-text-muted" }, t.solarSystemForm
             .additionalComponents
-            .chargingTime), h("label", { key: '870bc7ff65a52cfa1bbfa0296bf8428c104d5edf', class: "text-sm text-text-muted" }, t.solarSystemForm
+            .chargingTime), h("label", { key: 'e4eafc1c790249d21880125600cf953f5d863a94', 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) => {
+            .kilometersPerYear)), h("div", { key: '915c1dd050ae00d84e6b20d378cfed197ba8c8de', class: "grid grid-cols-2 gap-4" }, h("select", { key: '7e3787b7c6a459e64e8d6cef1d1b2c435f98e98e', 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
+            }, style: borderStyle }, h("option", { key: 'e5dc819ba30e96cd784f8b0eb16ef1117f7a3227', value: "day", selected: this
                 .electricCarChargingTime ===
                 "day" }, t.solarSystemForm
             .additionalComponents
-            .chargingTimeDay), h("option", { key: 'abc0fd939d0d6d228b124f53e9b297bd8079fef6', value: "night", selected: this
+            .chargingTimeDay), h("option", { key: 'b76054befb0c77256f33c6d8162978c5648ac464', 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) => {
+            .chargingTimeNight)), h("input", { key: 'fa135ccd00d2a6672a54fed11ed38d8458ea1e7c', 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) => {
+            }, style: borderStyle }))))), h("div", { key: '2148cbff01986d7fa86e8b03e47c57d90f712360', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: 'fd86a822750f62629e88c084d92377eece3ebbd4', class: "flex items-center justify-between" }, h("div", { key: '212d9da35671fd2f1d7c243bc2052e253f9e26d9', class: "flex items-center gap-2" }, h("input", { key: '6a9a6b27378919e1c6f48e9c5dfae03ef7d97646', 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
+            } }), h("label", { key: '3ff0e094dfe08e2a4c401243aaebf6480c2cfafc', 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()
+            .battery)), (this.battery > 0 && !this.isIOS()) && (h("span", { key: '585a71124051d15ea2cc342bee629a8c494239d7', class: "text-text-muted" }, this.battery, " kWh"))), this.battery > 0 && (h("div", { key: '6d74a5cda4b8834860ff972eb293e86527b830c9', 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);
@@ -360,52 +360,52 @@ export class SolarSystemForm {
                     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: {
+                } }))))))), h("div", { key: 'e2d75f070f8c3c41a9cfd4adda9d14e9b34fbbab', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: 'ba377a0cc8b569320a3e0e057a034819ad227c7b', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.electricityCostsTitle), h("div", { key: '070c1e3a58c2568e171df10274a5e57aa49044a1', 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) => {
+            } }, h("div", { key: 'bec93178987f87678bccb9132acff50a983a38e6' }, h("label", { key: 'f8cdb70052462357f1ebb63bb76833d6987b8d1f', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.electricityPrice), h("input", { key: '40c29d37ee01616589c83001f8186a3bd96a7185', 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) => {
+            } })), h("div", { key: '88003e2615bacc56b5431477a23cb58ab2c086d1' }, h("label", { key: '85b506656400f55c43cda84296b6099ffd288ffa', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.compensationRate), h("input", { key: 'd208d073142c69d94156731407f9252dbeeb515f', 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) => {
+            } })), h("div", { key: '2cdf720721e6d0bcc68251f44c2d1f35e68a72af' }, h("label", { key: '914cb694b2e155b3fb2c175575652c62c5faba48', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.annualPriceIncrease), h("input", { key: 'f5eae03441d921092a1059f12791b5089d723604', 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
+            } })))), h("div", { key: '0997b03cf6fc81af0bd88326de1e3eb7d82383ba', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: 'faa0a1320b89856ca7d21987ecffd7acf9fff7d2', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.resultsTitle), h("div", { key: '0de956455634f10fa2c3ee446ef408c1c1379fd8', class: "bg-muted rounded-4xl p-4" }, h("div", { key: '9785278b17204c208a6dcf9cb725aa504f287695', class: "flex flex-col sm:flex-row sm:items-center justify-between" }, h("span", { key: 'f5fa467fdd8fceaf3520905ba281347b98d28978', class: "text-text-muted" }, t.solarSystemForm.autonomy), h("span", { key: 'a70afec8557be41ab510ed3cc4c8725b9c42ca0d', 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: {
+            : this.formatEuropeanNumber(this.autonomy, 1), "%")), h("div", { key: '9b9eef4e512e1b1638723adfed3546138e9639f7', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("span", { key: 'e56aace60e06d29e6a4a37da366734ed462fec45', class: "text-text-muted" }, t.solarSystemForm.totalEnergyConsumption), h("span", { key: '99d3c569ffab6950c47acaf62a3de4a9adae865a', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.totalEnergyConsumption, 0), " kWh/", t.solarSystemForm.year)), h("div", { key: '3347f4ec972333f3e18db8b401609ab20b8a1081', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("span", { key: 'c590ae2fdc8162d058072f856b24fbe43390376d', class: "text-text-muted" }, t.solarSystemForm.totalEnergyProduction), h("span", { key: 'b27c9cc1718635c790c1d48f58fd4b9fc23d8b80', class: "text-xl font-bold text-secondary mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.totalEnergyProduction, 0), " kWh/", t.solarSystemForm.year)), h("div", { key: 'e800c4780891997859381fb60edc001dd071d6c1', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: 'b5247a88b14de6ae9b2ce8e1a779ff0cad81cd07', class: "flex items-center gap-2" }, h("span", { key: '8370e3ea7372c5a54ba97a6b8fcdad431f507062', class: "text-text-muted" }, t.solarSystemForm.costSavings)), h("span", { key: '229bc59b95c275ef31922c93ce83270901b2c9c8', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.costSavings), "\u20AC/", t
+            .solarSystemForm.year)), h("div", { key: '0f814b127c62bb3734cfb953daed01f63d4410ef', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: '1e7106e04c1c255f989f252b773129c979c578c2', class: "flex items-center gap-2" }, h("span", { key: '7c0038774cbdf0dbade48f01fefd52390276b6ad', class: "text-text-muted" }, t.solarSystemForm.compensation20Years)), h("span", { key: '7bb7ec01098ebc11b903b9ad86dc5fa4daa0e2fb', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.compensation20Years), "\u20AC")), h("div", { key: '7c412b9eed8946a0c429d503e3267ee355597c19', class: "flex flex-col sm:flex-row sm:items-center justify-between mt-4" }, h("div", { key: '4f84bb48e3129fda7e67dc246fb528c0d9d2da64', class: "flex items-center gap-2" }, h("span", { key: 'd22ff2fdb7d48feefef81a21c1c7afc208c57b46', class: "text-text-muted" }, t.solarSystemForm
+            .monetaryBenefit20Years)), h("span", { key: 'ee077e796e852bc5267e53cbbba2e63472cd4042', class: "text-xl font-bold text-success mt-1 sm:mt-0" }, this.formatEuropeanNumber(this.savedCosts20Years), "\u20AC")))), h("div", { key: 'b3acf989b51c9cc06ecf12c8a7241bd9dacdaf5d', class: "space-y-4 p-4 rounded-4xl", style: borderStyle }, h("h2", { key: '450dfbb3a61eb297f7b1eda98b0a1a1cbe25a9cb', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.requestOffer), h("div", { key: 'a09d2165122481dabd30dee31adf726f4d1ec675', 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
+            } }, h("div", { key: '26ce393447d7aa425d5448b751c4ea2e2088d951' }, h("label", { key: 'aa4bdbbc1c21d48ac8b2f3e936572b943e22846e', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.name), h("input", { key: 'a6c7a0bff5f44723f814c893a211911f4cfffd09', 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
+            }, placeholder: "Your name" }), this.nameError && (h("p", { key: 'd1f07fddb4323979be4381a81340cf124e24db85', class: "text-error text-sm mt-1" }, this.nameError))), h("div", { key: '76e537f26bac79cd95b8fa91963f461fe292e642' }, h("label", { key: 'a6a00a29b2d8093d7c7d4779757613849955f34f', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.email), h("input", { key: 'bc3191a8fe75b3fcdf7ea5c0d34f3a456607a231', 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
+            }, placeholder: "your.email@example.com" }), this.emailError && (h("p", { key: '9e1039e0e200f8e58f56159b41ad2d622b21deda', class: "text-error text-sm mt-1" }, this.emailError))), h("div", { key: '3bda8788e10cc6754ac4adf43abde9c4c01cfff1' }, h("label", { key: '8e04f620261552f13e07bbb84cd814cdfbb545c5', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.phone), h("input", { key: 'a2b6b2f56ad93b9cb690683daa10779987423fbd', 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() ||
+            }, placeholder: "+34 123 456 789" }), this.phoneError && (h("p", { key: 'b7a1376df5dcdf99587ece835333c4fb9f4a59b5', class: "text-error text-sm mt-1" }, this.phoneError)))), h("div", { key: '25d505f689b02c4b16cc9facdb8139708435222f', class: "flex flex-col items-center gap-4" }, h("button", { key: 'b6361bf33d70ef94fa812274e055c880b45824d5', 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
@@ -414,9 +414,9 @@ export class SolarSystemForm {
                 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
+            } }, this.isSubmitting && (h("div", { key: 'c65535e0b52108d8c79340cfc7ff89d3b65082e5', 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
+            : t.solarSystemForm.requestOfferButton), this.submitMessage && (h("div", { key: '061a4c8ae79d7f04300a307f6a569e578546e20b', 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)))))));
     }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class LoadingWidget {
     render() {
-        return (h("div", { key: '8755b3e92bc0d590b1320e373e8d6a89078f8ce7', class: "absolute flex items-center justify-center bg-muted bg-opacity-75 z-20 pt-7 rounded-4xl" }, h("div", { key: '1e7303711abc2c88edd4db672bf73d44391fe0ae', class: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-secondary" })));
+        return (h("div", { key: '60316e73e9161a81e299e5e0632fc83c30d3fc15', class: "absolute flex items-center justify-center bg-muted bg-opacity-75 z-20 pt-7 rounded-4xl" }, h("div", { key: 'f8edb698475d859fe07e53efe8e66a42e66dba29', class: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-secondary" })));
     }
     static get is() { return "loading-widget"; }
     static get originalStyleUrls() {

package/dist/collection/components/widgets/toast-notification.js

@@ -0,0 +1,133 @@
+import { h } from "@stencil/core";
+export class ToastNotification {
+    message = "";
+    type = "info";
+    duration = 5000; // Duration in milliseconds
+    isVisible = false;
+    isExiting = false;
+    timeoutId;
+    componentWillLoad() {
+        this.showToast();
+    }
+    showToast() {
+        this.isVisible = true;
+        this.isExiting = false;
+        // Auto-hide after duration
+        this.timeoutId = window.setTimeout(() => {
+            this.hideToast();
+        }, this.duration);
+    }
+    hideToast() {
+        this.isExiting = true;
+        // Remove from DOM after animation completes
+        // setTimeout(() => {
+        //     this.isVisible = false;
+        // }, 300); // Match the CSS transition duration
+    }
+    disconnectedCallback() {
+        if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+        }
+    }
+    getToastStyles() {
+        const baseStyles = "fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50 px-4 py-3 rounded-lg shadow-lg transition-all duration-300 ease-in-out";
+        const typeStyles = {
+            success: "bg-success/90 text-success-foreground border border-success/20",
+            info: "bg-info/90 text-info-foreground border border-info/20",
+            warning: "bg-warning/90 text-warning-foreground border border-warning/20",
+            error: "bg-error/90 text-error-foreground border border-error/20",
+        };
+        const animationStyles = this.isExiting
+            ? "opacity-0 translate-y-2 scale-95"
+            : "opacity-100 translate-y-0 scale-100";
+        return `${baseStyles} ${typeStyles[this.type]} ${animationStyles}`;
+    }
+    render() {
+        if (!this.isVisible) {
+            return null;
+        }
+        return (h("div", { class: this.getToastStyles() }, h("div", { class: "flex items-center gap-2" }, h("span", { class: "text-sm font-medium" }, this.message))));
+    }
+    static get is() { return "toast-notification"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "message": {
+                "type": "string",
+                "attribute": "message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"success\" | \"info\" | \"warning\" | \"error\"",
+                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"info\""
+            },
+            "duration": {
+                "type": "number",
+                "attribute": "duration",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "5000"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {},
+            "isExiting": {}
+        };
+    }
+}
+//# sourceMappingURL=toast-notification.js.map

package/dist/collection/components/widgets/toast-notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-notification.js","sourceRoot":"","sources":["../../../src/components/widgets/toast-notification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO1D,MAAM,OAAO,iBAAiB;IAE1B,OAAO,GAAW,EAAE,CAAC;IAErB,IAAI,GAA6C,MAAM,CAAC;IAExD,QAAQ,GAAW,IAAI,CAAC,CAAC,2BAA2B;IAG5C,SAAS,GAAY,KAAK,CAAC;IAE3B,SAAS,GAAY,KAAK,CAAC;IAE3B,SAAS,CAAS;IAE1B,iBAAiB;QACb,IAAI,CAAC,SAAS,EAAE,CAAC;IACrB,CAAC;IAEO,SAAS;QACb,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QAEvB,2BAA2B;QAC3B,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACpC,IAAI,CAAC,SAAS,EAAE,CAAC;QACrB,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtB,CAAC;IAEO,SAAS;QACb,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QAEtB,4CAA4C;QAC5C,qBAAqB;QACrB,8BAA8B;QAC9B,gDAAgD;IACpD,CAAC;IAED,oBAAoB;QAChB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACjC,CAAC;IACL,CAAC;IAEO,cAAc;QAClB,MAAM,UAAU,GACZ,gIAAgI,CAAC;QAErI,MAAM,UAAU,GAAG;YACf,OAAO,EACH,gEAAgE;YACpE,IAAI,EAAE,uDAAuD;YAC7D,OAAO,EACH,gEAAgE;YACpE,KAAK,EAAE,0DAA0D;SACpE,CAAC;QAEF,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS;YAClC,CAAC,CAAC,kCAAkC;YACpC,CAAC,CAAC,qCAAqC,CAAC;QAE5C,OAAO,GAAG,UAAU,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,eAAe,EAAE,CAAC;IACvE,CAAC;IAED,MAAM;QACF,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YAClB,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,OAAO,CACH,WAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC7B,WAAK,KAAK,EAAC,yBAAyB;gBAChC,YAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,OAAO,CAAQ,CACrD,CACJ,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: \"toast-notification\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class ToastNotification {\r\n    @Prop()\r\n    message: string = \"\";\r\n    @Prop()\r\n    type: \"success\" | \"info\" | \"warning\" | \"error\" = \"info\";\r\n    @Prop()\r\n    duration: number = 5000; // Duration in milliseconds\r\n\r\n    @State()\r\n    private isVisible: boolean = false;\r\n    @State()\r\n    private isExiting: boolean = false;\r\n\r\n    private timeoutId: number;\r\n\r\n    componentWillLoad() {\r\n        this.showToast();\r\n    }\r\n\r\n    private showToast() {\r\n        this.isVisible = true;\r\n        this.isExiting = false;\r\n\r\n        // Auto-hide after duration\r\n        this.timeoutId = window.setTimeout(() => {\r\n            this.hideToast();\r\n        }, this.duration);\r\n    }\r\n\r\n    private hideToast() {\r\n        this.isExiting = true;\r\n\r\n        // Remove from DOM after animation completes\r\n        // setTimeout(() => {\r\n        //     this.isVisible = false;\r\n        // }, 300); // Match the CSS transition duration\r\n    }\r\n\r\n    disconnectedCallback() {\r\n        if (this.timeoutId) {\r\n            clearTimeout(this.timeoutId);\r\n        }\r\n    }\r\n\r\n    private getToastStyles() {\r\n        const baseStyles =\r\n            \"fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50 px-4 py-3 rounded-lg shadow-lg transition-all duration-300 ease-in-out\";\r\n\r\n        const typeStyles = {\r\n            success:\r\n                \"bg-success/90 text-success-foreground border border-success/20\",\r\n            info: \"bg-info/90 text-info-foreground border border-info/20\",\r\n            warning:\r\n                \"bg-warning/90 text-warning-foreground border border-warning/20\",\r\n            error: \"bg-error/90 text-error-foreground border border-error/20\",\r\n        };\r\n\r\n        const animationStyles = this.isExiting\r\n            ? \"opacity-0 translate-y-2 scale-95\"\r\n            : \"opacity-100 translate-y-0 scale-100\";\r\n\r\n        return `${baseStyles} ${typeStyles[this.type]} ${animationStyles}`;\r\n    }\r\n\r\n    render() {\r\n        if (!this.isVisible) {\r\n            return null;\r\n        }\r\n\r\n        return (\r\n            <div class={this.getToastStyles()}>\r\n                <div class=\"flex items-center gap-2\">\r\n                    <span class=\"text-sm font-medium\">{this.message}</span>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}