@acorex/modules 19.4.15 → 20.0.0-next.0

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

@@ -1,13 +1,11 @@
 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 { createAllQueryView, AXPEntityCommandScope, AXPEntityQueryType, AXPRegionalService, AXP_HOME_PAGES, AXP_MENU_PROVIDER, AXP_HOME_PAGE_DEFAULT_KEY, AXPSettingService } from '@acorex/platform/common';
+import * as i3$2 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_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, 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';
@@ -15,6 +13,8 @@ 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, of, finalize, switchMap, firstValueFrom } from 'rxjs';
 import { AXDonutChartComponent } from '@acorex/charts/donut-chart';
 import { AXGaugeChartComponent } from '@acorex/charts/gauge-chart';
@@ -38,9 +38,9 @@ import { AXCheckBoxModule } from '@acorex/components/check-box';
 import { AXImageModule } from '@acorex/components/image';
 import { AXLabelModule } from '@acorex/components/label';
 import { AXTabsModule } from '@acorex/components/tabs';
-import * as i2$3 from '@acorex/core/translation';
+import * as i3$1 from '@acorex/core/translation';
 import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
-import * as i2$4 from '@acorex/components/skeleton';
+import * as i2$3 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 import { AXTooltipModule } from '@acorex/components/tooltip';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
@@ -52,14 +52,14 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
 import { AXDialogService } from '@acorex/components/dialog';
-import * as i3$2 from '@acorex/components/dropdown';
+import * as i3$3 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import { AXPWidgetPropertyViewerComponent, AXPWidgetPickerService, AXPDesignerService } from '@acorex/platform/layout/designer';
 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$5 from '@acorex/components/loading';
+import * as i2$4 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';
@@ -67,7 +67,7 @@ import * as i7 from '@acorex/components/select-box';
 import { AXSelectBoxModule } from '@acorex/components/select-box';
 import * as i8 from '@acorex/components/switch';
 import { AXSwitchModule } from '@acorex/components/switch';
-import * as i3$3 from '@acorex/components/text-box';
+import * as i3$4 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
 import { AXMOrganizationManagementRoleEntityService } from '@acorex/modules/organization-management';
 
@@ -98,10 +98,10 @@ class AXMDashboardServiceImpl extends AXMDashboardService {
     constructor() {
         super(`${RootConfig.module.name}.${RootConfig.entities.dashboard.name}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMDashboardServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMDashboardServiceImpl }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMDashboardServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMDashboardServiceImpl }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMDashboardServiceImpl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMDashboardServiceImpl, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -445,16 +445,17 @@ class AXMEntityProvider {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMEntityProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMEntityProvider }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMEntityProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMEntityProvider }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMEntityProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMEntityProvider, decorators: [{
             type: Injectable
         }] });
 
 class AXMAnalogClockComponent {
     constructor() {
         this.timezone = input();
+        this.classes = input();
         this.showNumbers = input(true);
         this.currentTime = signal(new Date());
         this.timeParts = signal({ hours: 0, minutes: 0, seconds: 0 });
@@ -535,8 +536,8 @@ class AXMAnalogClockComponent {
             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)}%)`,
+                top: `calc(50% + ${30 * Math.sin(angleRad)}%)`,
+                left: `calc(50% + ${30 * Math.cos(angleRad)}%)`,
             });
         }
         // Dots
@@ -549,10 +550,10 @@ class AXMAnalogClockComponent {
             }
         }
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMAnalogClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMAnalogClockComponent, isStandalone: true, selector: "axm-analog-clock", inputs: { timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", 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-face" [class]="classes()">
         <div class="axm-analog-clock-marks-container">
           @for (line of hourLines; track $index) {
             <div class="axm-analog-clock-hour-line" [style.transform]="line.transform">
@@ -589,13 +590,13 @@ class AXMAnalogClockComponent {
         </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 }); }
