blue-chestnut-solar-expert 0.0.33 → 0.0.35

package/dist/cjs/loading-widget.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-elxiOP_I.js');
+var index = require('./index-C3Kp1xqq.js');
 
 const outputCss = "/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n    --color-primary: hsl(41 51% 90%);\n    --color-primary-foreground: hsl(0 0% 0%);\n    --color-secondary: hsl(28 100% 8%);\n    --color-secondary-foreground: hsl(0 0% 100%);\n    --color-tertiary: hsl(28 100% 29%);\n    --color-tertiary-foreground: hsl(0 0% 100%);\n    --color-muted: hsl(0 0% 100%);\n    --color-muted-foreground: hsl(0 0% 0%);\n    --color-error: hsl(0 100% 50%);\n    --color-error-foreground: hsl(0 0% 100%);\n    --color-surface: hsl(0 0% 88%);\n    --color-surface-hover: hsl(0 0% 82%);\n    --color-surface-active: hsl(0 0% 64%);\n    --color-text-muted: hsl(0 0% 45%);\n    --color-text-secondary: hsl(0 0% 55%);\n    --color-text-placeholder: hsl(0 0% 73%);\n    --color-border: hsl(0 0% 82%);\n    --color-border-light: hsl(0 0% 93%);\n    --color-success: hsl(142 76% 36%);\n    --color-info: hsl(221 83% 53%);\n    --color-hover: hsl(0 0% 88%);\n    --color-hover-dark: hsl(28 100% 8%);\n    --color-overlay: rgba(0, 0, 0, 0.24);\n    --color-tooltip: hsl(0 0% 13%);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .grid-rows-3 {\n    grid-template-rows: repeat(3, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-border {\n    border-color: var(--color-border);\n  }\n  .border-error {\n    border-color: var(--color-error);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-secondary {\n    border-color: var(--color-secondary);\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-muted {\n    background-color: var(--color-muted);\n  }\n  .bg-overlay {\n    background-color: var(--color-overlay);\n  }\n  .bg-primary {\n    background-color: var(--color-primary);\n  }\n  .bg-secondary {\n    background-color: var(--color-secondary);\n  }\n  .bg-surface {\n    background-color: var(--color-surface);\n  }\n  .bg-surface-active {\n    background-color: var(--color-surface-active);\n  }\n  .bg-text-secondary {\n    background-color: var(--color-text-secondary);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-error {\n    color: var(--color-error);\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-muted {\n    color: var(--color-muted);\n  }\n  .text-muted-foreground {\n    color: var(--color-muted-foreground);\n  }\n  .text-primary-foreground {\n    color: var(--color-primary-foreground);\n  }\n  .text-secondary {\n    color: var(--color-secondary);\n  }\n  .text-secondary-foreground {\n    color: var(--color-secondary-foreground);\n  }\n  .text-success {\n    color: var(--color-success);\n  }\n  .text-text-muted {\n    color: var(--color-text-muted);\n  }\n  .text-text-placeholder {\n    color: var(--color-text-placeholder);\n  }\n  .text-text-secondary {\n    color: var(--color-text-secondary);\n  }\n  .accent-tertiary {\n    accent-color: var(--color-tertiary);\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-hover);\n      }\n    }\n  }\n  .hover\\:bg-hover-dark {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-hover-dark);\n      }\n    }\n  }\n  .hover\\:bg-muted {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-muted);\n      }\n    }\n  }\n  .hover\\:bg-overlay {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-overlay);\n      }\n    }\n  }\n  .hover\\:bg-secondary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-secondary);\n      }\n    }\n  }\n  .hover\\:bg-secondary\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-surface-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-surface-hover);\n      }\n    }\n  }\n  .hover\\:bg-tertiary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-tertiary);\n      }\n    }\n  }\n  .hover\\:bg-text-secondary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-text-secondary);\n      }\n    }\n  }\n  .hover\\:text-muted {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-muted);\n      }\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-info {\n    &:focus {\n      --tw-ring-color: var(--color-info);\n    }\n  }\n  .focus\\:ring-secondary {\n    &:focus {\n      --tw-ring-color: var(--color-secondary);\n    }\n  }\n  .focus\\:ring-tertiary {\n    &:focus {\n      --tw-ring-color: var(--color-tertiary);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-muted {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-muted);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n";
 
