@acorex/modules 19.3.5 → 19.3.8

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

@@ -3,7 +3,7 @@ import { createAllQueryView, AXPEntityCommandScope, AXPEntityQueryType, AXP_HOME
 import * as i3$1 from '@acorex/platform/layout/builder';
 import { AXPWidgetsCatalog, AXPValueWidgetComponent, cloneProperty, AXPWidgetGroupEnum, AXPLayoutWidgetComponent, AXPLayoutBuilderModule, AXPWidgetRendererDirective } from '@acorex/platform/layout/builder';
 import { AXMEntityCrudServiceImpl, AXPEntityService, AXP_ENTITY_CONFIG_TOKEN, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
-import { AXP_APPEARANCE_PROPERTY_GROUP, AXP_STYLING_PROPERTY_GROUP, AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BG_COLOR_PROPERTY, plainTextDefaultProperty, AXP_DATA_PROPERTY_GROUP, AXP_COLOR_PROPERTY, AXPWidgetsModule } from '@acorex/platform/widgets';
+import { AXP_APPEARANCE_PROPERTY_GROUP, AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BG_COLOR_PROPERTY, plainTextDefaultProperty, AXP_DATA_PROPERTY_GROUP, AXP_COLOR_PROPERTY, AXPWidgetsModule } from '@acorex/platform/widgets';
 import * as i0 from '@angular/core';
 import { Injectable, inject, Injector, computed, ChangeDetectionStrategy, Component, ChangeDetectorRef, signal, viewChild, ElementRef, HostListener, output, InjectionToken, effect, HostBinding, NgModule, input, contentChild, afterNextRender, model, ViewEncapsulation } from '@angular/core';
 import { AXBarChartComponent } from '@acorex/charts/bar-chart';
@@ -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';
@@ -452,20 +454,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
  */
 class AXPBarChartWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
-        super(...arguments);
+        super();
         this.barChartData = computed(() => this.getValue());
         this.barChartOptions = computed(() => this.options());
+        this.setOptions({
+            ...this.options(),
+            showXAxis: true,
+            showYAxis: true,
+            barWidth: 80,
+            cornerRadius: 4,
+            showGrid: true,
+            showDataLabels: false,
+            showTooltip: true,
+            animationEasing: 'cubic-out',
+            animationDuration: 800,
+        });
     }
     handleBarClick(event) {
         //console.log(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPBarChartWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPBarChartWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPBarChartWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ax-bar-chart [data]=\"barChartData()\" [options]=\"barChartOptions()\" (barClick)=\"handleBarClick($event)\"></ax-bar-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: AXBarChartComponent, selector: "ax-bar-chart", inputs: ["data", "options"], outputs: ["barClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPBarChartWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ imports: [AXBarChartComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-bar-chart [data]=\"barChartData()\" [options]=\"barChartOptions()\" (barClick)=\"handleBarClick($event)\"></ax-bar-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
-        }] });
+        }], ctorParameters: () => [] });
 
 var barChartWidget_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -496,7 +510,7 @@ const AXPBarChartWidget = {
         // ====== Chart Title ======
         {
             name: 'title',
-            title: 'Chart Title',
+            title: '@dashboard:widgets.bar-chart.chart-title',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: '',
@@ -512,64 +526,10 @@ const AXPBarChartWidget = {
             },
             visible: true,
         },
-        // ====== Layout & Dimensions ======
-        {
-            name: 'width',
-            title: 'Width',
-            group: AXP_STYLING_PROPERTY_GROUP,
-            schema: {
-                defaultValue: null,
-                dataType: 'number',
-                interface: {
-                    name: 'width',
-                    path: 'options.width',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        minValue: 0,
-                        maxValue: 1200,
-                    },
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'height',
-            title: 'Height',
-            group: AXP_STYLING_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 300,
-                dataType: 'number',
-                interface: {
-                    name: 'height',
-                    path: 'options.height',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        minValue: 0,
-                        maxValue: 800,
-                    },
-                },
-            },
-            visible: true,
-        },
         // ====== X Axis Settings ======
