@acorex/modules 19.4.14 → 19.4.15

package/fesm2022/acorex-modules-dashboard-management.mjs

@@ -1,11 +1,13 @@
 import { AXPSessionService, AXPAuthGuard } from '@acorex/platform/auth';
 import { createAllQueryView, AXPEntityCommandScope, AXPEntityQueryType, AXP_HOME_PAGES, AXP_MENU_PROVIDER, AXP_HOME_PAGE_DEFAULT_KEY, AXPSettingService } from '@acorex/platform/common';
 import * as i3$1 from '@acorex/platform/layout/builder';
-import { AXPWidgetsCatalog, AXPValueWidgetComponent, cloneProperty, AXPWidgetGroupEnum, AXPLayoutWidgetComponent, AXPLayoutBuilderModule, AXPWidgetRendererDirective } from '@acorex/platform/layout/builder';
+import { AXPWidgetsCatalog, AXPLayoutWidgetComponent, AXPWidgetGroupEnum, AXPValueWidgetComponent, cloneProperty, AXPLayoutBuilderModule, AXPWidgetRendererDirective } from '@acorex/platform/layout/builder';
 import { AXMEntityCrudServiceImpl, AXPEntityService, AXP_ENTITY_CONFIG_TOKEN, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
-import { AXP_APPEARANCE_PROPERTY_GROUP, AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BG_COLOR_PROPERTY, plainTextDefaultProperty, AXP_DATA_PROPERTY_GROUP, AXP_COLOR_PROPERTY, AXPWidgetsModule } from '@acorex/platform/widgets';
+import { AXP_DATA_PROPERTY_GROUP, AXP_APPEARANCE_PROPERTY_GROUP, AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BG_COLOR_PROPERTY, plainTextDefaultProperty, AXP_COLOR_PROPERTY, AXPWidgetsModule } from '@acorex/platform/widgets';
 import * as i0 from '@angular/core';
-import { Injectable, inject, Injector, computed, ChangeDetectionStrategy, Component, ChangeDetectorRef, signal, viewChild, ElementRef, HostListener, output, InjectionToken, effect, HostBinding, NgModule, input, contentChild, afterNextRender, model, ViewEncapsulation } from '@angular/core';
+import { Injectable, inject, Injector, input, signal, computed, effect, ChangeDetectionStrategy, Component, ChangeDetectorRef, viewChild, ElementRef, HostListener, output, InjectionToken, HostBinding, NgModule, contentChild, afterNextRender, model, ViewEncapsulation } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 import { AXBarChartComponent } from '@acorex/charts/bar-chart';
 import * as i2$2 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
@@ -13,9 +15,7 @@ import { AXTagModule } from '@acorex/components/tag';
 import { AXDateTimeModule } from '@acorex/core/date-time';
 import * as i2 from '@acorex/core/format';
 import { AXFormatModule } from '@acorex/core/format';
-import * as i1 from '@angular/common';
-import { CommonModule, DatePipe } from '@angular/common';
-import { interval, map, Observable, catchError, throwError, switchMap, firstValueFrom } from 'rxjs';
+import { interval, map, Observable, catchError, throwError, of, finalize, switchMap, firstValueFrom } from 'rxjs';
 import { AXDonutChartComponent } from '@acorex/charts/donut-chart';
 import { AXGaugeChartComponent } from '@acorex/charts/gauge-chart';
 import { AXLineChartComponent } from '@acorex/charts/line-chart';
@@ -40,6 +40,9 @@ import { AXLabelModule } from '@acorex/components/label';
 import { AXTabsModule } from '@acorex/components/tabs';
 import * as i2$3 from '@acorex/core/translation';
 import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
+import * as i2$4 from '@acorex/components/skeleton';
+import { AXSkeletonModule } from '@acorex/components/skeleton';
+import { AXTooltipModule } from '@acorex/components/tooltip';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { AXPopupService } from '@acorex/components/popup';
 import { AXP_GLOBAL_SEARCH_CONFIG_TOKEN } from '@acorex/modules/common';
@@ -56,7 +59,7 @@ import { AXPWidgetPropertyViewerComponent, AXPWidgetPickerService, AXPDesignerSe
 import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
 import { AXPLayoutThemeService } from '@acorex/platform/themes/shared';
 import { AXPThemeLayoutBlockComponent } from '@acorex/platform/layout/components';
-import * as i2$4 from '@acorex/components/loading';
+import * as i2$5 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
 import { AXBasePageComponent } from '@acorex/components/page';
@@ -449,6 +452,320 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             type: Injectable
         }] });
 