@@ -9,7 +9,7 @@ const LoadingWidget = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '3a581464e2779ecc59273c9463d9ebd988350db2', class: "absolute flex items-center justify-center bg-muted bg-opacity-75 z-20 pt-7 rounded-4xl" }, index.h("div", { key: '93e3db401852bb44bfa606881c7fc9e414c19064', class: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-secondary" })));
+        return (index.h("div", { key: 'da326e2a5f7257a91ca35a2bbe14e1cdd154247b', class: "absolute flex items-center justify-center bg-muted bg-opacity-75 z-20 pt-7 rounded-4xl" }, index.h("div", { key: '47f4db72864eb56521665d2ea603cccefc943e38', class: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-secondary" })));
     }
 };
 LoadingWidget.style = outputCss;

package/dist/cjs/solar-calculator.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-elxiOP_I.js');
+var index = require('./index-C3Kp1xqq.js');
 var index$1 = require('./index-CZQtx4r0.js');
 
 /**

package/dist/cjs/stencil-library.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-elxiOP_I.js');
+var index = require('./index-C3Kp1xqq.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["loading-widget.cjs",[[0,"loading-widget"]]],["solar-calculator.cjs",[[0,"solar-calculator",{"apiKey":[1,"api-key"],"buildingInsights":[32],"isLoaded":[32],"autocomplete":[32],"place":[32]}]]],["eraser-icon_16.cjs",[[1,"solar-expert",{"apiKey":[1,"api-key"],"language":[1],"colorScheme":[16,"color-scheme"],"latitude":[32],"longitude":[32],"isLoaded":[32],"autocomplete":[32],"place":[32],"showMapSelector":[32]},null,{"colorScheme":["colorSchemeChanged"]}],[0,"map-draw",{"apiKey":[1,"api-key"],"config":[16],"solarPanel":[16,"solar-panel"],"showInstructions":[32],"showSettings":[32],"zoom":[32],"loadingState":[32],"rgbTiff":[32],"draggedPointIndex":[32],"hoveredPointIndex":[32],"hoveredPolygon":[32],"shiftKeyPressed":[32],"altKeyPressed":[32],"mousePoint":[32],"currentTool":[32],"roofPolygons":[32],"roofPolygonsSolarPanels":[32],"obstructionPolygons":[32],"selectedPolygon":[32],"buildingInsights":[32],"pixelInMeters":[32],"isMobile":[32],"highlightedEdge":[32]},[[5,"mousemove","handleMouseMove"],[4,"keydown","handleKeyDown"],[4,"keyup","handleKeyUp"],[5,"mousedown","handleMouseDown"],[5,"mouseup","handleMouseUp"]],{"rgbTiff":["drawMap"],"buildingInsights":["drawMap"],"canvasElement":["drawMap"]}],[0,"map-selector",{"apiKey":[1,"api-key"],"language":[1],"isLoaded":[32],"autocomplete":[32],"map":[32],"marker":[32],"circle":[32],"radius":[32],"latitude":[32],"longitude":[32]}],[0,"tool-box",{"currentTool":[16,"current-tool"],"undoCallback":[16,"undo-callback"],"onToolSelect":[16,"on-tool-select"]}],[0,"polygon-buttons",{"calculateSolarPanels":[16,"calculate-solar-panels"],"selectEdgeTool":[16,"select-edge-tool"],"currentTool":[1,"current-tool"]}],[0,"polygon-information",{"currentPolygon":[8,"current-polygon"],"positionedPanels":[16,"positioned-panels"],"handleAzimuthChange":[16,"handle-azimuth-change"],"handlePitchChange":[16,"handle-pitch-change"],"calculateSolarPanels":[16,"calculate-solar-panels"]}],[0,"settings-modal",{"settings":[16],"tempSettings":[32]}],[0,"solar-system-form",{"systemConfigs":[16,"system-configs"],"roofPolygons":[16,"roof-polygons"],"obstructionPolygons":[16,"obstruction-polygons"],"householdConsumption":[32],"consumptionProfile":[32],"electricityPrice":[32],"compensationRate":[32],"annualPriceIncrease":[32],"autonomy":[32],"costSavings":[32],"numberOfPanels":[32],"panelPeakPower":[32],"name":[32],"email":[32],"nameError":[32],"emailError":[32],"electricCar":[32],"electricCarChargingTime":[32],"heatPump":[32],"battery":[32],"compensation25Years":[32],"savedCosts25Years":[32],"maxPanels":[32],"kmDrivenPerYear":[32]},null,{"systemConfigs":["updateSystemConfigs"]}],[0,"icon-selector",{"name":[1],"inline":[4],"size":[2]}],[0,"eraser-icon",{"inline":[4],"size":[2]}],[0,"house-icon",{"inline":[4],"size":[2]}],[0,"move-icon",{"inline":[4],"size":[2]}],[0,"octagon-minus-icon",{"inline":[4],"size":[2]}],[0,"settings-icon",{"inline":[4],"size":[2]}],[0,"undo-icon",{"inline":[4],"size":[2]}],[0,"search-icon",{"inline":[4],"size":[2]}]]]], options);
+  return index.bootstrapLazy([["loading-widget.cjs",[[0,"loading-widget"]]],["solar-calculator.cjs",[[0,"solar-calculator",{"apiKey":[1,"api-key"],"buildingInsights":[32],"isLoaded":[32],"autocomplete":[32],"place":[32]}]]],["eraser-icon_16.cjs",[[0,"solar-expert",{"apiKey":[1,"api-key"],"language":[1],"colorScheme":[16,"color-scheme"],"latitude":[32],"longitude":[32],"isLoaded":[32],"autocomplete":[32],"place":[32],"showMapSelector":[32]},null,{"colorScheme":["colorSchemeChanged"]}],[0,"map-draw",{"apiKey":[1,"api-key"],"config":[16],"solarPanel":[16,"solar-panel"],"showInstructions":[32],"showSettings":[32],"zoom":[32],"loadingState":[32],"rgbTiff":[32],"draggedPointIndex":[32],"hoveredPointIndex":[32],"hoveredPolygon":[32],"shiftKeyPressed":[32],"altKeyPressed":[32],"mousePoint":[32],"currentTool":[32],"roofPolygons":[32],"roofPolygonsSolarPanels":[32],"obstructionPolygons":[32],"selectedPolygon":[32],"buildingInsights":[32],"pixelInMeters":[32],"isMobile":[32],"highlightedEdge":[32]},[[5,"mousemove","handleMouseMove"],[4,"keydown","handleKeyDown"],[4,"keyup","handleKeyUp"],[5,"mousedown","handleMouseDown"],[5,"mouseup","handleMouseUp"]],{"rgbTiff":["drawMap"],"buildingInsights":["drawMap"],"canvasElement":["drawMap"]}],[0,"map-selector",{"apiKey":[1,"api-key"],"language":[1],"isLoaded":[32],"autocomplete":[32],"map":[32],"marker":[32],"circle":[32],"radius":[32],"latitude":[32],"longitude":[32]}],[0,"tool-box",{"currentTool":[16,"current-tool"],"undoCallback":[16,"undo-callback"],"onToolSelect":[16,"on-tool-select"]}],[0,"polygon-buttons",{"calculateSolarPanels":[16,"calculate-solar-panels"],"selectEdgeTool":[16,"select-edge-tool"],"currentTool":[1,"current-tool"]}],[0,"polygon-information",{"currentPolygon":[8,"current-polygon"],"positionedPanels":[16,"positioned-panels"],"handleAzimuthChange":[16,"handle-azimuth-change"],"handlePitchChange":[16,"handle-pitch-change"],"calculateSolarPanels":[16,"calculate-solar-panels"]}],[0,"settings-modal",{"settings":[16],"tempSettings":[32]}],[0,"solar-system-form",{"systemConfigs":[16,"system-configs"],"roofPolygons":[16,"roof-polygons"],"obstructionPolygons":[16,"obstruction-polygons"],"householdConsumption":[32],"consumptionProfile":[32],"electricityPrice":[32],"compensationRate":[32],"annualPriceIncrease":[32],"autonomy":[32],"costSavings":[32],"numberOfPanels":[32],"panelPeakPower":[32],"name":[32],"email":[32],"nameError":[32],"emailError":[32],"electricCar":[32],"electricCarChargingTime":[32],"heatPump":[32],"battery":[32],"compensation25Years":[32],"savedCosts25Years":[32],"maxPanels":[32],"kmDrivenPerYear":[32]},null,{"systemConfigs":["updateSystemConfigs"]}],[0,"icon-selector",{"name":[1],"inline":[4],"size":[2]}],[0,"eraser-icon",{"inline":[4],"size":[2]}],[0,"house-icon",{"inline":[4],"size":[2]}],[0,"move-icon",{"inline":[4],"size":[2]}],[0,"octagon-minus-icon",{"inline":[4],"size":[2]}],[0,"settings-icon",{"inline":[4],"size":[2]}],[0,"undo-icon",{"inline":[4],"size":[2]}],[0,"search-icon",{"inline":[4],"size":[2]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/map-draw/tool-box.js

@@ -12,9 +12,13 @@ export class ToolBox {
         return (h("div", { key: '6a249c8eddd0bf541a98f77d09bcc9e297e8ec63', class: "flex lg:gap-4 rounded-4xl bg-primary p-4 flex-wrap justify-center w-full text-xs" }, tools.map((tool) => {
             const toolStrings = t.mapDraw.tools[tool.name];
             return (h("button", { class: `px-4 py-2 rounded-4xl transition-colors duration-200 ${this.currentTool.name === tool.name
-                    ? "bg-secondary hover:bg-secondary/80 text-secondary-foreground"
-                    : "bg-primary hover:bg-muted text-primary-foreground"}`, "aria-label": toolStrings.ariaLabel, title: toolStrings.explanation, onClick: () => this.onToolSelect(tool) }, h("div", { class: "flex items-center gap-1 flex-col" }, h("icon-selector", { name: tool.icon }), h("span", null, toolStrings.name))));
-        }), h("button", { key: 'bc2dc6f90419ca7a8ff0ede18b82c2ad51b94280', class: `px-4 py-2 rounded-4xl transition-colors duration-200 bg-primary hover:bg-muted text-primary-foreground`, "aria-label": undoToolStrings.ariaLabel, title: undoToolStrings.explanation, onClick: () => this.undoCallback() }, h("div", { key: '1112ed1599e5ef3c007dd9122cca62b42137852c', class: "flex items-center gap-1 flex-col" }, h("undo-icon", { key: '3b7425e904e07e8c17fb538eef2bfedb74837ab3' }), h("span", { key: 'b5df30aa88a8d323ff9855ebcdc3a54226092a46' }, undoToolStrings.name)))));
+                    ? "bg-secondary hover:bg-secondary/80"
+                    : "bg-primary hover:bg-muted"}`, style: {
+                    color: this.currentTool.name === tool.name
+                        ? "var(--color-secondary-foreground)"
+                        : "var(--color-primary-foreground)",
+                }, "aria-label": toolStrings.ariaLabel, title: toolStrings.explanation, onClick: () => this.onToolSelect(tool) }, h("div", { class: "flex items-center gap-1 flex-col" }, h("icon-selector", { name: tool.icon }), h("span", null, toolStrings.name))));
+        }), h("button", { key: 'b9eefc37d84ce8cf1fc3ea27fd0135d477a30eb2', class: `px-4 py-2 rounded-4xl transition-colors duration-200 bg-primary hover:bg-muted text-primary-foreground`, "aria-label": undoToolStrings.ariaLabel, title: undoToolStrings.explanation, onClick: () => this.undoCallback() }, h("div", { key: '06388aa01a0a70de8ffb202717e4d63df6c9cd1b', class: "flex items-center gap-1 flex-col" }, h("undo-icon", { key: 'ba5614562d52b0b06be3a9f557ed3dcb103eeeaa' }), h("span", { key: '39aeaf8cd4c4cabd39bec5051ef0eb53459e7846' }, undoToolStrings.name)))));
     }
     static get is() { return "tool-box"; }
     static get originalStyleUrls() {

package/dist/collection/components/map-draw/tool-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"tool-box.js","sourceRoot":"","sources":["../../../src/components/map-draw/tool-box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAO3D,MAAM,OAAO,OAAO;IAEhB,WAAW,CAAO;IAElB,YAAY,CAAa;IAEzB,YAAY,CAAuB;IAEnC,MAAM;QACF,MAAM,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACtD,MAAM,eAAe,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEvD,OAAO,CACH,4DAAK,KAAK,EAAC,kFAAkF;YACxF,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBAChB,MAAM,WAAW,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC/C,OAAO,CACH,cACI,KAAK,EAAE,wDACH,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;wBAC/B,CAAC,CAAC,8DAA8D;wBAChE,CAAC,CAAC,mDACV,EAAE,gBACU,WAAW,CAAC,SAAS,EACjC,KAAK,EAAE,WAAW,CAAC,WAAW,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;oBAEtC,WAAK,KAAK,EAAC,kCAAkC;wBACzC,qBAAe,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;wBAClC,gBAAO,WAAW,CAAC,IAAI,CAAQ,CAC7B,CACD,CACZ,CAAC;YACN,CAAC,CAAC;YACF,+DACI,KAAK,EAAE,wGAAwG,gBACnG,eAAe,CAAC,SAAS,EACrC,KAAK,EAAE,eAAe,CAAC,WAAW,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;gBAElC,4DAAK,KAAK,EAAC,kCAAkC;oBACzC,mEAAa;oBACb,+DAAO,eAAe,CAAC,IAAI,CAAQ,CACjC,CACD,CACP,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport { Tool } from \"../../utils/render/tools\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { state } from \"../../store\";\r\nimport { tools, undoTool } from \"../../utils/render/tools\";\r\n\r\n@Component({\r\n    tag: \"tool-box\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class ToolBox {\r\n    @Prop()\r\n    currentTool: Tool;\r\n    @Prop()\r\n    undoCallback: () => void;\r\n    @Prop()\r\n    onToolSelect: (tool: Tool) => void;\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n        const undoToolStrings = t.mapDraw.tools[undoTool.name];\r\n\r\n        return (\r\n            <div class=\"flex lg:gap-4 rounded-4xl bg-primary p-4 flex-wrap justify-center w-full text-xs\">\r\n                {tools.map((tool) => {\r\n                    const toolStrings = t.mapDraw.tools[tool.name];\r\n                    return (\r\n                        <button\r\n                            class={`px-4 py-2 rounded-4xl transition-colors duration-200 ${\r\n                                this.currentTool.name === tool.name\r\n                                    ? \"bg-secondary hover:bg-secondary/80 text-secondary-foreground\"\r\n                                    : \"bg-primary hover:bg-muted text-primary-foreground\"\r\n                            }`}\r\n                            aria-label={toolStrings.ariaLabel}\r\n                            title={toolStrings.explanation}\r\n                            onClick={() => this.onToolSelect(tool)}\r\n                        >\r\n                            <div class=\"flex items-center gap-1 flex-col\">\r\n                                <icon-selector name={tool.icon} />\r\n                                <span>{toolStrings.name}</span>\r\n                            </div>\r\n                        </button>\r\n                    );\r\n                })}\r\n                <button\r\n                    class={`px-4 py-2 rounded-4xl transition-colors duration-200 bg-primary hover:bg-muted text-primary-foreground`}\r\n                    aria-label={undoToolStrings.ariaLabel}\r\n                    title={undoToolStrings.explanation}\r\n                    onClick={() => this.undoCallback()}\r\n                >\r\n                    <div class=\"flex items-center gap-1 flex-col\">\r\n                        <undo-icon />\r\n                        <span>{undoToolStrings.name}</span>\r\n                    </div>\r\n                </button>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"tool-box.js","sourceRoot":"","sources":["../../../src/components/map-draw/tool-box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAO3D,MAAM,OAAO,OAAO;IAEhB,WAAW,CAAO;IAElB,YAAY,CAAa;IAEzB,YAAY,CAAuB;IAEnC,MAAM;QACF,MAAM,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACtD,MAAM,eAAe,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEvD,OAAO,CACH,4DAAK,KAAK,EAAC,kFAAkF;YACxF,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBAChB,MAAM,WAAW,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC/C,OAAO,CACH,cACI,KAAK,EAAE,wDACH,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;wBAC/B,CAAC,CAAC,oCAAoC;wBACtC,CAAC,CAAC,2BACV,EAAE,EACF,KAAK,EAAE;wBACH,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;4BACtC,CAAC,CAAC,mCAAmC;4BACrC,CAAC,CAAC,iCAAiC;qBAC1C,gBACW,WAAW,CAAC,SAAS,EACjC,KAAK,EAAE,WAAW,CAAC,WAAW,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;oBAEtC,WAAK,KAAK,EAAC,kCAAkC;wBACzC,qBAAe,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;wBAClC,gBAAO,WAAW,CAAC,IAAI,CAAQ,CAC7B,CACD,CACZ,CAAC;YACN,CAAC,CAAC;YACF,+DACI,KAAK,EAAE,wGAAwG,gBACnG,eAAe,CAAC,SAAS,EACrC,KAAK,EAAE,eAAe,CAAC,WAAW,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;gBAElC,4DAAK,KAAK,EAAC,kCAAkC;oBACzC,mEAAa;oBACb,+DAAO,eAAe,CAAC,IAAI,CAAQ,CACjC,CACD,CACP,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport { Tool } from \"../../utils/render/tools\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { state } from \"../../store\";\r\nimport { tools, undoTool } from \"../../utils/render/tools\";\r\n\r\n@Component({\r\n    tag: \"tool-box\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class ToolBox {\r\n    @Prop()\r\n    currentTool: Tool;\r\n    @Prop()\r\n    undoCallback: () => void;\r\n    @Prop()\r\n    onToolSelect: (tool: Tool) => void;\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n        const undoToolStrings = t.mapDraw.tools[undoTool.name];\r\n\r\n        return (\r\n            <div class=\"flex lg:gap-4 rounded-4xl bg-primary p-4 flex-wrap justify-center w-full text-xs\">\r\n                {tools.map((tool) => {\r\n                    const toolStrings = t.mapDraw.tools[tool.name];\r\n                    return (\r\n                        <button\r\n                            class={`px-4 py-2 rounded-4xl transition-colors duration-200 ${\r\n                                this.currentTool.name === tool.name\r\n                                    ? \"bg-secondary hover:bg-secondary/80\"\r\n                                    : \"bg-primary hover:bg-muted\"\r\n                            }`}\r\n                            style={{\r\n                                color: this.currentTool.name === tool.name\r\n                                    ? \"var(--color-secondary-foreground)\"\r\n                                    : \"var(--color-primary-foreground)\",\r\n                            }}\r\n                            aria-label={toolStrings.ariaLabel}\r\n                            title={toolStrings.explanation}\r\n                            onClick={() => this.onToolSelect(tool)}\r\n                        >\r\n                            <div class=\"flex items-center gap-1 flex-col\">\r\n                                <icon-selector name={tool.icon} />\r\n                                <span>{toolStrings.name}</span>\r\n                            </div>\r\n                        </button>\r\n                    );\r\n                })}\r\n                <button\r\n                    class={`px-4 py-2 rounded-4xl transition-colors duration-200 bg-primary hover:bg-muted text-primary-foreground`}\r\n                    aria-label={undoToolStrings.ariaLabel}\r\n                    title={undoToolStrings.explanation}\r\n                    onClick={() => this.undoCallback()}\r\n                >\r\n                    <div class=\"flex items-center gap-1 flex-col\">\r\n                        <undo-icon />\r\n                        <span>{undoToolStrings.name}</span>\r\n                    </div>\r\n                </button>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/dist/collection/components/solar-expert/solar-expert.js

@@ -64,7 +64,7 @@ export class SolarExpert {
         state.settings.language = this.language;
         const isIPhone = navigator.userAgent.indexOf("iPhone") != -1;
         const isMac = navigator.userAgent.indexOf("Mac OS") != -1;
-        state.isIOS = isIPhone || isMac || true;
+        state.isIOS = isIPhone || isMac;
         if (!this.colorScheme) {
             applyThemeToElement(this.el, DEFAULT_COLOR_SCHEME);
             applyThemeGlobally(DEFAULT_COLOR_SCHEME);
@@ -128,13 +128,12 @@ export class SolarExpert {
     }
     render() {
         const t = getLanguageStrings(this.language);
-        return (h("div", { key: '8b0622ee8ebeea53897b0dac8a0bdd12950d1d72', class: "flex flex-col w-full h-full p-3 m-auto", id: "solar-calculator" }, this.showMapSelector
+        return (h("div", { key: 'f9bac9f41ec94a5dd11f85477fc8f739faa7f909', class: "flex flex-col w-full h-full p-3 m-auto", id: "solar-calculator" }, this.showMapSelector
             ? (h("map-selector", { "api-key": this.apiKey, language: this.language }))
             : (h(h.Fragment, null, h("div", { class: "pb-3 flex flex-row gap-4 items-stretch w-full" }, h("div", { class: "relative flex-3" }, h("div", { class: "absolute left-3 top-0 h-full flex items-center text-muted-foreground pointer-events-none" }, h("search-icon", null)), h("input", { ref: (el) => this.inputElement = el, type: "text", placeholder: t.solarExpert
                     .searchPlaceholder, class: "w-full pl-10 pr-4 py-2 border border-border rounded-4xl focus:ring-secondary bg-muted text-muted-foreground h-full" })), h("button", { onClick: () => this.handleChooseOnMap(), class: "flex-1 pl-4 pr-4 py-2 border border-border bg-muted rounded-4xl focus:ring-secondary hover:bg-secondary hover:text-muted" }, t.mapSelector.chooseOnMap)), h("map-draw", { apiKey: this.apiKey })))));
     }
     static get is() { return "solar-expert"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["../../output.css"]

package/dist/collection/components/solar-expert/solar-expert.js.map

@@ -1 +1 @@
-{"version":3,"file":"solar-expert.js","sourceRoot":"","sources":["../../../src/components/solar-expert/solar-expert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Env, h, Prop, State, Watch } from \"@stencil/core\";\r\nimport { Loader } from \"@googlemaps/js-api-loader\";\r\nimport { Language } from \"../../types/lang\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { onChange, state } from \"../../store\";\r\nimport { ColorScheme, DEFAULT_COLOR_SCHEME } from \"../../config\";\r\nimport { applyThemeGlobally, applyThemeToElement } from \"../../utils/theme\";\r\n\r\n@Component({\r\n    tag: \"solar-expert\",\r\n    shadow: true,\r\n    styleUrl: \"../../output.css\",\r\n})\r\nexport class SolarExpert {\r\n    @Element()\r\n    el!: HTMLElement;\r\n\r\n    @Prop()\r\n    apiKey: string = Env.GOOGLE_MAPS_API_KEY;\r\n    @Prop()\r\n    language: Language = \"en\";\r\n    @Prop()\r\n    colorScheme: Partial<ColorScheme> | null = null;\r\n    // {\r\n    //     primary: \"hsl(0 0% 100%)\",\r\n    //     secondary: \"hsl(0 0% 100%)\",\r\n    //     tertiary: \"hsl(0 0% 100%)\",\r\n    //     muted: \"hsl(0 0% 100%)\",\r\n    //     error: \"hsl(0 0% 100%)\",\r\n    //     // secondary: \"hsl(180 100% 25%)\",\r\n    //     // tertiary: \"hsl(24 100% 18%)\",\r\n    //     // muted: \"hsl(0 0% 85%)\",\r\n    //     // error: \"hsl(240 75% 29%)\",\r\n    //     primaryForeground: \"hsl(0 0% 100%)\",\r\n    //     secondaryForeground: \"hsl(0 0% 100%)\",\r\n    //     tertiaryForeground: \"hsl(0 0% 100%)\",\r\n    //     mutedForeground: \"hsl(0 0% 100%)\",\r\n    //     errorForeground: \"hsl(0 0% 100%)\",\r\n    //     surface: \"hsl(0 0% 100%)\",\r\n    //     surfaceHover: \"hsl(0 0% 100%)\",\r\n    //     surfaceActive: \"hsl(0 0% 100%)\",\r\n    //     // Text colors\r\n    //     textMuted: \"hsl(0 0% 100%)\",\r\n    //     textSecondary: \"hsl(0 0% 100%)\",\r\n    //     textPlaceholder: \"hsl(0 0% 100%)\",\r\n    //     // Border colors\r\n    //     border: \"hsl(0 0% 100%)\",\r\n    //     borderLight: \"hsl(0 0% 100%)\",\r\n    //     // Status colors\r\n    //     success: \"hsl(0 0% 100%)\",\r\n    //     info: \"hsl(0 0% 100%)\",\r\n    //     // Interactive colors\r\n    //     hover: \"hsl(0 0% 100%)\",\r\n    //     hoverDark: \"hsl(0 0% 100%)\",\r\n    //     overlay: \"hsl(0 0% 100%)\",\r\n    //     tooltip: \"hsl(0 0% 100%)\",\r\n    // };\r\n\r\n    @State()\r\n    latitude: number | null = 40.581614;\r\n    @State()\r\n    longitude: number | null = -4.128423;\r\n    @State()\r\n    isLoaded: boolean = false;\r\n    @State()\r\n    autocomplete: google.maps.places.Autocomplete | null = null;\r\n    @State()\r\n    place: google.maps.places.PlaceResult | null = null;\r\n    @State()\r\n    showMapSelector: boolean = false;\r\n\r\n    private inputElement?: HTMLInputElement;\r\n\r\n    componentWillLoad() {\r\n        state.isMobile =\r\n            /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i\r\n                .test(navigator.userAgent) || window.innerWidth < 768;\r\n        this.loadGoogleMapsScript();\r\n        onChange(\"latitude\", () => {\r\n            if (this.showMapSelector) {\r\n                this.showMapSelector = false;\r\n                this.scrollToMapDraw();\r\n            }\r\n        });\r\n        state.settings.language = this.language;\r\n\r\n        const isIPhone = navigator.userAgent.indexOf(\"iPhone\") != -1;\r\n        const isMac = navigator.userAgent.indexOf(\"Mac OS\") != -1;\r\n\r\n        state.isIOS = isIPhone || isMac || true;\r\n        if (!this.colorScheme) {\r\n            applyThemeToElement(this.el, DEFAULT_COLOR_SCHEME);\r\n            applyThemeGlobally(DEFAULT_COLOR_SCHEME);\r\n        }\r\n        this.applyTheme();\r\n    }\r\n\r\n    @Watch(\"colorScheme\")\r\n    colorSchemeChanged() {\r\n        this.applyTheme();\r\n    }\r\n\r\n    private applyTheme() {\r\n        if (this.colorScheme) {\r\n            // Apply theme globally for non-shadow components\r\n            applyThemeGlobally(this.colorScheme);\r\n            // Apply theme to this component's Shadow DOM host element\r\n            applyThemeToElement(this.el, this.colorScheme);\r\n        }\r\n    }\r\n\r\n    private async loadGoogleMapsScript() {\r\n        try {\r\n            const loader = new Loader({\r\n                apiKey: this.apiKey,\r\n                libraries: [\"places\", \"maps\", \"marker\"],\r\n            });\r\n\r\n            const places = await loader.importLibrary(\"places\");\r\n            this.isLoaded = true;\r\n            this.initializeAutocomplete(places);\r\n        } catch (error) {\r\n            console.error(\"Error loading Google Maps: \", error);\r\n        }\r\n    }\r\n\r\n    private initializeAutocomplete(\r\n        places: google.maps.PlacesLibrary,\r\n    ) {\r\n        if (!this.inputElement || !this.isLoaded) return;\r\n        this.autocomplete = new places.Autocomplete(this.inputElement);\r\n\r\n        this.autocomplete.addListener(\"place_changed\", () => {\r\n            const place = this.autocomplete?.getPlace();\r\n            this.latitude = place?.geometry?.location?.lat() ?? 0;\r\n            this.longitude = place?.geometry?.location?.lng() ?? 0;\r\n            state.latitude = this.latitude;\r\n            state.longitude = this.longitude;\r\n\r\n            this.scrollToMapDraw();\r\n        });\r\n    }\r\n\r\n    private scrollToMapDraw() {\r\n        if (state.isMobile) {\r\n            const solarSystemFormElement = this.el.querySelector(\r\n                \"solar-system-form\",\r\n            );\r\n            if (solarSystemFormElement) {\r\n                solarSystemFormElement.scrollIntoView({ behavior: \"smooth\" });\r\n            }\r\n        } else {\r\n            const mapDrawElement = this.el.querySelector(\"map-draw\");\r\n            if (mapDrawElement) {\r\n                mapDrawElement.scrollIntoView({ behavior: \"smooth\" });\r\n            }\r\n        }\r\n    }\r\n\r\n    private handleChooseOnMap() {\r\n        this.showMapSelector = true;\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 w-full h-full p-3 m-auto\"\r\n                id=\"solar-calculator\"\r\n            >\r\n                {this.showMapSelector\r\n                    ? (\r\n                        <map-selector\r\n                            api-key={this.apiKey}\r\n                            language={this.language}\r\n                        />\r\n                    )\r\n                    : (\r\n                        <>\r\n                            <div class=\"pb-3 flex flex-row gap-4 items-stretch w-full\">\r\n                                <div class=\"relative flex-3\">\r\n                                    <div class=\"absolute left-3 top-0 h-full flex items-center text-muted-foreground pointer-events-none\">\r\n                                        <search-icon />\r\n                                    </div>\r\n                                    <input\r\n                                        ref={(el) => this.inputElement = el}\r\n                                        type=\"text\"\r\n                                        placeholder={t.solarExpert\r\n                                            .searchPlaceholder}\r\n                                        class=\"w-full pl-10 pr-4 py-2 border border-border rounded-4xl focus:ring-secondary bg-muted text-muted-foreground h-full\"\r\n                                    />\r\n                                </div>\r\n                                <button\r\n                                    onClick={() => this.handleChooseOnMap()}\r\n                                    class=\"flex-1 pl-4 pr-4 py-2 border border-border bg-muted rounded-4xl focus:ring-secondary hover:bg-secondary hover:text-muted\"\r\n                                >\r\n                                    {t.mapSelector.chooseOnMap}\r\n                                </button>\r\n                            </div>\r\n                            <map-draw\r\n                                apiKey={this.apiKey}\r\n                            />\r\n                        </>\r\n                    )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"solar-expert.js","sourceRoot":"","sources":["../../../src/components/solar-expert/solar-expert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Env, h, Prop, State, Watch } from \"@stencil/core\";\r\nimport { Loader } from \"@googlemaps/js-api-loader\";\r\nimport { Language } from \"../../types/lang\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { onChange, state } from \"../../store\";\r\nimport { ColorScheme, DEFAULT_COLOR_SCHEME } from \"../../config\";\r\nimport { applyThemeGlobally, applyThemeToElement } from \"../../utils/theme\";\r\n\r\n@Component({\r\n    tag: \"solar-expert\",\r\n    shadow: false,\r\n    styleUrl: \"../../output.css\",\r\n})\r\nexport class SolarExpert {\r\n    @Element()\r\n    el!: HTMLElement;\r\n\r\n    @Prop()\r\n    apiKey: string = Env.GOOGLE_MAPS_API_KEY;\r\n    @Prop()\r\n    language: Language = \"en\";\r\n    @Prop()\r\n    colorScheme: Partial<ColorScheme> | null = null;\r\n    // {\r\n    //     primary: \"hsl(0 0% 100%)\",\r\n    //     secondary: \"hsl(0 0% 100%)\",\r\n    //     tertiary: \"hsl(0 0% 100%)\",\r\n    //     muted: \"hsl(0 0% 100%)\",\r\n    //     error: \"hsl(0 0% 100%)\",\r\n    //     // secondary: \"hsl(180 100% 25%)\",\r\n    //     // tertiary: \"hsl(24 100% 18%)\",\r\n    //     // muted: \"hsl(0 0% 85%)\",\r\n    //     // error: \"hsl(240 75% 29%)\",\r\n    //     primaryForeground: \"hsl(0 0% 100%)\",\r\n    //     secondaryForeground: \"hsl(0 0% 100%)\",\r\n    //     tertiaryForeground: \"hsl(0 0% 100%)\",\r\n    //     mutedForeground: \"hsl(0 0% 100%)\",\r\n    //     errorForeground: \"hsl(0 0% 100%)\",\r\n    //     surface: \"hsl(0 0% 100%)\",\r\n    //     surfaceHover: \"hsl(0 0% 100%)\",\r\n    //     surfaceActive: \"hsl(0 0% 100%)\",\r\n    //     // Text colors\r\n    //     textMuted: \"hsl(0 0% 100%)\",\r\n    //     textSecondary: \"hsl(0 0% 100%)\",\r\n    //     textPlaceholder: \"hsl(0 0% 100%)\",\r\n    //     // Border colors\r\n    //     border: \"hsl(0 0% 100%)\",\r\n    //     borderLight: \"hsl(0 0% 100%)\",\r\n    //     // Status colors\r\n    //     success: \"hsl(0 0% 100%)\",\r\n    //     info: \"hsl(0 0% 100%)\",\r\n    //     // Interactive colors\r\n    //     hover: \"hsl(0 0% 100%)\",\r\n    //     hoverDark: \"hsl(0 0% 100%)\",\r\n    //     overlay: \"hsl(0 0% 100%)\",\r\n    //     tooltip: \"hsl(0 0% 100%)\",\r\n    // };\r\n\r\n    @State()\r\n    latitude: number | null = 40.581614;\r\n    @State()\r\n    longitude: number | null = -4.128423;\r\n    @State()\r\n    isLoaded: boolean = false;\r\n    @State()\r\n    autocomplete: google.maps.places.Autocomplete | null = null;\r\n    @State()\r\n    place: google.maps.places.PlaceResult | null = null;\r\n    @State()\r\n    showMapSelector: boolean = false;\r\n\r\n    private inputElement?: HTMLInputElement;\r\n\r\n    componentWillLoad() {\r\n        state.isMobile =\r\n            /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i\r\n                .test(navigator.userAgent) || window.innerWidth < 768;\r\n        this.loadGoogleMapsScript();\r\n        onChange(\"latitude\", () => {\r\n            if (this.showMapSelector) {\r\n                this.showMapSelector = false;\r\n                this.scrollToMapDraw();\r\n            }\r\n        });\r\n        state.settings.language = this.language;\r\n\r\n        const isIPhone = navigator.userAgent.indexOf(\"iPhone\") != -1;\r\n        const isMac = navigator.userAgent.indexOf(\"Mac OS\") != -1;\r\n\r\n        state.isIOS = isIPhone || isMac;\r\n        if (!this.colorScheme) {\r\n            applyThemeToElement(this.el, DEFAULT_COLOR_SCHEME);\r\n            applyThemeGlobally(DEFAULT_COLOR_SCHEME);\r\n        }\r\n        this.applyTheme();\r\n    }\r\n\r\n    @Watch(\"colorScheme\")\r\n    colorSchemeChanged() {\r\n        this.applyTheme();\r\n    }\r\n\r\n    private applyTheme() {\r\n        if (this.colorScheme) {\r\n            // Apply theme globally for non-shadow components\r\n            applyThemeGlobally(this.colorScheme);\r\n            // Apply theme to this component's Shadow DOM host element\r\n            applyThemeToElement(this.el, this.colorScheme);\r\n        }\r\n    }\r\n\r\n    private async loadGoogleMapsScript() {\r\n        try {\r\n            const loader = new Loader({\r\n                apiKey: this.apiKey,\r\n                libraries: [\"places\", \"maps\", \"marker\"],\r\n            });\r\n\r\n            const places = await loader.importLibrary(\"places\");\r\n            this.isLoaded = true;\r\n            this.initializeAutocomplete(places);\r\n        } catch (error) {\r\n            console.error(\"Error loading Google Maps: \", error);\r\n        }\r\n    }\r\n\r\n    private initializeAutocomplete(\r\n        places: google.maps.PlacesLibrary,\r\n    ) {\r\n        if (!this.inputElement || !this.isLoaded) return;\r\n        this.autocomplete = new places.Autocomplete(this.inputElement);\r\n\r\n        this.autocomplete.addListener(\"place_changed\", () => {\r\n            const place = this.autocomplete?.getPlace();\r\n            this.latitude = place?.geometry?.location?.lat() ?? 0;\r\n            this.longitude = place?.geometry?.location?.lng() ?? 0;\r\n            state.latitude = this.latitude;\r\n            state.longitude = this.longitude;\r\n\r\n            this.scrollToMapDraw();\r\n        });\r\n    }\r\n\r\n    private scrollToMapDraw() {\r\n        if (state.isMobile) {\r\n            const solarSystemFormElement = this.el.querySelector(\r\n                \"solar-system-form\",\r\n            );\r\n            if (solarSystemFormElement) {\r\n                solarSystemFormElement.scrollIntoView({ behavior: \"smooth\" });\r\n            }\r\n        } else {\r\n            const mapDrawElement = this.el.querySelector(\"map-draw\");\r\n            if (mapDrawElement) {\r\n                mapDrawElement.scrollIntoView({ behavior: \"smooth\" });\r\n            }\r\n        }\r\n    }\r\n\r\n    private handleChooseOnMap() {\r\n        this.showMapSelector = true;\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 w-full h-full p-3 m-auto\"\r\n                id=\"solar-calculator\"\r\n            >\r\n                {this.showMapSelector\r\n                    ? (\r\n                        <map-selector\r\n                            api-key={this.apiKey}\r\n                            language={this.language}\r\n                        />\r\n                    )\r\n                    : (\r\n                        <>\r\n                            <div class=\"pb-3 flex flex-row gap-4 items-stretch w-full\">\r\n                                <div class=\"relative flex-3\">\r\n                                    <div class=\"absolute left-3 top-0 h-full flex items-center text-muted-foreground pointer-events-none\">\r\n                                        <search-icon />\r\n                                    </div>\r\n                                    <input\r\n                                        ref={(el) => this.inputElement = el}\r\n                                        type=\"text\"\r\n                                        placeholder={t.solarExpert\r\n                                            .searchPlaceholder}\r\n                                        class=\"w-full pl-10 pr-4 py-2 border border-border rounded-4xl focus:ring-secondary bg-muted text-muted-foreground h-full\"\r\n                                    />\r\n                                </div>\r\n                                <button\r\n                                    onClick={() => this.handleChooseOnMap()}\r\n                                    class=\"flex-1 pl-4 pr-4 py-2 border border-border bg-muted rounded-4xl focus:ring-secondary hover:bg-secondary hover:text-muted\"\r\n                                >\r\n                                    {t.mapSelector.chooseOnMap}\r\n                                </button>\r\n                            </div>\r\n                            <map-draw\r\n                                apiKey={this.apiKey}\r\n                            />\r\n                        </>\r\n                    )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

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

@@ -3,6 +3,7 @@ import { DEFAULT_SOLAR_PANEL_TYPE } from "../../config";
 import { getLanguageStrings } from "../../utils/lang/general";
 import { state } from "../../store";
 import { generateElectricCarChargingHours, simulate, } from "../../utils/simulation/simulation";
+import { HEAT_PUMP_CONSUMPTION } from "../../constants";
 export class SolarSystemForm {
     systemConfigs = {};
     roofPolygons = {};
@@ -41,6 +42,16 @@ export class SolarSystemForm {
                 .kWattPeak;
         this.recalculate();
     }
+    formatEuropeanNumber(num, decimals = 2) {
+        const fixed = num.toFixed(decimals);
+        const [integerPart, decimalPart] = fixed.split(".");
+        // Add dots as thousands separators
+        const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+        // Join with comma as decimal separator
+        return decimalPart
+            ? `${formattedInteger},${decimalPart}`
+            : formattedInteger;
+    }
     recalculate() {
         const simulationConfig = {
             general: {
@@ -137,13 +148,13 @@ export class SolarSystemForm {
     }
     render() {
         const t = getLanguageStrings(state.settings.language);
-        return (h("div", { key: 'c58777c83db7eb4dd40579f5545a063b7b6fb524', class: "flex flex-col justify-center items-center w-full h-full pt-4" // style={{
+        return (h("div", { key: '1ae88d30fbe89d5117b06b72258eb614b5e9371d', 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: '8f6d8d53a5d39ab0a6397d9e0da03fe711752389', class: "text-2xl font-bold text-secondary mb-4 w-full" }, t.solarSystemForm.title), h("div", { key: 'cfdb4d001314ca2b6588666bdd733274e29475cf', class: "w-full bg-primary rounded-4xl p-6 space-y-6" }, h("div", { key: '0967063f18004832e3da8b4a96f0dedf4a31abad', class: "space-y-4" }, h("h2", { key: 'f4fe8c88c26999faa5a643192d04db865625df1f', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.systemInformation), h("div", { key: 'fa0cdc6da656c99373eec1d736c40d78173ae987', class: "grid grid-rows-3 gap-0" }, h("div", { key: 'a28899e64ec8bd1ad71ebeb6d53dbd7f3b8ebe3c', class: "grid grid-cols-2 gap-4" }, h("label", { key: '2cbaa3a57a884b87c8f1afd87f294bf7423797ab', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.numberOfPanels), h("label", { key: '1e7e9c015e9dbfa4ac9e4bf46c37bfd4ef4fc744', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.panelPeakPower)), h("div", { key: 'cb71e3ac0bdeaa26c6531d7713c92b570bf5916d', class: "grid grid-cols-2 gap-4" }, !this.isIOS()
+            id: "solar-system-form" }, h("h1", { key: '6be2af903cc9eab0aaade44ba5ced159debb7865', class: "text-2xl font-bold text-secondary mb-4 w-full" }, t.solarSystemForm.title), h("div", { key: 'd22714961f748004062408498d98935760fd0ba5', class: "w-full bg-primary rounded-4xl p-6 space-y-6" }, h("div", { key: '2379aa7eff17d0e5e702d5d4374fc17a7fb94ffd', class: "space-y-4" }, h("h2", { key: 'f73f73ccc7b3152b318d9e2c09cf85920a13b236', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.systemInformation), h("div", { key: '8fda12c5d7eec29418ad796112dc64f50e73eead', class: "grid grid-rows-3 gap-0" }, h("div", { key: 'd6a4a9b312299b9f9959a5844bf5b9334b998fec', class: "grid grid-cols-2 gap-4" }, h("label", { key: 'a2a7db81b5bb8e21763464ff4cff3e30bef74fc3', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.numberOfPanels), h("label", { key: 'fc9b18fcd0e8b8f4e878c40e30a22ea397294c5c', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.panelPeakPower)), h("div", { key: 'edf38f4430c8a70bd2b1f39a027657ed59ffeb18', class: "grid grid-cols-2 gap-4" }, !this.isIOS()
             ? (h("input", { type: "number", class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground", value: this.numberOfPanels, readOnly: true }))
             : (h("input", { type: "number", min: "1", max: this.maxPanels, class: "flex-1 px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground", value: this.numberOfPanels, onInput: (e) => {
                     const value = parseInt(e.target
@@ -154,36 +165,36 @@ export class SolarSystemForm {
                         this.numberOfPanels = value;
                         this.recalculate();
                     }
-                } })), h("input", { key: 'e4c9dd7bb99d64990d521ac467361b3097e2cf00', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground", value: this.panelPeakPower, readonly: true })), h("div", { key: 'e18942de97c84f26f7f4d2b7c3a1327ad3a18e7f', class: "grid grid-cols-2 gap-4" }, h("div", { key: '381937a1302d2e3ff41f4bc9535f9724ee530f7a', class: "w-full pt-2" }, !this.isIOS() &&
-            (h("input", { key: '921c140a10f9aed0af04a7d27d4fd8ad8d5d0b6c', 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) => {
+                } })), h("input", { key: '312408e6c6bbb9badf4b699606ad017e200c6e26', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground", value: this.panelPeakPower, readonly: true })), h("div", { key: 'b02e4d8355f23b0a703056797ba570aea6623ebf', class: "grid grid-cols-2 gap-4" }, h("div", { key: '00ab5e96539ce96f65dc6b612741ca87a89a527c', class: "w-full pt-2" }, !this.isIOS() &&
+            (h("input", { key: '5b892d1da7810fb107f17939469329478ff6af32', 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: '37503437e56fc85df237186080608fd81a4dc6b4', class: "bg-muted rounded-4xl p-4" }, h("div", { key: 'fcb8814774c956c2708f904e5acdcb3e92db2ed7', class: "flex items-center justify-between" }, h("span", { key: '5a6c97b4d17f8911d7712ad834a6d26191525606', class: "text-text-muted" }, t.solarSystemForm.totalSystemPeakPower), h("span", { key: '2d3cadc2f9f25ec8d007e4b05cfc6adae41ce7ab', class: "text-xl font-bold text-secondary" }, (DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *
-            this.numberOfPanels).toFixed(1), " kW")))), h("div", { key: '12925efb74638a148c07070056c8c9a8a482fe8f', class: "space-y-4" }, h("h2", { key: 'ba00a7cb660abc5d1eed941f2204b66f296b4652', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.householdConsumptionTitle), h("div", { key: 'd499fed07d0d96b195139711d7aced657ea9c836', class: "grid grid-rows-2 gap-0" }, h("div", { key: 'd3b4ccf0494101d1a8eb192d1d09812c5c3cef80', class: "grid grid-cols-2 gap-4" }, h("label", { key: '2332ef94293d829a67e63f189bd2bc725f4818a2', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.annualConsumption), h("label", { key: '6da6d21bf7fbe57c87b83f6ac20dec3c9a6fc736', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.consumptionProfileTitle)), h("div", { key: 'd56fefc25176cddb7218296e4cc85e32e9c7421e', class: "grid grid-cols-2 gap-4" }, h("input", { key: 'abe623fed5354ec916b388e7d31ad05dd9ca6108', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground", value: this.householdConsumption, onInput: (e) => {
+                } }))))), h("div", { key: '38eba0ef58b127f95e6bafcf0604e6b515db9341', class: "bg-muted rounded-4xl p-4" }, h("div", { key: '00d5d43ce80bedafe103ef31835fada196761cfa', class: "flex items-center justify-between" }, h("span", { key: '9c2500184852f0b7b4de75b1caf0a70d3c86fb7b', class: "text-text-muted" }, t.solarSystemForm.totalSystemPeakPower), h("span", { key: 'de96fd48027d7a95bb628b0455a042fee4033dad', class: "text-xl font-bold text-secondary" }, (DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *
+            this.numberOfPanels).toFixed(1), " kW")))), h("div", { key: 'e03cc455e8a3f74b33e07b25d6ad03ec02aa573c', class: "space-y-4" }, h("h2", { key: 'c76da7ecabe9c84dfb6648aa752241a3400f696c', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.householdConsumptionTitle), h("div", { key: '574a3c0b62f1e1972ae79047dc6cc2f298a4479e', class: "grid grid-rows-2 gap-0" }, h("div", { key: 'd29dda751ad3ec80253c2247db21f0d831e5ecbd', class: "grid grid-cols-2 gap-4" }, h("label", { key: '637a2bf8d0b779a9819742d1083a98f72cbdff92', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.annualConsumption), h("label", { key: '3756f091f2f85dafe6301d82789a6c69251fd2f8', class: "block text-sm font-medium text-text-muted" }, t.solarSystemForm.consumptionProfileTitle)), h("div", { key: '91822e7ef92a9297abcfe4ee0900377a26919542', class: "grid grid-cols-2 gap-4" }, h("input", { key: 'd6efc3b9d5482e8d4c4a1e212f11d4e1663781eb', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground", value: this.householdConsumption, onInput: (e) => {
                 this.householdConsumption = parseInt(e.target
                     .value);
                 this.recalculate();
-            } }), h("select", { key: 'c6a8812404e8fb8827588fd08bf3b70e43512c23', class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground", onChange: (e) => {
+            } }), h("select", { key: 'd206161ce9c8b56f6b71ff23d688d76aa87ed10e', class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground", onChange: (e) => {
                 this.consumptionProfile =
                     e.target
                         .value;
                 this.recalculate();
-            } }, h("option", { key: '53237c3fb0b685a91414a98323a1ba16deca335a', value: "mostly_at_home", selected: this.consumptionProfile ===
+            } }, h("option", { key: '3277b1fa3f7adb6761f61e120b82c0cc0afdffc2', value: "mostly_at_home", selected: this.consumptionProfile ===
                 "mostly_at_home" }, t.solarSystemForm.consumptionProfiles
-            .mostlyAtHome), h("option", { key: 'a713af601a9a122e83a7610df91dc87046c32684', value: "mostly_away", selected: this.consumptionProfile ===
+            .mostlyAtHome), h("option", { key: 'ba986968b4e63e53bbefba4551cb3d13d2631b86', value: "mostly_away", selected: this.consumptionProfile ===
                 "mostly_away" }, t.solarSystemForm.consumptionProfiles
-            .mostlyAway))))), h("div", { key: 'e22302c5432e13704827226a9348eb5135fbd168', class: "space-y-4" }, h("h2", { key: '22ff557a03b832de10382cbd9e2934f1e40f48c1', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.additionalComponents.title), h("div", { key: '8dc84f2bee4d59e5a9024b252a990a6d86729bfa', class: "flex flex-col gap-4" }, h("div", { key: 'dfa92f5717a77e1f1d2bb6549ae38ce02aaccb7c', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '70a5a4390c42cd96d5ea7238842bc9a30e387d24', class: "flex items-center justify-between" }, h("div", { key: 'c6454e366f5086e6ca7964b2d41561a4f422ed1a', class: "flex items-center gap-2" }, h("input", { key: '2e1d3ebd2908ded2959392bee1a08c268e34d612', 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: 'b1df61d9586befe53d46457fd2d0836a5b5bc697', class: "space-y-4" }, h("h2", { key: 'd24180e9bbc0d4f625154ad8bff99e23a0cb1a62', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.additionalComponents.title), h("div", { key: 'b559b111e2005d63db36e500deae0733a473aa8d', class: "flex flex-col gap-4" }, h("div", { key: '139ff7f1d6624ca6fd31a155c36729be21e1f8b0', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '3db4013aaa29485966b13231e35d34f300abfc1b', class: "flex items-center justify-between" }, h("div", { key: '2fbd022c9d21c798308d713392224a7161a18799', class: "flex items-center gap-2" }, h("input", { key: '379f28e54b9cb06be1e6581cee9bfe280de5c15b', 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: '11a45cadaf1bc2c8661da788eca3c7d0e2560e13', htmlFor: "heatPump", class: "text-text-muted" }, t.solarSystemForm
+            } }), h("label", { key: 'a4ae005639f2703c4c3ba336404fa0e19822f5d3', htmlFor: "heatPump", class: "text-text-muted" }, t.solarSystemForm
             .additionalComponents
-            .heatPump)), (this.heatPump > 0 && !this.isIOS()) && (h("span", { key: '1f8bd12df9d5e0357afd755c83d1cf592b6b5384', class: "text-text-muted" }, this.heatPump, " m\u00B2"))), this.heatPump > 0 && (h("div", { key: '1fdd01ffe44f75daf94e5c9b716519d1636f6e3a', class: "flex flex-col gap-2" }, this.isIOS()
+            .heatPump)), (this.heatPump > 0 && !this.isIOS()) && (h("span", { key: '54d4a2e5fe6cd0cbccc8d87f0199a6e241ff9b72', class: "text-text-muted" }, this.heatPump, " m\u00B2"))), this.heatPump > 0 && (h("div", { key: 'be90b9492b1ae91b49564e646f46b7f80c766ad4', 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 border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", style: {
                     border: "1px solid var(--color-border)",
                 }, value: this.heatPump, onInput: (e) => {
@@ -201,41 +212,41 @@ export class SolarSystemForm {
                         parseInt(e.target
                             .value);
                     this.recalculate();
-                } }))))), h("div", { key: '94b4d3e5d6bea8994012b3500160780796338202', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '880a456c5d9916a467be761ffb6d48a0ac702095', class: "flex items-center justify-between" }, h("div", { key: '7ee0b35d4b616af184dd94ec11e2e5cba538aacd', class: "flex items-center gap-2" }, h("input", { key: 'cebabbd261270049b52c3e471e8a02588c41af5f', 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: '5a15fbb22033d5bf3aa17412318e5caba273409f', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '14c992b960da894105afe998908091f71d8e9556', class: "flex items-center justify-between" }, h("div", { key: 'c620cfc146bfe4dfb963c8f4fe9f7da6b8fb03b7', class: "flex items-center gap-2" }, h("input", { key: 'ca46124ad41d16279663a58ec486ccd5869601ef', 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: 'a922eeb0abc8731c0410c308a3ea55d93961dfaf', htmlFor: "electricCar", class: "text-text-muted" }, t.solarSystemForm
+            } }), h("label", { key: 'dd5f3537a4f0b436b4b84e20726ecd95694df4a4', htmlFor: "electricCar", class: "text-text-muted" }, t.solarSystemForm
             .additionalComponents
-            .electricCar))), this.electricCar && (h("div", { key: '0c78c7f3176a0f6ab9c41c9876cf1a035877c798', class: "flex flex-col gap-2" }, h("div", { key: '722f0f8c09f037d75c7721c0bd7141da781f3c0c', class: "grid grid-cols-2 gap-4" }, h("label", { key: '258ee50ded063df8322520e2fdc7c7891b673c66', class: "text-sm text-text-muted" }, t.solarSystemForm
+            .electricCar))), this.electricCar && (h("div", { key: '3d8faac9b29457cabaef3e82fd490d7669c2ed79', class: "flex flex-col gap-2" }, h("div", { key: 'fd885be1fd003f9724398f97ea459144738cbc90', class: "grid grid-cols-2 gap-4" }, h("label", { key: 'bcfd46f61643c0d5c4a9c93e990ff6be4937efc2', class: "text-sm text-text-muted" }, t.solarSystemForm
             .additionalComponents
-            .chargingTime), h("label", { key: '7ae9cfa77cd8ced89d1598ef09fcc4772133695e', class: "text-sm text-text-muted" }, t.solarSystemForm
+            .chargingTime), h("label", { key: 'acd1b8541b5d814e81949d06d2d1d56cc872fbd3', class: "text-sm text-text-muted" }, t.solarSystemForm
             .additionalComponents
-            .kilometersPerYear)), h("div", { key: '1f9244bd861b20278eec8cbca21cf611a7b923f6', class: "grid grid-cols-2 gap-4" }, h("select", { key: '39022b4df361b6efb4f57057b27dc5419cc533be', class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", onChange: (e) => {
+            .kilometersPerYear)), h("div", { key: '1a9772ff5b6b4f3285afea70d9d5953bd3501d02', class: "grid grid-cols-2 gap-4" }, h("select", { key: 'd45e7979f476bd3afe2ef3a62107240b053f9bbb', class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", onChange: (e) => {
                 this.electricCarChargingTime =
                     e.target
                         .value;
                 this.recalculate();
             }, style: {
                 border: "1px solid var(--color-border)",
-            } }, h("option", { key: '3ac38d888755fe1ff1bbcdee4ac2ecbfbd51b8a6', value: "day", selected: this
+            } }, h("option", { key: 'c23713921e55368b7f4013503c1aa422dea05fd0', value: "day", selected: this
                 .electricCarChargingTime ===
                 "day" }, t.solarSystemForm
             .additionalComponents
-            .chargingTimeDay), h("option", { key: 'a6a8cca9b5f127aa4331cc412ea56da2ddfa480e', value: "night", selected: this
+            .chargingTimeDay), h("option", { key: '67f440a8ba935e56098aae561f7f338dab01b219', value: "night", selected: this
                 .electricCarChargingTime ===
                 "night" }, t.solarSystemForm
             .additionalComponents
-            .chargingTimeNight)), h("input", { key: 'd44e83a3e68f29ffbcc8c21132c3c357f4025eba', type: "number", min: "1000", max: "50000", step: "1000", class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", value: this.kmDrivenPerYear, onInput: (e) => {
+            .chargingTimeNight)), h("input", { key: '5d819884df9ba63f940a88bfd0d9d36fc988e56e', type: "number", min: "1000", max: "50000", step: "1000", class: "w-full px-4 py-2 rounded-4xl border border-border 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: {
                 border: "1px solid var(--color-border)",
-            } }))))), h("div", { key: '78887c816adeaeecd3503953e6079678ea5ffa8a', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '0f4e2b348c0e7e7789c7a2badfbddfbb668e4842', class: "flex items-center justify-between" }, h("label", { key: '5eaa71f1ae5a7c08bdbd3ee1b8ea18767738b9f0', class: "text-text-muted" }, t.solarSystemForm.additionalComponents
-            .battery), !this.isIOS() && (h("span", { key: 'f627ed9f5b6004bedfc99fed880701783e1f6b8c', class: "text-text-muted" }, this.battery, " kWh"))), h("div", { key: 'ae29676644ea5884897912332204f8df2edcc913', class: "flex flex-col gap-2" }, this.isIOS()
+            } }))))), h("div", { key: '0a5d7fbfc2abc407c28d189b60a06df9eff66b1a', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, h("div", { key: '6996b502573c22718ebf8668382700e8b1a52e9b', class: "flex items-center justify-between" }, h("label", { key: '6b1bc5859ad5dd7c40726f5e04a41b5470afa20e', class: "text-text-muted" }, t.solarSystemForm.additionalComponents
+            .battery), !this.isIOS() && (h("span", { key: 'b9a2629a617c204f9064b447b13e978e2df0e71b', class: "text-text-muted" }, this.battery, " kWh"))), h("div", { key: '75726ee7956ee611de845ea2349713e3a156c4f2', class: "flex flex-col gap-2" }, this.isIOS()
             ? (h("div", { class: "flex items-center gap-2" }, h("input", { type: "number", min: "0", max: "20", step: "1", class: "flex-1 px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", value: this.battery, onInput: (e) => {
                     const value = parseInt(e.target
                         .value);
@@ -252,41 +263,55 @@ export class SolarSystemForm {
                     this.battery = parseInt(e.target
                         .value);
                     this.recalculate();
-                } })))))), h("div", { key: '3ff4f76e3998594832541e7c29b62fd066eb6b93', class: "space-y-4" }, h("h2", { key: '0d699ce4651eafa967464bd2d514e33e7d7594f5', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.electricityCostsTitle), h("div", { key: '2fbf7001ef764bbdfcebb68aee462b9015740e42', class: "grid grid-rows-2 gap-0" }, h("div", { key: '822c1a7ebde43a0e82d8e85a738f7c6d71d59312', class: "grid grid-cols-3 gap-4" }, h("label", { key: '7037f5005c69ca0fc06706190b2a14b0e65d0bab', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.electricityPrice), h("label", { key: 'c57af75b004add729b4ddddc118534b2fdb783bf', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.compensationRate), h("label", { key: 'd28f0391fc0e52f6a6bbe454302afd54493be80b', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.annualPriceIncrease)), h("div", { key: '237e6d85d909b1b08d00cdc3ce3c340513c9ffd8', class: "grid grid-cols-3 gap-4 text-primary-foreground" }, h("input", { key: '59ac48fca752b9fb654342ec2bde43599a8451b4', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", value: this.electricityPrice.toFixed(2), onInput: (e) => {
+                } })))))), h("div", { key: 'ead8323aa774b23dc250685fb1e790b239070166', class: "space-y-4" }, h("h2", { key: '1eba342b1d3b4dfd7bd1173fa7381825d3070bd2', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.electricityCostsTitle), h("div", { key: '14baaadcb93e5ee4076a5565156ca48620801dac', class: "grid grid-rows-2 gap-0" }, h("div", { key: '6355241c7a8b27e1c0eb39b5b678286c7e039e64', class: "grid grid-cols-3 gap-4" }, h("label", { key: '2617defe06150d2e67e9470950ae3073af947a92', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.electricityPrice), h("label", { key: '188ce676aa0c1e528a11718068080a68257bf99e', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.compensationRate), h("label", { key: '850a4ef204bb9487ec6385e17bb0c06a063dd53c', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.annualPriceIncrease)), h("div", { key: '4f6ff1e0a3147984cd000946017619c838016f12', class: "grid grid-cols-3 gap-4 text-primary-foreground" }, h("input", { key: 'bb173e355fb17bc3c760342c16b1d28a2293c9d1', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", value: this.electricityPrice.toFixed(2), onInput: (e) => {
                 this.electricityPrice = parseFloat(e.target
                     .value);
                 this.recalculate();
-            } }), h("input", { key: '3644ceacd7733d2f74ffc5891522d4dd1ab67851', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", value: this.compensationRate.toFixed(2), onInput: (e) => {
+            } }), h("input", { key: 'f75ea4cfad61746c716a985ec3edf8dd93700dea', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", value: this.compensationRate.toFixed(2), onInput: (e) => {
                 this.compensationRate = parseFloat(e.target
                     .value);
                 this.recalculate();
-            } }), h("input", { key: '8e453b5b7665c51a5bb8160132bbcc8da5bf5159', type: "number", step: "0.1", class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", value: this.annualPriceIncrease.toFixed(1), onInput: (e) => {
+            } }), h("input", { key: '34ad225b5da90c29d595680369a683236b018b4f', type: "number", step: "0.1", class: "w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted", value: this.annualPriceIncrease.toFixed(1), onInput: (e) => {
                 this.annualPriceIncrease = parseFloat(e.target
                     .value);
                 this.recalculate();
-            } })))), h("div", { key: '4282852c39dde81bdf5b54ad8ea4e0a8aefaaf18', class: "space-y-4 p-4 border border-border rounded-4xl", style: {
+            } })))), h("div", { key: 'be3c737cf611997409562b6328f0becfce6eee56', class: "space-y-4 p-4 border border-border rounded-4xl", style: {
                 border: "1px solid var(--color-border)",
-            } }, h("h2", { key: '7fcfd93db114602d3c1250c0b9ad5c106e2118d0', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.resultsTitle), h("div", { key: 'aa0da43f3ef2daf8f9b3bb83e15493300dd3d795', class: "bg-muted rounded-4xl p-4" }, h("div", { key: '82b9f95d27582a7e6fabc92b5f8c4f94a7760773', class: "flex items-center justify-between" }, h("span", { key: 'ac3a20954389eafb4222de55a9c380c6e6911822', class: "text-text-muted" }, t.solarSystemForm.autonomy), h("span", { key: '42573f1d642adc6e7d81c2205d64659fd5690ec6', class: "text-xl font-bold text-secondary" }, this.autonomy > 100
+            } }, h("h2", { key: 'd85e0b1968326cbfa47ba2447cd625b5e801933b', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.resultsTitle), h("div", { key: '44e90f2bf38d401df3fba4047bf6015c01c00e73', class: "bg-muted rounded-4xl p-4" }, h("div", { key: '10f2c095e5970d55e197d3e2d5121e1b12c82ac8', class: "flex items-center justify-between" }, h("span", { key: '6671e18dc641d84640d35395ad9d3ed4ee35fcd4', class: "text-text-muted" }, t.solarSystemForm.autonomy), h("span", { key: '89c304d23420e6daa3d046640df30d8a0af1eb46', class: "text-xl font-bold text-secondary" }, this.autonomy > 100
             ? "100"
-            : this.autonomy.toFixed(1), "%")), h("div", { key: '7b7ca03f694682ada5f3156e065ffbebfe8a162e', class: "flex items-center justify-between mt-4" }, h("div", { key: '39f1d25e85ab1f3ff1ab9f06874cb1e3178f1707', class: "flex items-center gap-2" }, h("span", { key: '0c62c76a68fa8532240fe28333c1ce592ddc6787', class: "text-text-muted" }, t.solarSystemForm.costSavings), h("div", { key: 'fc6baa108a6fc38d70562d147488085c17b3376b', class: "relative group" }, h("svg", { key: 'd6806679a14d75f3e9ef72bd3ac352855f8b30ae', 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: '9033bbf13fa59641816338bca9ea3c2272b5dcc0', "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: '1fad5e3281d00c91bdb0a112e98279d5107ed76c', class: "absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-64 p-2 bg-gray-800 text-muted text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none" }, t.solarSystemForm
-            .savingsDisclaimer))), h("span", { key: 'a99bd5d3f22f39fbfce522e6e8b9fa65d1fc1785', class: "text-xl font-bold text-success" }, this.costSavings.toFixed(2), "\u20AC/", t
-            .solarSystemForm.year)), h("div", { key: '8aeb935408cfa36788a5396dd8a0719e93216721', class: "flex items-center justify-between mt-4" }, h("div", { key: 'aa778aabdfe02aeea72ef37a0087cfb03adbef3d', class: "flex items-center gap-2" }, h("span", { key: '4bc1dd985b07e229c3293db4c4f3be74bd885cec', class: "text-text-muted" }, "Einspeiseverg\u00FCtung 25 Jahre")), h("span", { key: '4eb548881579db3bdffcf5c0bcd0630c19b6961e', class: "text-xl font-bold text-success" }, this.compensation25Years.toFixed(2), "\u20AC")), h("div", { key: '00d848e65e0a13d7278ca1cef2a8a6c0810cef08', class: "flex items-center justify-between mt-4" }, h("div", { key: 'e33274627fa4a5d71b35bbc030212810cd1ecc15', class: "flex items-center gap-2" }, h("span", { key: '45fb735ec260bbea7ad6101f7aacac4e7a1f3313', class: "text-text-muted" }, "Geldwerter Vorteil 25 Jahre")), h("span", { key: '2d7bc5f25a4491e00a1985c9bf255abdaef729dd', class: "text-xl font-bold text-success" }, this.savedCosts25Years.toFixed(2), "\u20AC")))), h("div", { key: '603eafb9e819e4a2da8f919c2de5a7e7ed7b6ac9', class: "space-y-4 pt-4" }, h("h2", { key: '50de58cd408c63518a3a1aeebc2168e603f8f537', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.requestOffer), h("div", { key: 'cc85f1661fba68643d3f043ff51b1c2070e5d32a', class: "grid gap-4" }, h("div", { key: '54040b2ac5cb46fc2bbdabdfb78f1d25fa521b2d', class: "grid grid-cols-2 gap-4" }, h("label", { key: '9404270bfbd58d022fafff6646ff1dbf68352617', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.name), h("label", { key: 'ee3bb80e18b29446630d10f49e94d3ce8e8e3f46', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.email)), h("div", { key: '298da00d7046b6437b175f3eb8859281392d75dd', class: "grid grid-cols-2 gap-4" }, h("div", { key: '31b01646d5370285c8dc0d5470643cd679f1eaee' }, h("input", { key: '27764cb15c5150f8ddd5c50b7559fe807014d021', type: "text", class: `w-full px-4 py-2 rounded-4xl border ${this.nameError
+            : this.formatEuropeanNumber(this.autonomy, 1), "%")), h("div", { key: '3629db34720f0053aaca70a6ee61ffb2a0c1b446', class: "flex items-center justify-between mt-4" }, h("span", { key: '91d347389c7e63b0d639d1bbc03f970cef92dc2b', class: "text-text-muted" }, t.solarSystemForm.totalEnergyConsumption), h("span", { key: 'd31714768be7b21f3470ee1e90dff8f4c6484b79', class: "text-xl font-bold text-secondary" }, (() => {
+            let total = this.householdConsumption;
+            // Add electric car consumption: km/year * 17kWh/100km
+            if (this.electricCar) {
+                total +=
+                    (this.kmDrivenPerYear * 17) /
+                        100;
+            }
+            // Add heat pump consumption: m2 * 60kWh/m2/year (typical estimate)
+            if (this.heatPump > 0) {
+                total += this.heatPump *
+                    HEAT_PUMP_CONSUMPTION * 365;
+            }
+            return this.formatEuropeanNumber(total, 0);
+        })(), " kWh/", t.solarSystemForm.year)), h("div", { key: 'ff25e0aa4e9e0d240da27798344cecd87a50a980', class: "flex items-center justify-between mt-4" }, h("div", { key: '1bb0704dcbe48cee6059e9434d70a8bc41942664', class: "flex items-center gap-2" }, h("span", { key: 'cdccfd451a6e8658c2a0fe94d7cee4f091883aa8', class: "text-text-muted" }, t.solarSystemForm.costSavings), h("div", { key: '0f1126a6e4c08447c8fc58632efdb15a910d14a2', class: "relative group" }, h("svg", { key: '001578216fc70a81618354955c8566334ddd8537', 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: '23fa0cf5f2cd0cdfc8de271194e7ca88a0daed0b', "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: 'a1aa7e03d52fe658462e32df3e533c502827f7a7', class: "absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-64 p-2 bg-gray-800 text-muted text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none" }, t.solarSystemForm
+            .savingsDisclaimer))), h("span", { key: '56375d976935a662e6d2511cad3d5834c120df3f', class: "text-xl font-bold text-success" }, this.formatEuropeanNumber(this.costSavings), "\u20AC/", t
+            .solarSystemForm.year)), h("div", { key: 'cd828e6c6926daab2233cedf4305e2fdb97be676', class: "flex items-center justify-between mt-4" }, h("div", { key: '0795d59077e5b0c797f057e031831cee8534c3c9', class: "flex items-center gap-2" }, h("span", { key: '6f48091f7555b8a325ad09738ac0cdb31e865154', class: "text-text-muted" }, "Einspeiseverg\u00FCtung 25 Jahre")), h("span", { key: 'f7791292253c6806157551d30170e4688ed3458a', class: "text-xl font-bold text-success" }, this.formatEuropeanNumber(this.compensation25Years), "\u20AC")), h("div", { key: '27c89b500a48af7f669ebaa0b489d94b976686e2', class: "flex items-center justify-between mt-4" }, h("div", { key: '21626f89fe1fd478b6ebf8dc28d98e9078e184ce', class: "flex items-center gap-2" }, h("span", { key: '157a25f00e437addc545785cb2238a61f23778cd', class: "text-text-muted" }, "Geldwerter Vorteil 25 Jahre")), h("span", { key: '450ca4a9726b877821b18efdb0f78993d43783be', class: "text-xl font-bold text-success" }, this.formatEuropeanNumber(this.savedCosts25Years), "\u20AC")))), h("div", { key: '27f91849d3fd0fa188dfb3303c5088fbb31477f6', class: "space-y-4 pt-4" }, h("h2", { key: '1fb4615d9f7fc7499796ff4bfc1f94de06347230', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.requestOffer), h("div", { key: 'b0fc51a1e23c8e6d888f52cb6c348ef87e0c021d', class: "grid gap-4" }, h("div", { key: 'dbc8276df0f39e6206cafad9ee78198bba4231a2', class: "grid grid-cols-2 gap-4" }, h("label", { key: '17f832a75bf26e206baf332a852e9918287ceddd', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.name), h("label", { key: 'c5f51ed3415cee24796980972003cb9d3d67377f', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.email)), h("div", { key: 'aca926ba4957bc3f49c078ee26c187b2fa2e09c5', class: "grid grid-cols-2 gap-4" }, h("div", { key: 'bf67470f202a91c87794b9f524be7d6f8798a9d6' }, h("input", { key: 'e0ef0652f15c0b8131be5c08ab7e676053723403', type: "text", class: `w-full px-4 py-2 rounded-4xl border ${this.nameError
                 ? "border-error"
                 : "border-border"} focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`, value: this.name, onInput: (e) => {
                 this.name =
                     e.target
                         .value;
                 this.validateForm();
-            }, placeholder: "Your name" }), this.nameError && (h("p", { key: 'fa62eac9fc7f58f4b0505dc8398ae7447524ac4f', class: "text-error text-sm mt-1" }, this.nameError))), h("div", { key: '936b2091fc5f889f7c98f3bbe9c783ebfcf97030' }, h("input", { key: 'd7f4bf93bee30c5dc47c14143c527be562ccdbfd', type: "email", class: `w-full px-4 py-2 rounded-4xl border ${this.emailError
+            }, placeholder: "Your name" }), this.nameError && (h("p", { key: '4f4b48a763a00e0c3b01a7fb0114f34b233c0fd3', class: "text-error text-sm mt-1" }, this.nameError))), h("div", { key: 'c8ab7002857c3826009860ab2ebf9d87c1bde1b7' }, h("input", { key: 'd8b3df2653a9e8391f3322498757393342f2a86d', type: "email", class: `w-full px-4 py-2 rounded-4xl border ${this.emailError
                 ? "border-error"
                 : "border-border"} focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`, value: this.email, onInput: (e) => {
                 this.email =
                     e.target
                         .value;
                 this.validateForm();
-            }, placeholder: "your.email@example.com" }), this.emailError && (h("p", { key: '32c8ca2e1de772c5c2072f52827393e0aad287f2', class: "text-error text-sm mt-1" }, this.emailError))))), h("div", { key: '5ac2456b1e783e86d21405db8b34ee22ad5e88f3', class: "flex justify-center" }, h("button", { key: 'f4b4e6d7490e01a29e4065747fe64dec7ca06f37', onClick: () => this.handleRequestOffer(), disabled: !this.name.trim() ||
+            }, placeholder: "your.email@example.com" }), this.emailError && (h("p", { key: '8f1b0cfb3251e70294e5f67c461013ea935c11dc', class: "text-error text-sm mt-1" }, this.emailError))))), h("div", { key: 'eb74ae3147ff1d072050658b17016f6d03a29f35', class: "flex justify-center" }, h("button", { key: '448e329bde1237be4e2fbd12dd98ad36a9a558e3', onClick: () => this.handleRequestOffer(), disabled: !this.name.trim() ||
                 !this.email.trim() || !!this.nameError ||
-                !!this.emailError, class: "px-4 py-2 bg-secondary rounded-4xl hover:bg-tertiary transition-colors duration-200 text-muted" }, t.solarSystemForm.requestOfferButton))))));
+                !!this.emailError, class: "px-4 py-2 bg-secondary rounded-4xl hover:bg-tertiary transition-colors duration-200", style: { color: "var(--color-muted)" } }, t.solarSystemForm.requestOfferButton))))));
     }
     static get is() { return "solar-system-form"; }
     static get originalStyleUrls() {