@acorex/modules 19.3.5 → 19.3.6

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

@@ -38,14 +38,14 @@ 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 i6 from '@acorex/core/translation';
+import * as i2$3 from '@acorex/core/translation';
 import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { AXPopupService } from '@acorex/components/popup';
 import { AXP_GLOBAL_SEARCH_CONFIG_TOKEN } from '@acorex/modules/common';
 import { AXPDataGenerator, AXPPlatformScope } from '@acorex/platform/core';
 import { AXPWorkflowService } from '@acorex/platform/workflow';
-import { Router, ActivatedRoute } from '@angular/router';
+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';
@@ -55,12 +55,14 @@ import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import { AXPWidgetPropertyViewerComponent, AXPWidgetPickerService, AXPDesignerService } from '@acorex/platform/layout/designer';
 import { AXPBasePageComponent, AXPPageLayoutComponent, AXPBasePage } from '@acorex/platform/themes/default';
 import { AXPLayoutThemeService, AXPThemeLayoutBlockComponent } from '@acorex/platform/themes/shared';
-import * as i2$3 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';
 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 { AXTextBoxModule } from '@acorex/components/text-box';
 import { AXMOrganizationManagementRoleEntityService } from '@acorex/modules/organization-management';
@@ -496,7 +498,7 @@ const AXPBarChartWidget = {
         // ====== Chart Title ======
         {
             name: 'title',
-            title: 'Chart Title',
+            title: '@dashboard:widgets.bar-chart.chart-title',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: '',
@@ -515,7 +517,7 @@ const AXPBarChartWidget = {
         // ====== Layout & Dimensions ======
         {
             name: 'width',
-            title: 'Width',
+            title: '@dashboard:widgets.bar-chart.width',
             group: AXP_STYLING_PROPERTY_GROUP,
             schema: {
                 defaultValue: null,
@@ -534,7 +536,7 @@ const AXPBarChartWidget = {
         },
         {
             name: 'height',
-            title: 'Height',
+            title: '@dashboard:widgets.bar-chart.height',
             group: AXP_STYLING_PROPERTY_GROUP,
             schema: {
                 defaultValue: 300,
@@ -554,7 +556,7 @@ const AXPBarChartWidget = {
         // ====== X Axis Settings ======
         {
             name: 'showXAxis',
-            title: 'Show X Axis',
+            title: '@dashboard:widgets.bar-chart.show-x-axis',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -569,7 +571,7 @@ const AXPBarChartWidget = {
         },
         {
             name: 'xAxisLabel',
-            title: 'X Axis Label',
+            title: '@dashboard:widgets.bar-chart.x-axis-label',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: '',
@@ -585,7 +587,7 @@ const AXPBarChartWidget = {
         // ====== Y Axis Settings ======
         {
             name: 'showYAxis',
-            title: 'Show Y Axis',
+            title: '@dashboard:widgets.bar-chart.show-y-axis',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -600,7 +602,7 @@ const AXPBarChartWidget = {
         },
         {
             name: 'yAxisLabel',
-            title: 'Y Axis Label',
+            title: '@dashboard:widgets.bar-chart.y-axis-label',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: '',
@@ -616,7 +618,7 @@ const AXPBarChartWidget = {
         // ====== Bar Appearance ======
         {
             name: 'barWidth',
-            title: 'Bar Width',
+            title: '@dashboard:widgets.bar-chart.bar-width',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 80,
@@ -636,7 +638,7 @@ const AXPBarChartWidget = {
         },
         {
             name: 'cornerRadius',
-            title: 'Corner Radius',
+            title: '@dashboard:widgets.bar-chart.corner-radius',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 4,
@@ -657,7 +659,7 @@ const AXPBarChartWidget = {
         // ====== Grid Settings ======
         {
             name: 'showGrid',
-            title: 'Show Grid Lines',
+            title: '@dashboard:widgets.bar-chart.show-grid',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -672,7 +674,7 @@ const AXPBarChartWidget = {
         },
         {
             name: 'showDataLabels',
-            title: 'Show Data Labels',
+            title: '@dashboard:widgets.bar-chart.show-data-labels',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -688,7 +690,7 @@ const AXPBarChartWidget = {
         // ====== Tooltip Settings ======
         {
             name: 'showTooltip',
-            title: 'Show Tooltip',
+            title: '@dashboard:widgets.bar-chart.show-tooltip',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -704,7 +706,7 @@ const AXPBarChartWidget = {
         // ====== Animation Settings ======
         {
             name: 'animationEasing',
-            title: 'Animation Easing',
+            title: '@dashboard:widgets.bar-chart.animation-easing',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 'cubic-out',
@@ -734,7 +736,7 @@ const AXPBarChartWidget = {
         },
         {
             name: 'animationDuration',
-            title: 'Animation Duration',
+            title: '@dashboard:widgets.bar-chart.animation-duration',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 800,
@@ -803,7 +805,7 @@ class AXPClockCalendarWidgetViewComponent extends AXPValueWidgetComponent {
         this.showDayOfWeek = computed(() => this.options()?.showDayOfWeek !== false);
         this.use24Hour = computed(() => this.options()?.use24Hour === true);
         this.showSeconds = computed(() => this.options()?.showSeconds !== false);
-        this.dateFormat = computed(() => this.options()?.dateFormat?.id ?? 'dd MMM yyyy');
+        this.dateFormat = computed(() => this.options()?.dateFormat?.id ?? 'DD MMM YYYY');
         this.timezone = computed(() => this.options()?.timezone?.id ?? 'local');
         // protected readonly showTimezoneIndicator: Signal<boolean> = computed(() => this.timezone() !== 'local');
         this.displayTimezone = computed(() => {
@@ -893,11 +895,11 @@ class AXPClockCalendarWidgetViewComponent extends AXPValueWidgetComponent {
         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.ɵ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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", 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"] }]
+            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"] }]
         }] });
 
 var clockCalendarWidget_component = /*#__PURE__*/Object.freeze({
@@ -932,10 +934,10 @@ const AXP_TIMEZONE_OPTIONS = [
  * Common date format options for the widget configuration
  */
 const AXP_DATE_FORMAT_OPTIONS = [
-    { id: 'dd MMM yyyy', title: '31 Dec 2023' },
-    { id: 'MMM dd, yyyy', title: 'Dec 31, 2023' },
-    { id: 'dd/MM/yyyy', title: '31/12/2023' },
-    { id: 'MM/dd/yyyy', title: '12/31/2023' },
+    { id: 'DD MMM YYYY', title: '31 Dec 2023' },
+    { id: 'MMM DD, YYYY', title: 'Dec 31, 2023' },
+    { id: 'DD/MM/YYYY', title: '31/12/2023' },
+    { id: 'MM/DD/YYYY', title: '12/31/2023' },
 ];
 
 const AXPClockCalendarWidget = {
@@ -949,7 +951,7 @@ const AXPClockCalendarWidget = {
         // ====== Title ======
         {
             name: 'title',
-            title: 'Chart Title',
+            title: '@dashboard:widgets.clock-calendar.chart-title',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: '',
@@ -968,7 +970,7 @@ const AXPClockCalendarWidget = {
         // ====== Display Settings ======
         {
             name: 'displayLayout',
-            title: 'Display Layout',
+            title: '@dashboard:widgets.clock-calendar.display-layout',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 dataType: 'string',
@@ -990,7 +992,7 @@ const AXPClockCalendarWidget = {
         },
         {
             name: 'showDate',
-            title: 'Show Date',
+            title: '@dashboard:widgets.clock-calendar.show-date',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -1005,7 +1007,7 @@ const AXPClockCalendarWidget = {
         },
         {
             name: 'showDayOfWeek',
-            title: 'Show Day of Week',
+            title: '@dashboard:widgets.clock-calendar.show-day-of-week',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -1021,7 +1023,7 @@ const AXPClockCalendarWidget = {
         // ====== Time Format Settings ======
         {
             name: 'use24Hour',
-            title: 'Use 24 Hour Format',
+            title: '@dashboard:widgets.clock-calendar.use-24-hour',
             group: AXP_BEHAVIOR_PROPERTY_GROUP,
             schema: {
                 defaultValue: false,
@@ -1036,7 +1038,7 @@ const AXPClockCalendarWidget = {
         },
         {
             name: 'showSeconds',
-            title: 'Show Seconds',
+            title: '@dashboard:widgets.clock-calendar.show-seconds',
             group: AXP_BEHAVIOR_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -1066,10 +1068,10 @@ const AXPClockCalendarWidget = {
         // },
         {
             name: 'dateFormat',
-            title: 'Date Format',
+            title: '@dashboard:widgets.clock-calendar.date-format',
             group: AXP_BEHAVIOR_PROPERTY_GROUP,
             schema: {
-                defaultValue: 'dd MMM yyyy',
+                defaultValue: 'DD MMM YYYY',
                 dataType: 'string',
                 interface: {
                     name: 'dateFormat',
@@ -1084,7 +1086,7 @@ const AXPClockCalendarWidget = {
         },
         {
             name: 'timezone',
-            title: 'Timezone',
+            title: '@dashboard:widgets.clock-calendar.timezone',
             group: AXP_BEHAVIOR_PROPERTY_GROUP,
             schema: {
                 defaultValue: 'local',
@@ -1157,7 +1159,7 @@ const AXPDonutChartWidget = {
         // ====== Chart Title ======
         {
             name: 'title',
-            title: 'Chart Title',
+            title: '@dashboard:widgets.donut-chart.chart-title',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: '',
@@ -1176,7 +1178,7 @@ const AXPDonutChartWidget = {
         // ====== Size & Layout ======
         {
             name: 'width',
-            title: 'Width',
+            title: '@dashboard:widgets.donut-chart.width',
             group: AXP_STYLING_PROPERTY_GROUP,
             schema: {
                 defaultValue: 300,
@@ -1195,7 +1197,7 @@ const AXPDonutChartWidget = {
         },
         {
             name: 'height',
-            title: 'Height',
+            title: '@dashboard:widgets.donut-chart.height',
             group: AXP_STYLING_PROPERTY_GROUP,
             schema: {
                 defaultValue: 300,
@@ -1215,7 +1217,7 @@ const AXPDonutChartWidget = {
         // ====== Donut Appearance ======
         {
             name: 'showDataLabels',
-            title: 'Show Data Labels',
+            title: '@dashboard:widgets.donut-chart.show-data-labels',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -1230,7 +1232,7 @@ const AXPDonutChartWidget = {
         },
         {
             name: 'donutWidth',
-            title: 'Donut Width',
+            title: '@dashboard:widgets.donut-chart.donut-width',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 35,
@@ -1250,7 +1252,7 @@ const AXPDonutChartWidget = {
         },
         {
             name: 'cornerRadius',
-            title: 'Corner Radius',
+            title: '@dashboard:widgets.donut-chart.corner-radius',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 4,
@@ -1305,7 +1307,7 @@ const AXPDonutChartWidget = {
         // ====== Tooltip ======
         {
             name: 'showTooltip',
-            title: 'Show Tooltip',
+            title: '@dashboard:widgets.donut-chart.show-tooltip',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -1321,7 +1323,7 @@ const AXPDonutChartWidget = {
         // ====== Animation Settings ======
         {
             name: 'animationEasing',
-            title: 'Animation Easing',
+            title: '@dashboard:widgets.donut-chart.animation-easing',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 'cubic-out',
@@ -1351,7 +1353,7 @@ const AXPDonutChartWidget = {
         },
         {
             name: 'animationDuration',
-            title: 'Animation Duration',
+            title: '@dashboard:widgets.donut-chart.animation-duration',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 800,
@@ -1422,7 +1424,7 @@ const AXPGaugeChartWidget = {
         // ====== Chart Title ======
         {
             name: 'title',
-            title: 'Chart Title',
+            title: '@dashboard:widgets.gauge-chart.chart-title',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: '',
@@ -1441,7 +1443,7 @@ const AXPGaugeChartWidget = {
         // ====== Layout & Dimensions ======
         {
             name: 'width',
-            title: 'Width',
+            title: '@dashboard:widgets.gauge-chart.width',
             group: AXP_STYLING_PROPERTY_GROUP,
             schema: {
                 defaultValue: null,
@@ -1461,7 +1463,7 @@ const AXPGaugeChartWidget = {
         },
         {
             name: 'height',
-            title: 'Height',
+            title: '@dashboard:widgets.gauge-chart.height',
             group: AXP_STYLING_PROPERTY_GROUP,
             schema: {
                 defaultValue: 300,
@@ -1482,7 +1484,7 @@ const AXPGaugeChartWidget = {
         // ====== Gauge Configuration ======
         {
             name: 'minValue',
-            title: 'Minimum Value',
+            title: '@dashboard:widgets.gauge-chart.min-value',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 0,
@@ -1497,7 +1499,7 @@ const AXPGaugeChartWidget = {
         },
         {
             name: 'maxValue',
-            title: 'Maximum Value',
+            title: '@dashboard:widgets.gauge-chart.max-value',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 100,
@@ -1513,7 +1515,7 @@ const AXPGaugeChartWidget = {
         // ====== Gauge Appearance ======
         {
             name: 'showTooltip',
-            title: 'Show Tooltip',
+            title: '@dashboard:widgets.gauge-chart.show-tooltip',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -1528,7 +1530,7 @@ const AXPGaugeChartWidget = {
         },
         {
             name: 'gaugeWidth',
-            title: 'Gauge Width',
+            title: '@dashboard:widgets.gauge-chart.gauge-width',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 30,
@@ -1548,7 +1550,7 @@ const AXPGaugeChartWidget = {
         },
         {
             name: 'cornerRadius',
-            title: 'Corner Radius',
+            title: '@dashboard:widgets.gauge-chart.corner-radius',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 4,
@@ -1569,7 +1571,7 @@ const AXPGaugeChartWidget = {
         // ====== Label Display ======
         {
             name: 'label',
-            title: 'Label Text',
+            title: '@dashboard:widgets.gauge-chart.label',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: '',
@@ -1585,7 +1587,7 @@ const AXPGaugeChartWidget = {
         // ====== Animation Settings ======
         {
             name: 'animationEasing',
-            title: 'Animation Easing',
+            title: '@dashboard:widgets.gauge-chart.animation-easing',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 'cubic-out',
@@ -1615,7 +1617,7 @@ const AXPGaugeChartWidget = {
         },
         {
             name: 'animationDuration',
-            title: 'Animation Duration',
+            title: '@dashboard:widgets.gauge-chart.animation-duration',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 800,
@@ -1690,7 +1692,7 @@ const AXPLineChartWidget = {
         // ====== Chart Title ======
         {
             name: 'title',
-            title: 'Chart Title',
+            title: '@dashboard:widgets.line-chart.chart-title',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: '',
@@ -1709,7 +1711,7 @@ const AXPLineChartWidget = {
         // ====== Layout & Dimensions ======
         {
             name: 'width',
-            title: 'Width',
+            title: '@dashboard:widgets.line-chart.width',
             group: AXP_STYLING_PROPERTY_GROUP,
             schema: {
                 defaultValue: null,
@@ -1728,7 +1730,7 @@ const AXPLineChartWidget = {
         },
         {
             name: 'height',
-            title: 'Height',
+            title: '@dashboard:widgets.line-chart.height',
             group: AXP_STYLING_PROPERTY_GROUP,
             schema: {
                 defaultValue: 300,
@@ -1748,7 +1750,7 @@ const AXPLineChartWidget = {
         // ====== Axis Settings ======
         {
             name: 'showXAxis',
-            title: 'Show X Axis',
+            title: '@dashboard:widgets.line-chart.show-x-axis',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -1763,7 +1765,7 @@ const AXPLineChartWidget = {
         },
         {
             name: 'xAxisLabel',
-            title: 'X Axis Label',
+            title: '@dashboard:widgets.line-chart.x-axis-label',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: '',
@@ -1778,7 +1780,7 @@ const AXPLineChartWidget = {
         },
         {
             name: 'showYAxis',
-            title: 'Show Y Axis',
+            title: '@dashboard:widgets.line-chart.show-y-axis',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -1793,7 +1795,7 @@ const AXPLineChartWidget = {
         },
         {
             name: 'yAxisLabel',
-            title: 'Y Axis Label',
+            title: '@dashboard:widgets.line-chart.y-axis-label',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: '',
@@ -1808,7 +1810,7 @@ const AXPLineChartWidget = {
         },
         {
             name: 'yAxisStartsAtZero',
-            title: 'Y Axis Starts At Zero',
+            title: '@dashboard:widgets.line-chart.y-axis-starts-at-zero',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -1823,7 +1825,7 @@ const AXPLineChartWidget = {
         },
         {
             name: 'showGrid',
-            title: 'Show Grid Lines',
+            title: '@dashboard:widgets.line-chart.show-grid',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -1838,7 +1840,7 @@ const AXPLineChartWidget = {
         },
         {
             name: 'showVerticalGrid',
-            title: 'Show Vertical Grid',
+            title: '@dashboard:widgets.line-chart.show-vertical-grid',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -1854,7 +1856,7 @@ const AXPLineChartWidget = {
         // ====== Line Appearance ======
         {
             name: 'lineWidth',
-            title: 'Line Width',
+            title: '@dashboard:widgets.line-chart.line-width',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 2,
@@ -1874,7 +1876,7 @@ const AXPLineChartWidget = {
         },
         {
             name: 'smoothLine',
-            title: 'Smooth Line',
+            title: '@dashboard:widgets.line-chart.smooth-line',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -1889,7 +1891,7 @@ const AXPLineChartWidget = {
         },
         {
             name: 'showPoints',
-            title: 'Show Points',
+            title: '@dashboard:widgets.line-chart.show-points',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -1904,7 +1906,7 @@ const AXPLineChartWidget = {
         },
         {
             name: 'pointRadius',
-            title: 'Point Size',
+            title: '@dashboard:widgets.line-chart.point-radius',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 4,
@@ -1924,7 +1926,7 @@ const AXPLineChartWidget = {
         },
         {
             name: 'fillArea',
-            title: 'Fill Area',
+            title: '@dashboard:widgets.line-chart.fill-area',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: false,
@@ -1939,19 +1941,20 @@ const AXPLineChartWidget = {
         },
         {
             name: 'fillOpacity',
-            title: 'Fill Opacity',
+            title: '@dashboard:widgets.line-chart.fill-opacity',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
-                defaultValue: 10,
+                defaultValue: 0.1,
                 dataType: 'number',
                 interface: {
                     name: 'fillOpacity',
                     path: 'options.fillOpacity',
                     type: AXPWidgetsCatalog.number,
                     options: {
-                        placeholder: '0-100',
+                        placeholder: '0-1',
                         minValue: 0,
-                        maxValue: 100,
+                        maxValue: 1,
+                        step: 0.1,
                     },
                 },
             },
@@ -1960,7 +1963,7 @@ const AXPLineChartWidget = {
         // ====== Tooltip Settings ======
         {
             name: 'showTooltip',
-            title: 'Show Tooltip',
+            title: '@dashboard:widgets.line-chart.show-tooltip',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -1975,10 +1978,10 @@ const AXPLineChartWidget = {
         },
         {
             name: 'showCrosshair',
-            title: 'Show Crosshair',
+            title: '@dashboard:widgets.line-chart.show-crosshair',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
-                defaultValue: false,
+                defaultValue: true,
                 dataType: 'boolean',
                 interface: {
                     name: 'showCrosshair',
@@ -1991,7 +1994,7 @@ const AXPLineChartWidget = {
         // ====== Animation Settings ======
         {
             name: 'animationEasing',
-            title: 'Animation Easing',
+            title: '@dashboard:widgets.line-chart.animation-easing',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 'cubic-out',
@@ -2021,7 +2024,7 @@ const AXPLineChartWidget = {
         },
         {
             name: 'animationDuration',
-            title: 'Animation Duration',
+            title: '@dashboard:widgets.line-chart.animation-duration',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 800,
@@ -2047,12 +2050,12 @@ const AXPLineChartWidget = {
     },
     meta: {
         dimensions: {
-            width: 5,
-            height: 6,
+            width: 3,
+            height: 4,
             minWidth: 2,
             minHeight: 2,
-            maxWidth: 6,
-            maxHeight: 7,
+            maxWidth: 4,
+            maxHeight: 5,
         },
     },
 };
@@ -2150,7 +2153,17 @@ const AXPStickyNoteWidget = {
     groups: [AXPWidgetGroupEnum.DashboardWidget],
     type: 'dashboard',
     icon: 'fa-light fa-sticky-note',
-    properties: [AXP_DATA_PATH_PROPERTY, AXP_BG_COLOR_PROPERTY, plainTextDefaultProperty()],
+    properties: [
+        AXP_DATA_PATH_PROPERTY,
+        {
+            ...AXP_BG_COLOR_PROPERTY,
+            title: '@dashboard:widgets.sticky-note.background-color',
+        },
+        {
+            ...plainTextDefaultProperty(),
+            title: '@dashboard:widgets.sticky-note.note-text',
+        },
+    ],
     components: {
         view: {
             component: () => Promise.resolve().then(function () { return stickyNoteWidget_component; }).then((c) => c.AXPStickyNoteWidgetViewComponent),
@@ -2263,7 +2276,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)
@@ -2291,7 +2304,7 @@ class AXPTaskListWidgetViewComponent extends AXPValueWidgetComponent {
         return Math.floor(diffMs / (1000 * 60 * 60 * 24));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPTaskListWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPTaskListWidgetViewComponent, isStandalone: true, selector: "ng-component", outputs: { taskClick: "taskClick", taskCompleted: "taskCompleted" }, providers: [DatePipe], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-size-full ax-p-4\">\n  <!-- Header -->\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3\">\n    <h3 class=\"ax-text-lg ax-font-semibold\">{{ 'widget.tasklist.title' | translate | async }}</h3>\n    <div class=\"ax-flex ax-gap-2\">\n      @if(getPendingTaskCount() > 0){\n      <ax-badge\n        [text]=\"getPendingTaskCount() + ' ' + ('widget.tasklist.pending' | translate | async)\"\n        [color]=\"'warning'\"\n        size=\"sm\"\n        class=\"ax-ml-1\"\n      >\n      </ax-badge>\n      } @if(getCompletedTaskCount() > 0){\n      <ax-badge\n        [text]=\"getCompletedTaskCount() + ' ' + ('widget.tasklist.completed' | translate | 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-2\">\n    @if (showCategories() && hasCategories()) {\n    <!-- Categorized Tasks -->\n    @for (category of getCategories(); track category) {\n    <div class=\"ax-mb-3\">\n      <!-- Category Header -->\n      <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-2 ax-h-5\">\n        <h4 class=\"ax-font-medium ax-text-gray-700\">{{ category }}</h4>\n        @if(getCategoryTaskCount(category)){\n        <ax-badge [text]=\"getCategoryTaskCount(category).toString()\" [color]=\"'primary'\" size=\"sm\"></ax-badge>\n        }\n      </div>\n      <!-- Tasks in Category -->\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    } } @else {\n    <!-- Uncategorized Tasks -->\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 class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-12 ax-px-4 ax-text-gray-400\">\n      <ax-icon class=\"ax-text-4xl 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\">{{ 'widget.tasklist.noTasks' | translate | async }}</p>\n    </div>\n    } }\n  </div>\n</div>\n\n<!-- Task Item Template -->\n<ng-template #taskItemTemplateRef let-task>\n  <div class=\"ax-flex ax-gap-3 ax-items-center ax-py-2 ax-border-b ax-border-gray-100 last:ax-border-0\">\n    <!-- Checkbox -->\n    <ax-check-box\n      class=\"ax-flex-shrink-0\"\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\n          class=\"ax-font-semibold ax-truncate ax-pb-1\"\n          [class.ax-line-through]=\"task.completed\"\n          [class.ax-text-gray-400]=\"task.completed\"\n        >\n          {{ task.title }}\n        </h6>\n        @if(showPriority() && task.priority) {\n        <ax-badge [color]=\"getPriorityColor(task.priority)\" [text]=\"task.priority\" size=\"sm\" class=\"ax-ml-1\"></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-1 ax-text-xs ax-text-gray-500\">\n        @if(showDate() && task.dueDate) {\n        <span class=\"ax-flex ax-items-center ax-gap-1\" [class.ax-text-danger-500]=\"getDaysDifference(task.dueDate) < 0\">\n          <ax-icon><i class=\"fa-light fa-calendar\"></i></ax-icon>\n          {{ formatDueDate(task.dueDate) }}\n        </span>\n        } @if(showAssignee() && task.assignedTo) {\n        <span class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-icon><i class=\"fa-light fa-user\"></i></ax-icon>\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-completed{text-decoration:line-through;color:var(--ax-text-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i4.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXPTaskListWidgetViewComponent, isStandalone: true, selector: "ng-component", outputs: { taskClick: "taskClick", taskCompleted: "taskCompleted" }, providers: [DatePipe], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-size-full ax-p-4 ax-flex ax-flex-col\">\n  <!-- Header -->\n  <div class=\"ax-flex ax-justify-between ax-items-center\">\n    <h3 class=\"ax-text-lg ax-font-semibold ax-flex ax-items-center ax-gap-2\">\n      <ax-icon class=\"ax-text-primary-500\">\n        <i class=\"fa-light fa-clipboard-list-check\"></i>\n      </ax-icon>\n      {{ 'tasklist.title' | translate: { scope: 'dashboard' } | async }}\n    </h3>\n    <div class=\"ax-flex ax-gap-2\">\n      @if (getPendingTaskCount() > 0) {\n        <ax-badge\n          [text]=\"getPendingTaskCount() + ' ' + ('tasklist.pending' | translate: { scope: 'dashboard' } | async)\"\n          [color]=\"'warning'\"\n          size=\"sm\"\n          class=\"ax-ml-1\"\n        >\n        </ax-badge>\n      }\n      @if (getCompletedTaskCount() > 0) {\n        <ax-badge\n          [text]=\"getCompletedTaskCount() + ' ' + ('tasklist.completed' | translate: { scope: 'dashboard' } | async)\"\n          [color]=\"'success'\"\n          size=\"sm\"\n          class=\"ax-ml-1\"\n        >\n        </ax-badge>\n      }\n    </div>\n  </div>\n\n  <!-- Task List -->\n  <div class=\"ax-space-y-4 ax-my-4 ax-px-1 ax-overflow-auto ax-grow\">\n    @if (showCategories() && hasCategories()) {\n      <!-- Categorized Tasks -->\n      @for (category of getCategories(); track category) {\n        <div class=\"ax-mb-5\">\n          <!-- Category Header -->\n          <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3 ax-h-5\">\n            <h4 class=\"ax-font-medium category-header\">{{ category }}</h4>\n            @if (getCategoryTaskCount(category)) {\n              <ax-badge\n                [text]=\"getCategoryTaskCount(category).toString()\"\n                [color]=\"'primary'\"\n                size=\"sm\"\n                class=\"ax-rounded-full\"\n              ></ax-badge>\n            }\n          </div>\n          <!-- Tasks in Category -->\n          <div class=\"ax-space-y-2\">\n            @for (task of getTasksByCategory(category); track task.id) {\n              <ng-container\n                [ngTemplateOutlet]=\"taskItemTemplateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: task }\"\n              ></ng-container>\n            }\n          </div>\n        </div>\n      }\n    } @else {\n      <!-- Uncategorized Tasks -->\n      <div class=\"ax-space-y-2\">\n        @for (task of taskItems(); track task.id) {\n          <ng-container\n            [ngTemplateOutlet]=\"taskItemTemplateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: task }\"\n          ></ng-container>\n        } @empty {\n          <!-- Empty State -->\n          <div\n            class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-14 ax-px-4 ax-text-gray-400 empty-state\"\n          >\n            <ax-icon class=\"ax-text-5xl ax-mb-3 ax-text-gray-300\">\n              <i class=\"fa-light fa-clipboard-list-check\"></i>\n            </ax-icon>\n            <p class=\"ax-text-center ax-font-medium\">\n              {{ 'tasklist.noTasks' | translate: { scope: 'dashboard' } | async }}\n            </p>\n            <p class=\"ax-text-center ax-text-sm ax-mt-2\">\n              {{ 'tasklist.addTask' | translate: { scope: 'dashboard' } | async }}\n            </p>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Task Item Template -->\n<ng-template #taskItemTemplateRef let-task>\n  <div\n    class=\"ax-flex ax-gap-3 ax-items-start ax-p-3 ax-rounded-lg task-item\"\n    [class.priority-high]=\"task.priority === 'high'\"\n    [class.priority-medium]=\"task.priority === 'medium'\"\n    [class.priority-low]=\"task.priority === 'low'\"\n    [class.ax-bg-surface]=\"task.completed\"\n  >\n    <!-- Checkbox -->\n    <ax-check-box\n      class=\"ax-flex-shrink-0 ax-mt-1 task-checkbox\"\n      [value]=\"task.completed\"\n      [disabled]=\"!allowMarkComplete()\"\n      (valueChange)=\"onTaskCompletionChange(task, $event)\"\n    >\n    </ax-check-box>\n\n    <!-- Task Details -->\n    <div class=\"ax-overflow-hidden ax-grow ax-text-start\" (click)=\"onTaskClick(task)\">\n      <!-- Title and Priority -->\n      <div class=\"ax-flex ax-items-center ax-gap-2\">\n        <h6 class=\"ax-font-medium ax-truncate ax-pb-1\" [title]=\"task.title\" [class.task-completed]=\"task.completed\">\n          {{ task.title }}\n        </h6>\n        @if (showPriority() && task.priority) {\n          <ax-badge\n            [color]=\"getPriorityColor(task.priority)\"\n            [text]=\"task.priority\"\n            size=\"sm\"\n            class=\"ax-ml-1 ax-rounded-full\"\n          ></ax-badge>\n        }\n      </div>\n\n      <!-- Metadata -->\n      <div class=\"ax-flex ax-flex-wrap ax-gap-x-3 ax-gap-y-1 ax-mt-2 ax-text-xs ax-text-gray-500\">\n        @if (showDate() && task.dueDate) {\n          <span\n            class=\"ax-flex ax-items-center ax-gap-1 due-date\"\n            [class.ax-text-danger-500]=\"getDaysDifference(task.dueDate) < 0\"\n            [class.overdue]=\"getDaysDifference(task.dueDate) < 0\"\n          >\n            <ax-icon><i class=\"fa-light fa-calendar\"></i></ax-icon>\n            {{ formatDueDate(task.dueDate) }}\n          </span>\n        }\n        @if (showAssignee() && task.assignedTo) {\n          <span class=\"ax-flex ax-items-center ax-gap-1\">\n            @if (task.assignedTo.image) {\n              <ax-icon class=\"ax-bg-primary-100 ax-text-primary-500 ax-rounded-full ax-p-1\">\n                <i class=\"fa-light fa-user\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon><i class=\"fa-light fa-user\"></i></ax-icon>\n            }\n            {{ task.assignedTo.name }}\n          </span>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;height:100%;width:100%}.task-item{border-radius:8px;transition:all .2s ease-in-out;border-left:3px solid transparent}.task-item:hover{background-color:rgba(var(--ax-sys-color-on-surface),.1);transform:translateY(-2px);box-shadow:0 2px 8px rgba(0,0,0,.05)}.task-item.priority-high{border-left-color:rgb(var(--ax-sys-color-danger-500))}.task-item.priority-medium{border-left-color:rgb(var(--ax-sys-color-warning-500))}.task-item.priority-low{border-left-color:rgb(var(--ax-sys-color-success-500))}.task-item:active{transform:translateY(0);box-shadow:0 1px 3px rgba(0,0,0,.05)}.task-completed{text-decoration:line-through;color:var(--ax-text-secondary);opacity:.7;transition:all .3s ease}.category-header{position:relative}.category-header:after{content:\"\";position:absolute;bottom:-8px;left:0;width:40px;height:3px;background-color:var(--ax-primary-500);border-radius:3px;transition:width .3s ease}.category-header:hover:after{width:60px}.empty-state{animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.task-checkbox ::ng-deep .ax-checkbox{transition:all .2s ease}.task-checkbox ::ng-deep .ax-checkbox:hover{transform:scale(1.1)}.due-date.overdue{animation:pulse 2s infinite}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}.ax-space-y-2>*{animation:slideInRight .3s ease forwards;opacity:0}.ax-space-y-2>*:nth-child(1){animation-delay:.05s}.ax-space-y-2>*:nth-child(2){animation-delay:.1s}.ax-space-y-2>*:nth-child(3){animation-delay:.15s}.ax-space-y-2>*:nth-child(4){animation-delay:.2s}.ax-space-y-2>*:nth-child(5){animation-delay:.25s}.ax-space-y-2>*:nth-child(6){animation-delay:.3s}.ax-space-y-2>*:nth-child(7){animation-delay:.35s}.ax-space-y-2>*:nth-child(8){animation-delay:.4s}.ax-space-y-2>*:nth-child(9){animation-delay:.45s}.ax-space-y-2>*:nth-child(10){animation-delay:.5s}@keyframes slideInRight{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i4.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2$3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPTaskListWidgetViewComponent, decorators: [{
             type: Component,
@@ -2306,7 +2319,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AXCheckBoxModule,
                         AXLabelModule,
                         AXTranslationModule,
-                    ], providers: [DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-size-full ax-p-4\">\n  <!-- Header -->\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3\">\n    <h3 class=\"ax-text-lg ax-font-semibold\">{{ 'widget.tasklist.title' | translate | async }}</h3>\n    <div class=\"ax-flex ax-gap-2\">\n      @if(getPendingTaskCount() > 0){\n      <ax-badge\n        [text]=\"getPendingTaskCount() + ' ' + ('widget.tasklist.pending' | translate | async)\"\n        [color]=\"'warning'\"\n        size=\"sm\"\n        class=\"ax-ml-1\"\n      >\n      </ax-badge>\n      } @if(getCompletedTaskCount() > 0){\n      <ax-badge\n        [text]=\"getCompletedTaskCount() + ' ' + ('widget.tasklist.completed' | translate | 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-2\">\n    @if (showCategories() && hasCategories()) {\n    <!-- Categorized Tasks -->\n    @for (category of getCategories(); track category) {\n    <div class=\"ax-mb-3\">\n      <!-- Category Header -->\n      <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-2 ax-h-5\">\n        <h4 class=\"ax-font-medium ax-text-gray-700\">{{ category }}</h4>\n        @if(getCategoryTaskCount(category)){\n        <ax-badge [text]=\"getCategoryTaskCount(category).toString()\" [color]=\"'primary'\" size=\"sm\"></ax-badge>\n        }\n      </div>\n      <!-- Tasks in Category -->\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    } } @else {\n    <!-- Uncategorized Tasks -->\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 class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-12 ax-px-4 ax-text-gray-400\">\n      <ax-icon class=\"ax-text-4xl 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\">{{ 'widget.tasklist.noTasks' | translate | async }}</p>\n    </div>\n    } }\n  </div>\n</div>\n\n<!-- Task Item Template -->\n<ng-template #taskItemTemplateRef let-task>\n  <div class=\"ax-flex ax-gap-3 ax-items-center ax-py-2 ax-border-b ax-border-gray-100 last:ax-border-0\">\n    <!-- Checkbox -->\n    <ax-check-box\n      class=\"ax-flex-shrink-0\"\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\n          class=\"ax-font-semibold ax-truncate ax-pb-1\"\n          [class.ax-line-through]=\"task.completed\"\n          [class.ax-text-gray-400]=\"task.completed\"\n        >\n          {{ task.title }}\n        </h6>\n        @if(showPriority() && task.priority) {\n        <ax-badge [color]=\"getPriorityColor(task.priority)\" [text]=\"task.priority\" size=\"sm\" class=\"ax-ml-1\"></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-1 ax-text-xs ax-text-gray-500\">\n        @if(showDate() && task.dueDate) {\n        <span class=\"ax-flex ax-items-center ax-gap-1\" [class.ax-text-danger-500]=\"getDaysDifference(task.dueDate) < 0\">\n          <ax-icon><i class=\"fa-light fa-calendar\"></i></ax-icon>\n          {{ formatDueDate(task.dueDate) }}\n        </span>\n        } @if(showAssignee() && task.assignedTo) {\n        <span class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-icon><i class=\"fa-light fa-user\"></i></ax-icon>\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-completed{text-decoration:line-through;color:var(--ax-text-secondary)}\n"] }]
+                    ], providers: [DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-size-full ax-p-4 ax-flex ax-flex-col\">\n  <!-- Header -->\n  <div class=\"ax-flex ax-justify-between ax-items-center\">\n    <h3 class=\"ax-text-lg ax-font-semibold ax-flex ax-items-center ax-gap-2\">\n      <ax-icon class=\"ax-text-primary-500\">\n        <i class=\"fa-light fa-clipboard-list-check\"></i>\n      </ax-icon>\n      {{ 'tasklist.title' | translate: { scope: 'dashboard' } | async }}\n    </h3>\n    <div class=\"ax-flex ax-gap-2\">\n      @if (getPendingTaskCount() > 0) {\n        <ax-badge\n          [text]=\"getPendingTaskCount() + ' ' + ('tasklist.pending' | translate: { scope: 'dashboard' } | async)\"\n          [color]=\"'warning'\"\n          size=\"sm\"\n          class=\"ax-ml-1\"\n        >\n        </ax-badge>\n      }\n      @if (getCompletedTaskCount() > 0) {\n        <ax-badge\n          [text]=\"getCompletedTaskCount() + ' ' + ('tasklist.completed' | translate: { scope: 'dashboard' } | async)\"\n          [color]=\"'success'\"\n          size=\"sm\"\n          class=\"ax-ml-1\"\n        >\n        </ax-badge>\n      }\n    </div>\n  </div>\n\n  <!-- Task List -->\n  <div class=\"ax-space-y-4 ax-my-4 ax-px-1 ax-overflow-auto ax-grow\">\n    @if (showCategories() && hasCategories()) {\n      <!-- Categorized Tasks -->\n      @for (category of getCategories(); track category) {\n        <div class=\"ax-mb-5\">\n          <!-- Category Header -->\n          <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3 ax-h-5\">\n            <h4 class=\"ax-font-medium category-header\">{{ category }}</h4>\n            @if (getCategoryTaskCount(category)) {\n              <ax-badge\n                [text]=\"getCategoryTaskCount(category).toString()\"\n                [color]=\"'primary'\"\n                size=\"sm\"\n                class=\"ax-rounded-full\"\n              ></ax-badge>\n            }\n          </div>\n          <!-- Tasks in Category -->\n          <div class=\"ax-space-y-2\">\n            @for (task of getTasksByCategory(category); track task.id) {\n              <ng-container\n                [ngTemplateOutlet]=\"taskItemTemplateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: task }\"\n              ></ng-container>\n            }\n          </div>\n        </div>\n      }\n    } @else {\n      <!-- Uncategorized Tasks -->\n      <div class=\"ax-space-y-2\">\n        @for (task of taskItems(); track task.id) {\n          <ng-container\n            [ngTemplateOutlet]=\"taskItemTemplateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: task }\"\n          ></ng-container>\n        } @empty {\n          <!-- Empty State -->\n          <div\n            class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-14 ax-px-4 ax-text-gray-400 empty-state\"\n          >\n            <ax-icon class=\"ax-text-5xl ax-mb-3 ax-text-gray-300\">\n              <i class=\"fa-light fa-clipboard-list-check\"></i>\n            </ax-icon>\n            <p class=\"ax-text-center ax-font-medium\">\n              {{ 'tasklist.noTasks' | translate: { scope: 'dashboard' } | async }}\n            </p>\n            <p class=\"ax-text-center ax-text-sm ax-mt-2\">\n              {{ 'tasklist.addTask' | translate: { scope: 'dashboard' } | async }}\n            </p>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Task Item Template -->\n<ng-template #taskItemTemplateRef let-task>\n  <div\n    class=\"ax-flex ax-gap-3 ax-items-start ax-p-3 ax-rounded-lg task-item\"\n    [class.priority-high]=\"task.priority === 'high'\"\n    [class.priority-medium]=\"task.priority === 'medium'\"\n    [class.priority-low]=\"task.priority === 'low'\"\n    [class.ax-bg-surface]=\"task.completed\"\n  >\n    <!-- Checkbox -->\n    <ax-check-box\n      class=\"ax-flex-shrink-0 ax-mt-1 task-checkbox\"\n      [value]=\"task.completed\"\n      [disabled]=\"!allowMarkComplete()\"\n      (valueChange)=\"onTaskCompletionChange(task, $event)\"\n    >\n    </ax-check-box>\n\n    <!-- Task Details -->\n    <div class=\"ax-overflow-hidden ax-grow ax-text-start\" (click)=\"onTaskClick(task)\">\n      <!-- Title and Priority -->\n      <div class=\"ax-flex ax-items-center ax-gap-2\">\n        <h6 class=\"ax-font-medium ax-truncate ax-pb-1\" [title]=\"task.title\" [class.task-completed]=\"task.completed\">\n          {{ task.title }}\n        </h6>\n        @if (showPriority() && task.priority) {\n          <ax-badge\n            [color]=\"getPriorityColor(task.priority)\"\n            [text]=\"task.priority\"\n            size=\"sm\"\n            class=\"ax-ml-1 ax-rounded-full\"\n          ></ax-badge>\n        }\n      </div>\n\n      <!-- Metadata -->\n      <div class=\"ax-flex ax-flex-wrap ax-gap-x-3 ax-gap-y-1 ax-mt-2 ax-text-xs ax-text-gray-500\">\n        @if (showDate() && task.dueDate) {\n          <span\n            class=\"ax-flex ax-items-center ax-gap-1 due-date\"\n            [class.ax-text-danger-500]=\"getDaysDifference(task.dueDate) < 0\"\n            [class.overdue]=\"getDaysDifference(task.dueDate) < 0\"\n          >\n            <ax-icon><i class=\"fa-light fa-calendar\"></i></ax-icon>\n            {{ formatDueDate(task.dueDate) }}\n          </span>\n        }\n        @if (showAssignee() && task.assignedTo) {\n          <span class=\"ax-flex ax-items-center ax-gap-1\">\n            @if (task.assignedTo.image) {\n              <ax-icon class=\"ax-bg-primary-100 ax-text-primary-500 ax-rounded-full ax-p-1\">\n                <i class=\"fa-light fa-user\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon><i class=\"fa-light fa-user\"></i></ax-icon>\n            }\n            {{ task.assignedTo.name }}\n          </span>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;height:100%;width:100%}.task-item{border-radius:8px;transition:all .2s ease-in-out;border-left:3px solid transparent}.task-item:hover{background-color:rgba(var(--ax-sys-color-on-surface),.1);transform:translateY(-2px);box-shadow:0 2px 8px rgba(0,0,0,.05)}.task-item.priority-high{border-left-color:rgb(var(--ax-sys-color-danger-500))}.task-item.priority-medium{border-left-color:rgb(var(--ax-sys-color-warning-500))}.task-item.priority-low{border-left-color:rgb(var(--ax-sys-color-success-500))}.task-item:active{transform:translateY(0);box-shadow:0 1px 3px rgba(0,0,0,.05)}.task-completed{text-decoration:line-through;color:var(--ax-text-secondary);opacity:.7;transition:all .3s ease}.category-header{position:relative}.category-header:after{content:\"\";position:absolute;bottom:-8px;left:0;width:40px;height:3px;background-color:var(--ax-primary-500);border-radius:3px;transition:width .3s ease}.category-header:hover:after{width:60px}.empty-state{animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.task-checkbox ::ng-deep .ax-checkbox{transition:all .2s ease}.task-checkbox ::ng-deep .ax-checkbox:hover{transform:scale(1.1)}.due-date.overdue{animation:pulse 2s infinite}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}.ax-space-y-2>*{animation:slideInRight .3s ease forwards;opacity:0}.ax-space-y-2>*:nth-child(1){animation-delay:.05s}.ax-space-y-2>*:nth-child(2){animation-delay:.1s}.ax-space-y-2>*:nth-child(3){animation-delay:.15s}.ax-space-y-2>*:nth-child(4){animation-delay:.2s}.ax-space-y-2>*:nth-child(5){animation-delay:.25s}.ax-space-y-2>*:nth-child(6){animation-delay:.3s}.ax-space-y-2>*:nth-child(7){animation-delay:.35s}.ax-space-y-2>*:nth-child(8){animation-delay:.4s}.ax-space-y-2>*:nth-child(9){animation-delay:.45s}.ax-space-y-2>*:nth-child(10){animation-delay:.5s}@keyframes slideInRight{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}\n"] }]
         }] });
 
 var tasklistWidget_component = /*#__PURE__*/Object.freeze({
@@ -2326,7 +2339,7 @@ const AXPTaskListWidget = {
         // ====== Title ======
         {
             name: 'title',
-            title: 'Chart Title',
+            title: '@dashboard:widgets.task-list.chart-title',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: '',
@@ -2345,7 +2358,7 @@ const AXPTaskListWidget = {
         // Display options
         {
             name: 'maxItems',
-            title: 'Max Items',
+            title: '@dashboard:widgets.task-list.max-items',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 10,
@@ -2364,7 +2377,7 @@ const AXPTaskListWidget = {
         },
         {
             name: 'showDate',
-            title: 'Show Date',
+            title: '@dashboard:widgets.task-list.show-date',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -2379,7 +2392,7 @@ const AXPTaskListWidget = {
         },
         {
             name: 'showAssignee',
-            title: 'Show Assignee',
+            title: '@dashboard:widgets.task-list.show-assignee',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -2394,7 +2407,7 @@ const AXPTaskListWidget = {
         },
         {
             name: 'groupByCategory',
-            title: 'Group by Category',
+            title: '@dashboard:widgets.task-list.group-by-category',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -2409,7 +2422,7 @@ const AXPTaskListWidget = {
         },
         {
             name: 'showPriority',
-            title: 'Show Priority',
+            title: '@dashboard:widgets.task-list.show-priority',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -2424,7 +2437,7 @@ const AXPTaskListWidget = {
         },
         {
             name: 'allowMarkComplete',
-            title: 'Allow Complete',
+            title: '@dashboard:widgets.task-list.allow-complete',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -2445,7 +2458,7 @@ const AXPTaskListWidget = {
     },
     meta: {
         dimensions: {
-            width: 5,
+            width: 3,
             height: 7,
             minWidth: 3,
             minHeight: 4,
@@ -3080,8 +3093,7 @@ class AXPWeatherWidgetViewComponent extends AXPValueWidgetComponent {
                     setTimeout(() => this.cdr.detectChanges());
                 },
                 error: (error) => {
-                    this.hasError.set(true);
-                    this.errorMessage.set(error.message || 'Failed to load weather data. Please try again.');
+                    this.handleError(error);
                     this.isLoading.set(false);
                     this.isForecastLoading.set(false);
                     this.cdr.detectChanges();
@@ -3102,8 +3114,7 @@ class AXPWeatherWidgetViewComponent extends AXPValueWidgetComponent {
                 setTimeout(() => this.cdr.detectChanges());
             },
             error: (error) => {
-                this.hasError.set(true);
-                this.errorMessage.set(error.message || 'Failed to load weather data. Please try again.');
+                this.handleError(error);
                 this.isLoading.set(false);
                 this.cdr.detectChanges();
             },
@@ -3208,7 +3219,11 @@ class AXPWeatherWidgetViewComponent extends AXPValueWidgetComponent {
      */
     getConditionName(conditionId) {
         const condition = this.weatherService.getCondition(conditionId);
-        return condition?.name || 'Unknown';
+        if (!condition?.name)
+            return 'weather.conditions.sunny';
+        // Convert condition name to lowercase and replace spaces with hyphens
+        const formattedName = condition.name.toLowerCase().replace(/\s+/g, '-');
+        return `weather.conditions.${formattedName}`;
     }
     /**
      * Gets the color for a weather condition
@@ -3226,22 +3241,60 @@ class AXPWeatherWidgetViewComponent extends AXPValueWidgetComponent {
     cleanupChart() {
         this.clearRefreshTimer();
     }
+    handleError(error) {
+        console.error('Weather widget error:', error);
+        this.hasError.set(true);
+        // Check if it's a network error
+        if (error.status === 0) {
+            this.errorMessage.set('weather.error.network');
+            return;
+        }
+        // Check if it's an API error
+        if (error.status >= 400 && error.status < 500) {
+            this.errorMessage.set('weather.error.api');
+            return;
+        }
+        // Default error message
+        this.errorMessage.set('weather.error.general');
+    }
+    getTemperatureUnit() {
+        return this.temperatureUnit() === '°C' ? 'weather.units.celsius' : 'weather.units.fahrenheit';
+    }
+    getWindSpeedUnit() {
+        return this.windSpeedUnit() === 'km/h' ? 'weather.units.kmh' : 'weather.units.mph';
+    }
+    getDayName(date) {
+        const today = new Date();
+        const tomorrow = new Date(today);
+        tomorrow.setDate(tomorrow.getDate() + 1);
+        if (date.toDateString() === today.toDateString()) {
+            return 'weather.days.today';
+        }
+        if (date.toDateString() === tomorrow.toDateString()) {
+            return 'weather.days.tomorrow';
+        }
+        const days = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
+        return `weather.days.${days[date.getDay()]}`;
+    }
+    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: [
             {
                 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>Loading weather data...</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() }}</span>\n      <button class=\"axp-weather-retry-button\" (click)=\"refreshWeather()\">\n        <i class=\"fa-solid fa-sync-alt\"></i>\n        <span>Retry</span>\n      </button>\n    </div>\n  </div>\n  }\n\n  <!-- Weather content - only show when we have data -->\n  @if (weatherData()) {\n  <!-- Background decorations based on weather condition -->\n  <div class=\"axp-weather-background-decorations\">\n    <div class=\"axp-weather-decoration\" [ngClass]=\"weatherData()?.current?.condition?.toLowerCase()\"></div>\n    <div class=\"axp-weather-gradient-overlay\"></div>\n  </div>\n\n  <div class=\"axp-weather-inner\">\n    <!-- Location information section -->\n    <div class=\"axp-weather-location-info\">\n      <div class=\"axp-weather-location-icon\">\n        <i class=\"fa-solid fa-location-dot\"></i>\n      </div>\n      <div class=\"axp-weather-location-text\">\n        <h2 class=\"axp-weather-location-name\">{{ city() }}</h2>\n      </div>\n    </div>\n\n    <!-- Current weather conditions section -->\n    <div class=\"axp-weather-current-weather\">\n      <!-- Weather icon and condition name -->\n      @if (showCurrentCondition()) {\n      <div class=\"axp-weather-condition\">\n        <div class=\"axp-weather-icon-wrapper\">\n          <div class=\"axp-weather-icon\">\n            <i\n              [class]=\"getConditionIcon(weatherData()?.current?.condition || '')\"\n              [style.color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n            ></i>\n          </div>\n          <div\n            class=\"axp-weather-icon-glow\"\n            [style.background-color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n          ></div>\n        </div>\n        <div class=\"axp-weather-condition-name\">{{ getCurrentCondition() }}</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\">{{ temperatureUnit() }}</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\">Humidity</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\">Wind</div>\n          <div class=\"axp-weather-detail-value\">{{ getWindSpeed() }} {{ windSpeedUnit() }}</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>Forecast</span>\n        </h3>\n        <!-- <div class=\"axp-weather-scroll-indicator\">\n          <i class=\"fa-solid fa-chevron-right\"></i>\n        </div> -->\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>Loading forecast...</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\">{{ day.day }}</div>\n          <div class=\"axp-weather-forecast-icon\" title=\"{{ getConditionName(day.condition) }}\">\n            <i [class]=\"getConditionIcon(day.condition)\" [style.color]=\"getConditionColor(day.condition)\"></i>\n          </div>\n          <div class=\"axp-weather-forecast-temps\">\n            <span class=\"axp-weather-forecast-low\">\n              {{ temperatureUnit() === '\u00B0C' ? day.minTempC : day.minTempF }}\u00B0\n            </span>\n            <span class=\"axp-weather-forecast-high\">\n              {{ temperatureUnit() === '\u00B0C' ? day.maxTempC : day.maxTempF }}\u00B0\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>Last updated: {{ 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]=\"'Refresh weather data'\"\n        title=\"Refresh weather data\"\n      >\n        <i class=\"fa-solid fa-sync-alt\"></i>\n        <span>Refresh</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>No weather data available</p>\n    <button class=\"axp-weather-refresh-button\" (click)=\"refreshWeather()\">\n      <i class=\"fa-solid fa-sync-alt\"></i>\n      <span>Load Data</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%;border-radius:8px;overflow:hidden;position:relative;box-shadow:0 4px 8px rgba(0,0,0,.1);color:#fff;min-height:300px;background-color:#2c3e50}.axp-weather-loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(44,62,80,.85);display:flex;justify-content:center;align-items:center;z-index:100}.axp-weather-loading-spinner{text-align:center}.axp-weather-loading-spinner i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-loading-spinner span{display:block;color:#fff;font-size:1rem}.axp-weather-error-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(189,54,47,.85);display:flex;justify-content:center;align-items:center;z-index:100}.axp-weather-error-message{text-align:center;padding:1rem}.axp-weather-error-message i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-error-message span{display:block;color:#fff;font-size:1.1rem;margin-bottom:1rem}.axp-weather-error-message .axp-weather-retry-button{color:#bd362f;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-error-message .axp-weather-retry-button:hover{transform:translateY(-1px)}.axp-weather-no-data-state{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:2rem;text-align:center}.axp-weather-no-data-state i{font-size:3rem;margin-bottom:1rem;color:rgba(255,255,255,.8)}.axp-weather-no-data-state p{margin-bottom:1.5rem;font-size:1.1rem}.axp-weather-no-data-state .axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-no-data-state .axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-background-decorations{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.axp-weather-decoration{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center}.axp-weather-decoration.sunny{background:linear-gradient(135deg,#ff7e00,#f7d358)}.axp-weather-decoration.partlyCloudy{background:linear-gradient(135deg,#7ba2e7,#b4d2f7)}.axp-weather-decoration.cloudy{background:linear-gradient(135deg,#717e8c,#919eab)}.axp-weather-decoration.rain{background:linear-gradient(135deg,#6a8caf,#567a9e)}.axp-weather-decoration.snow{background:linear-gradient(135deg,#99b3cc,#c6d4e1)}.axp-weather-decoration.thunder{background:linear-gradient(135deg,#425777,#2c3e50)}.axp-weather-decoration.mist{background:linear-gradient(135deg,#94a3b8,#cbd5e1)}.axp-weather-gradient-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5))}.axp-weather-inner{position:relative;z-index:2;height:100%;padding:1.5rem;display:flex;flex-direction:column}.axp-weather-location-info{display:flex;align-items:center;margin-bottom:1.5rem}.axp-weather-location-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,.2);border-radius:50%;margin-right:.75rem}.axp-weather-location-icon i{color:#fff}.axp-weather-location-name{margin:0;font-size:1.5rem;font-weight:500;text-shadow:1px 1px 3px rgba(0,0,0,.2);text-transform:capitalize}.axp-weather-current-weather{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap}.axp-weather-condition{display:flex;flex-direction:column;align-items:center}.axp-weather-icon-wrapper{position:relative;margin-bottom:.5rem}.axp-weather-icon{position:relative;z-index:2}.axp-weather-icon i{font-size:2.75rem;filter:drop-shadow(0 0 8px rgba(0,0,0,.3))}.axp-weather-icon-glow{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);width:45px;height:45px;border-radius:50%;filter:blur(15px);opacity:.75}.axp-weather-condition-name{font-size:1.1rem;text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.axp-weather-temperature{display:flex;align-items:flex-start;text-shadow:1px 1px 3px rgba(0,0,0,.3)}.axp-weather-temperature-value{font-size:3.5rem;font-weight:500;line-height:1}.axp-weather-temperature-unit{font-size:1.5rem;margin-top:.25rem}.axp-weather-details{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:1.5rem;padding:1rem;background-color:rgba(0,0,0,.15);border-radius:8px}.axp-weather-detail-item{display:flex;align-items:center;flex:1;min-width:120px}.axp-weather-detail-icon{width:40px;height:40px;border-radius:50%;background-color:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin-right:.75rem}.axp-weather-detail-icon i{font-size:1.25rem}.axp-weather-detail-info{display:flex;flex-direction:column}.axp-weather-detail-label{font-size:.875rem;color:rgba(255,255,255,.8);margin-bottom:.25rem}.axp-weather-detail-value{font-size:1.125rem;font-weight:500}.axp-weather-forecast{margin-top:auto;margin-bottom:1rem;background-color:rgba(0,0,0,.15);border-radius:8px;padding:1rem}.axp-weather-forecast-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.axp-weather-forecast-title{margin:0;font-size:1.125rem;font-weight:500;display:flex;align-items:center}.axp-weather-forecast-title i{margin-right:.5rem;opacity:.8}.axp-weather-scroll-indicator{color:rgba(255,255,255,.6)}.axp-weather-forecast-items{display:flex;overflow-x:auto;gap:.75rem;padding-bottom:.5rem}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.3);border-radius:4px}.axp-weather-forecast-items::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:4px}.axp-weather-forecast-day{min-width:80px;display:flex;flex-direction:column;align-items:center;padding:.75rem .5rem;background-color:rgba(255,255,255,.1);border-radius:6px;transition:all .3s ease}.axp-weather-forecast-day:hover{background-color:rgba(255,255,255,.15);transform:translateY(-2px)}.axp-weather-forecast-day-name{font-size:.875rem;margin-bottom:.5rem;font-weight:500}.axp-weather-forecast-icon{font-size:1.5rem;margin-bottom:.5rem}.axp-weather-forecast-icon i{filter:drop-shadow(0 0 5px rgba(0,0,0,.2))}.axp-weather-forecast-temps{display:flex;flex-direction:row;gap:.75rem;align-items:center;font-size:.875rem}.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}.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: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: HttpClientModule }], 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                <i\n                  [class]=\"getConditionIcon(weatherData()?.current?.condition || '')\"\n                  [style.color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n                ></i>\n              </div>\n              <div\n                class=\"axp-weather-icon-glow\"\n                [style.background-color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n              ></div>\n            </div>\n            <div class=\"axp-weather-condition-name\">\n              {{ getCurrentCondition() | translate: { scope: 'dashboard' } | async }}\n            </div>\n          </div>\n        }\n\n        <!-- Temperature display -->\n        @if (showTemperature()) {\n          <div class=\"axp-weather-temperature\">\n            <span class=\"axp-weather-temperature-value\">{{ getCurrentTemperature() }}</span>\n            <span class=\"axp-weather-temperature-unit\">{{\n              getTemperatureUnit() | translate: { scope: 'dashboard' } | async\n            }}</span>\n          </div>\n        }\n      </div>\n\n      <!-- Weather details section (humidity and wind) -->\n      @if (showHumidity() || showWind()) {\n        <div class=\"axp-weather-details\">\n          <!-- Humidity information -->\n          @if (showHumidity()) {\n            <div class=\"axp-weather-detail-item\">\n              <div class=\"axp-weather-detail-icon\">\n                <i class=\"fa-solid fa-droplet\"></i>\n              </div>\n              <div class=\"axp-weather-detail-info\">\n                <div class=\"axp-weather-detail-label\">\n                  {{ 'weather.humidity' | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div class=\"axp-weather-detail-value\">{{ getHumidity() }}%</div>\n              </div>\n            </div>\n          }\n\n          <!-- Wind speed information -->\n          @if (showWind()) {\n            <div class=\"axp-weather-detail-item\">\n              <div class=\"axp-weather-detail-icon\">\n                <i class=\"fa-solid fa-wind\"></i>\n              </div>\n              <div class=\"axp-weather-detail-info\">\n                <div class=\"axp-weather-detail-label\">\n                  {{ 'weather.wind' | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div class=\"axp-weather-detail-value\">\n                  {{ getWindSpeed() }} {{ getWindSpeedUnit() | translate: { scope: 'dashboard' } | async }}\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      <!-- Weather forecast section -->\n      @if (showForecast() && weatherData()?.forecast) {\n        <div class=\"axp-weather-forecast\">\n          <div class=\"axp-weather-forecast-header\">\n            <h3 class=\"axp-weather-forecast-title\">\n              <i class=\"fa-solid fa-calendar-days\"></i>\n              <span class=\"ax-px-1\">{{ 'weather.forecast' | translate: { scope: 'dashboard' } | async }}</span>\n            </h3>\n          </div>\n          <!-- Loading indicator for forecast -->\n          <!-- @if (isForecastLoading()) {\n            <div class=\"axp-weather-forecast-loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n              <span>{{ 'weather.loading-forecast' | translate: { scope: 'dashboard' } | async }}</span>\n            </div>\n          } -->\n          <!-- Scrollable forecast days display -->\n          <div class=\"axp-weather-forecast-items\">\n            @for (day of displayedForecast(); track day.day) {\n              <div class=\"axp-weather-forecast-day\">\n                <div class=\"axp-weather-forecast-day-name\">\n                  {{ getDayName(parseDate(day.date)) | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div\n                  class=\"axp-weather-forecast-icon\"\n                  [title]=\"getConditionName(day.condition) | translate: { scope: 'dashboard' } | async\"\n                >\n                  <i [class]=\"getConditionIcon(day.condition)\" [style.color]=\"getConditionColor(day.condition)\"></i>\n                </div>\n                <div class=\"axp-weather-forecast-temps\">\n                  <span class=\"axp-weather-forecast-low\">\n                    {{ temperatureUnit() === '\u00B0C' ? day.minTempC : day.minTempF\n                    }}{{ getTemperatureUnit() | translate: { scope: 'dashboard' } | async }}\n                  </span>\n                  <span class=\"axp-weather-forecast-high\">\n                    {{ temperatureUnit() === '\u00B0C' ? day.maxTempC : day.maxTempF\n                    }}{{ getTemperatureUnit() | translate: { scope: 'dashboard' } | async }}\n                  </span>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Last updated timestamp -->\n      <div class=\"axp-weather-last-updated\">\n        <span>{{ 'weather.last-updated' | translate: { scope: 'dashboard' } | async }}: {{ getLastUpdated() }}</span>\n      </div>\n\n      <!-- Manual refresh button -->\n      <div class=\"axp-weather-refresh-action\">\n        <button\n          class=\"axp-weather-refresh-button\"\n          (click)=\"refreshWeather()\"\n          [attr.aria-label]=\"'weather.refresh' | translate: { scope: 'dashboard' } | async\"\n          [title]=\"'weather.refresh' | translate: { scope: 'dashboard' } | async\"\n        >\n          <i class=\"fa-solid fa-sync-alt\"></i>\n          <span>{{ 'weather.refresh' | translate: { scope: 'dashboard' } | async }}</span>\n        </button>\n      </div>\n    </div>\n  } @else if (!isLoading() && !hasError()) {\n    <!-- No data state (not loading, no error) -->\n    <div class=\"axp-weather-no-data-state\">\n      <i class=\"fa-solid fa-cloud-sun\"></i>\n      <p>{{ 'weather.no-data' | translate: { scope: 'dashboard' } | async }}</p>\n      <button class=\"axp-weather-refresh-button\" (click)=\"refreshWeather()\">\n        <i class=\"fa-solid fa-sync-alt\"></i>\n        <span>{{ 'weather.load-data' | translate: { scope: 'dashboard' } | async }}</span>\n      </button>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;--primary-gradient-start: #2196f3;--primary-gradient-end: #1976d2;--shadow-color: rgba(0, 0, 0, .2);--glass-bg: rgba(255, 255, 255, .15);--glass-border: rgba(255, 255, 255, .2);--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .75);--transition-speed: .3s}.axp-weather-container{width:100%;height:100%;overflow:hidden;position:relative;box-shadow:0 4px 8px rgba(0,0,0,.1);color:#fff;min-height:300px;background-color:#2c3e50}.axp-weather-loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(44,62,80,.85);display:flex;justify-content:center;align-items:center;z-index:100}.axp-weather-loading-spinner{text-align:center}.axp-weather-loading-spinner i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-loading-spinner span{display:block;color:#fff;font-size:1rem}.axp-weather-error-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(189,54,47,.85);display:flex;justify-content:center;align-items:center;z-index:100}.axp-weather-error-message{text-align:center;padding:1rem}.axp-weather-error-message i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-error-message span{display:block;color:#fff;font-size:1.1rem;margin-bottom:1rem}.axp-weather-error-message .axp-weather-retry-button{color:#bd362f;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-error-message .axp-weather-retry-button:hover{transform:translateY(-1px)}.axp-weather-no-data-state{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:2rem;text-align:center}.axp-weather-no-data-state i{font-size:3rem;margin-bottom:1rem;color:rgba(255,255,255,.8)}.axp-weather-no-data-state p{margin-bottom:1.5rem;font-size:1.1rem}.axp-weather-no-data-state .axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-no-data-state .axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-background-decorations{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.axp-weather-decoration{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center}.axp-weather-decoration.sunny{background:linear-gradient(135deg,#ff7e00,#f7d358)}.axp-weather-decoration.partlyCloudy{background:linear-gradient(135deg,#7ba2e7,#b4d2f7)}.axp-weather-decoration.cloudy{background:linear-gradient(135deg,#717e8c,#919eab)}.axp-weather-decoration.rain{background:linear-gradient(135deg,#6a8caf,#567a9e)}.axp-weather-decoration.snow{background:linear-gradient(135deg,#99b3cc,#c6d4e1)}.axp-weather-decoration.thunder{background:linear-gradient(135deg,#425777,#2c3e50)}.axp-weather-decoration.mist{background:linear-gradient(135deg,#94a3b8,#cbd5e1)}.axp-weather-gradient-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5))}.axp-weather-inner{position:relative;z-index:2;height:100%;padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between}.axp-weather-location-info{display:flex;align-items:center;margin-bottom:1.5rem}.axp-weather-location-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,.2);border-radius:50%;margin-right:.75rem}.axp-weather-location-icon i{color:#fff}.axp-weather-location-name{margin:0;font-size:1.5rem;font-weight:500;text-shadow:1px 1px 3px rgba(0,0,0,.2);text-transform:capitalize}.axp-weather-current-weather{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap}.axp-weather-condition{display:flex;flex-direction:column;align-items:center}.axp-weather-icon-wrapper{position:relative;margin-bottom:.5rem}.axp-weather-icon{position:relative;z-index:2}.axp-weather-icon i{font-size:2.75rem;filter:drop-shadow(0 0 8px rgba(0,0,0,.3))}.axp-weather-icon-glow{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);width:45px;height:45px;border-radius:50%;filter:blur(15px);opacity:.75}.axp-weather-condition-name{font-size:1.1rem;text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.axp-weather-temperature{display:flex;align-items:flex-start;text-shadow:1px 1px 3px rgba(0,0,0,.3)}.axp-weather-temperature-value{font-size:3.5rem;font-weight:500;line-height:1}.axp-weather-temperature-unit{font-size:1.5rem;margin-top:.25rem}.axp-weather-details{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:1rem;padding:1rem;background-color:rgba(0,0,0,.15);border-radius:8px}.axp-weather-detail-item{display:flex;align-items:center;flex:1;min-width:120px}.axp-weather-detail-icon{width:40px;height:40px;border-radius:50%;background-color:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin-right:.75rem}.axp-weather-detail-icon i{font-size:1.25rem}.axp-weather-detail-info{display:flex;padding-inline:.25rem;flex-direction:column}.axp-weather-detail-label{font-size:.875rem;color:rgba(255,255,255,.8);margin-bottom:.25rem}.axp-weather-detail-value{font-size:1.125rem;font-weight:500}.axp-weather-forecast{margin-bottom:.5rem;background-color:rgba(0,0,0,.15);border-radius:8px;padding:1rem}.axp-weather-forecast-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.axp-weather-forecast-title{margin:0;font-size:1.125rem;font-weight:500;display:flex;align-items:center}.axp-weather-forecast-title i{margin-right:.5rem;opacity:.8}.axp-weather-scroll-indicator{color:rgba(255,255,255,.6)}.axp-weather-forecast-items{display:flex;overflow-x:auto;gap:.75rem;padding-bottom:.5rem}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.3);border-radius:4px}.axp-weather-forecast-items::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:4px}.axp-weather-forecast-day{min-width:90px;display:flex;flex-direction:column;align-items:center;padding:.75rem .5rem;background-color:rgba(255,255,255,.1);border-radius:6px;transition:all .3s ease}.axp-weather-forecast-day:hover{background-color:rgba(255,255,255,.15);transform:translateY(-2px)}.axp-weather-forecast-day-name{font-size:.875rem;margin-bottom:.5rem;font-weight:500}.axp-weather-forecast-icon{font-size:1.5rem;margin-bottom:.5rem}.axp-weather-forecast-icon i{filter:drop-shadow(0 0 5px rgba(0,0,0,.2))}.axp-weather-forecast-temps{display:flex;flex-direction:row;gap:.75rem;align-items:center;font-size:.775rem}.axp-weather-last-updated{text-align:center;font-size:.75rem;opacity:.7;margin-bottom:.5rem}.axp-weather-refresh-action{text-align:center}.axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:.875rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-refresh-button i{font-size:.875rem}@media (max-width: 576px){.axp-weather-inner{padding:.8rem;gap:.4rem}.axp-weather-location-name{font-size:1.1rem;padding-inline:.25rem}.axp-weather-temperature{font-size:2.5rem}.axp-weather-temperature-unit{font-size:1.1rem}.axp-weather-weather-details{flex-direction:column;gap:.5rem}.axp-weather-forecast-items{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.5rem;margin:0 -.4rem;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;mask-image:linear-gradient(to right,#000 95%,rgba(0,0,0,0));-webkit-mask-image:linear-gradient(to right,rgb(0,0,0) 95%,rgba(0,0,0,0))}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.2);border-radius:4px}.axp-weather-forecast-day{min-width:60px;flex:0 0 auto;padding:.4rem .6rem}.axp-weather-forecast-day-name{font-size:.7rem}.axp-weather-forecast-icon{padding:.3rem;height:1.6rem}.axp-weather-forecast-temps{font-size:.7rem}.axp-weather-scroll-indicator{display:block}}:host-context(.theme-dark){--glass-bg: rgba(0, 0, 0, .3);--glass-border: rgba(255, 255, 255, .1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: HttpClientModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2$3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPWeatherWidgetViewComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, AXDateTimeModule, AXFormatModule, HttpClientModule], providers: [
+            args: [{ standalone: true, imports: [CommonModule, AXDateTimeModule, AXFormatModule, HttpClientModule, AXTranslationModule], providers: [
                         {
                             provide: AXPWeatherApiAbstract,
                             useClass: AXPWeatherApiService,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Weather Widget Component Template -->\n<div class=\"axp-weather-container\" #containerElement>\n  <!-- Loading indicator -->\n  @if (isLoading()) {\n  <div class=\"axp-weather-loading-overlay\">\n    <div class=\"axp-weather-loading-spinner\">\n      <i class=\"fa-solid fa-spinner fa-spin\"></i>\n      <span>Loading weather data...</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() }}</span>\n      <button class=\"axp-weather-retry-button\" (click)=\"refreshWeather()\">\n        <i class=\"fa-solid fa-sync-alt\"></i>\n        <span>Retry</span>\n      </button>\n    </div>\n  </div>\n  }\n\n  <!-- Weather content - only show when we have data -->\n  @if (weatherData()) {\n  <!-- Background decorations based on weather condition -->\n  <div class=\"axp-weather-background-decorations\">\n    <div class=\"axp-weather-decoration\" [ngClass]=\"weatherData()?.current?.condition?.toLowerCase()\"></div>\n    <div class=\"axp-weather-gradient-overlay\"></div>\n  </div>\n\n  <div class=\"axp-weather-inner\">\n    <!-- Location information section -->\n    <div class=\"axp-weather-location-info\">\n      <div class=\"axp-weather-location-icon\">\n        <i class=\"fa-solid fa-location-dot\"></i>\n      </div>\n      <div class=\"axp-weather-location-text\">\n        <h2 class=\"axp-weather-location-name\">{{ city() }}</h2>\n      </div>\n    </div>\n\n    <!-- Current weather conditions section -->\n    <div class=\"axp-weather-current-weather\">\n      <!-- Weather icon and condition name -->\n      @if (showCurrentCondition()) {\n      <div class=\"axp-weather-condition\">\n        <div class=\"axp-weather-icon-wrapper\">\n          <div class=\"axp-weather-icon\">\n            <i\n              [class]=\"getConditionIcon(weatherData()?.current?.condition || '')\"\n              [style.color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n            ></i>\n          </div>\n          <div\n            class=\"axp-weather-icon-glow\"\n            [style.background-color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n          ></div>\n        </div>\n        <div class=\"axp-weather-condition-name\">{{ getCurrentCondition() }}</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\">{{ temperatureUnit() }}</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\">Humidity</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\">Wind</div>\n          <div class=\"axp-weather-detail-value\">{{ getWindSpeed() }} {{ windSpeedUnit() }}</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>Forecast</span>\n        </h3>\n        <!-- <div class=\"axp-weather-scroll-indicator\">\n          <i class=\"fa-solid fa-chevron-right\"></i>\n        </div> -->\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>Loading forecast...</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\">{{ day.day }}</div>\n          <div class=\"axp-weather-forecast-icon\" title=\"{{ getConditionName(day.condition) }}\">\n            <i [class]=\"getConditionIcon(day.condition)\" [style.color]=\"getConditionColor(day.condition)\"></i>\n          </div>\n          <div class=\"axp-weather-forecast-temps\">\n            <span class=\"axp-weather-forecast-low\">\n              {{ temperatureUnit() === '\u00B0C' ? day.minTempC : day.minTempF }}\u00B0\n            </span>\n            <span class=\"axp-weather-forecast-high\">\n              {{ temperatureUnit() === '\u00B0C' ? day.maxTempC : day.maxTempF }}\u00B0\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>Last updated: {{ 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]=\"'Refresh weather data'\"\n        title=\"Refresh weather data\"\n      >\n        <i class=\"fa-solid fa-sync-alt\"></i>\n        <span>Refresh</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>No weather data available</p>\n    <button class=\"axp-weather-refresh-button\" (click)=\"refreshWeather()\">\n      <i class=\"fa-solid fa-sync-alt\"></i>\n      <span>Load Data</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%;border-radius:8px;overflow:hidden;position:relative;box-shadow:0 4px 8px rgba(0,0,0,.1);color:#fff;min-height:300px;background-color:#2c3e50}.axp-weather-loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(44,62,80,.85);display:flex;justify-content:center;align-items:center;z-index:100}.axp-weather-loading-spinner{text-align:center}.axp-weather-loading-spinner i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-loading-spinner span{display:block;color:#fff;font-size:1rem}.axp-weather-error-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(189,54,47,.85);display:flex;justify-content:center;align-items:center;z-index:100}.axp-weather-error-message{text-align:center;padding:1rem}.axp-weather-error-message i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-error-message span{display:block;color:#fff;font-size:1.1rem;margin-bottom:1rem}.axp-weather-error-message .axp-weather-retry-button{color:#bd362f;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-error-message .axp-weather-retry-button:hover{transform:translateY(-1px)}.axp-weather-no-data-state{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:2rem;text-align:center}.axp-weather-no-data-state i{font-size:3rem;margin-bottom:1rem;color:rgba(255,255,255,.8)}.axp-weather-no-data-state p{margin-bottom:1.5rem;font-size:1.1rem}.axp-weather-no-data-state .axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-no-data-state .axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-background-decorations{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.axp-weather-decoration{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center}.axp-weather-decoration.sunny{background:linear-gradient(135deg,#ff7e00,#f7d358)}.axp-weather-decoration.partlyCloudy{background:linear-gradient(135deg,#7ba2e7,#b4d2f7)}.axp-weather-decoration.cloudy{background:linear-gradient(135deg,#717e8c,#919eab)}.axp-weather-decoration.rain{background:linear-gradient(135deg,#6a8caf,#567a9e)}.axp-weather-decoration.snow{background:linear-gradient(135deg,#99b3cc,#c6d4e1)}.axp-weather-decoration.thunder{background:linear-gradient(135deg,#425777,#2c3e50)}.axp-weather-decoration.mist{background:linear-gradient(135deg,#94a3b8,#cbd5e1)}.axp-weather-gradient-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5))}.axp-weather-inner{position:relative;z-index:2;height:100%;padding:1.5rem;display:flex;flex-direction:column}.axp-weather-location-info{display:flex;align-items:center;margin-bottom:1.5rem}.axp-weather-location-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,.2);border-radius:50%;margin-right:.75rem}.axp-weather-location-icon i{color:#fff}.axp-weather-location-name{margin:0;font-size:1.5rem;font-weight:500;text-shadow:1px 1px 3px rgba(0,0,0,.2);text-transform:capitalize}.axp-weather-current-weather{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap}.axp-weather-condition{display:flex;flex-direction:column;align-items:center}.axp-weather-icon-wrapper{position:relative;margin-bottom:.5rem}.axp-weather-icon{position:relative;z-index:2}.axp-weather-icon i{font-size:2.75rem;filter:drop-shadow(0 0 8px rgba(0,0,0,.3))}.axp-weather-icon-glow{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);width:45px;height:45px;border-radius:50%;filter:blur(15px);opacity:.75}.axp-weather-condition-name{font-size:1.1rem;text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.axp-weather-temperature{display:flex;align-items:flex-start;text-shadow:1px 1px 3px rgba(0,0,0,.3)}.axp-weather-temperature-value{font-size:3.5rem;font-weight:500;line-height:1}.axp-weather-temperature-unit{font-size:1.5rem;margin-top:.25rem}.axp-weather-details{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:1.5rem;padding:1rem;background-color:rgba(0,0,0,.15);border-radius:8px}.axp-weather-detail-item{display:flex;align-items:center;flex:1;min-width:120px}.axp-weather-detail-icon{width:40px;height:40px;border-radius:50%;background-color:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin-right:.75rem}.axp-weather-detail-icon i{font-size:1.25rem}.axp-weather-detail-info{display:flex;flex-direction:column}.axp-weather-detail-label{font-size:.875rem;color:rgba(255,255,255,.8);margin-bottom:.25rem}.axp-weather-detail-value{font-size:1.125rem;font-weight:500}.axp-weather-forecast{margin-top:auto;margin-bottom:1rem;background-color:rgba(0,0,0,.15);border-radius:8px;padding:1rem}.axp-weather-forecast-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.axp-weather-forecast-title{margin:0;font-size:1.125rem;font-weight:500;display:flex;align-items:center}.axp-weather-forecast-title i{margin-right:.5rem;opacity:.8}.axp-weather-scroll-indicator{color:rgba(255,255,255,.6)}.axp-weather-forecast-items{display:flex;overflow-x:auto;gap:.75rem;padding-bottom:.5rem}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.3);border-radius:4px}.axp-weather-forecast-items::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:4px}.axp-weather-forecast-day{min-width:80px;display:flex;flex-direction:column;align-items:center;padding:.75rem .5rem;background-color:rgba(255,255,255,.1);border-radius:6px;transition:all .3s ease}.axp-weather-forecast-day:hover{background-color:rgba(255,255,255,.15);transform:translateY(-2px)}.axp-weather-forecast-day-name{font-size:.875rem;margin-bottom:.5rem;font-weight:500}.axp-weather-forecast-icon{font-size:1.5rem;margin-bottom:.5rem}.axp-weather-forecast-icon i{filter:drop-shadow(0 0 5px rgba(0,0,0,.2))}.axp-weather-forecast-temps{display:flex;flex-direction:row;gap:.75rem;align-items:center;font-size:.875rem}.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}.axp-weather-temperature{font-size:2.5rem}.axp-weather-temperature-unit{font-size:1.1rem}.axp-weather-weather-details{flex-direction:column;gap:.5rem}.axp-weather-forecast-items{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.5rem;margin:0 -.4rem;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;mask-image:linear-gradient(to right,#000 95%,rgba(0,0,0,0));-webkit-mask-image:linear-gradient(to right,rgb(0,0,0) 95%,rgba(0,0,0,0))}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.2);border-radius:4px}.axp-weather-forecast-day{min-width:60px;flex:0 0 auto;padding:.4rem .6rem}.axp-weather-forecast-day-name{font-size:.7rem}.axp-weather-forecast-icon{padding:.3rem;height:1.6rem}.axp-weather-forecast-temps{font-size:.7rem}.axp-weather-scroll-indicator{display:block}}:host-context(.theme-dark){--glass-bg: rgba(0, 0, 0, .3);--glass-border: rgba(255, 255, 255, .1)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Weather Widget Component Template -->\n<div class=\"axp-weather-container\" #containerElement>\n  <!-- Loading indicator -->\n  @if (isLoading()) {\n    <div class=\"axp-weather-loading-overlay\">\n      <div class=\"axp-weather-loading-spinner\">\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        <span>{{ 'weather.loading' | translate: { scope: 'dashboard' } | async }}</span>\n      </div>\n    </div>\n  }\n\n  <!-- Error message -->\n  @if (hasError()) {\n    <div class=\"axp-weather-error-overlay\">\n      <div class=\"axp-weather-error-message\">\n        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n        <span>{{ errorMessage() | translate: { scope: 'dashboard' } | async }}</span>\n        <button class=\"axp-weather-retry-button\" (click)=\"refreshWeather()\">\n          <i class=\"fa-solid fa-sync-alt\"></i>\n          <span>{{ 'weather.retry' | translate: { scope: 'dashboard' } | async }}</span>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Weather content - only show when we have data -->\n  @if (weatherData()) {\n    <!-- Background decorations based on weather condition -->\n    <div class=\"axp-weather-background-decorations\">\n      <div class=\"axp-weather-decoration\" [ngClass]=\"weatherData()?.current?.condition?.toLowerCase()\"></div>\n      <div class=\"axp-weather-gradient-overlay\"></div>\n    </div>\n\n    <div class=\"axp-weather-inner\">\n      <!-- Location information section -->\n      <div class=\"axp-weather-location-info\">\n        <div class=\"axp-weather-location-icon\">\n          <i class=\"fa-solid fa-location-dot\"></i>\n        </div>\n        <div class=\"axp-weather-location-text\">\n          <h2 class=\"axp-weather-location-name\">{{ city() }}</h2>\n        </div>\n      </div>\n\n      <!-- Current weather conditions section -->\n      <div class=\"axp-weather-current-weather\">\n        <!-- Weather icon and condition name -->\n        @if (showCurrentCondition()) {\n          <div class=\"axp-weather-condition\">\n            <div class=\"axp-weather-icon-wrapper\">\n              <div class=\"axp-weather-icon\">\n                <i\n                  [class]=\"getConditionIcon(weatherData()?.current?.condition || '')\"\n                  [style.color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n                ></i>\n              </div>\n              <div\n                class=\"axp-weather-icon-glow\"\n                [style.background-color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n              ></div>\n            </div>\n            <div class=\"axp-weather-condition-name\">\n              {{ getCurrentCondition() | translate: { scope: 'dashboard' } | async }}\n            </div>\n          </div>\n        }\n\n        <!-- Temperature display -->\n        @if (showTemperature()) {\n          <div class=\"axp-weather-temperature\">\n            <span class=\"axp-weather-temperature-value\">{{ getCurrentTemperature() }}</span>\n            <span class=\"axp-weather-temperature-unit\">{{\n              getTemperatureUnit() | translate: { scope: 'dashboard' } | async\n            }}</span>\n          </div>\n        }\n      </div>\n\n      <!-- Weather details section (humidity and wind) -->\n      @if (showHumidity() || showWind()) {\n        <div class=\"axp-weather-details\">\n          <!-- Humidity information -->\n          @if (showHumidity()) {\n            <div class=\"axp-weather-detail-item\">\n              <div class=\"axp-weather-detail-icon\">\n                <i class=\"fa-solid fa-droplet\"></i>\n              </div>\n              <div class=\"axp-weather-detail-info\">\n                <div class=\"axp-weather-detail-label\">\n                  {{ 'weather.humidity' | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div class=\"axp-weather-detail-value\">{{ getHumidity() }}%</div>\n              </div>\n            </div>\n          }\n\n          <!-- Wind speed information -->\n          @if (showWind()) {\n            <div class=\"axp-weather-detail-item\">\n              <div class=\"axp-weather-detail-icon\">\n                <i class=\"fa-solid fa-wind\"></i>\n              </div>\n              <div class=\"axp-weather-detail-info\">\n                <div class=\"axp-weather-detail-label\">\n                  {{ 'weather.wind' | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div class=\"axp-weather-detail-value\">\n                  {{ getWindSpeed() }} {{ getWindSpeedUnit() | translate: { scope: 'dashboard' } | async }}\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      <!-- Weather forecast section -->\n      @if (showForecast() && weatherData()?.forecast) {\n        <div class=\"axp-weather-forecast\">\n          <div class=\"axp-weather-forecast-header\">\n            <h3 class=\"axp-weather-forecast-title\">\n              <i class=\"fa-solid fa-calendar-days\"></i>\n              <span class=\"ax-px-1\">{{ 'weather.forecast' | translate: { scope: 'dashboard' } | async }}</span>\n            </h3>\n          </div>\n          <!-- Loading indicator for forecast -->\n          <!-- @if (isForecastLoading()) {\n            <div class=\"axp-weather-forecast-loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n              <span>{{ 'weather.loading-forecast' | translate: { scope: 'dashboard' } | async }}</span>\n            </div>\n          } -->\n          <!-- Scrollable forecast days display -->\n          <div class=\"axp-weather-forecast-items\">\n            @for (day of displayedForecast(); track day.day) {\n              <div class=\"axp-weather-forecast-day\">\n                <div class=\"axp-weather-forecast-day-name\">\n                  {{ getDayName(parseDate(day.date)) | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div\n                  class=\"axp-weather-forecast-icon\"\n                  [title]=\"getConditionName(day.condition) | translate: { scope: 'dashboard' } | async\"\n                >\n                  <i [class]=\"getConditionIcon(day.condition)\" [style.color]=\"getConditionColor(day.condition)\"></i>\n                </div>\n                <div class=\"axp-weather-forecast-temps\">\n                  <span class=\"axp-weather-forecast-low\">\n                    {{ temperatureUnit() === '\u00B0C' ? day.minTempC : day.minTempF\n                    }}{{ getTemperatureUnit() | translate: { scope: 'dashboard' } | async }}\n                  </span>\n                  <span class=\"axp-weather-forecast-high\">\n                    {{ temperatureUnit() === '\u00B0C' ? day.maxTempC : day.maxTempF\n                    }}{{ getTemperatureUnit() | translate: { scope: 'dashboard' } | async }}\n                  </span>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Last updated timestamp -->\n      <div class=\"axp-weather-last-updated\">\n        <span>{{ 'weather.last-updated' | translate: { scope: 'dashboard' } | async }}: {{ getLastUpdated() }}</span>\n      </div>\n\n      <!-- Manual refresh button -->\n      <div class=\"axp-weather-refresh-action\">\n        <button\n          class=\"axp-weather-refresh-button\"\n          (click)=\"refreshWeather()\"\n          [attr.aria-label]=\"'weather.refresh' | translate: { scope: 'dashboard' } | async\"\n          [title]=\"'weather.refresh' | translate: { scope: 'dashboard' } | async\"\n        >\n          <i class=\"fa-solid fa-sync-alt\"></i>\n          <span>{{ 'weather.refresh' | translate: { scope: 'dashboard' } | async }}</span>\n        </button>\n      </div>\n    </div>\n  } @else if (!isLoading() && !hasError()) {\n    <!-- No data state (not loading, no error) -->\n    <div class=\"axp-weather-no-data-state\">\n      <i class=\"fa-solid fa-cloud-sun\"></i>\n      <p>{{ 'weather.no-data' | translate: { scope: 'dashboard' } | async }}</p>\n      <button class=\"axp-weather-refresh-button\" (click)=\"refreshWeather()\">\n        <i class=\"fa-solid fa-sync-alt\"></i>\n        <span>{{ 'weather.load-data' | translate: { scope: 'dashboard' } | async }}</span>\n      </button>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;--primary-gradient-start: #2196f3;--primary-gradient-end: #1976d2;--shadow-color: rgba(0, 0, 0, .2);--glass-bg: rgba(255, 255, 255, .15);--glass-border: rgba(255, 255, 255, .2);--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .75);--transition-speed: .3s}.axp-weather-container{width:100%;height:100%;overflow:hidden;position:relative;box-shadow:0 4px 8px rgba(0,0,0,.1);color:#fff;min-height:300px;background-color:#2c3e50}.axp-weather-loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(44,62,80,.85);display:flex;justify-content:center;align-items:center;z-index:100}.axp-weather-loading-spinner{text-align:center}.axp-weather-loading-spinner i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-loading-spinner span{display:block;color:#fff;font-size:1rem}.axp-weather-error-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(189,54,47,.85);display:flex;justify-content:center;align-items:center;z-index:100}.axp-weather-error-message{text-align:center;padding:1rem}.axp-weather-error-message i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-error-message span{display:block;color:#fff;font-size:1.1rem;margin-bottom:1rem}.axp-weather-error-message .axp-weather-retry-button{color:#bd362f;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-error-message .axp-weather-retry-button:hover{transform:translateY(-1px)}.axp-weather-no-data-state{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:2rem;text-align:center}.axp-weather-no-data-state i{font-size:3rem;margin-bottom:1rem;color:rgba(255,255,255,.8)}.axp-weather-no-data-state p{margin-bottom:1.5rem;font-size:1.1rem}.axp-weather-no-data-state .axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-no-data-state .axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-background-decorations{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.axp-weather-decoration{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center}.axp-weather-decoration.sunny{background:linear-gradient(135deg,#ff7e00,#f7d358)}.axp-weather-decoration.partlyCloudy{background:linear-gradient(135deg,#7ba2e7,#b4d2f7)}.axp-weather-decoration.cloudy{background:linear-gradient(135deg,#717e8c,#919eab)}.axp-weather-decoration.rain{background:linear-gradient(135deg,#6a8caf,#567a9e)}.axp-weather-decoration.snow{background:linear-gradient(135deg,#99b3cc,#c6d4e1)}.axp-weather-decoration.thunder{background:linear-gradient(135deg,#425777,#2c3e50)}.axp-weather-decoration.mist{background:linear-gradient(135deg,#94a3b8,#cbd5e1)}.axp-weather-gradient-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5))}.axp-weather-inner{position:relative;z-index:2;height:100%;padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between}.axp-weather-location-info{display:flex;align-items:center;margin-bottom:1.5rem}.axp-weather-location-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,.2);border-radius:50%;margin-right:.75rem}.axp-weather-location-icon i{color:#fff}.axp-weather-location-name{margin:0;font-size:1.5rem;font-weight:500;text-shadow:1px 1px 3px rgba(0,0,0,.2);text-transform:capitalize}.axp-weather-current-weather{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap}.axp-weather-condition{display:flex;flex-direction:column;align-items:center}.axp-weather-icon-wrapper{position:relative;margin-bottom:.5rem}.axp-weather-icon{position:relative;z-index:2}.axp-weather-icon i{font-size:2.75rem;filter:drop-shadow(0 0 8px rgba(0,0,0,.3))}.axp-weather-icon-glow{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);width:45px;height:45px;border-radius:50%;filter:blur(15px);opacity:.75}.axp-weather-condition-name{font-size:1.1rem;text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.axp-weather-temperature{display:flex;align-items:flex-start;text-shadow:1px 1px 3px rgba(0,0,0,.3)}.axp-weather-temperature-value{font-size:3.5rem;font-weight:500;line-height:1}.axp-weather-temperature-unit{font-size:1.5rem;margin-top:.25rem}.axp-weather-details{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:1rem;padding:1rem;background-color:rgba(0,0,0,.15);border-radius:8px}.axp-weather-detail-item{display:flex;align-items:center;flex:1;min-width:120px}.axp-weather-detail-icon{width:40px;height:40px;border-radius:50%;background-color:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin-right:.75rem}.axp-weather-detail-icon i{font-size:1.25rem}.axp-weather-detail-info{display:flex;padding-inline:.25rem;flex-direction:column}.axp-weather-detail-label{font-size:.875rem;color:rgba(255,255,255,.8);margin-bottom:.25rem}.axp-weather-detail-value{font-size:1.125rem;font-weight:500}.axp-weather-forecast{margin-bottom:.5rem;background-color:rgba(0,0,0,.15);border-radius:8px;padding:1rem}.axp-weather-forecast-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.axp-weather-forecast-title{margin:0;font-size:1.125rem;font-weight:500;display:flex;align-items:center}.axp-weather-forecast-title i{margin-right:.5rem;opacity:.8}.axp-weather-scroll-indicator{color:rgba(255,255,255,.6)}.axp-weather-forecast-items{display:flex;overflow-x:auto;gap:.75rem;padding-bottom:.5rem}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.3);border-radius:4px}.axp-weather-forecast-items::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:4px}.axp-weather-forecast-day{min-width:90px;display:flex;flex-direction:column;align-items:center;padding:.75rem .5rem;background-color:rgba(255,255,255,.1);border-radius:6px;transition:all .3s ease}.axp-weather-forecast-day:hover{background-color:rgba(255,255,255,.15);transform:translateY(-2px)}.axp-weather-forecast-day-name{font-size:.875rem;margin-bottom:.5rem;font-weight:500}.axp-weather-forecast-icon{font-size:1.5rem;margin-bottom:.5rem}.axp-weather-forecast-icon i{filter:drop-shadow(0 0 5px rgba(0,0,0,.2))}.axp-weather-forecast-temps{display:flex;flex-direction:row;gap:.75rem;align-items:center;font-size:.775rem}.axp-weather-last-updated{text-align:center;font-size:.75rem;opacity:.7;margin-bottom:.5rem}.axp-weather-refresh-action{text-align:center}.axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:.875rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-refresh-button i{font-size:.875rem}@media (max-width: 576px){.axp-weather-inner{padding:.8rem;gap:.4rem}.axp-weather-location-name{font-size:1.1rem;padding-inline:.25rem}.axp-weather-temperature{font-size:2.5rem}.axp-weather-temperature-unit{font-size:1.1rem}.axp-weather-weather-details{flex-direction:column;gap:.5rem}.axp-weather-forecast-items{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.5rem;margin:0 -.4rem;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;mask-image:linear-gradient(to right,#000 95%,rgba(0,0,0,0));-webkit-mask-image:linear-gradient(to right,rgb(0,0,0) 95%,rgba(0,0,0,0))}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.2);border-radius:4px}.axp-weather-forecast-day{min-width:60px;flex:0 0 auto;padding:.4rem .6rem}.axp-weather-forecast-day-name{font-size:.7rem}.axp-weather-forecast-icon{padding:.3rem;height:1.6rem}.axp-weather-forecast-temps{font-size:.7rem}.axp-weather-scroll-indicator{display:block}}:host-context(.theme-dark){--glass-bg: rgba(0, 0, 0, .3);--glass-border: rgba(255, 255, 255, .1)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
 var weatherWidget_component = /*#__PURE__*/Object.freeze({
@@ -3264,7 +3317,7 @@ const AXPWeatherWidget = {
         /* Location Settings */
         {
             name: 'city',
-            title: 'City',
+            title: '@dashboard:widgets.weather.city',
             group: AXP_DATA_PROPERTY_GROUP,
             schema: {
                 defaultValue: 'New York',
@@ -3340,7 +3393,7 @@ const AXPWeatherWidget = {
         // },
         {
             name: 'showHumidity',
-            title: 'Show Humidity',
+            title: '@dashboard:widgets.weather.show-humidity',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -3355,7 +3408,7 @@ const AXPWeatherWidget = {
         },
         {
             name: 'showWind',
-            title: 'Show Wind Speed',
+            title: '@dashboard:widgets.weather.show-wind',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -3370,7 +3423,7 @@ const AXPWeatherWidget = {
         },
         {
             name: 'showForecast',
-            title: 'Show Forecast',
+            title: '@dashboard:widgets.weather.show-forecast',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -3385,7 +3438,7 @@ const AXPWeatherWidget = {
         },
         {
             name: 'forecastDays',
-            title: 'Forecast Days',
+            title: '@dashboard:widgets.weather.forecast-days',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 5,
@@ -3406,7 +3459,7 @@ const AXPWeatherWidget = {
         /* Units Settings */
         {
             name: 'temperatureUnit',
-            title: 'Temperature Unit',
+            title: '@dashboard:widgets.weather.temperature-unit',
             group: AXP_DATA_PROPERTY_GROUP,
             schema: {
                 defaultValue: '°C',
@@ -3424,7 +3477,7 @@ const AXPWeatherWidget = {
         },
         {
             name: 'windSpeedUnit',
-            title: 'Wind Speed Unit',
+            title: '@dashboard:widgets.weather.wind-speed-unit',
             group: AXP_DATA_PROPERTY_GROUP,
             schema: {
                 defaultValue: 'km/h',
@@ -3443,7 +3496,7 @@ const AXPWeatherWidget = {
         /* Refresh Settings */
         {
             name: 'autoRefresh',
-            title: 'Auto Refresh',
+            title: '@dashboard:widgets.weather.auto-refresh',
             group: AXP_BEHAVIOR_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -3458,7 +3511,7 @@ const AXPWeatherWidget = {
         },
         {
             name: 'refreshInterval',
-            title: 'Refresh Interval (minutes)',
+            title: '@dashboard:widgets.weather.refresh-interval',
             group: AXP_BEHAVIOR_PROPERTY_GROUP,
             schema: {
                 defaultValue: 15,
@@ -3505,7 +3558,7 @@ class AXPDashboardShortcutWidgetViewComponent extends AXPLayoutWidgetComponent {
         super.ngOnInit();
         if (!this.color()) {
             this.setOptions({
-                color: AXPDataGenerator.color()
+                color: AXPDataGenerator.color(),
             });
         }
     }
@@ -3531,8 +3584,8 @@ class AXPDashboardShortcutWidgetViewComponent extends AXPLayoutWidgetComponent {
                         title: result.title,
                         description: result.description,
                         icon: result.icon,
-                        command: result.command
-                    }
+                        command: result.command,
+                    },
                 });
             }
         }
@@ -3558,56 +3611,68 @@ class AXPDashboardShortcutWidgetViewComponent extends AXPLayoutWidgetComponent {
     }
     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: `
-    @if(item()) {
-      <div 
+    @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 "
-        (click)="executeCommand()">
+        (click)="executeCommand()"
+      >
         <div class="ax-absolute ax-inset-0 ax-bg-black/0 hover:ax-bg-black/10 ax-transition-opacity"></div>
         <i [class]="item().icon + ' ax-text-3xl'"></i>
         <span class="ax-text-xl ax-font-semibold">{{ item().title | translate | async }}</span>
-        @if(item().description) {
-          <span class="ax-text-sm ax-opacity-90 ax-text-center ax-px-2">{{ item().description! | translate | async }}</span>
+        @if (item().description) {
+          <span class="ax-text-sm ax-opacity-90 ax-text-center ax-px-2">{{
+            item().description! | translate | async
+          }}</span>
         }
       </div>
     } @else {
-      <div 
-        (click)="setCommand()" 
-        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">
+      <div
+        (click)="setCommand()"
+        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"
+      >
         <div class="ax-absolute ax-inset-0 ax-bg-black/0 hover:ax-bg-black/5 ax-transition-opacity"></div>
         <i class="fa-light fa-plus ax-text-3xl"></i>
-        <span class="ax-text-xl ax-font-semibold">Add Shortcut</span>
+        <span class="ax-text-xl ax-font-semibold">{{
+          '@dashboard:widgets.dashboard-shortcut.add-shortcut' | translate | async
+        }}</span>
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.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: i2$3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDashboardShortcutWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    @if(item()) {
-      <div 
+    @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 "
-        (click)="executeCommand()">
+        (click)="executeCommand()"
+      >
         <div class="ax-absolute ax-inset-0 ax-bg-black/0 hover:ax-bg-black/10 ax-transition-opacity"></div>
         <i [class]="item().icon + ' ax-text-3xl'"></i>
         <span class="ax-text-xl ax-font-semibold">{{ item().title | translate | async }}</span>
-        @if(item().description) {
-          <span class="ax-text-sm ax-opacity-90 ax-text-center ax-px-2">{{ item().description! | translate | async }}</span>
+        @if (item().description) {
+          <span class="ax-text-sm ax-opacity-90 ax-text-center ax-px-2">{{
+            item().description! | translate | async
+          }}</span>
         }
       </div>
     } @else {
-      <div 
-        (click)="setCommand()" 
-        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">
+      <div
+        (click)="setCommand()"
+        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"
+      >
         <div class="ax-absolute ax-inset-0 ax-bg-black/0 hover:ax-bg-black/5 ax-transition-opacity"></div>
         <i class="fa-light fa-plus ax-text-3xl"></i>
-        <span class="ax-text-xl ax-font-semibold">Add Shortcut</span>
+        <span class="ax-text-xl ax-font-semibold">{{
+          '@dashboard:widgets.dashboard-shortcut.add-shortcut' | translate | async
+        }}</span>
       </div>
     }
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXTranslationModule]
+                    imports: [CommonModule, AXTranslationModule],
                 }]
         }], propDecorators: { __style: [{
                 type: HostBinding,
@@ -3623,15 +3688,18 @@ var dashboardShortcutWidgetView_component = /*#__PURE__*/Object.freeze({
 });
 
 const AXPDashboardShortcutWidget = {
-    name: "dashboard-shortcut",
-    title: "Shortcut",
+    name: 'dashboard-shortcut',
+    title: 'Shortcut',
     description: 'Quick access to your key features.',
     type: 'view',
     categories: [AXP_WIDGETS_UTILITY_CATEGORY],
     groups: [AXPWidgetGroupEnum.DashboardWidget],
-    icon: "fa-light fa-link",
+    icon: 'fa-light fa-link',
     properties: [
-        AXP_COLOR_PROPERTY
+        {
+            ...AXP_COLOR_PROPERTY,
+            title: '@dashboard:widgets.dashboard-shortcut.color',
+        },
     ],
     meta: {
         dimensions: {
@@ -3647,7 +3715,7 @@ const AXPDashboardShortcutWidget = {
         view: {
             component: () => Promise.resolve().then(function () { return dashboardShortcutWidgetView_component; }).then((c) => c.AXPDashboardShortcutWidgetViewComponent),
         },
-    }
+    },
 };
 
 class AXMMenuProvider {
@@ -3843,6 +3911,7 @@ class AXMDashboardWidgetWrapperComponent {
             });
         });
         this.hasConfiguration = input(true);
+        this.isLocked = input(false);
         this.isDropdownOpen = signal(false);
     }
     #init;
@@ -3863,11 +3932,11 @@ class AXMDashboardWidgetWrapperComponent {
         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 } }, 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  <div\n    class=\"ax-p-[0.6125rem] ax-absolute ax-top-0 ax-end-0 ax-z-[99] ax-invisible group-hover:ax-visible\"\n    [class.!ax-visible]=\"isDropdownOpen()\"\n  >\n    <ax-button class=\"ax-sm\" [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\n              [data]=\"'delete'\"\n              [text]=\"(t('delete', { scope: 'dashboard' }) | async) || 'delete'\"\n              color=\"danger\"\n            >\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  <!-- 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: i6.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", 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  <div\n    class=\"ax-p-[0.6125rem] ax-absolute ax-top-0 ax-end-0 ax-z-[99] ax-invisible group-hover:ax-visible\"\n    [class.!ax-visible]=\"isDropdownOpen()\"\n  >\n    <ax-button class=\"ax-sm\" [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\n              [data]=\"'delete'\"\n              [text]=\"(t('delete', { scope: 'dashboard' }) | async) || 'delete'\"\n              color=\"danger\"\n            >\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  <!-- 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"] }]
+            args: [{ selector: 'axm-dashboard-widget-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXButtonModule, AXDecoratorModule, AXDropdownModule, AXTranslationModule, CommonModule], standalone: true, template: "<section class=\"ax-relative ax-size-full ax-flex ax-flex-col ax-group ax-overflow-hidden\">\n  <!-- Action button - stays absolute -->\n  @if(!isLocked()) {\n  <div\n    class=\"ax-p-[0.6125rem] ax-absolute ax-top-0 ax-end-0 ax-z-[99] ax-invisible group-hover:ax-visible md:group-hover:ax-visible\"\n    [class.!ax-visible]=\"isDropdownOpen()\"\n    (touchstart)=\"isDropdownOpen.set(true)\"\n  >\n    <ax-button class=\"ax-sm ax-main-button\" [look]=\"'blank'\">\n      <ax-prefix>\n        <ax-icon icon=\"fa-light fa-ellipsis-vertical\"></ax-icon>\n      </ax-prefix>\n      <ax-dropdown-panel (onOpened)=\"isDropdownOpen.set(true)\" (onClosed)=\"isDropdownOpen.set(false)\">\n        <ng-container *translate=\"let t\">\n          <ax-button-item-list (onItemClick)=\"handleOnItemClick($event)\">\n            @if(hasConfiguration()){\n            <ax-button-item\n              [data]=\"'configuration'\"\n              [text]=\"(t('configuration', { scope: 'dashboard' }) | async) || 'configuration'\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-divider></ax-divider>\n            }\n            <ax-button-item [data]=\"'delete'\" [text]=\"(t('delete') | async) || 'delete'\" color=\"danger\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          </ax-button-item-list>\n        </ng-container>\n      </ax-dropdown-panel>\n    </ax-button>\n  </div>\n  }\n\n  <!-- Title section -->\n  @if(title()) {\n  <div class=\"ax-ps-5 ax-pe-8 ax-py-3 ax-border-b\">\n    <h3 class=\"ax-text-start ax-text-lg ax-font-medium ax-truncate\">{{title()}}</h3>\n  </div>\n  }\n\n  <!-- Content section -->\n  <div class=\"ax-overflow-auto ax-h-full\">\n    <ng-content></ng-content>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
         }] });
 
 const path = 'home:dashboard:';
@@ -3955,14 +4024,16 @@ class AXMAddDashboardPopup extends AXBasePageComponent {
           </ax-select-box>
         </div>
 
-        <div class="ax-flex ax-flex-col ax-gap-2 ax-mt-4">
-          <p class="ax-font-semibold">{{ 'disable' | translate: { scope } | async }}</p>
-          <ax-check-box [(ngModel)]="isDisabled" name="isDisabled"></ax-check-box>
-        </div>
+        <div class="ax-grid grid-cols-2 ax-grid-flow-col ax-gap-8 ax-mt-4">
+          <div class="ax-flex ax-flex-row ax-items-center ax-gap-2">
+            <p class="ax-font-semibold">{{ 'disable' | translate: { scope } | async }}</p>
+            <ax-switch [(ngModel)]="isDisabled" name="isDisabled"></ax-switch>
+          </div>
 
-        <div class="ax-flex ax-flex-col ax-gap-2 ax-mt-4">
-          <p class="ax-font-semibold">{{ 'lock' | translate: { scope } | async }}</p>
-          <ax-check-box [(ngModel)]="isLocked" name="isLocked"></ax-check-box>
+          <div class="ax-flex ax-flex-row ax-items-center ax-gap-2">
+            <p class="ax-font-semibold">{{ 'lock' | translate: { scope } | async }}</p>
+            <ax-switch [(ngModel)]="isLocked" name="isLocked"></ax-switch>
+          </div>
         </div>
       }
     </div>
@@ -3982,7 +4053,7 @@ 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: i6.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: 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"] }] }); }
+  `, 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMAddDashboardPopup, decorators: [{
             type: Component,
@@ -4014,14 +4085,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
           </ax-select-box>
         </div>
 
-        <div class="ax-flex ax-flex-col ax-gap-2 ax-mt-4">
-          <p class="ax-font-semibold">{{ 'disable' | translate: { scope } | async }}</p>
-          <ax-check-box [(ngModel)]="isDisabled" name="isDisabled"></ax-check-box>
-        </div>
+        <div class="ax-grid grid-cols-2 ax-grid-flow-col ax-gap-8 ax-mt-4">
+          <div class="ax-flex ax-flex-row ax-items-center ax-gap-2">
+            <p class="ax-font-semibold">{{ 'disable' | translate: { scope } | async }}</p>
+            <ax-switch [(ngModel)]="isDisabled" name="isDisabled"></ax-switch>
+          </div>
 
-        <div class="ax-flex ax-flex-col ax-gap-2 ax-mt-4">
-          <p class="ax-font-semibold">{{ 'lock' | translate: { scope } | async }}</p>
-          <ax-check-box [(ngModel)]="isLocked" name="isLocked"></ax-check-box>
+          <div class="ax-flex ax-flex-row ax-items-center ax-gap-2">
+            <p class="ax-font-semibold">{{ 'lock' | translate: { scope } | async }}</p>
+            <ax-switch [(ngModel)]="isLocked" name="isLocked"></ax-switch>
+          </div>
         </div>
       }
     </div>
@@ -4051,7 +4124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         CommonModule,
                         AXTranslationModule,
                         AXSelectBoxModule,
-                        AXCheckBoxModule,
+                        AXSwitchModule,
                     ],
                     standalone: true,
                 }]
@@ -4120,6 +4193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 class AXMDashboardPopupService {
     constructor() {
         this.popupService = inject(AXPopupService);
+        this.translateService = inject(AXTranslationService);
     }
     async generateDashboardLayout(data, isAdmin) {
         // Add isAdmin to the data object
@@ -4129,7 +4203,7 @@ class AXMDashboardPopupService {
             size: 'sm',
             draggable: true,
             hasBackdrop: true,
-            title: 'Dashboard Info',
+            title: await this.translateService.translateAsync('dashboard-info', { scope: 'dashboard' }),
             data: dashboardData,
         });
         if (!result.data) {
@@ -4178,7 +4252,7 @@ withState(() => {
         currentDashboardId: null,
         isAdmin: false,
         dashboardsOption: {
-            float: true,
+            float: false,
             cellHeight: 75,
             gap: 5,
             minRow: 9,
@@ -4194,7 +4268,7 @@ withState(() => {
     return state;
 }), 
 // Computed Properties
-withComputed((state, sessionService = inject(AXPSessionService)) => ({
+withComputed((state, sessionService = inject(AXPSessionService), layoutThemeService = inject(AXPLayoutThemeService)) => ({
     currentDashboard: computed(() => {
         return state.dashboards().find((dashboard) => dashboard.id === state.currentDashboardId()) || null;
     }),
@@ -4211,11 +4285,20 @@ withComputed((state, sessionService = inject(AXPSessionService)) => ({
         if (!currentDashboard) {
             return baseOptions;
         }
-        // If admin, no restrictions
-        if (state.isAdmin()) {
+        // Always disable drag and resize on mobile devices
+        if (!layoutThemeService.isDesktopDevice()) {
+            return {
+                ...baseOptions,
+                disableDrag: true,
+                disableResize: true,
+            };
+        }
+        // If the base options already have explicit disableDrag and disableResize values,
+        // preserve those values (these were likely set by toggleLockDashboard)
+        if (baseOptions.disableDrag !== undefined && baseOptions.disableResize !== undefined) {
             return baseOptions;
         }
-        // Check if dashboard is locked
+        // Check if dashboard is locked - locked dashboards always have drag and resize disabled
         if (currentDashboard.locked === true) {
             return {
                 ...baseOptions,
@@ -4223,6 +4306,10 @@ withComputed((state, sessionService = inject(AXPSessionService)) => ({
                 disableResize: true,
             };
         }
+        // If admin, no restrictions unless it's locked (which is checked above)
+        if (state.isAdmin()) {
+            return baseOptions;
+        }
         // Get user role
         const userRole = sessionService.user ? sessionService.user['role'] : undefined;
         // Check if user has role in dashboard
@@ -4264,9 +4351,33 @@ withComputed((state, sessionService = inject(AXPSessionService)) => ({
             return widget.node?.options?.['hasConfiguration'] ?? true;
         };
     }),
+    isWidgetLocked: computed(() => {
+        return (widget) => {
+            const currentDashboard = state.dashboards().find((dashboard) => dashboard.id === state.currentDashboardId());
+            if (!currentDashboard)
+                return false;
+            // If dashboard is locked, widget is locked
+            if (currentDashboard.locked === true) {
+                return true;
+            }
+            // If admin, widget is not locked
+            if (state.isAdmin())
+                return false;
+            // Get user role
+            const userRole = sessionService.user ? sessionService.user['role'] : undefined;
+            // Check if user has role in dashboard
+            const hasRoleIds = currentDashboard.roleIds && Array.isArray(currentDashboard.roleIds) && currentDashboard.roleIds.length > 0;
+            const hasUserRole = userRole && hasRoleIds && currentDashboard.roleIds?.includes(userRole);
+            // If user is not admin, has role in dashboard, and dashboard has scope 'T', widget is locked
+            if (hasUserRole && currentDashboard.scope === 'T') {
+                return true;
+            }
+            return false;
+        };
+    }),
 })), 
 // Methods for State Management
-withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogService = inject(AXDialogService), translationService = inject(AXTranslationService), widgetPickerService = inject(AXPWidgetPickerService), dashboardService = inject(AXMDashboardService), settingService = inject(AXPSettingService), sessionService = inject(AXPSessionService)) => {
+withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogService = inject(AXDialogService), translationService = inject(AXTranslationService), widgetPickerService = inject(AXPWidgetPickerService), dashboardService = inject(AXMDashboardService), settingService = inject(AXPSettingService), sessionService = inject(AXPSessionService), layoutThemeService = inject(AXPLayoutThemeService)) => {
     // Load dashboards from service - runs on init via effect
     effect(() => {
         loadDashboards();
@@ -4521,6 +4632,10 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
         },
         // Handle grid layout changes
         async onGridChange(event) {
+            // Skip any changes on mobile devices
+            if (!layoutThemeService.isDesktopDevice()) {
+                return;
+            }
             if (!store.currentDashboard()) {
                 console.warn('No current dashboard for grid change');
                 return;
@@ -4666,37 +4781,11 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
                 console.error('Error handling widget options change:', error);
             }
         },
-        // Reload dashboards from service
-        async refreshDashboards() {
-            try {
-                patchState(store, { isLoading: true });
-                // Get dashboards from service using query method
-                const result = await dashboardService.query({ skip: 0, take: 100 });
-                const dashboardModels = result.items || [];
-                // Convert dashboard models to AXPDashboardLayout
-                const dashboards = dashboardModels.map(modelToDashboardLayout);
-                // Update allDashboards state
-                patchState(store, {
-                    allDashboards: dashboards,
-                    isLoading: false,
-                });
-                // Re-apply filtering based on current isAdmin state
-                // This will update the dashboards state with filtered results
-                const userId = sessionService.user?.id;
-                const userRole = sessionService.user ? sessionService.user['role'] : undefined;
-                if (userId) {
-                    this.filterDashboardsByScope(store.isAdmin());
-                }
-                else {
-                    // If no user, just show all dashboards
-                    patchState(store, { dashboards });
-                }
-            }
-            catch (error) {
-                console.error('Error refreshing dashboards:', error);
-                patchState(store, { isLoading: false });
-            }
+        // Handle setting admin state
+        setIsAdmin(isAdmin) {
+            patchState(store, { isAdmin });
         },
+        // Filter dashboards by scope
         filterDashboardsByScope(isAdmin) {
             // Get all dashboards from the stored allDashboards array
             const allDashboards = store.allDashboards();
@@ -4737,10 +4826,6 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
                 this.setCurrentDashboard(filteredDashboards[0].id);
             }
         },
-        // Add method to set isAdmin state
-        setIsAdmin(isAdmin) {
-            patchState(store, { isAdmin });
-        },
         // Toggle lock state for the current dashboard
         async toggleLockDashboard() {
             const currentDashboard = store.currentDashboard();
@@ -4749,6 +4834,18 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
                 return;
             }
             try {
+                // Check permission to toggle lock
+                const isAdmin = store.isAdmin();
+                const userId = sessionService.user?.id;
+                // Determine if user can toggle lock based on the rules:
+                // 1. If isAdmin is false, user can only toggle their own user-level dashboards
+                // 2. If isAdmin is true, user can only toggle tenant-level dashboards
+                const canToggle = (!isAdmin && currentDashboard.scope === 'U' && currentDashboard.createdBy === userId) ||
+                    (isAdmin && currentDashboard.scope === 'T');
+                if (!canToggle) {
+                    console.warn('User does not have permission to toggle lock for this dashboard');
+                    return;
+                }
                 // Toggle the locked state
                 const newLockedState = !currentDashboard.locked;
                 // Create an updated dashboard with toggled lock state
@@ -4762,8 +4859,24 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
                 const updatedDashboards = store
                     .dashboards()
                     .map((dashboard) => (dashboard.id === updatedDashboard.id ? updatedDashboard : dashboard));
-                patchState(store, { dashboards: updatedDashboards });
-                console.log(`Dashboard ${newLockedState ? 'locked' : 'unlocked'}`);
+                // IMPORTANT: Get the base options BEFORE updating the dashboards state
+                // This ensures we're getting the current options without the lock state applied yet
+                const baseOptions = { ...store.dashboardsOption() };
+                // First update the dashboards state
+                patchState(store, {
+                    dashboards: updatedDashboards,
+                });
+                // Get a fresh reference to the updated options with drag/resize explicitly set
+                // This ensures the grid layout container gets a new object reference and responds immediately
+                const updatedOptions = {
+                    ...baseOptions,
+                    disableDrag: newLockedState,
+                    disableResize: newLockedState,
+                };
+                // Now update the options state separately to force a refresh of the grid layout
+                patchState(store, {
+                    dashboardsOption: updatedOptions,
+                });
             }
             catch (error) {
                 console.error('Error toggling dashboard lock state:', error);
@@ -4780,59 +4893,44 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
 class AXMDashboardHomeComponent extends AXPBasePageComponent {
     constructor() {
         super(...arguments);
-        //#region ----------------   Services & Dependencies   ----------------
         this.rootConfig = RootConfig;
-        this.popupService = inject(AXPopupService);
+        this.activatedRoute = inject(ActivatedRoute);
         this.dialogService = inject(AXDialogService);
-        this.store = inject(AXMDashboardStore);
+        this.popupService = inject(AXPopupService);
         this.router = inject(Router);
-        this.activatedRoute = inject(ActivatedRoute);
-        this.layoutService = inject(AXPLayoutThemeService);
-        this.sessionService = inject(AXPSessionService);
-        // Track if dashboards have been loaded
-        this.dashboardsLoaded = signal(false);
-        //#endregion
-        //#region ----------------   View Properties   ----------------
+        this.store = inject(AXMDashboardStore);
+        this.themeService = inject(AXPLayoutThemeService);
         this.isEdited = signal(false);
         this.context = signal({});
-        //#endregion
-        //#region ----------------   Effects   ----------------
-        // Create an effect to watch for dashboards loading
+        this.dashboardsLoaded = signal(false);
         this.#dashboardsEffect = effect(() => {
             const allDashboards = this.store.allDashboards();
             if (allDashboards.length > 0 && !this.dashboardsLoaded()) {
                 this.dashboardsLoaded.set(true);
-                // Apply dashboard filtering now that dashboards are loaded
                 this.applyDashboardFiltering();
+                this.recompute();
             }
         });
         this.#loadingEffect = effect(() => {
-            const isLoading = false; // Since store doesn't have isLoading, we'll default to false
-            this.layoutService.setNavigationLoading(isLoading);
+            const isLoading = this.store.isLoading();
+            if (isLoading === false && this.dashboardsLoaded()) {
+                this.recompute;
+                setTimeout(() => this.recompute(), 0);
+            }
         });
     }
-    //#endregion
-    //#region ----------------   Lifecycle Methods   ----------------
     async ngOnInit() {
-        // Get the child route if it exists
         const childRoute = this.activatedRoute.firstChild || this.activatedRoute;
         childRoute.data.subscribe((data) => {
             const isAdmin = data['isAdmin'] ?? false;
-            // Set isAdmin state in the store
             this.store.setIsAdmin(isAdmin);
         });
     }
     applyDashboardFiltering() {
-        // The store now gets user info directly from the session service
         this.store.filterDashboardsByScope(this.store.isAdmin());
     }
-    //#endregion
-    //#region ----------------   Effects   ----------------
-    // Create an effect to watch for dashboards loading
     #dashboardsEffect;
     #loadingEffect;
-    //#endregion
-    //#region ----------------   Event Handlers   ----------------
     toggleEdit() {
         this.isEdited.update((value) => !value);
     }
@@ -4847,7 +4945,6 @@ class AXMDashboardHomeComponent extends AXPBasePageComponent {
             console.error('Error confirming widget deletion:', error);
         }
     }
-    //#endregion
     getPageTitle() {
         return this.store.currentDashboard()?.title || 'Dashboard';
     }
@@ -4885,6 +4982,7 @@ class AXMDashboardHomeComponent extends AXPBasePageComponent {
                         command: {
                             name: 'new-widget',
                         },
+                        disabled: this.store.dashboards().length < 1,
                     },
                 ],
             },
@@ -4894,7 +4992,7 @@ class AXMDashboardHomeComponent extends AXPBasePageComponent {
         const scope = this.rootConfig.config.i18n;
         const items = [
             {
-                title: await this.translateService.translateAsync('delete-current-dashboard', { scope: 'dashboard' }),
+                title: await this.translateService.translateAsync('delete'),
                 icon: 'fa-light fa-trash-can',
                 color: 'danger',
                 disabled: this.store.dashboards().length < 1,
@@ -4903,10 +5001,11 @@ class AXMDashboardHomeComponent extends AXPBasePageComponent {
                 },
             },
         ];
-        // Only add lock toggle if not admin
-        if (!this.store.isAdmin()) {
+        if (!this.store.isAdmin() && this.themeService.isDesktopDevice()) {
             items.push({
-                title: await this.translateService.translateAsync(this.store.isDashboardLocked() ? 'unlock-dashboard' : 'lock-dashboard', { scope: 'dashboard' }),
+                title: await this.translateService.translateAsync(this.store.isDashboardLocked() ? 'unlock' : 'lock', {
+                    scope: 'dashboard',
+                }),
                 icon: this.store.isDashboardLocked() ? 'fa-light fa-lock-open' : 'fa-light fa-lock',
                 color: 'accent3',
                 disabled: this.store.dashboards().length < 1,
@@ -4941,6 +5040,10 @@ class AXMDashboardHomeComponent extends AXPBasePageComponent {
                 case 'toggle-lock':
                     await this.store.toggleLockDashboard();
                     this.recompute();
+                    // Add a short delay to ensure the grid layout updates properly
+                    setTimeout(() => {
+                        this.recompute();
+                    }, 50);
                     break;
             }
         }
@@ -4953,7 +5056,7 @@ class AXMDashboardHomeComponent extends AXPBasePageComponent {
                 provide: AXPBasePage,
                 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    @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.dashboardsOption()\" (onChange)=\"store.onGridChange($event)\">\n        @for(widget of store.currentDashboard()?.widgets; track widget.config.id) {\n        <ax-grid-layout-widget [options]=\"widget.config\">\n          <axm-dashboard-widget-wrapper\n            [title]=\"widget.node?.options?.['title']\"\n            [hasConfiguration]=\"store.canConfigureWidget()(widget)\"\n            (onDelete)=\"confirmWidgetDelete(store.currentDashboard()?.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        } @empty {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-bg-gray-50 ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-text-gray-400 ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-text-gray-700 ax-mb-2\">\n            {{ t('no-widgets', { scope: 'dashboard' }) | async }}\n          </h2>\n          <p class=\"ax-text-gray-500 ax-text-center ax-mb-6\">\n            {{ t('add-first-widget', { scope: 'dashboard' }) | async }}\n          </p>\n        </div>\n        }\n      </ax-grid-layout-container>\n    </axp-widgets-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axm-dashboard-home{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axm-dashboard-home .placeholder-content{border-radius:.5rem!important;border-width:1px!important;border-style:dashed!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))!important;background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5)!important}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content{border-radius:.375rem!important;border-width:1px!important;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important;--ax-comp-grid-layout-stack-item-content-bg-color: var(--ax-sys-color-lightest-surface) }\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$3.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,    axp-page-header,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-container,    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: i6.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: AXMDashboardWidgetWrapperComponent, selector: "axm-dashboard-widget-wrapper", inputs: ["title", "hasConfiguration"], 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    @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.dashboardsOption()\" (onChange)=\"store.onGridChange($event)\">\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        } @else if (!store.currentDashboard()) {\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        } @else if (!store.currentDashboard()?.widgets || store.currentDashboard()?.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        } @else { @for(widget of store.currentDashboard()?.widgets; track widget.config.id) {\n        <ax-grid-layout-widget [options]=\"widget.config\">\n          <axm-dashboard-widget-wrapper\n            [title]=\"widget.node?.options?.['title']\"\n            [hasConfiguration]=\"store.canConfigureWidget()(widget)\"\n            [isLocked]=\"store.isWidgetLocked()(widget)\"\n            (onDelete)=\"confirmWidgetDelete(store.currentDashboard()?.id!, widget.config.id!)\"\n            (onConfiguration)=\"store.handlePopupConfiguration(widget.node!)\"\n            (onValueChanged)=\"store.handleValueChanged(widget?.node!,$event)\"\n            (onOptionsChanged)=\"store.handleOptionsChanged(widget?.node!,$event)\"\n          >\n            @if(widget.node) {\n            <ng-container axp-widget-renderer [node]=\"widget.node\" [mode]=\"'view'\"></ng-container>\n            }\n          </axm-dashboard-widget-wrapper>\n        </ax-grid-layout-widget>\n        } }\n      </ax-grid-layout-container>\n    </axp-widgets-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axm-dashboard-home{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axm-dashboard-home .placeholder-content{border-radius:.5rem!important;border-width:1px!important;border-style:dashed!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))!important;background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5)!important}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content{border-radius:.375rem!important;border-width:1px!important;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important;--ax-comp-grid-layout-stack-item-content-bg-color: var(--ax-sys-color-lightest-surface) }\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXGridLayoutBuilderModule }, { kind: "component", type: i4$1.AXGridLayoutContainerComponent, selector: "ax-grid-layout-container", inputs: ["options", "isEmpty"], outputs: ["onAdded", "onRemoved", "onWidgetChange", "onChange", "onRender", "isEmptyChange"] }, { kind: "component", type: i4$1.AXGridLayoutWidgetComponent, selector: "ax-grid-layout-widget", inputs: ["options"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer,    axp-page-header,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-container,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i2$3.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: AXMDashboardWidgetWrapperComponent, selector: "axm-dashboard-widget-wrapper", inputs: ["title", "hasConfiguration", "isLocked"], outputs: ["onDelete", "onConfiguration", "onValueChanged", "onOptionsChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMDashboardHomeComponent, decorators: [{
             type: Component,
@@ -4979,7 +5082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                             provide: AXPBasePage,
                             useExisting: AXMDashboardHomeComponent,
                         },
-                    ], template: "<axp-page-layout *translate=\"let t\">\n  <!-- Content Section -->\n\n  <axp-page-content class=\"ax-relative\">\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.dashboardsOption()\" (onChange)=\"store.onGridChange($event)\">\n        @for(widget of store.currentDashboard()?.widgets; track widget.config.id) {\n        <ax-grid-layout-widget [options]=\"widget.config\">\n          <axm-dashboard-widget-wrapper\n            [title]=\"widget.node?.options?.['title']\"\n            [hasConfiguration]=\"store.canConfigureWidget()(widget)\"\n            (onDelete)=\"confirmWidgetDelete(store.currentDashboard()?.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        } @empty {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-bg-gray-50 ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-text-gray-400 ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-text-gray-700 ax-mb-2\">\n            {{ t('no-widgets', { scope: 'dashboard' }) | async }}\n          </h2>\n          <p class=\"ax-text-gray-500 ax-text-center ax-mb-6\">\n            {{ t('add-first-widget', { scope: 'dashboard' }) | async }}\n          </p>\n        </div>\n        }\n      </ax-grid-layout-container>\n    </axp-widgets-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axm-dashboard-home{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axm-dashboard-home .placeholder-content{border-radius:.5rem!important;border-width:1px!important;border-style:dashed!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))!important;background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5)!important}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content{border-radius:.375rem!important;border-width:1px!important;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important;--ax-comp-grid-layout-stack-item-content-bg-color: var(--ax-sys-color-lightest-surface) }\n"] }]
+                    ], template: "<axp-page-layout *translate=\"let t\">\n  <!-- Content Section -->\n\n  <axp-page-content class=\"ax-relative\">\n    @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.dashboardsOption()\" (onChange)=\"store.onGridChange($event)\">\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        } @else if (!store.currentDashboard()) {\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        } @else if (!store.currentDashboard()?.widgets || store.currentDashboard()?.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        } @else { @for(widget of store.currentDashboard()?.widgets; track widget.config.id) {\n        <ax-grid-layout-widget [options]=\"widget.config\">\n          <axm-dashboard-widget-wrapper\n            [title]=\"widget.node?.options?.['title']\"\n            [hasConfiguration]=\"store.canConfigureWidget()(widget)\"\n            [isLocked]=\"store.isWidgetLocked()(widget)\"\n            (onDelete)=\"confirmWidgetDelete(store.currentDashboard()?.id!, widget.config.id!)\"\n            (onConfiguration)=\"store.handlePopupConfiguration(widget.node!)\"\n            (onValueChanged)=\"store.handleValueChanged(widget?.node!,$event)\"\n            (onOptionsChanged)=\"store.handleOptionsChanged(widget?.node!,$event)\"\n          >\n            @if(widget.node) {\n            <ng-container axp-widget-renderer [node]=\"widget.node\" [mode]=\"'view'\"></ng-container>\n            }\n          </axm-dashboard-widget-wrapper>\n        </ax-grid-layout-widget>\n        } }\n      </ax-grid-layout-container>\n    </axp-widgets-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axm-dashboard-home{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axm-dashboard-home .placeholder-content{border-radius:.5rem!important;border-width:1px!important;border-style:dashed!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))!important;background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5)!important}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content{border-radius:.375rem!important;border-width:1px!important;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important;--ax-comp-grid-layout-stack-item-content-bg-color: var(--ax-sys-color-lightest-surface) }\n"] }]
         }] });
 
 var homeDashboard = /*#__PURE__*/Object.freeze({