+class AXMAnalogClockComponent {
+    constructor() {
+        this.timezone = input();
+        this.showNumbers = input(true);
+        this.currentTime = signal(new Date());
+        this.timeParts = signal({ hours: 0, minutes: 0, seconds: 0 });
+        this.hourHandTransform = computed(() => {
+            const { hours, minutes } = this.timeParts();
+            const hoursAngle = (hours % 12) * 30 + minutes * 0.5;
+            return `translateX(-50%) rotate(${hoursAngle}deg)`;
+        });
+        this.minuteHandTransform = computed(() => {
+            const { minutes, seconds } = this.timeParts();
+            const minutesAngle = minutes * 6 + seconds * 0.1;
+            return `translateX(-50%) rotate(${minutesAngle}deg)`;
+        });
+        this.secondHandTransform = computed(() => {
+            const { seconds } = this.timeParts();
+            const secondsAngle = seconds * 6;
+            return `translateX(-50%) rotate(${secondsAngle}deg)`;
+        });
+        this.hourLines = [];
+        this.hourNumbers = [];
+        this.dots = [];
+        effect(() => {
+            const now = this.currentTime();
+            const tz = this.timezone();
+            let hours, minutes, seconds;
+            if (tz) {
+                try {
+                    const formatter = new Intl.DateTimeFormat('en-US', {
+                        timeZone: tz,
+                        hour12: false,
+                        hour: 'numeric',
+                        minute: 'numeric',
+                        second: 'numeric',
+                    });
+                    const parts = formatter.formatToParts(now);
+                    hours = parseInt(parts.find((p) => p.type === 'hour')?.value ?? '0', 10);
+                    minutes = parseInt(parts.find((p) => p.type === 'minute')?.value ?? '0', 10);
+                    seconds = parseInt(parts.find((p) => p.type === 'second')?.value ?? '0', 10);
+                }
+                catch (e) {
+                    console.error(`Invalid timezone provided: "${tz}". Falling back to local time.`);
+                    hours = now.getHours();
+                    minutes = now.getMinutes();
+                    seconds = now.getSeconds();
+                }
+            }
+            else {
+                hours = now.getHours();
+                minutes = now.getMinutes();
+                seconds = now.getSeconds();
+            }
+            this.timeParts.set({ hours, minutes, seconds });
+        });
+    }
+    ngOnInit() {
+        this.createClockMarks();
+        this.timerId = window.setInterval(() => {
+            this.currentTime.set(new Date());
+        }, 1000);
+    }
+    ngOnDestroy() {
+        if (this.timerId) {
+            clearInterval(this.timerId);
+        }
+    }
+    createClockMarks() {
+        const majorHours = [12, 3, 6, 9];
+        // Hour Lines
+        this.hourLines = [];
+        for (let i = 1; i <= 12; i++) {
+            this.hourLines.push({
+                transform: `translateX(-50%) rotate(${i * 30}deg)`,
+            });
+        }
+        // Hour Numbers
+        this.hourNumbers = [];
+        for (const hour of majorHours) {
+            const angleRad = (hour * 30 - 90) * (Math.PI / 180);
+            this.hourNumbers.push({
+                value: hour,
+                top: `calc(50% + ${33 * Math.sin(angleRad)}%)`,
+                left: `calc(50% + ${33 * Math.cos(angleRad)}%)`,
+            });
+        }
+        // Dots
+        this.dots = [];
+        for (let i = 1; i <= 60; i++) {
+            if (i % 5 !== 0) {
+                this.dots.push({
+                    transform: `translateX(-50%) rotate(${i * 6}deg)`,
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMAnalogClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXMAnalogClockComponent, isStandalone: true, selector: "axm-analog-clock", inputs: { timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: false, transformFunction: null }, showNumbers: { classPropertyName: "showNumbers", publicName: "showNumbers", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="axm-analog-clock-container">
+      <div class="axm-analog-clock-face">
+        <div class="axm-analog-clock-marks-container">
+          @for (line of hourLines; track $index) {
+            <div class="axm-analog-clock-hour-line" [style.transform]="line.transform">
+              <div class="axm-analog-clock-hour-line-inner"></div>
+            </div>
+          }
+          @for (dot of dots; track $index) {
+            <div class="axm-analog-clock-dot-line" [style.transform]="dot.transform">
+              <div class="axm-analog-clock-dot-line-inner"></div>
+            </div>
+          }
+        </div>
+
+        @if (showNumbers()) {
+          <div class="axm-analog-clock-numbers-container">
+            @for (num of hourNumbers; track num.value) {
+              <div class="axm-analog-clock-hour-number" [style.top]="num.top" [style.left]="num.left">
+                {{ num.value }}
+              </div>
+            }
+          </div>
+        }
+        <div class="axm-analog-clock-hands">
+          <div class="axm-analog-clock-hand axm-analog-clock-hour-hand" [style.transform]="hourHandTransform()"></div>
+          <div
+            class="axm-analog-clock-hand axm-analog-clock-minute-hand"
+            [style.transform]="minuteHandTransform()"
+          ></div>
+          <div
+            class="axm-analog-clock-hand axm-analog-clock-second-hand"
+            [style.transform]="secondHandTransform()"
+          ></div>
+          <div class="axm-analog-clock-center-point"></div>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:grid;width:100%;height:100%;place-items:center}.axm-analog-clock-container{position:relative;max-height:100%;width:100%;aspect-ratio:1;container-type:inline-size}.axm-analog-clock-face{position:relative;height:100%;width:100%}.axm-analog-clock-marks-container,.axm-analog-clock-numbers-container,.axm-analog-clock-hands{position:absolute;top:0;right:0;bottom:0;left:0}.axm-analog-clock-hour-line,.axm-analog-clock-dot-line{position:absolute;bottom:50%;left:50%;height:50%;transform-origin:bottom}.axm-analog-clock-hour-line{width:1.8cqw}.axm-analog-clock-dot-line{width:2.4cqw}.axm-analog-clock-hour-line-inner{position:absolute;top:6cqw;left:50%;height:5.5cqw;width:100%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.axm-analog-clock-dot-line-inner{position:absolute;top:6cqw;left:50%;height:2.4cqw;width:100%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1))}.axm-analog-clock-hour-number{position:absolute;--tw-translate-x: -50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));font-size:12cqw;font-weight:500;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.axm-analog-clock-hand{position:absolute;bottom:50%;left:50%;transform-origin:bottom;border-top-left-radius:.5rem;border-top-right-radius:.5rem}.axm-analog-clock-hand:after{content:\"\";position:absolute;left:0;width:100%}.axm-analog-clock-hour-hand{z-index:20;height:25%;width:2.7cqw;--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.axm-analog-clock-hour-hand:after{bottom:-20%;height:20%;--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.axm-analog-clock-minute-hand{z-index:30;height:35%;width:2.1cqw;--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.axm-analog-clock-minute-hand:after{bottom:-20%;height:20%;--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.axm-analog-clock-second-hand{z-index:40;height:42%;width:1.5cqw;--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.axm-analog-clock-second-hand:after{bottom:-20%;height:20%;--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.axm-analog-clock-center-point{position:absolute;top:50%;left:50%;z-index:50;height:9cqw;width:9cqw;--tw-translate-x: -50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;border-width:1.8cqw;--tw-border-opacity: 1;border-color:rgb(0 0 0 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMAnalogClockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-analog-clock', standalone: true, imports: [CommonModule], template: `
+    <div class="axm-analog-clock-container">
+      <div class="axm-analog-clock-face">
+        <div class="axm-analog-clock-marks-container">
+          @for (line of hourLines; track $index) {
+            <div class="axm-analog-clock-hour-line" [style.transform]="line.transform">
+              <div class="axm-analog-clock-hour-line-inner"></div>
+            </div>
+          }
+          @for (dot of dots; track $index) {
+            <div class="axm-analog-clock-dot-line" [style.transform]="dot.transform">
+              <div class="axm-analog-clock-dot-line-inner"></div>
+            </div>
+          }
+        </div>
+
+        @if (showNumbers()) {
+          <div class="axm-analog-clock-numbers-container">
+            @for (num of hourNumbers; track num.value) {
+              <div class="axm-analog-clock-hour-number" [style.top]="num.top" [style.left]="num.left">
+                {{ num.value }}
+              </div>
+            }
+          </div>
+        }
+        <div class="axm-analog-clock-hands">
+          <div class="axm-analog-clock-hand axm-analog-clock-hour-hand" [style.transform]="hourHandTransform()"></div>
+          <div
+            class="axm-analog-clock-hand axm-analog-clock-minute-hand"
+            [style.transform]="minuteHandTransform()"
+          ></div>
+          <div
+            class="axm-analog-clock-hand axm-analog-clock-second-hand"
+            [style.transform]="secondHandTransform()"
+          ></div>
+          <div class="axm-analog-clock-center-point"></div>
+        </div>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:grid;width:100%;height:100%;place-items:center}.axm-analog-clock-container{position:relative;max-height:100%;width:100%;aspect-ratio:1;container-type:inline-size}.axm-analog-clock-face{position:relative;height:100%;width:100%}.axm-analog-clock-marks-container,.axm-analog-clock-numbers-container,.axm-analog-clock-hands{position:absolute;top:0;right:0;bottom:0;left:0}.axm-analog-clock-hour-line,.axm-analog-clock-dot-line{position:absolute;bottom:50%;left:50%;height:50%;transform-origin:bottom}.axm-analog-clock-hour-line{width:1.8cqw}.axm-analog-clock-dot-line{width:2.4cqw}.axm-analog-clock-hour-line-inner{position:absolute;top:6cqw;left:50%;height:5.5cqw;width:100%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.axm-analog-clock-dot-line-inner{position:absolute;top:6cqw;left:50%;height:2.4cqw;width:100%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1))}.axm-analog-clock-hour-number{position:absolute;--tw-translate-x: -50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));font-size:12cqw;font-weight:500;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.axm-analog-clock-hand{position:absolute;bottom:50%;left:50%;transform-origin:bottom;border-top-left-radius:.5rem;border-top-right-radius:.5rem}.axm-analog-clock-hand:after{content:\"\";position:absolute;left:0;width:100%}.axm-analog-clock-hour-hand{z-index:20;height:25%;width:2.7cqw;--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.axm-analog-clock-hour-hand:after{bottom:-20%;height:20%;--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.axm-analog-clock-minute-hand{z-index:30;height:35%;width:2.1cqw;--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.axm-analog-clock-minute-hand:after{bottom:-20%;height:20%;--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.axm-analog-clock-second-hand{z-index:40;height:42%;width:1.5cqw;--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.axm-analog-clock-second-hand:after{bottom:-20%;height:20%;--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.axm-analog-clock-center-point{position:absolute;top:50%;left:50%;z-index:50;height:9cqw;width:9cqw;--tw-translate-x: -50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;border-width:1.8cqw;--tw-border-opacity: 1;border-color:rgb(0 0 0 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}\n"] }]
+        }], ctorParameters: () => [] });
+
+class AXMClockWidgetViewComponent extends AXPLayoutWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.timezone = computed(() => this.options()?.timezone);
+        this.others = computed(() => (this.options()?.others ?? []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMClockWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXMClockWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-size-full ax-p-4">
+      <div class="ax-flex ax-items-center ax-justify-center ax-gap-4 ax-w-full ax-flex-wrap">
+        <div class="ax-flex-1 ax-max-w-[50%] ax-min-w-[110px] ax-aspect-square">
+          <axm-analog-clock [timezone]="timezone()?.iana"></axm-analog-clock>
+        </div>
+        @if (timezone()?.abbr) {
+          <div class="ax-flex ax-flex-col ax-items-center ax-justify-center">
+            <span class="ax-text-xl">{{ timezone()?.code }}</span>
+            <span class="ax-text-3xl">{{ timezone()?.abbr }}</span>
+          </div>
+        }
+      </div>
+
+      <div class="ax-w-full ax-flex ax-gap-2 ax-items-start ax-justify-center ax-flex-wrap ax-pt-8">
+        @for (clock of others(); track clock.code) {
+          <div class="ax-flex ax-flex-col ax-items-center ax-gap-1">
+            <div class="ax-w-full ax-aspect-square" style="min-width: 75px; max-width: 150px;">
+              <axm-analog-clock [timezone]="clock.iana" [showNumbers]="false"></axm-analog-clock>
+            </div>
+            @if (clock.abbr) {
+              <span class="ax-text-xl ax-text-center">{{ clock.abbr }}</span>
+            }
+          </div>
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXMAnalogClockComponent, selector: "axm-analog-clock", inputs: ["timezone", "showNumbers"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMClockWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{ template: `
+    <div class="ax-size-full ax-p-4">
+      <div class="ax-flex ax-items-center ax-justify-center ax-gap-4 ax-w-full ax-flex-wrap">
+        <div class="ax-flex-1 ax-max-w-[50%] ax-min-w-[110px] ax-aspect-square">
+          <axm-analog-clock [timezone]="timezone()?.iana"></axm-analog-clock>
+        </div>
+        @if (timezone()?.abbr) {
+          <div class="ax-flex ax-flex-col ax-items-center ax-justify-center">
+            <span class="ax-text-xl">{{ timezone()?.code }}</span>
+            <span class="ax-text-3xl">{{ timezone()?.abbr }}</span>
+          </div>
+        }
+      </div>
+
+      <div class="ax-w-full ax-flex ax-gap-2 ax-items-start ax-justify-center ax-flex-wrap ax-pt-8">
+        @for (clock of others(); track clock.code) {
+          <div class="ax-flex ax-flex-col ax-items-center ax-gap-1">
+            <div class="ax-w-full ax-aspect-square" style="min-width: 75px; max-width: 150px;">
+              <axm-analog-clock [timezone]="clock.iana" [showNumbers]="false"></axm-analog-clock>
+            </div>
+            @if (clock.abbr) {
+              <span class="ax-text-xl ax-text-center">{{ clock.abbr }}</span>
+            }
+          </div>
+        }
+      </div>
+    </div>
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXMAnalogClockComponent], styles: [":host{display:block;width:100%;height:100%}\n"] }]
+        }] });
+
+var analogClockWidgetView_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXMClockWidgetViewComponent: AXMClockWidgetViewComponent
+});
+
+const AXPAnalogClockWidget = {
+    name: 'analog-clock',
+    title: 'Analog Clock',
+    description: '',
+    type: 'view',
+    categories: [],
+    groups: [AXPWidgetGroupEnum.DashboardWidget],
+    icon: 'fa-solid fa-square',
+    properties: [
+        {
+            name: 'timezone',
+            title: '@dashboard:widgets.analog-clock.timezone',
+            group: AXP_DATA_PROPERTY_GROUP,
+            schema: {
+                dataType: 'object',
+                interface: {
+                    name: 'timezone',
+                    path: 'options.timezone',
+                    type: AXPWidgetsCatalog.select,
+                    options: {
+                        dataSource: 'timezones',
+                        textField: 'title',
+                        valueField: 'code',
+                    },
+                },
+            },
+            visible: true,
+            order: 1,
+        },
+        {
+            name: 'others',
+            title: '@dashboard:widgets.analog-clock.other-timezones',
+            group: AXP_DATA_PROPERTY_GROUP,
+            schema: {
+                dataType: 'object',
+                interface: {
+                    name: 'others',
+                    path: 'options.others',
+                    type: AXPWidgetsCatalog.select,
+                    options: {
+                        multiple: true,
+                        dataSource: 'timezones',
+                        textField: 'title',
+                        valueField: 'code',
+                    },
+                },
+            },
+            visible: true,
+            order: 2,
+        },
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return analogClockWidgetView_component; }).then((c) => c.AXMClockWidgetViewComponent),
+        },
+    },
+};
+
 /**
  * Bar Chart Widget Component
  * Renders data as vertical bars with interactive hover effects and animations
@@ -2372,7 +2689,7 @@ class AXPTaskListWidgetViewComponent extends AXPValueWidgetComponent {
         return Math.floor(diffMs / (1000 * 60 * 60 * 24));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPTaskListWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPTaskListWidgetViewComponent, isStandalone: true, selector: "ng-component", outputs: { taskClick: "taskClick", taskCompleted: "taskCompleted" }, providers: [DatePipe], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-size-full ax-p-4 ax-flex ax-flex-col\">\n  <!-- Header -->\n  <div class=\"ax-flex ax-justify-between ax-items-center\">\n    <h3 class=\"ax-text-lg ax-font-semibold ax-flex ax-items-center ax-gap-2\">\n      <ax-icon class=\"ax-text-primary-500\">\n        <i class=\"fa-light fa-clipboard-list-check\"></i>\n      </ax-icon>\n      {{ 'tasklist.title' | translate: { scope: 'dashboard' } | async }}\n    </h3>\n    <div class=\"ax-flex ax-gap-2\">\n      @if (getPendingTaskCount() > 0) {\n        <ax-badge\n          [text]=\"getPendingTaskCount() + ' ' + ('tasklist.pending' | translate: { scope: 'dashboard' } | async)\"\n          [color]=\"'warning'\"\n          size=\"sm\"\n          class=\"ax-ml-1\"\n        >\n        </ax-badge>\n      }\n      @if (getCompletedTaskCount() > 0) {\n        <ax-badge\n          [text]=\"getCompletedTaskCount() + ' ' + ('tasklist.completed' | translate: { scope: 'dashboard' } | async)\"\n          [color]=\"'success'\"\n          size=\"sm\"\n          class=\"ax-ml-1\"\n        >\n        </ax-badge>\n      }\n    </div>\n  </div>\n\n  <!-- Task List -->\n  <div class=\"ax-space-y-4 ax-my-4 ax-px-1 ax-overflow-auto ax-grow\">\n    @if (showCategories() && hasCategories()) {\n      <!-- Categorized Tasks -->\n      @for (category of getCategories(); track category) {\n        <div class=\"ax-mb-5\">\n          <!-- Category Header -->\n          <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3 ax-h-5\">\n            <h4 class=\"ax-font-medium category-header\">{{ category }}</h4>\n            @if (getCategoryTaskCount(category)) {\n              <ax-badge\n                [text]=\"getCategoryTaskCount(category).toString()\"\n                [color]=\"'primary'\"\n                size=\"sm\"\n                class=\"ax-rounded-full\"\n              ></ax-badge>\n            }\n          </div>\n          <!-- Tasks in Category -->\n          <div class=\"ax-space-y-2\">\n            @for (task of getTasksByCategory(category); track task.id) {\n              <ng-container\n                [ngTemplateOutlet]=\"taskItemTemplateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: task }\"\n              ></ng-container>\n            }\n          </div>\n        </div>\n      }\n    } @else {\n      <!-- Uncategorized Tasks -->\n      <div class=\"ax-space-y-2\">\n        @for (task of taskItems(); track task.id) {\n          <ng-container\n            [ngTemplateOutlet]=\"taskItemTemplateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: task }\"\n          ></ng-container>\n        } @empty {\n          <!-- Empty State -->\n          <div\n            class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-14 ax-px-4 ax-text-gray-400 empty-state\"\n          >\n            <ax-icon class=\"ax-text-5xl ax-mb-3 ax-text-gray-300\">\n              <i class=\"fa-light fa-clipboard-list-check\"></i>\n            </ax-icon>\n            <p class=\"ax-text-center ax-font-medium\">\n              {{ 'tasklist.noTasks' | translate: { scope: 'dashboard' } | async }}\n            </p>\n            <p class=\"ax-text-center ax-text-sm ax-mt-2\">\n              {{ 'tasklist.addTask' | translate: { scope: 'dashboard' } | async }}\n            </p>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Task Item Template -->\n<ng-template #taskItemTemplateRef let-task>\n  <div\n    class=\"ax-flex ax-gap-3 ax-items-start ax-p-3 ax-rounded-lg task-item\"\n    [class.priority-high]=\"task.priority === 'high'\"\n    [class.priority-medium]=\"task.priority === 'medium'\"\n    [class.priority-low]=\"task.priority === 'low'\"\n    [class.ax-bg-surface]=\"task.completed\"\n  >\n    <!-- Checkbox -->\n    <ax-check-box\n      class=\"ax-flex-shrink-0 ax-mt-1 task-checkbox\"\n      [value]=\"task.completed\"\n      [disabled]=\"!allowMarkComplete()\"\n      (valueChange)=\"onTaskCompletionChange(task, $event)\"\n    >\n    </ax-check-box>\n\n    <!-- Task Details -->\n    <div class=\"ax-overflow-hidden ax-grow ax-text-start\" (click)=\"onTaskClick(task)\">\n      <!-- Title and Priority -->\n      <div class=\"ax-flex ax-items-center ax-gap-2\">\n        <h6 class=\"ax-font-medium ax-truncate ax-pb-1\" [title]=\"task.title\" [class.task-completed]=\"task.completed\">\n          {{ task.title }}\n        </h6>\n        @if (showPriority() && task.priority) {\n          <ax-badge\n            [color]=\"getPriorityColor(task.priority)\"\n            [text]=\"task.priority\"\n            size=\"sm\"\n            class=\"ax-ml-1 ax-rounded-full\"\n          ></ax-badge>\n        }\n      </div>\n\n      <!-- Metadata -->\n      <div class=\"ax-flex ax-flex-wrap ax-gap-x-3 ax-gap-y-1 ax-mt-2 ax-text-xs ax-text-gray-500\">\n        @if (showDate() && task.dueDate) {\n          <span\n            class=\"ax-flex ax-items-center ax-gap-1 due-date\"\n            [class.ax-text-danger-500]=\"getDaysDifference(task.dueDate) < 0\"\n            [class.overdue]=\"getDaysDifference(task.dueDate) < 0\"\n          >\n            <ax-icon><i class=\"fa-light fa-calendar\"></i></ax-icon>\n            {{ formatDueDate(task.dueDate) }}\n          </span>\n        }\n        @if (showAssignee() && task.assignedTo) {\n          <span class=\"ax-flex ax-items-center ax-gap-1\">\n            @if (task.assignedTo.image) {\n              <ax-icon class=\"ax-bg-primary-100 ax-text-primary-500 ax-rounded-full ax-p-1\">\n                <i class=\"fa-light fa-user\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon><i class=\"fa-light fa-user\"></i></ax-icon>\n            }\n            {{ task.assignedTo.name }}\n          </span>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;height:100%;width:100%}.task-item{border-radius:8px;transition:all .2s ease-in-out;border-left:3px solid transparent}.task-item:hover{background-color:rgba(var(--ax-sys-color-on-surface),.1);transform:translateY(-2px);box-shadow:0 2px 8px rgba(0,0,0,.05)}.task-item.priority-high{border-left-color:rgb(var(--ax-sys-color-danger-500))}.task-item.priority-medium{border-left-color:rgb(var(--ax-sys-color-warning-500))}.task-item.priority-low{border-left-color:rgb(var(--ax-sys-color-success-500))}.task-item:active{transform:translateY(0);box-shadow:0 1px 3px rgba(0,0,0,.05)}.task-completed{text-decoration:line-through;color:var(--ax-text-secondary);opacity:.7;transition:all .3s ease}.category-header{position:relative}.category-header:after{content:\"\";position:absolute;bottom:-8px;left:0;width:40px;height:3px;background-color:var(--ax-primary-500);border-radius:3px;transition:width .3s ease}.category-header:hover:after{width:60px}.empty-state{animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.task-checkbox ::ng-deep .ax-checkbox{transition:all .2s ease}.task-checkbox ::ng-deep .ax-checkbox:hover{transform:scale(1.1)}.due-date.overdue{animation:pulse 2s infinite}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}.ax-space-y-2>*{animation:slideInRight .3s ease forwards;opacity:0}.ax-space-y-2>*:nth-child(1){animation-delay:.05s}.ax-space-y-2>*:nth-child(2){animation-delay:.1s}.ax-space-y-2>*:nth-child(3){animation-delay:.15s}.ax-space-y-2>*:nth-child(4){animation-delay:.2s}.ax-space-y-2>*:nth-child(5){animation-delay:.25s}.ax-space-y-2>*:nth-child(6){animation-delay:.3s}.ax-space-y-2>*:nth-child(7){animation-delay:.35s}.ax-space-y-2>*:nth-child(8){animation-delay:.4s}.ax-space-y-2>*:nth-child(9){animation-delay:.45s}.ax-space-y-2>*:nth-child(10){animation-delay:.5s}@keyframes slideInRight{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i4.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2$3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPTaskListWidgetViewComponent, isStandalone: true, selector: "ng-component", outputs: { taskClick: "taskClick", taskCompleted: "taskCompleted" }, providers: [DatePipe], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-size-full ax-p-4 ax-flex ax-flex-col\">\n  <!-- Header -->\n  <div class=\"ax-flex ax-justify-between ax-items-center\">\n    <h3 class=\"ax-text-lg ax-font-semibold ax-flex ax-items-center ax-gap-2\">\n      <ax-icon class=\"ax-text-primary-500\">\n        <i class=\"fa-light fa-clipboard-list-check\"></i>\n      </ax-icon>\n      {{ 'tasklist.title' | translate: { scope: 'dashboard' } | async }}\n    </h3>\n    <div class=\"ax-flex ax-gap-2\">\n      @if (getPendingTaskCount() > 0) {\n        <ax-badge\n          [text]=\"getPendingTaskCount() + ' ' + ('tasklist.pending' | translate: { scope: 'dashboard' } | async)\"\n          [color]=\"'warning'\"\n          size=\"sm\"\n          class=\"ax-ml-1\"\n        >\n        </ax-badge>\n      }\n      @if (getCompletedTaskCount() > 0) {\n        <ax-badge\n          [text]=\"getCompletedTaskCount() + ' ' + ('tasklist.completed' | translate: { scope: 'dashboard' } | async)\"\n          [color]=\"'success'\"\n          size=\"sm\"\n          class=\"ax-ml-1\"\n        >\n        </ax-badge>\n      }\n    </div>\n  </div>\n\n  <!-- Task List -->\n  <div class=\"ax-space-y-4 ax-my-4 ax-px-1 ax-overflow-auto ax-grow\">\n    @if (showCategories() && hasCategories()) {\n      <!-- Categorized Tasks -->\n      @for (category of getCategories(); track category) {\n        <div class=\"ax-mb-5\">\n          <!-- Category Header -->\n          <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3 ax-h-5\">\n            <h4 class=\"ax-font-medium category-header\">{{ category }}</h4>\n            @if (getCategoryTaskCount(category)) {\n              <ax-badge\n                [text]=\"getCategoryTaskCount(category).toString()\"\n                [color]=\"'primary'\"\n                size=\"sm\"\n                class=\"ax-rounded-full\"\n              ></ax-badge>\n            }\n          </div>\n          <!-- Tasks in Category -->\n          <div class=\"ax-space-y-2\">\n            @for (task of getTasksByCategory(category); track task.id) {\n              <ng-container\n                [ngTemplateOutlet]=\"taskItemTemplateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: task }\"\n              ></ng-container>\n            }\n          </div>\n        </div>\n      }\n    } @else {\n      <!-- Uncategorized Tasks -->\n      <div class=\"ax-space-y-2\">\n        @for (task of taskItems(); track task.id) {\n          <ng-container\n            [ngTemplateOutlet]=\"taskItemTemplateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: task }\"\n          ></ng-container>\n        } @empty {\n          <!-- Empty State -->\n          <div\n            class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-14 ax-px-4 ax-text-gray-400 empty-state\"\n          >\n            <ax-icon class=\"ax-text-5xl ax-mb-3 ax-text-gray-300\">\n              <i class=\"fa-light fa-clipboard-list-check\"></i>\n            </ax-icon>\n            <p class=\"ax-text-center ax-font-medium\">\n              {{ 'tasklist.noTasks' | translate: { scope: 'dashboard' } | async }}\n            </p>\n            <p class=\"ax-text-center ax-text-sm ax-mt-2\">\n              {{ 'tasklist.addTask' | translate: { scope: 'dashboard' } | async }}\n            </p>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Task Item Template -->\n<ng-template #taskItemTemplateRef let-task>\n  <div\n    class=\"ax-flex ax-gap-3 ax-items-start ax-p-3 task-item\"\n    [class.priority-high]=\"task.priority === 'high'\"\n    [class.priority-medium]=\"task.priority === 'medium'\"\n    [class.priority-low]=\"task.priority === 'low'\"\n  >\n    <!-- Checkbox -->\n    <ax-check-box\n      class=\"ax-flex-shrink-0 ax-mt-1 task-checkbox\"\n      [value]=\"task.completed\"\n      [disabled]=\"!allowMarkComplete()\"\n      (valueChange)=\"onTaskCompletionChange(task, $event)\"\n    >\n    </ax-check-box>\n\n    <!-- Task Details -->\n    <div class=\"ax-overflow-hidden ax-grow ax-text-start\" (click)=\"onTaskClick(task)\">\n      <!-- Title and Priority -->\n      <div class=\"ax-flex ax-items-center ax-gap-2\">\n        <h6 class=\"ax-font-medium ax-truncate ax-pb-1\" [title]=\"task.title\" [class.task-completed]=\"task.completed\">\n          {{ task.title }}\n        </h6>\n        @if (showPriority() && task.priority) {\n          <ax-badge\n            [color]=\"getPriorityColor(task.priority)\"\n            [text]=\"task.priority\"\n            size=\"sm\"\n            class=\"ax-ml-1 ax-rounded-full\"\n          ></ax-badge>\n        }\n      </div>\n\n      <!-- Metadata -->\n      <div class=\"ax-flex ax-flex-wrap ax-gap-x-3 ax-gap-y-1 ax-mt-2 ax-text-xs ax-text-gray-500\">\n        @if (showDate() && task.dueDate) {\n          <span\n            class=\"ax-flex ax-items-center ax-gap-1 due-date\"\n            [class.ax-text-danger-500]=\"getDaysDifference(task.dueDate) < 0\"\n            [class.overdue]=\"getDaysDifference(task.dueDate) < 0\"\n          >\n            <ax-icon><i class=\"fa-light fa-calendar\"></i></ax-icon>\n            {{ formatDueDate(task.dueDate) }}\n          </span>\n        }\n        @if (showAssignee() && task.assignedTo) {\n          <span class=\"ax-flex ax-items-center ax-gap-1\">\n            @if (task.assignedTo.image) {\n              <ax-icon class=\"ax-bg-primary-100 ax-text-primary-500 ax-rounded-full ax-p-1\">\n                <i class=\"fa-light fa-user\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon><i class=\"fa-light fa-user\"></i></ax-icon>\n            }\n            {{ task.assignedTo.name }}\n          </span>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;height:100%;width:100%}.task-item{transition:all .2s ease-in-out;border-left:3px solid transparent}.task-item:hover{background-color:rgba(var(--ax-sys-color-on-surface),.1);transform:translateY(-2px);box-shadow:0 2px 8px rgba(0,0,0,.05)}.task-item.priority-high{border-left-color:rgb(var(--ax-sys-color-danger-500))}.task-item.priority-medium{border-left-color:rgb(var(--ax-sys-color-warning-500))}.task-item.priority-low{border-left-color:rgb(var(--ax-sys-color-success-500))}.task-item:active{transform:translateY(0);box-shadow:0 1px 3px rgba(0,0,0,.05)}.task-completed{text-decoration:line-through;color:var(--ax-text-secondary);opacity:.7;transition:all .3s ease}.category-header{position:relative}.category-header:after{content:\"\";position:absolute;bottom:-8px;left:0;width:40px;height:3px;background-color:var(--ax-primary-500);border-radius:3px;transition:width .3s ease}.category-header:hover:after{width:60px}.empty-state{animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.task-checkbox ::ng-deep .ax-checkbox{transition:all .2s ease}.task-checkbox ::ng-deep .ax-checkbox:hover{transform:scale(1.1)}.due-date.overdue{animation:pulse 2s infinite}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}.ax-space-y-2>*{animation:slideInRight .3s ease forwards;opacity:0}.ax-space-y-2>*:nth-child(1){animation-delay:.05s}.ax-space-y-2>*:nth-child(2){animation-delay:.1s}.ax-space-y-2>*:nth-child(3){animation-delay:.15s}.ax-space-y-2>*:nth-child(4){animation-delay:.2s}.ax-space-y-2>*:nth-child(5){animation-delay:.25s}.ax-space-y-2>*:nth-child(6){animation-delay:.3s}.ax-space-y-2>*:nth-child(7){animation-delay:.35s}.ax-space-y-2>*:nth-child(8){animation-delay:.4s}.ax-space-y-2>*:nth-child(9){animation-delay:.45s}.ax-space-y-2>*:nth-child(10){animation-delay:.5s}@keyframes slideInRight{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "text", "look"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i4.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2$3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPTaskListWidgetViewComponent, decorators: [{
             type: Component,
@@ -2387,7 +2704,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AXCheckBoxModule,
                         AXLabelModule,
                         AXTranslationModule,
-                    ], providers: [DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-size-full ax-p-4 ax-flex ax-flex-col\">\n  <!-- Header -->\n  <div class=\"ax-flex ax-justify-between ax-items-center\">\n    <h3 class=\"ax-text-lg ax-font-semibold ax-flex ax-items-center ax-gap-2\">\n      <ax-icon class=\"ax-text-primary-500\">\n        <i class=\"fa-light fa-clipboard-list-check\"></i>\n      </ax-icon>\n      {{ 'tasklist.title' | translate: { scope: 'dashboard' } | async }}\n    </h3>\n    <div class=\"ax-flex ax-gap-2\">\n      @if (getPendingTaskCount() > 0) {\n        <ax-badge\n          [text]=\"getPendingTaskCount() + ' ' + ('tasklist.pending' | translate: { scope: 'dashboard' } | async)\"\n          [color]=\"'warning'\"\n          size=\"sm\"\n          class=\"ax-ml-1\"\n        >\n        </ax-badge>\n      }\n      @if (getCompletedTaskCount() > 0) {\n        <ax-badge\n          [text]=\"getCompletedTaskCount() + ' ' + ('tasklist.completed' | translate: { scope: 'dashboard' } | async)\"\n          [color]=\"'success'\"\n          size=\"sm\"\n          class=\"ax-ml-1\"\n        >\n        </ax-badge>\n      }\n    </div>\n  </div>\n\n  <!-- Task List -->\n  <div class=\"ax-space-y-4 ax-my-4 ax-px-1 ax-overflow-auto ax-grow\">\n    @if (showCategories() && hasCategories()) {\n      <!-- Categorized Tasks -->\n      @for (category of getCategories(); track category) {\n        <div class=\"ax-mb-5\">\n          <!-- Category Header -->\n          <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3 ax-h-5\">\n            <h4 class=\"ax-font-medium category-header\">{{ category }}</h4>\n            @if (getCategoryTaskCount(category)) {\n              <ax-badge\n                [text]=\"getCategoryTaskCount(category).toString()\"\n                [color]=\"'primary'\"\n                size=\"sm\"\n                class=\"ax-rounded-full\"\n              ></ax-badge>\n            }\n          </div>\n          <!-- Tasks in Category -->\n          <div class=\"ax-space-y-2\">\n            @for (task of getTasksByCategory(category); track task.id) {\n              <ng-container\n                [ngTemplateOutlet]=\"taskItemTemplateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: task }\"\n              ></ng-container>\n            }\n          </div>\n        </div>\n      }\n    } @else {\n      <!-- Uncategorized Tasks -->\n      <div class=\"ax-space-y-2\">\n        @for (task of taskItems(); track task.id) {\n          <ng-container\n            [ngTemplateOutlet]=\"taskItemTemplateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: task }\"\n          ></ng-container>\n        } @empty {\n          <!-- Empty State -->\n          <div\n            class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-14 ax-px-4 ax-text-gray-400 empty-state\"\n          >\n            <ax-icon class=\"ax-text-5xl ax-mb-3 ax-text-gray-300\">\n              <i class=\"fa-light fa-clipboard-list-check\"></i>\n            </ax-icon>\n            <p class=\"ax-text-center ax-font-medium\">\n              {{ 'tasklist.noTasks' | translate: { scope: 'dashboard' } | async }}\n            </p>\n            <p class=\"ax-text-center ax-text-sm ax-mt-2\">\n              {{ 'tasklist.addTask' | translate: { scope: 'dashboard' } | async }}\n            </p>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Task Item Template -->\n<ng-template #taskItemTemplateRef let-task>\n  <div\n    class=\"ax-flex ax-gap-3 ax-items-start ax-p-3 ax-rounded-lg task-item\"\n    [class.priority-high]=\"task.priority === 'high'\"\n    [class.priority-medium]=\"task.priority === 'medium'\"\n    [class.priority-low]=\"task.priority === 'low'\"\n    [class.ax-bg-surface]=\"task.completed\"\n  >\n    <!-- Checkbox -->\n    <ax-check-box\n      class=\"ax-flex-shrink-0 ax-mt-1 task-checkbox\"\n      [value]=\"task.completed\"\n      [disabled]=\"!allowMarkComplete()\"\n      (valueChange)=\"onTaskCompletionChange(task, $event)\"\n    >\n    </ax-check-box>\n\n    <!-- Task Details -->\n    <div class=\"ax-overflow-hidden ax-grow ax-text-start\" (click)=\"onTaskClick(task)\">\n      <!-- Title and Priority -->\n      <div class=\"ax-flex ax-items-center ax-gap-2\">\n        <h6 class=\"ax-font-medium ax-truncate ax-pb-1\" [title]=\"task.title\" [class.task-completed]=\"task.completed\">\n          {{ task.title }}\n        </h6>\n        @if (showPriority() && task.priority) {\n          <ax-badge\n            [color]=\"getPriorityColor(task.priority)\"\n            [text]=\"task.priority\"\n            size=\"sm\"\n            class=\"ax-ml-1 ax-rounded-full\"\n          ></ax-badge>\n        }\n      </div>\n\n      <!-- Metadata -->\n      <div class=\"ax-flex ax-flex-wrap ax-gap-x-3 ax-gap-y-1 ax-mt-2 ax-text-xs ax-text-gray-500\">\n        @if (showDate() && task.dueDate) {\n          <span\n            class=\"ax-flex ax-items-center ax-gap-1 due-date\"\n            [class.ax-text-danger-500]=\"getDaysDifference(task.dueDate) < 0\"\n            [class.overdue]=\"getDaysDifference(task.dueDate) < 0\"\n          >\n            <ax-icon><i class=\"fa-light fa-calendar\"></i></ax-icon>\n            {{ formatDueDate(task.dueDate) }}\n          </span>\n        }\n        @if (showAssignee() && task.assignedTo) {\n          <span class=\"ax-flex ax-items-center ax-gap-1\">\n            @if (task.assignedTo.image) {\n              <ax-icon class=\"ax-bg-primary-100 ax-text-primary-500 ax-rounded-full ax-p-1\">\n                <i class=\"fa-light fa-user\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon><i class=\"fa-light fa-user\"></i></ax-icon>\n            }\n            {{ task.assignedTo.name }}\n          </span>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;height:100%;width:100%}.task-item{border-radius:8px;transition:all .2s ease-in-out;border-left:3px solid transparent}.task-item:hover{background-color:rgba(var(--ax-sys-color-on-surface),.1);transform:translateY(-2px);box-shadow:0 2px 8px rgba(0,0,0,.05)}.task-item.priority-high{border-left-color:rgb(var(--ax-sys-color-danger-500))}.task-item.priority-medium{border-left-color:rgb(var(--ax-sys-color-warning-500))}.task-item.priority-low{border-left-color:rgb(var(--ax-sys-color-success-500))}.task-item:active{transform:translateY(0);box-shadow:0 1px 3px rgba(0,0,0,.05)}.task-completed{text-decoration:line-through;color:var(--ax-text-secondary);opacity:.7;transition:all .3s ease}.category-header{position:relative}.category-header:after{content:\"\";position:absolute;bottom:-8px;left:0;width:40px;height:3px;background-color:var(--ax-primary-500);border-radius:3px;transition:width .3s ease}.category-header:hover:after{width:60px}.empty-state{animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.task-checkbox ::ng-deep .ax-checkbox{transition:all .2s ease}.task-checkbox ::ng-deep .ax-checkbox:hover{transform:scale(1.1)}.due-date.overdue{animation:pulse 2s infinite}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}.ax-space-y-2>*{animation:slideInRight .3s ease forwards;opacity:0}.ax-space-y-2>*:nth-child(1){animation-delay:.05s}.ax-space-y-2>*:nth-child(2){animation-delay:.1s}.ax-space-y-2>*:nth-child(3){animation-delay:.15s}.ax-space-y-2>*:nth-child(4){animation-delay:.2s}.ax-space-y-2>*:nth-child(5){animation-delay:.25s}.ax-space-y-2>*:nth-child(6){animation-delay:.3s}.ax-space-y-2>*:nth-child(7){animation-delay:.35s}.ax-space-y-2>*:nth-child(8){animation-delay:.4s}.ax-space-y-2>*:nth-child(9){animation-delay:.45s}.ax-space-y-2>*:nth-child(10){animation-delay:.5s}@keyframes slideInRight{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}\n"] }]
+                    ], providers: [DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-size-full ax-p-4 ax-flex ax-flex-col\">\n  <!-- Header -->\n  <div class=\"ax-flex ax-justify-between ax-items-center\">\n    <h3 class=\"ax-text-lg ax-font-semibold ax-flex ax-items-center ax-gap-2\">\n      <ax-icon class=\"ax-text-primary-500\">\n        <i class=\"fa-light fa-clipboard-list-check\"></i>\n      </ax-icon>\n      {{ 'tasklist.title' | translate: { scope: 'dashboard' } | async }}\n    </h3>\n    <div class=\"ax-flex ax-gap-2\">\n      @if (getPendingTaskCount() > 0) {\n        <ax-badge\n          [text]=\"getPendingTaskCount() + ' ' + ('tasklist.pending' | translate: { scope: 'dashboard' } | async)\"\n          [color]=\"'warning'\"\n          size=\"sm\"\n          class=\"ax-ml-1\"\n        >\n        </ax-badge>\n      }\n      @if (getCompletedTaskCount() > 0) {\n        <ax-badge\n          [text]=\"getCompletedTaskCount() + ' ' + ('tasklist.completed' | translate: { scope: 'dashboard' } | async)\"\n          [color]=\"'success'\"\n          size=\"sm\"\n          class=\"ax-ml-1\"\n        >\n        </ax-badge>\n      }\n    </div>\n  </div>\n\n  <!-- Task List -->\n  <div class=\"ax-space-y-4 ax-my-4 ax-px-1 ax-overflow-auto ax-grow\">\n    @if (showCategories() && hasCategories()) {\n      <!-- Categorized Tasks -->\n      @for (category of getCategories(); track category) {\n        <div class=\"ax-mb-5\">\n          <!-- Category Header -->\n          <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3 ax-h-5\">\n            <h4 class=\"ax-font-medium category-header\">{{ category }}</h4>\n            @if (getCategoryTaskCount(category)) {\n              <ax-badge\n                [text]=\"getCategoryTaskCount(category).toString()\"\n                [color]=\"'primary'\"\n                size=\"sm\"\n                class=\"ax-rounded-full\"\n              ></ax-badge>\n            }\n          </div>\n          <!-- Tasks in Category -->\n          <div class=\"ax-space-y-2\">\n            @for (task of getTasksByCategory(category); track task.id) {\n              <ng-container\n                [ngTemplateOutlet]=\"taskItemTemplateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: task }\"\n              ></ng-container>\n            }\n          </div>\n        </div>\n      }\n    } @else {\n      <!-- Uncategorized Tasks -->\n      <div class=\"ax-space-y-2\">\n        @for (task of taskItems(); track task.id) {\n          <ng-container\n            [ngTemplateOutlet]=\"taskItemTemplateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: task }\"\n          ></ng-container>\n        } @empty {\n          <!-- Empty State -->\n          <div\n            class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-14 ax-px-4 ax-text-gray-400 empty-state\"\n          >\n            <ax-icon class=\"ax-text-5xl ax-mb-3 ax-text-gray-300\">\n              <i class=\"fa-light fa-clipboard-list-check\"></i>\n            </ax-icon>\n            <p class=\"ax-text-center ax-font-medium\">\n              {{ 'tasklist.noTasks' | translate: { scope: 'dashboard' } | async }}\n            </p>\n            <p class=\"ax-text-center ax-text-sm ax-mt-2\">\n              {{ 'tasklist.addTask' | translate: { scope: 'dashboard' } | async }}\n            </p>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Task Item Template -->\n<ng-template #taskItemTemplateRef let-task>\n  <div\n    class=\"ax-flex ax-gap-3 ax-items-start ax-p-3 task-item\"\n    [class.priority-high]=\"task.priority === 'high'\"\n    [class.priority-medium]=\"task.priority === 'medium'\"\n    [class.priority-low]=\"task.priority === 'low'\"\n  >\n    <!-- Checkbox -->\n    <ax-check-box\n      class=\"ax-flex-shrink-0 ax-mt-1 task-checkbox\"\n      [value]=\"task.completed\"\n      [disabled]=\"!allowMarkComplete()\"\n      (valueChange)=\"onTaskCompletionChange(task, $event)\"\n    >\n    </ax-check-box>\n\n    <!-- Task Details -->\n    <div class=\"ax-overflow-hidden ax-grow ax-text-start\" (click)=\"onTaskClick(task)\">\n      <!-- Title and Priority -->\n      <div class=\"ax-flex ax-items-center ax-gap-2\">\n        <h6 class=\"ax-font-medium ax-truncate ax-pb-1\" [title]=\"task.title\" [class.task-completed]=\"task.completed\">\n          {{ task.title }}\n        </h6>\n        @if (showPriority() && task.priority) {\n          <ax-badge\n            [color]=\"getPriorityColor(task.priority)\"\n            [text]=\"task.priority\"\n            size=\"sm\"\n            class=\"ax-ml-1 ax-rounded-full\"\n          ></ax-badge>\n        }\n      </div>\n\n      <!-- Metadata -->\n      <div class=\"ax-flex ax-flex-wrap ax-gap-x-3 ax-gap-y-1 ax-mt-2 ax-text-xs ax-text-gray-500\">\n        @if (showDate() && task.dueDate) {\n          <span\n            class=\"ax-flex ax-items-center ax-gap-1 due-date\"\n            [class.ax-text-danger-500]=\"getDaysDifference(task.dueDate) < 0\"\n            [class.overdue]=\"getDaysDifference(task.dueDate) < 0\"\n          >\n            <ax-icon><i class=\"fa-light fa-calendar\"></i></ax-icon>\n            {{ formatDueDate(task.dueDate) }}\n          </span>\n        }\n        @if (showAssignee() && task.assignedTo) {\n          <span class=\"ax-flex ax-items-center ax-gap-1\">\n            @if (task.assignedTo.image) {\n              <ax-icon class=\"ax-bg-primary-100 ax-text-primary-500 ax-rounded-full ax-p-1\">\n                <i class=\"fa-light fa-user\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon><i class=\"fa-light fa-user\"></i></ax-icon>\n            }\n            {{ task.assignedTo.name }}\n          </span>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;height:100%;width:100%}.task-item{transition:all .2s ease-in-out;border-left:3px solid transparent}.task-item:hover{background-color:rgba(var(--ax-sys-color-on-surface),.1);transform:translateY(-2px);box-shadow:0 2px 8px rgba(0,0,0,.05)}.task-item.priority-high{border-left-color:rgb(var(--ax-sys-color-danger-500))}.task-item.priority-medium{border-left-color:rgb(var(--ax-sys-color-warning-500))}.task-item.priority-low{border-left-color:rgb(var(--ax-sys-color-success-500))}.task-item:active{transform:translateY(0);box-shadow:0 1px 3px rgba(0,0,0,.05)}.task-completed{text-decoration:line-through;color:var(--ax-text-secondary);opacity:.7;transition:all .3s ease}.category-header{position:relative}.category-header:after{content:\"\";position:absolute;bottom:-8px;left:0;width:40px;height:3px;background-color:var(--ax-primary-500);border-radius:3px;transition:width .3s ease}.category-header:hover:after{width:60px}.empty-state{animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.task-checkbox ::ng-deep .ax-checkbox{transition:all .2s ease}.task-checkbox ::ng-deep .ax-checkbox:hover{transform:scale(1.1)}.due-date.overdue{animation:pulse 2s infinite}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}.ax-space-y-2>*{animation:slideInRight .3s ease forwards;opacity:0}.ax-space-y-2>*:nth-child(1){animation-delay:.05s}.ax-space-y-2>*:nth-child(2){animation-delay:.1s}.ax-space-y-2>*:nth-child(3){animation-delay:.15s}.ax-space-y-2>*:nth-child(4){animation-delay:.2s}.ax-space-y-2>*:nth-child(5){animation-delay:.25s}.ax-space-y-2>*:nth-child(6){animation-delay:.3s}.ax-space-y-2>*:nth-child(7){animation-delay:.35s}.ax-space-y-2>*:nth-child(8){animation-delay:.4s}.ax-space-y-2>*:nth-child(9){animation-delay:.45s}.ax-space-y-2>*:nth-child(10){animation-delay:.5s}@keyframes slideInRight{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}\n"] }]
         }] });
 
 var tasklistWidget_component = /*#__PURE__*/Object.freeze({
@@ -2549,60 +2866,70 @@ class AXPWeatherApiAbstract {
                 id: 'sunny',
                 name: 'Sunny',
                 icon: 'fa-solid fa-sun',
+                svgIcon: 'day.svg',
                 color: '#ff9d00',
             },
             clearNight: {
                 id: 'clearNight',
                 name: 'Clear Night',
                 icon: 'fa-solid fa-moon',
+                svgIcon: 'night.svg',
                 color: '#5d639e',
             },
             partlyCloudy: {
                 id: 'partlyCloudy',
                 name: 'Partly Cloudy',
                 icon: 'fa-solid fa-cloud-sun',
+                svgIcon: 'cloudy-day-3.svg',
                 color: '#6ba4e8',
             },
             partlyCloudyNight: {
                 id: 'partlyCloudyNight',
                 name: 'Partly Cloudy Night',
                 icon: 'fa-solid fa-cloud-moon',
+                svgIcon: 'cloudy-night-3.svg',
                 color: '#5d639e',
             },
             cloudy: {
                 id: 'cloudy',
                 name: 'Cloudy',
                 icon: 'fa-solid fa-cloud',
+                svgIcon: 'cloudy.svg',
                 color: '#72869d',
             },
             rain: {
                 id: 'rain',
                 name: 'Rain',
                 icon: 'fa-solid fa-cloud-rain',
+                svgIcon: 'rainy-6.svg',
                 color: '#3a74ad',
             },
             showers: {
                 id: 'showers',
                 name: 'Showers',
                 icon: 'fa-solid fa-cloud-showers-heavy',
+                svgIcon: 'rainy-7.svg',
                 color: '#2c5d8c',
             },
             thunderstorm: {
                 id: 'thunderstorm',
                 name: 'Thunderstorm',
                 icon: 'fa-solid fa-bolt-lightning',
+                svgIcon: 'thunder.svg',
                 color: '#8834af',
             },
             snow: {
                 id: 'snow',
                 name: 'Snow',
                 icon: 'fa-solid fa-snowflake',
+                svgIcon: 'snowy-6.svg',
                 color: '#68a9cd',
             },
             mist: {
                 id: 'mist',
                 name: 'Mist',
                 icon: 'fa-solid fa-smog',
+                svgIcon: 'cloudy.svg',
                 color: '#94a3b8',
             },
         };
@@ -2642,6 +2969,7 @@ class AXPWeatherApiAbstract {
             id: 'unknown',
             name: 'Unknown',
             icon: 'fa-solid fa-question',
+            svgIcon: 'weather.svg',
             color: '#999999',
         };
     }
@@ -2890,6 +3218,7 @@ class AXPWeatherApiMockService extends AXPWeatherApiAbstract {
                     maxTempF,
                     minTempC,
                     minTempF,
+                    hour: [],
                 };
             });
             return { ...data, forecast };
@@ -3051,6 +3380,13 @@ class AXPWeatherApiService extends AXPWeatherApiAbstract {
                 maxTempF: day.day?.maxtemp_f || 0,
                 minTempC: day.day?.mintemp_c || 0,
                 minTempF: day.day?.mintemp_f || 0,
+                hour: day.hour.map((hour) => ({
+                    time: hour.time,
+                    condition: hour.condition.code,
+                    iconUrl: hour.condition.icon,
+                    tempC: hour.temp_c,
+                    tempF: hour.temp_f,
+                })),
             };
         });
         return weatherData;
@@ -3062,6 +3398,847 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             type: Injectable
         }] });
 
+class AXPAdvancedWeatherViewComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super();
+        this.weatherService = inject(AXPWeatherApiAbstract);
+        this.weatherData = signal(null);
+        this.isLoading = signal(true);
+        this.hasError = signal(false);
+        this.errorMessage = signal('');
+        this.city = computed(() => this.options()['city'] || 'New York');
+        this.temperatureUnit = computed(() => this.options()['temperatureUnit']?.id || '°C');
+        this.forecastDays = computed(() => (this.options()['forecastDays'] ?? 2) + 1);
+        this.forecastHours = computed(() => this.options()['forecastHours'] ?? 5);
+        this.iconCache = new Map();
+        this.displayedForecast = computed(() => {
+            this.forecastDays();
+            const weatherData = this.weatherData();
+            if (!weatherData?.forecast)
+                return [];
+            // Skip today's forecast for the bottom row display
+            return weatherData.forecast.slice(1, this.forecastDays());
+        });
+        this.displayedHourlyForecast = computed(() => {
+            this.forecastHours();
+            const weatherData = this.weatherData();
+            if (!weatherData?.forecast?.[0]?.hour)
+                return [];
+            const now = new Date();
+            const currentHour = now.getHours();
+            const todayHours = weatherData.forecast[0].hour;
+            // Get hours after current hour for today
+            const remainingTodayHours = todayHours.filter((hour) => {
+                const hourTime = new Date(hour.time);
+                return hourTime.getHours() > currentHour;
+            });
+            // If we need more hours, get from tomorrow
+            let result = [...remainingTodayHours];
+            if (result.length < this.forecastHours() && weatherData.forecast.length > 1) {
+                const tomorrowHours = weatherData.forecast[1].hour;
+                const neededFromTomorrow = this.forecastHours() - result.length;
+                result = [...result, ...tomorrowHours.slice(0, neededFromTomorrow)];
+            }
+            // Limit to requested number of hours
+            return result.slice(0, this.forecastHours());
+        });
+        effect(() => {
+            if (this.options()) {
+                this.loadWeatherData();
+            }
+        });
+    }
+    loadWeatherData() {
+        if (!this.city()) {
+            this.isLoading.set(false);
+            return;
+        }
+        this.isLoading.set(true);
+        this.hasError.set(false);
+        this.errorMessage.set('');
+        const requestOptions = {
+            location: this.city(),
+            tempUnit: this.temperatureUnit(),
+            days: this.forecastDays(),
+        };
+        this.weatherService
+            .getForecast(requestOptions)
+            .pipe(catchError((error) => {
+            this.handleError(error);
+            return of(null);
+        }), finalize(() => this.isLoading.set(false)))
+            .subscribe((data) => {
+            if (data) {
+                this.weatherData.set(data);
+            }
+        });
+    }
+    handleError(error) {
+        console.error('Advanced weather widget error:', error);
+        this.hasError.set(true);
+        this.errorMessage.set(error.message || 'Failed to load weather data');
+    }
+    getConditionIcon(conditionId) {
+        if (!conditionId) {
+            return '';
+        }
+        if (this.iconCache.has(conditionId)) {
+            return this.iconCache.get(conditionId);
+        }
+        const svgIcon = this.weatherService.getCondition(conditionId).svgIcon;
+        const iconPath = `assets/images/weather/${svgIcon}`;
+        this.iconCache.set(conditionId, iconPath);
+        return iconPath;
+    }
+    getConditionName(conditionId) {
+        if (!conditionId) {
+            return 'Unknown';
+        }
+        const condition = this.weatherService.getCondition(conditionId);
+        return condition?.name || 'Unknown';
+    }
+    getCurrentTemperature() {
+        if (!this.weatherData())
+            return 0;
+        return this.temperatureUnit() === '°C' ? this.weatherData().current.tempC : this.weatherData().current.tempF;
+    }
+    getMaxTemp() {
+        if (!this.weatherData()?.forecast?.[0])
+            return 0;
+        return this.temperatureUnit() === '°C'
+            ? this.weatherData().forecast[0].maxTempC
+            : this.weatherData().forecast[0].maxTempF;
+    }
+    getMinTemp() {
+        if (!this.weatherData()?.forecast?.[0])
+            return 0;
+        return this.temperatureUnit() === '°C'
+            ? this.weatherData().forecast[0].minTempC
+            : this.weatherData().forecast[0].minTempF;
+    }
+    getForecastDayTemp(day) {
+        if (!day)
+            return 0;
+        return this.temperatureUnit() === '°C' ? day.maxTempC : day.maxTempF;
+    }
+    parseDate(dateStr) {
+        return new Date(dateStr);
+    }
+    getDayName(date) {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        const tomorrow = new Date(today);
+        tomorrow.setDate(tomorrow.getDate() + 1);
+        const checkDate = new Date(date);
+        checkDate.setHours(0, 0, 0, 0);
+        if (checkDate.getTime() === today.getTime()) {
+            return 'Today';
+        }
+        if (checkDate.getTime() === tomorrow.getTime()) {
+            return 'Tomorrow';
+        }
+        const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+        return days[checkDate.getDay()];
+    }
+    getHourLabel(timeStr) {
+        const time = new Date(timeStr);
+        return time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
+    }
+    getHourTemp(hour) {
+        return this.temperatureUnit() === '°C' ? hour.tempC : hour.tempF;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPAdvancedWeatherViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPAdvancedWeatherViewComponent, isStandalone: true, selector: "ng-component", providers: [
+            {
+                provide: AXPWeatherApiAbstract,
+                useClass: AXPWeatherApiService,
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-size-full ax-p-6">
+      @if (weatherData() && !isLoading() && !hasError()) {
+        <div class="ax-flex ax-h-full ax-flex-col ax-gap-4 ax-justify-around">
+          <div class="ax-flex ax-items-start ax-justify-around ax-w-full ax-gap-4">
+            <div class="ax-flex ax-items-center ax-shrink-0">
+              <img
+                [src]="getConditionIcon(weatherData()!.current.condition)"
+                class="ax-w-20 ax-h-20 ax-scale-[1.5]"
+                [alt]="getConditionName(weatherData()!.current.condition)"
+                loading="lazy"
+              />
+              <div class="ax-flex ax-flex-col ax-gap-1 ax-items-start">
+                <span class="ax-text-lg ax-font-medium ax-text-muted">{{
+                  getConditionName(weatherData()!.current.condition)
+                }}</span>
+                <span class="ax-text-5xl" style="text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3)"
+                  >{{ getCurrentTemperature() | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup></span
+                >
+              </div>
+            </div>
+            <div class="ax-flex ax-flex-col ax-items-center ax-gap-1 ax-pe-4">
+              <span class="ax-text-2xl ax-font-bold ax-capitalize">{{ city() }}</span>
+              <div class="ax-flex ax-gap-4 ax-font-semibold ax-text-muted">
+                <span
+                  >H: {{ getMaxTemp() | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup></span
+                >
+                <span
+                  >L: {{ getMinTemp() | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup></span
+                >
+              </div>
+            </div>
+          </div>
+
+          <div class="ax-flex ax-w-full ax-gap-1 ax-items-center ax-justify-around ax-overflow-x-auto ax-shrink-0">
+            @for (hour of displayedHourlyForecast(); track hour.time) {
+              <div class="ax-flex ax-flex-col ax-items-center ax-p-2 ax-cursor-default ax-min-w-16">
+                <span class="ax-text-sm ax-font-medium ax-text-muted">{{ getHourLabel(hour.time) }}</span>
+                <img
+                  [src]="getConditionIcon(weatherData()!.forecast[0].condition)"
+                  class="ax-w-10 ax-h-10"
+                  [alt]="getConditionName(weatherData()!.forecast[0].condition)"
+                />
+                <span class="ax-text-lg ax-font-semibold"
+                  >{{ getHourTemp(hour) | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup></span
+                >
+              </div>
+            }
+          </div>
+
+          <div class="ax-mt-2 ax-w-full">
+            <div
+              class="ax-grid ax-grid-cols-[1fr_auto_auto_auto] ax-gap-x-4 ax-gap-y-2 ax-items-center ax-justify-items-start"
+            >
+              @for (day of displayedForecast(); track day.date) {
+                <span class="ax-font-medium">{{ getDayName(parseDate(day.date)) }}</span>
+                <div class="ax-flex ax-items-center ax-justify-center">
+                  <img
+                    [src]="getConditionIcon(day.condition)"
+                    class="ax-w-8 ax-h-8 ax-scale-[2]"
+                    [alt]="getConditionName(day.condition)"
+                  />
+                </div>
+                <span class="ax-font-semibold"
+                  >{{ getForecastDayTemp(day) | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup></span
+                >
+                <span class="ax-text-muted"
+                  >{{ day.minTempC | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup></span
+                >
+              } @empty {
+                <span class="ax-text-muted">No forecast data available</span>
+              }
+            </div>
+          </div>
+        </div>
+      } @else {
+        <div class="ax-flex ax-size-full ax-flex-col ax-gap-6" [attr.aria-busy]="isLoading()">
+          @if (isLoading()) {
+            <!-- Current weather skeleton -->
+            <div class="ax-flex ax-items-start ax-justify-around ax-w-full ax-gap-4">
+              <div class="ax-flex ax-items-center ax-gap-4">
+                <ax-skeleton class="ax-w-20 ax-h-20 ax-rounded-full"></ax-skeleton>
+                <div class="ax-flex ax-flex-col ax-gap-2">
+                  <ax-skeleton class="ax-w-24 ax-h-6 ax-rounded"></ax-skeleton>
+                  <ax-skeleton class="ax-w-32 ax-h-12 ax-rounded"></ax-skeleton>
+                </div>
+              </div>
+              <div class="ax-flex ax-flex-col ax-items-end ax-gap-2">
+                <ax-skeleton class="ax-w-28 ax-h-8 ax-rounded"></ax-skeleton>
+                <div class="ax-flex ax-gap-2">
+                  <ax-skeleton class="ax-w-12 ax-h-6 ax-rounded"></ax-skeleton>
+                  <ax-skeleton class="ax-w-12 ax-h-6 ax-rounded"></ax-skeleton>
+                </div>
+              </div>
+            </div>
+
+            <!-- Hourly forecast skeleton -->
+            <div class="ax-flex ax-w-full ax-gap-2 ax-items-center ax-justify-around">
+              @for (i of [1, 2, 3, 4, 5]; track i) {
+                <div class="ax-flex ax-flex-col ax-items-center ax-gap-2 ax-min-w-16">
+                  <ax-skeleton class="ax-w-12 ax-h-4 ax-rounded"></ax-skeleton>
+                  <ax-skeleton class="ax-w-10 ax-h-10 ax-rounded-full ax-my-1"></ax-skeleton>
+                  <ax-skeleton class="ax-w-10 ax-h-6 ax-rounded"></ax-skeleton>
+                </div>
+              }
+            </div>
+
+            <!-- Daily forecast skeleton -->
+            <div class="ax-mt-2 ax-w-full">
+              <div class="ax-grid ax-grid-cols-[1fr_auto_auto_auto] ax-gap-x-4 ax-gap-y-4 ax-items-center">
+                @for (i of [1, 2]; track i) {
+                  <ax-skeleton class="ax-w-20 ax-h-6 ax-rounded"></ax-skeleton>
+                  <ax-skeleton class="ax-w-8 ax-h-8 ax-rounded-full"></ax-skeleton>
+                  <ax-skeleton class="ax-w-10 ax-h-6 ax-rounded"></ax-skeleton>
+                  <ax-skeleton class="ax-w-10 ax-h-6 ax-rounded"></ax-skeleton>
+                }
+              </div>
+            </div>
+          } @else if (hasError()) {
+            <div class="ax-flex ax-flex-col ax-items-center ax-gap-3">
+              <i class="fa-solid fa-cloud-bolt fa-3x ax-text-danger"></i>
+              <span class="ax-text-danger ax-text-lg">{{ errorMessage() }}</span>
+              <button
+                class="ax-btn ax-btn-md ax-btn-outline-primary ax-mt-2"
+                (click)="loadWeatherData()"
+                aria-label="Retry loading weather data"
+              >
+                <i class="fa-solid fa-rotate-right ax-me-2"></i> Retry
+              </button>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}.ax-text-muted{color:gray}sup{font-weight:300;position:relative;top:-.3em;font-size:.6em;margin-left:.1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2$4.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPAdvancedWeatherViewComponent, decorators: [{
+            type: Component,
+            args: [{ template: `
+    <div class="ax-size-full ax-p-6">
+      @if (weatherData() && !isLoading() && !hasError()) {
+        <div class="ax-flex ax-h-full ax-flex-col ax-gap-4 ax-justify-around">
+          <div class="ax-flex ax-items-start ax-justify-around ax-w-full ax-gap-4">
+            <div class="ax-flex ax-items-center ax-shrink-0">
+              <img
+                [src]="getConditionIcon(weatherData()!.current.condition)"
+                class="ax-w-20 ax-h-20 ax-scale-[1.5]"
+                [alt]="getConditionName(weatherData()!.current.condition)"
+                loading="lazy"
+              />
+              <div class="ax-flex ax-flex-col ax-gap-1 ax-items-start">
+                <span class="ax-text-lg ax-font-medium ax-text-muted">{{
+                  getConditionName(weatherData()!.current.condition)
+                }}</span>
+                <span class="ax-text-5xl" style="text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3)"
+                  >{{ getCurrentTemperature() | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup></span
+                >
+              </div>
+            </div>
+            <div class="ax-flex ax-flex-col ax-items-center ax-gap-1 ax-pe-4">
+              <span class="ax-text-2xl ax-font-bold ax-capitalize">{{ city() }}</span>
+              <div class="ax-flex ax-gap-4 ax-font-semibold ax-text-muted">
+                <span
+                  >H: {{ getMaxTemp() | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup></span
+                >
+                <span
+                  >L: {{ getMinTemp() | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup></span
+                >
+              </div>
+            </div>
+          </div>
+
+          <div class="ax-flex ax-w-full ax-gap-1 ax-items-center ax-justify-around ax-overflow-x-auto ax-shrink-0">
+            @for (hour of displayedHourlyForecast(); track hour.time) {
+              <div class="ax-flex ax-flex-col ax-items-center ax-p-2 ax-cursor-default ax-min-w-16">
+                <span class="ax-text-sm ax-font-medium ax-text-muted">{{ getHourLabel(hour.time) }}</span>
+                <img
+                  [src]="getConditionIcon(weatherData()!.forecast[0].condition)"
+                  class="ax-w-10 ax-h-10"
+                  [alt]="getConditionName(weatherData()!.forecast[0].condition)"
+                />
+                <span class="ax-text-lg ax-font-semibold"
+                  >{{ getHourTemp(hour) | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup></span
+                >
+              </div>
+            }
+          </div>
+
+          <div class="ax-mt-2 ax-w-full">
+            <div
+              class="ax-grid ax-grid-cols-[1fr_auto_auto_auto] ax-gap-x-4 ax-gap-y-2 ax-items-center ax-justify-items-start"
+            >
+              @for (day of displayedForecast(); track day.date) {
+                <span class="ax-font-medium">{{ getDayName(parseDate(day.date)) }}</span>
+                <div class="ax-flex ax-items-center ax-justify-center">
+                  <img
+                    [src]="getConditionIcon(day.condition)"
+                    class="ax-w-8 ax-h-8 ax-scale-[2]"
+                    [alt]="getConditionName(day.condition)"
+                  />
+                </div>
+                <span class="ax-font-semibold"
+                  >{{ getForecastDayTemp(day) | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup></span
+                >
+                <span class="ax-text-muted"
+                  >{{ day.minTempC | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup></span
+                >
+              } @empty {
+                <span class="ax-text-muted">No forecast data available</span>
+              }
+            </div>
+          </div>
+        </div>
+      } @else {
+        <div class="ax-flex ax-size-full ax-flex-col ax-gap-6" [attr.aria-busy]="isLoading()">
+          @if (isLoading()) {
+            <!-- Current weather skeleton -->
+            <div class="ax-flex ax-items-start ax-justify-around ax-w-full ax-gap-4">
+              <div class="ax-flex ax-items-center ax-gap-4">
+                <ax-skeleton class="ax-w-20 ax-h-20 ax-rounded-full"></ax-skeleton>
+                <div class="ax-flex ax-flex-col ax-gap-2">
+                  <ax-skeleton class="ax-w-24 ax-h-6 ax-rounded"></ax-skeleton>
+                  <ax-skeleton class="ax-w-32 ax-h-12 ax-rounded"></ax-skeleton>
+                </div>
+              </div>
+              <div class="ax-flex ax-flex-col ax-items-end ax-gap-2">
+                <ax-skeleton class="ax-w-28 ax-h-8 ax-rounded"></ax-skeleton>
+                <div class="ax-flex ax-gap-2">
+                  <ax-skeleton class="ax-w-12 ax-h-6 ax-rounded"></ax-skeleton>
+                  <ax-skeleton class="ax-w-12 ax-h-6 ax-rounded"></ax-skeleton>
+                </div>
+              </div>
+            </div>
+
+            <!-- Hourly forecast skeleton -->
+            <div class="ax-flex ax-w-full ax-gap-2 ax-items-center ax-justify-around">
+              @for (i of [1, 2, 3, 4, 5]; track i) {
+                <div class="ax-flex ax-flex-col ax-items-center ax-gap-2 ax-min-w-16">
+                  <ax-skeleton class="ax-w-12 ax-h-4 ax-rounded"></ax-skeleton>
+                  <ax-skeleton class="ax-w-10 ax-h-10 ax-rounded-full ax-my-1"></ax-skeleton>
+                  <ax-skeleton class="ax-w-10 ax-h-6 ax-rounded"></ax-skeleton>
+                </div>
+              }
+            </div>
+
+            <!-- Daily forecast skeleton -->
+            <div class="ax-mt-2 ax-w-full">
+              <div class="ax-grid ax-grid-cols-[1fr_auto_auto_auto] ax-gap-x-4 ax-gap-y-4 ax-items-center">
+                @for (i of [1, 2]; track i) {
+                  <ax-skeleton class="ax-w-20 ax-h-6 ax-rounded"></ax-skeleton>
+                  <ax-skeleton class="ax-w-8 ax-h-8 ax-rounded-full"></ax-skeleton>
+                  <ax-skeleton class="ax-w-10 ax-h-6 ax-rounded"></ax-skeleton>
+                  <ax-skeleton class="ax-w-10 ax-h-6 ax-rounded"></ax-skeleton>
+                }
+              </div>
+            </div>
+          } @else if (hasError()) {
+            <div class="ax-flex ax-flex-col ax-items-center ax-gap-3">
+              <i class="fa-solid fa-cloud-bolt fa-3x ax-text-danger"></i>
+              <span class="ax-text-danger ax-text-lg">{{ errorMessage() }}</span>
+              <button
+                class="ax-btn ax-btn-md ax-btn-outline-primary ax-mt-2"
+                (click)="loadWeatherData()"
+                aria-label="Retry loading weather data"
+              >
+                <i class="fa-solid fa-rotate-right ax-me-2"></i> Retry
+              </button>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXDecoratorModule, AXTooltipModule, AXSkeletonModule], providers: [
+                        {
+                            provide: AXPWeatherApiAbstract,
+                            useClass: AXPWeatherApiService,
+                        },
+                    ], styles: [":host{display:block;width:100%;height:100%}.ax-text-muted{color:gray}sup{font-weight:300;position:relative;top:-.3em;font-size:.6em;margin-left:.1em}\n"] }]
+        }], ctorParameters: () => [] });
+
+var advancedWeather_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPAdvancedWeatherViewComponent: AXPAdvancedWeatherViewComponent
+});
+
+/**
+ * Weather Widget Configuration
+ * Provides customization options for displaying weather data and forecast
+ */
+const AXPAdvancedWeatherWidget = {
+    name: 'advanced-weather',
+    title: 'Advanced Weather Widget',
+    categories: [AXP_WIDGETS_UTILITY_CATEGORY],
+    groups: [AXPWidgetGroupEnum.DashboardWidget],
+    type: 'dashboard',
+    icon: 'fa-light fa-cloud-sun',
+    properties: [
+        {
+            name: 'temperatureUnit',
+            title: '@dashboard:widgets.weather.temperature-unit',
+            group: AXP_DATA_PROPERTY_GROUP,
+            schema: {
+                defaultValue: '°C',
+                dataType: 'string',
+                interface: {
+                    name: 'temperatureUnit',
+                    path: 'options.temperatureUnit',
+                    type: AXPWidgetsCatalog.select,
+                    options: {
+                        dataSource: ['°C', '°F'],
+                    },
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'city',
+            title: '@dashboard:widgets.weather.city',
+            group: AXP_DATA_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 'New York',
+                dataType: 'string',
+                interface: {
+                    name: 'city',
+                    path: 'options.city',
+                    type: AXPWidgetsCatalog.text,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'forecastHours',
+            title: '@dashboard:widgets.weather.forecast-hours',
+            group: AXP_DATA_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 5,
+                dataType: 'number',
+                interface: {
+                    name: 'forecastHours',
+                    path: 'options.forecastHours',
+                    type: AXPWidgetsCatalog.number,
+                    options: {
+                        minValue: 1,
+                        maxValue: 8,
+                        step: 1,
+                    },
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'forecastDays',
+            title: '@dashboard:widgets.weather.forecast-days',
+            group: AXP_DATA_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 2,
+                dataType: 'number',
+                interface: {
+                    name: 'forecastDays',
+                    path: 'options.forecastDays',
+                    type: AXPWidgetsCatalog.number,
+                    options: {
+                        minValue: 1,
+                        maxValue: 2,
+                        step: 1,
+                    },
+                },
+            },
+            visible: true,
+        },
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return advancedWeather_component; }).then((c) => c.AXPAdvancedWeatherViewComponent),
+        },
+    },
+    meta: {
+        dimensions: {
+            width: 3,
+            height: 5,
+            minWidth: 3,
+            minHeight: 5,
+            maxWidth: 5,
+            maxHeight: 7,
+        },
+    },
+};
+
+class AXPMinimalWeatherViewComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super();
+        this.weatherService = inject(AXPWeatherApiAbstract);
+        this.weatherData = signal(null);
+        this.isLoading = signal(true);
+        this.hasError = signal(false);
+        this.errorMessage = signal('');
+        this.city = computed(() => this.options()['city'] || 'New York');
+        this.temperatureUnit = computed(() => this.options()['temperatureUnit']?.id || '°C');
+        this.iconCache = new Map();
+        effect(() => {
+            if (this.options()) {
+                this.loadWeatherData();
+            }
+        });
+    }
+    loadWeatherData() {
+        if (!this.city()) {
+            this.isLoading.set(false);
+            return;
+        }
+        this.isLoading.set(true);
+        this.hasError.set(false);
+        this.errorMessage.set('');
+        const requestOptions = {
+            location: this.city(),
+            tempUnit: this.temperatureUnit(),
+            days: 1,
+        };
+        this.weatherService
+            .getForecast(requestOptions)
+            .pipe(catchError((error) => {
+            this.handleError(error);
+            return of(null);
+        }), finalize(() => this.isLoading.set(false)))
+            .subscribe((data) => {
+            if (data) {
+                this.weatherData.set(data);
+            }
+        });
+    }
+    handleError(error) {
+        console.error('Minimal weather widget error:', error);
+        this.hasError.set(true);
+        this.errorMessage.set(error.message || 'Failed to load weather data');
+    }
+    getConditionIcon() {
+        const conditionId = this.weatherData()?.current.condition || 'unknown';
+        if (this.iconCache.has(conditionId)) {
+            return this.iconCache.get(conditionId);
+        }
+        const svgIcon = this.weatherService.getCondition(conditionId).svgIcon;
+        const iconPath = `assets/images/weather/${svgIcon}`;
+        this.iconCache.set(conditionId, iconPath);
+        return iconPath;
+    }
+    getCurrentTemperature() {
+        if (!this.weatherData())
+            return 0;
+        return this.temperatureUnit() === '°C' ? this.weatherData().current.tempC : this.weatherData().current.tempF;
+    }
+    getMaxTemp() {
+        if (!this.weatherData()?.forecast?.[0])
+            return 0;
+        return this.temperatureUnit() === '°C'
+            ? this.weatherData().forecast[0].maxTempC
+            : this.weatherData().forecast[0].maxTempF;
+    }
+    getMinTemp() {
+        if (!this.weatherData()?.forecast?.[0])
+            return 0;
+        return this.temperatureUnit() === '°C'
+            ? this.weatherData().forecast[0].minTempC
+            : this.weatherData().forecast[0].minTempF;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPMinimalWeatherViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPMinimalWeatherViewComponent, isStandalone: true, selector: "ng-component", providers: [
+            {
+                provide: AXPWeatherApiAbstract,
+                useClass: AXPWeatherApiService,
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
+    @if (weatherData() && !isLoading() && !hasError()) {
+      <div
+        class="ax-flex ax-size-full ax-flex-col ax-items-start ax-p-2 ax-gap-6 weather-container ax-overflow-hidden"
+        style="container-type: inline-size"
+        [attr.aria-label]="'Current weather for ' + city()"
+      >
+        <div class="weather-top ax-flex ax-items-center ax-w-full ax-pt-4">
+          <img
+            [src]="getConditionIcon()"
+            class="ax-h-[180%]"
+            [alt]="weatherData()?.current?.condition + ' weather icon'"
+            loading="lazy"
+          />
+          <span
+            class="-ax-ms-2 temperature"
+            style="font-size: max(20px, calc(32cqw - 25px)); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3)"
+            aria-live="polite"
+            >{{ getCurrentTemperature() | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup></span
+          >
+        </div>
+        <div class="ax-text-start ax-ps-6">
+          <div style="font-size: max(16px, calc(19cqw - 25px))" class="ax-mt-1">
+            <span class="ax-font-bold ax-capitalize">{{ city() }}</span>
+          </div>
+          <div style="font-size: max(12px, calc(14cqw - 25px))" class="ax-pt-2 ax-flex ax-gap-4 ax-opacity-75">
+            <span aria-label="High temperature">
+              H: {{ getMaxTemp() | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup>
+            </span>
+            <span aria-label="Low temperature">
+              L: {{ getMinTemp() | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup>
+            </span>
+          </div>
+        </div>
+      </div>
+    } @else {
+      <div class="ax-flex ax-size-full ax-flex-col ax-p-2 ax-gap-4" [attr.aria-busy]="isLoading()">
+        @if (isLoading()) {
+          <!-- Weather icon and temperature skeleton -->
+          <div class="ax-flex ax-items-center ax-w-full ax-pt-4 ax-gap-8">
+            <ax-skeleton class="ax-w-16 ax-h-16 ax-rounded-full"></ax-skeleton>
+            <ax-skeleton class="ax-w-24 ax-h-12 ax-rounded -ax-ms-2"></ax-skeleton>
+          </div>
+
+          <!-- City and temperature range skeleton -->
+          <div class="ax-text-start ax-ps-6 ax-w-full">
+            <div class="ax-mt-1">
+              <ax-skeleton class="ax-w-24 ax-h-6 ax-rounded"></ax-skeleton>
+            </div>
+            <div class="ax-pt-2 ax-flex ax-gap-4">
+              <ax-skeleton class="ax-w-12 ax-h-4 ax-rounded"></ax-skeleton>
+              <ax-skeleton class="ax-w-12 ax-h-4 ax-rounded"></ax-skeleton>
+            </div>
+          </div>
+        } @else if (hasError()) {
+          <div class="ax-flex ax-flex-col ax-items-center ax-gap-2">
+            <span class="ax-text-danger">{{ errorMessage() }}</span>
+            <button
+              class="ax-btn ax-btn-sm ax-btn-outline-primary"
+              (click)="loadWeatherData()"
+              aria-label="Retry loading weather data"
+            >
+              <i class="fa-solid fa-rotate-right"></i> Retry
+            </button>
+          </div>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [":host{width:100%;height:100%}.weather-container{container-type:inline-size;transition:opacity .3s ease-in-out}.temperature{font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums}@container (max-width: 130px){.weather-top{flex-direction:column!important;align-items:center!important;text-align:center}.temperature{margin-top:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2$4.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPMinimalWeatherViewComponent, decorators: [{
+            type: Component,
+            args: [{ template: `
+    @if (weatherData() && !isLoading() && !hasError()) {
+      <div
+        class="ax-flex ax-size-full ax-flex-col ax-items-start ax-p-2 ax-gap-6 weather-container ax-overflow-hidden"
+        style="container-type: inline-size"
+        [attr.aria-label]="'Current weather for ' + city()"
+      >
+        <div class="weather-top ax-flex ax-items-center ax-w-full ax-pt-4">
+          <img
+            [src]="getConditionIcon()"
+            class="ax-h-[180%]"
+            [alt]="weatherData()?.current?.condition + ' weather icon'"
+            loading="lazy"
+          />
+          <span
+            class="-ax-ms-2 temperature"
+            style="font-size: max(20px, calc(32cqw - 25px)); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3)"
+            aria-live="polite"
+            >{{ getCurrentTemperature() | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup></span
+          >
+        </div>
+        <div class="ax-text-start ax-ps-6">
+          <div style="font-size: max(16px, calc(19cqw - 25px))" class="ax-mt-1">
+            <span class="ax-font-bold ax-capitalize">{{ city() }}</span>
+          </div>
+          <div style="font-size: max(12px, calc(14cqw - 25px))" class="ax-pt-2 ax-flex ax-gap-4 ax-opacity-75">
+            <span aria-label="High temperature">
+              H: {{ getMaxTemp() | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup>
+            </span>
+            <span aria-label="Low temperature">
+              L: {{ getMinTemp() | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup>
+            </span>
+          </div>
+        </div>
+      </div>
+    } @else {
+      <div class="ax-flex ax-size-full ax-flex-col ax-p-2 ax-gap-4" [attr.aria-busy]="isLoading()">
+        @if (isLoading()) {
+          <!-- Weather icon and temperature skeleton -->
+          <div class="ax-flex ax-items-center ax-w-full ax-pt-4 ax-gap-8">
+            <ax-skeleton class="ax-w-16 ax-h-16 ax-rounded-full"></ax-skeleton>
+            <ax-skeleton class="ax-w-24 ax-h-12 ax-rounded -ax-ms-2"></ax-skeleton>
+          </div>
+
+          <!-- City and temperature range skeleton -->
+          <div class="ax-text-start ax-ps-6 ax-w-full">
+            <div class="ax-mt-1">
+              <ax-skeleton class="ax-w-24 ax-h-6 ax-rounded"></ax-skeleton>
+            </div>
+            <div class="ax-pt-2 ax-flex ax-gap-4">
+              <ax-skeleton class="ax-w-12 ax-h-4 ax-rounded"></ax-skeleton>
+              <ax-skeleton class="ax-w-12 ax-h-4 ax-rounded"></ax-skeleton>
+            </div>
+          </div>
+        } @else if (hasError()) {
+          <div class="ax-flex ax-flex-col ax-items-center ax-gap-2">
+            <span class="ax-text-danger">{{ errorMessage() }}</span>
+            <button
+              class="ax-btn ax-btn-sm ax-btn-outline-primary"
+              (click)="loadWeatherData()"
+              aria-label="Retry loading weather data"
+            >
+              <i class="fa-solid fa-rotate-right"></i> Retry
+            </button>
+          </div>
+        }
+      </div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXDecoratorModule, AXTooltipModule, AXSkeletonModule], providers: [
+                        {
+                            provide: AXPWeatherApiAbstract,
+                            useClass: AXPWeatherApiService,
+                        },
+                    ], styles: [":host{width:100%;height:100%}.weather-container{container-type:inline-size;transition:opacity .3s ease-in-out}.temperature{font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums}@container (max-width: 130px){.weather-top{flex-direction:column!important;align-items:center!important;text-align:center}.temperature{margin-top:.5rem}}\n"] }]
+        }], ctorParameters: () => [] });
+
+var minimalWeather_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPMinimalWeatherViewComponent: AXPMinimalWeatherViewComponent
+});
+
+/**
+ * Weather Widget Configuration
+ * Provides customization options for displaying weather data and forecast
+ */
+const AXPMinimalWeatherWidget = {
+    name: 'minimal-weather',
+    title: 'Minimal Weather Widget',
+    categories: [AXP_WIDGETS_UTILITY_CATEGORY],
+    groups: [AXPWidgetGroupEnum.DashboardWidget],
+    type: 'dashboard',
+    icon: 'fa-light fa-cloud-sun',
+    properties: [
+        {
+            name: 'temperatureUnit',
+            title: '@dashboard:widgets.weather.temperature-unit',
+            group: AXP_DATA_PROPERTY_GROUP,
+            schema: {
+                defaultValue: '°C',
+                dataType: 'string',
+                interface: {
+                    name: 'temperatureUnit',
+                    path: 'options.temperatureUnit',
+                    type: AXPWidgetsCatalog.select,
+                    options: {
+                        dataSource: ['°C', '°F'],
+                    },
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'city',
+            title: '@dashboard:widgets.weather.city',
+            group: AXP_DATA_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 'New York',
+                dataType: 'string',
+                interface: {
+                    name: 'city',
+                    path: 'options.city',
+                    type: AXPWidgetsCatalog.text,
+                },
+            },
+            visible: true,
+        },
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return minimalWeather_component; }).then((c) => c.AXPMinimalWeatherViewComponent),
+        },
+    },
+    meta: {
+        dimensions: {
+            width: 2,
+            height: 2,
+            minWidth: 1,
+            minHeight: 2,
+            maxWidth: 4,
+            maxHeight: 5,
+        },
+    },
+};
+
 /**
  * Weather Widget Component
  * Displays current weather conditions and optional forecast data
@@ -3272,18 +4449,21 @@ class AXPWeatherWidgetViewComponent extends AXPValueWidgetComponent {
         return new Date(this.weatherData().current.lastUpdated).toLocaleTimeString();
     }
     /**
-     * Gets the icon class for a weather condition
-     * @param conditionId Weather condition ID
-     * @returns Font Awesome icon class
+     * Gets the appropriate icon class for a weather condition
+     * @param conditionId The ID of the weather condition
+     * @returns The Font Awesome icon class string
      */
     getConditionIcon(conditionId) {
-        const condition = this.weatherService.getCondition(conditionId);
-        return condition?.icon || 'fa-solid fa-question';
+        if (!conditionId) {
+            conditionId = 'unknown';
+        }
+        const svgIcon = this.weatherService.getCondition(conditionId).svgIcon;
+        return `assets/images/weather/${svgIcon}`;
     }
     /**
      * Gets the display name for a weather condition
-     * @param conditionId Weather condition ID
-     * @returns Condition display name
+     * @param conditionId The ID of the weather condition
+     * @returns The translated display name
      */
     getConditionName(conditionId) {
         const condition = this.weatherService.getCondition(conditionId);
@@ -3353,7 +4533,7 @@ class AXPWeatherWidgetViewComponent extends AXPValueWidgetComponent {
                 provide: AXPWeatherApiAbstract,
                 useClass: AXPWeatherApiService,
             },
-        ], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["containerElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Weather Widget Component Template -->\n<div class=\"axp-weather-container\" #containerElement>\n  <!-- Loading indicator -->\n  @if (isLoading()) {\n    <div class=\"axp-weather-loading-overlay\">\n      <div class=\"axp-weather-loading-spinner\">\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        <span>{{ 'weather.loading' | translate: { scope: 'dashboard' } | async }}</span>\n      </div>\n    </div>\n  }\n\n  <!-- Error message -->\n  @if (hasError()) {\n    <div class=\"axp-weather-error-overlay\">\n      <div class=\"axp-weather-error-message\">\n        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n        <span>{{ errorMessage() | translate: { scope: 'dashboard' } | async }}</span>\n        <button class=\"axp-weather-retry-button\" (click)=\"refreshWeather()\">\n          <i class=\"fa-solid fa-sync-alt\"></i>\n          <span>{{ 'weather.retry' | translate: { scope: 'dashboard' } | async }}</span>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Weather content - only show when we have data -->\n  @if (weatherData()) {\n    <!-- Background decorations based on weather condition -->\n    <div class=\"axp-weather-background-decorations\">\n      <div class=\"axp-weather-decoration\" [ngClass]=\"weatherData()?.current?.condition?.toLowerCase()\"></div>\n      <div class=\"axp-weather-gradient-overlay\"></div>\n    </div>\n\n    <div class=\"axp-weather-inner\">\n      <!-- Location information section -->\n      <div class=\"axp-weather-location-info\">\n        <div class=\"axp-weather-location-icon\">\n          <i class=\"fa-solid fa-location-dot\"></i>\n        </div>\n        <div class=\"axp-weather-location-text\">\n          <h2 class=\"axp-weather-location-name\">{{ city() }}</h2>\n        </div>\n      </div>\n\n      <!-- Current weather conditions section -->\n      <div class=\"axp-weather-current-weather\">\n        <!-- Weather icon and condition name -->\n        @if (showCurrentCondition()) {\n          <div class=\"axp-weather-condition\">\n            <div class=\"axp-weather-icon-wrapper\">\n              <div class=\"axp-weather-icon\">\n                <i\n                  [class]=\"getConditionIcon(weatherData()?.current?.condition || '')\"\n                  [style.color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n                ></i>\n              </div>\n              <div\n                class=\"axp-weather-icon-glow\"\n                [style.background-color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n              ></div>\n            </div>\n            <div class=\"axp-weather-condition-name\">\n              {{ getCurrentCondition() | translate: { scope: 'dashboard' } | async }}\n            </div>\n          </div>\n        }\n\n        <!-- Temperature display -->\n        @if (showTemperature()) {\n          <div class=\"axp-weather-temperature\">\n            <span class=\"axp-weather-temperature-value\">{{ getCurrentTemperature() }}</span>\n            <span class=\"axp-weather-temperature-unit\">{{\n              getTemperatureUnit() | translate: { scope: 'dashboard' } | async\n            }}</span>\n          </div>\n        }\n      </div>\n\n      <!-- Weather details section (humidity and wind) -->\n      @if (showHumidity() || showWind()) {\n        <div class=\"axp-weather-details\">\n          <!-- Humidity information -->\n          @if (showHumidity()) {\n            <div class=\"axp-weather-detail-item\">\n              <div class=\"axp-weather-detail-icon\">\n                <i class=\"fa-solid fa-droplet\"></i>\n              </div>\n              <div class=\"axp-weather-detail-info\">\n                <div class=\"axp-weather-detail-label\">\n                  {{ 'weather.humidity' | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div class=\"axp-weather-detail-value\">{{ getHumidity() }}%</div>\n              </div>\n            </div>\n          }\n\n          <!-- Wind speed information -->\n          @if (showWind()) {\n            <div class=\"axp-weather-detail-item\">\n              <div class=\"axp-weather-detail-icon\">\n                <i class=\"fa-solid fa-wind\"></i>\n              </div>\n              <div class=\"axp-weather-detail-info\">\n                <div class=\"axp-weather-detail-label\">\n                  {{ 'weather.wind' | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div class=\"axp-weather-detail-value\">\n                  {{ getWindSpeed() }} {{ getWindSpeedUnit() | translate: { scope: 'dashboard' } | async }}\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      <!-- Weather forecast section -->\n      @if (showForecast() && weatherData()?.forecast) {\n        <div class=\"axp-weather-forecast\">\n          <div class=\"axp-weather-forecast-header\">\n            <h3 class=\"axp-weather-forecast-title\">\n              <i class=\"fa-solid fa-calendar-days\"></i>\n              <span class=\"ax-px-1\">{{ 'weather.forecast' | translate: { scope: 'dashboard' } | async }}</span>\n            </h3>\n          </div>\n          <!-- Loading indicator for forecast -->\n          <!-- @if (isForecastLoading()) {\n            <div class=\"axp-weather-forecast-loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n              <span>{{ 'weather.loading-forecast' | translate: { scope: 'dashboard' } | async }}</span>\n            </div>\n          } -->\n          <!-- Scrollable forecast days display -->\n          <div class=\"axp-weather-forecast-items\">\n            @for (day of displayedForecast(); track day.day) {\n              <div class=\"axp-weather-forecast-day\">\n                <div class=\"axp-weather-forecast-day-name\">\n                  {{ getDayName(parseDate(day.date)) | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div\n                  class=\"axp-weather-forecast-icon\"\n                  [title]=\"getConditionName(day.condition) | translate: { scope: 'dashboard' } | async\"\n                >\n                  <i [class]=\"getConditionIcon(day.condition)\" [style.color]=\"getConditionColor(day.condition)\"></i>\n                </div>\n                <div class=\"axp-weather-forecast-temps\">\n                  <span class=\"axp-weather-forecast-low\">\n                    {{ temperatureUnit() === '\u00B0C' ? day.minTempC : day.minTempF\n                    }}{{ getTemperatureUnit() | translate: { scope: 'dashboard' } | async }}\n                  </span>\n                  <span class=\"axp-weather-forecast-high\">\n                    {{ temperatureUnit() === '\u00B0C' ? day.maxTempC : day.maxTempF\n                    }}{{ getTemperatureUnit() | translate: { scope: 'dashboard' } | async }}\n                  </span>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Last updated timestamp -->\n      <div class=\"axp-weather-last-updated\">\n        <span>{{ 'weather.last-updated' | translate: { scope: 'dashboard' } | async }}: {{ getLastUpdated() }}</span>\n      </div>\n\n      <!-- Manual refresh button -->\n      <div class=\"axp-weather-refresh-action\">\n        <button\n          class=\"axp-weather-refresh-button\"\n          (click)=\"refreshWeather()\"\n          [attr.aria-label]=\"'weather.refresh' | translate: { scope: 'dashboard' } | async\"\n          [title]=\"'weather.refresh' | translate: { scope: 'dashboard' } | async\"\n        >\n          <i class=\"fa-solid fa-sync-alt\"></i>\n          <span>{{ 'weather.refresh' | translate: { scope: 'dashboard' } | async }}</span>\n        </button>\n      </div>\n    </div>\n  } @else if (!isLoading() && !hasError()) {\n    <!-- No data state (not loading, no error) -->\n    <div class=\"axp-weather-no-data-state\">\n      <i class=\"fa-solid fa-cloud-sun\"></i>\n      <p>{{ 'weather.no-data' | translate: { scope: 'dashboard' } | async }}</p>\n      <button class=\"axp-weather-refresh-button\" (click)=\"refreshWeather()\">\n        <i class=\"fa-solid fa-sync-alt\"></i>\n        <span>{{ 'weather.load-data' | translate: { scope: 'dashboard' } | async }}</span>\n      </button>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;--primary-gradient-start: #2196f3;--primary-gradient-end: #1976d2;--shadow-color: rgba(0, 0, 0, .2);--glass-bg: rgba(255, 255, 255, .15);--glass-border: rgba(255, 255, 255, .2);--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .75);--transition-speed: .3s}.axp-weather-container{width:100%;height:100%;overflow:hidden;position:relative;box-shadow:0 4px 8px rgba(0,0,0,.1);color:#fff;min-height:300px;background-color:#2c3e50}.axp-weather-loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(44,62,80,.85);display:flex;justify-content:center;align-items:center;z-index:100}.axp-weather-loading-spinner{text-align:center}.axp-weather-loading-spinner i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-loading-spinner span{display:block;color:#fff;font-size:1rem}.axp-weather-error-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(189,54,47,.85);display:flex;justify-content:center;align-items:center}.axp-weather-error-message{text-align:center;padding:1rem}.axp-weather-error-message i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-error-message span{display:block;color:#fff;font-size:1.1rem;margin-bottom:1rem}.axp-weather-error-message .axp-weather-retry-button{color:#bd362f;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-error-message .axp-weather-retry-button:hover{transform:translateY(-1px)}.axp-weather-no-data-state{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:2rem;text-align:center}.axp-weather-no-data-state i{font-size:3rem;margin-bottom:1rem;color:rgba(255,255,255,.8)}.axp-weather-no-data-state p{margin-bottom:1.5rem;font-size:1.1rem}.axp-weather-no-data-state .axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-no-data-state .axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-background-decorations{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.axp-weather-decoration{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center}.axp-weather-decoration.sunny{background:linear-gradient(135deg,#ff7e00,#f7d358)}.axp-weather-decoration.partlyCloudy{background:linear-gradient(135deg,#7ba2e7,#b4d2f7)}.axp-weather-decoration.cloudy{background:linear-gradient(135deg,#717e8c,#919eab)}.axp-weather-decoration.rain{background:linear-gradient(135deg,#6a8caf,#567a9e)}.axp-weather-decoration.snow{background:linear-gradient(135deg,#99b3cc,#c6d4e1)}.axp-weather-decoration.thunder{background:linear-gradient(135deg,#425777,#2c3e50)}.axp-weather-decoration.mist{background:linear-gradient(135deg,#94a3b8,#cbd5e1)}.axp-weather-gradient-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5))}.axp-weather-inner{position:relative;z-index:2;height:100%;padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between}.axp-weather-location-info{display:flex;align-items:center;margin-bottom:1.5rem}.axp-weather-location-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,.2);border-radius:50%;margin-right:.75rem}.axp-weather-location-icon i{color:#fff}.axp-weather-location-name{margin:0;font-size:1.5rem;font-weight:500;text-shadow:1px 1px 3px rgba(0,0,0,.2);text-transform:capitalize}.axp-weather-current-weather{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap}.axp-weather-condition{display:flex;flex-direction:column;align-items:center}.axp-weather-icon-wrapper{position:relative;margin-bottom:.5rem}.axp-weather-icon{position:relative;z-index:2}.axp-weather-icon i{font-size:2.75rem;filter:drop-shadow(0 0 8px rgba(0,0,0,.3))}.axp-weather-icon-glow{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);width:45px;height:45px;border-radius:50%;filter:blur(15px);opacity:.75}.axp-weather-condition-name{font-size:1.1rem;text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.axp-weather-temperature{display:flex;align-items:flex-start;text-shadow:1px 1px 3px rgba(0,0,0,.3)}.axp-weather-temperature-value{font-size:3.5rem;font-weight:500;line-height:1}.axp-weather-temperature-unit{font-size:1.5rem;margin-top:.25rem}.axp-weather-details{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:1rem;padding:1rem;background-color:rgba(0,0,0,.15);border-radius:8px}.axp-weather-detail-item{display:flex;align-items:center;flex:1;min-width:120px}.axp-weather-detail-icon{width:40px;height:40px;border-radius:50%;background-color:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin-right:.75rem}.axp-weather-detail-icon i{font-size:1.25rem}.axp-weather-detail-info{display:flex;padding-inline:.25rem;flex-direction:column}.axp-weather-detail-label{font-size:.875rem;color:rgba(255,255,255,.8);margin-bottom:.25rem}.axp-weather-detail-value{font-size:1.125rem;font-weight:500}.axp-weather-forecast{margin-bottom:.5rem;background-color:rgba(0,0,0,.15);border-radius:8px;padding:1rem}.axp-weather-forecast-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.axp-weather-forecast-title{margin:0;font-size:1.125rem;font-weight:500;display:flex;align-items:center}.axp-weather-forecast-title i{margin-right:.5rem;opacity:.8}.axp-weather-scroll-indicator{color:rgba(255,255,255,.6)}.axp-weather-forecast-items{display:flex;overflow-x:auto;gap:.75rem;padding-bottom:.5rem}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.3);border-radius:4px}.axp-weather-forecast-items::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:4px}.axp-weather-forecast-day{min-width:90px;display:flex;flex-direction:column;align-items:center;padding:.75rem .5rem;background-color:rgba(255,255,255,.1);border-radius:6px;transition:all .3s ease}.axp-weather-forecast-day:hover{background-color:rgba(255,255,255,.15);transform:translateY(-2px)}.axp-weather-forecast-day-name{font-size:.875rem;margin-bottom:.5rem;font-weight:500}.axp-weather-forecast-icon{font-size:1.5rem;margin-bottom:.5rem}.axp-weather-forecast-icon i{filter:drop-shadow(0 0 5px rgba(0,0,0,.2))}.axp-weather-forecast-temps{display:flex;flex-direction:row;gap:.75rem;align-items:center;font-size:.775rem}.axp-weather-last-updated{text-align:center;font-size:.75rem;opacity:.7;margin-bottom:.5rem}.axp-weather-refresh-action{text-align:center}.axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:.875rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-refresh-button i{font-size:.875rem}@media (max-width: 576px){.axp-weather-inner{padding:.8rem;gap:.4rem}.axp-weather-location-name{font-size:1.1rem;padding-inline:.25rem}.axp-weather-temperature{font-size:2.5rem}.axp-weather-temperature-unit{font-size:1.1rem}.axp-weather-weather-details{flex-direction:column;gap:.5rem}.axp-weather-forecast-items{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.5rem;margin:0 -.4rem;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;mask-image:linear-gradient(to right,#000 95%,rgba(0,0,0,0));-webkit-mask-image:linear-gradient(to right,rgb(0,0,0) 95%,rgba(0,0,0,0))}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.2);border-radius:4px}.axp-weather-forecast-day{min-width:60px;flex:0 0 auto;padding:.4rem .6rem}.axp-weather-forecast-day-name{font-size:.7rem}.axp-weather-forecast-icon{padding:.3rem;height:1.6rem}.axp-weather-forecast-temps{font-size:.7rem}.axp-weather-scroll-indicator{display:block}}:host-context(.theme-dark){--glass-bg: rgba(0, 0, 0, .3);--glass-border: rgba(255, 255, 255, .1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: HttpClientModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2$3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["containerElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Weather Widget Component Template -->\n<div class=\"axp-weather-container\" #containerElement>\n  <!-- Loading indicator -->\n  @if (isLoading()) {\n    <div class=\"axp-weather-loading-overlay\">\n      <div class=\"axp-weather-loading-spinner\">\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        <span>{{ 'weather.loading' | translate: { scope: 'dashboard' } | async }}</span>\n      </div>\n    </div>\n  }\n\n  <!-- Error message -->\n  @if (hasError()) {\n    <div class=\"axp-weather-error-overlay\">\n      <div class=\"axp-weather-error-message\">\n        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n        <span>{{ errorMessage() | translate: { scope: 'dashboard' } | async }}</span>\n        <button class=\"axp-weather-retry-button\" (click)=\"refreshWeather()\">\n          <i class=\"fa-solid fa-sync-alt\"></i>\n          <span>{{ 'weather.retry' | translate: { scope: 'dashboard' } | async }}</span>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Weather content - only show when we have data -->\n  @if (weatherData()) {\n    <!-- Background decorations based on weather condition -->\n    <div class=\"axp-weather-background-decorations\">\n      <div class=\"axp-weather-decoration\" [ngClass]=\"weatherData()?.current?.condition?.toLowerCase()\"></div>\n      <div class=\"axp-weather-gradient-overlay\"></div>\n    </div>\n\n    <div class=\"axp-weather-inner\">\n      <!-- Location information section -->\n      <div class=\"axp-weather-location-info\">\n        <div class=\"axp-weather-location-icon\">\n          <i class=\"fa-solid fa-location-dot\"></i>\n        </div>\n        <div class=\"axp-weather-location-text\">\n          <h2 class=\"axp-weather-location-name\">{{ city() }}</h2>\n        </div>\n      </div>\n\n      <!-- Current weather conditions section -->\n      <div class=\"axp-weather-current-weather\">\n        <!-- Weather icon and condition name -->\n        @if (showCurrentCondition()) {\n          <div class=\"axp-weather-condition\">\n            <div class=\"axp-weather-icon-wrapper\">\n              <div class=\"axp-weather-icon\">\n                <img [src]=\"getConditionIcon(weatherData()?.current?.condition || '')\" />\n              </div>\n              <div\n                class=\"axp-weather-icon-glow\"\n                [style.background-color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n              ></div>\n            </div>\n            <div class=\"axp-weather-condition-name\">\n              {{ getCurrentCondition() | translate: { scope: 'dashboard' } | async }}\n            </div>\n          </div>\n        }\n\n        <!-- Temperature display -->\n        @if (showTemperature()) {\n          <div class=\"axp-weather-temperature\">\n            <span class=\"axp-weather-temperature-value\">{{ getCurrentTemperature() }}</span>\n            <span class=\"axp-weather-temperature-unit\">{{\n              getTemperatureUnit() | translate: { scope: 'dashboard' } | async\n            }}</span>\n          </div>\n        }\n      </div>\n\n      <!-- Weather details section (humidity and wind) -->\n      @if (showHumidity() || showWind()) {\n        <div class=\"axp-weather-details\">\n          <!-- Humidity information -->\n          @if (showHumidity()) {\n            <div class=\"axp-weather-detail-item\">\n              <div class=\"axp-weather-detail-icon\">\n                <i class=\"fa-solid fa-droplet\"></i>\n              </div>\n              <div class=\"axp-weather-detail-info\">\n                <div class=\"axp-weather-detail-label\">\n                  {{ 'weather.humidity' | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div class=\"axp-weather-detail-value\">{{ getHumidity() }}%</div>\n              </div>\n            </div>\n          }\n\n          <!-- Wind speed information -->\n          @if (showWind()) {\n            <div class=\"axp-weather-detail-item\">\n              <div class=\"axp-weather-detail-icon\">\n                <i class=\"fa-solid fa-wind\"></i>\n              </div>\n              <div class=\"axp-weather-detail-info\">\n                <div class=\"axp-weather-detail-label\">\n                  {{ 'weather.wind' | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div class=\"axp-weather-detail-value\">\n                  {{ getWindSpeed() }} {{ getWindSpeedUnit() | translate: { scope: 'dashboard' } | async }}\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      <!-- Weather forecast section -->\n      @if (showForecast() && weatherData()?.forecast) {\n        <div class=\"axp-weather-forecast\">\n          <div class=\"axp-weather-forecast-header\">\n            <h3 class=\"axp-weather-forecast-title\">\n              <i class=\"fa-solid fa-calendar-days\"></i>\n              <span class=\"ax-px-1\">{{ 'weather.forecast' | translate: { scope: 'dashboard' } | async }}</span>\n            </h3>\n          </div>\n          <!-- Loading indicator for forecast -->\n          <!-- @if (isForecastLoading()) {\n            <div class=\"axp-weather-forecast-loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n              <span>{{ 'weather.loading-forecast' | translate: { scope: 'dashboard' } | async }}</span>\n            </div>\n          } -->\n          <!-- Scrollable forecast days display -->\n          <div class=\"axp-weather-forecast-items\">\n            @for (day of displayedForecast(); track day.day) {\n              <div class=\"axp-weather-forecast-day\">\n                <div class=\"axp-weather-forecast-day-name\">\n                  {{ getDayName(parseDate(day.date)) | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div\n                  class=\"axp-weather-forecast-icon\"\n                  [title]=\"getConditionName(day.condition) | translate: { scope: 'dashboard' } | async\"\n                >\n                  <img [src]=\"getConditionIcon(day.condition || '')\" />\n                </div>\n                <div class=\"axp-weather-forecast-temps\">\n                  <span class=\"axp-weather-forecast-low\">\n                    {{ temperatureUnit() === '\u00B0C' ? day.minTempC : day.minTempF\n                    }}{{ getTemperatureUnit() | translate: { scope: 'dashboard' } | async }}\n                  </span>\n                  <span class=\"axp-weather-forecast-high\">\n                    {{ temperatureUnit() === '\u00B0C' ? day.maxTempC : day.maxTempF\n                    }}{{ getTemperatureUnit() | translate: { scope: 'dashboard' } | async }}\n                  </span>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Last updated timestamp -->\n      <div class=\"axp-weather-last-updated\">\n        <span>{{ 'weather.last-updated' | translate: { scope: 'dashboard' } | async }}: {{ getLastUpdated() }}</span>\n      </div>\n\n      <!-- Manual refresh button -->\n      <div class=\"axp-weather-refresh-action\">\n        <button\n          class=\"axp-weather-refresh-button\"\n          (click)=\"refreshWeather()\"\n          [attr.aria-label]=\"'weather.refresh' | translate: { scope: 'dashboard' } | async\"\n          [title]=\"'weather.refresh' | translate: { scope: 'dashboard' } | async\"\n        >\n          <i class=\"fa-solid fa-sync-alt\"></i>\n          <span>{{ 'weather.refresh' | translate: { scope: 'dashboard' } | async }}</span>\n        </button>\n      </div>\n    </div>\n  } @else if (!isLoading() && !hasError()) {\n    <!-- No data state (not loading, no error) -->\n    <div class=\"axp-weather-no-data-state\">\n      <i class=\"fa-solid fa-cloud-sun\"></i>\n      <p>{{ 'weather.no-data' | translate: { scope: 'dashboard' } | async }}</p>\n      <button class=\"axp-weather-refresh-button\" (click)=\"refreshWeather()\">\n        <i class=\"fa-solid fa-sync-alt\"></i>\n        <span>{{ 'weather.load-data' | translate: { scope: 'dashboard' } | async }}</span>\n      </button>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;--primary-gradient-start: #2196f3;--primary-gradient-end: #1976d2;--shadow-color: rgba(0, 0, 0, .2);--glass-bg: rgba(255, 255, 255, .15);--glass-border: rgba(255, 255, 255, .2);--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .75);--transition-speed: .3s}.axp-weather-container{width:100%;height:100%;overflow:hidden;position:relative;box-shadow:0 4px 8px rgba(0,0,0,.1);min-height:300px}.axp-weather-loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(44,62,80,.85);display:flex;justify-content:center;align-items:center;z-index:100}.axp-weather-loading-spinner{text-align:center}.axp-weather-loading-spinner i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-loading-spinner span{display:block;color:#fff;font-size:1rem}.axp-weather-error-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(189,54,47,.85);display:flex;justify-content:center;align-items:center}.axp-weather-error-message{text-align:center;padding:1rem}.axp-weather-error-message i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-error-message span{display:block;color:#fff;font-size:1.1rem;margin-bottom:1rem}.axp-weather-error-message .axp-weather-retry-button{color:#bd362f;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-error-message .axp-weather-retry-button:hover{transform:translateY(-1px)}.axp-weather-no-data-state{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:2rem;text-align:center}.axp-weather-no-data-state i{font-size:3rem;margin-bottom:1rem;color:rgba(255,255,255,.8)}.axp-weather-no-data-state p{margin-bottom:1.5rem;font-size:1.1rem}.axp-weather-no-data-state .axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-no-data-state .axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-background-decorations{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.axp-weather-decoration{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center}.axp-weather-gradient-overlay{position:absolute;top:0;left:0;width:100%;height:100%}.axp-weather-inner{position:relative;z-index:2;height:100%;padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between}.axp-weather-location-info{display:flex;align-items:center;margin-bottom:1.5rem}.axp-weather-location-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,.2);border-radius:50%;margin-right:.75rem}.axp-weather-location-icon i{color:#fff}.axp-weather-location-name{margin:0;font-size:1.5rem;font-weight:500;text-shadow:1px 1px 3px rgba(0,0,0,.2);text-transform:capitalize}.axp-weather-current-weather{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap}.axp-weather-condition{display:flex;flex-direction:column;align-items:center}.axp-weather-icon-wrapper{position:relative;margin-bottom:.5rem}.axp-weather-icon{position:relative;z-index:2;scale:2}.axp-weather-icon i{font-size:2.75rem;filter:drop-shadow(0 0 8px rgba(0,0,0,.3))}.axp-weather-icon-glow{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);width:45px;height:45px;border-radius:50%;filter:blur(15px);opacity:.4}.axp-weather-condition-name{font-size:1.1rem;text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.axp-weather-temperature{display:flex;align-items:flex-start;text-shadow:1px 1px 3px rgba(0,0,0,.3)}.axp-weather-temperature-value{font-size:3.5rem;font-weight:500;line-height:1}.axp-weather-temperature-unit{font-size:1.5rem;margin-top:.25rem}.axp-weather-details{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-darker-surface),var(--tw-bg-opacity, 1));display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:1rem;padding:1rem;border-radius:8px}.axp-weather-detail-item{display:flex;align-items:center;flex:1;min-width:120px}.axp-weather-detail-icon{width:40px;height:40px;border-radius:50%;background-color:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin-right:.75rem}.axp-weather-detail-icon i{font-size:1.25rem}.axp-weather-detail-info{display:flex;padding-inline:.25rem;flex-direction:column}.axp-weather-detail-label{font-size:.875rem;margin-bottom:.25rem}.axp-weather-detail-value{font-size:1.125rem;font-weight:500}.axp-weather-forecast{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-darker-surface),var(--tw-bg-opacity, 1));margin-bottom:.5rem;border-radius:8px;padding:1rem}.axp-weather-forecast-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.axp-weather-forecast-title{margin:0;font-size:1.125rem;font-weight:500;display:flex;align-items:center}.axp-weather-forecast-title i{margin-right:.5rem;opacity:.8}.axp-weather-scroll-indicator{color:rgba(255,255,255,.6)}.axp-weather-forecast-items{display:flex;overflow-x:auto;gap:.75rem;padding-bottom:.5rem}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.3);border-radius:4px}.axp-weather-forecast-items::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:4px}.axp-weather-forecast-day{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1));min-width:90px;display:flex;flex-direction:column;align-items:center;padding:.75rem .5rem;border-radius:6px;transition:all .3s ease}.axp-weather-forecast-day:hover{transform:translateY(-2px)}.axp-weather-forecast-day-name{font-size:.875rem;margin-bottom:.5rem;font-weight:500}.axp-weather-forecast-icon{font-size:1.5rem;margin-bottom:.5rem}.axp-weather-forecast-icon i{filter:drop-shadow(0 0 5px rgba(0,0,0,.2))}.axp-weather-forecast-temps{display:flex;flex-direction:row;gap:.75rem;align-items:center;font-size:.775rem}.axp-weather-last-updated{text-align:center;font-size:.75rem;opacity:.7;margin-bottom:.5rem}.axp-weather-refresh-action{text-align:center}.axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:.875rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-refresh-button i{font-size:.875rem}@media (max-width: 576px){.axp-weather-inner{padding:.8rem;gap:.4rem}.axp-weather-location-name{font-size:1.1rem;padding-inline:.25rem}.axp-weather-temperature{font-size:2.5rem}.axp-weather-temperature-unit{font-size:1.1rem}.axp-weather-weather-details{flex-direction:column;gap:.5rem}.axp-weather-forecast-items{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.5rem;margin:0 -.4rem;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;mask-image:linear-gradient(to right,#000 95%,rgba(0,0,0,0));-webkit-mask-image:linear-gradient(to right,rgb(0,0,0) 95%,rgba(0,0,0,0))}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.2);border-radius:4px}.axp-weather-forecast-day{min-width:60px;flex:0 0 auto;padding:.4rem .6rem}.axp-weather-forecast-day-name{font-size:.7rem}.axp-weather-forecast-icon{padding:.3rem;height:1.6rem}.axp-weather-forecast-temps{font-size:.7rem}.axp-weather-scroll-indicator{display:block}}:host-context(.theme-dark){--glass-bg: rgba(0, 0, 0, .3);--glass-border: rgba(255, 255, 255, .1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: HttpClientModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2$3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWeatherWidgetViewComponent, decorators: [{
             type: Component,
@@ -3362,7 +4542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                             provide: AXPWeatherApiAbstract,
                             useClass: AXPWeatherApiService,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Weather Widget Component Template -->\n<div class=\"axp-weather-container\" #containerElement>\n  <!-- Loading indicator -->\n  @if (isLoading()) {\n    <div class=\"axp-weather-loading-overlay\">\n      <div class=\"axp-weather-loading-spinner\">\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        <span>{{ 'weather.loading' | translate: { scope: 'dashboard' } | async }}</span>\n      </div>\n    </div>\n  }\n\n  <!-- Error message -->\n  @if (hasError()) {\n    <div class=\"axp-weather-error-overlay\">\n      <div class=\"axp-weather-error-message\">\n        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n        <span>{{ errorMessage() | translate: { scope: 'dashboard' } | async }}</span>\n        <button class=\"axp-weather-retry-button\" (click)=\"refreshWeather()\">\n          <i class=\"fa-solid fa-sync-alt\"></i>\n          <span>{{ 'weather.retry' | translate: { scope: 'dashboard' } | async }}</span>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Weather content - only show when we have data -->\n  @if (weatherData()) {\n    <!-- Background decorations based on weather condition -->\n    <div class=\"axp-weather-background-decorations\">\n      <div class=\"axp-weather-decoration\" [ngClass]=\"weatherData()?.current?.condition?.toLowerCase()\"></div>\n      <div class=\"axp-weather-gradient-overlay\"></div>\n    </div>\n\n    <div class=\"axp-weather-inner\">\n      <!-- Location information section -->\n      <div class=\"axp-weather-location-info\">\n        <div class=\"axp-weather-location-icon\">\n          <i class=\"fa-solid fa-location-dot\"></i>\n        </div>\n        <div class=\"axp-weather-location-text\">\n          <h2 class=\"axp-weather-location-name\">{{ city() }}</h2>\n        </div>\n      </div>\n\n      <!-- Current weather conditions section -->\n      <div class=\"axp-weather-current-weather\">\n        <!-- Weather icon and condition name -->\n        @if (showCurrentCondition()) {\n          <div class=\"axp-weather-condition\">\n            <div class=\"axp-weather-icon-wrapper\">\n              <div class=\"axp-weather-icon\">\n                <i\n                  [class]=\"getConditionIcon(weatherData()?.current?.condition || '')\"\n                  [style.color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n                ></i>\n              </div>\n              <div\n                class=\"axp-weather-icon-glow\"\n                [style.background-color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n              ></div>\n            </div>\n            <div class=\"axp-weather-condition-name\">\n              {{ getCurrentCondition() | translate: { scope: 'dashboard' } | async }}\n            </div>\n          </div>\n        }\n\n        <!-- Temperature display -->\n        @if (showTemperature()) {\n          <div class=\"axp-weather-temperature\">\n            <span class=\"axp-weather-temperature-value\">{{ getCurrentTemperature() }}</span>\n            <span class=\"axp-weather-temperature-unit\">{{\n              getTemperatureUnit() | translate: { scope: 'dashboard' } | async\n            }}</span>\n          </div>\n        }\n      </div>\n\n      <!-- Weather details section (humidity and wind) -->\n      @if (showHumidity() || showWind()) {\n        <div class=\"axp-weather-details\">\n          <!-- Humidity information -->\n          @if (showHumidity()) {\n            <div class=\"axp-weather-detail-item\">\n              <div class=\"axp-weather-detail-icon\">\n                <i class=\"fa-solid fa-droplet\"></i>\n              </div>\n              <div class=\"axp-weather-detail-info\">\n                <div class=\"axp-weather-detail-label\">\n                  {{ 'weather.humidity' | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div class=\"axp-weather-detail-value\">{{ getHumidity() }}%</div>\n              </div>\n            </div>\n          }\n\n          <!-- Wind speed information -->\n          @if (showWind()) {\n            <div class=\"axp-weather-detail-item\">\n              <div class=\"axp-weather-detail-icon\">\n                <i class=\"fa-solid fa-wind\"></i>\n              </div>\n              <div class=\"axp-weather-detail-info\">\n                <div class=\"axp-weather-detail-label\">\n                  {{ 'weather.wind' | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div class=\"axp-weather-detail-value\">\n                  {{ getWindSpeed() }} {{ getWindSpeedUnit() | translate: { scope: 'dashboard' } | async }}\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      <!-- Weather forecast section -->\n      @if (showForecast() && weatherData()?.forecast) {\n        <div class=\"axp-weather-forecast\">\n          <div class=\"axp-weather-forecast-header\">\n            <h3 class=\"axp-weather-forecast-title\">\n              <i class=\"fa-solid fa-calendar-days\"></i>\n              <span class=\"ax-px-1\">{{ 'weather.forecast' | translate: { scope: 'dashboard' } | async }}</span>\n            </h3>\n          </div>\n          <!-- Loading indicator for forecast -->\n          <!-- @if (isForecastLoading()) {\n            <div class=\"axp-weather-forecast-loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n              <span>{{ 'weather.loading-forecast' | translate: { scope: 'dashboard' } | async }}</span>\n            </div>\n          } -->\n          <!-- Scrollable forecast days display -->\n          <div class=\"axp-weather-forecast-items\">\n            @for (day of displayedForecast(); track day.day) {\n              <div class=\"axp-weather-forecast-day\">\n                <div class=\"axp-weather-forecast-day-name\">\n                  {{ getDayName(parseDate(day.date)) | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div\n                  class=\"axp-weather-forecast-icon\"\n                  [title]=\"getConditionName(day.condition) | translate: { scope: 'dashboard' } | async\"\n                >\n                  <i [class]=\"getConditionIcon(day.condition)\" [style.color]=\"getConditionColor(day.condition)\"></i>\n                </div>\n                <div class=\"axp-weather-forecast-temps\">\n                  <span class=\"axp-weather-forecast-low\">\n                    {{ temperatureUnit() === '\u00B0C' ? day.minTempC : day.minTempF\n                    }}{{ getTemperatureUnit() | translate: { scope: 'dashboard' } | async }}\n                  </span>\n                  <span class=\"axp-weather-forecast-high\">\n                    {{ temperatureUnit() === '\u00B0C' ? day.maxTempC : day.maxTempF\n                    }}{{ getTemperatureUnit() | translate: { scope: 'dashboard' } | async }}\n                  </span>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Last updated timestamp -->\n      <div class=\"axp-weather-last-updated\">\n        <span>{{ 'weather.last-updated' | translate: { scope: 'dashboard' } | async }}: {{ getLastUpdated() }}</span>\n      </div>\n\n      <!-- Manual refresh button -->\n      <div class=\"axp-weather-refresh-action\">\n        <button\n          class=\"axp-weather-refresh-button\"\n          (click)=\"refreshWeather()\"\n          [attr.aria-label]=\"'weather.refresh' | translate: { scope: 'dashboard' } | async\"\n          [title]=\"'weather.refresh' | translate: { scope: 'dashboard' } | async\"\n        >\n          <i class=\"fa-solid fa-sync-alt\"></i>\n          <span>{{ 'weather.refresh' | translate: { scope: 'dashboard' } | async }}</span>\n        </button>\n      </div>\n    </div>\n  } @else if (!isLoading() && !hasError()) {\n    <!-- No data state (not loading, no error) -->\n    <div class=\"axp-weather-no-data-state\">\n      <i class=\"fa-solid fa-cloud-sun\"></i>\n      <p>{{ 'weather.no-data' | translate: { scope: 'dashboard' } | async }}</p>\n      <button class=\"axp-weather-refresh-button\" (click)=\"refreshWeather()\">\n        <i class=\"fa-solid fa-sync-alt\"></i>\n        <span>{{ 'weather.load-data' | translate: { scope: 'dashboard' } | async }}</span>\n      </button>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;--primary-gradient-start: #2196f3;--primary-gradient-end: #1976d2;--shadow-color: rgba(0, 0, 0, .2);--glass-bg: rgba(255, 255, 255, .15);--glass-border: rgba(255, 255, 255, .2);--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .75);--transition-speed: .3s}.axp-weather-container{width:100%;height:100%;overflow:hidden;position:relative;box-shadow:0 4px 8px rgba(0,0,0,.1);color:#fff;min-height:300px;background-color:#2c3e50}.axp-weather-loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(44,62,80,.85);display:flex;justify-content:center;align-items:center;z-index:100}.axp-weather-loading-spinner{text-align:center}.axp-weather-loading-spinner i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-loading-spinner span{display:block;color:#fff;font-size:1rem}.axp-weather-error-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(189,54,47,.85);display:flex;justify-content:center;align-items:center}.axp-weather-error-message{text-align:center;padding:1rem}.axp-weather-error-message i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-error-message span{display:block;color:#fff;font-size:1.1rem;margin-bottom:1rem}.axp-weather-error-message .axp-weather-retry-button{color:#bd362f;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-error-message .axp-weather-retry-button:hover{transform:translateY(-1px)}.axp-weather-no-data-state{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:2rem;text-align:center}.axp-weather-no-data-state i{font-size:3rem;margin-bottom:1rem;color:rgba(255,255,255,.8)}.axp-weather-no-data-state p{margin-bottom:1.5rem;font-size:1.1rem}.axp-weather-no-data-state .axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-no-data-state .axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-background-decorations{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.axp-weather-decoration{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center}.axp-weather-decoration.sunny{background:linear-gradient(135deg,#ff7e00,#f7d358)}.axp-weather-decoration.partlyCloudy{background:linear-gradient(135deg,#7ba2e7,#b4d2f7)}.axp-weather-decoration.cloudy{background:linear-gradient(135deg,#717e8c,#919eab)}.axp-weather-decoration.rain{background:linear-gradient(135deg,#6a8caf,#567a9e)}.axp-weather-decoration.snow{background:linear-gradient(135deg,#99b3cc,#c6d4e1)}.axp-weather-decoration.thunder{background:linear-gradient(135deg,#425777,#2c3e50)}.axp-weather-decoration.mist{background:linear-gradient(135deg,#94a3b8,#cbd5e1)}.axp-weather-gradient-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5))}.axp-weather-inner{position:relative;z-index:2;height:100%;padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between}.axp-weather-location-info{display:flex;align-items:center;margin-bottom:1.5rem}.axp-weather-location-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,.2);border-radius:50%;margin-right:.75rem}.axp-weather-location-icon i{color:#fff}.axp-weather-location-name{margin:0;font-size:1.5rem;font-weight:500;text-shadow:1px 1px 3px rgba(0,0,0,.2);text-transform:capitalize}.axp-weather-current-weather{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap}.axp-weather-condition{display:flex;flex-direction:column;align-items:center}.axp-weather-icon-wrapper{position:relative;margin-bottom:.5rem}.axp-weather-icon{position:relative;z-index:2}.axp-weather-icon i{font-size:2.75rem;filter:drop-shadow(0 0 8px rgba(0,0,0,.3))}.axp-weather-icon-glow{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);width:45px;height:45px;border-radius:50%;filter:blur(15px);opacity:.75}.axp-weather-condition-name{font-size:1.1rem;text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.axp-weather-temperature{display:flex;align-items:flex-start;text-shadow:1px 1px 3px rgba(0,0,0,.3)}.axp-weather-temperature-value{font-size:3.5rem;font-weight:500;line-height:1}.axp-weather-temperature-unit{font-size:1.5rem;margin-top:.25rem}.axp-weather-details{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:1rem;padding:1rem;background-color:rgba(0,0,0,.15);border-radius:8px}.axp-weather-detail-item{display:flex;align-items:center;flex:1;min-width:120px}.axp-weather-detail-icon{width:40px;height:40px;border-radius:50%;background-color:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin-right:.75rem}.axp-weather-detail-icon i{font-size:1.25rem}.axp-weather-detail-info{display:flex;padding-inline:.25rem;flex-direction:column}.axp-weather-detail-label{font-size:.875rem;color:rgba(255,255,255,.8);margin-bottom:.25rem}.axp-weather-detail-value{font-size:1.125rem;font-weight:500}.axp-weather-forecast{margin-bottom:.5rem;background-color:rgba(0,0,0,.15);border-radius:8px;padding:1rem}.axp-weather-forecast-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.axp-weather-forecast-title{margin:0;font-size:1.125rem;font-weight:500;display:flex;align-items:center}.axp-weather-forecast-title i{margin-right:.5rem;opacity:.8}.axp-weather-scroll-indicator{color:rgba(255,255,255,.6)}.axp-weather-forecast-items{display:flex;overflow-x:auto;gap:.75rem;padding-bottom:.5rem}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.3);border-radius:4px}.axp-weather-forecast-items::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:4px}.axp-weather-forecast-day{min-width:90px;display:flex;flex-direction:column;align-items:center;padding:.75rem .5rem;background-color:rgba(255,255,255,.1);border-radius:6px;transition:all .3s ease}.axp-weather-forecast-day:hover{background-color:rgba(255,255,255,.15);transform:translateY(-2px)}.axp-weather-forecast-day-name{font-size:.875rem;margin-bottom:.5rem;font-weight:500}.axp-weather-forecast-icon{font-size:1.5rem;margin-bottom:.5rem}.axp-weather-forecast-icon i{filter:drop-shadow(0 0 5px rgba(0,0,0,.2))}.axp-weather-forecast-temps{display:flex;flex-direction:row;gap:.75rem;align-items:center;font-size:.775rem}.axp-weather-last-updated{text-align:center;font-size:.75rem;opacity:.7;margin-bottom:.5rem}.axp-weather-refresh-action{text-align:center}.axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:.875rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-refresh-button i{font-size:.875rem}@media (max-width: 576px){.axp-weather-inner{padding:.8rem;gap:.4rem}.axp-weather-location-name{font-size:1.1rem;padding-inline:.25rem}.axp-weather-temperature{font-size:2.5rem}.axp-weather-temperature-unit{font-size:1.1rem}.axp-weather-weather-details{flex-direction:column;gap:.5rem}.axp-weather-forecast-items{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.5rem;margin:0 -.4rem;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;mask-image:linear-gradient(to right,#000 95%,rgba(0,0,0,0));-webkit-mask-image:linear-gradient(to right,rgb(0,0,0) 95%,rgba(0,0,0,0))}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.2);border-radius:4px}.axp-weather-forecast-day{min-width:60px;flex:0 0 auto;padding:.4rem .6rem}.axp-weather-forecast-day-name{font-size:.7rem}.axp-weather-forecast-icon{padding:.3rem;height:1.6rem}.axp-weather-forecast-temps{font-size:.7rem}.axp-weather-scroll-indicator{display:block}}:host-context(.theme-dark){--glass-bg: rgba(0, 0, 0, .3);--glass-border: rgba(255, 255, 255, .1)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Weather Widget Component Template -->\n<div class=\"axp-weather-container\" #containerElement>\n  <!-- Loading indicator -->\n  @if (isLoading()) {\n    <div class=\"axp-weather-loading-overlay\">\n      <div class=\"axp-weather-loading-spinner\">\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        <span>{{ 'weather.loading' | translate: { scope: 'dashboard' } | async }}</span>\n      </div>\n    </div>\n  }\n\n  <!-- Error message -->\n  @if (hasError()) {\n    <div class=\"axp-weather-error-overlay\">\n      <div class=\"axp-weather-error-message\">\n        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n        <span>{{ errorMessage() | translate: { scope: 'dashboard' } | async }}</span>\n        <button class=\"axp-weather-retry-button\" (click)=\"refreshWeather()\">\n          <i class=\"fa-solid fa-sync-alt\"></i>\n          <span>{{ 'weather.retry' | translate: { scope: 'dashboard' } | async }}</span>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Weather content - only show when we have data -->\n  @if (weatherData()) {\n    <!-- Background decorations based on weather condition -->\n    <div class=\"axp-weather-background-decorations\">\n      <div class=\"axp-weather-decoration\" [ngClass]=\"weatherData()?.current?.condition?.toLowerCase()\"></div>\n      <div class=\"axp-weather-gradient-overlay\"></div>\n    </div>\n\n    <div class=\"axp-weather-inner\">\n      <!-- Location information section -->\n      <div class=\"axp-weather-location-info\">\n        <div class=\"axp-weather-location-icon\">\n          <i class=\"fa-solid fa-location-dot\"></i>\n        </div>\n        <div class=\"axp-weather-location-text\">\n          <h2 class=\"axp-weather-location-name\">{{ city() }}</h2>\n        </div>\n      </div>\n\n      <!-- Current weather conditions section -->\n      <div class=\"axp-weather-current-weather\">\n        <!-- Weather icon and condition name -->\n        @if (showCurrentCondition()) {\n          <div class=\"axp-weather-condition\">\n            <div class=\"axp-weather-icon-wrapper\">\n              <div class=\"axp-weather-icon\">\n                <img [src]=\"getConditionIcon(weatherData()?.current?.condition || '')\" />\n              </div>\n              <div\n                class=\"axp-weather-icon-glow\"\n                [style.background-color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n              ></div>\n            </div>\n            <div class=\"axp-weather-condition-name\">\n              {{ getCurrentCondition() | translate: { scope: 'dashboard' } | async }}\n            </div>\n          </div>\n        }\n\n        <!-- Temperature display -->\n        @if (showTemperature()) {\n          <div class=\"axp-weather-temperature\">\n            <span class=\"axp-weather-temperature-value\">{{ getCurrentTemperature() }}</span>\n            <span class=\"axp-weather-temperature-unit\">{{\n              getTemperatureUnit() | translate: { scope: 'dashboard' } | async\n            }}</span>\n          </div>\n        }\n      </div>\n\n      <!-- Weather details section (humidity and wind) -->\n      @if (showHumidity() || showWind()) {\n        <div class=\"axp-weather-details\">\n          <!-- Humidity information -->\n          @if (showHumidity()) {\n            <div class=\"axp-weather-detail-item\">\n              <div class=\"axp-weather-detail-icon\">\n                <i class=\"fa-solid fa-droplet\"></i>\n              </div>\n              <div class=\"axp-weather-detail-info\">\n                <div class=\"axp-weather-detail-label\">\n                  {{ 'weather.humidity' | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div class=\"axp-weather-detail-value\">{{ getHumidity() }}%</div>\n              </div>\n            </div>\n          }\n\n          <!-- Wind speed information -->\n          @if (showWind()) {\n            <div class=\"axp-weather-detail-item\">\n              <div class=\"axp-weather-detail-icon\">\n                <i class=\"fa-solid fa-wind\"></i>\n              </div>\n              <div class=\"axp-weather-detail-info\">\n                <div class=\"axp-weather-detail-label\">\n                  {{ 'weather.wind' | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div class=\"axp-weather-detail-value\">\n                  {{ getWindSpeed() }} {{ getWindSpeedUnit() | translate: { scope: 'dashboard' } | async }}\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      <!-- Weather forecast section -->\n      @if (showForecast() && weatherData()?.forecast) {\n        <div class=\"axp-weather-forecast\">\n          <div class=\"axp-weather-forecast-header\">\n            <h3 class=\"axp-weather-forecast-title\">\n              <i class=\"fa-solid fa-calendar-days\"></i>\n              <span class=\"ax-px-1\">{{ 'weather.forecast' | translate: { scope: 'dashboard' } | async }}</span>\n            </h3>\n          </div>\n          <!-- Loading indicator for forecast -->\n          <!-- @if (isForecastLoading()) {\n            <div class=\"axp-weather-forecast-loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n              <span>{{ 'weather.loading-forecast' | translate: { scope: 'dashboard' } | async }}</span>\n            </div>\n          } -->\n          <!-- Scrollable forecast days display -->\n          <div class=\"axp-weather-forecast-items\">\n            @for (day of displayedForecast(); track day.day) {\n              <div class=\"axp-weather-forecast-day\">\n                <div class=\"axp-weather-forecast-day-name\">\n                  {{ getDayName(parseDate(day.date)) | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div\n                  class=\"axp-weather-forecast-icon\"\n                  [title]=\"getConditionName(day.condition) | translate: { scope: 'dashboard' } | async\"\n                >\n                  <img [src]=\"getConditionIcon(day.condition || '')\" />\n                </div>\n                <div class=\"axp-weather-forecast-temps\">\n                  <span class=\"axp-weather-forecast-low\">\n                    {{ temperatureUnit() === '\u00B0C' ? day.minTempC : day.minTempF\n                    }}{{ getTemperatureUnit() | translate: { scope: 'dashboard' } | async }}\n                  </span>\n                  <span class=\"axp-weather-forecast-high\">\n                    {{ temperatureUnit() === '\u00B0C' ? day.maxTempC : day.maxTempF\n                    }}{{ getTemperatureUnit() | translate: { scope: 'dashboard' } | async }}\n                  </span>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Last updated timestamp -->\n      <div class=\"axp-weather-last-updated\">\n        <span>{{ 'weather.last-updated' | translate: { scope: 'dashboard' } | async }}: {{ getLastUpdated() }}</span>\n      </div>\n\n      <!-- Manual refresh button -->\n      <div class=\"axp-weather-refresh-action\">\n        <button\n          class=\"axp-weather-refresh-button\"\n          (click)=\"refreshWeather()\"\n          [attr.aria-label]=\"'weather.refresh' | translate: { scope: 'dashboard' } | async\"\n          [title]=\"'weather.refresh' | translate: { scope: 'dashboard' } | async\"\n        >\n          <i class=\"fa-solid fa-sync-alt\"></i>\n          <span>{{ 'weather.refresh' | translate: { scope: 'dashboard' } | async }}</span>\n        </button>\n      </div>\n    </div>\n  } @else if (!isLoading() && !hasError()) {\n    <!-- No data state (not loading, no error) -->\n    <div class=\"axp-weather-no-data-state\">\n      <i class=\"fa-solid fa-cloud-sun\"></i>\n      <p>{{ 'weather.no-data' | translate: { scope: 'dashboard' } | async }}</p>\n      <button class=\"axp-weather-refresh-button\" (click)=\"refreshWeather()\">\n        <i class=\"fa-solid fa-sync-alt\"></i>\n        <span>{{ 'weather.load-data' | translate: { scope: 'dashboard' } | async }}</span>\n      </button>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;--primary-gradient-start: #2196f3;--primary-gradient-end: #1976d2;--shadow-color: rgba(0, 0, 0, .2);--glass-bg: rgba(255, 255, 255, .15);--glass-border: rgba(255, 255, 255, .2);--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .75);--transition-speed: .3s}.axp-weather-container{width:100%;height:100%;overflow:hidden;position:relative;box-shadow:0 4px 8px rgba(0,0,0,.1);min-height:300px}.axp-weather-loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(44,62,80,.85);display:flex;justify-content:center;align-items:center;z-index:100}.axp-weather-loading-spinner{text-align:center}.axp-weather-loading-spinner i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-loading-spinner span{display:block;color:#fff;font-size:1rem}.axp-weather-error-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(189,54,47,.85);display:flex;justify-content:center;align-items:center}.axp-weather-error-message{text-align:center;padding:1rem}.axp-weather-error-message i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-error-message span{display:block;color:#fff;font-size:1.1rem;margin-bottom:1rem}.axp-weather-error-message .axp-weather-retry-button{color:#bd362f;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-error-message .axp-weather-retry-button:hover{transform:translateY(-1px)}.axp-weather-no-data-state{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:2rem;text-align:center}.axp-weather-no-data-state i{font-size:3rem;margin-bottom:1rem;color:rgba(255,255,255,.8)}.axp-weather-no-data-state p{margin-bottom:1.5rem;font-size:1.1rem}.axp-weather-no-data-state .axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-no-data-state .axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-background-decorations{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.axp-weather-decoration{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center}.axp-weather-gradient-overlay{position:absolute;top:0;left:0;width:100%;height:100%}.axp-weather-inner{position:relative;z-index:2;height:100%;padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between}.axp-weather-location-info{display:flex;align-items:center;margin-bottom:1.5rem}.axp-weather-location-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,.2);border-radius:50%;margin-right:.75rem}.axp-weather-location-icon i{color:#fff}.axp-weather-location-name{margin:0;font-size:1.5rem;font-weight:500;text-shadow:1px 1px 3px rgba(0,0,0,.2);text-transform:capitalize}.axp-weather-current-weather{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap}.axp-weather-condition{display:flex;flex-direction:column;align-items:center}.axp-weather-icon-wrapper{position:relative;margin-bottom:.5rem}.axp-weather-icon{position:relative;z-index:2;scale:2}.axp-weather-icon i{font-size:2.75rem;filter:drop-shadow(0 0 8px rgba(0,0,0,.3))}.axp-weather-icon-glow{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);width:45px;height:45px;border-radius:50%;filter:blur(15px);opacity:.4}.axp-weather-condition-name{font-size:1.1rem;text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.axp-weather-temperature{display:flex;align-items:flex-start;text-shadow:1px 1px 3px rgba(0,0,0,.3)}.axp-weather-temperature-value{font-size:3.5rem;font-weight:500;line-height:1}.axp-weather-temperature-unit{font-size:1.5rem;margin-top:.25rem}.axp-weather-details{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-darker-surface),var(--tw-bg-opacity, 1));display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:1rem;padding:1rem;border-radius:8px}.axp-weather-detail-item{display:flex;align-items:center;flex:1;min-width:120px}.axp-weather-detail-icon{width:40px;height:40px;border-radius:50%;background-color:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin-right:.75rem}.axp-weather-detail-icon i{font-size:1.25rem}.axp-weather-detail-info{display:flex;padding-inline:.25rem;flex-direction:column}.axp-weather-detail-label{font-size:.875rem;margin-bottom:.25rem}.axp-weather-detail-value{font-size:1.125rem;font-weight:500}.axp-weather-forecast{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-darker-surface),var(--tw-bg-opacity, 1));margin-bottom:.5rem;border-radius:8px;padding:1rem}.axp-weather-forecast-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.axp-weather-forecast-title{margin:0;font-size:1.125rem;font-weight:500;display:flex;align-items:center}.axp-weather-forecast-title i{margin-right:.5rem;opacity:.8}.axp-weather-scroll-indicator{color:rgba(255,255,255,.6)}.axp-weather-forecast-items{display:flex;overflow-x:auto;gap:.75rem;padding-bottom:.5rem}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.3);border-radius:4px}.axp-weather-forecast-items::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:4px}.axp-weather-forecast-day{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1));min-width:90px;display:flex;flex-direction:column;align-items:center;padding:.75rem .5rem;border-radius:6px;transition:all .3s ease}.axp-weather-forecast-day:hover{transform:translateY(-2px)}.axp-weather-forecast-day-name{font-size:.875rem;margin-bottom:.5rem;font-weight:500}.axp-weather-forecast-icon{font-size:1.5rem;margin-bottom:.5rem}.axp-weather-forecast-icon i{filter:drop-shadow(0 0 5px rgba(0,0,0,.2))}.axp-weather-forecast-temps{display:flex;flex-direction:row;gap:.75rem;align-items:center;font-size:.775rem}.axp-weather-last-updated{text-align:center;font-size:.75rem;opacity:.7;margin-bottom:.5rem}.axp-weather-refresh-action{text-align:center}.axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:.875rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-refresh-button i{font-size:.875rem}@media (max-width: 576px){.axp-weather-inner{padding:.8rem;gap:.4rem}.axp-weather-location-name{font-size:1.1rem;padding-inline:.25rem}.axp-weather-temperature{font-size:2.5rem}.axp-weather-temperature-unit{font-size:1.1rem}.axp-weather-weather-details{flex-direction:column;gap:.5rem}.axp-weather-forecast-items{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.5rem;margin:0 -.4rem;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;mask-image:linear-gradient(to right,#000 95%,rgba(0,0,0,0));-webkit-mask-image:linear-gradient(to right,rgb(0,0,0) 95%,rgba(0,0,0,0))}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.2);border-radius:4px}.axp-weather-forecast-day{min-width:60px;flex:0 0 auto;padding:.4rem .6rem}.axp-weather-forecast-day-name{font-size:.7rem}.axp-weather-forecast-icon{padding:.3rem;height:1.6rem}.axp-weather-forecast-temps{font-size:.7rem}.axp-weather-scroll-indicator{display:block}}:host-context(.theme-dark){--glass-bg: rgba(0, 0, 0, .3);--glass-border: rgba(255, 255, 255, .1)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
 var weatherWidget_component = /*#__PURE__*/Object.freeze({
@@ -3901,10 +5081,14 @@ class AXMDashboardManagementModule {
                     AXPBarChartWidget,
                     AXPLineChartWidget,
                     AXPGaugeChartWidget,
+                    //utility
                     AXPStickyNoteWidget,
                     AXPClockCalendarWidget,
                     AXPWeatherWidget,
                     AXPTaskListWidget,
+                    AXPMinimalWeatherWidget,
+                    AXPAdvancedWeatherWidget,
+                    AXPAnalogClockWidget,
                 ],
             })] }); }
 }
@@ -3920,10 +5104,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                                 AXPBarChartWidget,
                                 AXPLineChartWidget,
                                 AXPGaugeChartWidget,
+                                //utility
                                 AXPStickyNoteWidget,
                                 AXPClockCalendarWidget,
                                 AXPWeatherWidget,
                                 AXPTaskListWidget,
+                                AXPMinimalWeatherWidget,
+                                AXPAdvancedWeatherWidget,
+                                AXPAnalogClockWidget,
                             ],
                         }),
                     ],
@@ -4007,11 +5195,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             args: [{ selector: 'axm-dashboard-widget-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXButtonModule, AXDecoratorModule, AXDropdownModule, AXTranslationModule, CommonModule], standalone: true, template: "<section class=\"ax-relative ax-size-full ax-flex ax-flex-col ax-group ax-overflow-hidden\">\n  <!-- Action button - stays absolute -->\n  @if(!isLocked()) {\n  <div\n    class=\"ax-p-[0.6125rem] ax-absolute ax-top-0 ax-end-0 ax-z-[99] ax-invisible group-hover:ax-visible md:group-hover:ax-visible\"\n    [class.!ax-visible]=\"isDropdownOpen()\"\n    (touchstart)=\"isDropdownOpen.set(true)\"\n  >\n    <ax-button class=\"ax-sm ax-main-button\" [look]=\"'blank'\">\n      <ax-prefix>\n        <ax-icon icon=\"fa-light fa-ellipsis-vertical\"></ax-icon>\n      </ax-prefix>\n      <ax-dropdown-panel (onOpened)=\"isDropdownOpen.set(true)\" (onClosed)=\"isDropdownOpen.set(false)\">\n        <ng-container *translate=\"let t\">\n          <ax-button-item-list (onItemClick)=\"handleOnItemClick($event)\">\n            @if(hasConfiguration()){\n            <ax-button-item\n              [data]=\"'configuration'\"\n              [text]=\"(t('configuration', { scope: 'dashboard' }) | async) || 'configuration'\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-divider></ax-divider>\n            }\n            <ax-button-item [data]=\"'delete'\" [text]=\"(t('delete') | async) || 'delete'\" color=\"danger\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          </ax-button-item-list>\n        </ng-container>\n      </ax-dropdown-panel>\n    </ax-button>\n  </div>\n  }\n\n  <!-- Title section -->\n  @if(title()) {\n  <div class=\"ax-ps-5 ax-pe-8 ax-py-3 ax-border-b\">\n    <h3 class=\"ax-text-start ax-text-lg ax-font-medium ax-truncate\">{{title()}}</h3>\n  </div>\n  }\n\n  <!-- Content section -->\n  <div class=\"ax-overflow-auto ax-h-full\">\n    <ng-content></ng-content>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
         }] });
 
-const path = 'home:dashboard:';
-var AXPHomeDashboardSetting;
+const path$1 = 'home:dashboard:';
+var AXPHomeDashboardSetting$1;
 (function (AXPHomeDashboardSetting) {
     AXPHomeDashboardSetting["CurrentDashboard"] = "home:dashboard:current-dashboard";
-})(AXPHomeDashboardSetting || (AXPHomeDashboardSetting = {}));
+})(AXPHomeDashboardSetting$1 || (AXPHomeDashboardSetting$1 = {}));
 
 class AXMAddDashboardPopup extends AXBasePageComponent {
     constructor() {
@@ -4441,7 +5629,7 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
             const dashboards = dashboardModels.map(modelToDashboardLayout);
             const currentDashboardId = await settingService
                 .scope(AXPPlatformScope.User)
-                .get(AXPHomeDashboardSetting.CurrentDashboard);
+                .get(AXPHomeDashboardSetting$1.CurrentDashboard);
             let newCurrentDashboardId = null;
             if (dashboards.length > 0) {
                 const dashboardExists = currentDashboardId && dashboards.some((d) => d.id === currentDashboardId);
@@ -4449,7 +5637,7 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
                 if (!dashboardExists) {
                     settingService
                         .scope(AXPPlatformScope.User)
-                        .set(AXPHomeDashboardSetting.CurrentDashboard, newCurrentDashboardId);
+                        .set(AXPHomeDashboardSetting$1.CurrentDashboard, newCurrentDashboardId);
                 }
             }
             patchState(store, {
@@ -4467,7 +5655,7 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
     return {
         setCurrentDashboard(dashboardId) {
             patchState(store, { currentDashboardId: dashboardId });
-            settingService.scope(AXPPlatformScope.User).set(AXPHomeDashboardSetting.CurrentDashboard, dashboardId);
+            settingService.scope(AXPPlatformScope.User).set(AXPHomeDashboardSetting$1.CurrentDashboard, dashboardId);
         },
         async addDashboard() {
             try {
@@ -4497,7 +5685,7 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
                 });
                 settingService
                     .scope(AXPPlatformScope.User)
-                    .set(AXPHomeDashboardSetting.CurrentDashboard, dashboardWithMetadata.id);
+                    .set(AXPHomeDashboardSetting$1.CurrentDashboard, dashboardWithMetadata.id);
             }
             catch (error) {
                 console.error('Error adding dashboard:', error);
@@ -4622,7 +5810,7 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
                         if (newCurrentDashboardId) {
                             settingService
                                 .scope(AXPPlatformScope.User)
-                                .set(AXPHomeDashboardSetting.CurrentDashboard, newCurrentDashboardId);
+                                .set(AXPHomeDashboardSetting$1.CurrentDashboard, newCurrentDashboardId);
                         }
                     }
                     patchState(store, {
@@ -4657,7 +5845,7 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
                 dashboards: updatedDashboards,
                 currentDashboardId: dashboard.id,
             });
-            settingService.scope(AXPPlatformScope.User).set(AXPHomeDashboardSetting.CurrentDashboard, dashboard.id);
+            settingService.scope(AXPPlatformScope.User).set(AXPHomeDashboardSetting$1.CurrentDashboard, dashboard.id);
         },
         async onGridChange(event) {
             if (!layoutThemeService.isDesktopDevice() || !store.selectedDashboard())
@@ -4979,7 +6167,7 @@ class AXMDashboardHomeComponent extends AXPPageLayoutBaseComponent {
                 provide: AXPPageLayoutBase,
                 useExisting: AXMDashboardHomeComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <!-- Content Section -->\n\n  <axp-page-content class=\"ax-relative\">\n    <!-- Loading State -->\n    @if(store.isLoading()) {\n    <div\n      class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-w-full ax-absolute ax-z-10 ax-bg-white/80\"\n    >\n      <ax-loading></ax-loading>\n      <p class=\"ax-mt-3 ax-text-gray-600\">{{ t('loading', { scope: 'dashboard' }) | async }}</p>\n    </div>\n    } @else {\n    <axp-widgets-container [context]=\"context()\">\n      <ax-grid-layout-container [options]=\"store.currentLayoutOptions()\" (onChange)=\"store.onGridChange($event)\">\n        <!-- No Dashboards State -->\n        @if(!store.dashboards() || store.dashboards().length === 0) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">{{ t('no-dashboards', { scope: 'dashboard' }) | async }}</h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('add-first-dashboard', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        }\n        <!-- No Selected Dashboard State -->\n        @else if (!store.selectedDashboard()) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">\n            {{ t('no-current-dashboard', { scope: 'dashboard' }) | async }}\n          </h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('select-dashboard', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        }\n        <!-- No Widgets State -->\n        @else if (!store.selectedDashboard()?.widgets || store.selectedDashboard()?.widgets?.length === 0) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">{{ t('no-widgets', { scope: 'dashboard' }) | async }}</h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('add-first-widget', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        }\n        <!-- Widgets Grid -->\n        @else { @for(widget of store.selectedDashboard()?.widgets; track widget.config.id) {\n        <ax-grid-layout-widget [options]=\"widget.config\">\n          <axm-dashboard-widget-wrapper\n            [title]=\"widget.node?.options?.['title']\"\n            [hasConfiguration]=\"store.canConfigureWidget()(widget)\"\n            [isLocked]=\"store.isWidgetLocked()(widget)\"\n            (onDelete)=\"confirmWidgetDelete(store.selectedDashboard()?.id!, widget.config.id!)\"\n            (onConfiguration)=\"store.handlePopupConfiguration(widget.node!)\"\n            (onValueChanged)=\"store.handleValueChanged(widget?.node!,$event)\"\n            (onOptionsChanged)=\"store.handleOptionsChanged(widget?.node!,$event)\"\n          >\n            @if(widget.node) {\n            <ng-container axp-widget-renderer [node]=\"widget.node\" [mode]=\"'view'\"></ng-container>\n            }\n          </axm-dashboard-widget-wrapper>\n        </ax-grid-layout-widget>\n        } }\n      </ax-grid-layout-container>\n    </axp-widgets-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axm-dashboard-home{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axm-dashboard-home .placeholder-content{border-radius:.5rem!important;border-width:1px!important;border-style:dashed!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))!important;background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5)!important}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content{border-radius:.375rem!important;border-width:1px!important;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important;--ax-comp-grid-layout-stack-item-content-bg-color: var(--ax-sys-color-lightest-surface) }\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXGridLayoutBuilderModule }, { kind: "component", type: i4$1.AXGridLayoutContainerComponent, selector: "ax-grid-layout-container", inputs: ["options", "isEmpty"], outputs: ["onAdded", "onRemoved", "onWidgetChange", "onChange", "onRender", "isEmptyChange"] }, { kind: "component", type: i4$1.AXGridLayoutWidgetComponent, selector: "ax-grid-layout-widget", inputs: ["options"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i2$3.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: AXMDashboardWidgetWrapperComponent, selector: "axm-dashboard-widget-wrapper", inputs: ["title", "hasConfiguration", "isLocked"], outputs: ["onDelete", "onConfiguration", "onValueChanged", "onOptionsChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <!-- Content Section -->\n\n  <axp-page-content class=\"ax-relative\">\n    <!-- Loading State -->\n    @if(store.isLoading()) {\n    <div\n      class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-w-full ax-absolute ax-z-10 ax-bg-white/80\"\n    >\n      <ax-loading></ax-loading>\n      <p class=\"ax-mt-3 ax-text-gray-600\">{{ t('loading', { scope: 'dashboard' }) | async }}</p>\n    </div>\n    } @else {\n    <axp-widgets-container [context]=\"context()\">\n      <ax-grid-layout-container [options]=\"store.currentLayoutOptions()\" (onChange)=\"store.onGridChange($event)\">\n        <!-- No Dashboards State -->\n        @if(!store.dashboards() || store.dashboards().length === 0) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">{{ t('no-dashboards', { scope: 'dashboard' }) | async }}</h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('add-first-dashboard', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        }\n        <!-- No Selected Dashboard State -->\n        @else if (!store.selectedDashboard()) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">\n            {{ t('no-current-dashboard', { scope: 'dashboard' }) | async }}\n          </h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('select-dashboard', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        }\n        <!-- No Widgets State -->\n        @else if (!store.selectedDashboard()?.widgets || store.selectedDashboard()?.widgets?.length === 0) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">{{ t('no-widgets', { scope: 'dashboard' }) | async }}</h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('add-first-widget', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        }\n        <!-- Widgets Grid -->\n        @else { @for(widget of store.selectedDashboard()?.widgets; track widget.config.id) {\n        <ax-grid-layout-widget\n          [options]=\"widget.config\"\n          class=\"dark:[--ax-comp-grid-layout-stack-item-content-bg-color:var(--ax-sys-color-lighter-surface)] [--ax-comp-grid-layout-stack-item-content-bg-color:var(--ax-sys-color-lightest-surface)]\"\n        >\n          <axm-dashboard-widget-wrapper\n            [title]=\"widget.node?.options?.['title']\"\n            [hasConfiguration]=\"store.canConfigureWidget()(widget)\"\n            [isLocked]=\"store.isWidgetLocked()(widget)\"\n            (onDelete)=\"confirmWidgetDelete(store.selectedDashboard()?.id!, widget.config.id!)\"\n            (onConfiguration)=\"store.handlePopupConfiguration(widget.node!)\"\n            (onValueChanged)=\"store.handleValueChanged(widget?.node!,$event)\"\n            (onOptionsChanged)=\"store.handleOptionsChanged(widget?.node!,$event)\"\n          >\n            @if(widget.node) {\n            <ng-container axp-widget-renderer [node]=\"widget.node\" [mode]=\"'view'\"></ng-container>\n            }\n          </axm-dashboard-widget-wrapper>\n        </ax-grid-layout-widget>\n        } }\n      </ax-grid-layout-container>\n    </axp-widgets-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axm-dashboard-home{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axm-dashboard-home .placeholder-content{border-radius:.5rem!important;border-width:1px!important;border-style:dashed!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))!important;background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5)!important}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content{border-radius:.375rem!important;border-width:1px!important;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$5.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXGridLayoutBuilderModule }, { kind: "component", type: i4$1.AXGridLayoutContainerComponent, selector: "ax-grid-layout-container", inputs: ["options", "isEmpty"], outputs: ["onAdded", "onRemoved", "onWidgetChange", "onChange", "onRender", "isEmptyChange"] }, { kind: "component", type: i4$1.AXGridLayoutWidgetComponent, selector: "ax-grid-layout-widget", inputs: ["options"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i2$3.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: AXMDashboardWidgetWrapperComponent, selector: "axm-dashboard-widget-wrapper", inputs: ["title", "hasConfiguration", "isLocked"], outputs: ["onDelete", "onConfiguration", "onValueChanged", "onOptionsChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMDashboardHomeComponent, decorators: [{
             type: Component,
@@ -5005,7 +6193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                             provide: AXPPageLayoutBase,
                             useExisting: AXMDashboardHomeComponent,
                         },
-                    ], template: "<axp-page-layout *translate=\"let t\">\n  <!-- Content Section -->\n\n  <axp-page-content class=\"ax-relative\">\n    <!-- Loading State -->\n    @if(store.isLoading()) {\n    <div\n      class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-w-full ax-absolute ax-z-10 ax-bg-white/80\"\n    >\n      <ax-loading></ax-loading>\n      <p class=\"ax-mt-3 ax-text-gray-600\">{{ t('loading', { scope: 'dashboard' }) | async }}</p>\n    </div>\n    } @else {\n    <axp-widgets-container [context]=\"context()\">\n      <ax-grid-layout-container [options]=\"store.currentLayoutOptions()\" (onChange)=\"store.onGridChange($event)\">\n        <!-- No Dashboards State -->\n        @if(!store.dashboards() || store.dashboards().length === 0) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">{{ t('no-dashboards', { scope: 'dashboard' }) | async }}</h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('add-first-dashboard', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        }\n        <!-- No Selected Dashboard State -->\n        @else if (!store.selectedDashboard()) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">\n            {{ t('no-current-dashboard', { scope: 'dashboard' }) | async }}\n          </h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('select-dashboard', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        }\n        <!-- No Widgets State -->\n        @else if (!store.selectedDashboard()?.widgets || store.selectedDashboard()?.widgets?.length === 0) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">{{ t('no-widgets', { scope: 'dashboard' }) | async }}</h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('add-first-widget', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        }\n        <!-- Widgets Grid -->\n        @else { @for(widget of store.selectedDashboard()?.widgets; track widget.config.id) {\n        <ax-grid-layout-widget [options]=\"widget.config\">\n          <axm-dashboard-widget-wrapper\n            [title]=\"widget.node?.options?.['title']\"\n            [hasConfiguration]=\"store.canConfigureWidget()(widget)\"\n            [isLocked]=\"store.isWidgetLocked()(widget)\"\n            (onDelete)=\"confirmWidgetDelete(store.selectedDashboard()?.id!, widget.config.id!)\"\n            (onConfiguration)=\"store.handlePopupConfiguration(widget.node!)\"\n            (onValueChanged)=\"store.handleValueChanged(widget?.node!,$event)\"\n            (onOptionsChanged)=\"store.handleOptionsChanged(widget?.node!,$event)\"\n          >\n            @if(widget.node) {\n            <ng-container axp-widget-renderer [node]=\"widget.node\" [mode]=\"'view'\"></ng-container>\n            }\n          </axm-dashboard-widget-wrapper>\n        </ax-grid-layout-widget>\n        } }\n      </ax-grid-layout-container>\n    </axp-widgets-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axm-dashboard-home{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axm-dashboard-home .placeholder-content{border-radius:.5rem!important;border-width:1px!important;border-style:dashed!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))!important;background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5)!important}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content{border-radius:.375rem!important;border-width:1px!important;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important;--ax-comp-grid-layout-stack-item-content-bg-color: var(--ax-sys-color-lightest-surface) }\n"] }]
+                    ], template: "<axp-page-layout *translate=\"let t\">\n  <!-- Content Section -->\n\n  <axp-page-content class=\"ax-relative\">\n    <!-- Loading State -->\n    @if(store.isLoading()) {\n    <div\n      class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-w-full ax-absolute ax-z-10 ax-bg-white/80\"\n    >\n      <ax-loading></ax-loading>\n      <p class=\"ax-mt-3 ax-text-gray-600\">{{ t('loading', { scope: 'dashboard' }) | async }}</p>\n    </div>\n    } @else {\n    <axp-widgets-container [context]=\"context()\">\n      <ax-grid-layout-container [options]=\"store.currentLayoutOptions()\" (onChange)=\"store.onGridChange($event)\">\n        <!-- No Dashboards State -->\n        @if(!store.dashboards() || store.dashboards().length === 0) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">{{ t('no-dashboards', { scope: 'dashboard' }) | async }}</h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('add-first-dashboard', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        }\n        <!-- No Selected Dashboard State -->\n        @else if (!store.selectedDashboard()) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">\n            {{ t('no-current-dashboard', { scope: 'dashboard' }) | async }}\n          </h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('select-dashboard', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        }\n        <!-- No Widgets State -->\n        @else if (!store.selectedDashboard()?.widgets || store.selectedDashboard()?.widgets?.length === 0) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">{{ t('no-widgets', { scope: 'dashboard' }) | async }}</h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('add-first-widget', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        }\n        <!-- Widgets Grid -->\n        @else { @for(widget of store.selectedDashboard()?.widgets; track widget.config.id) {\n        <ax-grid-layout-widget\n          [options]=\"widget.config\"\n          class=\"dark:[--ax-comp-grid-layout-stack-item-content-bg-color:var(--ax-sys-color-lighter-surface)] [--ax-comp-grid-layout-stack-item-content-bg-color:var(--ax-sys-color-lightest-surface)]\"\n        >\n          <axm-dashboard-widget-wrapper\n            [title]=\"widget.node?.options?.['title']\"\n            [hasConfiguration]=\"store.canConfigureWidget()(widget)\"\n            [isLocked]=\"store.isWidgetLocked()(widget)\"\n            (onDelete)=\"confirmWidgetDelete(store.selectedDashboard()?.id!, widget.config.id!)\"\n            (onConfiguration)=\"store.handlePopupConfiguration(widget.node!)\"\n            (onValueChanged)=\"store.handleValueChanged(widget?.node!,$event)\"\n            (onOptionsChanged)=\"store.handleOptionsChanged(widget?.node!,$event)\"\n          >\n            @if(widget.node) {\n            <ng-container axp-widget-renderer [node]=\"widget.node\" [mode]=\"'view'\"></ng-container>\n            }\n          </axm-dashboard-widget-wrapper>\n        </ax-grid-layout-widget>\n        } }\n      </ax-grid-layout-container>\n    </axp-widgets-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axm-dashboard-home{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axm-dashboard-home .placeholder-content{border-radius:.5rem!important;border-width:1px!important;border-style:dashed!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))!important;background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5)!important}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content{border-radius:.375rem!important;border-width:1px!important;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}\n"] }]
         }] });
 
 var homeDashboard = /*#__PURE__*/Object.freeze({
@@ -5013,9 +6201,15 @@ var homeDashboard = /*#__PURE__*/Object.freeze({
     AXMDashboardHomeComponent: AXMDashboardHomeComponent
 });
 
+const path = 'home:dashboard:';
+var AXPHomeDashboardSetting;
+(function (AXPHomeDashboardSetting) {
+    AXPHomeDashboardSetting["CurrentDashboard"] = "home:dashboard:current-dashboard";
+})(AXPHomeDashboardSetting || (AXPHomeDashboardSetting = {}));
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXMDashboardHomeComponent, AXMDashboardManagementModule, AXMDashboardService, AXMDashboardServiceImpl, AXMDashboardStore, AXPBarChartWidget, AXPBarChartWidgetViewComponent, AXPClockCalendarWidget, AXPClockCalendarWidgetViewComponent, AXPDonutChartWidget, AXPDonutChartWidgetViewComponent, AXPGaugeChartWidget, AXPGaugeChartWidgetViewComponent, AXPLineChartWidget, AXPLineChartWidgetViewComponent, AXPStickyNoteWidget, AXPStickyNoteWidgetViewComponent, AXPTaskListWidget, AXPTaskListWidgetViewComponent, AXPWeatherApiAbstract, AXPWeatherApiMockService, AXPWeatherApiService, AXPWeatherWidget, AXPWeatherWidgetViewComponent, AXP_DATE_FORMAT_OPTIONS, AXP_TIMEZONE_OPTIONS, AXP_WIDGETS_CHART_CATEGORY, AXP_WIDGETS_UTILITY_CATEGORY, RootConfig, dashboardFactory };
+export { AXMAddDashboardPopup, AXMAnalogClockComponent, AXMClockWidgetViewComponent, AXMConfigurationPopup, AXMDashboardHomeComponent, AXMDashboardManagementModule, AXMDashboardPopupService, AXMDashboardService, AXMDashboardServiceImpl, AXMDashboardStore, AXMDashboardWidgetWrapperComponent, AXPAdvancedWeatherViewComponent, AXPAdvancedWeatherWidget, AXPAnalogClockWidget, AXPBarChartWidget, AXPBarChartWidgetViewComponent, AXPClockCalendarWidget, AXPClockCalendarWidgetViewComponent, AXPDonutChartWidget, AXPDonutChartWidgetViewComponent, AXPGaugeChartWidget, AXPGaugeChartWidgetViewComponent, AXPHomeDashboardSetting, AXPLineChartWidget, AXPLineChartWidgetViewComponent, AXPMinimalWeatherViewComponent, AXPMinimalWeatherWidget, AXPStickyNoteWidget, AXPStickyNoteWidgetViewComponent, AXPTaskListWidget, AXPTaskListWidgetViewComponent, AXPWeatherApiAbstract, AXPWeatherApiMockService, AXPWeatherApiService, AXPWeatherWidget, AXPWeatherWidgetViewComponent, AXP_DATE_FORMAT_OPTIONS, AXP_TIMEZONE_OPTIONS, AXP_WIDGETS_CHART_CATEGORY, AXP_WIDGETS_UTILITY_CATEGORY, RootConfig, dashboardFactory };
 //# sourceMappingURL=acorex-modules-dashboard-management.mjs.map