-        {
-            name: 'showXAxis',
-            title: 'Show X Axis',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showXAxis',
-                    path: 'options.showXAxis',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
         {
             name: 'xAxisLabel',
-            title: 'X Axis Label',
+            title: '@dashboard:widgets.bar-chart.x-axis-label',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: '',
@@ -583,24 +543,9 @@ const AXPBarChartWidget = {
             visible: true,
         },
         // ====== Y Axis Settings ======
-        {
-            name: 'showYAxis',
-            title: 'Show Y Axis',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showYAxis',
-                    path: 'options.showYAxis',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
         {
             name: 'yAxisLabel',
-            title: 'Y Axis Label',
+            title: '@dashboard:widgets.bar-chart.y-axis-label',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: '',
@@ -613,145 +558,218 @@ const AXPBarChartWidget = {
             },
             visible: true,
         },
+        /* Commented out properties
+        // ====== Layout & Dimensions ======
+        {
+          name: 'width',
+          title: '@dashboard:widgets.bar-chart.width',
+          group: AXP_STYLING_PROPERTY_GROUP,
+          schema: {
+            defaultValue: null,
+            dataType: 'number',
+            interface: {
+              name: 'width',
+              path: 'options.width',
+              type: AXPWidgetsCatalog.number,
+              options: {
+                minValue: 0,
+                maxValue: 1200,
+              },
+            },
+          },
+          visible: true,
+        },
+        {
+          name: 'height',
+          title: '@dashboard:widgets.bar-chart.height',
+          group: AXP_STYLING_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 300,
+            dataType: 'number',
+            interface: {
+              name: 'height',
+              path: 'options.height',
+              type: AXPWidgetsCatalog.number,
+              options: {
+                minValue: 0,
+                maxValue: 800,
+              },
+            },
+          },
+          visible: true,
+        },
+        // ====== X Axis Settings ======
+        {
+          name: 'showXAxis',
+          title: '@dashboard:widgets.bar-chart.show-x-axis',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: true,
+            dataType: 'boolean',
+            interface: {
+              name: 'showXAxis',
+              path: 'options.showXAxis',
+              type: AXPWidgetsCatalog.toggle,
+            },
+          },
+          visible: true,
+        },
+        // ====== Y Axis Settings ======
+        {
+          name: 'showYAxis',
+          title: '@dashboard:widgets.bar-chart.show-y-axis',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: true,
+            dataType: 'boolean',
+            interface: {
+              name: 'showYAxis',
+              path: 'options.showYAxis',
+              type: AXPWidgetsCatalog.toggle,
+            },
+          },
+          visible: true,
+        },
         // ====== Bar Appearance ======
         {
-            name: 'barWidth',
-            title: 'Bar Width',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 80,
-                dataType: 'number',
-                interface: {
-                    name: 'barWidth',
-                    path: 'options.barWidth',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '1-100',
-                        minValue: 1,
-                        maxValue: 100,
-                    },
-                },
+          name: 'barWidth',
+          title: '@dashboard:widgets.bar-chart.bar-width',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 80,
+            dataType: 'number',
+            interface: {
+              name: 'barWidth',
+              path: 'options.barWidth',
+              type: AXPWidgetsCatalog.number,
+              options: {
+                placeholder: '1-100',
+                minValue: 1,
+                maxValue: 100,
+              },
             },
-            visible: true,
+          },
+          visible: true,
         },
         {
-            name: 'cornerRadius',
-            title: 'Corner Radius',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 4,
-                dataType: 'number',
-                interface: {
-                    name: 'cornerRadius',
-                    path: 'options.cornerRadius',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '0-20',
-                        minValue: 0,
-                        maxValue: 20,
-                    },
-                },
+          name: 'cornerRadius',
+          title: '@dashboard:widgets.bar-chart.corner-radius',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 4,
+            dataType: 'number',
+            interface: {
+              name: 'cornerRadius',
+              path: 'options.cornerRadius',
+              type: AXPWidgetsCatalog.number,
+              options: {
+                placeholder: '0-20',
+                minValue: 0,
+                maxValue: 20,
+              },
             },
-            visible: true,
+          },
+          visible: true,
         },
         // ====== Grid Settings ======
         {
-            name: 'showGrid',
-            title: 'Show Grid Lines',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showGrid',
-                    path: 'options.showGrid',
-                    type: AXPWidgetsCatalog.toggle,
-                },
+          name: 'showGrid',
+          title: '@dashboard:widgets.bar-chart.show-grid',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: true,
+            dataType: 'boolean',
+            interface: {
+              name: 'showGrid',
+              path: 'options.showGrid',
+              type: AXPWidgetsCatalog.toggle,
             },
-            visible: true,
+          },
+          visible: true,
         },
         {
-            name: 'showDataLabels',
-            title: 'Show Data Labels',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showDataLabels',
-                    path: 'options.showDataLabels',
-                    type: AXPWidgetsCatalog.toggle,
-                },
+          name: 'showDataLabels',
+          title: '@dashboard:widgets.bar-chart.show-data-labels',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: true,
+            dataType: 'boolean',
+            interface: {
+              name: 'showDataLabels',
+              path: 'options.showDataLabels',
+              type: AXPWidgetsCatalog.toggle,
             },
-            visible: true,
+          },
+          visible: true,
         },
         // ====== Tooltip Settings ======
         {
-            name: 'showTooltip',
-            title: 'Show Tooltip',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showTooltip',
-                    path: 'options.showTooltip',
-                    type: AXPWidgetsCatalog.toggle,
-                },
+          name: 'showTooltip',
+          title: '@dashboard:widgets.bar-chart.show-tooltip',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: true,
+            dataType: 'boolean',
+            interface: {
+              name: 'showTooltip',
+              path: 'options.showTooltip',
+              type: AXPWidgetsCatalog.toggle,
             },
-            visible: true,
+          },
+          visible: true,
         },
         // ====== Animation Settings ======
         {
-            name: 'animationEasing',
-            title: 'Animation Easing',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 'cubic-out',
-                dataType: 'string',
-                interface: {
-                    name: 'animationEasing',
-                    path: 'options.animationEasing',
-                    type: AXPWidgetsCatalog.select,
-                    options: {
-                        dataSource: [
-                            { value: 'linear', text: 'Linear' },
-                            { value: 'ease', text: 'Ease' },
-                            { value: 'ease-in', text: 'Ease In' },
-                            { value: 'ease-out', text: 'Ease Out' },
-                            { value: 'ease-in-out', text: 'Ease In Out' },
-                            { value: 'cubic', text: 'Cubic' },
-                            { value: 'cubic-in', text: 'Cubic In' },
-                            { value: 'cubic-out', text: 'Cubic Out' },
-                            { value: 'cubic-in-out', text: 'Cubic In Out' },
-                        ],
-                        textField: 'text',
-                        valueField: 'value',
-                    },
-                },
+          name: 'animationEasing',
+          title: '@dashboard:widgets.bar-chart.animation-easing',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 'cubic-out',
+            dataType: 'string',
+            interface: {
+              name: 'animationEasing',
+              path: 'options.animationEasing',
+              type: AXPWidgetsCatalog.select,
+              options: {
+                dataSource: [
+                  { value: 'linear', text: 'Linear' },
+                  { value: 'ease', text: 'Ease' },
+                  { value: 'ease-in', text: 'Ease In' },
+                  { value: 'ease-out', text: 'Ease Out' },
+                  { value: 'ease-in-out', text: 'Ease In Out' },
+                  { value: 'cubic', text: 'Cubic' },
+                  { value: 'cubic-in', text: 'Cubic In' },
+                  { value: 'cubic-out', text: 'Cubic Out' },
+                  { value: 'cubic-in-out', text: 'Cubic In Out' },
+                ],
+                textField: 'text',
+                valueField: 'value',
+              },
             },
-            visible: true,
+          },
+          visible: true,
         },
         {
-            name: 'animationDuration',
-            title: 'Animation Duration',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 800,
-                dataType: 'number',
-                interface: {
-                    name: 'animationDuration',
-                    path: 'options.animationDuration',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '0-2000',
-                        minValue: 0,
-                        maxValue: 2000,
-                    },
-                },
+          name: 'animationDuration',
+          title: '@dashboard:widgets.bar-chart.animation-duration',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 800,
+            dataType: 'number',
+            interface: {
+              name: 'animationDuration',
+              path: 'options.animationDuration',
+              type: AXPWidgetsCatalog.number,
+              options: {
+                placeholder: '0-2000',
+                minValue: 0,
+                maxValue: 2000,
+              },
             },
-            visible: true,
+          },
+          visible: true,
         },
+        */
     ],
     components: {
         view: {
@@ -803,7 +821,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 +911,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 +950,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 +967,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 +986,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 +1008,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 +1023,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 +1039,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 +1054,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 +1084,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 +1102,7 @@ const AXPClockCalendarWidget = {
         },
         {
             name: 'timezone',
-            title: 'Timezone',
+            title: '@dashboard:widgets.clock-calendar.timezone',
             group: AXP_BEHAVIOR_PROPERTY_GROUP,
             schema: {
                 defaultValue: 'local',
@@ -1124,20 +1142,31 @@ const AXPClockCalendarWidget = {
  */
 class AXPDonutChartWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
-        super(...arguments);
+        super();
         this.donutChartData = computed(() => this.getValue());
         this.donutChartOptions = computed(() => this.options());
+        this.setOptions({
+            ...this.options(),
+            width: 300,
+            height: 300,
+            showDataLabels: false,
+            donutWidth: 35,
+            cornerRadius: 4,
+            showTooltip: true,
+            animationEasing: 'cubic-out',
+            animationDuration: 800,
+        });
     }
     handleDonutChartSegmentClick(event) {
         //console.log(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDonutChartWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDonutChartWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPDonutChartWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ax-donut-chart\n  [data]=\"donutChartData()\"\n  [options]=\"donutChartOptions()\"\n  (segmentClick)=\"handleDonutChartSegmentClick($event)\"\n></ax-donut-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: AXDonutChartComponent, selector: "ax-donut-chart", inputs: ["data", "options"], outputs: ["segmentClick", "segmentHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPDonutChartWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ imports: [AXDonutChartComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-donut-chart\n  [data]=\"donutChartData()\"\n  [options]=\"donutChartOptions()\"\n  (segmentClick)=\"handleDonutChartSegmentClick($event)\"\n></ax-donut-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
-        }] });
+        }], ctorParameters: () => [] });
 
 var donutChartWidget_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -1157,7 +1186,7 @@ const AXPDonutChartWidget = {
         // ====== Chart Title ======
         {
             name: 'title',
-            title: 'Chart Title',
+            title: '@dashboard:widgets.donut-chart.chart-title',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: '',
@@ -1173,100 +1202,101 @@ const AXPDonutChartWidget = {
             },
             visible: true,
         },
+        /* Commented out properties
         // ====== Size & Layout ======
         {
-            name: 'width',
-            title: 'Width',
-            group: AXP_STYLING_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 300,
-                dataType: 'number',
-                interface: {
-                    name: 'width',
-                    path: 'options.width',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        minValue: 200,
-                        maxValue: 1200,
-                    },
-                },
+          name: 'width',
+          title: '@dashboard:widgets.donut-chart.width',
+          group: AXP_STYLING_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 300,
+            dataType: 'number',
+            interface: {
+              name: 'width',
+              path: 'options.width',
+              type: AXPWidgetsCatalog.number,
+              options: {
+                minValue: 200,
+                maxValue: 1200,
+              },
             },
-            visible: true,
+          },
+          visible: true,
         },
         {
-            name: 'height',
-            title: 'Height',
-            group: AXP_STYLING_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 300,
-                dataType: 'number',
-                interface: {
-                    name: 'height',
-                    path: 'options.height',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        minValue: 200,
-                        maxValue: 800,
-                    },
-                },
+          name: 'height',
+          title: '@dashboard:widgets.donut-chart.height',
+          group: AXP_STYLING_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 300,
+            dataType: 'number',
+            interface: {
+              name: 'height',
+              path: 'options.height',
+              type: AXPWidgetsCatalog.number,
+              options: {
+                minValue: 200,
+                maxValue: 800,
+              },
             },
-            visible: true,
+          },
+          visible: true,
         },
         // ====== Donut Appearance ======
         {
-            name: 'showDataLabels',
-            title: 'Show Data Labels',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showDataLabels',
-                    path: 'options.showDataLabels',
-                    type: AXPWidgetsCatalog.toggle,
-                },
+          name: 'showDataLabels',
+          title: '@dashboard:widgets.donut-chart.show-data-labels',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: true,
+            dataType: 'boolean',
+            interface: {
+              name: 'showDataLabels',
+              path: 'options.showDataLabels',
+              type: AXPWidgetsCatalog.toggle,
             },
-            visible: true,
+          },
+          visible: true,
         },
         {
-            name: 'donutWidth',
-            title: 'Donut Width',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 35,
-                dataType: 'number',
-                interface: {
-                    name: 'donutWidth',
-                    path: 'options.donutWidth',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '10-80',
-                        minValue: 10,
-                        maxValue: 80,
-                    },
-                },
+          name: 'donutWidth',
+          title: '@dashboard:widgets.donut-chart.donut-width',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 35,
+            dataType: 'number',
+            interface: {
+              name: 'donutWidth',
+              path: 'options.donutWidth',
+              type: AXPWidgetsCatalog.number,
+              options: {
+                placeholder: '10-80',
+                minValue: 10,
+                maxValue: 80,
+              },
             },
-            visible: true,
+          },
+          visible: true,
         },
         {
-            name: 'cornerRadius',
-            title: 'Corner Radius',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 4,
-                dataType: 'number',
-                interface: {
-                    name: 'cornerRadius',
-                    path: 'options.cornerRadius',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '0-20',
-                        minValue: 0,
-                        maxValue: 20,
-                    },
-                },
+          name: 'cornerRadius',
+          title: '@dashboard:widgets.donut-chart.corner-radius',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 4,
+            dataType: 'number',
+            interface: {
+              name: 'cornerRadius',
+              path: 'options.cornerRadius',
+              type: AXPWidgetsCatalog.number,
+              options: {
+                placeholder: '0-20',
+                minValue: 0,
+                maxValue: 20,
+              },
             },
-            visible: true,
+          },
+          visible: true,
         },
         // ====== Legend ======
         // {
@@ -1304,71 +1334,72 @@ const AXPDonutChartWidget = {
         // },
         // ====== Tooltip ======
         {
-            name: 'showTooltip',
-            title: 'Show Tooltip',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showTooltip',
-                    path: 'options.showTooltip',
-                    type: AXPWidgetsCatalog.toggle,
-                },
+          name: 'showTooltip',
+          title: '@dashboard:widgets.donut-chart.show-tooltip',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: true,
+            dataType: 'boolean',
+            interface: {
+              name: 'showTooltip',
+              path: 'options.showTooltip',
+              type: AXPWidgetsCatalog.toggle,
             },
-            visible: true,
+          },
+          visible: true,
         },
         // ====== Animation Settings ======
         {
-            name: 'animationEasing',
-            title: 'Animation Easing',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 'cubic-out',
-                dataType: 'string',
-                interface: {
-                    name: 'animationEasing',
-                    path: 'options.animationEasing',
-                    type: AXPWidgetsCatalog.select,
-                    options: {
-                        dataSource: [
-                            { value: 'linear', text: 'Linear' },
-                            { value: 'ease', text: 'Ease' },
-                            { value: 'ease-in', text: 'Ease In' },
-                            { value: 'ease-out', text: 'Ease Out' },
-                            { value: 'ease-in-out', text: 'Ease In Out' },
-                            { value: 'cubic', text: 'Cubic' },
-                            { value: 'cubic-in', text: 'Cubic In' },
-                            { value: 'cubic-out', text: 'Cubic Out' },
-                            { value: 'cubic-in-out', text: 'Cubic In Out' },
-                        ],
-                        textField: 'text',
-                        valueField: 'value',
-                    },
-                },
+          name: 'animationEasing',
+          title: '@dashboard:widgets.donut-chart.animation-easing',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 'cubic-out',
+            dataType: 'string',
+            interface: {
+              name: 'animationEasing',
+              path: 'options.animationEasing',
+              type: AXPWidgetsCatalog.select,
+              options: {
+                dataSource: [
+                  { value: 'linear', text: 'Linear' },
+                  { value: 'ease', text: 'Ease' },
+                  { value: 'ease-in', text: 'Ease In' },
+                  { value: 'ease-out', text: 'Ease Out' },
+                  { value: 'ease-in-out', text: 'Ease In Out' },
+                  { value: 'cubic', text: 'Cubic' },
+                  { value: 'cubic-in', text: 'Cubic In' },
+                  { value: 'cubic-out', text: 'Cubic Out' },
+                  { value: 'cubic-in-out', text: 'Cubic In Out' },
+                ],
+                textField: 'text',
+                valueField: 'value',
+              },
             },
-            visible: true,
+          },
+          visible: true,
         },
         {
-            name: 'animationDuration',
-            title: 'Animation Duration',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 800,
-                dataType: 'number',
-                interface: {
-                    name: 'animationDuration',
-                    path: 'options.animationDuration',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '0-2000',
-                        minValue: 0,
-                        maxValue: 2000,
-                    },
-                },
+          name: 'animationDuration',
+          title: '@dashboard:widgets.donut-chart.animation-duration',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 800,
+            dataType: 'number',
+            interface: {
+              name: 'animationDuration',
+              path: 'options.animationDuration',
+              type: AXPWidgetsCatalog.number,
+              options: {
+                placeholder: '0-2000',
+                minValue: 0,
+                maxValue: 2000,
+              },
             },
-            visible: true,
+          },
+          visible: true,
         },
+        */
     ],
     components: {
         view: {
@@ -1393,17 +1424,29 @@ const AXPDonutChartWidget = {
  */
 class AXPGaugeChartWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
-        super(...arguments);
+        super();
         this.gaugeChartValue = computed(() => this.getValue());
         this.gaugeChartOptions = computed(() => this.options());
+        this.setOptions({
+            ...this.options(),
+            width: null,
+            height: 300,
+            minValue: 0,
+            maxValue: 100,
+            showTooltip: true,
+            gaugeWidth: 30,
+            cornerRadius: 4,
+            animationEasing: 'cubic-out',
+            animationDuration: 800,
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPGaugeChartWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPGaugeChartWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPGaugeChartWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ax-gauge-chart [value]=\"gaugeChartValue()\" [options]=\"gaugeChartOptions()\"></ax-gauge-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: AXGaugeChartComponent, selector: "ax-gauge-chart", inputs: ["value", "options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPGaugeChartWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ imports: [AXGaugeChartComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-gauge-chart [value]=\"gaugeChartValue()\" [options]=\"gaugeChartOptions()\"></ax-gauge-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
-        }] });
+        }], ctorParameters: () => [] });
 
 var gaugeChartWidget_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -1422,7 +1465,7 @@ const AXPGaugeChartWidget = {
         // ====== Chart Title ======
         {
             name: 'title',
-            title: 'Chart Title',
+            title: '@dashboard:widgets.gauge-chart.chart-title',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: '',
@@ -1438,201 +1481,203 @@ const AXPGaugeChartWidget = {
             },
             visible: true,
         },
-        // ====== Layout & Dimensions ======
+        // ====== Label Display ======
         {
-            name: 'width',
-            title: 'Width',
-            group: AXP_STYLING_PROPERTY_GROUP,
+            name: 'label',
+            title: '@dashboard:widgets.gauge-chart.label',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
-                defaultValue: null,
-                dataType: 'number',
+                defaultValue: '',
+                dataType: 'string',
                 interface: {
-                    name: 'width',
-                    path: 'options.width',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '1-1200',
-                        minValue: 1,
-                        maxValue: 1200,
-                    },
+                    name: 'label',
+                    path: 'options.label',
+                    type: AXPWidgetsCatalog.text,
                 },
             },
             visible: true,
         },
