@acorex/modules 20.7.20 → 20.7.21

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

@@ -10,7 +10,7 @@ import { Injectable, inject, Injector, NgModule, input, signal, computed, effect
 import * as i4 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import { AXPCommonMenuKeys, AXP_GLOBAL_SEARCH_CONFIG_TOKEN } from '@acorex/modules/common';
-import { firstValueFrom, interval, map, Observable, catchError, throwError, of, finalize, switchMap } from 'rxjs';
+import { firstValueFrom, interval, map, Observable, catchError, throwError, of, finalize, switchMap, fromEvent } from 'rxjs';
 import * as i1 from '@acorex/components/tooltip';
 import { AXTooltipModule } from '@acorex/components/tooltip';
 import { AXMLocaleManagementService } from '@acorex/modules/locale-management';
@@ -57,6 +57,7 @@ import * as i1$4 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { AXMSecurityManagementRolesEntityService, AXMUsersEntityService } from '@acorex/modules/security-management';
 import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
+import { debounceTime } from 'rxjs/operators';
 import { AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
 import { AXBasePageComponent } from '@acorex/components/page';
 import { AXLabelModule } from '@acorex/components/label';
@@ -1032,12 +1033,27 @@ const AXPAnalogClockWidget = {
     },
     meta: {
         dimensions: {
-            width: 3,
-            height: 3,
-            minWidth: 3,
-            minHeight: 2,
-            maxWidth: 3,
-            maxHeight: 7,
+            lg: {
+                width: 3,
+                height: 3,
+                minWidth: 3,
+                minHeight: 2,
+                maxWidth: 3,
+                maxHeight: 7,
+            },
+            md: {
+                width: 3,
+                height: 3,
+                minWidth: 3,
+                minHeight: 2,
+                maxWidth: 3,
+                maxHeight: 7,
+            },
+            sm: {
+                height: 3,
+                minHeight: 2,
+                maxHeight: 7,
+            },
         },
     },
 };
@@ -1372,12 +1388,27 @@ const AXPBarChartWidget = {
     },
     meta: {
         dimensions: {
-            width: 5,
-            height: 6,
-            minWidth: 2,
-            minHeight: 2,
-            maxWidth: 6,
-            maxHeight: 7,
+            lg: {
+                width: 5,
+                height: 6,
+                minWidth: 2,
+                minHeight: 2,
+                maxWidth: 6,
+                maxHeight: 7,
+            },
+            md: {
+                width: 5,
+                height: 6,
+                minWidth: 2,
+                minHeight: 2,
+                maxWidth: 6,
+                maxHeight: 7,
+            },
+            sm: {
+                height: 6,
+                minHeight: 2,
+                maxHeight: 7,
+            },
         },
     },
 };
@@ -1720,12 +1751,27 @@ const AXPClockCalendarWidget = {
     },
     meta: {
         dimensions: {
-            width: 2,
-            height: 5,
-            minWidth: 2,
-            minHeight: 2,
-            maxWidth: 3,
-            maxHeight: 6,
+            lg: {
+                width: 2,
+                height: 5,
+                minWidth: 2,
+                minHeight: 2,
+                maxWidth: 3,
+                maxHeight: 6,
+            },
+            md: {
+                width: 2,
+                height: 5,
+                minWidth: 2,
+                minHeight: 2,
+                maxWidth: 3,
+                maxHeight: 6,
+            },
+            sm: {
+                height: 5,
+                minHeight: 2,
+                maxHeight: 6,
+            },
         },
     },
 };
@@ -1888,12 +1934,27 @@ const AXPDashboardShortcutWidget = {
     ],
     meta: {
         dimensions: {
-            width: 2,
-            height: 2,
-            minWidth: 1,
-            minHeight: 1,
-            maxWidth: 3,
-            maxHeight: 2,
+            lg: {
+                width: 2,
+                height: 2,
+                minWidth: 1,
+                minHeight: 1,
+                maxWidth: 3,
+                maxHeight: 2,
+            },
+            md: {
+                width: 2,
+                height: 2,
+                minWidth: 1,
+                minHeight: 1,
+                maxWidth: 3,
+                maxHeight: 2,
+            },
+            sm: {
+                height: 2,
+                minHeight: 1,
+                maxHeight: 2,
+            },
         },
     },
     components: {
@@ -2175,12 +2236,27 @@ const AXPDonutChartWidget = {
     },
     meta: {
         dimensions: {
-            width: 4,
-            height: 4,
-            minWidth: 2,
-            minHeight: 2,
-            maxWidth: 5,
-            maxHeight: 6,
+            lg: {
+                width: 4,
+                height: 4,
+                minWidth: 2,
+                minHeight: 2,
+                maxWidth: 5,
+                maxHeight: 6,
+            },
+            md: {
+                width: 4,
+                height: 4,
+                minWidth: 2,
+                minHeight: 2,
+                maxWidth: 5,
+                maxHeight: 6,
+            },
+            sm: {
+                height: 4,
+                minHeight: 2,
+                maxHeight: 6,
+            },
         },
     },
 };
@@ -2453,12 +2529,27 @@ const AXPGaugeChartWidget = {
     },
     meta: {
         dimensions: {
-            width: 3,
-            height: 4,
-            minWidth: 2,
-            minHeight: 2,
-            maxWidth: 4,
-            maxHeight: 5,
+            lg: {
+                width: 3,
+                height: 4,
+                minWidth: 2,
+                minHeight: 2,
+                maxWidth: 4,
+                maxHeight: 5,
+            },
+            md: {
+                width: 3,
+                height: 4,
+                minWidth: 2,
+                minHeight: 2,
+                maxWidth: 4,
+                maxHeight: 5,
+            },
+            sm: {
+                height: 4,
+                minHeight: 2,
+                maxHeight: 5,
+            },
         },
     },
 };
@@ -2884,12 +2975,27 @@ const AXPLineChartWidget = {
     },
     meta: {
         dimensions: {
-            width: 3,
-            height: 4,
-            minWidth: 2,
-            minHeight: 2,
-            maxWidth: 6,
-            maxHeight: 6,
+            lg: {
+                width: 3,
+                height: 4,
+                minWidth: 2,
+                minHeight: 2,
+                maxWidth: 6,
+                maxHeight: 6,
+            },
+            md: {
+                width: 3,
+                height: 4,
+                minWidth: 2,
+                minHeight: 2,
+                maxWidth: 6,
+                maxHeight: 6,
+            },
+            sm: {
+                height: 4,
+                minHeight: 2,
+                maxHeight: 6,
+            },
         },
     },
 };
