@acorex/modules 19.3.6 → 19.4.1

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';
@@ -53,8 +53,9 @@ import * as i3$2 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import { AXPWidgetPropertyViewerComponent, AXPWidgetPickerService, AXPDesignerService } from '@acorex/platform/layout/designer';
-import { AXPBasePageComponent, AXPPageLayoutComponent, AXPBasePage } from '@acorex/platform/themes/default';
-import { AXPLayoutThemeService, AXPThemeLayoutBlockComponent } from '@acorex/platform/themes/shared';
+import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
+import { AXPLayoutThemeService } from '@acorex/platform/themes/shared';
+import { AXPThemeLayoutBlockComponent } from '@acorex/platform/layout/components';
 import * as i2$4 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
@@ -454,20 +455,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,
@@ -514,61 +527,7 @@ const AXPBarChartWidget = {
             },
             visible: true,
         },
-        // ====== 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,
-        },
         {
             name: 'xAxisLabel',
             title: '@dashboard:widgets.bar-chart.x-axis-label',
@@ -585,21 +544,6 @@ const AXPBarChartWidget = {
             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,
-        },
         {
             name: 'yAxisLabel',
             title: '@dashboard:widgets.bar-chart.y-axis-label',
@@ -615,145 +559,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: '@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,
-                    },
-                },
+          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: '@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,
-                    },
-                },
+          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: '@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,
-                },
+          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: '@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,
-                },
+          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: '@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,
-                },
+          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: '@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',
-                    },
-                },
+          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: '@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,
-                    },
-                },
+          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: {
@@ -1126,20 +1143,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,
@@ -1175,100 +1203,101 @@ const AXPDonutChartWidget = {
             },
             visible: true,
         },