+  `, 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%;border-radius:9999px}.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,.axm-analog-clock-dot-line{width:1.8cqw}.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-hour-line-inner:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.axm-analog-clock-dot-line-inner{position:absolute;top:6cqw;left:50%;height:2cqw;width:1.2cqw;--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-dot-line-inner:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / 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:10cqw;font-weight:500;--tw-text-opacity: 1;color:rgb(107 114 128 / 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMAnalogClockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMAnalogClockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axm-analog-clock', standalone: true, imports: [CommonModule], template: `
+            args: [{ selector: 'axm-analog-clock', standalone: true, imports: [], template: `
     <div class="axm-analog-clock-container">
-      <div class="axm-analog-clock-face">
+      <div class="axm-analog-clock-face" [class]="classes()">
         <div class="axm-analog-clock-marks-container">
           @for (line of hourLines; track $index) {
             <div class="axm-analog-clock-hour-line" [style.transform]="line.transform">
@@ -632,76 +633,163 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         </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"] }]
+  `, 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%;border-radius:9999px}.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,.axm-analog-clock-dot-line{width:1.8cqw}.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-hour-line-inner:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.axm-analog-clock-dot-line-inner{position:absolute;top:6cqw;left:50%;height:2cqw;width:1.2cqw;--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-dot-line-inner:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / 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:10cqw;font-weight:500;--tw-text-opacity: 1;color:rgb(107 114 128 / 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);
+        super();
+        this.regionalService = inject(AXPRegionalService);
+        this.userTimezone = signal(null);
+        this.timezone = computed(() => {
+            const configuredTimezone = this.options()?.timezone;
+            return configuredTimezone || this.userTimezone();
+        });
         this.others = computed(() => (this.options()?.others ?? []));
+        this.loadUserTimezone();
     }
-    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>
+    async loadUserTimezone() {
+        try {
+            const timezoneCode = await this.regionalService.getBrowserTimeZoneCode();
+            const timezones = await this.regionalService.getTimeZones();
+            const timezone = timezones.find((tz) => tz.code === timezoneCode);
+            if (timezone) {
+                this.userTimezone.set(timezone);
+            }
         }
-      </div>
+        catch (error) {
+            console.error('Failed to load user timezone', error);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMClockWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMClockWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div
+      class="ax-p-2 ax-h-full ax-overflow-hidden ax-flex ax-justify-center ax-items-center"
+      [class.ax-bg-light]="others().length > 0"
+    >
+      <!-- Main Clock Section -->
+      <div class="ax-flex ax-flex-col ax-items-center ax-justify-around ax-gap-2 ax-flex-1 ax-h-full">
+        <div
+          class="ax-flex ax-items-center ax-justify-center ax-gap-2 ax-w-full ax-flex-wrap"
+          [class.ax-rounded-full]="others().length > 0"
+          [class.ax-border]="others().length > 0"
+          [class.ax-border-gray-100]="others().length > 0"
+          [class.ax-shadow-lg]="others().length > 0"
+          [class.ax-bg-lighter]="others().length > 0"
+        >
+          <div class="ax-aspect-square ax-flex ax-items-center ax-justify-center ax-min-w-28 ax-grow">
+            <axm-analog-clock
+              [timezone]="timezone()?.iana"
+              [classes]="others().length > 0 ? 'ax-bg-lightest' : undefined"
+            ></axm-analog-clock>
+          </div>
+          @if (timezone()?.abbr) {
+            <div class="ax-flex ax-flex-col ax-items-center ax-justify-center ax-text-center ax-min-w-[50px] ax-px-2">
+              <span class="ax-text-xl ax-font-medium ax-text-gray-500 ax-uppercase ax-tracking-wide">{{
+                timezone()?.code
+              }}</span>
+              <span class="ax-text-2xl ax-font-bold ax-text-gray-800 ax-mt-0">{{ 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>
+        <!-- Additional Clocks Section -->
+        @if (others().length > 0) {
+          <div class="ax-w-full ax-max-w-4xl ax-mx-auto">
+            <div class="ax-flex ax-justify-evenly ax-gap-2 ax-overflow-auto">
+              @for (clock of others(); track clock.code) {
+                <div class="ax-flex ax-flex-col ax-items-center ax-p-2 ax-w-full">
+                  <div
+                    class="ax-w-full ax-aspect-square ax-flex ax-items-center ax-justify-center"
+                    style="min-width: 50px; max-width: 80px;"
+                  >
+                    <axm-analog-clock
+                      [timezone]="clock.iana"
+                      [showNumbers]="false"
+                      [classes]="'ax-bg-lightest'"
+                    ></axm-analog-clock>
+                  </div>
+                  @if (clock.abbr) {
+                    <div class="ax-text-center ax-w-full ax-pt-2">
+                      <span class="ax-text-xs ax-font-medium ax-text-gray-600 ax-truncate ax-block">{{
+                        clock.abbr
+                      }}</span>
+                    </div>
+                  }
+                </div>
+              }
             </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 }); }
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}.ax-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: AXMAnalogClockComponent, selector: "axm-analog-clock", inputs: ["timezone", "classes", "showNumbers"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMClockWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", 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
+      class="ax-p-2 ax-h-full ax-overflow-hidden ax-flex ax-justify-center ax-items-center"
+      [class.ax-bg-light]="others().length > 0"
+    >
+      <!-- Main Clock Section -->
+      <div class="ax-flex ax-flex-col ax-items-center ax-justify-around ax-gap-2 ax-flex-1 ax-h-full">
+        <div
+          class="ax-flex ax-items-center ax-justify-center ax-gap-2 ax-w-full ax-flex-wrap"
+          [class.ax-rounded-full]="others().length > 0"
+          [class.ax-border]="others().length > 0"
+          [class.ax-border-gray-100]="others().length > 0"
+          [class.ax-shadow-lg]="others().length > 0"
+          [class.ax-bg-lighter]="others().length > 0"
+        >
+          <div class="ax-aspect-square ax-flex ax-items-center ax-justify-center ax-min-w-28 ax-grow">
+            <axm-analog-clock
+              [timezone]="timezone()?.iana"
+              [classes]="others().length > 0 ? 'ax-bg-lightest' : undefined"
+            ></axm-analog-clock>
           </div>
-        }
-      </div>
+          @if (timezone()?.abbr) {
+            <div class="ax-flex ax-flex-col ax-items-center ax-justify-center ax-text-center ax-min-w-[50px] ax-px-2">
+              <span class="ax-text-xl ax-font-medium ax-text-gray-500 ax-uppercase ax-tracking-wide">{{
+                timezone()?.code
+              }}</span>
+              <span class="ax-text-2xl ax-font-bold ax-text-gray-800 ax-mt-0">{{ 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>
+        <!-- Additional Clocks Section -->
+        @if (others().length > 0) {
+          <div class="ax-w-full ax-max-w-4xl ax-mx-auto">
+            <div class="ax-flex ax-justify-evenly ax-gap-2 ax-overflow-auto">
+              @for (clock of others(); track clock.code) {
+                <div class="ax-flex ax-flex-col ax-items-center ax-p-2 ax-w-full">
+                  <div
+                    class="ax-w-full ax-aspect-square ax-flex ax-items-center ax-justify-center"
+                    style="min-width: 50px; max-width: 80px;"
+                  >
+                    <axm-analog-clock
+                      [timezone]="clock.iana"
+                      [showNumbers]="false"
+                      [classes]="'ax-bg-lightest'"
+                    ></axm-analog-clock>
+                  </div>
+                  @if (clock.abbr) {
+                    <div class="ax-text-center ax-w-full ax-pt-2">
+                      <span class="ax-text-xs ax-font-medium ax-text-gray-600 ax-truncate ax-block">{{
+                        clock.abbr
+                      }}</span>
+                    </div>
+                  }
+                </div>
+              }
             </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"] }]
-        }] });
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXMAnalogClockComponent], styles: [":host{display:block;width:100%;height:100%}.ax-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [] });
 
 var analogClockWidgetView_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -764,6 +852,16 @@ const AXPAnalogClockWidget = {
             component: () => Promise.resolve().then(function () { return analogClockWidgetView_component; }).then((c) => c.AXMClockWidgetViewComponent),
         },
     },
+    meta: {
+        dimensions: {
+            width: 2,
+            height: 3,
+            minWidth: 1,
+            minHeight: 2,
+            maxWidth: 4,
+            maxHeight: 6,
+        },
+    },
 };
 
 /**
@@ -791,10 +889,10 @@ class AXPBarChartWidgetViewComponent extends AXPValueWidgetComponent {
     handleBarClick(event) {
         //console.log(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPBarChartWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPBarChartWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ax-bar-chart [data]=\"barChartData()\" [options]=\"barChartOptions()\" (barClick)=\"handleBarClick($event)\"></ax-bar-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: AXBarChartComponent, selector: "ax-bar-chart", inputs: ["data", "options"], outputs: ["barClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPBarChartWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXPBarChartWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ax-bar-chart [data]=\"barChartData()\" [options]=\"barChartOptions()\" (barClick)=\"handleBarClick($event)\"></ax-bar-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: AXBarChartComponent, selector: "ax-bar-chart", inputs: ["data", "options"], outputs: ["barClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPBarChartWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPBarChartWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ imports: [AXBarChartComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-bar-chart [data]=\"barChartData()\" [options]=\"barChartOptions()\" (barClick)=\"handleBarClick($event)\"></ax-bar-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [] });
@@ -1228,10 +1326,10 @@ class AXPClockCalendarWidgetViewComponent extends AXPValueWidgetComponent {
         const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
         return days[this.currentDate.getDay()];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPClockCalendarWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPClockCalendarWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-clock-calendar-container\">\n  <!-- Timezone indicator (only shown when not local) -->\n  <!-- @if (showTimezoneIndicator()) {\n  <div class=\"axp-clock-calendar-timezone-badge\"><i class=\"fa-solid fa-globe\"></i> {{ displayTimezone() }}</div>\n  } -->\n\n  <!-- Day of week display -->\n  @if (showDayOfWeek()) {\n    <div class=\"axp-clock-calendar-day-label\">{{ getDayOfWeek() }}</div>\n  }\n\n  <div class=\"axp-clock-calendar-content\">\n    <!-- Digital Clock Display -->\n    @if (showDigitalClock()) {\n      <div class=\"axp-clock-calendar-digital-clock\">\n        {{ currentTime | format: 'datetime' : timeFormat() | async }}\n      </div>\n    }\n\n    <!-- Analog Clock Display -->\n    @if (showAnalogClock()) {\n      <div class=\"axp-clock-calendar-analog-clock\">\n        <!-- Hour markers -->\n        @for (hour of clockHours; track hour) {\n          <div\n            class=\"axp-clock-calendar-hour-marker\"\n            [style.transform]=\"'rotate(' + hour * 30 + 'deg) translateY(-80px)'\"\n          ></div>\n        }\n\n        <!-- Clock Numbers -->\n        <div class=\"axp-clock-calendar-numbers-container\">\n          @for (hour of clockHourNumbers; track hour) {\n            <div\n              class=\"axp-clock-calendar-hour-number\"\n              [style.transform]=\"'rotate(' + hour.angle + 'deg) translateY(-82px)'\"\n            >\n              <span [style.transform]=\"'rotate(' + -hour.angle + 'deg)'\">{{ hour.number }}</span>\n            </div>\n          }\n        </div>\n\n        <!-- Clock Hands -->\n        <div class=\"axp-clock-calendar-hands-container\">\n          <div class=\"axp-clock-calendar-hour-hand\" [style.transform]=\"'rotate(' + hourRotation + 'deg)'\"></div>\n          <div class=\"axp-clock-calendar-minute-hand\" [style.transform]=\"'rotate(' + minuteRotation + 'deg)'\"></div>\n          @if (showSeconds()) {\n            <div class=\"axp-clock-calendar-second-hand\" [style.transform]=\"'rotate(' + secondRotation + 'deg)'\"></div>\n          }\n          <div class=\"axp-clock-calendar-center-dot\"></div>\n        </div>\n      </div>\n    }\n\n    <!-- Date Display -->\n    @if (showDate()) {\n      <div class=\"axp-clock-calendar-date-display\">\n        <i class=\"fa-regular fa-calendar\"></i>\n        {{ currentDate | format: 'datetime' : dateFormat() | async }}\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.axp-clock-calendar-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:1rem;position:relative;overflow:hidden;box-shadow:var(--ax-shadow-sm);background-color:var(--ax-surface-color);color:var(--ax-text-color)}.axp-clock-calendar-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;width:100%;height:100%;position:relative}.axp-clock-calendar-timezone-badge{position:absolute;top:.5rem;right:.5rem;font-size:.75rem;padding:.25rem;border-radius:1rem;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-timezone-badge:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-timezone-badge{display:flex;align-items:center;gap:.25rem}.axp-clock-calendar-timezone-badge i{font-size:.75rem}.axp-clock-calendar-day-label{font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.05rem;margin-bottom:.25rem}.axp-clock-calendar-digital-clock{font-size:1.5rem;font-weight:500;letter-spacing:.05rem;font-family:monospace;padding:.5rem .75rem;border-radius:.25rem}.axp-clock-calendar-analog-clock{position:relative;border-radius:50%;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-analog-clock:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-analog-clock{display:flex;align-items:center;justify-content:center;background:var(--ax-surface-color);width:min(180px,100%);height:0;padding-bottom:min(180px,100%);margin:.5rem auto;min-width:120px;min-height:120px;box-shadow:var(--ax-shadow-sm)}.axp-clock-calendar-hands-container,.axp-clock-calendar-numbers-container{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%}.axp-clock-calendar-hour-marker{position:absolute;left:50%;top:50%;width:2px;height:4%;margin-left:-1px;border-radius:1px;background-color:var(--ax-text-muted);transform-origin:50% 0}.axp-clock-calendar-hour-number{position:absolute;left:50%;top:50%;transform-origin:50% 0;font-size:clamp(.7rem,2.5vw,.9rem);font-weight:600;color:var(--ax-text-color)}.axp-clock-calendar-hour-number span{display:block}.axp-clock-calendar-hour-hand{position:absolute;top:50%;left:50%;width:4px;height:25%;margin-left:-2px;background-color:rgba(23,23,23,.75)}.axp-clock-calendar-hour-hand:is(.ax-dark *){background-color:rgba(245,245,245,.75)}.axp-clock-calendar-hour-hand{transform-origin:50% 0;border-radius:3px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-minute-hand{position:absolute;top:50%;left:50%;width:3px;height:38%;margin-left:-1.5px;background-color:rgba(23,23,23,.5)}.axp-clock-calendar-minute-hand:is(.ax-dark *){background-color:rgba(245,245,245,.5)}.axp-clock-calendar-minute-hand{transform-origin:50% 0;border-radius:2px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-second-hand{position:absolute;top:50%;left:50%;width:2px;height:42%;margin-left:-1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-500),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-400),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand{transform-origin:50% 0;border-radius:1px;box-shadow:0 0 3px rgba(0,0,0,.2)}.axp-clock-calendar-center-dot{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;margin-top:-5px;margin-left:-5px;background-color:#d81159;border:2px solid var(--ax-surface-color);box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-date-display{display:flex;align-items:center;gap:.5rem;font-size:.85rem;padding:.25rem .6rem;border-radius:.25rem;background-color:var(--ax-surface-hover);color:var(--ax-text-color)}.axp-clock-calendar-date-display i{font-size:.85rem;opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i2.AXFormatPipe, name: "format" }, { kind: "ngmodule", type: AXTagModule }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPClockCalendarWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPClockCalendarWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-clock-calendar-container\">\n  <!-- Timezone indicator (only shown when not local) -->\n  <!-- @if (showTimezoneIndicator()) {\n  <div class=\"axp-clock-calendar-timezone-badge\"><i class=\"fa-solid fa-globe\"></i> {{ displayTimezone() }}</div>\n  } -->\n\n  <!-- Day of week display -->\n  @if (showDayOfWeek()) {\n    <div class=\"axp-clock-calendar-day-label\">{{ getDayOfWeek() }}</div>\n  }\n\n  <div class=\"axp-clock-calendar-content\">\n    <!-- Digital Clock Display -->\n    @if (showDigitalClock()) {\n      <div class=\"axp-clock-calendar-digital-clock\">\n        {{ currentTime | format: 'datetime' : timeFormat() | async }}\n      </div>\n    }\n\n    <!-- Analog Clock Display -->\n    @if (showAnalogClock()) {\n      <div class=\"axp-clock-calendar-analog-clock\">\n        <!-- Hour markers -->\n        @for (hour of clockHours; track hour) {\n          <div\n            class=\"axp-clock-calendar-hour-marker\"\n            [style.transform]=\"'rotate(' + hour * 30 + 'deg) translateY(-80px)'\"\n          ></div>\n        }\n\n        <!-- Clock Numbers -->\n        <div class=\"axp-clock-calendar-numbers-container\">\n          @for (hour of clockHourNumbers; track hour) {\n            <div\n              class=\"axp-clock-calendar-hour-number\"\n              [style.transform]=\"'rotate(' + hour.angle + 'deg) translateY(-82px)'\"\n            >\n              <span [style.transform]=\"'rotate(' + -hour.angle + 'deg)'\">{{ hour.number }}</span>\n            </div>\n          }\n        </div>\n\n        <!-- Clock Hands -->\n        <div class=\"axp-clock-calendar-hands-container\">\n          <div class=\"axp-clock-calendar-hour-hand\" [style.transform]=\"'rotate(' + hourRotation + 'deg)'\"></div>\n          <div class=\"axp-clock-calendar-minute-hand\" [style.transform]=\"'rotate(' + minuteRotation + 'deg)'\"></div>\n          @if (showSeconds()) {\n            <div class=\"axp-clock-calendar-second-hand\" [style.transform]=\"'rotate(' + secondRotation + 'deg)'\"></div>\n          }\n          <div class=\"axp-clock-calendar-center-dot\"></div>\n        </div>\n      </div>\n    }\n\n    <!-- Date Display -->\n    @if (showDate()) {\n      <div class=\"axp-clock-calendar-date-display\">\n        <i class=\"fa-regular fa-calendar\"></i>\n        {{ currentDate | format: 'datetime' : dateFormat() | async }}\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.axp-clock-calendar-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:1rem;position:relative;overflow:hidden;box-shadow:var(--ax-shadow-sm);background-color:var(--ax-surface-color);color:var(--ax-text-color)}.axp-clock-calendar-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;width:100%;height:100%;position:relative}.axp-clock-calendar-timezone-badge{position:absolute;top:.5rem;right:.5rem;font-size:.75rem;padding:.25rem;border-radius:1rem;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-timezone-badge:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-timezone-badge{display:flex;align-items:center;gap:.25rem}.axp-clock-calendar-timezone-badge i{font-size:.75rem}.axp-clock-calendar-day-label{font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.05rem;margin-bottom:.25rem}.axp-clock-calendar-digital-clock{font-size:1.5rem;font-weight:500;letter-spacing:.05rem;font-family:monospace;padding:.5rem .75rem;border-radius:.25rem}.axp-clock-calendar-analog-clock{position:relative;border-radius:50%;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-analog-clock:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-analog-clock{display:flex;align-items:center;justify-content:center;background:var(--ax-surface-color);width:min(180px,100%);height:0;padding-bottom:min(180px,100%);margin:.5rem auto;min-width:120px;min-height:120px;box-shadow:var(--ax-shadow-sm)}.axp-clock-calendar-hands-container,.axp-clock-calendar-numbers-container{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%}.axp-clock-calendar-hour-marker{position:absolute;left:50%;top:50%;width:2px;height:4%;margin-left:-1px;border-radius:1px;background-color:var(--ax-text-muted);transform-origin:50% 0}.axp-clock-calendar-hour-number{position:absolute;left:50%;top:50%;transform-origin:50% 0;font-size:clamp(.7rem,2.5vw,.9rem);font-weight:600;color:var(--ax-text-color)}.axp-clock-calendar-hour-number span{display:block}.axp-clock-calendar-hour-hand{position:absolute;top:50%;left:50%;width:4px;height:25%;margin-left:-2px;background-color:rgba(23,23,23,.75)}.axp-clock-calendar-hour-hand:is(.ax-dark *){background-color:rgba(245,245,245,.75)}.axp-clock-calendar-hour-hand{transform-origin:50% 0;border-radius:3px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-minute-hand{position:absolute;top:50%;left:50%;width:3px;height:38%;margin-left:-1.5px;background-color:rgba(23,23,23,.5)}.axp-clock-calendar-minute-hand:is(.ax-dark *){background-color:rgba(245,245,245,.5)}.axp-clock-calendar-minute-hand{transform-origin:50% 0;border-radius:2px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-second-hand{position:absolute;top:50%;left:50%;width:2px;height:42%;margin-left:-1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-500),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-400),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand{transform-origin:50% 0;border-radius:1px;box-shadow:0 0 3px rgba(0,0,0,.2)}.axp-clock-calendar-center-dot{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;margin-top:-5px;margin-left:-5px;background-color:#d81159;border:2px solid var(--ax-surface-color);box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-date-display{display:flex;align-items:center;gap:.5rem;font-size:.85rem;padding:.25rem .6rem;border-radius:.25rem;background-color:var(--ax-surface-hover);color:var(--ax-text-color)}.axp-clock-calendar-date-display i{font-size:.85rem;opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i2.AXFormatPipe, name: "format" }, { kind: "ngmodule", type: AXTagModule }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPClockCalendarWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPClockCalendarWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule, AXDateTimeModule, AXFormatModule, AXTagModule, AXDecoratorModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-clock-calendar-container\">\n  <!-- Timezone indicator (only shown when not local) -->\n  <!-- @if (showTimezoneIndicator()) {\n  <div class=\"axp-clock-calendar-timezone-badge\"><i class=\"fa-solid fa-globe\"></i> {{ displayTimezone() }}</div>\n  } -->\n\n  <!-- Day of week display -->\n  @if (showDayOfWeek()) {\n    <div class=\"axp-clock-calendar-day-label\">{{ getDayOfWeek() }}</div>\n  }\n\n  <div class=\"axp-clock-calendar-content\">\n    <!-- Digital Clock Display -->\n    @if (showDigitalClock()) {\n      <div class=\"axp-clock-calendar-digital-clock\">\n        {{ currentTime | format: 'datetime' : timeFormat() | async }}\n      </div>\n    }\n\n    <!-- Analog Clock Display -->\n    @if (showAnalogClock()) {\n      <div class=\"axp-clock-calendar-analog-clock\">\n        <!-- Hour markers -->\n        @for (hour of clockHours; track hour) {\n          <div\n            class=\"axp-clock-calendar-hour-marker\"\n            [style.transform]=\"'rotate(' + hour * 30 + 'deg) translateY(-80px)'\"\n          ></div>\n        }\n\n        <!-- Clock Numbers -->\n        <div class=\"axp-clock-calendar-numbers-container\">\n          @for (hour of clockHourNumbers; track hour) {\n            <div\n              class=\"axp-clock-calendar-hour-number\"\n              [style.transform]=\"'rotate(' + hour.angle + 'deg) translateY(-82px)'\"\n            >\n              <span [style.transform]=\"'rotate(' + -hour.angle + 'deg)'\">{{ hour.number }}</span>\n            </div>\n          }\n        </div>\n\n        <!-- Clock Hands -->\n        <div class=\"axp-clock-calendar-hands-container\">\n          <div class=\"axp-clock-calendar-hour-hand\" [style.transform]=\"'rotate(' + hourRotation + 'deg)'\"></div>\n          <div class=\"axp-clock-calendar-minute-hand\" [style.transform]=\"'rotate(' + minuteRotation + 'deg)'\"></div>\n          @if (showSeconds()) {\n            <div class=\"axp-clock-calendar-second-hand\" [style.transform]=\"'rotate(' + secondRotation + 'deg)'\"></div>\n          }\n          <div class=\"axp-clock-calendar-center-dot\"></div>\n        </div>\n      </div>\n    }\n\n    <!-- Date Display -->\n    @if (showDate()) {\n      <div class=\"axp-clock-calendar-date-display\">\n        <i class=\"fa-regular fa-calendar\"></i>\n        {{ currentDate | format: 'datetime' : dateFormat() | async }}\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.axp-clock-calendar-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:1rem;position:relative;overflow:hidden;box-shadow:var(--ax-shadow-sm);background-color:var(--ax-surface-color);color:var(--ax-text-color)}.axp-clock-calendar-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;width:100%;height:100%;position:relative}.axp-clock-calendar-timezone-badge{position:absolute;top:.5rem;right:.5rem;font-size:.75rem;padding:.25rem;border-radius:1rem;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-timezone-badge:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-timezone-badge{display:flex;align-items:center;gap:.25rem}.axp-clock-calendar-timezone-badge i{font-size:.75rem}.axp-clock-calendar-day-label{font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.05rem;margin-bottom:.25rem}.axp-clock-calendar-digital-clock{font-size:1.5rem;font-weight:500;letter-spacing:.05rem;font-family:monospace;padding:.5rem .75rem;border-radius:.25rem}.axp-clock-calendar-analog-clock{position:relative;border-radius:50%;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-analog-clock:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-analog-clock{display:flex;align-items:center;justify-content:center;background:var(--ax-surface-color);width:min(180px,100%);height:0;padding-bottom:min(180px,100%);margin:.5rem auto;min-width:120px;min-height:120px;box-shadow:var(--ax-shadow-sm)}.axp-clock-calendar-hands-container,.axp-clock-calendar-numbers-container{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%}.axp-clock-calendar-hour-marker{position:absolute;left:50%;top:50%;width:2px;height:4%;margin-left:-1px;border-radius:1px;background-color:var(--ax-text-muted);transform-origin:50% 0}.axp-clock-calendar-hour-number{position:absolute;left:50%;top:50%;transform-origin:50% 0;font-size:clamp(.7rem,2.5vw,.9rem);font-weight:600;color:var(--ax-text-color)}.axp-clock-calendar-hour-number span{display:block}.axp-clock-calendar-hour-hand{position:absolute;top:50%;left:50%;width:4px;height:25%;margin-left:-2px;background-color:rgba(23,23,23,.75)}.axp-clock-calendar-hour-hand:is(.ax-dark *){background-color:rgba(245,245,245,.75)}.axp-clock-calendar-hour-hand{transform-origin:50% 0;border-radius:3px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-minute-hand{position:absolute;top:50%;left:50%;width:3px;height:38%;margin-left:-1.5px;background-color:rgba(23,23,23,.5)}.axp-clock-calendar-minute-hand:is(.ax-dark *){background-color:rgba(245,245,245,.5)}.axp-clock-calendar-minute-hand{transform-origin:50% 0;border-radius:2px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-second-hand{position:absolute;top:50%;left:50%;width:2px;height:42%;margin-left:-1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-500),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-400),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand{transform-origin:50% 0;border-radius:1px;box-shadow:0 0 3px rgba(0,0,0,.2)}.axp-clock-calendar-center-dot{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;margin-top:-5px;margin-left:-5px;background-color:#d81159;border:2px solid var(--ax-surface-color);box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-date-display{display:flex;align-items:center;gap:.5rem;font-size:.85rem;padding:.25rem .6rem;border-radius:.25rem;background-color:var(--ax-surface-hover);color:var(--ax-text-color)}.axp-clock-calendar-date-display i{font-size:.85rem;opacity:.7}\n"] }]
         }] });
@@ -1478,10 +1576,10 @@ class AXPDonutChartWidgetViewComponent extends AXPValueWidgetComponent {
     handleDonutChartSegmentClick(event) {
         //console.log(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDonutChartWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPDonutChartWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ax-donut-chart\n  [data]=\"donutChartData()\"\n  [options]=\"donutChartOptions()\"\n  (segmentClick)=\"handleDonutChartSegmentClick($event)\"\n></ax-donut-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: AXDonutChartComponent, selector: "ax-donut-chart", inputs: ["data", "options"], outputs: ["segmentClick", "segmentHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDonutChartWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXPDonutChartWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ax-donut-chart\n  [data]=\"donutChartData()\"\n  [options]=\"donutChartOptions()\"\n  (segmentClick)=\"handleDonutChartSegmentClick($event)\"\n></ax-donut-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: AXDonutChartComponent, selector: "ax-donut-chart", inputs: ["data", "options"], outputs: ["segmentClick", "segmentHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDonutChartWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDonutChartWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ imports: [AXDonutChartComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-donut-chart\n  [data]=\"donutChartData()\"\n  [options]=\"donutChartOptions()\"\n  (segmentClick)=\"handleDonutChartSegmentClick($event)\"\n></ax-donut-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [] });
@@ -1758,10 +1856,10 @@ class AXPGaugeChartWidgetViewComponent extends AXPValueWidgetComponent {
             animationDuration: 800,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPGaugeChartWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPGaugeChartWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ax-gauge-chart [value]=\"gaugeChartValue()\" [options]=\"gaugeChartOptions()\"></ax-gauge-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: AXGaugeChartComponent, selector: "ax-gauge-chart", inputs: ["value", "options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPGaugeChartWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXPGaugeChartWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ax-gauge-chart [value]=\"gaugeChartValue()\" [options]=\"gaugeChartOptions()\"></ax-gauge-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: AXGaugeChartComponent, selector: "ax-gauge-chart", inputs: ["value", "options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPGaugeChartWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPGaugeChartWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ imports: [AXGaugeChartComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-gauge-chart [value]=\"gaugeChartValue()\" [options]=\"gaugeChartOptions()\"></ax-gauge-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [] });
@@ -2044,10 +2142,10 @@ class AXPLineChartWidgetViewComponent extends AXPValueWidgetComponent {
     handleLineChartPointClick(event) {
         //console.log(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPLineChartWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPLineChartWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ax-line-chart\n  (pointClick)=\"handleLineChartPointClick($event)\"\n  [data]=\"lineChartData()\"\n  [options]=\"lineChartOptions()\"\n></ax-line-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: AXLineChartComponent, selector: "ax-line-chart", inputs: ["data", "options"], outputs: ["pointClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLineChartWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXPLineChartWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ax-line-chart\n  (pointClick)=\"handleLineChartPointClick($event)\"\n  [data]=\"lineChartData()\"\n  [options]=\"lineChartOptions()\"\n></ax-line-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: AXLineChartComponent, selector: "ax-line-chart", inputs: ["data", "options"], outputs: ["pointClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPLineChartWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLineChartWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [AXLineChartComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-line-chart\n  (pointClick)=\"handleLineChartPointClick($event)\"\n  [data]=\"lineChartData()\"\n  [options]=\"lineChartOptions()\"\n></ax-line-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [] });
@@ -2494,15 +2592,15 @@ class AXPStickyNoteWidgetViewComponent extends AXPValueWidgetComponent {
             this.setValue(event.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPStickyNoteWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPStickyNoteWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { listeners: { "document:click": "handleClickOutside($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPStickyNoteWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPStickyNoteWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { listeners: { "document:click": "handleClickOutside($event)" } }, providers: [
             {
                 provide: AXGridLayoutWidgetComponent,
                 useExisting: AXPStickyNoteWidgetViewComponent,
             },
         ], viewQueries: [{ propertyName: "wysiwyg", first: true, predicate: ["wysiwyg"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"sticky-note-container ax-size-full ax-rounded-lg ax-flex ax-flex-col ax-p-4 ax-shadow-md ax-transition-all ax-duration-300 hover:ax-shadow-lg\"\n  [style.background-color]=\"bgColor()\"\n  [style.color]=\"color()\"\n  [class.ax-shadow-lg]=\"isEditing()\"\n  [class.ax-scale-[1.02]]=\"isEditing()\"\n  (dblclick)=\"activateEdit()\"\n>\n  <!-- Header with timestamp -->\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3\">\n    <div class=\"ax-text-xs ax-opacity-70 ax-font-medium ax-flex ax-items-center ax-gap-1\">\n      <i class=\"fa-regular fa-clock ax-text-[0.65rem]\"></i>\n      {{ date() | format : 'datetime' : 'dd MMM, YY HH:mm' | async }}\n    </div>\n  </div>\n\n  <!-- Content area -->\n  <div class=\"ax-flex-1 ax-overflow-auto\">\n    <ax-wysiwyg-container\n      #wysiwyg\n      [class]=\"isEditing() ? 'ax-pointer-events-auto ax-cursor-text' : 'ax-pointer-events-none !ax-cursor-pointer'\"\n      class=\"ax-h-full\"\n      placeHolder=\"start writing with double click...\"\n      look=\"none\"\n      (onValueChanged)=\"valueChange($event)\"\n      [ngModel]=\"value()\"\n    >\n      <ax-wysiwyg-view class=\"!ax-size-full ax-border-b-0\"></ax-wysiwyg-view>\n    </ax-wysiwyg-container>\n  </div>\n\n  <!-- Footer with color selector and save button -->\n  @if (isEditing()) {\n  <div class=\"ax-absolute ax-bottom-2 ax-left-2 ax-right-2 ax-flex ax-flex-wrap ax-gap-1 ax-text-xs\">\n    <!-- Color selection bar when in edit mode -->\n    <div class=\"ax-flex ax-w-full ax-mt-2 ax-border ax-border-gray-200 ax-overflow-hidden ax-rounded-md\">\n      @for (preset of colorPresets; track preset) {\n      <div\n        class=\"ax-h-6 ax-flex-1 ax-cursor-pointer ax-transition-all ax-duration-200 ax-border-r ax-border-gray-200 last:ax-border-r-0 hover:ax-brightness-95\"\n        [style.background-color]=\"preset\"\n        [class.ax-ring-inset]=\"bgColor() === preset\"\n        [class.ax-ring-2]=\"bgColor() === preset\"\n        [class.ax-ring-primary]=\"bgColor() === preset\"\n        (click)=\"setColor(preset)\"\n      ></div>\n      }\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep ax-wysiwyg-view{color:#2e2e2e!important}\n"], dependencies: [{ kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i1$1.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$1.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i2.AXFormatPipe, name: "format" }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXColorBoxModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPStickyNoteWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPStickyNoteWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         AXWysiwygModule,
@@ -2661,7 +2759,7 @@ class AXPTaskListWidgetViewComponent extends AXPValueWidgetComponent {
             return 'Tomorrow';
         if (diffDays < 7)
             return this.datePipe.transform(dateObj, 'EEE') || '';
-        return this.datePipe.transform(dateObj, 'MM/DD/YYYY') || '';
+        return this.datePipe.transform(dateObj, 'MM/DD/yyyy') || '';
     }
     getPriorityColor(priority) {
         if (!priority)
@@ -2688,10 +2786,10 @@ class AXPTaskListWidgetViewComponent extends AXPValueWidgetComponent {
         const diffMs = targetDate.getTime() - now.getTime();
         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 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPTaskListWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPTaskListWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPTaskListWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         CommonModule,
@@ -3036,10 +3134,10 @@ class AXPWeatherApiAbstract {
     getRandomInt(min, max) {
         return Math.floor(Math.random() * (max - min + 1)) + min;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWeatherApiAbstract, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWeatherApiAbstract }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWeatherApiAbstract, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWeatherApiAbstract }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWeatherApiAbstract, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWeatherApiAbstract, decorators: [{
             type: Injectable
         }] });
 
@@ -3233,10 +3331,10 @@ class AXPWeatherApiMockService extends AXPWeatherApiAbstract {
         // No-op for mock service
         console.log('API key setting is ignored in mock weather service');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWeatherApiMockService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWeatherApiMockService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWeatherApiMockService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWeatherApiMockService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWeatherApiMockService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWeatherApiMockService, decorators: [{
             type: Injectable
         }] });
 
@@ -3391,14 +3489,14 @@ class AXPWeatherApiService extends AXPWeatherApiAbstract {
         });
         return weatherData;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWeatherApiService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWeatherApiService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWeatherApiService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWeatherApiService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWeatherApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWeatherApiService, decorators: [{
             type: Injectable
         }] });
 
-class AXPAdvancedWeatherViewComponent extends AXPValueWidgetComponent {
+class AXMAdvancedWeatherViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super();
         this.weatherService = inject(AXPWeatherApiAbstract);
@@ -3547,8 +3645,8 @@ class AXPAdvancedWeatherViewComponent extends AXPValueWidgetComponent {
     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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMAdvancedWeatherViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMAdvancedWeatherViewComponent, isStandalone: true, selector: "ng-component", providers: [
             {
                 provide: AXPWeatherApiAbstract,
                 useClass: AXPWeatherApiService,
@@ -3557,11 +3655,11 @@ class AXPAdvancedWeatherViewComponent extends AXPValueWidgetComponent {
     <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">
+          <div class="ax-flex ax-items-center ax-justify-around ax-w-full ax-gap-1 ax-flex-wrap">
+            <div class="ax-flex ax-items-center ax-gap-2 ax-shrink-0">
               <img
                 [src]="getConditionIcon(weatherData()!.current.condition)"
-                class="ax-w-20 ax-h-20 ax-scale-[1.5]"
+                class="ax-size-32 ax-object-cover -ax-m-8"
                 [alt]="getConditionName(weatherData()!.current.condition)"
                 loading="lazy"
               />
@@ -3574,7 +3672,7 @@ class AXPAdvancedWeatherViewComponent extends AXPValueWidgetComponent {
                 >
               </div>
             </div>
-            <div class="ax-flex ax-flex-col ax-items-center ax-gap-1 ax-pe-4">
+            <div class="ax-flex ax-flex-col ax-items-center ax-gap-2">
               <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
@@ -3589,11 +3687,11 @@ class AXPAdvancedWeatherViewComponent extends AXPValueWidgetComponent {
 
           <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">
+              <div class="ax-flex ax-flex-col ax-items-center ax-p-2 ax-cursor-default ax-min-w-16 ax-gap-2">
                 <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"
+                  class="ax-size-16 ax-object-cover -ax-m-4"
                   [alt]="getConditionName(weatherData()!.forecast[0].condition)"
                 />
                 <span class="ax-text-lg ax-font-semibold"
@@ -3672,34 +3770,34 @@ class AXPAdvancedWeatherViewComponent extends AXPValueWidgetComponent {
               </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>
+            <!-- No data state (not loading, no error) -->
+            <div class="axp-weather-no-data-state">
+              <i class="fa-solid fa-cloud-sun"></i>
+              <p>{{ 'weather.no-data' | translate: { scope: 'dashboard' } | async }}</p>
+              <ax-button
+                [look]="'outline'"
+                [color]="'secondary'"
+                [text]="'weather.refresh-weather' | translate: { scope: 'dashboard' } | async"
+                (onClick)="loadWeatherData()"
+              ></ax-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 }); }
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}.ax-text-muted{color:gray}.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}.axp-weather-no-data-state p{margin-bottom:1.5rem;font-size:1.1rem}sup{font-weight:300;position:relative;top:-.3em;font-size:.6em;margin-left:.1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2$3.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPAdvancedWeatherViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMAdvancedWeatherViewComponent, 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">
+          <div class="ax-flex ax-items-center ax-justify-around ax-w-full ax-gap-1 ax-flex-wrap">
+            <div class="ax-flex ax-items-center ax-gap-2 ax-shrink-0">
               <img
                 [src]="getConditionIcon(weatherData()!.current.condition)"
-                class="ax-w-20 ax-h-20 ax-scale-[1.5]"
+                class="ax-size-32 ax-object-cover -ax-m-8"
                 [alt]="getConditionName(weatherData()!.current.condition)"
                 loading="lazy"
               />
@@ -3712,7 +3810,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 >
               </div>
             </div>
-            <div class="ax-flex ax-flex-col ax-items-center ax-gap-1 ax-pe-4">
+            <div class="ax-flex ax-flex-col ax-items-center ax-gap-2">
               <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
@@ -3727,11 +3825,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 
           <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">
+              <div class="ax-flex ax-flex-col ax-items-center ax-p-2 ax-cursor-default ax-min-w-16 ax-gap-2">
                 <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"
+                  class="ax-size-16 ax-object-cover -ax-m-4"
                   [alt]="getConditionName(weatherData()!.forecast[0].condition)"
                 />
                 <span class="ax-text-lg ax-font-semibold"
@@ -3810,32 +3908,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
               </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>
+            <!-- No data state (not loading, no error) -->
+            <div class="axp-weather-no-data-state">
+              <i class="fa-solid fa-cloud-sun"></i>
+              <p>{{ 'weather.no-data' | translate: { scope: 'dashboard' } | async }}</p>
+              <ax-button
+                [look]="'outline'"
+                [color]="'secondary'"
+                [text]="'weather.refresh-weather' | translate: { scope: 'dashboard' } | async"
+                (onClick)="loadWeatherData()"
+              ></ax-button>
             </div>
           }
         </div>
       }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXDecoratorModule, AXTooltipModule, AXSkeletonModule], providers: [
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXDecoratorModule, AXTooltipModule, AXSkeletonModule, AXTranslationModule, AXButtonModule], 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"] }]
+                    ], styles: [":host{display:block;width:100%;height:100%}.ax-text-muted{color:gray}.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}.axp-weather-no-data-state p{margin-bottom:1.5rem;font-size:1.1rem}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
+    AXMAdvancedWeatherViewComponent: AXMAdvancedWeatherViewComponent
 });
 
 /**
@@ -3926,7 +4024,7 @@ const AXPAdvancedWeatherWidget = {
     ],
     components: {
         view: {
-            component: () => Promise.resolve().then(function () { return advancedWeather_component; }).then((c) => c.AXPAdvancedWeatherViewComponent),
+            component: () => Promise.resolve().then(function () { return advancedWeather_component; }).then((c) => c.AXMAdvancedWeatherViewComponent),
         },
     },
     meta: {
@@ -3941,7 +4039,7 @@ const AXPAdvancedWeatherWidget = {
     },
 };
 
-class AXPMinimalWeatherViewComponent extends AXPValueWidgetComponent {
+class AXMMinimalWeatherViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super();
         this.weatherService = inject(AXPWeatherApiAbstract);
@@ -4017,8 +4115,8 @@ class AXPMinimalWeatherViewComponent extends AXPValueWidgetComponent {
             ? 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMMinimalWeatherViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMMinimalWeatherViewComponent, isStandalone: true, selector: "ng-component", providers: [
             {
                 provide: AXPWeatherApiAbstract,
                 useClass: AXPWeatherApiService,
@@ -4026,14 +4124,14 @@ class AXPMinimalWeatherViewComponent extends AXPValueWidgetComponent {
         ], 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"
+        class="ax-flex ax-size-full ax-flex-col ax-items-start ax-p-2 ax-gap-2 ax-justify-evenly 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">
+        <div class="weather-top ax-flex ax-justify-around ax-items-center ax-w-full ax-pt-2">
           <img
             [src]="getConditionIcon()"
-            class="ax-h-[180%]"
+            class="ax-h-[180%] -ax-m-2"
             [alt]="weatherData()?.current?.condition + ' weather icon'"
             loading="lazy"
           />
@@ -4059,12 +4157,12 @@ class AXPMinimalWeatherViewComponent extends AXPValueWidgetComponent {
         </div>
       </div>
     } @else {
-      <div class="ax-flex ax-size-full ax-flex-col ax-p-2 ax-gap-4" [attr.aria-busy]="isLoading()">
+      <div class="ax-flex ax-size-full ax-flex-col ax-p-2 ax-gap-2 ax-justify-center" [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 class="ax-flex ax-items-center ax-w-full ax-pt-2 ax-gap-8">
+            <ax-skeleton class="ax-w-16 ax-h-12 ax-rounded-full"></ax-skeleton>
+            <ax-skeleton class="ax-w-24 ax-h-8 ax-rounded -ax-ms-2"></ax-skeleton>
           </div>
 
           <!-- City and temperature range skeleton -->
@@ -4078,34 +4176,35 @@ class AXPMinimalWeatherViewComponent extends AXPValueWidgetComponent {
             </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>
+          <!-- No data state (not loading, no error) -->
+          <div class="ax-flex ax-flex-col ax-gap-2 ax-justify-center ax-items-center ax-h-full ax-p-8">
+            <i class="ax-text-3xl fa-solid fa-cloud-sun"></i>
+            <p class="ax-text-sm">{{ 'weather.no-data' | translate: { scope: 'dashboard' } | async }}</p>
+            <ax-button
+              [look]="'outline'"
+              [color]="'secondary'"
+              [text]="'weather.refresh-weather' | translate: { scope: 'dashboard' } | async"
+              (onClick)="loadWeatherData()"
+            ></ax-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 }); }
+  `, 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.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2$3.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPMinimalWeatherViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMMinimalWeatherViewComponent, 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"
+        class="ax-flex ax-size-full ax-flex-col ax-items-start ax-p-2 ax-gap-2 ax-justify-evenly 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">
+        <div class="weather-top ax-flex ax-justify-around ax-items-center ax-w-full ax-pt-2">
           <img
             [src]="getConditionIcon()"
-            class="ax-h-[180%]"
+            class="ax-h-[180%] -ax-m-2"
             [alt]="weatherData()?.current?.condition + ' weather icon'"
             loading="lazy"
           />
@@ -4131,12 +4230,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         </div>
       </div>
     } @else {
-      <div class="ax-flex ax-size-full ax-flex-col ax-p-2 ax-gap-4" [attr.aria-busy]="isLoading()">
+      <div class="ax-flex ax-size-full ax-flex-col ax-p-2 ax-gap-2 ax-justify-center" [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 class="ax-flex ax-items-center ax-w-full ax-pt-2 ax-gap-8">
+            <ax-skeleton class="ax-w-16 ax-h-12 ax-rounded-full"></ax-skeleton>
+            <ax-skeleton class="ax-w-24 ax-h-8 ax-rounded -ax-ms-2"></ax-skeleton>
           </div>
 
           <!-- City and temperature range skeleton -->
@@ -4150,20 +4249,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             </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>
+          <!-- No data state (not loading, no error) -->
+          <div class="ax-flex ax-flex-col ax-gap-2 ax-justify-center ax-items-center ax-h-full ax-p-8">
+            <i class="ax-text-3xl fa-solid fa-cloud-sun"></i>
+            <p class="ax-text-sm">{{ 'weather.no-data' | translate: { scope: 'dashboard' } | async }}</p>
+            <ax-button
+              [look]="'outline'"
+              [color]="'secondary'"
+              [text]="'weather.refresh-weather' | translate: { scope: 'dashboard' } | async"
+              (onClick)="loadWeatherData()"
+            ></ax-button>
           </div>
         }
       </div>
     }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXDecoratorModule, AXTooltipModule, AXSkeletonModule], providers: [
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXDecoratorModule, AXTooltipModule, AXSkeletonModule, AXTranslationModule, AXButtonModule], providers: [
                         {
                             provide: AXPWeatherApiAbstract,
                             useClass: AXPWeatherApiService,
@@ -4173,7 +4273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 
 var minimalWeather_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AXPMinimalWeatherViewComponent: AXPMinimalWeatherViewComponent
+    AXMMinimalWeatherViewComponent: AXMMinimalWeatherViewComponent
 });
 
 /**
@@ -4224,7 +4324,7 @@ const AXPMinimalWeatherWidget = {
     ],
     components: {
         view: {
-            component: () => Promise.resolve().then(function () { return minimalWeather_component; }).then((c) => c.AXPMinimalWeatherViewComponent),
+            component: () => Promise.resolve().then(function () { return minimalWeather_component; }).then((c) => c.AXMMinimalWeatherViewComponent),
         },
     },
     meta: {
@@ -4527,15 +4627,15 @@ class AXPWeatherWidgetViewComponent extends AXPValueWidgetComponent {
     parseDate(dateStr) {
         return new Date(dateStr);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWeatherWidgetViewComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPWeatherWidgetViewComponent, isStandalone: true, selector: "ng-component", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWeatherWidgetViewComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPWeatherWidgetViewComponent, isStandalone: true, selector: "ng-component", providers: [
             {
                 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                <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 }); }
+        ], 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: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWeatherWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWeatherWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule, AXDateTimeModule, AXFormatModule, HttpClientModule, AXTranslationModule], providers: [
                         {
@@ -4857,8 +4957,8 @@ class AXPDashboardShortcutWidgetViewComponent extends AXPLayoutWidgetComponent {
         cls[`ax-text-white`] = true;
         return cls;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDashboardShortcutWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPDashboardShortcutWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { properties: { "style": "this.__style", "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDashboardShortcutWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPDashboardShortcutWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { properties: { "style": "this.__style", "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     @if (item()) {
       <div
         class="ax-group ax-flex ax-flex-col ax-items-center ax-justify-center ax-p-3 ax-w-full ax-h-full ax-relative ax-overflow-hidden "
@@ -4885,9 +4985,9 @@ class AXPDashboardShortcutWidgetViewComponent extends AXPLayoutWidgetComponent {
         }}</span>
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2$3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDashboardShortcutWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDashboardShortcutWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -5040,9 +5140,9 @@ function createAppRoute() {
     };
 }
 class AXMDashboardManagementModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMDashboardManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: AXMDashboardManagementModule, imports: [i3$1.AXPLayoutBuilderModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMDashboardManagementModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMDashboardManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: AXMDashboardManagementModule, imports: [i3$2.AXPLayoutBuilderModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMDashboardManagementModule, providers: [
             {
                 provide: AXMDashboardService,
                 useClass: AXMDashboardServiceImpl,
@@ -5092,7 +5192,7 @@ class AXMDashboardManagementModule {
                 ],
             })] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMDashboardManagementModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMDashboardManagementModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -5187,10 +5287,10 @@ class AXMDashboardWidgetWrapperComponent {
     log(event) {
         console.log('Dropdown event:', event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMDashboardWidgetWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXMDashboardWidgetWrapperComponent, isStandalone: true, selector: "axm-dashboard-widget-wrapper", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, hasConfiguration: { classPropertyName: "hasConfiguration", publicName: "hasConfiguration", isSignal: true, isRequired: false, transformFunction: null }, isLocked: { classPropertyName: "isLocked", publicName: "isLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete", onConfiguration: "onConfiguration", onValueChanged: "onValueChanged", onOptionsChanged: "onOptionsChanged" }, queries: [{ propertyName: "widget", first: true, predicate: AXPWidgetRendererDirective, descendants: true, isSignal: true }], ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i3$2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i2$3.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMDashboardWidgetWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMDashboardWidgetWrapperComponent, isStandalone: true, selector: "axm-dashboard-widget-wrapper", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, hasConfiguration: { classPropertyName: "hasConfiguration", publicName: "hasConfiguration", isSignal: true, isRequired: false, transformFunction: null }, isLocked: { classPropertyName: "isLocked", publicName: "isLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete", onConfiguration: "onConfiguration", onValueChanged: "onValueChanged", onOptionsChanged: "onOptionsChanged" }, queries: [{ propertyName: "widget", first: true, predicate: AXPWidgetRendererDirective, descendants: true, isSignal: true }], ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i3$3.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMDashboardWidgetWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMDashboardWidgetWrapperComponent, decorators: [{
             type: Component,
             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"] }]
         }] });
@@ -5258,8 +5358,8 @@ class AXMAddDashboardPopup extends AXBasePageComponent {
             isCanceled,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMAddDashboardPopup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXMAddDashboardPopup, isStandalone: true, selector: "ng-component", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, selectedRoleIds: { classPropertyName: "selectedRoleIds", publicName: "selectedRoleIds", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isLocked: { classPropertyName: "isLocked", publicName: "isLocked", isSignal: true, isRequired: false, transformFunction: null }, isAdmin: { classPropertyName: "isAdmin", publicName: "isAdmin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "titleChange", description: "descriptionChange", selectedRoleIds: "selectedRoleIdsChange", isDisabled: "isDisabledChange", isLocked: "isLockedChange", isAdmin: "isAdminChange" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMAddDashboardPopup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMAddDashboardPopup, isStandalone: true, selector: "ng-component", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, selectedRoleIds: { classPropertyName: "selectedRoleIds", publicName: "selectedRoleIds", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isLocked: { classPropertyName: "isLocked", publicName: "isLocked", isSignal: true, isRequired: false, transformFunction: null }, isAdmin: { classPropertyName: "isAdmin", publicName: "isAdmin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "titleChange", description: "descriptionChange", selectedRoleIds: "selectedRoleIdsChange", isDisabled: "isDisabledChange", isLocked: "isLockedChange", isAdmin: "isAdminChange" }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-card-body ax-p-4">
       <div class="ax-flex ax-flex-col ax-gap-2 ax-pb-4">
         <p class="ax-font-semibold">{{ 'title' | translate | async }}</p>
@@ -5315,9 +5415,9 @@ class AXMAddDashboardPopup extends AXBasePageComponent {
         </ax-button>
       </ax-suffix>
     </ax-footer>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i3$3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2$3.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i7.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i8.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i3$4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i7.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i8.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMAddDashboardPopup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMAddDashboardPopup, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -5409,8 +5509,8 @@ class AXMConfigurationPopup extends AXBasePageComponent {
     handlePropertyChange(event) {
         this.widgetData.set(event.values);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMConfigurationPopup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXMConfigurationPopup, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMConfigurationPopup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMConfigurationPopup, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     @if(widget) {
     <div class="ax-px-1">
       <axp-widget-property-viewer (onChanged)="handlePropertyChange($event)" [widget]="widget">
@@ -5428,7 +5528,7 @@ class AXMConfigurationPopup extends AXBasePageComponent {
     </ax-footer>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMConfigurationPopup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMConfigurationPopup, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -5495,10 +5595,10 @@ class AXMDashboardPopupService {
         }
         return rest.widget;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMDashboardPopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMDashboardPopupService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMDashboardPopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMDashboardPopupService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMDashboardPopupService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMDashboardPopupService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -6159,17 +6259,17 @@ class AXMDashboardHomeComponent extends AXPPageLayoutBaseComponent {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMDashboardHomeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXMDashboardHomeComponent, isStandalone: true, selector: "axm-dashboard-home", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMDashboardHomeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXMDashboardHomeComponent, isStandalone: true, selector: "axm-dashboard-home", providers: [
             AXPDesignerService,
             AXMDashboardStore,
             {
                 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\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 }); }
+        ], 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$4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.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: i3$1.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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXMDashboardHomeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axm-dashboard-home', standalone: true, imports: [
                         CommonModule,
@@ -6211,5 +6311,5 @@ var AXPHomeDashboardSetting;
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { AXMAddDashboardPopup, AXMAdvancedWeatherViewComponent, AXMAnalogClockComponent, AXMClockWidgetViewComponent, AXMConfigurationPopup, AXMDashboardHomeComponent, AXMDashboardManagementModule, AXMDashboardPopupService, AXMDashboardService, AXMDashboardServiceImpl, AXMDashboardStore, AXMDashboardWidgetWrapperComponent, AXMMinimalWeatherViewComponent, AXPAdvancedWeatherWidget, AXPAnalogClockWidget, AXPBarChartWidget, AXPBarChartWidgetViewComponent, AXPClockCalendarWidget, AXPClockCalendarWidgetViewComponent, AXPDonutChartWidget, AXPDonutChartWidgetViewComponent, AXPGaugeChartWidget, AXPGaugeChartWidgetViewComponent, AXPHomeDashboardSetting, AXPLineChartWidget, AXPLineChartWidgetViewComponent, 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