@@ -2951,7 +3057,7 @@ class AXPStickyNoteWidgetViewComponent extends AXPValueWidgetComponent {
                 provide: AXGridLayoutWidgetComponent,
                 useExisting: AXPStickyNoteWidgetViewComponent,
             },
-        ], viewQueries: [{ propertyName: "wysiwyg", first: true, predicate: ["wysiwyg"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"sticky-note-container ax-size-full ax-rounded-lg ax-flex ax-flex-col ax-p-4 ax-shadow-md ax-transition-all ax-duration-300 hover:ax-shadow-lg\"\n  [style.background-color]=\"bgColor()\"\n  [style.color]=\"color()\"\n  [class.ax-shadow-lg]=\"isEditing()\"\n  [class.ax-scale-[1.02]]=\"isEditing()\"\n  (dblclick)=\"activateEdit()\"\n>\n  <!-- Header with timestamp -->\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3\">\n    <div class=\"ax-text-xs ax-opacity-70 ax-font-medium ax-flex ax-items-center ax-gap-1\">\n      <i class=\"fa-regular fa-clock ax-text-[0.65rem]\"></i>\n      {{ date() | format: 'datetime' : { format: 'short' } | async }}\n    </div>\n  </div>\n\n  <!-- Content area -->\n  <div class=\"ax-flex-1 ax-overflow-auto\">\n    <ax-wysiwyg-container\n      #wysiwyg\n      [class]=\"isEditing() ? 'ax-pointer-events-auto ax-cursor-text' : 'ax-pointer-events-none !ax-cursor-pointer'\"\n      class=\"ax-h-full\"\n      placeHolder=\"start writing with double click...\"\n      look=\"none\"\n      (onValueChanged)=\"valueChange($event)\"\n      [ngModel]=\"value()\"\n    >\n      <ax-wysiwyg-view class=\"!ax-size-full ax-border-b-0\"></ax-wysiwyg-view>\n      <ax-wysiwyg-toolbar></ax-wysiwyg-toolbar>\n    </ax-wysiwyg-container>\n  </div>\n\n  <!-- Footer with color selector and save button -->\n  @if (isEditing()) {\n    <div class=\"ax-absolute ax-bottom-2 ax-left-2 ax-right-2 ax-flex ax-flex-wrap ax-gap-1 ax-text-xs\">\n      <!-- Color selection bar when in edit mode -->\n      <div class=\"ax-flex ax-w-full ax-mt-2 ax-border ax-border-gray-200 ax-overflow-hidden ax-rounded-md\">\n        @for (preset of colorPresets; track preset) {\n          <div\n            class=\"ax-h-6 ax-flex-1 ax-cursor-pointer ax-transition-all ax-duration-200 ax-border-r ax-border-gray-200 last:ax-border-r-0 hover:ax-brightness-95\"\n            [style.background-color]=\"preset\"\n            [class.ax-ring-inset]=\"bgColor() === preset\"\n            [class.ax-ring-2]=\"bgColor() === preset\"\n            [class.ax-ring-primary]=\"bgColor() === preset\"\n            (click)=\"setColor(preset)\"\n          ></div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep ax-wysiwyg-view{color:#2e2e2e!important}\n"], dependencies: [{ kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i1$1.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "readonly", "disabled", "value", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$1.AXWysiwygViewComponent, selector: "ax-wysiwyg-view" }, { kind: "component", type: i1$1.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "pipe", type: i2.AXFormatPipe, name: "format" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "wysiwyg", first: true, predicate: ["wysiwyg"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"sticky-note-container ax-size-full ax-rounded-lg ax-flex ax-flex-col ax-p-4 ax-shadow-md ax-transition-all ax-duration-300 hover:ax-shadow-lg\"\n  [style.background-color]=\"bgColor()\"\n  [style.color]=\"color()\"\n  [class.ax-shadow-lg]=\"isEditing()\"\n  [class.ax-scale-[1.02]]=\"isEditing()\"\n  (dblclick)=\"activateEdit()\"\n>\n  <!-- Header with timestamp -->\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3\">\n    <div class=\"ax-text-xs ax-opacity-70 ax-font-medium ax-flex ax-items-center ax-gap-1\">\n      <i class=\"fa-regular fa-clock ax-text-[0.65rem]\"></i>\n      {{ date() | format: 'datetime' : { format: 'short' } | async }}\n    </div>\n  </div>\n\n  <!-- Content area -->\n  <div class=\"ax-flex-1 ax-overflow-auto\">\n    <ax-wysiwyg-container\n      #wysiwyg\n      [class]=\"isEditing() ? 'ax-pointer-events-auto ax-cursor-text' : 'ax-pointer-events-none !ax-cursor-pointer'\"\n      class=\"ax-h-full\"\n      placeHolder=\"start writing with double click...\"\n      look=\"none\"\n      (onValueChanged)=\"valueChange($event)\"\n      [ngModel]=\"value()\"\n    >\n      <ax-wysiwyg-view class=\"!ax-size-full ax-border-b-0\"></ax-wysiwyg-view>\n      <ax-wysiwyg-toolbar class=\"ax-hidden\"></ax-wysiwyg-toolbar>\n    </ax-wysiwyg-container>\n  </div>\n\n  <!-- Footer with color selector and save button -->\n  @if (isEditing()) {\n    <div class=\"ax-absolute ax-bottom-2 ax-left-2 ax-right-2 ax-flex ax-flex-wrap ax-gap-1 ax-text-xs\">\n      <!-- Color selection bar when in edit mode -->\n      <div class=\"ax-flex ax-w-full ax-mt-2 ax-border ax-border-gray-200 ax-overflow-hidden ax-rounded-md\">\n        @for (preset of colorPresets; track preset) {\n          <div\n            class=\"ax-h-6 ax-flex-1 ax-cursor-pointer ax-transition-all ax-duration-200 ax-border-r ax-border-gray-200 last:ax-border-r-0 hover:ax-brightness-95\"\n            [style.background-color]=\"preset\"\n            [class.ax-ring-inset]=\"bgColor() === preset\"\n            [class.ax-ring-2]=\"bgColor() === preset\"\n            [class.ax-ring-primary]=\"bgColor() === preset\"\n            (click)=\"setColor(preset)\"\n          ></div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep ax-wysiwyg-view{color:#2e2e2e!important}\n"], dependencies: [{ kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i1$1.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "readonly", "disabled", "value", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$1.AXWysiwygViewComponent, selector: "ax-wysiwyg-view" }, { kind: "component", type: i1$1.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "pipe", type: i2.AXFormatPipe, name: "format" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPStickyNoteWidgetViewComponent, decorators: [{
             type: Component,
@@ -2971,7 +3077,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             provide: AXGridLayoutWidgetComponent,
                             useExisting: AXPStickyNoteWidgetViewComponent,
                         },
-                    ], template: "<div\n  class=\"sticky-note-container ax-size-full ax-rounded-lg ax-flex ax-flex-col ax-p-4 ax-shadow-md ax-transition-all ax-duration-300 hover:ax-shadow-lg\"\n  [style.background-color]=\"bgColor()\"\n  [style.color]=\"color()\"\n  [class.ax-shadow-lg]=\"isEditing()\"\n  [class.ax-scale-[1.02]]=\"isEditing()\"\n  (dblclick)=\"activateEdit()\"\n>\n  <!-- Header with timestamp -->\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3\">\n    <div class=\"ax-text-xs ax-opacity-70 ax-font-medium ax-flex ax-items-center ax-gap-1\">\n      <i class=\"fa-regular fa-clock ax-text-[0.65rem]\"></i>\n      {{ date() | format: 'datetime' : { format: 'short' } | async }}\n    </div>\n  </div>\n\n  <!-- Content area -->\n  <div class=\"ax-flex-1 ax-overflow-auto\">\n    <ax-wysiwyg-container\n      #wysiwyg\n      [class]=\"isEditing() ? 'ax-pointer-events-auto ax-cursor-text' : 'ax-pointer-events-none !ax-cursor-pointer'\"\n      class=\"ax-h-full\"\n      placeHolder=\"start writing with double click...\"\n      look=\"none\"\n      (onValueChanged)=\"valueChange($event)\"\n      [ngModel]=\"value()\"\n    >\n      <ax-wysiwyg-view class=\"!ax-size-full ax-border-b-0\"></ax-wysiwyg-view>\n      <ax-wysiwyg-toolbar></ax-wysiwyg-toolbar>\n    </ax-wysiwyg-container>\n  </div>\n\n  <!-- Footer with color selector and save button -->\n  @if (isEditing()) {\n    <div class=\"ax-absolute ax-bottom-2 ax-left-2 ax-right-2 ax-flex ax-flex-wrap ax-gap-1 ax-text-xs\">\n      <!-- Color selection bar when in edit mode -->\n      <div class=\"ax-flex ax-w-full ax-mt-2 ax-border ax-border-gray-200 ax-overflow-hidden ax-rounded-md\">\n        @for (preset of colorPresets; track preset) {\n          <div\n            class=\"ax-h-6 ax-flex-1 ax-cursor-pointer ax-transition-all ax-duration-200 ax-border-r ax-border-gray-200 last:ax-border-r-0 hover:ax-brightness-95\"\n            [style.background-color]=\"preset\"\n            [class.ax-ring-inset]=\"bgColor() === preset\"\n            [class.ax-ring-2]=\"bgColor() === preset\"\n            [class.ax-ring-primary]=\"bgColor() === preset\"\n            (click)=\"setColor(preset)\"\n          ></div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep ax-wysiwyg-view{color:#2e2e2e!important}\n"] }]
+                    ], template: "<div\n  class=\"sticky-note-container ax-size-full ax-rounded-lg ax-flex ax-flex-col ax-p-4 ax-shadow-md ax-transition-all ax-duration-300 hover:ax-shadow-lg\"\n  [style.background-color]=\"bgColor()\"\n  [style.color]=\"color()\"\n  [class.ax-shadow-lg]=\"isEditing()\"\n  [class.ax-scale-[1.02]]=\"isEditing()\"\n  (dblclick)=\"activateEdit()\"\n>\n  <!-- Header with timestamp -->\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3\">\n    <div class=\"ax-text-xs ax-opacity-70 ax-font-medium ax-flex ax-items-center ax-gap-1\">\n      <i class=\"fa-regular fa-clock ax-text-[0.65rem]\"></i>\n      {{ date() | format: 'datetime' : { format: 'short' } | async }}\n    </div>\n  </div>\n\n  <!-- Content area -->\n  <div class=\"ax-flex-1 ax-overflow-auto\">\n    <ax-wysiwyg-container\n      #wysiwyg\n      [class]=\"isEditing() ? 'ax-pointer-events-auto ax-cursor-text' : 'ax-pointer-events-none !ax-cursor-pointer'\"\n      class=\"ax-h-full\"\n      placeHolder=\"start writing with double click...\"\n      look=\"none\"\n      (onValueChanged)=\"valueChange($event)\"\n      [ngModel]=\"value()\"\n    >\n      <ax-wysiwyg-view class=\"!ax-size-full ax-border-b-0\"></ax-wysiwyg-view>\n      <ax-wysiwyg-toolbar class=\"ax-hidden\"></ax-wysiwyg-toolbar>\n    </ax-wysiwyg-container>\n  </div>\n\n  <!-- Footer with color selector and save button -->\n  @if (isEditing()) {\n    <div class=\"ax-absolute ax-bottom-2 ax-left-2 ax-right-2 ax-flex ax-flex-wrap ax-gap-1 ax-text-xs\">\n      <!-- Color selection bar when in edit mode -->\n      <div class=\"ax-flex ax-w-full ax-mt-2 ax-border ax-border-gray-200 ax-overflow-hidden ax-rounded-md\">\n        @for (preset of colorPresets; track preset) {\n          <div\n            class=\"ax-h-6 ax-flex-1 ax-cursor-pointer ax-transition-all ax-duration-200 ax-border-r ax-border-gray-200 last:ax-border-r-0 hover:ax-brightness-95\"\n            [style.background-color]=\"preset\"\n            [class.ax-ring-inset]=\"bgColor() === preset\"\n            [class.ax-ring-2]=\"bgColor() === preset\"\n            [class.ax-ring-primary]=\"bgColor() === preset\"\n            (click)=\"setColor(preset)\"\n          ></div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep ax-wysiwyg-view{color:#2e2e2e!important}\n"] }]
         }], propDecorators: { wysiwyg: [{ type: i0.ViewChild, args: ['wysiwyg', { isSignal: true }] }], handleClickOutside: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -3007,12 +3113,27 @@ const AXPStickyNoteWidget = {
     },
     meta: {
         dimensions: {
-            width: 2,
-            height: 3,
-            minWidth: 2,
-            minHeight: 2,
-            maxWidth: 4,
-            maxHeight: 4,
+            lg: {
+                width: 2,
+                height: 3,
+                minWidth: 2,
+                minHeight: 2,
+                maxWidth: 4,
+                maxHeight: 4,
+            },
+            md: {
+                width: 2,
+                height: 3,
+                minWidth: 2,
+                minHeight: 2,
+                maxWidth: 4,
+                maxHeight: 4,
+            },
+            sm: {
+                height: 3,
+                minHeight: 2,
+                maxHeight: 4,
+            },
         },
     },
 };