+        /* Commented out properties
         // ====== Size & Layout ======
         {
-            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,
-                    },
-                },
+          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: '@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,
-                    },
-                },
+          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: '@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,
-                },
+          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: '@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,
-                    },
-                },
+          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: '@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,
-                    },
-                },
+          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 ======
         // {
@@ -1306,71 +1335,72 @@ const AXPDonutChartWidget = {
         // },
         // ====== Tooltip ======
         {
-            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,
-                },
+          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: '@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',
-                    },
-                },
+          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: '@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,
-                    },
-                },
+          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: {
@@ -1395,17 +1425,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,
@@ -1440,201 +1482,203 @@ const AXPGaugeChartWidget = {
             },
             visible: true,
         },
-        // ====== Layout & Dimensions ======
+        // ====== Label Display ======
         {
-            name: 'width',
-            title: '@dashboard:widgets.gauge-chart.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: '@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,
-                    },
-                },
+          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: '@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,
-                },
+          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: '@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,
-                },
+          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: '@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,
-                },
+          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: '@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,
-                    },
-                },
+          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: '@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,
-                    },
-                },
+          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: '@dashboard:widgets.gauge-chart.label',
-            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: '@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',
-                    },
-                },
+          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: '@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,
-                    },
-                },
+          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: {
@@ -1659,20 +1703,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,
@@ -1708,218 +1769,33 @@ const AXPLineChartWidget = {
             },
             visible: true,
         },
-        // ====== Layout & Dimensions ======
-        {
-            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,
-        },
-        {
-            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,
-        },
         // ====== Axis Settings ======
-        {
-            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,
-        },
         {
             name: 'xAxisLabel',
             title: '@dashboard:widgets.line-chart.x-axis-label',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
-                defaultValue: '',
-                dataType: 'string',
-                interface: {
-                    name: 'xAxisLabel',
-                    path: 'options.xAxisLabel',
-                    type: AXPWidgetsCatalog.text,
-                },
-            },
-            visible: true,
-        },
-        {
-            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,
-        },
-        {
-            name: 'yAxisLabel',
-            title: '@dashboard:widgets.line-chart.y-axis-label',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: '',
-                dataType: 'string',
-                interface: {
-                    name: 'yAxisLabel',
-                    path: 'options.yAxisLabel',
-                    type: AXPWidgetsCatalog.text,
-                },
-            },
-            visible: true,
-        },
-        {
-            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,
-        },
-        {
-            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,
-        },
-        {
-            name: 'showPoints',
-            title: '@dashboard:widgets.line-chart.show-points',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
+                defaultValue: '',
+                dataType: 'string',
                 interface: {
-                    name: 'showPoints',
-                    path: 'options.showPoints',
-                    type: AXPWidgetsCatalog.toggle,
+                    name: 'xAxisLabel',
+                    path: 'options.xAxisLabel',
+                    type: AXPWidgetsCatalog.text,
                 },
             },
             visible: true,
         },
         {
-            name: 'pointRadius',
-            title: '@dashboard:widgets.line-chart.point-radius',
+            name: 'yAxisLabel',
+            title: '@dashboard:widgets.line-chart.y-axis-label',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
-                defaultValue: 4,
-                dataType: 'number',
+                defaultValue: '',
+                dataType: 'string',
                 interface: {
-                    name: 'pointRadius',
-                    path: 'options.pointRadius',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '1-10',
-                        minValue: 1,
-                        maxValue: 10,
-                    },
+                    name: 'yAxisLabel',
+                    path: 'options.yAxisLabel',
+                    type: AXPWidgetsCatalog.text,
                 },
             },
             visible: true,
@@ -1939,109 +1815,301 @@ const AXPLineChartWidget = {
             },
             visible: true,
         },
+        /* Commented out properties
+        // ====== Layout & Dimensions ======
         {
-            name: 'fillOpacity',
-            title: '@dashboard:widgets.line-chart.fill-opacity',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 0.1,
-                dataType: 'number',
-                interface: {
-                    name: 'fillOpacity',
-                    path: 'options.fillOpacity',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '0-1',
-                        minValue: 0,
-                        maxValue: 1,
-                        step: 0.1,
-                    },
-                },
+          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: '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,
+        },
+    
+        // ====== Axis Settings ======
+        {
+          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,
+        },
+        {
+          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,
+        },
+        {
+          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,
+        },
+    
+        {
+          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,
+        },
+        {
+          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,
+        },
+        {
+          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,
+        },
+        {
+          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: '@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,
-                },
+          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: '@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,
-                },
+          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: '@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',
-                    },
-                },
+          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: '@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,
-                    },
-                },
+          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: {
@@ -2054,8 +2122,8 @@ const AXPLineChartWidget = {
             height: 4,
             minWidth: 2,
             minHeight: 2,
-            maxWidth: 4,
-            maxHeight: 5,
+            maxWidth: 6,
+            maxHeight: 6,
         },
     },
 };
@@ -3285,7 +3353,7 @@ class AXPWeatherWidgetViewComponent extends AXPValueWidgetComponent {
                 provide: AXPWeatherApiAbstract,
                 useClass: AXPWeatherApiService,
             },
-        ], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["containerElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Weather Widget Component Template -->\n<div class=\"axp-weather-container\" #containerElement>\n  <!-- Loading indicator -->\n  @if (isLoading()) {\n    <div class=\"axp-weather-loading-overlay\">\n      <div class=\"axp-weather-loading-spinner\">\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        <span>{{ 'weather.loading' | translate: { scope: 'dashboard' } | async }}</span>\n      </div>\n    </div>\n  }\n\n  <!-- Error message -->\n  @if (hasError()) {\n    <div class=\"axp-weather-error-overlay\">\n      <div class=\"axp-weather-error-message\">\n        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n        <span>{{ errorMessage() | translate: { scope: 'dashboard' } | async }}</span>\n        <button class=\"axp-weather-retry-button\" (click)=\"refreshWeather()\">\n          <i class=\"fa-solid fa-sync-alt\"></i>\n          <span>{{ 'weather.retry' | translate: { scope: 'dashboard' } | async }}</span>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Weather content - only show when we have data -->\n  @if (weatherData()) {\n    <!-- Background decorations based on weather condition -->\n    <div class=\"axp-weather-background-decorations\">\n      <div class=\"axp-weather-decoration\" [ngClass]=\"weatherData()?.current?.condition?.toLowerCase()\"></div>\n      <div class=\"axp-weather-gradient-overlay\"></div>\n    </div>\n\n    <div class=\"axp-weather-inner\">\n      <!-- Location information section -->\n      <div class=\"axp-weather-location-info\">\n        <div class=\"axp-weather-location-icon\">\n          <i class=\"fa-solid fa-location-dot\"></i>\n        </div>\n        <div class=\"axp-weather-location-text\">\n          <h2 class=\"axp-weather-location-name\">{{ city() }}</h2>\n        </div>\n      </div>\n\n      <!-- Current weather conditions section -->\n      <div class=\"axp-weather-current-weather\">\n        <!-- Weather icon and condition name -->\n        @if (showCurrentCondition()) {\n          <div class=\"axp-weather-condition\">\n            <div class=\"axp-weather-icon-wrapper\">\n              <div class=\"axp-weather-icon\">\n                <i\n                  [class]=\"getConditionIcon(weatherData()?.current?.condition || '')\"\n                  [style.color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n                ></i>\n              </div>\n              <div\n                class=\"axp-weather-icon-glow\"\n                [style.background-color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n              ></div>\n            </div>\n            <div class=\"axp-weather-condition-name\">\n              {{ getCurrentCondition() | translate: { scope: 'dashboard' } | async }}\n            </div>\n          </div>\n        }\n\n        <!-- Temperature display -->\n        @if (showTemperature()) {\n          <div class=\"axp-weather-temperature\">\n            <span class=\"axp-weather-temperature-value\">{{ getCurrentTemperature() }}</span>\n            <span class=\"axp-weather-temperature-unit\">{{\n              getTemperatureUnit() | translate: { scope: 'dashboard' } | async\n            }}</span>\n          </div>\n        }\n      </div>\n\n      <!-- Weather details section (humidity and wind) -->\n      @if (showHumidity() || showWind()) {\n        <div class=\"axp-weather-details\">\n          <!-- Humidity information -->\n          @if (showHumidity()) {\n            <div class=\"axp-weather-detail-item\">\n              <div class=\"axp-weather-detail-icon\">\n                <i class=\"fa-solid fa-droplet\"></i>\n              </div>\n              <div class=\"axp-weather-detail-info\">\n                <div class=\"axp-weather-detail-label\">\n                  {{ 'weather.humidity' | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div class=\"axp-weather-detail-value\">{{ getHumidity() }}%</div>\n              </div>\n            </div>\n          }\n\n          <!-- Wind speed information -->\n          @if (showWind()) {\n            <div class=\"axp-weather-detail-item\">\n              <div class=\"axp-weather-detail-icon\">\n                <i class=\"fa-solid fa-wind\"></i>\n              </div>\n              <div class=\"axp-weather-detail-info\">\n                <div class=\"axp-weather-detail-label\">\n                  {{ 'weather.wind' | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div class=\"axp-weather-detail-value\">\n                  {{ getWindSpeed() }} {{ getWindSpeedUnit() | translate: { scope: 'dashboard' } | async }}\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      <!-- Weather forecast section -->\n      @if (showForecast() && weatherData()?.forecast) {\n        <div class=\"axp-weather-forecast\">\n          <div class=\"axp-weather-forecast-header\">\n            <h3 class=\"axp-weather-forecast-title\">\n              <i class=\"fa-solid fa-calendar-days\"></i>\n              <span class=\"ax-px-1\">{{ 'weather.forecast' | translate: { scope: 'dashboard' } | async }}</span>\n            </h3>\n          </div>\n          <!-- Loading indicator for forecast -->\n          <!-- @if (isForecastLoading()) {\n            <div class=\"axp-weather-forecast-loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n              <span>{{ 'weather.loading-forecast' | translate: { scope: 'dashboard' } | async }}</span>\n            </div>\n          } -->\n          <!-- Scrollable forecast days display -->\n          <div class=\"axp-weather-forecast-items\">\n            @for (day of displayedForecast(); track day.day) {\n              <div class=\"axp-weather-forecast-day\">\n                <div class=\"axp-weather-forecast-day-name\">\n                  {{ getDayName(parseDate(day.date)) | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div\n                  class=\"axp-weather-forecast-icon\"\n                  [title]=\"getConditionName(day.condition) | translate: { scope: 'dashboard' } | async\"\n                >\n                  <i [class]=\"getConditionIcon(day.condition)\" [style.color]=\"getConditionColor(day.condition)\"></i>\n                </div>\n                <div class=\"axp-weather-forecast-temps\">\n                  <span class=\"axp-weather-forecast-low\">\n                    {{ temperatureUnit() === '\u00B0C' ? day.minTempC : day.minTempF\n                    }}{{ getTemperatureUnit() | translate: { scope: 'dashboard' } | async }}\n                  </span>\n                  <span class=\"axp-weather-forecast-high\">\n                    {{ temperatureUnit() === '\u00B0C' ? day.maxTempC : day.maxTempF\n                    }}{{ getTemperatureUnit() | translate: { scope: 'dashboard' } | async }}\n                  </span>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Last updated timestamp -->\n      <div class=\"axp-weather-last-updated\">\n        <span>{{ 'weather.last-updated' | translate: { scope: 'dashboard' } | async }}: {{ getLastUpdated() }}</span>\n      </div>\n\n      <!-- Manual refresh button -->\n      <div class=\"axp-weather-refresh-action\">\n        <button\n          class=\"axp-weather-refresh-button\"\n          (click)=\"refreshWeather()\"\n          [attr.aria-label]=\"'weather.refresh' | translate: { scope: 'dashboard' } | async\"\n          [title]=\"'weather.refresh' | translate: { scope: 'dashboard' } | async\"\n        >\n          <i class=\"fa-solid fa-sync-alt\"></i>\n          <span>{{ 'weather.refresh' | translate: { scope: 'dashboard' } | async }}</span>\n        </button>\n      </div>\n    </div>\n  } @else if (!isLoading() && !hasError()) {\n    <!-- No data state (not loading, no error) -->\n    <div class=\"axp-weather-no-data-state\">\n      <i class=\"fa-solid fa-cloud-sun\"></i>\n      <p>{{ 'weather.no-data' | translate: { scope: 'dashboard' } | async }}</p>\n      <button class=\"axp-weather-refresh-button\" (click)=\"refreshWeather()\">\n        <i class=\"fa-solid fa-sync-alt\"></i>\n        <span>{{ 'weather.load-data' | translate: { scope: 'dashboard' } | async }}</span>\n      </button>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;--primary-gradient-start: #2196f3;--primary-gradient-end: #1976d2;--shadow-color: rgba(0, 0, 0, .2);--glass-bg: rgba(255, 255, 255, .15);--glass-border: rgba(255, 255, 255, .2);--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .75);--transition-speed: .3s}.axp-weather-container{width:100%;height:100%;overflow:hidden;position:relative;box-shadow:0 4px 8px rgba(0,0,0,.1);color:#fff;min-height:300px;background-color:#2c3e50}.axp-weather-loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(44,62,80,.85);display:flex;justify-content:center;align-items:center;z-index:100}.axp-weather-loading-spinner{text-align:center}.axp-weather-loading-spinner i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-loading-spinner span{display:block;color:#fff;font-size:1rem}.axp-weather-error-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(189,54,47,.85);display:flex;justify-content:center;align-items:center;z-index:100}.axp-weather-error-message{text-align:center;padding:1rem}.axp-weather-error-message i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-error-message span{display:block;color:#fff;font-size:1.1rem;margin-bottom:1rem}.axp-weather-error-message .axp-weather-retry-button{color:#bd362f;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-error-message .axp-weather-retry-button:hover{transform:translateY(-1px)}.axp-weather-no-data-state{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:2rem;text-align:center}.axp-weather-no-data-state i{font-size:3rem;margin-bottom:1rem;color:rgba(255,255,255,.8)}.axp-weather-no-data-state p{margin-bottom:1.5rem;font-size:1.1rem}.axp-weather-no-data-state .axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-no-data-state .axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-background-decorations{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.axp-weather-decoration{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center}.axp-weather-decoration.sunny{background:linear-gradient(135deg,#ff7e00,#f7d358)}.axp-weather-decoration.partlyCloudy{background:linear-gradient(135deg,#7ba2e7,#b4d2f7)}.axp-weather-decoration.cloudy{background:linear-gradient(135deg,#717e8c,#919eab)}.axp-weather-decoration.rain{background:linear-gradient(135deg,#6a8caf,#567a9e)}.axp-weather-decoration.snow{background:linear-gradient(135deg,#99b3cc,#c6d4e1)}.axp-weather-decoration.thunder{background:linear-gradient(135deg,#425777,#2c3e50)}.axp-weather-decoration.mist{background:linear-gradient(135deg,#94a3b8,#cbd5e1)}.axp-weather-gradient-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5))}.axp-weather-inner{position:relative;z-index:2;height:100%;padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between}.axp-weather-location-info{display:flex;align-items:center;margin-bottom:1.5rem}.axp-weather-location-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,.2);border-radius:50%;margin-right:.75rem}.axp-weather-location-icon i{color:#fff}.axp-weather-location-name{margin:0;font-size:1.5rem;font-weight:500;text-shadow:1px 1px 3px rgba(0,0,0,.2);text-transform:capitalize}.axp-weather-current-weather{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap}.axp-weather-condition{display:flex;flex-direction:column;align-items:center}.axp-weather-icon-wrapper{position:relative;margin-bottom:.5rem}.axp-weather-icon{position:relative;z-index:2}.axp-weather-icon i{font-size:2.75rem;filter:drop-shadow(0 0 8px rgba(0,0,0,.3))}.axp-weather-icon-glow{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);width:45px;height:45px;border-radius:50%;filter:blur(15px);opacity:.75}.axp-weather-condition-name{font-size:1.1rem;text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.axp-weather-temperature{display:flex;align-items:flex-start;text-shadow:1px 1px 3px rgba(0,0,0,.3)}.axp-weather-temperature-value{font-size:3.5rem;font-weight:500;line-height:1}.axp-weather-temperature-unit{font-size:1.5rem;margin-top:.25rem}.axp-weather-details{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:1rem;padding:1rem;background-color:rgba(0,0,0,.15);border-radius:8px}.axp-weather-detail-item{display:flex;align-items:center;flex:1;min-width:120px}.axp-weather-detail-icon{width:40px;height:40px;border-radius:50%;background-color:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin-right:.75rem}.axp-weather-detail-icon i{font-size:1.25rem}.axp-weather-detail-info{display:flex;padding-inline:.25rem;flex-direction:column}.axp-weather-detail-label{font-size:.875rem;color:rgba(255,255,255,.8);margin-bottom:.25rem}.axp-weather-detail-value{font-size:1.125rem;font-weight:500}.axp-weather-forecast{margin-bottom:.5rem;background-color:rgba(0,0,0,.15);border-radius:8px;padding:1rem}.axp-weather-forecast-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.axp-weather-forecast-title{margin:0;font-size:1.125rem;font-weight:500;display:flex;align-items:center}.axp-weather-forecast-title i{margin-right:.5rem;opacity:.8}.axp-weather-scroll-indicator{color:rgba(255,255,255,.6)}.axp-weather-forecast-items{display:flex;overflow-x:auto;gap:.75rem;padding-bottom:.5rem}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.3);border-radius:4px}.axp-weather-forecast-items::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:4px}.axp-weather-forecast-day{min-width:90px;display:flex;flex-direction:column;align-items:center;padding:.75rem .5rem;background-color:rgba(255,255,255,.1);border-radius:6px;transition:all .3s ease}.axp-weather-forecast-day:hover{background-color:rgba(255,255,255,.15);transform:translateY(-2px)}.axp-weather-forecast-day-name{font-size:.875rem;margin-bottom:.5rem;font-weight:500}.axp-weather-forecast-icon{font-size:1.5rem;margin-bottom:.5rem}.axp-weather-forecast-icon i{filter:drop-shadow(0 0 5px rgba(0,0,0,.2))}.axp-weather-forecast-temps{display:flex;flex-direction:row;gap:.75rem;align-items:center;font-size:.775rem}.axp-weather-last-updated{text-align:center;font-size:.75rem;opacity:.7;margin-bottom:.5rem}.axp-weather-refresh-action{text-align:center}.axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:.875rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-refresh-button i{font-size:.875rem}@media (max-width: 576px){.axp-weather-inner{padding:.8rem;gap:.4rem}.axp-weather-location-name{font-size:1.1rem;padding-inline:.25rem}.axp-weather-temperature{font-size:2.5rem}.axp-weather-temperature-unit{font-size:1.1rem}.axp-weather-weather-details{flex-direction:column;gap:.5rem}.axp-weather-forecast-items{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.5rem;margin:0 -.4rem;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;mask-image:linear-gradient(to right,#000 95%,rgba(0,0,0,0));-webkit-mask-image:linear-gradient(to right,rgb(0,0,0) 95%,rgba(0,0,0,0))}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.2);border-radius:4px}.axp-weather-forecast-day{min-width:60px;flex:0 0 auto;padding:.4rem .6rem}.axp-weather-forecast-day-name{font-size:.7rem}.axp-weather-forecast-icon{padding:.3rem;height:1.6rem}.axp-weather-forecast-temps{font-size:.7rem}.axp-weather-scroll-indicator{display:block}}:host-context(.theme-dark){--glass-bg: rgba(0, 0, 0, .3);--glass-border: rgba(255, 255, 255, .1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: HttpClientModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2$3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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,
@@ -3294,7 +3362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                             provide: AXPWeatherApiAbstract,
                             useClass: AXPWeatherApiService,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Weather Widget Component Template -->\n<div class=\"axp-weather-container\" #containerElement>\n  <!-- Loading indicator -->\n  @if (isLoading()) {\n    <div class=\"axp-weather-loading-overlay\">\n      <div class=\"axp-weather-loading-spinner\">\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        <span>{{ 'weather.loading' | translate: { scope: 'dashboard' } | async }}</span>\n      </div>\n    </div>\n  }\n\n  <!-- Error message -->\n  @if (hasError()) {\n    <div class=\"axp-weather-error-overlay\">\n      <div class=\"axp-weather-error-message\">\n        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n        <span>{{ errorMessage() | translate: { scope: 'dashboard' } | async }}</span>\n        <button class=\"axp-weather-retry-button\" (click)=\"refreshWeather()\">\n          <i class=\"fa-solid fa-sync-alt\"></i>\n          <span>{{ 'weather.retry' | translate: { scope: 'dashboard' } | async }}</span>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Weather content - only show when we have data -->\n  @if (weatherData()) {\n    <!-- Background decorations based on weather condition -->\n    <div class=\"axp-weather-background-decorations\">\n      <div class=\"axp-weather-decoration\" [ngClass]=\"weatherData()?.current?.condition?.toLowerCase()\"></div>\n      <div class=\"axp-weather-gradient-overlay\"></div>\n    </div>\n\n    <div class=\"axp-weather-inner\">\n      <!-- Location information section -->\n      <div class=\"axp-weather-location-info\">\n        <div class=\"axp-weather-location-icon\">\n          <i class=\"fa-solid fa-location-dot\"></i>\n        </div>\n        <div class=\"axp-weather-location-text\">\n          <h2 class=\"axp-weather-location-name\">{{ city() }}</h2>\n        </div>\n      </div>\n\n      <!-- Current weather conditions section -->\n      <div class=\"axp-weather-current-weather\">\n        <!-- Weather icon and condition name -->\n        @if (showCurrentCondition()) {\n          <div class=\"axp-weather-condition\">\n            <div class=\"axp-weather-icon-wrapper\">\n              <div class=\"axp-weather-icon\">\n                <i\n                  [class]=\"getConditionIcon(weatherData()?.current?.condition || '')\"\n                  [style.color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n                ></i>\n              </div>\n              <div\n                class=\"axp-weather-icon-glow\"\n                [style.background-color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n              ></div>\n            </div>\n            <div class=\"axp-weather-condition-name\">\n              {{ getCurrentCondition() | translate: { scope: 'dashboard' } | async }}\n            </div>\n          </div>\n        }\n\n        <!-- Temperature display -->\n        @if (showTemperature()) {\n          <div class=\"axp-weather-temperature\">\n            <span class=\"axp-weather-temperature-value\">{{ getCurrentTemperature() }}</span>\n            <span class=\"axp-weather-temperature-unit\">{{\n              getTemperatureUnit() | translate: { scope: 'dashboard' } | async\n            }}</span>\n          </div>\n        }\n      </div>\n\n      <!-- Weather details section (humidity and wind) -->\n      @if (showHumidity() || showWind()) {\n        <div class=\"axp-weather-details\">\n          <!-- Humidity information -->\n          @if (showHumidity()) {\n            <div class=\"axp-weather-detail-item\">\n              <div class=\"axp-weather-detail-icon\">\n                <i class=\"fa-solid fa-droplet\"></i>\n              </div>\n              <div class=\"axp-weather-detail-info\">\n                <div class=\"axp-weather-detail-label\">\n                  {{ 'weather.humidity' | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div class=\"axp-weather-detail-value\">{{ getHumidity() }}%</div>\n              </div>\n            </div>\n          }\n\n          <!-- Wind speed information -->\n          @if (showWind()) {\n            <div class=\"axp-weather-detail-item\">\n              <div class=\"axp-weather-detail-icon\">\n                <i class=\"fa-solid fa-wind\"></i>\n              </div>\n              <div class=\"axp-weather-detail-info\">\n                <div class=\"axp-weather-detail-label\">\n                  {{ 'weather.wind' | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div class=\"axp-weather-detail-value\">\n                  {{ getWindSpeed() }} {{ getWindSpeedUnit() | translate: { scope: 'dashboard' } | async }}\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      <!-- Weather forecast section -->\n      @if (showForecast() && weatherData()?.forecast) {\n        <div class=\"axp-weather-forecast\">\n          <div class=\"axp-weather-forecast-header\">\n            <h3 class=\"axp-weather-forecast-title\">\n              <i class=\"fa-solid fa-calendar-days\"></i>\n              <span class=\"ax-px-1\">{{ 'weather.forecast' | translate: { scope: 'dashboard' } | async }}</span>\n            </h3>\n          </div>\n          <!-- Loading indicator for forecast -->\n          <!-- @if (isForecastLoading()) {\n            <div class=\"axp-weather-forecast-loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n              <span>{{ 'weather.loading-forecast' | translate: { scope: 'dashboard' } | async }}</span>\n            </div>\n          } -->\n          <!-- Scrollable forecast days display -->\n          <div class=\"axp-weather-forecast-items\">\n            @for (day of displayedForecast(); track day.day) {\n              <div class=\"axp-weather-forecast-day\">\n                <div class=\"axp-weather-forecast-day-name\">\n                  {{ getDayName(parseDate(day.date)) | translate: { scope: 'dashboard' } | async }}\n                </div>\n                <div\n                  class=\"axp-weather-forecast-icon\"\n                  [title]=\"getConditionName(day.condition) | translate: { scope: 'dashboard' } | async\"\n                >\n                  <i [class]=\"getConditionIcon(day.condition)\" [style.color]=\"getConditionColor(day.condition)\"></i>\n                </div>\n                <div class=\"axp-weather-forecast-temps\">\n                  <span class=\"axp-weather-forecast-low\">\n                    {{ temperatureUnit() === '\u00B0C' ? day.minTempC : day.minTempF\n                    }}{{ getTemperatureUnit() | translate: { scope: 'dashboard' } | async }}\n                  </span>\n                  <span class=\"axp-weather-forecast-high\">\n                    {{ temperatureUnit() === '\u00B0C' ? day.maxTempC : day.maxTempF\n                    }}{{ getTemperatureUnit() | translate: { scope: 'dashboard' } | async }}\n                  </span>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Last updated timestamp -->\n      <div class=\"axp-weather-last-updated\">\n        <span>{{ 'weather.last-updated' | translate: { scope: 'dashboard' } | async }}: {{ getLastUpdated() }}</span>\n      </div>\n\n      <!-- Manual refresh button -->\n      <div class=\"axp-weather-refresh-action\">\n        <button\n          class=\"axp-weather-refresh-button\"\n          (click)=\"refreshWeather()\"\n          [attr.aria-label]=\"'weather.refresh' | translate: { scope: 'dashboard' } | async\"\n          [title]=\"'weather.refresh' | translate: { scope: 'dashboard' } | async\"\n        >\n          <i class=\"fa-solid fa-sync-alt\"></i>\n          <span>{{ 'weather.refresh' | translate: { scope: 'dashboard' } | async }}</span>\n        </button>\n      </div>\n    </div>\n  } @else if (!isLoading() && !hasError()) {\n    <!-- No data state (not loading, no error) -->\n    <div class=\"axp-weather-no-data-state\">\n      <i class=\"fa-solid fa-cloud-sun\"></i>\n      <p>{{ 'weather.no-data' | translate: { scope: 'dashboard' } | async }}</p>\n      <button class=\"axp-weather-refresh-button\" (click)=\"refreshWeather()\">\n        <i class=\"fa-solid fa-sync-alt\"></i>\n        <span>{{ 'weather.load-data' | translate: { scope: 'dashboard' } | async }}</span>\n      </button>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;--primary-gradient-start: #2196f3;--primary-gradient-end: #1976d2;--shadow-color: rgba(0, 0, 0, .2);--glass-bg: rgba(255, 255, 255, .15);--glass-border: rgba(255, 255, 255, .2);--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .75);--transition-speed: .3s}.axp-weather-container{width:100%;height:100%;overflow:hidden;position:relative;box-shadow:0 4px 8px rgba(0,0,0,.1);color:#fff;min-height:300px;background-color:#2c3e50}.axp-weather-loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(44,62,80,.85);display:flex;justify-content:center;align-items:center;z-index:100}.axp-weather-loading-spinner{text-align:center}.axp-weather-loading-spinner i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-loading-spinner span{display:block;color:#fff;font-size:1rem}.axp-weather-error-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(189,54,47,.85);display:flex;justify-content:center;align-items:center;z-index:100}.axp-weather-error-message{text-align:center;padding:1rem}.axp-weather-error-message i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-error-message span{display:block;color:#fff;font-size:1.1rem;margin-bottom:1rem}.axp-weather-error-message .axp-weather-retry-button{color:#bd362f;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-error-message .axp-weather-retry-button:hover{transform:translateY(-1px)}.axp-weather-no-data-state{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:2rem;text-align:center}.axp-weather-no-data-state i{font-size:3rem;margin-bottom:1rem;color:rgba(255,255,255,.8)}.axp-weather-no-data-state p{margin-bottom:1.5rem;font-size:1.1rem}.axp-weather-no-data-state .axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-no-data-state .axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-background-decorations{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.axp-weather-decoration{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center}.axp-weather-decoration.sunny{background:linear-gradient(135deg,#ff7e00,#f7d358)}.axp-weather-decoration.partlyCloudy{background:linear-gradient(135deg,#7ba2e7,#b4d2f7)}.axp-weather-decoration.cloudy{background:linear-gradient(135deg,#717e8c,#919eab)}.axp-weather-decoration.rain{background:linear-gradient(135deg,#6a8caf,#567a9e)}.axp-weather-decoration.snow{background:linear-gradient(135deg,#99b3cc,#c6d4e1)}.axp-weather-decoration.thunder{background:linear-gradient(135deg,#425777,#2c3e50)}.axp-weather-decoration.mist{background:linear-gradient(135deg,#94a3b8,#cbd5e1)}.axp-weather-gradient-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5))}.axp-weather-inner{position:relative;z-index:2;height:100%;padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between}.axp-weather-location-info{display:flex;align-items:center;margin-bottom:1.5rem}.axp-weather-location-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,.2);border-radius:50%;margin-right:.75rem}.axp-weather-location-icon i{color:#fff}.axp-weather-location-name{margin:0;font-size:1.5rem;font-weight:500;text-shadow:1px 1px 3px rgba(0,0,0,.2);text-transform:capitalize}.axp-weather-current-weather{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap}.axp-weather-condition{display:flex;flex-direction:column;align-items:center}.axp-weather-icon-wrapper{position:relative;margin-bottom:.5rem}.axp-weather-icon{position:relative;z-index:2}.axp-weather-icon i{font-size:2.75rem;filter:drop-shadow(0 0 8px rgba(0,0,0,.3))}.axp-weather-icon-glow{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);width:45px;height:45px;border-radius:50%;filter:blur(15px);opacity:.75}.axp-weather-condition-name{font-size:1.1rem;text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.axp-weather-temperature{display:flex;align-items:flex-start;text-shadow:1px 1px 3px rgba(0,0,0,.3)}.axp-weather-temperature-value{font-size:3.5rem;font-weight:500;line-height:1}.axp-weather-temperature-unit{font-size:1.5rem;margin-top:.25rem}.axp-weather-details{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:1rem;padding:1rem;background-color:rgba(0,0,0,.15);border-radius:8px}.axp-weather-detail-item{display:flex;align-items:center;flex:1;min-width:120px}.axp-weather-detail-icon{width:40px;height:40px;border-radius:50%;background-color:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin-right:.75rem}.axp-weather-detail-icon i{font-size:1.25rem}.axp-weather-detail-info{display:flex;padding-inline:.25rem;flex-direction:column}.axp-weather-detail-label{font-size:.875rem;color:rgba(255,255,255,.8);margin-bottom:.25rem}.axp-weather-detail-value{font-size:1.125rem;font-weight:500}.axp-weather-forecast{margin-bottom:.5rem;background-color:rgba(0,0,0,.15);border-radius:8px;padding:1rem}.axp-weather-forecast-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.axp-weather-forecast-title{margin:0;font-size:1.125rem;font-weight:500;display:flex;align-items:center}.axp-weather-forecast-title i{margin-right:.5rem;opacity:.8}.axp-weather-scroll-indicator{color:rgba(255,255,255,.6)}.axp-weather-forecast-items{display:flex;overflow-x:auto;gap:.75rem;padding-bottom:.5rem}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.3);border-radius:4px}.axp-weather-forecast-items::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:4px}.axp-weather-forecast-day{min-width:90px;display:flex;flex-direction:column;align-items:center;padding:.75rem .5rem;background-color:rgba(255,255,255,.1);border-radius:6px;transition:all .3s ease}.axp-weather-forecast-day:hover{background-color:rgba(255,255,255,.15);transform:translateY(-2px)}.axp-weather-forecast-day-name{font-size:.875rem;margin-bottom:.5rem;font-weight:500}.axp-weather-forecast-icon{font-size:1.5rem;margin-bottom:.5rem}.axp-weather-forecast-icon i{filter:drop-shadow(0 0 5px rgba(0,0,0,.2))}.axp-weather-forecast-temps{display:flex;flex-direction:row;gap:.75rem;align-items:center;font-size:.775rem}.axp-weather-last-updated{text-align:center;font-size:.75rem;opacity:.7;margin-bottom:.5rem}.axp-weather-refresh-action{text-align:center}.axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:.875rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-refresh-button i{font-size:.875rem}@media (max-width: 576px){.axp-weather-inner{padding:.8rem;gap:.4rem}.axp-weather-location-name{font-size:1.1rem;padding-inline:.25rem}.axp-weather-temperature{font-size:2.5rem}.axp-weather-temperature-unit{font-size:1.1rem}.axp-weather-weather-details{flex-direction:column;gap:.5rem}.axp-weather-forecast-items{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.5rem;margin:0 -.4rem;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;mask-image:linear-gradient(to right,#000 95%,rgba(0,0,0,0));-webkit-mask-image:linear-gradient(to right,rgb(0,0,0) 95%,rgba(0,0,0,0))}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.2);border-radius:4px}.axp-weather-forecast-day{min-width:60px;flex:0 0 auto;padding:.4rem .6rem}.axp-weather-forecast-day-name{font-size:.7rem}.axp-weather-forecast-icon{padding:.3rem;height:1.6rem}.axp-weather-forecast-temps{font-size:.7rem}.axp-weather-scroll-indicator{display:block}}:host-context(.theme-dark){--glass-bg: rgba(0, 0, 0, .3);--glass-border: rgba(255, 255, 255, .1)}\n"] }]
+                    ], 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({
@@ -3949,7 +4017,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('');
@@ -3957,6 +4024,7 @@ class AXMAddDashboardPopup extends AXBasePageComponent {
         this.selectedRoleIds = model([]);
         this.isDisabled = model(false);
         this.isLocked = model(false);
+        this.isAdmin = model(false);
         this.roles = [];
     }
     get isValid() {
@@ -3966,14 +4034,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);
@@ -3985,10 +4059,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,
@@ -3997,7 +4071,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>
@@ -4009,7 +4083,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
@@ -4070,7 +4144,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
@@ -4204,7 +4278,7 @@ class AXMDashboardPopupService {
             draggable: true,
             hasBackdrop: true,
             title: await this.translateService.translateAsync('dashboard-info', { scope: 'dashboard' }),
-            data: dashboardData,
+            data: { data: dashboardData },
         });
         if (!result.data) {
             return;
@@ -4221,7 +4295,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) {
@@ -4241,139 +4315,115 @@ 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: false,
-            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), layoutThemeService = inject(AXPLayoutThemeService)) => ({
-    currentDashboard: computed(() => {
-        return state.dashboards().find((dashboard) => dashboard.id === state.currentDashboardId()) || null;
-    }),
-    isAdmin: computed(() => {
-        return state.isAdmin();
-    }),
-    allDashboards: computed(() => {
-        return state.allDashboards();
-    }),
-    dashboardsOption: computed(() => {
+    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;
-        }
-        // Always disable drag and resize on mobile devices
         if (!layoutThemeService.isDesktopDevice()) {
-            return {
-                ...baseOptions,
-                disableDrag: true,
-                disableResize: true,
-            };
+            return { ...baseOptions, disableDrag: true, disableResize: true };
         }
-        // If the base options already have explicit disableDrag and disableResize values,
-        // preserve those values (these were likely set by toggleLockDashboard)
         if (baseOptions.disableDrag !== undefined && baseOptions.disableResize !== undefined) {
             return baseOptions;
         }
-        // Check if dashboard is locked - locked dashboards always have drag and resize disabled
         if (currentDashboard.locked === true) {
-            return {
-                ...baseOptions,
-                disableDrag: true,
-                disableResize: true,
-            };
+            return { ...baseOptions, disableDrag: true, disableResize: true };
         }
-        // If admin, no restrictions unless it's locked (which is checked above)
-        if (state.isAdmin()) {
+        if (state.isAdmin())
             return baseOptions;
-        }
-        // 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 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(() => {
-        return (widget) => {
-            const currentDashboard = state.dashboards().find((dashboard) => dashboard.id === state.currentDashboardId());
-            if (!currentDashboard)
-                return false;
-            // If dashboard is locked, widget is locked
-            if (currentDashboard.locked === true) {
-                return true;
-            }
-            // If admin, widget is not locked
-            if (state.isAdmin())
-                return false;
-            // Get user role
-            const userRole = sessionService.user ? sessionService.user['role'] : undefined;
-            // Check if user has role in dashboard
-            const hasRoleIds = currentDashboard.roleIds && Array.isArray(currentDashboard.roleIds) && currentDashboard.roleIds.length > 0;
-            const hasUserRole = userRole && hasRoleIds && currentDashboard.roleIds?.includes(userRole);
-            // If user is not admin, has role in dashboard, and dashboard has scope 'T', widget is locked
-            if (hasUserRole && currentDashboard.scope === 'T') {
-                return true;
-            }
+    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
@@ -4386,126 +4436,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;
             }
@@ -4513,57 +4549,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');
@@ -4572,17 +4594,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)
@@ -4600,7 +4618,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)
@@ -4609,92 +4626,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) {
-            // Skip any changes on mobile devices
-            if (!layoutThemeService.isDesktopDevice()) {
-                return;
-            }
-            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));
@@ -4704,74 +4685,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));
@@ -4781,118 +4735,80 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
                 console.error('Error handling widget options change:', error);
             }
         },
-        // Handle setting admin state
         setIsAdmin(isAdmin) {
             patchState(store, { isAdmin });
         },
         // Filter dashboards by scope
         filterDashboardsByScope(isAdmin) {
-            // Get all dashboards from the stored allDashboards array
-            const allDashboards = store.allDashboards();
-            // 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);
             }
         },
-        // 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 {
-                // Check permission to toggle lock
-                const isAdmin = store.isAdmin();
+                const isAdmin = store.isUserAdmin();
                 const userId = sessionService.user?.id;
-                // Determine if user can toggle lock based on the rules:
-                // 1. If isAdmin is false, user can only toggle their own user-level dashboards
-                // 2. If isAdmin is true, user can only toggle tenant-level dashboards
                 const canToggle = (!isAdmin && currentDashboard.scope === 'U' && currentDashboard.createdBy === userId) ||
                     (isAdmin && currentDashboard.scope === 'T');
                 if (!canToggle) {
                     console.warn('User does not have permission to toggle lock for this dashboard');
                     return;
                 }
-                // Toggle the locked state
                 const newLockedState = !currentDashboard.locked;
-                // Create an updated dashboard with toggled lock state
                 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));
-                // IMPORTANT: Get the base options BEFORE updating the dashboards state
-                // This ensures we're getting the current options without the lock state applied yet
                 const baseOptions = { ...store.dashboardsOption() };
-                // First update the dashboards state
-                patchState(store, {
-                    dashboards: updatedDashboards,
-                });
-                // Get a fresh reference to the updated options with drag/resize explicitly set
-                // This ensures the grid layout container gets a new object reference and responds immediately
+                patchState(store, { dashboards: updatedDashboards });
                 const updatedOptions = {
                     ...baseOptions,
                     disableDrag: newLockedState,
                     disableResize: newLockedState,
                 };
-                // Now update the options state separately to force a refresh of the grid layout
-                patchState(store, {
-                    dashboardsOption: updatedOptions,
-                });
+                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;
         },
     };
 }));
 
-class AXMDashboardHomeComponent extends AXPBasePageComponent {
+class AXMDashboardHomeComponent extends AXPPageLayoutBaseComponent {
     constructor() {
         super(...arguments);
+        // Dependencies
         this.rootConfig = RootConfig;
         this.activatedRoute = inject(ActivatedRoute);
         this.dialogService = inject(AXDialogService);
@@ -4900,25 +4816,20 @@ class AXMDashboardHomeComponent extends AXPBasePageComponent {
         this.router = inject(Router);
         this.store = inject(AXMDashboardStore);
         this.themeService = inject(AXPLayoutThemeService);
-        this.isEdited = signal(false);
+        // Component State
         this.context = signal({});
         this.dashboardsLoaded = signal(false);
-        this.#dashboardsEffect = effect(() => {
-            const allDashboards = this.store.allDashboards();
+        // Effects
+        this.#initEffect = effect(() => {
+            const allDashboards = this.store.availableDashboards();
             if (allDashboards.length > 0 && !this.dashboardsLoaded()) {
                 this.dashboardsLoaded.set(true);
                 this.applyDashboardFiltering();
                 this.recompute();
             }
         });
-        this.#loadingEffect = effect(() => {
-            const isLoading = this.store.isLoading();
-            if (isLoading === false && this.dashboardsLoaded()) {
-                this.recompute;
-                setTimeout(() => this.recompute(), 0);
-            }
-        });
     }
+    // Lifecycle Hooks
     async ngOnInit() {
         const childRoute = this.activatedRoute.firstChild || this.activatedRoute;
         childRoute.data.subscribe((data) => {
@@ -4926,13 +4837,11 @@ class AXMDashboardHomeComponent extends AXPBasePageComponent {
             this.store.setIsAdmin(isAdmin);
         });
     }
+    // Effects
+    #initEffect;
+    // Private Methods
     applyDashboardFiltering() {
-        this.store.filterDashboardsByScope(this.store.isAdmin());
-    }
-    #dashboardsEffect;
-    #loadingEffect;
-    toggleEdit() {
-        this.isEdited.update((value) => !value);
+        this.store.filterDashboardsByScope(this.store.isUserAdmin());
     }
     async confirmWidgetDelete(dashboardId, widgetId) {
         try {
@@ -4945,23 +4854,21 @@ class AXMDashboardHomeComponent extends AXPBasePageComponent {
             console.error('Error confirming widget deletion:', error);
         }
     }
+    // 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")',
@@ -4972,16 +4879,12 @@ 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,
                     },
                 ],
@@ -4989,19 +4892,16 @@ class AXMDashboardHomeComponent extends AXPBasePageComponent {
         ];
     }
     async getSecondaryMenuItems() {
-        const scope = this.rootConfig.config.i18n;
         const items = [
             {
-                title: await this.translateService.translateAsync('delete'),
-                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' },
             },
         ];
-        if (!this.store.isAdmin() && this.themeService.isDesktopDevice()) {
+        if (!this.store.isUserAdmin() && this.themeService.isDesktopDevice()) {
             items.push({
                 title: await this.translateService.translateAsync(this.store.isDashboardLocked() ? 'unlock' : 'lock', {
                     scope: 'dashboard',
@@ -5009,43 +4909,48 @@ class AXMDashboardHomeComponent extends AXPBasePageComponent {
                 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();
-                    // Add a short delay to ensure the grid layout updates properly
-                    setTimeout(() => {
-                        this.recompute();
-                    }, 50);
-                    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 }); }
@@ -5053,10 +4958,10 @@ class AXMDashboardHomeComponent extends AXPBasePageComponent {
             AXPDesignerService,
             AXMDashboardStore,
             {
-                provide: AXPBasePage,
+                provide: AXPPageLayoutBase,
                 useExisting: AXMDashboardHomeComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <!-- Content Section -->\n\n  <axp-page-content class=\"ax-relative\">\n    @if(store.isLoading()) {\n    <div\n      class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-w-full ax-absolute ax-z-10 ax-bg-white/80\"\n    >\n      <ax-loading></ax-loading>\n      <p class=\"ax-mt-3 ax-text-gray-600\">{{ t('loading', { scope: 'dashboard' }) | async }}</p>\n    </div>\n    } @else {\n    <axp-widgets-container [context]=\"context()\">\n      <ax-grid-layout-container [options]=\"store.dashboardsOption()\" (onChange)=\"store.onGridChange($event)\">\n        @if(!store.dashboards() || store.dashboards().length === 0) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">{{ t('no-dashboards', { scope: 'dashboard' }) | async }}</h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('add-first-dashboard', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        } @else if (!store.currentDashboard()) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">\n            {{ t('no-current-dashboard', { scope: 'dashboard' }) | async }}\n          </h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('select-dashboard', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        } @else if (!store.currentDashboard()?.widgets || store.currentDashboard()?.widgets.length === 0) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">{{ t('no-widgets', { scope: 'dashboard' }) | async }}</h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('add-first-widget', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        } @else { @for(widget of store.currentDashboard()?.widgets; track widget.config.id) {\n        <ax-grid-layout-widget [options]=\"widget.config\">\n          <axm-dashboard-widget-wrapper\n            [title]=\"widget.node?.options?.['title']\"\n            [hasConfiguration]=\"store.canConfigureWidget()(widget)\"\n            [isLocked]=\"store.isWidgetLocked()(widget)\"\n            (onDelete)=\"confirmWidgetDelete(store.currentDashboard()?.id!, widget.config.id!)\"\n            (onConfiguration)=\"store.handlePopupConfiguration(widget.node!)\"\n            (onValueChanged)=\"store.handleValueChanged(widget?.node!,$event)\"\n            (onOptionsChanged)=\"store.handleOptionsChanged(widget?.node!,$event)\"\n          >\n            @if(widget.node) {\n            <ng-container axp-widget-renderer [node]=\"widget.node\" [mode]=\"'view'\"></ng-container>\n            }\n          </axm-dashboard-widget-wrapper>\n        </ax-grid-layout-widget>\n        } }\n      </ax-grid-layout-container>\n    </axp-widgets-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axm-dashboard-home{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axm-dashboard-home .placeholder-content{border-radius:.5rem!important;border-width:1px!important;border-style:dashed!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))!important;background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5)!important}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content{border-radius:.375rem!important;border-width:1px!important;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important;--ax-comp-grid-layout-stack-item-content-bg-color: var(--ax-sys-color-lightest-surface) }\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXGridLayoutBuilderModule }, { kind: "component", type: i4$1.AXGridLayoutContainerComponent, selector: "ax-grid-layout-container", inputs: ["options", "isEmpty"], outputs: ["onAdded", "onRemoved", "onWidgetChange", "onChange", "onRender", "isEmptyChange"] }, { kind: "component", type: i4$1.AXGridLayoutWidgetComponent, selector: "ax-grid-layout-widget", inputs: ["options"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer,    axp-page-header,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-container,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i2$3.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: AXMDashboardWidgetWrapperComponent, selector: "axm-dashboard-widget-wrapper", inputs: ["title", "hasConfiguration", "isLocked"], outputs: ["onDelete", "onConfiguration", "onValueChanged", "onOptionsChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <!-- Content Section -->\n\n  <axp-page-content class=\"ax-relative\">\n    <!-- Loading State -->\n    @if(store.isLoading()) {\n    <div\n      class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-w-full ax-absolute ax-z-10 ax-bg-white/80\"\n    >\n      <ax-loading></ax-loading>\n      <p class=\"ax-mt-3 ax-text-gray-600\">{{ t('loading', { scope: 'dashboard' }) | async }}</p>\n    </div>\n    } @else {\n    <axp-widgets-container [context]=\"context()\">\n      <ax-grid-layout-container [options]=\"store.currentLayoutOptions()\" (onChange)=\"store.onGridChange($event)\">\n        <!-- No Dashboards State -->\n        @if(!store.dashboards() || store.dashboards().length === 0) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">{{ t('no-dashboards', { scope: 'dashboard' }) | async }}</h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('add-first-dashboard', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        }\n        <!-- No Selected Dashboard State -->\n        @else if (!store.selectedDashboard()) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">\n            {{ t('no-current-dashboard', { scope: 'dashboard' }) | async }}\n          </h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('select-dashboard', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        }\n        <!-- No Widgets State -->\n        @else if (!store.selectedDashboard()?.widgets || store.selectedDashboard()?.widgets?.length === 0) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">{{ t('no-widgets', { scope: 'dashboard' }) | async }}</h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('add-first-widget', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        }\n        <!-- Widgets Grid -->\n        @else { @for(widget of store.selectedDashboard()?.widgets; track widget.config.id) {\n        <ax-grid-layout-widget [options]=\"widget.config\">\n          <axm-dashboard-widget-wrapper\n            [title]=\"widget.node?.options?.['title']\"\n            [hasConfiguration]=\"store.canConfigureWidget()(widget)\"\n            [isLocked]=\"store.isWidgetLocked()(widget)\"\n            (onDelete)=\"confirmWidgetDelete(store.selectedDashboard()?.id!, widget.config.id!)\"\n            (onConfiguration)=\"store.handlePopupConfiguration(widget.node!)\"\n            (onValueChanged)=\"store.handleValueChanged(widget?.node!,$event)\"\n            (onOptionsChanged)=\"store.handleOptionsChanged(widget?.node!,$event)\"\n          >\n            @if(widget.node) {\n            <ng-container axp-widget-renderer [node]=\"widget.node\" [mode]=\"'view'\"></ng-container>\n            }\n          </axm-dashboard-widget-wrapper>\n        </ax-grid-layout-widget>\n        } }\n      </ax-grid-layout-container>\n    </axp-widgets-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axm-dashboard-home{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axm-dashboard-home .placeholder-content{border-radius:.5rem!important;border-width:1px!important;border-style:dashed!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))!important;background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5)!important}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content{border-radius:.375rem!important;border-width:1px!important;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important;--ax-comp-grid-layout-stack-item-content-bg-color: var(--ax-sys-color-lightest-surface) }\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXGridLayoutBuilderModule }, { kind: "component", type: i4$1.AXGridLayoutContainerComponent, selector: "ax-grid-layout-container", inputs: ["options", "isEmpty"], outputs: ["onAdded", "onRemoved", "onWidgetChange", "onChange", "onRender", "isEmptyChange"] }, { kind: "component", type: i4$1.AXGridLayoutWidgetComponent, selector: "ax-grid-layout-widget", inputs: ["options"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i2$3.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: AXMDashboardWidgetWrapperComponent, selector: "axm-dashboard-widget-wrapper", inputs: ["title", "hasConfiguration", "isLocked"], outputs: ["onDelete", "onConfiguration", "onValueChanged", "onOptionsChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMDashboardHomeComponent, decorators: [{
             type: Component,
@@ -5079,10 +4984,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AXPDesignerService,
                         AXMDashboardStore,
                         {
-                            provide: AXPBasePage,
+                            provide: AXPPageLayoutBase,
                             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        @if(!store.dashboards() || store.dashboards().length === 0) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">{{ t('no-dashboards', { scope: 'dashboard' }) | async }}</h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('add-first-dashboard', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        } @else if (!store.currentDashboard()) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">\n            {{ t('no-current-dashboard', { scope: 'dashboard' }) | async }}\n          </h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('select-dashboard', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        } @else if (!store.currentDashboard()?.widgets || store.currentDashboard()?.widgets.length === 0) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4\">\n          <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-mb-4\"></ax-icon>\n          <h2 class=\"ax-text-xl ax-font-semibold ax-mb-2\">{{ t('no-widgets', { scope: 'dashboard' }) | async }}</h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ t('add-first-widget', { scope: 'dashboard' }) | async }}</p>\n        </div>\n        } @else { @for(widget of store.currentDashboard()?.widgets; track widget.config.id) {\n        <ax-grid-layout-widget [options]=\"widget.config\">\n          <axm-dashboard-widget-wrapper\n            [title]=\"widget.node?.options?.['title']\"\n            [hasConfiguration]=\"store.canConfigureWidget()(widget)\"\n            [isLocked]=\"store.isWidgetLocked()(widget)\"\n            (onDelete)=\"confirmWidgetDelete(store.currentDashboard()?.id!, widget.config.id!)\"\n            (onConfiguration)=\"store.handlePopupConfiguration(widget.node!)\"\n            (onValueChanged)=\"store.handleValueChanged(widget?.node!,$event)\"\n            (onOptionsChanged)=\"store.handleOptionsChanged(widget?.node!,$event)\"\n          >\n            @if(widget.node) {\n            <ng-container axp-widget-renderer [node]=\"widget.node\" [mode]=\"'view'\"></ng-container>\n            }\n          </axm-dashboard-widget-wrapper>\n        </ax-grid-layout-widget>\n        } }\n      </ax-grid-layout-container>\n    </axp-widgets-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axm-dashboard-home{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axm-dashboard-home .placeholder-content{border-radius:.5rem!important;border-width:1px!important;border-style:dashed!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))!important;background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5)!important}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content{border-radius:.375rem!important;border-width:1px!important;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important;--ax-comp-grid-layout-stack-item-content-bg-color: var(--ax-sys-color-lightest-surface) }\n"] }]
+                    ], 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({