+        /* Commented out properties
+        // ====== Layout & Dimensions ======
         {
-            name: 'height',
-            title: 'Height',
-            group: AXP_STYLING_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 300,
-                dataType: 'number',
-                interface: {
-                    name: 'height',
-                    path: 'options.height',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '1-800',
-                        minValue: 1,
-                        maxValue: 800,
-                    },
-                },
+          name: 'width',
+          title: '@dashboard:widgets.gauge-chart.width',
+          group: AXP_STYLING_PROPERTY_GROUP,
+          schema: {
+            defaultValue: null,
+            dataType: 'number',
+            interface: {
+              name: 'width',
+              path: 'options.width',
+              type: AXPWidgetsCatalog.number,
+              options: {
+                placeholder: '1-1200',
+                minValue: 1,
+                maxValue: 1200,
+              },
             },
-            visible: true,
+          },
+          visible: true,
         },
-        // ====== Gauge Configuration ======
         {
-            name: 'minValue',
-            title: 'Minimum Value',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 0,
-                dataType: 'number',
-                interface: {
-                    name: 'minValue',
-                    path: 'options.minValue',
-                    type: AXPWidgetsCatalog.number,
-                },
+          name: 'height',
+          title: '@dashboard:widgets.gauge-chart.height',
+          group: AXP_STYLING_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 300,
+            dataType: 'number',
+            interface: {
+              name: 'height',
+              path: 'options.height',
+              type: AXPWidgetsCatalog.number,
+              options: {
+                placeholder: '1-800',
+                minValue: 1,
+                maxValue: 800,
+              },
             },
-            visible: true,
+          },
+          visible: true,
         },
+        // ====== Gauge Configuration ======
         {
-            name: 'maxValue',
-            title: 'Maximum Value',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 100,
-                dataType: 'number',
-                interface: {
-                    name: 'maxValue',
-                    path: 'options.maxValue',
-                    type: AXPWidgetsCatalog.number,
-                },
+          name: 'minValue',
+          title: '@dashboard:widgets.gauge-chart.min-value',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 0,
+            dataType: 'number',
+            interface: {
+              name: 'minValue',
+              path: 'options.minValue',
+              type: AXPWidgetsCatalog.number,
             },
-            visible: true,
+          },
+          visible: true,
         },
-        // ====== Gauge Appearance ======
         {
-            name: 'showTooltip',
-            title: 'Show Tooltip',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showTooltip',
-                    path: 'options.showTooltip',
-                    type: AXPWidgetsCatalog.toggle,
-                },
+          name: 'maxValue',
+          title: '@dashboard:widgets.gauge-chart.max-value',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 100,
+            dataType: 'number',
+            interface: {
+              name: 'maxValue',
+              path: 'options.maxValue',
+              type: AXPWidgetsCatalog.number,
             },
-            visible: true,
+          },
+          visible: true,
         },
+        // ====== Gauge Appearance ======
         {
-            name: 'gaugeWidth',
-            title: 'Gauge Width',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 30,
-                dataType: 'number',
-                interface: {
-                    name: 'gaugeWidth',
-                    path: 'options.gaugeWidth',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '1-100',
-                        minValue: 1,
-                        maxValue: 100,
-                    },
-                },
+          name: 'showTooltip',
+          title: '@dashboard:widgets.gauge-chart.show-tooltip',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: true,
+            dataType: 'boolean',
+            interface: {
+              name: 'showTooltip',
+              path: 'options.showTooltip',
+              type: AXPWidgetsCatalog.toggle,
             },
-            visible: true,
+          },
+          visible: true,
         },
         {
-            name: 'cornerRadius',
-            title: 'Corner Radius',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 4,
-                dataType: 'number',
-                interface: {
-                    name: 'cornerRadius',
-                    path: 'options.cornerRadius',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '1-20',
-                        minValue: 0,
-                        maxValue: 20,
-                    },
-                },
+          name: 'gaugeWidth',
+          title: '@dashboard:widgets.gauge-chart.gauge-width',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 30,
+            dataType: 'number',
+            interface: {
+              name: 'gaugeWidth',
+              path: 'options.gaugeWidth',
+              type: AXPWidgetsCatalog.number,
+              options: {
+                placeholder: '1-100',
+                minValue: 1,
+                maxValue: 100,
+              },
             },
-            visible: true,
+          },
+          visible: true,
         },
-        // ====== Label Display ======
         {
-            name: 'label',
-            title: 'Label Text',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: '',
-                dataType: 'string',
-                interface: {
-                    name: 'label',
-                    path: 'options.label',
-                    type: AXPWidgetsCatalog.text,
-                },
+          name: 'cornerRadius',
+          title: '@dashboard:widgets.gauge-chart.corner-radius',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 4,
+            dataType: 'number',
+            interface: {
+              name: 'cornerRadius',
+              path: 'options.cornerRadius',
+              type: AXPWidgetsCatalog.number,
+              options: {
+                placeholder: '1-20',
+                minValue: 0,
+                maxValue: 20,
+              },
             },
-            visible: true,
+          },
+          visible: true,
         },
         // ====== Animation Settings ======
         {
-            name: 'animationEasing',
-            title: 'Animation Easing',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 'cubic-out',
-                dataType: 'string',
-                interface: {
-                    name: 'animationEasing',
-                    path: 'options.animationEasing',
-                    type: AXPWidgetsCatalog.select,
-                    options: {
-                        dataSource: [
-                            { value: 'linear', text: 'Linear' },
-                            { value: 'ease', text: 'Ease' },
-                            { value: 'ease-in', text: 'Ease In' },
-                            { value: 'ease-out', text: 'Ease Out' },
-                            { value: 'ease-in-out', text: 'Ease In Out' },
-                            { value: 'cubic', text: 'Cubic' },
-                            { value: 'cubic-in', text: 'Cubic In' },
-                            { value: 'cubic-out', text: 'Cubic Out' },
-                            { value: 'cubic-in-out', text: 'Cubic In Out' },
-                        ],
-                        textField: 'text',
-                        valueField: 'value',
-                    },
-                },
+          name: 'animationEasing',
+          title: '@dashboard:widgets.gauge-chart.animation-easing',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 'cubic-out',
+            dataType: 'string',
+            interface: {
+              name: 'animationEasing',
+              path: 'options.animationEasing',
+              type: AXPWidgetsCatalog.select,
+              options: {
+                dataSource: [
+                  { value: 'linear', text: 'Linear' },
+                  { value: 'ease', text: 'Ease' },
+                  { value: 'ease-in', text: 'Ease In' },
+                  { value: 'ease-out', text: 'Ease Out' },
+                  { value: 'ease-in-out', text: 'Ease In Out' },
+                  { value: 'cubic', text: 'Cubic' },
+                  { value: 'cubic-in', text: 'Cubic In' },
+                  { value: 'cubic-out', text: 'Cubic Out' },
+                  { value: 'cubic-in-out', text: 'Cubic In Out' },
+                ],
+                textField: 'text',
+                valueField: 'value',
+              },
             },
-            visible: true,
+          },
+          visible: true,
         },
         {
-            name: 'animationDuration',
-            title: 'Animation Duration',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 800,
-                dataType: 'number',
-                interface: {
-                    name: 'animationDuration',
-                    path: 'options.animationDuration',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '0-2000',
-                        minValue: 0,
-                        maxValue: 2000,
-                    },
-                },
+          name: 'animationDuration',
+          title: '@dashboard:widgets.gauge-chart.animation-duration',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 800,
+            dataType: 'number',
+            interface: {
+              name: 'animationDuration',
+              path: 'options.animationDuration',
+              type: AXPWidgetsCatalog.number,
+              options: {
+                placeholder: '0-2000',
+                minValue: 0,
+                maxValue: 2000,
+              },
             },
-            visible: true,
+          },
+          visible: true,
         },
+        */
     ],
     components: {
         view: {
@@ -1657,20 +1702,37 @@ const AXPGaugeChartWidget = {
  */
 class AXPLineChartWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
-        super(...arguments);
+        super();
         this.lineChartData = computed(() => this.getValue());
         this.lineChartOptions = computed(() => this.options());
+        this.setOptions({
+            ...this.options(),
+            showXAxis: true,
+            showYAxis: true,
+            yAxisStartsAtZero: true,
+            showGrid: true,
+            showVerticalGrid: true,
+            lineWidth: 2,
+            smoothLine: true,
+            showPoints: true,
+            pointRadius: 4,
+            fillOpacity: 80,
+            showTooltip: true,
+            showCrosshair: true,
+            animationEasing: 'cubic-out',
+            animationDuration: 800,
+        });
     }
     handleLineChartPointClick(event) {
         //console.log(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPLineChartWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPLineChartWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AXPLineChartWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ax-line-chart\n  (pointClick)=\"handleLineChartPointClick($event)\"\n  [data]=\"lineChartData()\"\n  [options]=\"lineChartOptions()\"\n></ax-line-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: AXLineChartComponent, selector: "ax-line-chart", inputs: ["data", "options"], outputs: ["pointClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXPLineChartWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [AXLineChartComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-line-chart\n  (pointClick)=\"handleLineChartPointClick($event)\"\n  [data]=\"lineChartData()\"\n  [options]=\"lineChartOptions()\"\n></ax-line-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
-        }] });
+        }], ctorParameters: () => [] });
 
 var lineChartWidget_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -1690,7 +1752,7 @@ const AXPLineChartWidget = {
         // ====== Chart Title ======
         {
             name: 'title',
-            title: 'Chart Title',
+            title: '@dashboard:widgets.line-chart.chart-title',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: '',
@@ -1706,64 +1768,10 @@ const AXPLineChartWidget = {
             },
             visible: true,
         },
-        // ====== Layout & Dimensions ======
-        {
-            name: 'width',
-            title: 'Width',
-            group: AXP_STYLING_PROPERTY_GROUP,
-            schema: {
-                defaultValue: null,
-                dataType: 'number',
-                interface: {
-                    name: 'width',
-                    path: 'options.width',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        minValue: 0,
-                        maxValue: 1200,
-                    },
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'height',
-            title: 'Height',
-            group: AXP_STYLING_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 300,
-                dataType: 'number',
-                interface: {
-                    name: 'height',
-                    path: 'options.height',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        minValue: 0,
-                        maxValue: 800,
-                    },
-                },
-            },
-            visible: true,
-        },
         // ====== Axis Settings ======