@@ -4101,12 +4222,27 @@ const AXPAdvancedWeatherWidget = {
     },
     meta: {
         dimensions: {
-            width: 3,
-            height: 5,
-            minWidth: 3,
-            minHeight: 5,
-            maxWidth: 5,
-            maxHeight: 7,
+            lg: {
+                width: 3,
+                height: 5,
+                minWidth: 3,
+                minHeight: 5,
+                maxWidth: 5,
+                maxHeight: 7,
+            },
+            md: {
+                width: 3,
+                height: 5,
+                minWidth: 3,
+                minHeight: 5,
+                maxWidth: 5,
+                maxHeight: 7,
+            },
+            sm: {
+                height: 5,
+                minHeight: 5,
+                maxHeight: 7,
+            },
         },
     },
 };
@@ -4399,12 +4535,27 @@ const AXPMinimalWeatherWidget = {
     },
     meta: {
         dimensions: {
-            width: 2,
-            height: 2,
-            minWidth: 1,
-            minHeight: 2,
-            maxWidth: 2,
-            maxHeight: 3,
+            lg: {
+                width: 2,
+                height: 2,
+                minWidth: 1,
+                minHeight: 2,
+                maxWidth: 2,
+                maxHeight: 3,
+            },
+            md: {
+                width: 2,
+                height: 2,
+                minWidth: 1,
+                minHeight: 2,
+                maxWidth: 2,
+                maxHeight: 3,
+            },
+            sm: {
+                height: 2,
+                minHeight: 2,
+                maxHeight: 3,
+            },
         },
     },
 };
