blue-chestnut-solar-expert 0.0.31 → 0.0.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/eraser-icon.house-icon.icon-selector.map-draw.map-selector.move-icon.octagon-minus-icon.polygon-buttons.polygon-information.search-icon.settings-icon.settings-modal.solar-expert.solar-system-form.tool-box.undo-icon.entry.cjs.js.map +1 -1
- package/dist/cjs/eraser-icon_16.cjs.entry.js +117 -61
- package/dist/cjs/eraser-icon_16.cjs.entry.js.map +1 -1
- package/dist/collection/components/map-draw/map-draw.js +7 -7
- package/dist/collection/components/map-draw/map-draw.js.map +1 -1
- package/dist/collection/components/solar-expert/solar-expert.js +12 -4
- package/dist/collection/components/solar-expert/solar-expert.js.map +1 -1
- package/dist/collection/components/solar-system-form/solar-system-form.js +35 -25
- package/dist/collection/components/solar-system-form/solar-system-form.js.map +1 -1
- package/dist/collection/config.js +31 -0
- package/dist/collection/config.js.map +1 -1
- package/dist/collection/utils/theme.js +34 -26
- package/dist/collection/utils/theme.js.map +1 -1
- package/dist/components/map-draw.js +1 -1
- package/dist/components/{p-r9wMCtI3.js → p-ClYOM_0b.js} +10 -10
- package/dist/components/{p-r9wMCtI3.js.map → p-ClYOM_0b.js.map} +1 -1
- package/dist/components/{p-ao6bHDbv.js → p-CrzEBN9H.js} +69 -28
- package/dist/components/p-CrzEBN9H.js.map +1 -0
- package/dist/components/solar-expert.js +46 -31
- package/dist/components/solar-expert.js.map +1 -1
- package/dist/components/solar-system-form.js +1 -1
- package/dist/esm/eraser-icon.house-icon.icon-selector.map-draw.map-selector.move-icon.octagon-minus-icon.polygon-buttons.polygon-information.search-icon.settings-icon.settings-modal.solar-expert.solar-system-form.tool-box.undo-icon.entry.js.map +1 -1
- package/dist/esm/eraser-icon_16.entry.js +117 -61
- package/dist/esm/eraser-icon_16.entry.js.map +1 -1
- package/dist/stencil-library/eraser-icon.house-icon.icon-selector.map-draw.map-selector.move-icon.octagon-minus-icon.polygon-buttons.polygon-information.search-icon.settings-icon.settings-modal.solar-expert.solar-system-form.tool-box.undo-icon.entry.esm.js.map +1 -1
- package/dist/stencil-library/p-3d7da486.entry.js +2 -0
- package/dist/stencil-library/p-3d7da486.entry.js.map +1 -0
- package/dist/stencil-library/stencil-library.esm.js +1 -1
- package/dist/types/config.d.ts +1 -0
- package/dist/types/utils/theme.d.ts +7 -0
- package/package.json +1 -1
- package/dist/components/p-ao6bHDbv.js.map +0 -1
- package/dist/stencil-library/p-141320bb.entry.js +0 -2
- package/dist/stencil-library/p-141320bb.entry.js.map +0 -1
|
@@ -507,6 +507,37 @@ const DEFAULT_SOLAR_PANEL_TYPE = {
|
|
|
507
507
|
efficiency: 0.224,
|
|
508
508
|
price: 77.68,
|
|
509
509
|
};
|
|
510
|
+
const DEFAULT_COLOR_SCHEME = {
|
|
511
|
+
primary: "hsl(41 51% 90%)",
|
|
512
|
+
primaryForeground: "hsl(0 0% 0%)",
|
|
513
|
+
secondary: "hsl(28 100% 8%)",
|
|
514
|
+
secondaryForeground: "hsl(0 0% 100%)",
|
|
515
|
+
tertiary: "hsl(28 100% 29%)",
|
|
516
|
+
tertiaryForeground: "hsl(0 0% 100%)",
|
|
517
|
+
muted: "hsl(0 0% 100%)",
|
|
518
|
+
mutedForeground: "hsl(0 0% 0%)",
|
|
519
|
+
error: "hsl(0 100% 50%)",
|
|
520
|
+
errorForeground: "hsl(0 0% 100%)",
|
|
521
|
+
// Surface colors
|
|
522
|
+
surface: "hsl(0 0% 88%)", // gray-200
|
|
523
|
+
surfaceHover: "hsl(0 0% 82%)", // gray-300
|
|
524
|
+
surfaceActive: "hsl(0 0% 64%)", // gray-400
|
|
525
|
+
// Text colors
|
|
526
|
+
textMuted: "hsl(0 0% 45%)", // gray-600
|
|
527
|
+
textSecondary: "hsl(0 0% 55%)", // gray-500
|
|
528
|
+
textPlaceholder: "hsl(0 0% 73%)", // gray-400
|
|
529
|
+
// Border colors
|
|
530
|
+
border: "hsl(0 0% 82%)", // gray-300
|
|
531
|
+
borderLight: "hsl(0 0% 93%)", // gray-200
|
|
532
|
+
// Status colors
|
|
533
|
+
success: "hsl(142 76% 36%)", // green-600
|
|
534
|
+
info: "hsl(221 83% 53%)", // blue-500
|
|
535
|
+
// Interactive colors
|
|
536
|
+
hover: "hsl(0 0% 88%)", // gray-200
|
|
537
|
+
hoverDark: "hsl(28 100% 8%)", // darker secondary for hover
|
|
538
|
+
overlay: "rgba(0, 0, 0, 0.24)", // #0000003c
|
|
539
|
+
tooltip: "hsl(0 0% 13%)", // gray-800
|
|
540
|
+
};
|
|
510
541
|
|
|
511
542
|
function getFillColor(selectedPolygon, hoveredPolygon, _id, polygon, config) {
|
|
512
543
|
const isHovered = hoveredPolygon?.type === polygon.type && hoveredPolygon?._id === _id;
|
|
@@ -2239,22 +2270,22 @@ const MapDraw = class {
|
|
|
2239
2270
|
render() {
|
|
2240
2271
|
const t = getLanguageStrings(state.settings.language);
|
|
2241
2272
|
const currentPolygon = this.getCurrentPolygon();
|
|
2242
|
-
return (index.h("div", { key: '
|
|
2273
|
+
return (index.h("div", { key: 'ebe7e96014e7ecb78818096b9cb391f07b9d06ec', class: "flex flex-col justify-center items-center w-full h-full gap-4", id: "map-draw" }, this.showInstructions && !state.isMobile && (index.h("div", { key: '70722b3127cefe195ccc74ab758de6ef8e032fde', class: "w-full rounded-4xl p-4 bg-muted text-muted-foreground" }, t.mapDraw.instructions.parts.roof, " ", index.h("button", { key: '10761447b11b001d74eb7386bdf0be80d53e091b', class: "inline-flex items-center justify-center p-1 rounded-full hover:bg-surface-hover transition-colors", onClick: () => this.handleToolSelect(roofTool) }, index.h("icon-selector", { key: '4e5ac604551002d38b1c44b35de01c37412c74e6', name: "house", inline: true })), " ", t.mapDraw.instructions.parts.obstruction, " ", index.h("button", { key: '9dc52e0b6006a10221834c8a9d83234f9db0d319', class: "inline-flex items-center justify-center p-1 rounded-full hover:bg-surface-hover transition-colors", onClick: () => this.handleToolSelect(obstructionTool) }, index.h("icon-selector", { key: '39ab111d5647f9981a5f5f91c45d925d46e3283d', name: "octagon-minus", inline: true })), " ", t.mapDraw.instructions.parts.delete, " ", index.h("button", { key: '8ad5281af91d5ee5597f957f59cd37027fbd505a', class: "inline-flex items-center justify-center p-1 rounded-full hover:bg-surface-hover transition-colors", onClick: () => this.handleToolSelect(deleteTool) }, index.h("icon-selector", { key: '096b570b0ffa3bda667157d960ed89193a1caa12', name: "eraser", inline: true })), " ", t.mapDraw.instructions.parts.move, " ", index.h("button", { key: 'f1cbb3cbf71b13be266abdd049c2fd9b89cde715', class: "inline-flex items-center justify-center p-1 rounded-full hover:bg-surface-hover transition-colors", onClick: () => this.handleToolSelect(moveTool) }, index.h("icon-selector", { key: 'd9c6ba2268ab4a175ec15260f22bb03b19b8255a', name: "move", inline: true })), " ", t.mapDraw.instructions.parts.end)), index.h("div", { key: '10ac3758660b337a60934def1c9f2f35f36e60c5', class: "w-full flex flex-row justify-between items-center" }, !state.isMobile && (this.showInstructions
|
|
2243
2274
|
? (index.h("button", { class: "px-4 py-2 rounded-4xl hover:bg-surface-hover transition-colors duration-200 bg-muted p-4 text-muted-foreground", onClick: () => this.showInstructions = false }, t.mapDraw.instructions.hide))
|
|
2244
|
-
: (index.h("button", { class: "px-4 py-2 rounded-4xl hover:bg-surface-hover transition-colors duration-200 bg-muted p-4 text-muted-foreground", onClick: () => this.showInstructions = true }, t.mapDraw.instructions.show))), index.h("button", { key: '
|
|
2245
|
-
this.loadingState === "loading") && (index.h("div", { key: '
|
|
2275
|
+
: (index.h("button", { class: "px-4 py-2 rounded-4xl hover:bg-surface-hover transition-colors duration-200 bg-muted p-4 text-muted-foreground", onClick: () => this.showInstructions = true }, t.mapDraw.instructions.show))), index.h("button", { key: 'e88a3957add7e0c36222962266913148020a2dee', class: "flex items-center gap-2 bg-muted p-2 rounded-4xl hover:bg-surface-hover text-muted-foreground", onClick: this.handleSettingsClick }, index.h("settings-icon", { key: '31df69629e4309e8d95e939a04c2dbba1fbc03ed' }))), index.h("div", { key: 'f724a52fefacbe5b60bd165de16f56ed345dfd11', class: "w-full" }, !state.isMobile && (index.h("tool-box", { key: 'd2477fcbd40d1a446f65bc2b42157006dde73acb', currentTool: this.currentTool, onToolSelect: (tool) => this.handleToolSelect(tool), undoCallback: () => this.undo() }))), this.loadingState === "empty" && (index.h("div", { key: '964f8012fae92090fad9b52f7dd664a7359e4365', class: "w-full" }, index.h("p", { key: '6adde4c4f3e24ed586f43d3f162f60fa5612bcce', class: "text-muted text-center flex items-center justify-center rounded-4xl p-4 w-full bg-text-secondary" }, t.mapDraw.noAddressSelected))), (state.latitude && state.longitude &&
|
|
2276
|
+
this.loadingState === "loading") && (index.h("div", { key: 'c0dfd656c2633f0c49a2ecb26d15550eba64ffb5', class: "flex items-center justify-center w-full bg-opacity-75 z-20 pt-7 rounded-4xl" }, index.h("div", { key: 'abe70b554757acd75988d439c6877af09f198d29', class: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-secondary" }))), index.h("div", { key: '624e94cb3969d04ee6026353616ca39e772d1129', class: "flex items-start justify-center h-full w-full bg-primary rounded-4xl" }, index.h("div", { key: '43d96ad059a8b085f0d3b1a1fa6e1521da87410c', class: "relative h-full flex items-center justify-center w-full rounded-4xl bg-secondary", style: {
|
|
2246
2277
|
aspectRatio: this.rgbTiff
|
|
2247
2278
|
? `${this.rgbTiff.width}/${this.rgbTiff.height}`
|
|
2248
2279
|
: "1/1",
|
|
2249
|
-
} }, index.h("canvas", { key: '
|
|
2280
|
+
} }, index.h("canvas", { key: '4b67bc938bcb9b25b4a52dd163fdba1a70324e63', ref: (el) => this.canvasElement = el, class: "absolute top-0 left-0 w-full h-full rounded-4xl", id: "map-draw-canvas", style: {
|
|
2250
2281
|
cursor: this.currentTool.cursor,
|
|
2251
|
-
} }), index.h("canvas", { key: '
|
|
2282
|
+
} }), index.h("canvas", { key: '2d549095d5a3af42a109ce043fd357d14309e311', ref: (el) => this.polygonCanvas = el, class: "absolute top-0 left-0 w-full h-full rounded-4xl", style: {
|
|
2252
2283
|
cursor: this.currentTool.cursor,
|
|
2253
|
-
} }))), currentPolygon?.closed && (index.h("div", { key: '
|
|
2284
|
+
} }))), currentPolygon?.closed && (index.h("div", { key: '8519b6421d6ef36672504f7d120bf170d7dbd6f0', class: "w-full" }, index.h("polygon-buttons", { key: '21e7b96ddb3d2a6add87d41a314a89d702a4dd42', currentTool: this.currentTool.name, calculateSolarPanels: () => this.calculateSolarPanels(), selectEdgeTool: () => this.handleToolSelect(markRoofEdgeTool) }))), !state.isMobile && (index.h("div", { key: '265211ded512cbe17a9aed997b439011b4d0b982', class: "w-full" }, index.h("polygon-information", { key: '923dd819af422124d5171a1199a2e852a466f54e', currentPolygon: currentPolygon, positionedPanels: currentPolygon
|
|
2254
2285
|
? this
|
|
2255
2286
|
.roofPolygonsSolarPanels[currentPolygon._id]
|
|
2256
2287
|
?.positionedPanels
|
|
2257
|
-
: undefined, handleAzimuthChange: (event) => this.handleAzimuthChange(event), handlePitchChange: (event) => this.handlePitchChange(event), calculateSolarPanels: () => this.calculateSolarPanels() }))), index.h("div", { key: '
|
|
2288
|
+
: undefined, handleAzimuthChange: (event) => this.handleAzimuthChange(event), handlePitchChange: (event) => this.handlePitchChange(event), calculateSolarPanels: () => this.calculateSolarPanels() }))), index.h("div", { key: 'bb8d6f3fb719403814fba5871a9fcdc923ee9255', class: "w-full" }, index.h("solar-system-form", { key: 'eb6423fd823816992fe10a9a457018afe08fb0ca', systemConfigs: this.roofPolygonsSolarPanels, roofPolygons: this.roofPolygons, obstructionPolygons: this.obstructionPolygons })), this.showSettings && (index.h("settings-modal", { key: 'f00648d12379fb6738168706ac8326587b613c8f', settings: state.settings, onClose: this.handleSettingsClose, onSave: this.handleSettingsSave }))));
|
|
2258
2289
|
}
|
|
2259
2290
|
static get watchers() { return {
|
|
2260
2291
|
"rgbTiff": ["drawMap"],
|
|
@@ -2594,84 +2625,92 @@ SettingsModal.style = outputCss$4;
|
|
|
2594
2625
|
* @param colorScheme - The color scheme object containing theme colors
|
|
2595
2626
|
*/
|
|
2596
2627
|
function applyThemeGlobally(colorScheme) {
|
|
2597
|
-
|
|
2598
|
-
|
|
2628
|
+
applyThemeToElement(document.documentElement, colorScheme);
|
|
2629
|
+
}
|
|
2630
|
+
/**
|
|
2631
|
+
* Applies a color scheme theme to a specific element (useful for Shadow DOM).
|
|
2632
|
+
*
|
|
2633
|
+
* @param element - The element to apply the theme to (e.g., Shadow DOM host)
|
|
2634
|
+
* @param colorScheme - The color scheme object containing theme colors
|
|
2635
|
+
*/
|
|
2636
|
+
function applyThemeToElement(element, colorScheme) {
|
|
2637
|
+
// Set CSS custom properties on the specified element
|
|
2599
2638
|
if (colorScheme.primary) {
|
|
2600
|
-
|
|
2639
|
+
element.style.setProperty('--color-primary', colorScheme.primary);
|
|
2601
2640
|
}
|
|
2602
2641
|
if (colorScheme.primaryForeground) {
|
|
2603
|
-
|
|
2642
|
+
element.style.setProperty('--color-primary-foreground', colorScheme.primaryForeground);
|
|
2604
2643
|
}
|
|
2605
2644
|
if (colorScheme.secondary) {
|
|
2606
|
-
|
|
2645
|
+
element.style.setProperty('--color-secondary', colorScheme.secondary);
|
|
2607
2646
|
}
|
|
2608
2647
|
if (colorScheme.secondaryForeground) {
|
|
2609
|
-
|
|
2648
|
+
element.style.setProperty('--color-secondary-foreground', colorScheme.secondaryForeground);
|
|
2610
2649
|
}
|
|
2611
2650
|
if (colorScheme.tertiary) {
|
|
2612
|
-
|
|
2651
|
+
element.style.setProperty('--color-tertiary', colorScheme.tertiary);
|
|
2613
2652
|
}
|
|
2614
2653
|
if (colorScheme.tertiaryForeground) {
|
|
2615
|
-
|
|
2654
|
+
element.style.setProperty('--color-tertiary-foreground', colorScheme.tertiaryForeground);
|
|
2616
2655
|
}
|
|
2617
2656
|
if (colorScheme.muted) {
|
|
2618
|
-
|
|
2657
|
+
element.style.setProperty('--color-muted', colorScheme.muted);
|
|
2619
2658
|
}
|
|
2620
2659
|
if (colorScheme.mutedForeground) {
|
|
2621
|
-
|
|
2660
|
+
element.style.setProperty('--color-muted-foreground', colorScheme.mutedForeground);
|
|
2622
2661
|
}
|
|
2623
2662
|
if (colorScheme.error) {
|
|
2624
|
-
|
|
2663
|
+
element.style.setProperty('--color-error', colorScheme.error);
|
|
2625
2664
|
}
|
|
2626
2665
|
if (colorScheme.errorForeground) {
|
|
2627
|
-
|
|
2666
|
+
element.style.setProperty('--color-error-foreground', colorScheme.errorForeground);
|
|
2628
2667
|
}
|
|
2629
2668
|
// Surface colors
|
|
2630
2669
|
if (colorScheme.surface) {
|
|
2631
|
-
|
|
2670
|
+
element.style.setProperty('--color-surface', colorScheme.surface);
|
|
2632
2671
|
}
|
|
2633
2672
|
if (colorScheme.surfaceHover) {
|
|
2634
|
-
|
|
2673
|
+
element.style.setProperty('--color-surface-hover', colorScheme.surfaceHover);
|
|
2635
2674
|
}
|
|
2636
2675
|
if (colorScheme.surfaceActive) {
|
|
2637
|
-
|
|
2676
|
+
element.style.setProperty('--color-surface-active', colorScheme.surfaceActive);
|
|
2638
2677
|
}
|
|
2639
2678
|
// Text colors
|
|
2640
2679
|
if (colorScheme.textMuted) {
|
|
2641
|
-
|
|
2680
|
+
element.style.setProperty('--color-text-muted', colorScheme.textMuted);
|
|
2642
2681
|
}
|
|
2643
2682
|
if (colorScheme.textSecondary) {
|
|
2644
|
-
|
|
2683
|
+
element.style.setProperty('--color-text-secondary', colorScheme.textSecondary);
|
|
2645
2684
|
}
|
|
2646
2685
|
if (colorScheme.textPlaceholder) {
|
|
2647
|
-
|
|
2686
|
+
element.style.setProperty('--color-text-placeholder', colorScheme.textPlaceholder);
|
|
2648
2687
|
}
|
|
2649
2688
|
// Border colors
|
|
2650
2689
|
if (colorScheme.border) {
|
|
2651
|
-
|
|
2690
|
+
element.style.setProperty('--color-border', colorScheme.border);
|
|
2652
2691
|
}
|
|
2653
2692
|
if (colorScheme.borderLight) {
|
|
2654
|
-
|
|
2693
|
+
element.style.setProperty('--color-border-light', colorScheme.borderLight);
|
|
2655
2694
|
}
|
|
2656
2695
|
// Status colors
|
|
2657
2696
|
if (colorScheme.success) {
|
|
2658
|
-
|
|
2697
|
+
element.style.setProperty('--color-success', colorScheme.success);
|
|
2659
2698
|
}
|
|
2660
2699
|
if (colorScheme.info) {
|
|
2661
|
-
|
|
2700
|
+
element.style.setProperty('--color-info', colorScheme.info);
|
|
2662
2701
|
}
|
|
2663
2702
|
// Interactive colors
|
|
2664
2703
|
if (colorScheme.hover) {
|
|
2665
|
-
|
|
2704
|
+
element.style.setProperty('--color-hover', colorScheme.hover);
|
|
2666
2705
|
}
|
|
2667
2706
|
if (colorScheme.hoverDark) {
|
|
2668
|
-
|
|
2707
|
+
element.style.setProperty('--color-hover-dark', colorScheme.hoverDark);
|
|
2669
2708
|
}
|
|
2670
2709
|
if (colorScheme.overlay) {
|
|
2671
|
-
|
|
2710
|
+
element.style.setProperty('--color-overlay', colorScheme.overlay);
|
|
2672
2711
|
}
|
|
2673
2712
|
if (colorScheme.tooltip) {
|
|
2674
|
-
|
|
2713
|
+
element.style.setProperty('--color-tooltip', colorScheme.tooltip);
|
|
2675
2714
|
}
|
|
2676
2715
|
}
|
|
2677
2716
|
|
|
@@ -2740,7 +2779,11 @@ const SolarExpert = class {
|
|
|
2740
2779
|
state.settings.language = this.language;
|
|
2741
2780
|
const isIPhone = navigator.userAgent.indexOf("iPhone") != -1;
|
|
2742
2781
|
const isMac = navigator.userAgent.indexOf("Mac OS") != -1;
|
|
2743
|
-
state.isIOS = isIPhone || isMac;
|
|
2782
|
+
state.isIOS = isIPhone || isMac || true;
|
|
2783
|
+
if (!this.colorScheme) {
|
|
2784
|
+
applyThemeToElement(this.el, DEFAULT_COLOR_SCHEME);
|
|
2785
|
+
applyThemeGlobally(DEFAULT_COLOR_SCHEME);
|
|
2786
|
+
}
|
|
2744
2787
|
this.applyTheme();
|
|
2745
2788
|
}
|
|
2746
2789
|
colorSchemeChanged() {
|
|
@@ -2748,7 +2791,10 @@ const SolarExpert = class {
|
|
|
2748
2791
|
}
|
|
2749
2792
|
applyTheme() {
|
|
2750
2793
|
if (this.colorScheme) {
|
|
2794
|
+
// Apply theme globally for non-shadow components
|
|
2751
2795
|
applyThemeGlobally(this.colorScheme);
|
|
2796
|
+
// Apply theme to this component's Shadow DOM host element
|
|
2797
|
+
applyThemeToElement(this.el, this.colorScheme);
|
|
2752
2798
|
}
|
|
2753
2799
|
}
|
|
2754
2800
|
async loadGoogleMapsScript() {
|
|
@@ -2797,9 +2843,9 @@ const SolarExpert = class {
|
|
|
2797
2843
|
}
|
|
2798
2844
|
render() {
|
|
2799
2845
|
const t = getLanguageStrings(this.language);
|
|
2800
|
-
return (index.h("div", { key: '
|
|
2846
|
+
return (index.h("div", { key: '8b0622ee8ebeea53897b0dac8a0bdd12950d1d72', class: "flex flex-col w-full h-full p-3 m-auto", id: "solar-calculator" }, this.showMapSelector
|
|
2801
2847
|
? (index.h("map-selector", { "api-key": this.apiKey, language: this.language }))
|
|
2802
|
-
: (index.h(index.h.Fragment, null, index.h("div", { class: "pb-3 flex flex-row gap-4 items-stretch w-full
|
|
2848
|
+
: (index.h(index.h.Fragment, null, index.h("div", { class: "pb-3 flex flex-row gap-4 items-stretch w-full" }, index.h("div", { class: "relative flex-3" }, index.h("div", { class: "absolute left-3 top-0 h-full flex items-center text-muted-foreground pointer-events-none" }, index.h("search-icon", null)), index.h("input", { ref: (el) => this.inputElement = el, type: "text", placeholder: t.solarExpert
|
|
2803
2849
|
.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" })), index.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)), index.h("map-draw", { apiKey: this.apiKey })))));
|
|
2804
2850
|
}
|
|
2805
2851
|
static get watchers() { return {
|
|
@@ -3122,17 +3168,19 @@ const SolarSystemForm = class {
|
|
|
3122
3168
|
"mostly_at_home" }, t.solarSystemForm.consumptionProfiles
|
|
3123
3169
|
.mostlyAtHome), index.h("option", { key: 'a713af601a9a122e83a7610df91dc87046c32684', value: "mostly_away", selected: this.consumptionProfile ===
|
|
3124
3170
|
"mostly_away" }, t.solarSystemForm.consumptionProfiles
|
|
3125
|
-
.mostlyAway))))), index.h("div", { key: 'e22302c5432e13704827226a9348eb5135fbd168', class: "space-y-4" }, index.h("h2", { key: '22ff557a03b832de10382cbd9e2934f1e40f48c1', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.additionalComponents.title), index.h("div", { key: '8dc84f2bee4d59e5a9024b252a990a6d86729bfa', class: "flex flex-col gap-4" }, index.h("div", { key: 'dfa92f5717a77e1f1d2bb6549ae38ce02aaccb7c', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, index.h("div", { key: '70a5a4390c42cd96d5ea7238842bc9a30e387d24', class: "flex items-center justify-between" }, index.h("div", { key: 'c6454e366f5086e6ca7964b2d41561a4f422ed1a', class: "flex items-center gap-2" }, index.h("input", { key: '
|
|
3171
|
+
.mostlyAway))))), index.h("div", { key: 'e22302c5432e13704827226a9348eb5135fbd168', class: "space-y-4" }, index.h("h2", { key: '22ff557a03b832de10382cbd9e2934f1e40f48c1', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.additionalComponents.title), index.h("div", { key: '8dc84f2bee4d59e5a9024b252a990a6d86729bfa', class: "flex flex-col gap-4" }, index.h("div", { key: 'dfa92f5717a77e1f1d2bb6549ae38ce02aaccb7c', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, index.h("div", { key: '70a5a4390c42cd96d5ea7238842bc9a30e387d24', class: "flex items-center justify-between" }, index.h("div", { key: 'c6454e366f5086e6ca7964b2d41561a4f422ed1a', class: "flex items-center gap-2" }, index.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) => {
|
|
3126
3172
|
this.heatPump =
|
|
3127
3173
|
e.target
|
|
3128
3174
|
.checked
|
|
3129
3175
|
? 100
|
|
3130
3176
|
: 0;
|
|
3131
3177
|
this.recalculate();
|
|
3132
|
-
} }), index.h("label", { key: '
|
|
3178
|
+
} }), index.h("label", { key: '11a45cadaf1bc2c8661da788eca3c7d0e2560e13', htmlFor: "heatPump", class: "text-text-muted" }, t.solarSystemForm
|
|
3133
3179
|
.additionalComponents
|
|
3134
|
-
.heatPump)), (this.heatPump > 0 && !this.isIOS()) && (index.h("span", { key: '
|
|
3135
|
-
? (index.h("div", { class: "flex items-center gap-2" }, index.h("input", { type: "number", min: "10", max: "300", step: "10", class: "flex-1 px-4 py-2 rounded-4xl border border-
|
|
3180
|
+
.heatPump)), (this.heatPump > 0 && !this.isIOS()) && (index.h("span", { key: '1f8bd12df9d5e0357afd755c83d1cf592b6b5384', class: "text-text-muted" }, this.heatPump, " m\u00B2"))), this.heatPump > 0 && (index.h("div", { key: '1fdd01ffe44f75daf94e5c9b716519d1636f6e3a', class: "flex flex-col gap-2" }, this.isIOS()
|
|
3181
|
+
? (index.h("div", { class: "flex items-center gap-2" }, index.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: {
|
|
3182
|
+
border: "1px solid var(--color-border)",
|
|
3183
|
+
}, value: this.heatPump, onInput: (e) => {
|
|
3136
3184
|
const value = parseInt(e.target
|
|
3137
3185
|
.value);
|
|
3138
3186
|
if (value >= 10 &&
|
|
@@ -3147,38 +3195,42 @@ const SolarSystemForm = class {
|
|
|
3147
3195
|
parseInt(e.target
|
|
3148
3196
|
.value);
|
|
3149
3197
|
this.recalculate();
|
|
3150
|
-
} }))))), index.h("div", { key: '
|
|
3198
|
+
} }))))), index.h("div", { key: '94b4d3e5d6bea8994012b3500160780796338202', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, index.h("div", { key: '880a456c5d9916a467be761ffb6d48a0ac702095', class: "flex items-center justify-between" }, index.h("div", { key: '7ee0b35d4b616af184dd94ec11e2e5cba538aacd', class: "flex items-center gap-2" }, index.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) => {
|
|
3151
3199
|
this.electricCar =
|
|
3152
3200
|
e.target
|
|
3153
3201
|
.checked;
|
|
3154
3202
|
this.recalculate();
|
|
3155
|
-
} }), index.h("label", { key: '
|
|
3203
|
+
} }), index.h("label", { key: 'a922eeb0abc8731c0410c308a3ea55d93961dfaf', htmlFor: "electricCar", class: "text-text-muted" }, t.solarSystemForm
|
|
3156
3204
|
.additionalComponents
|
|
3157
|
-
.electricCar))), this.electricCar && (index.h("div", { key: '
|
|
3205
|
+
.electricCar))), this.electricCar && (index.h("div", { key: '0c78c7f3176a0f6ab9c41c9876cf1a035877c798', class: "flex flex-col gap-2" }, index.h("div", { key: '722f0f8c09f037d75c7721c0bd7141da781f3c0c', class: "grid grid-cols-2 gap-4" }, index.h("label", { key: '258ee50ded063df8322520e2fdc7c7891b673c66', class: "text-sm text-text-muted" }, t.solarSystemForm
|
|
3158
3206
|
.additionalComponents
|
|
3159
|
-
.chargingTime), index.h("label", { key: '
|
|
3207
|
+
.chargingTime), index.h("label", { key: '7ae9cfa77cd8ced89d1598ef09fcc4772133695e', class: "text-sm text-text-muted" }, t.solarSystemForm
|
|
3160
3208
|
.additionalComponents
|
|
3161
|
-
.kilometersPerYear)), index.h("div", { key: '
|
|
3209
|
+
.kilometersPerYear)), index.h("div", { key: '1f9244bd861b20278eec8cbca21cf611a7b923f6', class: "grid grid-cols-2 gap-4" }, index.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) => {
|
|
3162
3210
|
this.electricCarChargingTime =
|
|
3163
3211
|
e.target
|
|
3164
3212
|
.value;
|
|
3165
3213
|
this.recalculate();
|
|
3166
|
-
}
|
|
3214
|
+
}, style: {
|
|
3215
|
+
border: "1px solid var(--color-border)",
|
|
3216
|
+
} }, index.h("option", { key: '3ac38d888755fe1ff1bbcdee4ac2ecbfbd51b8a6', value: "day", selected: this
|
|
3167
3217
|
.electricCarChargingTime ===
|
|
3168
3218
|
"day" }, t.solarSystemForm
|
|
3169
3219
|
.additionalComponents
|
|
3170
|
-
.chargingTimeDay), index.h("option", { key: '
|
|
3220
|
+
.chargingTimeDay), index.h("option", { key: 'a6a8cca9b5f127aa4331cc412ea56da2ddfa480e', value: "night", selected: this
|
|
3171
3221
|
.electricCarChargingTime ===
|
|
3172
3222
|
"night" }, t.solarSystemForm
|
|
3173
3223
|
.additionalComponents
|
|
3174
|
-
.chargingTimeNight)), index.h("input", { key: '
|
|
3224
|
+
.chargingTimeNight)), index.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) => {
|
|
3175
3225
|
this.kmDrivenPerYear =
|
|
3176
3226
|
parseInt(e.target
|
|
3177
3227
|
.value);
|
|
3178
3228
|
this.recalculate();
|
|
3179
|
-
}
|
|
3180
|
-
|
|
3181
|
-
|
|
3229
|
+
}, style: {
|
|
3230
|
+
border: "1px solid var(--color-border)",
|
|
3231
|
+
} }))))), index.h("div", { key: '78887c816adeaeecd3503953e6079678ea5ffa8a', class: "flex flex-col bg-muted rounded-4xl p-4 gap-4" }, index.h("div", { key: '0f4e2b348c0e7e7789c7a2badfbddfbb668e4842', class: "flex items-center justify-between" }, index.h("label", { key: '5eaa71f1ae5a7c08bdbd3ee1b8ea18767738b9f0', class: "text-text-muted" }, t.solarSystemForm.additionalComponents
|
|
3232
|
+
.battery), !this.isIOS() && (index.h("span", { key: 'f627ed9f5b6004bedfc99fed880701783e1f6b8c', class: "text-text-muted" }, this.battery, " kWh"))), index.h("div", { key: 'ae29676644ea5884897912332204f8df2edcc913', class: "flex flex-col gap-2" }, this.isIOS()
|
|
3233
|
+
? (index.h("div", { class: "flex items-center gap-2" }, index.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) => {
|
|
3182
3234
|
const value = parseInt(e.target
|
|
3183
3235
|
.value);
|
|
3184
3236
|
if (value >= 0 &&
|
|
@@ -3187,42 +3239,46 @@ const SolarSystemForm = class {
|
|
|
3187
3239
|
value;
|
|
3188
3240
|
this.recalculate();
|
|
3189
3241
|
}
|
|
3190
|
-
}, placeholder: "Battery capacity"
|
|
3242
|
+
}, placeholder: "Battery capacity", style: {
|
|
3243
|
+
border: "1px solid var(--color-border)",
|
|
3244
|
+
} }), index.h("span", { class: "text-sm text-text-muted" }, "kWh")))
|
|
3191
3245
|
: (index.h("input", { type: "range", min: "0", max: "20", step: "1", class: "input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-muted", value: this.battery, onInput: (e) => {
|
|
3192
3246
|
this.battery = parseInt(e.target
|
|
3193
3247
|
.value);
|
|
3194
3248
|
this.recalculate();
|
|
3195
|
-
} })))))), index.h("div", { key: '
|
|
3249
|
+
} })))))), index.h("div", { key: '3ff4f76e3998594832541e7c29b62fd066eb6b93', class: "space-y-4" }, index.h("h2", { key: '0d699ce4651eafa967464bd2d514e33e7d7594f5', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.electricityCostsTitle), index.h("div", { key: '2fbf7001ef764bbdfcebb68aee462b9015740e42', class: "grid grid-rows-2 gap-0" }, index.h("div", { key: '822c1a7ebde43a0e82d8e85a738f7c6d71d59312', class: "grid grid-cols-3 gap-4" }, index.h("label", { key: '7037f5005c69ca0fc06706190b2a14b0e65d0bab', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.electricityPrice), index.h("label", { key: 'c57af75b004add729b4ddddc118534b2fdb783bf', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.compensationRate), index.h("label", { key: 'd28f0391fc0e52f6a6bbe454302afd54493be80b', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.annualPriceIncrease)), index.h("div", { key: '237e6d85d909b1b08d00cdc3ce3c340513c9ffd8', class: "grid grid-cols-3 gap-4 text-primary-foreground" }, index.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) => {
|
|
3196
3250
|
this.electricityPrice = parseFloat(e.target
|
|
3197
3251
|
.value);
|
|
3198
3252
|
this.recalculate();
|
|
3199
|
-
} }), index.h("input", { key: '
|
|
3253
|
+
} }), index.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) => {
|
|
3200
3254
|
this.compensationRate = parseFloat(e.target
|
|
3201
3255
|
.value);
|
|
3202
3256
|
this.recalculate();
|
|
3203
|
-
} }), index.h("input", { key: '
|
|
3257
|
+
} }), index.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) => {
|
|
3204
3258
|
this.annualPriceIncrease = parseFloat(e.target
|
|
3205
3259
|
.value);
|
|
3206
3260
|
this.recalculate();
|
|
3207
|
-
} })))), index.h("div", { key: '
|
|
3261
|
+
} })))), index.h("div", { key: '4282852c39dde81bdf5b54ad8ea4e0a8aefaaf18', class: "space-y-4 p-4 border border-border rounded-4xl", style: {
|
|
3262
|
+
border: "1px solid var(--color-border)",
|
|
3263
|
+
} }, index.h("h2", { key: '7fcfd93db114602d3c1250c0b9ad5c106e2118d0', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.resultsTitle), index.h("div", { key: 'aa0da43f3ef2daf8f9b3bb83e15493300dd3d795', class: "bg-muted rounded-4xl p-4" }, index.h("div", { key: '82b9f95d27582a7e6fabc92b5f8c4f94a7760773', class: "flex items-center justify-between" }, index.h("span", { key: 'ac3a20954389eafb4222de55a9c380c6e6911822', class: "text-text-muted" }, t.solarSystemForm.autonomy), index.h("span", { key: '42573f1d642adc6e7d81c2205d64659fd5690ec6', class: "text-xl font-bold text-secondary" }, this.autonomy > 100
|
|
3208
3264
|
? "100"
|
|
3209
|
-
: this.autonomy.toFixed(1), "%")), index.h("div", { key: '
|
|
3210
|
-
.savingsDisclaimer))), index.h("span", { key: '
|
|
3211
|
-
.solarSystemForm.year)), index.h("div", { key: '
|
|
3265
|
+
: this.autonomy.toFixed(1), "%")), index.h("div", { key: '7b7ca03f694682ada5f3156e065ffbebfe8a162e', class: "flex items-center justify-between mt-4" }, index.h("div", { key: '39f1d25e85ab1f3ff1ab9f06874cb1e3178f1707', class: "flex items-center gap-2" }, index.h("span", { key: '0c62c76a68fa8532240fe28333c1ce592ddc6787', class: "text-text-muted" }, t.solarSystemForm.costSavings), index.h("div", { key: 'fc6baa108a6fc38d70562d147488085c17b3376b', class: "relative group" }, index.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" }, index.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" })), index.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
|
|
3266
|
+
.savingsDisclaimer))), index.h("span", { key: 'a99bd5d3f22f39fbfce522e6e8b9fa65d1fc1785', class: "text-xl font-bold text-success" }, this.costSavings.toFixed(2), "\u20AC/", t
|
|
3267
|
+
.solarSystemForm.year)), index.h("div", { key: '8aeb935408cfa36788a5396dd8a0719e93216721', class: "flex items-center justify-between mt-4" }, index.h("div", { key: 'aa778aabdfe02aeea72ef37a0087cfb03adbef3d', class: "flex items-center gap-2" }, index.h("span", { key: '4bc1dd985b07e229c3293db4c4f3be74bd885cec', class: "text-text-muted" }, "Einspeiseverg\u00FCtung 25 Jahre")), index.h("span", { key: '4eb548881579db3bdffcf5c0bcd0630c19b6961e', class: "text-xl font-bold text-success" }, this.compensation25Years.toFixed(2), "\u20AC")), index.h("div", { key: '00d848e65e0a13d7278ca1cef2a8a6c0810cef08', class: "flex items-center justify-between mt-4" }, index.h("div", { key: 'e33274627fa4a5d71b35bbc030212810cd1ecc15', class: "flex items-center gap-2" }, index.h("span", { key: '45fb735ec260bbea7ad6101f7aacac4e7a1f3313', class: "text-text-muted" }, "Geldwerter Vorteil 25 Jahre")), index.h("span", { key: '2d7bc5f25a4491e00a1985c9bf255abdaef729dd', class: "text-xl font-bold text-success" }, this.savedCosts25Years.toFixed(2), "\u20AC")))), index.h("div", { key: '603eafb9e819e4a2da8f919c2de5a7e7ed7b6ac9', class: "space-y-4 pt-4" }, index.h("h2", { key: '50de58cd408c63518a3a1aeebc2168e603f8f537', class: "text-lg font-semibold text-secondary" }, t.solarSystemForm.requestOffer), index.h("div", { key: 'cc85f1661fba68643d3f043ff51b1c2070e5d32a', class: "grid gap-4" }, index.h("div", { key: '54040b2ac5cb46fc2bbdabdfb78f1d25fa521b2d', class: "grid grid-cols-2 gap-4" }, index.h("label", { key: '9404270bfbd58d022fafff6646ff1dbf68352617', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.name), index.h("label", { key: 'ee3bb80e18b29446630d10f49e94d3ce8e8e3f46', class: "block text-sm font-medium text-text-muted mb-1" }, t.solarSystemForm.email)), index.h("div", { key: '298da00d7046b6437b175f3eb8859281392d75dd', class: "grid grid-cols-2 gap-4" }, index.h("div", { key: '31b01646d5370285c8dc0d5470643cd679f1eaee' }, index.h("input", { key: '27764cb15c5150f8ddd5c50b7559fe807014d021', type: "text", class: `w-full px-4 py-2 rounded-4xl border ${this.nameError
|
|
3212
3268
|
? "border-error"
|
|
3213
3269
|
: "border-border"} focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`, value: this.name, onInput: (e) => {
|
|
3214
3270
|
this.name =
|
|
3215
3271
|
e.target
|
|
3216
3272
|
.value;
|
|
3217
3273
|
this.validateForm();
|
|
3218
|
-
}, placeholder: "Your name" }), this.nameError && (index.h("p", { key: '
|
|
3274
|
+
}, placeholder: "Your name" }), this.nameError && (index.h("p", { key: 'fa62eac9fc7f58f4b0505dc8398ae7447524ac4f', class: "text-error text-sm mt-1" }, this.nameError))), index.h("div", { key: '936b2091fc5f889f7c98f3bbe9c783ebfcf97030' }, index.h("input", { key: 'd7f4bf93bee30c5dc47c14143c527be562ccdbfd', type: "email", class: `w-full px-4 py-2 rounded-4xl border ${this.emailError
|
|
3219
3275
|
? "border-error"
|
|
3220
3276
|
: "border-border"} focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`, value: this.email, onInput: (e) => {
|
|
3221
3277
|
this.email =
|
|
3222
3278
|
e.target
|
|
3223
3279
|
.value;
|
|
3224
3280
|
this.validateForm();
|
|
3225
|
-
}, placeholder: "your.email@example.com" }), this.emailError && (index.h("p", { key: '
|
|
3281
|
+
}, placeholder: "your.email@example.com" }), this.emailError && (index.h("p", { key: '32c8ca2e1de772c5c2072f52827393e0aad287f2', class: "text-error text-sm mt-1" }, this.emailError))))), index.h("div", { key: '5ac2456b1e783e86d21405db8b34ee22ad5e88f3', class: "flex justify-center" }, index.h("button", { key: 'f4b4e6d7490e01a29e4065747fe64dec7ca06f37', onClick: () => this.handleRequestOffer(), disabled: !this.name.trim() ||
|
|
3226
3282
|
!this.email.trim() || !!this.nameError ||
|
|
3227
3283
|
!!this.emailError, class: "px-4 py-2 bg-secondary rounded-4xl hover:bg-tertiary transition-colors duration-200 text-muted" }, t.solarSystemForm.requestOfferButton))))));
|
|
3228
3284
|
}
|