-        {
-            name: 'showXAxis',
-            title: 'Show X Axis',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showXAxis',
-                    path: 'options.showXAxis',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
         {
             name: 'xAxisLabel',
-            title: 'X Axis Label',
+            title: '@dashboard:widgets.line-chart.x-axis-label',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: '',
@@ -1776,24 +1784,9 @@ const AXPLineChartWidget = {
             },
             visible: true,
         },
-        {
-            name: 'showYAxis',
-            title: 'Show Y Axis',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showYAxis',
-                    path: 'options.showYAxis',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
         {
             name: 'yAxisLabel',
-            title: 'Y Axis Label',
+            title: '@dashboard:widgets.line-chart.y-axis-label',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: '',
@@ -1807,238 +1800,315 @@ const AXPLineChartWidget = {
             visible: true,
         },
         {
-            name: 'yAxisStartsAtZero',
-            title: 'Y Axis Starts At Zero',
+            name: 'fillArea',
+            title: '@dashboard:widgets.line-chart.fill-area',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
-                defaultValue: true,
+                defaultValue: false,
                 dataType: 'boolean',
                 interface: {
-                    name: 'yAxisStartsAtZero',
-                    path: 'options.yAxisStartsAtZero',
+                    name: 'fillArea',
+                    path: 'options.fillArea',
                     type: AXPWidgetsCatalog.toggle,
                 },
             },
             visible: true,
         },
+        /* Commented out properties
+        // ====== Layout & Dimensions ======
         {
-            name: 'showGrid',
-            title: 'Show Grid Lines',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showGrid',
-                    path: 'options.showGrid',
-                    type: AXPWidgetsCatalog.toggle,
-                },
+          name: 'width',
+          title: '@dashboard:widgets.line-chart.width',
+          group: AXP_STYLING_PROPERTY_GROUP,
+          schema: {
+            defaultValue: null,
+            dataType: 'number',
+            interface: {
+              name: 'width',
+              path: 'options.width',
+              type: AXPWidgetsCatalog.number,
+              options: {
+                minValue: 0,
+                maxValue: 1200,
+              },
             },
-            visible: true,
+          },
+          visible: true,
         },
         {
-            name: 'showVerticalGrid',
-            title: 'Show Vertical Grid',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showVerticalGrid',
-                    path: 'options.showVerticalGrid',
-                    type: AXPWidgetsCatalog.toggle,
-                },
+          name: 'height',
+          title: '@dashboard:widgets.line-chart.height',
+          group: AXP_STYLING_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 300,
+            dataType: 'number',
+            interface: {
+              name: 'height',
+              path: 'options.height',
+              type: AXPWidgetsCatalog.number,
+              options: {
+                minValue: 0,
+                maxValue: 800,
+              },
             },
-            visible: true,
+          },
+          visible: true,
         },
-        // ====== Line Appearance ======
+    
+        // ====== Axis Settings ======
         {
-            name: 'lineWidth',
-            title: 'Line Width',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 2,
-                dataType: 'number',
-                interface: {
-                    name: 'lineWidth',
-                    path: 'options.lineWidth',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '1-10',
-                        minValue: 1,
-                        maxValue: 10,
-                    },
-                },
+          name: 'showXAxis',
+          title: '@dashboard:widgets.line-chart.show-x-axis',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: true,
+            dataType: 'boolean',
+            interface: {
+              name: 'showXAxis',
+              path: 'options.showXAxis',
+              type: AXPWidgetsCatalog.toggle,
             },
-            visible: true,
+          },
+          visible: true,
         },
         {
-            name: 'smoothLine',
-            title: 'Smooth Line',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'smoothLine',
-                    path: 'options.smoothLine',
-                    type: AXPWidgetsCatalog.toggle,
-                },
+          name: 'showYAxis',
+          title: '@dashboard:widgets.line-chart.show-y-axis',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: true,
+            dataType: 'boolean',
+            interface: {
+              name: 'showYAxis',
+              path: 'options.showYAxis',
+              type: AXPWidgetsCatalog.toggle,
             },
-            visible: true,
+          },
+          visible: true,
         },
         {
-            name: 'showPoints',
-            title: 'Show Points',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showPoints',
-                    path: 'options.showPoints',
-                    type: AXPWidgetsCatalog.toggle,
-                },
+          name: 'yAxisStartsAtZero',
+          title: '@dashboard:widgets.line-chart.y-axis-starts-at-zero',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: true,
+            dataType: 'boolean',
+            interface: {
+              name: 'yAxisStartsAtZero',
+              path: 'options.yAxisStartsAtZero',
+              type: AXPWidgetsCatalog.toggle,
             },
-            visible: true,
+          },
+          visible: true,
         },
+    
         {
-            name: 'pointRadius',
-            title: 'Point Size',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 4,
-                dataType: 'number',
-                interface: {
-                    name: 'pointRadius',
-                    path: 'options.pointRadius',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '1-10',
-                        minValue: 1,
-                        maxValue: 10,
-                    },
-                },
+          name: 'showGrid',
+          title: '@dashboard:widgets.line-chart.show-grid',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: true,
+            dataType: 'boolean',
+            interface: {
+              name: 'showGrid',
+              path: 'options.showGrid',
+              type: AXPWidgetsCatalog.toggle,
+            },
+          },
+          visible: true,
+        },
+        {
+          name: 'showVerticalGrid',
+          title: '@dashboard:widgets.line-chart.show-vertical-grid',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: true,
+            dataType: 'boolean',
+            interface: {
+              name: 'showVerticalGrid',
+              path: 'options.showVerticalGrid',
+              type: AXPWidgetsCatalog.toggle,
+            },
+          },
+          visible: true,
+        },
+    
+        // ====== Line Appearance ======
+        {
+          name: 'lineWidth',
+          title: '@dashboard:widgets.line-chart.line-width',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 2,
+            dataType: 'number',
+            interface: {
+              name: 'lineWidth',
+              path: 'options.lineWidth',
+              type: AXPWidgetsCatalog.number,
+              options: {
+                placeholder: '1-10',
+                minValue: 1,
+                maxValue: 10,
+              },
+            },
+          },
+          visible: true,
+        },
+        {
+          name: 'smoothLine',
+          title: '@dashboard:widgets.line-chart.smooth-line',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: true,
+            dataType: 'boolean',
+            interface: {
+              name: 'smoothLine',
+              path: 'options.smoothLine',
+              type: AXPWidgetsCatalog.toggle,
             },
-            visible: true,
+          },
+          visible: true,
         },
         {
-            name: 'fillArea',
-            title: 'Fill Area',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: false,
-                dataType: 'boolean',
-                interface: {
-                    name: 'fillArea',
-                    path: 'options.fillArea',
-                    type: AXPWidgetsCatalog.toggle,
-                },
+          name: 'showPoints',
+          title: '@dashboard:widgets.line-chart.show-points',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: true,
+            dataType: 'boolean',
+            interface: {
+              name: 'showPoints',
+              path: 'options.showPoints',
+              type: AXPWidgetsCatalog.toggle,
             },
-            visible: true,
+          },
+          visible: true,
         },
         {
-            name: 'fillOpacity',
-            title: 'Fill Opacity',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 10,
-                dataType: 'number',
-                interface: {
-                    name: 'fillOpacity',
-                    path: 'options.fillOpacity',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '0-100',
-                        minValue: 0,
-                        maxValue: 100,
-                    },
-                },
+          name: 'pointRadius',
+          title: '@dashboard:widgets.line-chart.point-radius',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 4,
+            dataType: 'number',
+            interface: {
+              name: 'pointRadius',
+              path: 'options.pointRadius',
+              type: AXPWidgetsCatalog.number,
+              options: {
+                placeholder: '1-10',
+                minValue: 1,
+                maxValue: 10,
+              },
             },
-            visible: true,
+          },
+          visible: true,
         },
+        {
+          name: 'fillOpacity',
+          title: '@dashboard:widgets.line-chart.fill-opacity',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 80,
+            dataType: 'number',
+            interface: {
+              name: 'fillOpacity',
+              path: 'options.fillOpacity',
+              type: AXPWidgetsCatalog.number,
+              options: {
+                placeholder: '1-100',
+                minValue: 1,
+                maxValue: 100,
+              },
+            },
+          },
+          visible: true,
+        },
+    
         // ====== Tooltip Settings ======
         {
-            name: 'showTooltip',
-            title: 'Show Tooltip',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showTooltip',
-                    path: 'options.showTooltip',
-                    type: AXPWidgetsCatalog.toggle,
-                },
+          name: 'showTooltip',
+          title: '@dashboard:widgets.line-chart.show-tooltip',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: true,
+            dataType: 'boolean',
+            interface: {
+              name: 'showTooltip',
+              path: 'options.showTooltip',
+              type: AXPWidgetsCatalog.toggle,
             },
-            visible: true,
+          },
+          visible: true,
         },
         {
-            name: 'showCrosshair',
-            title: 'Show Crosshair',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: false,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showCrosshair',
-                    path: 'options.showCrosshair',
-                    type: AXPWidgetsCatalog.toggle,
-                },
+          name: 'showCrosshair',
+          title: '@dashboard:widgets.line-chart.show-crosshair',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: true,
+            dataType: 'boolean',
+            interface: {
+              name: 'showCrosshair',
+              path: 'options.showCrosshair',
+              type: AXPWidgetsCatalog.toggle,
             },
-            visible: true,
+          },
+          visible: true,
         },
+    
         // ====== Animation Settings ======
         {
-            name: 'animationEasing',
-            title: 'Animation Easing',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 'cubic-out',
-                dataType: 'string',
-                interface: {
-                    name: 'animationEasing',
-                    path: 'options.animationEasing',
-                    type: AXPWidgetsCatalog.select,
-                    options: {
-                        dataSource: [
-                            { value: 'linear', text: 'Linear' },
-                            { value: 'ease', text: 'Ease' },
-                            { value: 'ease-in', text: 'Ease In' },
-                            { value: 'ease-out', text: 'Ease Out' },
-                            { value: 'ease-in-out', text: 'Ease In Out' },
-                            { value: 'cubic', text: 'Cubic' },
-                            { value: 'cubic-in', text: 'Cubic In' },
-                            { value: 'cubic-out', text: 'Cubic Out' },
-                            { value: 'cubic-in-out', text: 'Cubic In Out' },
-                        ],
-                        textField: 'text',
-                        valueField: 'value',
-                    },
-                },
+          name: 'animationEasing',
+          title: '@dashboard:widgets.line-chart.animation-easing',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 'cubic-out',
+            dataType: 'string',
+            interface: {
+              name: 'animationEasing',
+              path: 'options.animationEasing',
+              type: AXPWidgetsCatalog.select,
+              options: {
+                dataSource: [
+                  { value: 'linear', text: 'Linear' },
+                  { value: 'ease', text: 'Ease' },
+                  { value: 'ease-in', text: 'Ease In' },
+                  { value: 'ease-out', text: 'Ease Out' },
+                  { value: 'ease-in-out', text: 'Ease In Out' },
+                  { value: 'cubic', text: 'Cubic' },
+                  { value: 'cubic-in', text: 'Cubic In' },
+                  { value: 'cubic-out', text: 'Cubic Out' },
+                  { value: 'cubic-in-out', text: 'Cubic In Out' },
+                ],
+                textField: 'text',
+                valueField: 'value',
+              },
             },
-            visible: true,
+          },
+          visible: true,
         },
         {
-            name: 'animationDuration',
-            title: 'Animation Duration',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 800,
-                dataType: 'number',
-                interface: {
-                    name: 'animationDuration',
-                    path: 'options.animationDuration',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '0-2000',
-                        minValue: 0,
-                        maxValue: 2000,
-                    },
-                },
+          name: 'animationDuration',
+          title: '@dashboard:widgets.line-chart.animation-duration',
+          group: AXP_APPEARANCE_PROPERTY_GROUP,
+          schema: {
+            defaultValue: 800,
+            dataType: 'number',
+            interface: {
+              name: 'animationDuration',
+              path: 'options.animationDuration',
+              type: AXPWidgetsCatalog.number,
+              options: {
+                placeholder: '0-2000',
+                minValue: 0,
+                maxValue: 2000,
+              },
             },
-            visible: true,
+          },
+          visible: true,
         },
+        */
     ],
     components: {
         view: {
@@ -2047,12 +2117,12 @@ const AXPLineChartWidget = {
     },
     meta: {
         dimensions: {
-            width: 5,
-            height: 6,
+            width: 3,
+            height: 4,
             minWidth: 2,
             minHeight: 2,
             maxWidth: 6,
-            maxHeight: 7,
+            maxHeight: 6,
         },
     },
 };
@@ -2150,7 +2220,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 +2343,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 +2371,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 +2386,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 +2406,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 +2425,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 +2444,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 +2459,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 +2474,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 +2489,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 +2504,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 +2525,7 @@ const AXPTaskListWidget = {
     },
     meta: {
         dimensions: {
-            width: 5,
+            width: 3,
             height: 7,
             minWidth: 3,
             minHeight: 4,
@@ -3080,8 +3160,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 +3181,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 +3286,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 +3308,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}.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}.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 +3384,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 +3460,7 @@ const AXPWeatherWidget = {
         // },
         {
             name: 'showHumidity',
-            title: 'Show Humidity',
+            title: '@dashboard:widgets.weather.show-humidity',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -3355,7 +3475,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 +3490,7 @@ const AXPWeatherWidget = {
         },
         {
             name: 'showForecast',
-            title: 'Show Forecast',
+            title: '@dashboard:widgets.weather.show-forecast',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
@@ -3385,7 +3505,7 @@ const AXPWeatherWidget = {
         },
         {
             name: 'forecastDays',
-            title: 'Forecast Days',
+            title: '@dashboard:widgets.weather.forecast-days',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 5,
@@ -3406,7 +3526,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 +3544,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 +3563,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 +3578,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 +3625,7 @@ class AXPDashboardShortcutWidgetViewComponent extends AXPLayoutWidgetComponent {
         super.ngOnInit();
         if (!this.color()) {
             this.setOptions({
-                color: AXPDataGenerator.color()
+                color: AXPDataGenerator.color(),
             });
         }
     }
@@ -3531,8 +3651,8 @@ class AXPDashboardShortcutWidgetViewComponent extends AXPLayoutWidgetComponent {
                         title: result.title,
                         description: result.description,
                         icon: result.icon,
-                        command: result.command
-                    }
+                        command: result.command,
+                    },
                 });
             }
         }
@@ -3558,56 +3678,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 +3755,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 +3782,7 @@ const AXPDashboardShortcutWidget = {
         view: {
             component: () => Promise.resolve().then(function () { return dashboardShortcutWidgetView_component; }).then((c) => c.AXPDashboardShortcutWidgetViewComponent),
         },
-    }
+    },
 };
 
 class AXMMenuProvider {
@@ -3843,6 +3978,7 @@ class AXMDashboardWidgetWrapperComponent {
             });
         });
         this.hasConfiguration = input(true);