@@ -4953,12 +5104,27 @@ const AXPWeatherWidget = {
     },
     meta: {
         dimensions: {
-            width: 3,
-            height: 7,
-            minWidth: 2,
-            minHeight: 4,
-            maxWidth: 4,
-            maxHeight: 8,
+            lg: {
+                width: 3,
+                height: 7,
+                minWidth: 2,
+                minHeight: 4,
+                maxWidth: 4,
+                maxHeight: 8,
+            },
+            md: {
+                width: 3,
+                height: 7,
+                minWidth: 2,
+                minHeight: 4,
+                maxWidth: 4,
+                maxHeight: 8,
+            },
+            sm: {
+                height: 7,
+                minHeight: 4,
+                maxHeight: 8,
+            },
         },
     },
 };
@@ -5129,9 +5295,11 @@ class AXMDashboardWidgetWrapperComponent {
         this.widget = contentChild(AXPWidgetRendererDirective, ...(ngDevMode ? [{ debugName: "widget" }] : []));
         this.#init = afterNextRender(() => {
             this.widget()?.onOptionsChanged.subscribe((c) => {
+                console.log(c);
                 this.onOptionsChanged.emit(c.widget.options());
             });
             this.widget()?.onValueChanged.subscribe((c) => {
+                console.log(c);
                 this.onValueChanged.emit(c.widget.getValue());
             });
         });
@@ -5349,6 +5517,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 //#region ----   Imports   ----
 //#endregion
 //#region ----   Utility Functions   ----
+/** Width threshold for switching between lg (12 col) and md (6 col) breakpoints */
+const BREAKPOINT_MD_WIDTH = 768;
+const BREAKPOINT_MD_COLUMN = 6;
+const BREAKPOINT_SM_WIDTH = 576;
+const BREAKPOINT_SM_COLUMN = 1;
+/**
+ * Returns the current dashboard breakpoint based on window width.
+ * lg: > 768px (12 columns), md: 481–768px (6 columns), sm: <= 480px (1 column)
+ */
+const getBreakpointFromWidth = () => {
+    if (typeof window === 'undefined')
+        return 'lg';
+    const width = window.innerWidth;
+    if (width <= BREAKPOINT_SM_WIDTH)
+        return 'sm';
+    if (width <= BREAKPOINT_MD_WIDTH)
+        return 'md';
+    return 'lg';
+};
+/**
+ * Returns the grid column count for a given breakpoint.
+ */
+const getColumnsForBreakpoint = (bp) => {
+    switch (bp) {
+        case 'sm':
+            return BREAKPOINT_SM_COLUMN;
+        case 'md':
+            return BREAKPOINT_MD_COLUMN;
+        case 'lg':
+        default:
+            return 12;
+    }
+};
 /**
  * Creates the initial state for the dashboard store.
  */
@@ -5362,22 +5563,45 @@ const createInitialState = () => ({
         cellHeight: 75,
         gap: 5,
         minRow: 9,
-        column: 12,
-        responsiveLayout: [
-            { column: 4, width: 768 },
-            { column: 1, width: 480 },
-        ],
+        column: getColumnsForBreakpoint(getBreakpointFromWidth()),
     },
     isLoading: false,
+    currentBreakpoint: getBreakpointFromWidth(),
+    isBreakpointTransitioning: false,
 });