+        this.isLocked = input(false);
         this.isDropdownOpen = signal(false);
     }
     #init;
@@ -3863,11 +3999,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:';
@@ -3880,7 +4016,6 @@ class AXMAddDashboardPopup extends AXBasePageComponent {
     constructor() {
         super(...arguments);
         this.scope = RootConfig.config.i18n;
-        this.isAdmin = false;
         this.roleService = inject(AXMOrganizationManagementRoleEntityService);
         this.sessionService = inject(AXPSessionService);
         this.title = model('');
@@ -3888,6 +4023,7 @@ class AXMAddDashboardPopup extends AXBasePageComponent {
         this.selectedRoleIds = model([]);
         this.isDisabled = model(false);
         this.isLocked = model(false);
+        this.isAdmin = model(false);
         this.roles = [];
     }
     get isValid() {
@@ -3897,14 +4033,20 @@ class AXMAddDashboardPopup extends AXBasePageComponent {
         // Set initial values from input data
         this.title.set(this.data?.title || '');
         this.description.set(this.data?.description || '');
-        this.selectedRoleIds.set(this.data?.roleIds || []);
         this.isDisabled.set(this.data?.isDeleted || false);
         this.isLocked.set(this.data?.locked || false);
+        this.isAdmin.set(this.data?.isAdmin || false);
         // Load roles if admin
-        if (this.isAdmin) {
+        if (this.isAdmin()) {
             try {
                 const result = await this.roleService.query({ skip: 0, take: 100 });
-                this.roles = result.items || [];
+                if (result.items && result.items.length > 0) {
+                    this.roles = result.items.map((i) => ({
+                        id: i.id,
+                        title: i.title,
+                    }));
+                }
+                this.selectedRoleIds.set(this.roles.filter((i) => this.data?.roleIds?.includes(i.id)).map((i) => i.id));
             }
             catch (error) {
                 console.error('Error loading roles:', error);
@@ -3916,10 +4058,10 @@ class AXMAddDashboardPopup extends AXBasePageComponent {
         this.close({
             title: this.title()?.trim(),
             description: this.description()?.trim(),
-            roleIds: this.isAdmin ? this.selectedRoleIds() : undefined,
-            isDeleted: this.isAdmin ? this.isDisabled() : undefined,
-            locked: this.isAdmin ? this.isLocked() : undefined,
-            scope: this.isAdmin ? 'T' : 'U',
+            roleIds: this.isAdmin() ? this.selectedRoleIds() : undefined,
+            isDeleted: this.isAdmin() ? this.isDisabled() : undefined,
+            locked: this.isAdmin() ? this.isLocked() : undefined,
+            scope: this.isAdmin() ? 'T' : 'U',
             createdBy: this.sessionService.user?.id,
             createdAt: new Date(),
             updatedBy: this.sessionService.user?.id,
@@ -3928,7 +4070,7 @@ class AXMAddDashboardPopup extends AXBasePageComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMAddDashboardPopup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXMAddDashboardPopup, isStandalone: true, selector: "ng-component", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, selectedRoleIds: { classPropertyName: "selectedRoleIds", publicName: "selectedRoleIds", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isLocked: { classPropertyName: "isLocked", publicName: "isLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "titleChange", description: "descriptionChange", selectedRoleIds: "selectedRoleIdsChange", isDisabled: "isDisabledChange", isLocked: "isLockedChange" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXMAddDashboardPopup, isStandalone: true, selector: "ng-component", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, selectedRoleIds: { classPropertyName: "selectedRoleIds", publicName: "selectedRoleIds", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isLocked: { classPropertyName: "isLocked", publicName: "isLocked", isSignal: true, isRequired: false, transformFunction: null }, isAdmin: { classPropertyName: "isAdmin", publicName: "isAdmin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "titleChange", description: "descriptionChange", selectedRoleIds: "selectedRoleIdsChange", isDisabled: "isDisabledChange", isLocked: "isLockedChange", isAdmin: "isAdminChange" }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-card-body ax-p-4">
       <div class="ax-flex ax-flex-col ax-gap-2 ax-pb-4">
         <p class="ax-font-semibold">{{ 'title' | translate | async }}</p>
@@ -3940,7 +4082,7 @@ class AXMAddDashboardPopup extends AXBasePageComponent {
         </ax-text-box>
       </div>
 
-      @if (isAdmin) {
+      @if (isAdmin()) {
         <div class="ax-flex ax-flex-col ax-gap-2 ax-mt-4">
           <p class="ax-font-semibold">{{ 'roles' | translate: { scope } | async }}</p>
           <ax-select-box
@@ -3955,14 +4097,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 +4126,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,
@@ -3999,7 +4143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         </ax-text-box>
       </div>
 
-      @if (isAdmin) {
+      @if (isAdmin()) {
         <div class="ax-flex ax-flex-col ax-gap-2 ax-mt-4">
           <p class="ax-font-semibold">{{ 'roles' | translate: { scope } | async }}</p>
           <ax-select-box
@@ -4014,14 +4158,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 +4197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         CommonModule,
                         AXTranslationModule,
                         AXSelectBoxModule,
-                        AXCheckBoxModule,
+                        AXSwitchModule,
                     ],
                     standalone: true,
                 }]
@@ -4120,6 +4266,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,8 +4276,8 @@ class AXMDashboardPopupService {
             size: 'sm',
             draggable: true,
             hasBackdrop: true,
-            title: 'Dashboard Info',
-            data: dashboardData,
+            title: await this.translateService.translateAsync('dashboard-info', { scope: 'dashboard' }),
+            data: { data: dashboardData },
         });
         if (!result.data) {
             return;
@@ -4147,7 +4294,7 @@ class AXMDashboardPopupService {
             size: 'sm',
             draggable: true,
             hasBackdrop: true,
-            title: 'Widget Configuration',
+            title: await this.translateService.translateAsync('widget-configuration', { scope: 'dashboard' }),
             data: { widget },
         });
         if (!result.data) {
@@ -4167,106 +4314,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+// Helper functions
+const createInitialState = () => ({
+    dashboards: [],
+    allDashboards: [],
+    currentDashboardId: null,
+    isAdmin: false,
+    dashboardsOption: {
+        float: false,
+        cellHeight: 75,
+        gap: 5,
+        minRow: 9,
+        column: 12,
+        responsiveLayout: [
+            { column: 12, width: 2048 },
+            { column: 6, width: 768 },
+            { column: 1, width: 480 },
+        ],
+    },
+    isLoading: false,
+});
+const modelToDashboardLayout = (model) => ({
+    id: model.id || '',
+    title: model.title,
+    description: model.description,
+    widgets: model.widgets || [],
+    roleIds: model.roleIds,
+    isDeleted: model.isDeleted,
+    locked: model.locked,
+    createdAt: model.createdAt,
+    updatedAt: model.updatedAt,
+    createdBy: model.createdBy,
+    updatedBy: model.updatedBy,
+    scope: model.scope,
+});
+const dashboardLayoutToModel = (layout) => ({
+    id: layout.id,
+    name: layout.title,
+    title: layout.title,
+    description: layout.description || '',
+    widgets: layout.widgets,
+    roleIds: layout.roleIds,
+    isDeleted: layout.isDeleted,
+    locked: layout.locked,
+    createdAt: layout.createdAt,
+    updatedAt: layout.updatedAt,
+    createdBy: layout.createdBy,
+    updatedBy: layout.updatedBy,
+    scope: layout.scope,
+});
 // Create the SignalStore
 const AXMDashboardStore = signalStore({ providedIn: 'root' }, 
 // Initial State Definition
-withState(() => {
-    // Define initial empty state
-    const state = {
-        dashboards: [],
-        allDashboards: [],
-        currentDashboardId: null,
-        isAdmin: false,
-        dashboardsOption: {
-            float: true,
-            cellHeight: 75,
-            gap: 5,
-            minRow: 9,
-            column: 12,
-            responsiveLayout: [
-                { column: 12, width: 2048 },
-                { column: 6, width: 768 },
-                { column: 1, width: 480 },
-            ],
-        },
-        isLoading: false,
-    };
-    return state;
-}), 
+withState(() => createInitialState()), 
 // Computed Properties
-withComputed((state, sessionService = inject(AXPSessionService)) => ({
-    currentDashboard: computed(() => {
-        return state.dashboards().find((dashboard) => dashboard.id === state.currentDashboardId()) || null;
-    }),
-    isAdmin: computed(() => {
-        return state.isAdmin();
-    }),
-    allDashboards: computed(() => {
-        return state.allDashboards();
-    }),
-    dashboardsOption: computed(() => {
+withComputed((state, sessionService = inject(AXPSessionService), layoutThemeService = inject(AXPLayoutThemeService)) => ({
+    selectedDashboard: computed(() => state.dashboards().find((dashboard) => dashboard.id === state.currentDashboardId()) || null),
+    isUserAdmin: computed(() => state.isAdmin()),
+    availableDashboards: computed(() => state.allDashboards()),
+    currentLayoutOptions: computed(() => {
         const currentDashboard = state.dashboards().find((dashboard) => dashboard.id === state.currentDashboardId());
         const baseOptions = state.dashboardsOption();
-        // If no current dashboard, return base options
-        if (!currentDashboard) {
+        if (!currentDashboard)
             return baseOptions;
+        if (!layoutThemeService.isDesktopDevice()) {
+            return { ...baseOptions, disableDrag: true, disableResize: true };
         }
-        // If admin, no restrictions
-        if (state.isAdmin()) {
+        if (baseOptions.disableDrag !== undefined && baseOptions.disableResize !== undefined) {
             return baseOptions;
         }
-        // Check if dashboard is locked
         if (currentDashboard.locked === true) {
-            return {
-                ...baseOptions,
-                disableDrag: true,
-                disableResize: true,
-            };
+            return { ...baseOptions, disableDrag: true, disableResize: true };
         }
-        // Get user role
+        if (state.isAdmin())
+            return baseOptions;
         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', disable drag and resize
         if (!state.isAdmin() && hasUserRole && currentDashboard.scope === 'T') {
-            return {
-                ...baseOptions,
-                disableDrag: true,
-                disableResize: true,
-            };
+            return { ...baseOptions, disableDrag: true, disableResize: true };
         }
-        // Otherwise, return base options
         return baseOptions;
     }),
-    canConfigureWidget: computed(() => {
-        return (widget) => {
-            const currentDashboard = state.dashboards().find((dashboard) => dashboard.id === state.currentDashboardId());
-            if (!currentDashboard)
-                return true;
-            // If admin, always allow configuration
-            if (state.isAdmin())
-                return widget.node?.options?.['hasConfiguration'] ?? true;
-            // If dashboard is locked, no configuration allowed
-            if (currentDashboard.locked === true) {
-                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', disable configuration
-            if (hasUserRole && currentDashboard.scope === 'T') {
-                return false;
-            }
-            // Otherwise, use the widget's configuration value or default to true
+    canConfigureWidget: computed(() => (widget) => {
+        const currentDashboard = state.dashboards().find((dashboard) => dashboard.id === state.currentDashboardId());
+        if (!currentDashboard)
+            return true;
+        if (state.isAdmin())
             return widget.node?.options?.['hasConfiguration'] ?? true;
-        };
+        if (currentDashboard.locked === true)
+            return false;
+        const userRole = sessionService.user ? sessionService.user['role'] : undefined;
+        const hasRoleIds = currentDashboard.roleIds && Array.isArray(currentDashboard.roleIds) && currentDashboard.roleIds.length > 0;
+        const hasUserRole = userRole && hasRoleIds && currentDashboard.roleIds?.includes(userRole);
+        if (hasUserRole && currentDashboard.scope === 'T')
+            return false;
+        return widget.node?.options?.['hasConfiguration'] ?? true;
+    }),
+    isWidgetLocked: computed(() => (widget) => {
+        const currentDashboard = state.dashboards().find((dashboard) => dashboard.id === state.currentDashboardId());
+        if (!currentDashboard)
+            return false;
+        if (currentDashboard.locked === true)
+            return true;
+        if (state.isAdmin())
+            return false;
+        const userRole = sessionService.user ? sessionService.user['role'] : undefined;
+        const hasRoleIds = currentDashboard.roleIds && Array.isArray(currentDashboard.roleIds) && currentDashboard.roleIds.length > 0;
+        const hasUserRole = userRole && hasRoleIds && currentDashboard.roleIds?.includes(userRole);
+        return hasUserRole && currentDashboard.scope === 'T';
     }),
 })), 
 // 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();
@@ -4275,126 +4435,112 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
     async function loadDashboards() {
         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);
-            // Get current dashboard from settings
             const currentDashboardId = await settingService
                 .scope(AXPPlatformScope.User)
                 .get(AXPHomeDashboardSetting.CurrentDashboard);
             let newCurrentDashboardId = null;
             if (dashboards.length > 0) {
-                // Check if currentDashboardId exists and is valid
                 const dashboardExists = currentDashboardId && dashboards.some((d) => d.id === currentDashboardId);
-                if (dashboardExists) {
-                    newCurrentDashboardId = currentDashboardId;
-                }
-                else {
-                    // If current dashboard is not valid or not set, use the first one
-                    newCurrentDashboardId = dashboards[0].id;
-                    // Save to user settings
+                newCurrentDashboardId = dashboardExists ? currentDashboardId : dashboards[0].id;
+                if (!dashboardExists) {
                     settingService
                         .scope(AXPPlatformScope.User)
                         .set(AXPHomeDashboardSetting.CurrentDashboard, newCurrentDashboardId);
                 }
             }
-            // First, update the state with all dashboards
             patchState(store, {
                 allDashboards: dashboards,
-                dashboards: dashboards, // Initially set all dashboards
+                dashboards: dashboards,
                 isLoading: false,
                 currentDashboardId: newCurrentDashboardId,
             });
-            // After state is updated, apply filtering if needed
-            if (store.isAdmin() !== undefined) {
-                // We need to use the method from the return object, so we'll call it later
-            }
         }
         catch (error) {
             console.error('Error loading dashboards:', error);
             patchState(store, { isLoading: false });
         }
     }
-    // Convert entity model to dashboard layout
-    function modelToDashboardLayout(model) {
-        return {
-            id: model.id || '',
-            title: model.title,
-            description: model.description,
-            widgets: model.widgets || [],
-            roleIds: model.roleIds,
-            isDeleted: model.isDeleted,
-            locked: model.locked,
-            createdAt: model.createdAt,
-            updatedAt: model.updatedAt,
-            createdBy: model.createdBy,
-            updatedBy: model.updatedBy,
-            scope: model.scope,
-        };
-    }
-    // Convert dashboard layout to entity model
-    function dashboardLayoutToModel(layout) {
-        return {
-            id: layout.id,
-            name: layout.title,
-            title: layout.title,
-            description: layout.description || '',
-            widgets: layout.widgets,
-            roleIds: layout.roleIds,
-            isDeleted: layout.isDeleted,
-            locked: layout.locked,
-            createdAt: layout.createdAt,
-            updatedAt: layout.updatedAt,
-            createdBy: layout.createdBy,
-            updatedBy: layout.updatedBy,
-            scope: layout.scope,
-        };
-    }
     return {
-        // Set current dashboard
         setCurrentDashboard(dashboardId) {
             patchState(store, { currentDashboardId: dashboardId });
             settingService.scope(AXPPlatformScope.User).set(AXPHomeDashboardSetting.CurrentDashboard, dashboardId);
         },
-        // Add a new dashboard
         async addDashboard() {
             try {
-                const newDashboard = await dashboardPopup.generateDashboardLayout({}, store.isAdmin());
+                const newDashboard = await dashboardPopup.generateDashboardLayout({}, store.isUserAdmin());
                 if (!newDashboard)
                     return;
-                // Add creation and update metadata
                 const userId = sessionService.user?.id;
                 const now = new Date();
-                newDashboard.createdBy = userId;
-                newDashboard.createdAt = now;
-                newDashboard.updatedBy = userId;
-                newDashboard.updatedAt = now;
-                newDashboard.scope = store.isAdmin() ? 'T' : 'U';
-                // Create dashboard model and save to service
-                const dashboardModel = dashboardLayoutToModel(newDashboard);
+                const dashboardWithMetadata = {
+                    ...newDashboard,
+                    createdBy: userId,
+                    createdAt: now,
+                    updatedBy: userId,
+                    updatedAt: now,
+                    scope: store.isUserAdmin() ? 'T' : 'U',
+                    widgets: [],
+                };
+                const dashboardModel = dashboardLayoutToModel(dashboardWithMetadata);
                 const createdDashboardId = await dashboardService.insertOne(dashboardModel);
-                newDashboard.id = createdDashboardId;
-                newDashboard.widgets = [];
-                // Update both allDashboards and dashboards states
-                const updatedAllDashboards = [...store.allDashboards(), newDashboard];
-                const updatedDashboards = [...store.dashboards(), newDashboard];
+                dashboardWithMetadata.id = createdDashboardId;
+                const updatedAllDashboards = [...store.availableDashboards(), dashboardWithMetadata];
+                const updatedDashboards = [...store.dashboards(), dashboardWithMetadata];
                 patchState(store, {
                     allDashboards: updatedAllDashboards,
                     dashboards: updatedDashboards,
-                    currentDashboardId: newDashboard.id,
+                    currentDashboardId: dashboardWithMetadata.id,
                 });
-                // Save current dashboard to settings
-                settingService.scope(AXPPlatformScope.User).set(AXPHomeDashboardSetting.CurrentDashboard, newDashboard.id);
+                settingService
+                    .scope(AXPPlatformScope.User)
+                    .set(AXPHomeDashboardSetting.CurrentDashboard, dashboardWithMetadata.id);
             }
             catch (error) {
                 console.error('Error adding dashboard:', error);
             }
         },
-        // Add a widget to the current dashboard
+        async editDashboard() {
+            const currentDashboard = store.selectedDashboard();
+            if (!currentDashboard)
+                return;
+            try {
+                const editedDashboard = await dashboardPopup.generateDashboardLayout({
+                    title: currentDashboard.title,
+                    description: currentDashboard.description,
+                    roleIds: currentDashboard.roleIds,
+                    scope: currentDashboard.scope,
+                }, store.isUserAdmin());
+                if (!editedDashboard)
+                    return;
+                const userId = sessionService.user?.id;
+                const now = new Date();
+                const updatedDashboard = {
+                    ...currentDashboard,
+                    ...editedDashboard,
+                    updatedBy: userId,
+                    updatedAt: now,
+                };
+                await dashboardService.updateOne(updatedDashboard.id, dashboardLayoutToModel(updatedDashboard));
+                const updatedAllDashboards = store
+                    .availableDashboards()
+                    .map((d) => (d.id === updatedDashboard.id ? updatedDashboard : d));
+                const updatedDashboards = store
+                    .dashboards()
+                    .map((d) => (d.id === updatedDashboard.id ? updatedDashboard : d));
+                patchState(store, {
+                    allDashboards: updatedAllDashboards,
+                    dashboards: updatedDashboards,
+                });
+            }
+            catch (error) {
+                console.error('Error editing dashboard:', error);
+            }
+        },
         async addWidget() {
-            if (!store.currentDashboardId()) {
+            if (!store.selectedDashboard()) {
                 console.warn('No current dashboard selected');
                 return;
             }
@@ -4402,57 +4548,43 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
                 const widgets = await widgetPickerService.showPicker({
                     groups: [AXPWidgetGroupEnum.DashboardWidget],
                 });
-                //remove meta from widgets //TODO TEMPORARY FIX
-                const filteredWidgets = widgets.map(({ __meta__, ...rest }) => rest);
-                if (filteredWidgets[0]?.type === 'sticky-note') {
-                    if (!filteredWidgets[0].options) {
-                        filteredWidgets[0].options = {};
+                const filteredWidgets = widgets.map(({ __meta__, ...rest }) => {
+                    const widget = rest;
+                    if (widget.type === 'sticky-note' && !widget.options) {
+                        widget.options = { hasConfiguration: false };
                     }
-                    filteredWidgets[0].options.hasConfiguration = false;
-                }
-                filteredWidgets.forEach((widget) => {
                     const randomId = AXPDataGenerator.uuid();
-                    widget.name = widget?.type + '-' + randomId;
-                    widget.path = widget?.type + '-' + randomId;
-                });
-                // Step 2: Convert the selected widgets into AXPDashboardWidgetData format
-                const convertedWidgets = filteredWidgets.map((widget) => {
-                    const id = AXPDataGenerator.uuid();
-                    return {
-                        config: {
-                            height: widget?.meta?.dimensions?.height ?? 2,
-                            width: widget?.meta?.dimensions?.width ?? 2,
-                            minHeight: widget?.meta?.dimensions?.minHeight,
-                            minWidth: widget?.meta?.dimensions?.minWidth,
-                            maxHeight: widget?.meta?.dimensions?.maxHeight,
-                            maxWidth: widget?.meta?.dimensions?.maxWidth,
-                            id,
-                        },
-                        node: { ...widget, name: id },
-                    };
-                });
-                // Step 3: Update the dashboards
-                const updatedDashboards = store.dashboards().map((dashboard) => {
-                    if (dashboard.id === store.currentDashboardId()) {
-                        return {
-                            ...dashboard,
-                            widgets: [...dashboard.widgets, ...convertedWidgets],
-                        };
-                    }
-                    return dashboard;
+                    widget.name = `${widget.type}-${randomId}`;
+                    widget.path = `${widget.type}-${randomId}`;
+                    return widget;
                 });
-                // Step 4: Save the updated dashboard to the service
-                const currentDashboard = updatedDashboards.find((d) => d.id === store.currentDashboardId());
-                if (currentDashboard) {
-                    await dashboardService.updateOne(currentDashboard.id, dashboardLayoutToModel(currentDashboard));
-                }
+                const convertedWidgets = filteredWidgets.map((widget) => ({
+                    config: {
+                        height: widget?.meta?.dimensions?.height ?? 2,
+                        width: widget?.meta?.dimensions?.width ?? 2,
+                        minHeight: widget?.meta?.dimensions?.minHeight,
+                        minWidth: widget?.meta?.dimensions?.minWidth,
+                        maxHeight: widget?.meta?.dimensions?.maxHeight,
+                        maxWidth: widget?.meta?.dimensions?.maxWidth,
+                        id: AXPDataGenerator.uuid(),
+                    },
+                    node: { ...widget, name: widget.name },
+                }));
+                const currentDashboard = store.selectedDashboard();
+                const updatedDashboard = {
+                    ...currentDashboard,
+                    widgets: [...currentDashboard.widgets, ...convertedWidgets],
+                };
+                await dashboardService.updateOne(updatedDashboard.id, dashboardLayoutToModel(updatedDashboard));
+                const updatedDashboards = store
+                    .dashboards()
+                    .map((d) => (d.id === updatedDashboard.id ? updatedDashboard : d));
                 patchState(store, { dashboards: updatedDashboards });
             }
             catch (error) {
                 console.error('Error adding widget:', error);
             }
         },
-        // Remove a dashboard
         async removeDashboard(id) {
             if (!id) {
                 console.warn('No dashboard ID provided for removal');
@@ -4461,17 +4593,13 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
             try {
                 const dialogResult = await dialogService.confirm(await translationService.translateAsync('workflow.warning'), await translationService.translateAsync('workflow.confirm-delete'), 'danger', 'horizontal');
                 if (dialogResult.result) {
-                    // Delete from service
                     await dashboardService.deleteOne(id);
-                    // Remove the dashboard from both state arrays
-                    const updatedAllDashboards = store.allDashboards().filter((dashboard) => dashboard.id !== id);
+                    const updatedAllDashboards = store.availableDashboards().filter((dashboard) => dashboard.id !== id);
                     const updatedDashboards = store.dashboards().filter((dashboard) => dashboard.id !== id);
-                    // Update state and select a new current dashboard if needed
                     let newCurrentDashboardId = store.currentDashboardId();
                     if (id === store.currentDashboardId()) {
                         newCurrentDashboardId =
                             updatedDashboards.length > 0 ? updatedDashboards[updatedDashboards.length - 1].id : null;
-                        // Save to settings if we changed the current dashboard
                         if (newCurrentDashboardId) {
                             settingService
                                 .scope(AXPPlatformScope.User)
@@ -4489,7 +4617,6 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
                 console.error('Error removing dashboard:', error);
             }
         },
-        // Remove a widget from a dashboard
         async removeWidget(dashboardId, widgetId) {
             const currentDashboard = store.dashboards().find((d) => d.id === dashboardId);
             if (!currentDashboard)
@@ -4498,88 +4625,56 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
                 ...currentDashboard,
                 widgets: currentDashboard.widgets.filter((widget) => widget.config.id !== widgetId),
             };
-            // Save to service
             await dashboardService.updateOne(dashboardId, dashboardLayoutToModel(updatedDashboard));
-            // Update local state
             const updatedDashboards = store
                 .dashboards()
                 .map((dashboard) => (dashboard.id === dashboardId ? updatedDashboard : dashboard));
             patchState(store, { dashboards: updatedDashboards });
         },
-        // Handle configuration changes
         async handleConfigChange(dashboard) {
-            // Save to service
             await dashboardService.updateOne(dashboard.id, dashboardLayoutToModel(dashboard));
-            // Update local state
             const updatedDashboards = store.dashboards().map((d) => (d.id === dashboard.id ? dashboard : d));
             patchState(store, {
                 dashboards: updatedDashboards,
                 currentDashboardId: dashboard.id,
             });
-            // Save current dashboard to settings
             settingService.scope(AXPPlatformScope.User).set(AXPHomeDashboardSetting.CurrentDashboard, dashboard.id);
         },
-        // Handle grid layout changes
         async onGridChange(event) {
-            if (!store.currentDashboard()) {
-                console.warn('No current dashboard for grid change');
+            if (!layoutThemeService.isDesktopDevice() || !store.selectedDashboard())
                 return;
-            }
-            // Extract nodes from the event and remove the `element` property
             const nodes = event.nodes.map(({ element, ...rest }) => rest);
-            // Update the current dashboard
-            const currentDashboard = store.currentDashboard();
+            const currentDashboard = store.selectedDashboard();
             const updatedWidgets = currentDashboard.widgets.map((widget) => {
                 const updatedNode = nodes.find((node) => node.id === widget.config.id);
-                if (updatedNode) {
-                    return {
-                        ...widget,
-                        config: updatedNode,
-                    };
-                }
-                return widget;
+                return updatedNode ? { ...widget, config: updatedNode } : widget;
             });
             const updatedDashboard = {
                 ...currentDashboard,
                 widgets: updatedWidgets,
             };
-            // Save to service
             await dashboardService.updateOne(updatedDashboard.id, dashboardLayoutToModel(updatedDashboard));
-            // Update the dashboards
             const updatedDashboards = store
                 .dashboards()
                 .map((dashboard) => (dashboard.id === updatedDashboard.id ? updatedDashboard : dashboard));
             patchState(store, { dashboards: updatedDashboards });
         },
-        // Handle widget configuration
         async handlePopupConfiguration(widgetNode) {
-            if (!store.currentDashboard()) {
-                console.warn('No current dashboard selected');
+            if (!store.selectedDashboard())
                 return;
-            }
             try {
                 const updatedNode = await dashboardPopup.handlePopupConfiguration(widgetNode);
-                if (!updatedNode) {
+                if (!updatedNode)
                     return;
-                }
-                // Update the current dashboard's widget with the new configuration
-                const currentDashboard = store.currentDashboard();
-                const updatedWidgets = currentDashboard.widgets.map((widget) => {
-                    if (widget.node?.name === widgetNode.name && widget.node?.path === widgetNode.path) {
-                        return {
-                            ...widget,
-                            node: updatedNode,
-                        };
-                    }
-                    return widget;
-                });
+                const currentDashboard = store.selectedDashboard();
+                const updatedWidgets = currentDashboard.widgets.map((widget) => widget.node?.name === widgetNode.name && widget.node?.path === widgetNode.path
+                    ? { ...widget, node: updatedNode }
+                    : widget);
                 const updatedDashboard = {
                     ...currentDashboard,
                     widgets: updatedWidgets,
                 };
-                // Save to service
                 await dashboardService.updateOne(updatedDashboard.id, dashboardLayoutToModel(updatedDashboard));
-                // Update the dashboards state
                 const updatedDashboards = store
                     .dashboards()
                     .map((dashboard) => (dashboard.id === updatedDashboard.id ? updatedDashboard : dashboard));
@@ -4589,74 +4684,47 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
                 console.error('Error handling widget configuration:', error);
             }
         },
-        // Handle widget value changes
         async handleValueChanged(widgetNode, data) {
-            if (!store.currentDashboard()) {
-                console.warn('No current dashboard selected');
+            if (!store.selectedDashboard())
                 return;
-            }
             try {
-                // Update the current dashboard's widget with the new value
-                const currentDashboard = store.currentDashboard();
-                const updatedWidgets = currentDashboard.widgets.map((widget) => {
-                    if (widget.node && widget.node.name === widgetNode.name && widget.node.path === widgetNode.path) {
-                        return {
-                            ...widget,
-                            node: {
-                                ...widget.node,
-                                defaultValue: data,
-                            },
-                        };
-                    }
-                    return widget;
-                });
+                const currentDashboard = store.selectedDashboard();
+                const updatedWidgets = currentDashboard.widgets.map((widget) => widget.node && widget.node.name === widgetNode.name && widget.node.path === widgetNode.path
+                    ? { ...widget, node: { ...widget.node, defaultValue: data } }
+                    : widget);
                 const updatedDashboard = {
                     ...currentDashboard,
                     widgets: updatedWidgets,
                 };
-                // Save to service
                 await dashboardService.updateOne(updatedDashboard.id, dashboardLayoutToModel(updatedDashboard));
-                // Update the dashboards state
                 const updatedDashboards = store
                     .dashboards()
                     .map((dashboard) => (dashboard.id === updatedDashboard.id ? updatedDashboard : dashboard));
-                // patchState(store, { dashboards: updatedDashboards });
+                patchState(store, { dashboards: updatedDashboards });
             }
             catch (error) {
                 console.error('Error handling widget value change:', error);
             }
         },
-        // Handle widget options changes
         async handleOptionsChanged(widgetNode, data) {
-            if (!store.currentDashboard()) {
-                console.warn('No current dashboard selected');
+            if (!store.selectedDashboard())
                 return;
-            }
             try {
-                // Update the current dashboard's widget with the new options
-                const currentDashboard = store.currentDashboard();
-                const updatedWidgets = currentDashboard.widgets.map((widget) => {
-                    if (widget.node && widget.node.name === widgetNode.name && widget.node.path === widgetNode.path) {
-                        return {
-                            ...widget,
-                            node: {
-                                ...widget.node,
-                                options: {
-                                    ...(widget.node.options || {}),
-                                    ...data,
-                                },
-                            },
-                        };
+                const currentDashboard = store.selectedDashboard();
+                const updatedWidgets = currentDashboard.widgets.map((widget) => widget.node && widget.node.name === widgetNode.name && widget.node.path === widgetNode.path
+                    ? {
+                        ...widget,
+                        node: {
+                            ...widget.node,
+                            options: { ...(widget.node.options || {}), ...data },
+                        },
                     }
-                    return widget;
-                });
+                    : widget);
                 const updatedDashboard = {
                     ...currentDashboard,
                     widgets: updatedWidgets,
                 };
-                // Save to service
                 await dashboardService.updateOne(updatedDashboard.id, dashboardLayoutToModel(updatedDashboard));
-                // Update the dashboards state
                 const updatedDashboards = store
                     .dashboards()
                     .map((dashboard) => (dashboard.id === updatedDashboard.id ? updatedDashboard : dashboard));
@@ -4666,112 +4734,70 @@ 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 });
-            }
+        setIsAdmin(isAdmin) {
+            patchState(store, { isAdmin });
         },
         filterDashboardsByScope(isAdmin) {
-            // Get all dashboards from the stored allDashboards array
-            const allDashboards = store.allDashboards();
-            // Get user ID and role from session service
+            const allDashboards = store.availableDashboards();
             const userId = sessionService.user?.id;
             const userRole = sessionService.user ? sessionService.user['role'] : undefined;
             if (!userId) {
-                // If no user ID, don't filter
                 patchState(store, { dashboards: allDashboards });
                 return;
             }
-            // Apply filtering based on user permissions
-            let filteredDashboards = allDashboards;
-            if (isAdmin) {
-                // Admin sees only tenant-level dashboards
-                filteredDashboards = allDashboards.filter((dashboard) => dashboard.scope === 'T');
-            }
-            else {
-                // Regular users see:
-                // 1. User-level dashboards they created
-                // 2. Tenant-level dashboards where their role is included AND isDeleted is false/undefined
-                filteredDashboards = allDashboards.filter((dashboard) => {
-                    // Check if this is a user-level dashboard created by this user
+            const filteredDashboards = isAdmin
+                ? allDashboards.filter((dashboard) => dashboard.scope === 'T')
+                : allDashboards.filter((dashboard) => {
                     const isUserDashboard = dashboard.scope === 'U' && dashboard.createdBy === userId;
-                    // Check if this is a tenant-level dashboard with user's role and is not deleted
                     const hasRoleIds = dashboard.roleIds && Array.isArray(dashboard.roleIds) && dashboard.roleIds.length > 0;
                     const isTenantDashboard = dashboard.scope === 'T';
                     const hasUserRole = userRole && hasRoleIds && dashboard.roleIds?.includes(userRole);
-                    const isNotDeleted = dashboard.isDeleted !== true; // Show if isDeleted is false or undefined
+                    const isNotDeleted = dashboard.isDeleted !== true;
                     const isTenantDashboardWithRole = isTenantDashboard && hasUserRole && isNotDeleted;
                     return isUserDashboard || isTenantDashboardWithRole;
                 });
-            }
-            // Update dashboards state
             patchState(store, { dashboards: filteredDashboards });
-            // If current dashboard is not in filtered list, select the first one
             if (filteredDashboards.length > 0 && !filteredDashboards.some((d) => d.id === store.currentDashboardId())) {
                 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();
-            if (!currentDashboard) {
-                console.warn('No current dashboard selected');
+            const currentDashboard = store.selectedDashboard();
+            if (!currentDashboard)
                 return;
-            }
             try {
-                // Toggle the locked state
+                const isAdmin = store.isUserAdmin();
+                const userId = sessionService.user?.id;
+                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;
+                }
                 const newLockedState = !currentDashboard.locked;
-                // Create an updated dashboard with toggled lock state
                 const updatedDashboard = {
                     ...currentDashboard,
                     locked: newLockedState,
                 };
-                // Save to service
                 await dashboardService.updateOne(updatedDashboard.id, dashboardLayoutToModel(updatedDashboard));
-                // Update the dashboards in store
                 const updatedDashboards = store
                     .dashboards()
                     .map((dashboard) => (dashboard.id === updatedDashboard.id ? updatedDashboard : dashboard));
+                const baseOptions = { ...store.dashboardsOption() };
                 patchState(store, { dashboards: updatedDashboards });
-                console.log(`Dashboard ${newLockedState ? 'locked' : 'unlocked'}`);
+                const updatedOptions = {
+                    ...baseOptions,
+                    disableDrag: newLockedState,
+                    disableResize: newLockedState,
+                };
+                patchState(store, { dashboardsOption: updatedOptions });
             }
             catch (error) {
                 console.error('Error toggling dashboard lock state:', error);
             }
         },
-        // Check if dashboard is locked
         isDashboardLocked() {
-            const currentDashboard = store.currentDashboard();
+            const currentDashboard = store.selectedDashboard();
             return currentDashboard?.locked === true;
         },
     };
@@ -4780,61 +4806,40 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
 class AXMDashboardHomeComponent extends AXPBasePageComponent {
     constructor() {
         super(...arguments);
-        //#region ----------------   Services & Dependencies   ----------------
+        // 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.isEdited = signal(false);
+        this.store = inject(AXMDashboardStore);
+        this.themeService = inject(AXPLayoutThemeService);
+        // Component State
         this.context = signal({});
-        //#endregion
-        //#region ----------------   Effects   ----------------
-        // Create an effect to watch for dashboards loading
-        this.#dashboardsEffect = effect(() => {
-            const allDashboards = this.store.allDashboards();
+        this.dashboardsLoaded = signal(false);
+        // Effects
+        this.#initEffect = effect(() => {
+            const allDashboards = this.store.availableDashboards();
             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);
-        });
     }
-    //#endregion
-    //#region ----------------   Lifecycle Methods   ----------------
+    // Lifecycle Hooks
     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);
         });
     }
+    // Effects
+    #initEffect;
+    // Private Methods
     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);
+        this.store.filterDashboardsByScope(this.store.isUserAdmin());
     }
     async confirmWidgetDelete(dashboardId, widgetId) {
         try {
@@ -4847,24 +4852,21 @@ class AXMDashboardHomeComponent extends AXPBasePageComponent {
             console.error('Error confirming widget deletion:', error);
         }
     }
-    //#endregion
+    // Page Interface Implementation
     getPageTitle() {
-        return this.store.currentDashboard()?.title || 'Dashboard';
+        return this.store.selectedDashboard()?.title || 'Dashboard';
     }
     async getPageDescription() {
-        return this.store.currentDashboard()?.description || '';
+        return this.store.selectedDashboard()?.description || '';
     }
     getTitleActions() {
-        return [
-            ...this.store.dashboards().map((i) => ({
-                title: i.title,
-                command: { name: i.id, metadata: { isDashboard: true, dashboard: i } },
-                icon: i.id === this.store.currentDashboardId() ? 'fa-solid fa-check' : '',
-            })),
-        ];
+        return this.store.dashboards().map((dashboard) => ({
+            title: dashboard.title,
+            command: { name: dashboard.id, metadata: { isDashboard: true, dashboard } },
+            icon: dashboard.id === this.store.currentDashboardId() ? 'fa-solid fa-check' : '',
+        }));
     }
     async getPrimaryMenuItems() {
-        const scope = this.rootConfig.config.i18n;
         return [
             {
                 title: 't("add-item")',
@@ -4875,74 +4877,78 @@ class AXMDashboardHomeComponent extends AXPBasePageComponent {
                         title: await this.translateService.translateAsync('dashboard', { scope: 'dashboard' }),
                         icon: 'fa-light fa-gauge-high',
                         break: true,
-                        command: {
-                            name: 'new-dashboard',
-                        },
+                        command: { name: 'new-dashboard' },
                     },
                     {
                         title: await this.translateService.translateAsync('widget', { scope: 'dashboard' }),
                         icon: 'fa-light fa-window-restore',
-                        command: {
-                            name: 'new-widget',
-                        },
+                        command: { name: 'new-widget' },
+                        disabled: this.store.dashboards().length < 1,
                     },
                 ],
             },
         ];
     }
     async getSecondaryMenuItems() {
-        const scope = this.rootConfig.config.i18n;
         const items = [
             {
-                title: await this.translateService.translateAsync('delete-current-dashboard', { scope: 'dashboard' }),
-                icon: 'fa-light fa-trash-can',
-                color: 'danger',
+                title: await this.translateService.translateAsync('edit'),
+                icon: 'fa-light fa-pen',
+                color: 'primary',
                 disabled: this.store.dashboards().length < 1,
-                command: {
-                    name: 'delete',
-                },
+                command: { name: 'edit' },
             },
         ];
-        // Only add lock toggle if not admin
-        if (!this.store.isAdmin()) {
+        if (!this.store.isUserAdmin() && 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,
-                command: {
-                    name: 'toggle-lock',
-                },
+                command: { name: 'toggle-lock' },
             });
         }
+        items.push({
+            title: await this.translateService.translateAsync('delete'),
+            icon: 'fa-light fa-trash-can',
+            color: 'danger',
+            disabled: this.store.dashboards().length < 1,
+            command: { name: 'delete' },
+        });
         return items;
     }
     async execute(command) {
         if (command.metadata?.['isDashboard']) {
             this.store.handleConfigChange(command.metadata?.['dashboard']);
             this.recompute();
+            return;
         }
-        else {
-            switch (command.name) {
-                case 'new-dashboard':
-                    await this.store.addDashboard();
-                    this.applyDashboardFiltering();
-                    this.recompute();
-                    break;
-                case 'new-widget':
-                    await this.store.addWidget();
-                    this.recompute();
-                    break;
-                case 'delete':
-                    await this.store.removeDashboard(this.store.currentDashboard()?.id);
-                    this.applyDashboardFiltering();
-                    this.recompute();
-                    break;
-                case 'toggle-lock':
-                    await this.store.toggleLockDashboard();
-                    this.recompute();
-                    break;
-            }
+        switch (command.name) {
+            case 'new-dashboard':
+                await this.store.addDashboard();
+                this.applyDashboardFiltering();
+                this.recompute();
+                break;
+            case 'new-widget':
+                await this.store.addWidget();
+                this.recompute();
+                break;
+            case 'edit':
+                await this.store.editDashboard();
+                this.recompute();
+                break;
+            case 'delete':
+                await this.store.removeDashboard(this.store.selectedDashboard()?.id);
+                this.applyDashboardFiltering();
+                this.recompute();
+                break;
+            case 'toggle-lock':
+                await this.store.toggleLockDashboard();
+                this.recompute();
+                setTimeout(() => this.recompute(), 50);
+                break;
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMDashboardHomeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -4953,7 +4959,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    <!-- Loading State -->\n    @if(store.isLoading()) {\n    <div\n      class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-w-full ax-absolute ax-z-10 ax-bg-white/80\"\n    >\n      <ax-loading></ax-loading>\n      <p class=\"ax-mt-3 ax-text-gray-600\">{{ t('loading', { scope: 'dashboard' }) | async }}</p>\n    </div>\n    } @else {\n    <axp-widgets-container [context]=\"context()\">\n      <ax-grid-layout-container [options]=\"store.currentLayoutOptions()\" (onChange)=\"store.onGridChange($event)\">\n        <!-- No Dashboards State -->\n        @if(!store.dashboards() || store.dashboards().length === 0) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">{{ t('no-dashboards', { scope: 'dashboard' }) | async }}</h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('add-first-dashboard', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        }\n        <!-- No Selected Dashboard State -->\n        @else if (!store.selectedDashboard()) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">\n            {{ t('no-current-dashboard', { scope: 'dashboard' }) | async }}\n          </h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('select-dashboard', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        }\n        <!-- No Widgets State -->\n        @else if (!store.selectedDashboard()?.widgets || store.selectedDashboard()?.widgets?.length === 0) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">{{ t('no-widgets', { scope: 'dashboard' }) | async }}</h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('add-first-widget', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        }\n        <!-- Widgets Grid -->\n        @else { @for(widget of store.selectedDashboard()?.widgets; track widget.config.id) {\n        <ax-grid-layout-widget [options]=\"widget.config\">\n          <axm-dashboard-widget-wrapper\n            [title]=\"widget.node?.options?.['title']\"\n            [hasConfiguration]=\"store.canConfigureWidget()(widget)\"\n            [isLocked]=\"store.isWidgetLocked()(widget)\"\n            (onDelete)=\"confirmWidgetDelete(store.selectedDashboard()?.id!, widget.config.id!)\"\n            (onConfiguration)=\"store.handlePopupConfiguration(widget.node!)\"\n            (onValueChanged)=\"store.handleValueChanged(widget?.node!,$event)\"\n            (onOptionsChanged)=\"store.handleOptionsChanged(widget?.node!,$event)\"\n          >\n            @if(widget.node) {\n            <ng-container axp-widget-renderer [node]=\"widget.node\" [mode]=\"'view'\"></ng-container>\n            }\n          </axm-dashboard-widget-wrapper>\n        </ax-grid-layout-widget>\n        } }\n      </ax-grid-layout-container>\n    </axp-widgets-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axm-dashboard-home{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axm-dashboard-home .placeholder-content{border-radius:.5rem!important;border-width:1px!important;border-style:dashed!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))!important;background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5)!important}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content{border-radius:.375rem!important;border-width:1px!important;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important;--ax-comp-grid-layout-stack-item-content-bg-color: var(--ax-sys-color-lightest-surface) }\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXGridLayoutBuilderModule }, { kind: "component", type: i4$1.AXGridLayoutContainerComponent, selector: "ax-grid-layout-container", inputs: ["options", "isEmpty"], outputs: ["onAdded", "onRemoved", "onWidgetChange", "onChange", "onRender", "isEmptyChange"] }, { kind: "component", type: i4$1.AXGridLayoutWidgetComponent, selector: "ax-grid-layout-widget", inputs: ["options"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer,    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 +4985,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    <!-- Loading State -->\n    @if(store.isLoading()) {\n    <div\n      class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-w-full ax-absolute ax-z-10 ax-bg-white/80\"\n    >\n      <ax-loading></ax-loading>\n      <p class=\"ax-mt-3 ax-text-gray-600\">{{ t('loading', { scope: 'dashboard' }) | async }}</p>\n    </div>\n    } @else {\n    <axp-widgets-container [context]=\"context()\">\n      <ax-grid-layout-container [options]=\"store.currentLayoutOptions()\" (onChange)=\"store.onGridChange($event)\">\n        <!-- No Dashboards State -->\n        @if(!store.dashboards() || store.dashboards().length === 0) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">{{ t('no-dashboards', { scope: 'dashboard' }) | async }}</h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('add-first-dashboard', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        }\n        <!-- No Selected Dashboard State -->\n        @else if (!store.selectedDashboard()) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">\n            {{ t('no-current-dashboard', { scope: 'dashboard' }) | async }}\n          </h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('select-dashboard', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        }\n        <!-- No Widgets State -->\n        @else if (!store.selectedDashboard()?.widgets || store.selectedDashboard()?.widgets?.length === 0) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">{{ t('no-widgets', { scope: 'dashboard' }) | async }}</h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('add-first-widget', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        }\n        <!-- Widgets Grid -->\n        @else { @for(widget of store.selectedDashboard()?.widgets; track widget.config.id) {\n        <ax-grid-layout-widget [options]=\"widget.config\">\n          <axm-dashboard-widget-wrapper\n            [title]=\"widget.node?.options?.['title']\"\n            [hasConfiguration]=\"store.canConfigureWidget()(widget)\"\n            [isLocked]=\"store.isWidgetLocked()(widget)\"\n            (onDelete)=\"confirmWidgetDelete(store.selectedDashboard()?.id!, widget.config.id!)\"\n            (onConfiguration)=\"store.handlePopupConfiguration(widget.node!)\"\n            (onValueChanged)=\"store.handleValueChanged(widget?.node!,$event)\"\n            (onOptionsChanged)=\"store.handleOptionsChanged(widget?.node!,$event)\"\n          >\n            @if(widget.node) {\n            <ng-container axp-widget-renderer [node]=\"widget.node\" [mode]=\"'view'\"></ng-container>\n            }\n          </axm-dashboard-widget-wrapper>\n        </ax-grid-layout-widget>\n        } }\n      </ax-grid-layout-container>\n    </axp-widgets-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axm-dashboard-home{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axm-dashboard-home .placeholder-content{border-radius:.5rem!important;border-width:1px!important;border-style:dashed!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))!important;background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5)!important}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content{border-radius:.375rem!important;border-width:1px!important;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important;--ax-comp-grid-layout-stack-item-content-bg-color: var(--ax-sys-color-lightest-surface) }\n"] }]
         }] });
 
 var homeDashboard = /*#__PURE__*/Object.freeze({