+/**
+ * Migrates a widget config from the old flat format to the new per-breakpoint format.
+ * Old format: { id, x, y, width, height, minWidth, ... }
+ * New format: { id, lg: { ... }, md: { ... }, sm: { ... } }
+ */
+const migrateWidgetConfig = (widget) => {
+    const config = widget.config;
+    // Already in new format (has lg key as an object)
+    if (config && typeof config.lg === 'object' && config.lg !== null) {
+        return widget;
+    }
+    // Old flat format: convert to per-breakpoint
+    const { id, ...rest } = config || {};
+    const widgetId = id || AXPDataGenerator.uuid();
+    return {
+        ...widget,
+        config: {
+            id: widgetId,
+            lg: { id: widgetId, ...rest },
+            md: { id: widgetId, ...rest },
+            sm: { id: widgetId, width: 1, height: rest.height || 2 },
+        },
+    };
+};
 /**
  * Maps an entity model to a dashboard layout model.
+ * Automatically migrates old flat widget configs to the new per-breakpoint format.
  */
 const modelToDashboardLayout = (model) => ({
     id: model.id || '',
     title: model.title,
     description: model.description,
-    widgets: model.widgets || [],
+    widgets: (model.widgets || []).map(migrateWidgetConfig),
     createdBy: model.userId ?? model.auditInfo?.created?.by?.id,
     roleIds: model.roleIds,
     isDeleted: model.isDeleted,
@@ -5457,23 +5681,22 @@ const hasMatchingRole = (dashboard, userRole) => {
 };
 /**
  * Computes effective layout options based on device, lock, admin and role restrictions.
+ * Always derives drag/resize state from the dashboard model — never from base options.
  */
 const deriveLayoutOptions = (baseOptions, dashboard, isAdmin, isDesktop, userRole) => {
+    const { disableDrag: _dd, disableResize: _dr, ...cleanBase } = baseOptions;
     if (!dashboard)
-        return baseOptions;
-    if (!isDesktop)
-        return { ...baseOptions, disableDrag: true, disableResize: true };
-    if (baseOptions.disableDrag !== undefined && baseOptions.disableResize !== undefined)
-        return baseOptions;
+        return cleanBase;
+    // if (!isDesktop) return { ...cleanBase, disableDrag: true, disableResize: true };
     if (dashboard.locked === true)
-        return { ...baseOptions, disableDrag: true, disableResize: true };
+        return { ...cleanBase, disableDrag: true, disableResize: true };
     if (isAdmin)
-        return baseOptions;
+        return cleanBase;
     const roleMatched = hasMatchingRole(dashboard, userRole);
-    if (!isAdmin && roleMatched && dashboard.scope === 'T') {
-        return { ...baseOptions, disableDrag: true, disableResize: true };
+    if (roleMatched && dashboard.scope === 'T') {
+        return { ...cleanBase, disableDrag: true, disableResize: true };
     }
-    return baseOptions;
+    return cleanBase;
 };
 /**
  * Checks if a widget is locked for the current user based on dashboard and role context.
@@ -5536,7 +5759,25 @@ withComputed((state, sessionService = inject(AXPSessionService), deviceService =
         const baseOptions = state.dashboardsOption();
         const isDesktop = deviceService.isDesktopDevice();
         const userRole = readUserRole(sessionService);
-        return deriveLayoutOptions(baseOptions, currentDashboard || undefined, state.isAdmin(), isDesktop, userRole);
+        // Dynamically set column count based on the current breakpoint
+        const bp = state.currentBreakpoint();
+        const optionsWithColumn = { ...baseOptions, column: getColumnsForBreakpoint(bp) };
+        return deriveLayoutOptions(optionsWithColumn, currentDashboard || undefined, state.isAdmin(), isDesktop, userRole);
+    }),
+    /**
+     * Returns the current dashboard's widgets with their resolved breakpoint options.
+     * This computed depends on BOTH the dashboard widgets AND currentBreakpoint,
+     * ensuring the @for source produces a new array when the breakpoint changes.
+     */
+    currentWidgets: computed(() => {
+        const dashboard = state.dashboards().find((d) => d.id === state.currentDashboardId());
+        const bp = state.currentBreakpoint();
+        if (!dashboard?.widgets)
+            return [];
+        return dashboard.widgets.map((widget) => ({
+            ...widget,
+            resolvedOptions: widget.config[bp],
+        }));
     }),
     canConfigureWidget: computed(() => (widget) => {
         const currentDashboard = state.dashboards().find((dashboard) => dashboard.id === state.currentDashboardId());
@@ -5558,6 +5799,52 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
         const isAdmin = store.isUserAdmin();
         loadDashboards(isAdmin);
     });
+    // Track window resize and update currentBreakpoint signal.
+    // Sets isBreakpointTransitioning to suppress onGridChange saves
+    // while the grid settles after a breakpoint switch.
+    let transitionTimer = null;
+    // Queued save: ensures only one save is in-flight at a time.
+    // If a new save is requested while one is running, it queues the latest and runs it after.
+    let isSaving = false;
+    let pendingSaveDashboard = null;
+    async function persistDashboard(dashboard) {
+        if (isSaving) {
+            // Queue the latest dashboard for saving after current completes
+            pendingSaveDashboard = dashboard;
+            return;
+        }
+        isSaving = true;
+        try {
+            await dashboardService.updateOne(dashboard.id, dashboardLayoutToModel(dashboard));
+        }
+        catch (error) {
+            console.error('Error saving dashboard layout:', error);
+        }
+        isSaving = false;
+        // Process queued save if any
+        if (pendingSaveDashboard) {
+            const next = pendingSaveDashboard;
+            pendingSaveDashboard = null;
+            await persistDashboard(next);
+        }
+    }
+    if (typeof window !== 'undefined') {
+        fromEvent(window, 'resize')
+            .pipe(debounceTime(100))
+            .subscribe(() => {
+            const bp = getBreakpointFromWidth();
+            if (bp !== store.currentBreakpoint()) {
+                if (transitionTimer)
+                    clearTimeout(transitionTimer);
+                patchState(store, { currentBreakpoint: bp, isBreakpointTransitioning: true });
+                // End transition after grid has settled (~500ms covers GridStack reflow + Angular CD)
+                transitionTimer = setTimeout(() => {
+                    patchState(store, { isBreakpointTransitioning: false });
+                    transitionTimer = null;
+                }, 500);
+            }
+        });
+    }
     /**
      * Loads dashboards and sets current dashboard based on user settings.
      */
@@ -5772,18 +6059,41 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
                     widget.path = `${widget.type}-${randomId}`;
                     return widget;
                 });
-                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 convertedWidgets = filteredWidgets.map((widget) => {
+                    const id = AXPDataGenerator.uuid();
+                    const dims = widget?.meta?.dimensions;
+                    return {
+                        config: {
+                            id,
+                            lg: {
+                                id,
+                                height: dims?.lg?.height ?? 2,
+                                width: dims?.lg?.width ?? 2,
+                                minHeight: dims?.lg?.minHeight,
+                                minWidth: dims?.lg?.minWidth,
+                                maxHeight: dims?.lg?.maxHeight,
+                                maxWidth: dims?.lg?.maxWidth,
+                            },
+                            md: {
+                                id,
+                                height: dims?.md?.height ?? dims?.lg?.height ?? 2,
+                                width: dims?.md?.width ?? dims?.lg?.width ?? 2,
+                                minHeight: dims?.md?.minHeight ?? dims?.lg?.minHeight,
+                                minWidth: dims?.md?.minWidth ?? dims?.lg?.minWidth,
+                                maxHeight: dims?.md?.maxHeight ?? dims?.lg?.maxHeight,
+                                maxWidth: dims?.md?.maxWidth ?? dims?.lg?.maxWidth,
+                            },
+                            sm: {
+                                id,
+                                width: 1,
+                                height: dims?.sm?.height ?? dims?.lg?.height ?? 2,
+                                minHeight: dims?.sm?.minHeight ?? dims?.lg?.minHeight,
+                                maxHeight: dims?.sm?.maxHeight ?? dims?.lg?.maxHeight,
+                            },
+                        },
+                        node: { ...widget, name: widget.name },
+                    };
+                });
                 const currentDashboard = store.selectedDashboard();
                 const updatedDashboard = {
                     ...currentDashboard,
@@ -5870,22 +6180,51 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
             settingsService.scope(AXPPlatformScope.User).set(AXPHomeDashboardSetting$1.CurrentDashboard, dashboard.id);
         },
         /**
-         * Handles grid layout changes (drag/resize) on desktop and saves positions.
+         * Handles grid layout changes (drag/resize) and saves positions for the current breakpoint.
+         * Skips saving during breakpoint transitions to avoid persisting auto-reflowed layouts.
+         * Persists immediately with queued writes to prevent concurrent save conflicts.
          */
-        async onGridChange(event) {
-            if (!deviceService.isDesktopDevice() || !store.selectedDashboard())
+        onGridChange(event) {
+            if (!store.selectedDashboard())
+                return;
+            // Skip saves during breakpoint transitions to avoid persisting auto-reflowed layouts
+            if (store.isBreakpointTransitioning())
+                return;
+            // Skip if the live window breakpoint disagrees with the store
+            const liveBp = getBreakpointFromWidth();
+            const storeBp = store.currentBreakpoint();
+            if (liveBp !== storeBp)
                 return;
+            const bp = storeBp;
             const nodes = event.nodes.map(({ element, ...rest }) => rest);
             const currentDashboard = store.selectedDashboard();
+            let hasChanges = false;
             const updatedWidgets = currentDashboard.widgets.map((widget) => {
                 const updatedNode = nodes.find((node) => node.id === widget.config.id);
-                return updatedNode ? { ...widget, config: updatedNode } : widget;
+                if (!updatedNode)
+                    return widget;
+                const existing = widget.config[bp];
+                if (existing?.x === updatedNode.x &&
+                    existing?.y === updatedNode.y &&
+                    existing?.width === updatedNode.width &&
+                    existing?.height === updatedNode.height) {
+                    return widget;
+                }
+                hasChanges = true;
+                return {
+                    ...widget,
+                    config: {
+                        ...widget.config,
+                        [bp]: { ...widget.config[bp], ...updatedNode, id: widget.config.id },
+                    },
+                };
             });
+            if (!hasChanges)
+                return;
             const updatedDashboard = {
                 ...currentDashboard,
                 widgets: updatedWidgets,
             };
-            await dashboardService.updateOne(updatedDashboard.id, dashboardLayoutToModel(updatedDashboard));
             const updatedDashboards = store
                 .dashboards()
                 .map((dashboard) => (dashboard.id === updatedDashboard.id ? updatedDashboard : dashboard));
@@ -5893,6 +6232,8 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
                 .availableDashboards()
                 .map((dashboard) => (dashboard.id === updatedDashboard.id ? updatedDashboard : dashboard));
             patchState(store, { dashboards: updatedDashboards, allDashboards: updatedAllDashboards });
+            // Persist to storage (queued to prevent concurrent writes)
+            persistDashboard(updatedDashboard);
         },
         /**
          * Applies widget configuration changes returned from popup.
@@ -6013,23 +6354,18 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
                     console.warn('User does not have permission to toggle lock for this dashboard');
                     return;
                 }
-                const newLockedState = !currentDashboard.locked;
                 const updatedDashboard = {
                     ...currentDashboard,
-                    locked: newLockedState,
+                    locked: !currentDashboard.locked,
                 };
                 await dashboardService.updateOne(updatedDashboard.id, dashboardLayoutToModel(updatedDashboard));
                 const updatedDashboards = store
                     .dashboards()
                     .map((dashboard) => (dashboard.id === updatedDashboard.id ? updatedDashboard : dashboard));
-                const baseOptions = { ...store.dashboardsOption() };
-                patchState(store, { dashboards: updatedDashboards });
-                const updatedOptions = {
-                    ...baseOptions,
-                    disableDrag: newLockedState,
-                    disableResize: newLockedState,
-                };
-                patchState(store, { dashboardsOption: updatedOptions });
+                const updatedAllDashboards = store
+                    .availableDashboards()
+                    .map((dashboard) => (dashboard.id === updatedDashboard.id ? updatedDashboard : dashboard));
+                patchState(store, { dashboards: updatedDashboards, allDashboards: updatedAllDashboards });
             }
             catch (error) {
                 console.error('Error toggling dashboard lock state:', error);
@@ -6202,11 +6538,11 @@ class AXMDashboardHomeComponent extends AXPPageLayoutBaseComponent {
                 provide: AXPPageLayoutBase,
                 useExisting: AXMDashboardHomeComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <!-- Content Section -->\n\n  <axp-page-content class=\"ax-relative\">\n    <!-- Loading State -->\n    @if(store.isLoading()) {\n    <div\n      class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-w-full ax-absolute ax-z-10 ax-bg-white/80\"\n    >\n      <ax-loading></ax-loading>\n      <p class=\"ax-mt-3 ax-text-gray-600\">{{ '@dashboard:loading' | translate | 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        <axp-state-message\n          icon=\"fa-light fa-shapes\"\n          [title]=\"'@dashboard:empty-state.title'\"\n          [description]=\"'@dashboard:empty-state.description'\"\n        >\n          <div slot=\"actions\">\n            <button (click)=\"execute({ name: 'new-dashboard' })\" class=\"ax-underline\">\n              {{ '@dashboard:add-first-dashboard' | translate | async }}\n            </button>\n          </div>\n        </axp-state-message>\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            {{ '@dashboard:no-current-dashboard' | translate | async }}\n          </h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ '@dashboard:select-dashboard' | translate | async }}</p>\n        </div>\n        } -->\n        <!-- No Widgets State -->\n        @else if (!store.selectedDashboard()?.widgets || store.selectedDashboard()?.widgets?.length === 0) {\n        <axp-state-message\n          icon=\"fa-light fa-shapes\"\n          [title]=\"'@dashboard:no-widgets.title'\"\n          [description]=\"'@dashboard:no-widgets.description'\"\n        >\n          <div slot=\"actions\">\n            <button (click)=\"execute({ name: 'new-widget' })\" class=\"ax-underline\">\n              {{ '@dashboard:add-widget' | translate | async }}\n            </button>\n          </div>\n        </axp-state-message>\n        }\n        <!-- Widgets Grid -->\n        @else { @for(widget of store.selectedDashboard()?.widgets; track widget.config.id) {\n        <ax-grid-layout-widget\n          [options]=\"widget.config\"\n          class=\"dark:[--ax-comp-grid-layout-stack-item-content-bg-color:var(--ax-sys-color-lighter-surface)] [--ax-comp-grid-layout-stack-item-content-bg-color:var(--ax-sys-color-lightest-surface)]\"\n        >\n          <axm-dashboard-widget-wrapper\n            [title]=\"widget.node?.options?.['title']\"\n            [hasConfiguration]=\"store.canConfigureWidget()(widget)\"\n            [isLocked]=\"store.isWidgetLocked()(widget)\"\n            (onDelete)=\"confirmWidgetDelete(store.selectedDashboard()?.id!, widget.config.id!)\"\n            (onConfiguration)=\"store.handlePopupConfiguration(widget.node!)\"\n            (onValueChanged)=\"store.handleValueChanged(widget?.node!,$event)\"\n            (onOptionsChanged)=\"store.handleOptionsChanged(widget?.node!,$event)\"\n          >\n            @if(widget.node) {\n            <ng-container axp-widget-renderer [node]=\"widget.node\" [mode]=\"'view'\"></ng-container>\n            }\n          </axm-dashboard-widget-wrapper>\n        </ax-grid-layout-widget>\n        } }\n      </ax-grid-layout-container>\n    </axp-widgets-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axm-dashboard-home{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axm-dashboard-home .placeholder-content{border-radius:.5rem!important;border-width:1px!important;border-style:dashed!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))!important;background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5)!important}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content{border-radius:.375rem!important;border-width:1px!important;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1$4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i2$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i2$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXGridLayoutBuilderModule }, { kind: "component", type: i3$2.AXGridLayoutContainerComponent, selector: "ax-grid-layout-container", inputs: ["options", "isEmpty"], outputs: ["onAdded", "onRemoved", "onWidgetChange", "onChange", "onRender", "isEmptyChange"] }, { kind: "component", type: i3$2.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: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i4.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"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\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\">{{ '@dashboard:loading' | translate | async }}</p>\n    </div>\n    }\n    <!-- No Dashboards State -->\n    @else if (!store.dashboards().length) {\n    <axp-state-message\n      icon=\"fa-light fa-shapes\"\n      [title]=\"'@dashboard:empty-state.title'\"\n      [description]=\"'@dashboard:empty-state.description'\"\n    >\n      <div slot=\"actions\">\n        <button (click)=\"execute({ name: 'new-dashboard' })\" class=\"ax-underline\">\n          {{ '@dashboard:add-first-dashboard' | translate | async }}\n        </button>\n      </div>\n    </axp-state-message>\n    }\n    <!-- No Widgets State -->\n    @else if (!store.selectedDashboard()?.widgets?.length) {\n    <axp-state-message\n      icon=\"fa-light fa-shapes\"\n      [title]=\"'@dashboard:no-widgets.title'\"\n      [description]=\"'@dashboard:no-widgets.description'\"\n    >\n      <div slot=\"actions\">\n        <button (click)=\"execute({ name: 'new-widget' })\" class=\"ax-underline\">\n          {{ '@dashboard:add-widget' | translate | async }}\n        </button>\n      </div>\n    </axp-state-message>\n    }\n    <!-- Dashboard Grid -->\n    @else {\n    <axp-widgets-container [context]=\"context()\">\n      <ax-grid-layout-container\n        class=\"dark:[--ax-comp-grid-layout-stack-item-content-bg-color:var(--ax-sys-color-lighter-surface)] [--ax-comp-grid-layout-stack-item-content-bg-color:var(--ax-sys-color-lightest-surface)]\"\n        [options]=\"store.currentLayoutOptions()\"\n        (onChange)=\"store.onGridChange($event)\"\n      >\n        @for (widget of store.currentWidgets(); track widget.config.id) {\n        <ax-grid-layout-widget [options]=\"widget.resolvedOptions\">\n          <axm-dashboard-widget-wrapper\n            [title]=\"widget.node?.options?.['title']\"\n            [hasConfiguration]=\"store.canConfigureWidget()(widget)\"\n            [isLocked]=\"store.isWidgetLocked()(widget)\"\n            (onDelete)=\"confirmWidgetDelete(store.selectedDashboard()?.id!, widget.config.id!)\"\n            (onConfiguration)=\"store.handlePopupConfiguration(widget.node!)\"\n            (onValueChanged)=\"store.handleValueChanged(widget?.node!, $event)\"\n            (onOptionsChanged)=\"store.handleOptionsChanged(widget?.node!, $event)\"\n          >\n            @if (widget.node) {\n            <ng-container axp-widget-renderer [node]=\"widget.node\" [mode]=\"'view'\"></ng-container>\n            }\n          </axm-dashboard-widget-wrapper>\n        </ax-grid-layout-widget>\n        }\n      </ax-grid-layout-container>\n    </axp-widgets-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axm-dashboard-home{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axm-dashboard-home .placeholder-content{border-radius:.5rem!important;border-width:1px!important;border-style:dashed!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))!important;background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5)!important}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content{border-radius:.375rem!important;border-width:1px!important;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1$4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i2$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i2$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXGridLayoutBuilderModule }, { kind: "component", type: i3$2.AXGridLayoutContainerComponent, selector: "ax-grid-layout-container", inputs: ["options", "isEmpty"], outputs: ["onAdded", "onRemoved", "onWidgetChange", "onChange", "onRender", "isEmptyChange"] }, { kind: "component", type: i3$2.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: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i4.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"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXMDashboardHomeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axm-dashboard-home', standalone: true, imports: [
+            args: [{ selector: 'axm-dashboard-home', imports: [
                         CommonModule,
                         AXLoadingModule,
                         AXPWidgetCoreModule,
@@ -6229,7 +6565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             provide: AXPPageLayoutBase,
                             useExisting: AXMDashboardHomeComponent,
                         },
-                    ], template: "<axp-page-layout *translate=\"let t\">\n  <!-- Content Section -->\n\n  <axp-page-content class=\"ax-relative\">\n    <!-- Loading State -->\n    @if(store.isLoading()) {\n    <div\n      class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-w-full ax-absolute ax-z-10 ax-bg-white/80\"\n    >\n      <ax-loading></ax-loading>\n      <p class=\"ax-mt-3 ax-text-gray-600\">{{ '@dashboard:loading' | translate | 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        <axp-state-message\n          icon=\"fa-light fa-shapes\"\n          [title]=\"'@dashboard:empty-state.title'\"\n          [description]=\"'@dashboard:empty-state.description'\"\n        >\n          <div slot=\"actions\">\n            <button (click)=\"execute({ name: 'new-dashboard' })\" class=\"ax-underline\">\n              {{ '@dashboard:add-first-dashboard' | translate | async }}\n            </button>\n          </div>\n        </axp-state-message>\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            {{ '@dashboard:no-current-dashboard' | translate | async }}\n          </h2>\n          <p class=\"ax-text-center ax-mb-6\">{{ '@dashboard:select-dashboard' | translate | async }}</p>\n        </div>\n        } -->\n        <!-- No Widgets State -->\n        @else if (!store.selectedDashboard()?.widgets || store.selectedDashboard()?.widgets?.length === 0) {\n        <axp-state-message\n          icon=\"fa-light fa-shapes\"\n          [title]=\"'@dashboard:no-widgets.title'\"\n          [description]=\"'@dashboard:no-widgets.description'\"\n        >\n          <div slot=\"actions\">\n            <button (click)=\"execute({ name: 'new-widget' })\" class=\"ax-underline\">\n              {{ '@dashboard:add-widget' | translate | async }}\n            </button>\n          </div>\n        </axp-state-message>\n        }\n        <!-- Widgets Grid -->\n        @else { @for(widget of store.selectedDashboard()?.widgets; track widget.config.id) {\n        <ax-grid-layout-widget\n          [options]=\"widget.config\"\n          class=\"dark:[--ax-comp-grid-layout-stack-item-content-bg-color:var(--ax-sys-color-lighter-surface)] [--ax-comp-grid-layout-stack-item-content-bg-color:var(--ax-sys-color-lightest-surface)]\"\n        >\n          <axm-dashboard-widget-wrapper\n            [title]=\"widget.node?.options?.['title']\"\n            [hasConfiguration]=\"store.canConfigureWidget()(widget)\"\n            [isLocked]=\"store.isWidgetLocked()(widget)\"\n            (onDelete)=\"confirmWidgetDelete(store.selectedDashboard()?.id!, widget.config.id!)\"\n            (onConfiguration)=\"store.handlePopupConfiguration(widget.node!)\"\n            (onValueChanged)=\"store.handleValueChanged(widget?.node!,$event)\"\n            (onOptionsChanged)=\"store.handleOptionsChanged(widget?.node!,$event)\"\n          >\n            @if(widget.node) {\n            <ng-container axp-widget-renderer [node]=\"widget.node\" [mode]=\"'view'\"></ng-container>\n            }\n          </axm-dashboard-widget-wrapper>\n        </ax-grid-layout-widget>\n        } }\n      </ax-grid-layout-container>\n    </axp-widgets-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axm-dashboard-home{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axm-dashboard-home .placeholder-content{border-radius:.5rem!important;border-width:1px!important;border-style:dashed!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))!important;background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5)!important}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content{border-radius:.375rem!important;border-width:1px!important;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}\n"] }]
+                    ], template: "<axp-page-layout *translate=\"let t\">\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\">{{ '@dashboard:loading' | translate | async }}</p>\n    </div>\n    }\n    <!-- No Dashboards State -->\n    @else if (!store.dashboards().length) {\n    <axp-state-message\n      icon=\"fa-light fa-shapes\"\n      [title]=\"'@dashboard:empty-state.title'\"\n      [description]=\"'@dashboard:empty-state.description'\"\n    >\n      <div slot=\"actions\">\n        <button (click)=\"execute({ name: 'new-dashboard' })\" class=\"ax-underline\">\n          {{ '@dashboard:add-first-dashboard' | translate | async }}\n        </button>\n      </div>\n    </axp-state-message>\n    }\n    <!-- No Widgets State -->\n    @else if (!store.selectedDashboard()?.widgets?.length) {\n    <axp-state-message\n      icon=\"fa-light fa-shapes\"\n      [title]=\"'@dashboard:no-widgets.title'\"\n      [description]=\"'@dashboard:no-widgets.description'\"\n    >\n      <div slot=\"actions\">\n        <button (click)=\"execute({ name: 'new-widget' })\" class=\"ax-underline\">\n          {{ '@dashboard:add-widget' | translate | async }}\n        </button>\n      </div>\n    </axp-state-message>\n    }\n    <!-- Dashboard Grid -->\n    @else {\n    <axp-widgets-container [context]=\"context()\">\n      <ax-grid-layout-container\n        class=\"dark:[--ax-comp-grid-layout-stack-item-content-bg-color:var(--ax-sys-color-lighter-surface)] [--ax-comp-grid-layout-stack-item-content-bg-color:var(--ax-sys-color-lightest-surface)]\"\n        [options]=\"store.currentLayoutOptions()\"\n        (onChange)=\"store.onGridChange($event)\"\n      >\n        @for (widget of store.currentWidgets(); track widget.config.id) {\n        <ax-grid-layout-widget [options]=\"widget.resolvedOptions\">\n          <axm-dashboard-widget-wrapper\n            [title]=\"widget.node?.options?.['title']\"\n            [hasConfiguration]=\"store.canConfigureWidget()(widget)\"\n            [isLocked]=\"store.isWidgetLocked()(widget)\"\n            (onDelete)=\"confirmWidgetDelete(store.selectedDashboard()?.id!, widget.config.id!)\"\n            (onConfiguration)=\"store.handlePopupConfiguration(widget.node!)\"\n            (onValueChanged)=\"store.handleValueChanged(widget?.node!, $event)\"\n            (onOptionsChanged)=\"store.handleOptionsChanged(widget?.node!, $event)\"\n          >\n            @if (widget.node) {\n            <ng-container axp-widget-renderer [node]=\"widget.node\" [mode]=\"'view'\"></ng-container>\n            }\n          </axm-dashboard-widget-wrapper>\n        </ax-grid-layout-widget>\n        }\n      </ax-grid-layout-container>\n    </axp-widgets-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axm-dashboard-home{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axm-dashboard-home .placeholder-content{border-radius:.5rem!important;border-width:1px!important;border-style:dashed!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))!important;background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5)!important}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content{border-radius:.375rem!important;border-width:1px!important;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}\n"] }]
         }] });
 
 var homeDashboard = /*#__PURE__*/Object.freeze({
@@ -6237,6 +6573,8 @@ var homeDashboard = /*#__PURE__*/Object.freeze({
     AXMDashboardHomeComponent: AXMDashboardHomeComponent
 });
 
+//#endregion
+
 class AXMAddDashboardPopup extends AXBasePageComponent {
     constructor() {
         super(...arguments);