@acorex/modules 21.0.0-next.34 → 21.0.0-next.39

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

@@ -1,16 +1,21 @@
 import { AXPSessionService, AXPAuthGuard, AXP_PERMISSION_DEFINITION_PROVIDER } from '@acorex/platform/auth';
 import { createAllQueryView, AXP_HOME_PAGES, AXP_HOME_PAGE_DEFAULT_KEY, AXP_MENU_PROVIDER, AXPSettingsService } from '@acorex/platform/common';
 import * as i2$3 from '@acorex/platform/layout/widget-core';
-import { AXPBaseWidgetComponent, AXPWidgetsCatalog, cloneProperty, AXPWidgetGroupEnum, AXPValueWidgetComponent, AXPLayoutBaseWidgetComponent, AXPWidgetCoreModule, AXP_WIDGET_DEFINITION_PROVIDER, AXPWidgetRendererDirective } from '@acorex/platform/layout/widget-core';
+import { AXPBaseWidgetComponent, AXPWidgetsCatalog, cloneProperty, AXPWidgetGroupEnum, AXPValueWidgetComponent, createStringProperty, AXPWidgetCoreModule, AXP_WIDGET_DEFINITION_PROVIDER, AXPWidgetRendererDirective } from '@acorex/platform/layout/widget-core';
 import * as i0 from '@angular/core';
-import { inject, signal, effect, computed, ChangeDetectionStrategy, Component, Injectable, InjectionToken, viewChild, input, ElementRef, ChangeDetectorRef, HostBinding, linkedSignal, HostListener, Injector, NgModule, output, contentChild, afterNextRender, ViewEncapsulation, model } from '@angular/core';
+import { inject, DestroyRef, afterNextRender, Injectable, signal, effect, computed, ChangeDetectionStrategy, Component, InjectionToken, viewChild, input, ElementRef, ChangeDetectorRef, HostBinding, linkedSignal, HostListener, Injector, NgModule, output, contentChild, ViewEncapsulation, model } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Subject, map, Observable, catchError, throwError, of, finalize, interval, switchMap, firstValueFrom, fromEvent } from 'rxjs';
+import { throttleTime, debounceTime } from 'rxjs/operators';
 import { AXBarChartComponent } from '@acorex/charts/bar-chart';
 import * as i4 from '@acorex/core/translation';
-import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
-import { AXPDataSourceDefinitionProviderService, AXPMultiLanguageStringResolverService, createMultiLanguageString, AXPDataGenerator, AXPSystemActionType, AXP_MODULE_MANIFEST_PROVIDER, AXPDeviceService, AXPPlatformScope, AXPResolveMultiLanguageStringPipe } from '@acorex/platform/core';
-import { AXP_DATA_SOURCE_OPTIONS_PROPERTY, AXP_APPEARANCE_PROPERTY_GROUP, AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_COLOR_PROPERTY, AXP_BG_COLOR_PROPERTY, plainTextDefaultProperty, AXPWidgetsModule } from '@acorex/platform/layout/widgets';
+import { AXTranslationService, createMultiLanguageString, AXTranslationModule } from '@acorex/core/translation';
+import { AXPDataSourceDefinitionProviderService, AXPDataGenerator, AXPSystemActionType, AXP_MODULE_MANIFEST_PROVIDER, AXPDeviceService, AXPPlatformScope } from '@acorex/platform/core';
+import { AXP_DATA_SOURCE_OPTIONS_PROPERTY, AXP_APPEARANCE_PROPERTY_GROUP, AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_COLOR_PROPERTY, AXP_BG_COLOR_PROPERTY, AXPWidgetsModule } from '@acorex/platform/layout/widgets';
 import { AXDonutChartComponent } from '@acorex/charts/donut-chart';
+import { AXFunnelChartComponent } from '@acorex/charts/funnel-chart';
 import { AXGaugeChartComponent } from '@acorex/charts/gauge-chart';
+import { AXHeatmapChartComponent } from '@acorex/charts/heatmap-chart';
 import { AXLineChartComponent } from '@acorex/charts/line-chart';
 import * as i1$1 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
@@ -22,7 +27,6 @@ import * as i1$2 from '@acorex/components/tooltip';
 import { AXTooltipModule } from '@acorex/components/tooltip';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { map, Observable, catchError, throwError, of, finalize, interval, switchMap, firstValueFrom, fromEvent } from 'rxjs';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { AXDateTimeModule } from '@acorex/core/date-time';
 import * as i2 from '@acorex/core/format';
@@ -57,7 +61,6 @@ 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';
@@ -67,16 +70,19 @@ import * as i6 from '@acorex/components/switch';
 import { AXSwitchModule } from '@acorex/components/switch';
 import * as i3$3 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
-import { AXMOrganizationManagementJobDefinitionEntityService } from '@acorex/modules/organization-management';
+import { RootConfig as RootConfig$1 } from '@acorex/modules/organization-management';
 
 const config = {
     i18n: 'dashboard-management',
+    module: 'DashboardManagement',
 };
+/** Builds shared dashboard widget type ids: `{module}:Widget:Dashboard:{Segment}`. */
+const dashboardWidgetId = (segment) => `${config.module}:Widget:Dashboard:${segment}`;
 const RootConfig = {
     config,
     module: {
-        module: 'DashboardManagement',
-        name: 'DashboardManagement',
+        module: config.module,
+        name: config.module,
         title: `@${config.i18n}:module.title`,
         icon: 'fa-regular fa-tachometer-alt',
     },
@@ -88,17 +94,110 @@ const RootConfig = {
             icon: 'fa-regular fa-tachometer-alt',
         },
     },
+    /** Dashboard widget type ids owned by dashboard-management. */
+    widgets: {
+        barChart: dashboardWidgetId('BarChart'),
+        donutChart: dashboardWidgetId('DonutChart'),
+        lineChart: dashboardWidgetId('LineChart'),
+        gaugeChart: dashboardWidgetId('GaugeChart'),
+        funnelChart: dashboardWidgetId('FunnelChart'),
+        heatmapChart: dashboardWidgetId('HeatmapChart'),
+        stickyNote: dashboardWidgetId('StickyNote'),
+        clockCalendar: dashboardWidgetId('ClockCalendar'),
+        analogClock: dashboardWidgetId('AnalogClock'),
+        weather: dashboardWidgetId('Weather'),
+        minimalWeather: dashboardWidgetId('MinimalWeather'),
+        advancedWeather: dashboardWidgetId('AdvancedWeather'),
+        shortcut: dashboardWidgetId('Shortcut'),
+        kpiProgress: dashboardWidgetId('KpiProgress'),
+        kpiSegmented: dashboardWidgetId('KpiSegmented'),
+        kpiDetails: dashboardWidgetId('KpiDetails'),
+        kpiStatCard: dashboardWidgetId('KpiStatCard'),
+    },
 };
 
+//#endregion
+//#region ---- Constants ----
+/** Minimum interval between container resize emissions to subscribers and {@link AXPDashboardWidgetComponent.onContainerSizeChanged}. */
+const AXPDASHBOARD_WIDGET_CONTAINER_RESIZE_THROTTLE_MS = 100;
+//#endregion
+//#region ---- Dashboard widget base ----
+/**
+ * Base class for dashboard widgets ({@link AXPBaseWidgetComponent}).
+ * Extend this to add shared dashboard logic and helpers.
+ */
+class AXPDashboardWidgetComponent extends AXPBaseWidgetComponent {
+    constructor() {
+        super();
+        //#region ---- Container resize ----
+        this.containerResizeRawSubject = new Subject();
+        this.containerSizeSubject = new Subject();
+        /**
+         * Emits the widget host content-box size whenever it changes.
+         * Notifications are throttled; see `AXPDASHBOARD_WIDGET_CONTAINER_RESIZE_THROTTLE_MS`.
+         */
+        this.containerSize$ = this.containerSizeSubject.asObservable();
+        const destroyRef = inject(DestroyRef);
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.containerResizeRawSubject
+            .pipe(throttleTime(AXPDASHBOARD_WIDGET_CONTAINER_RESIZE_THROTTLE_MS, undefined, {
+            leading: true,
+            trailing: true,
+        }), takeUntilDestroyed(destroyRef))
+            .subscribe((size) => {
+            this.containerSizeSubject.next(size);
+            this.onContainerSizeChanged(size);
+        });
+        const resizeObserver = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry) {
+                return;
+            }
+            const size = {
+                width: entry.contentRect.width,
+                height: entry.contentRect.height,
+            };
+            this.containerResizeRawSubject.next(size);
+        });
+        const bindResizeObservation = () => {
+            if (!this.host.isConnected) {
+                return;
+            }
+            resizeObserver.disconnect();
+            resizeObserver.observe(this.host);
+        };
+        afterNextRender(() => {
+            bindResizeObservation();
+        });
+        destroyRef.onDestroy(() => {
+            resizeObserver.disconnect();
+            this.containerResizeRawSubject.complete();
+            this.containerSizeSubject.complete();
+        });
+    }
+    /**
+     * Called when the widget host content box is resized.
+     * Override for imperative updates; use {@link containerSize$} for reactive pipelines.
+     */
+    onContainerSizeChanged(_size) { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDashboardWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDashboardWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDashboardWidgetComponent, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
 /**
  * Bar Chart Widget Component
  * Renders data as vertical bars with interactive hover effects and animations
  */
-class AXPBarChartWidgetViewComponent extends AXPBaseWidgetComponent {
+class AXPBarChartWidgetViewComponent extends AXPDashboardWidgetComponent {
     //#endregion
     async resolveChartOptionLabel(value) {
         if (value != null && typeof value === 'object' && !Array.isArray(value)) {
-            return this.mlResolver.resolve(value);
+            return this.translationService.resolve(value);
         }
         const s = String(value ?? '');
         if (s.startsWith('@')) {
@@ -119,8 +218,10 @@ class AXPBarChartWidgetViewComponent extends AXPBaseWidgetComponent {
             }
             return value;
         }
-        if (typeof value === 'object' && !Array.isArray(value) && this.mlResolver.isValidMultiLanguageObject(value)) {
-            return this.mlResolver.resolve(value);
+        if (typeof value === 'object' &&
+            !Array.isArray(value) &&
+            this.translationService.isValidMultiLanguageObject(value)) {
+            return this.translationService.resolve(value);
         }
         return String(value);
     }
@@ -129,7 +230,6 @@ class AXPBarChartWidgetViewComponent extends AXPBaseWidgetComponent {
         //#region ---- Services & Dependencies ----
         this.dataService = inject(AXPDataSourceDefinitionProviderService);
         this.translationService = inject(AXTranslationService);
-        this.mlResolver = inject(AXPMultiLanguageStringResolverService);
         //#endregion
         //#region ---- Chart state ----
         this.data = signal([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
@@ -224,8 +324,9 @@ const AXP_WIDGETS_UTILITY_CATEGORY = {
 };
 
 const AXPBarChartWidget = {
-    name: 'bar-chart',
-    title: 'Bar Chart Widget',
+    name: RootConfig.widgets.barChart,
+    title: '@dashboard:widgets.bar-chart.widget-title',
+    description: '@dashboard:widgets.bar-chart.widget-description',
     categories: [AXP_WIDGETS_CHART_CATEGORY],
     groups: [AXPWidgetGroupEnum.DashboardWidget],
     type: 'dashboard',
@@ -534,10 +635,10 @@ const AXPBarChartWidget = {
  * Donut Chart Widget Component
  * Displays data in a circular donut chart with interactive segments
  */
-class AXPDonutChartWidgetViewComponent extends AXPValueWidgetComponent {
+class AXPDonutChartWidgetViewComponent extends AXPDashboardWidgetComponent {
     async resolveChartOptionLabel(value) {
         if (value != null && typeof value === 'object' && !Array.isArray(value)) {
-            return this.mlResolver.resolve(value);
+            return this.translationService.resolve(value);
         }
         const s = String(value ?? '');
         if (s.startsWith('@')) {
@@ -558,8 +659,10 @@ class AXPDonutChartWidgetViewComponent extends AXPValueWidgetComponent {
             }
             return value;
         }
-        if (typeof value === 'object' && !Array.isArray(value) && this.mlResolver.isValidMultiLanguageObject(value)) {
-            return this.mlResolver.resolve(value);
+        if (typeof value === 'object' &&
+            !Array.isArray(value) &&
+            this.translationService.isValidMultiLanguageObject(value)) {
+            return this.translationService.resolve(value);
         }
         return String(value);
     }
@@ -568,7 +671,6 @@ class AXPDonutChartWidgetViewComponent extends AXPValueWidgetComponent {
         //#region ---- Services & Dependencies ----
         this.dataService = inject(AXPDataSourceDefinitionProviderService);
         this.translationService = inject(AXTranslationService);
-        this.mlResolver = inject(AXPMultiLanguageStringResolverService);
         //#endregion
         //#region ---- Chart state ----
         this.data = signal([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
@@ -581,9 +683,7 @@ class AXPDonutChartWidgetViewComponent extends AXPValueWidgetComponent {
             const generation = ++this.labelResolveGeneration;
             void (async () => {
                 const title = await this.resolveChartOptionLabel(raw['title']);
-                const totalLabel = raw['totalLabel'] !== undefined
-                    ? await this.resolveChartOptionLabel(raw['totalLabel'])
-                    : undefined;
+                const totalLabel = raw['totalLabel'] !== undefined ? await this.resolveChartOptionLabel(raw['totalLabel']) : undefined;
                 if (generation !== this.labelResolveGeneration) {
                     return;
                 }
@@ -655,8 +755,9 @@ var donutChartWidget_component = /*#__PURE__*/Object.freeze({
 });
 
 const AXPDonutChartWidget = {
-    name: 'donut-chart',
-    title: 'Donut Chart Widget',
+    name: RootConfig.widgets.donutChart,
+    title: '@dashboard:widgets.donut-chart.widget-title',
+    description: '@dashboard:widgets.donut-chart.widget-description',
     categories: AXP_WIDGETS_CHART_CATEGORY,
     groups: [AXPWidgetGroupEnum.DashboardWidget],
     type: 'dashboard',
@@ -914,14 +1015,165 @@ const AXPDonutChartWidget = {
     },
 };
 
+/**
+ * Funnel Chart Widget Component
+ * Displays step-wise conversion/flow data as a funnel.
+ */
+class AXPFunnelChartWidgetViewComponent extends AXPDashboardWidgetComponent {
+    //#region ---- Localization ----
+    async resolveChartText(value) {
+        if (value == null) {
+            return '';
+        }
+        if (typeof value === 'string') {
+            return value.startsWith('@') ? this.translationService.translateAsync(value) : value;
+        }
+        if (typeof value === 'object' &&
+            !Array.isArray(value) &&
+            this.translationService.isValidMultiLanguageObject(value)) {
+            return this.translationService.resolve(value);
+        }
+        return String(value);
+    }
+    //#endregion
+    constructor() {
+        super();
+        //#region ---- Services & Dependencies ----
+        this.dataService = inject(AXPDataSourceDefinitionProviderService);
+        this.translationService = inject(AXTranslationService);
+        //#endregion
+        //#region ---- Chart state ----
+        this.data = signal([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        /** Options passed to the chart with resolved messages/labels (multi-language and @i18n keys). */
+        this.funnelOptions = signal({}, ...(ngDevMode ? [{ debugName: "funnelOptions" }] : /* istanbul ignore next */ []));
+        this.labelResolveGeneration = 0;
+        //#endregion
+        this.dataSource = computed(() => this.options()['dataSource'], ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ---- Effects ----
+        this.resolveOptionLabelsEffect = effect(() => {
+            const raw = this.options();
+            const generation = ++this.labelResolveGeneration;
+            void (async () => {
+                const messagesRaw = raw['messages'];
+                const messages = messagesRaw && typeof messagesRaw === 'object' && !Array.isArray(messagesRaw)
+                    ? messagesRaw
+                    : undefined;
+                const noData = await this.resolveChartText(messages?.['noData']);
+                if (generation !== this.labelResolveGeneration) {
+                    return;
+                }
+                const base = raw;
+                this.funnelOptions.set({
+                    ...base,
+                    ...(messages
+                        ? {
+                            messages: {
+                                ...base.messages,
+                                ...(noData ? { noData } : {}),
+                                ...(messages['noDataIcon'] ? { noDataIcon: String(messages['noDataIcon']) } : {}),
+                            },
+                        }
+                        : {}),
+                });
+            })();
+        }, ...(ngDevMode ? [{ debugName: "resolveOptionLabelsEffect" }] : /* istanbul ignore next */ []));
+        this.dataLoadEffect = effect(async () => {
+            const ds = this.dataSource();
+            const resolveName = async (name) => {
+                const resolved = await this.resolveChartText(name);
+                return resolved;
+            };
+            if (typeof ds === 'string') {
+                const result = await this.dataService.get(ds);
+                if (!result) {
+                    this.data.set([]);
+                    return;
+                }
+                const dataSource = result.source();
+                const page = await dataSource.config.load({
+                    take: dataSource.pageSize,
+                    skip: 0,
+                    sort: [],
+                });
+                const items = (page.items ?? []);
+                const resolved = await Promise.all(items.map(async (item) => ({
+                    ...item,
+                    name: await resolveName(item['name']),
+                })));
+                this.data.set(resolved);
+                return;
+            }
+            if (ds && Array.isArray(ds)) {
+                const resolved = await Promise.all(ds.map(async (item) => ({
+                    ...item,
+                    name: await resolveName(item['name']),
+                })));
+                this.data.set(resolved);
+                return;
+            }
+            this.data.set([]);
+        }, ...(ngDevMode ? [{ debugName: "dataLoadEffect" }] : /* istanbul ignore next */ []));
+        this.setOptions({
+            showLabels: true,
+            showTooltip: true,
+            neckWidth: 0.3,
+            colors: ['#0ea5e9', '#22c55e', '#f59e0b', '#ef4444', '#8b5cf6'],
+            animationEasing: 'cubic-out',
+            animationDuration: 800,
+            margin: { top: 16, right: 16, bottom: 16, left: 16 },
+            ...this.options(),
+        });
+        this.funnelOptions.set(this.options());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFunnelChartWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPFunnelChartWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ax-funnel-chart [data]=\"data()\" [options]=\"funnelOptions()\"></ax-funnel-chart>\n\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: AXFunnelChartComponent, selector: "ax-funnel-chart", inputs: ["data", "options"], outputs: ["segmentClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFunnelChartWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [AXFunnelChartComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-funnel-chart [data]=\"data()\" [options]=\"funnelOptions()\"></ax-funnel-chart>\n\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [] });
+
+var funnelChartWidget_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPFunnelChartWidgetViewComponent: AXPFunnelChartWidgetViewComponent
+});
+
+const AXPFunnelChartWidget = {
+    name: RootConfig.widgets.funnelChart,
+    title: '@dashboard:widgets.funnel-chart.widget-title',
+    description: '@dashboard:widgets.funnel-chart.widget-description',
+    categories: [AXP_WIDGETS_CHART_CATEGORY],
+    groups: [AXPWidgetGroupEnum.DashboardWidget],
+    type: 'dashboard',
+    icon: 'fa-light fa-filter',
+    properties: [
+        AXP_DATA_SOURCE_OPTIONS_PROPERTY,
+        cloneProperty(AXP_NAME_PROPERTY, { visible: false }),
+        cloneProperty(AXP_DATA_PATH_PROPERTY, { visible: false }),
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return funnelChartWidget_component; }).then((c) => c.AXPFunnelChartWidgetViewComponent),
+        },
+    },
+    meta: {
+        dimensions: {
+            lg: { width: 5, height: 5, minWidth: 2, minHeight: 2, maxWidth: 7, maxHeight: 7 },
+            md: { width: 5, height: 5, minWidth: 2, minHeight: 2, maxWidth: 7, maxHeight: 7 },
+            sm: { height: 5, minHeight: 2, maxHeight: 7 },
+        },
+    },
+};
+
 /**
  * Gauge Chart Widget Component
  * Renders a semi-circular gauge chart with animated needle and thresholds
  */
-class AXPGaugeChartWidgetViewComponent extends AXPBaseWidgetComponent {
+class AXPGaugeChartWidgetViewComponent extends AXPDashboardWidgetComponent {
     async resolveChartOptionLabel(value) {
         if (value != null && typeof value === 'object' && !Array.isArray(value)) {
-            return this.mlResolver.resolve(value);
+            return this.translationService.resolve(value);
         }
         const s = String(value ?? '');
         if (s.startsWith('@')) {
@@ -934,7 +1186,6 @@ class AXPGaugeChartWidgetViewComponent extends AXPBaseWidgetComponent {
         //#region ---- Services & Dependencies ----
         this.dataService = inject(AXPDataSourceDefinitionProviderService);
         this.translationService = inject(AXTranslationService);
-        this.mlResolver = inject(AXPMultiLanguageStringResolverService);
         //#endregion
         //#region ---- Chart state ----
         this.value = signal(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -960,9 +1211,7 @@ class AXPGaugeChartWidgetViewComponent extends AXPBaseWidgetComponent {
                         return {
                             value: entry['value'],
                             color: String(entry['color'] ?? ''),
-                            ...(labelRaw != null && labelRaw !== ''
-                                ? { label: await this.resolveChartOptionLabel(labelRaw) }
-                                : {}),
+                            ...(labelRaw != null && labelRaw !== '' ? { label: await this.resolveChartOptionLabel(labelRaw) } : {}),
                         };
                     }));
                 }
@@ -1022,8 +1271,9 @@ var gaugeChartWidget_component = /*#__PURE__*/Object.freeze({
 });
 
 const AXPGaugeChartWidget = {
-    name: 'gauge-chart',
-    title: 'Gauge Chart Widget',
+    name: RootConfig.widgets.gaugeChart,
+    title: '@dashboard:widgets.gauge-chart.widget-title',
+    description: '@dashboard:widgets.gauge-chart.widget-description',
     categories: [AXP_WIDGETS_CHART_CATEGORY],
     type: 'dashboard',
     icon: 'fa-light fa-gauge',
@@ -1279,14 +1529,217 @@ const AXPGaugeChartWidget = {
     },
 };
 
+/**
+ * Heatmap Chart Widget Component
+ * Displays matrix-like data with color intensity based on value.
+ */
+class AXPHeatmapChartWidgetViewComponent extends AXPDashboardWidgetComponent {
+    //#region ---- Localization ----
+    async resolveChartText(value) {
+        if (value == null) {
+            return '';
+        }
+        if (typeof value === 'string') {
+            return value.startsWith('@') ? this.translationService.translateAsync(value) : value;
+        }
+        if (typeof value === 'object' &&
+            !Array.isArray(value) &&
+            this.translationService.isValidMultiLanguageObject(value)) {
+            return this.translationService.resolve(value);
+        }
+        return String(value);
+    }
+    //#endregion
+    constructor() {
+        super();
+        //#region ---- Services & Dependencies ----
+        this.dataService = inject(AXPDataSourceDefinitionProviderService);
+        this.translationService = inject(AXTranslationService);
+        //#endregion
+        //#region ---- Chart state ----
+        this.data = signal([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        /** Options passed to the chart with resolved string labels (multi-language and @i18n keys). */
+        this.heatmapOptions = signal({}, ...(ngDevMode ? [{ debugName: "heatmapOptions" }] : /* istanbul ignore next */ []));
+        this.labelResolveGeneration = 0;
+        //#endregion
+        this.dataSource = computed(() => this.options()['dataSource'], ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ---- Effects ----
+        this.resolveOptionLabelsEffect = effect(() => {
+            const raw = this.options();
+            const generation = ++this.labelResolveGeneration;
+            void (async () => {
+                const [xAxisLabel, yAxisLabel] = await Promise.all([
+                    this.resolveChartText(raw['xAxisLabel']),
+                    this.resolveChartText(raw['yAxisLabel']),
+                ]);
+                const messagesRaw = raw['messages'];
+                const messages = messagesRaw && typeof messagesRaw === 'object' && !Array.isArray(messagesRaw)
+                    ? messagesRaw
+                    : undefined;
+                const [noData, noDataHelp] = await Promise.all([
+                    this.resolveChartText(messages?.['noData']),
+                    this.resolveChartText(messages?.['noDataHelp']),
+                ]);
+                if (generation !== this.labelResolveGeneration) {
+                    return;
+                }
+                const base = raw;
+                this.heatmapOptions.set({
+                    ...base,
+                    xAxisLabel,
+                    yAxisLabel,
+                    ...(messages
+                        ? {
+                            messages: {
+                                ...base.messages,
+                                ...(noData ? { noData } : {}),
+                                ...(noDataHelp ? { noDataHelp } : {}),
+                                ...(messages['noDataIcon'] ? { noDataIcon: String(messages['noDataIcon']) } : {}),
+                            },
+                        }
+                        : {}),
+                });
+            })();
+        }, ...(ngDevMode ? [{ debugName: "resolveOptionLabelsEffect" }] : /* istanbul ignore next */ []));
+        this.dataLoadEffect = effect(async () => {
+            const ds = this.dataSource();
+            if (typeof ds === 'string') {
+                const result = await this.dataService.get(ds);
+                if (!result) {
+                    this.data.set([]);
+                    return;
+                }
+                const dataSource = result.source();
+                const page = await dataSource.config.load({
+                    take: dataSource.pageSize,
+                    skip: 0,
+                    sort: [],
+                });
+                const items = (page.items ?? []);
+                const resolved = await Promise.all(items.map(async (item) => {
+                    const x = item['x'];
+                    const y = item['y'];
+                    const label = item['label'];
+                    return {
+                        ...item,
+                        x: typeof x === 'number' ? x : await this.resolveChartText(x),
+                        y: typeof y === 'number' ? y : await this.resolveChartText(y),
+                        ...(label !== undefined ? { label: await this.resolveChartText(label) } : {}),
+                    };
+                }));
+                this.data.set(resolved);
+                return;
+            }
+            if (ds && Array.isArray(ds)) {
+                const resolved = await Promise.all(ds.map(async (item) => {
+                    const x = item['x'];
+                    const y = item['y'];
+                    const label = item['label'];
+                    return {
+                        ...item,
+                        x: typeof x === 'number' ? x : await this.resolveChartText(x),
+                        y: typeof y === 'number' ? y : await this.resolveChartText(y),
+                        ...(label !== undefined ? { label: await this.resolveChartText(label) } : {}),
+                    };
+                }));
+                this.data.set(resolved);
+                return;
+            }
+            this.data.set([]);
+        }, ...(ngDevMode ? [{ debugName: "dataLoadEffect" }] : /* istanbul ignore next */ []));
+        this.setOptions({
+            showXAxis: true,
+            showYAxis: true,
+            showTooltip: true,
+            cellPadding: 0.05,
+            borderRadius: 2,
+            colors: ['#f7fbff', '#08306b'],
+            animationEasing: 'cubic-out',
+            animationDuration: 800,
+            ...this.options(),
+        });
+        this.heatmapOptions.set(this.options());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPHeatmapChartWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPHeatmapChartWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ax-heatmap-chart [data]=\"data()\" [options]=\"heatmapOptions()\"></ax-heatmap-chart>\n\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: AXHeatmapChartComponent, selector: "ax-heatmap-chart", inputs: ["data", "options"], outputs: ["cellClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPHeatmapChartWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [AXHeatmapChartComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-heatmap-chart [data]=\"data()\" [options]=\"heatmapOptions()\"></ax-heatmap-chart>\n\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [] });
+
+var heatmapChartWidget_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPHeatmapChartWidgetViewComponent: AXPHeatmapChartWidgetViewComponent
+});
+
+const AXPHeatmapChartWidget = {
+    name: RootConfig.widgets.heatmapChart,
+    title: '@dashboard:widgets.heatmap-chart.widget-title',
+    description: '@dashboard:widgets.heatmap-chart.widget-description',
+    categories: [AXP_WIDGETS_CHART_CATEGORY],
+    groups: [AXPWidgetGroupEnum.DashboardWidget],
+    type: 'dashboard',
+    icon: 'fa-light fa-grid-2',
+    properties: [
+        AXP_DATA_SOURCE_OPTIONS_PROPERTY,
+        cloneProperty(AXP_NAME_PROPERTY, { visible: false }),
+        cloneProperty(AXP_DATA_PATH_PROPERTY, { visible: false }),
+        // ====== Axis Settings ======
+        {
+            name: 'xAxisLabel',
+            title: '@dashboard:widgets.heatmap-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: 'yAxisLabel',
+            title: '@dashboard:widgets.heatmap-chart.y-axis-label',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: '',
+                dataType: 'string',
+                interface: {
+                    name: 'yAxisLabel',
+                    path: 'options.yAxisLabel',
+                    type: AXPWidgetsCatalog.text,
+                },
+            },
+            visible: true,
+        },
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return heatmapChartWidget_component; }).then((c) => c.AXPHeatmapChartWidgetViewComponent),
+        },
+    },
+    meta: {
+        dimensions: {
+            lg: { width: 6, height: 5, minWidth: 2, minHeight: 2, maxWidth: 8, maxHeight: 7 },
+            md: { width: 6, height: 5, minWidth: 2, minHeight: 2, maxWidth: 8, maxHeight: 7 },
+            sm: { height: 5, minHeight: 2, maxHeight: 7 },
+        },
+    },
+};
+
 /**
  * Line Chart Widget Component
  * Renders data as lines with interactive hover effects and animations
  */
-class AXPLineChartWidgetViewComponent extends AXPValueWidgetComponent {
+class AXPLineChartWidgetViewComponent extends AXPDashboardWidgetComponent {
     async resolveChartOptionLabel(value) {
         if (value != null && typeof value === 'object' && !Array.isArray(value)) {
-            return this.mlResolver.resolve(value);
+            return this.translationService.resolve(value);
         }
         const s = String(value ?? '');
         if (s.startsWith('@')) {
@@ -1307,8 +1760,10 @@ class AXPLineChartWidgetViewComponent extends AXPValueWidgetComponent {
             }
             return value;
         }
-        if (typeof value === 'object' && !Array.isArray(value) && this.mlResolver.isValidMultiLanguageObject(value)) {
-            return this.mlResolver.resolve(value);
+        if (typeof value === 'object' &&
+            !Array.isArray(value) &&
+            this.translationService.isValidMultiLanguageObject(value)) {
+            return this.translationService.resolve(value);
         }
         return String(value);
     }
@@ -1317,7 +1772,6 @@ class AXPLineChartWidgetViewComponent extends AXPValueWidgetComponent {
         //#region ---- Services & Dependencies ----
         this.dataService = inject(AXPDataSourceDefinitionProviderService);
         this.translationService = inject(AXTranslationService);
-        this.mlResolver = inject(AXPMultiLanguageStringResolverService);
         //#endregion
         //#region ---- Chart state ----
         this.data = signal([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
@@ -1412,8 +1866,9 @@ var lineChartWidget_component = /*#__PURE__*/Object.freeze({
 });
 
 const AXPLineChartWidget = {
-    name: 'line-chart',
-    title: 'Line Chart Widget',
+    name: RootConfig.widgets.lineChart,
+    title: '@dashboard:widgets.line-chart.widget-title',
+    description: '@dashboard:widgets.line-chart.widget-description',
     categories: [AXP_WIDGETS_CHART_CATEGORY],
     groups: [AXPWidgetGroupEnum.DashboardWidget],
     type: 'dashboard',
@@ -1814,13 +2269,12 @@ const AXPLineChartWidget = {
     },
 };
 
-class AXPKpiProgressWidgetViewComponent extends AXPBaseWidgetComponent {
+class AXPKpiProgressWidgetViewComponent extends AXPDashboardWidgetComponent {
     constructor() {
         super(...arguments);
         //#region ---- Services & Dependencies ----
         this.dataService = inject(AXPDataSourceDefinitionProviderService);
         this.translationService = inject(AXTranslationService);
-        this.mlResolver = inject(AXPMultiLanguageStringResolverService);
         //#endregion
         //#region ---- State ----
         this.model = signal({
@@ -1908,8 +2362,10 @@ class AXPKpiProgressWidgetViewComponent extends AXPBaseWidgetComponent {
             }
             return value;
         }
-        if (typeof value === 'object' && !Array.isArray(value) && this.mlResolver.isValidMultiLanguageObject(value)) {
-            return this.mlResolver.resolve(value);
+        if (typeof value === 'object' &&
+            !Array.isArray(value) &&
+            this.translationService.isValidMultiLanguageObject(value)) {
+            return this.translationService.resolve(value);
         }
         return String(value);
     }
@@ -1934,11 +2390,11 @@ class AXPKpiProgressWidgetViewComponent extends AXPBaseWidgetComponent {
         }).format(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPKpiProgressWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPKpiProgressWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"kpi-progress\">\n  <div class=\"kpi-progress__header\">\n    <div class=\"kpi-progress__title\">{{ localized().title }}</div>\n  </div>\n\n  <div class=\"kpi-progress__value-row\">\n    <div class=\"kpi-progress__value\">\n      {{ localized().valuePrefix }}{{ formattedValue() }}{{ localized().valueSuffix }}\n    </div>\n    @if (localized().targetValue) {\n      <div class=\"kpi-progress__target\">{{ localized().targetValue }}</div>\n    }\n  </div>\n\n  @if (localized().subtitle) {\n    <div class=\"kpi-progress__subtitle\">{{ localized().subtitle }}</div>\n  }\n\n  <div class=\"kpi-progress__bar-track\">\n    <div class=\"kpi-progress__bar-fill\" [style.width.%]=\"progressPercent()\"></div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.kpi-progress{display:flex;flex-direction:column;gap:.75rem;padding:.5rem}.kpi-progress__title{font-size:1.25rem;color:var(--ax-text-muted)}.kpi-progress__value-row{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}.kpi-progress__value{font-size:3rem;font-weight:700;line-height:1;color:var(--ax-text-color)}.kpi-progress__target,.kpi-progress__subtitle{font-size:2rem;font-weight:500;color:var(--ax-primary-color, var(--ax-text-color))}.kpi-progress__subtitle{font-size:1.75rem}.kpi-progress__bar-track{width:100%;height:1rem;border-radius:999px;background-color:var(--ax-surface-hover);overflow:hidden}.kpi-progress__bar-fill{height:100%;border-radius:999px;background-color:var(--ax-primary-color, var(--ax-text-color))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPKpiProgressWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-kpi-progress\">\n  <div class=\"__header\">\n    <div class=\"__title\">{{ localized().title }}</div>\n    <div class=\"__badge\">{{ progressPercent() }}%</div>\n  </div>\n\n  <div class=\"__value-row\">\n    <div class=\"__value\">\n      {{ localized().valuePrefix }}{{ formattedValue() }}{{ localized().valueSuffix }}\n    </div>\n    @if (localized().targetValue) {\n      <div class=\"__target-wrap\">\n        <div class=\"__target-label\">Target</div>\n        <div class=\"__target\">{{ localized().targetValue }}</div>\n      </div>\n    }\n  </div>\n\n  @if (localized().subtitle) {\n    <div class=\"__subtitle\">{{ localized().subtitle }}</div>\n  }\n\n  <div class=\"__bar-track\">\n    <div class=\"__bar-fill\" [style.width.%]=\"progressPercent()\"></div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.axp-kpi-progress{display:flex;flex-direction:column;gap:.625rem;height:100%;padding:.75rem}.axp-kpi-progress .__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.axp-kpi-progress .__title{font-size:.9rem;font-weight:600;color:rgb(var(--ax-sys-color-on-light-surface))}.axp-kpi-progress .__badge{padding:.15rem .5rem;border-radius:999px;background:rgb(var(--ax-sys-color-primary-lightest-surface));color:rgb(var(--ax-sys-color-on-primary-lightest-surface));font-size:.75rem;font-weight:700}.axp-kpi-progress .__value-row{display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem}.axp-kpi-progress .__value{font-size:clamp(1.5rem,3.5cqw,2.25rem);font-weight:700;line-height:1.1;color:rgb(var(--ax-sys-color-on-lightest-surface))}.axp-kpi-progress .__target-wrap{display:flex;flex-direction:column;align-items:flex-end}.axp-kpi-progress .__target-label{font-size:.7rem;color:rgb(var(--ax-sys-color-on-light-surface))}.axp-kpi-progress .__target{font-size:.95rem;font-weight:600;color:rgb(var(--ax-sys-color-on-lightest-surface))}.axp-kpi-progress .__subtitle{font-size:.82rem;color:rgb(var(--ax-sys-color-on-light-surface))}.axp-kpi-progress .__bar-track{width:100%;height:.5rem;border-radius:999px;background:rgb(var(--ax-sys-color-lighter-surface));overflow:hidden}.axp-kpi-progress .__bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,rgb(var(--ax-sys-color-primary-300)),rgb(var(--ax-sys-color-primary-500)))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPKpiProgressWidgetViewComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kpi-progress\">\n  <div class=\"kpi-progress__header\">\n    <div class=\"kpi-progress__title\">{{ localized().title }}</div>\n  </div>\n\n  <div class=\"kpi-progress__value-row\">\n    <div class=\"kpi-progress__value\">\n      {{ localized().valuePrefix }}{{ formattedValue() }}{{ localized().valueSuffix }}\n    </div>\n    @if (localized().targetValue) {\n      <div class=\"kpi-progress__target\">{{ localized().targetValue }}</div>\n    }\n  </div>\n\n  @if (localized().subtitle) {\n    <div class=\"kpi-progress__subtitle\">{{ localized().subtitle }}</div>\n  }\n\n  <div class=\"kpi-progress__bar-track\">\n    <div class=\"kpi-progress__bar-fill\" [style.width.%]=\"progressPercent()\"></div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.kpi-progress{display:flex;flex-direction:column;gap:.75rem;padding:.5rem}.kpi-progress__title{font-size:1.25rem;color:var(--ax-text-muted)}.kpi-progress__value-row{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}.kpi-progress__value{font-size:3rem;font-weight:700;line-height:1;color:var(--ax-text-color)}.kpi-progress__target,.kpi-progress__subtitle{font-size:2rem;font-weight:500;color:var(--ax-primary-color, var(--ax-text-color))}.kpi-progress__subtitle{font-size:1.75rem}.kpi-progress__bar-track{width:100%;height:1rem;border-radius:999px;background-color:var(--ax-surface-hover);overflow:hidden}.kpi-progress__bar-fill{height:100%;border-radius:999px;background-color:var(--ax-primary-color, var(--ax-text-color))}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-kpi-progress\">\n  <div class=\"__header\">\n    <div class=\"__title\">{{ localized().title }}</div>\n    <div class=\"__badge\">{{ progressPercent() }}%</div>\n  </div>\n\n  <div class=\"__value-row\">\n    <div class=\"__value\">\n      {{ localized().valuePrefix }}{{ formattedValue() }}{{ localized().valueSuffix }}\n    </div>\n    @if (localized().targetValue) {\n      <div class=\"__target-wrap\">\n        <div class=\"__target-label\">Target</div>\n        <div class=\"__target\">{{ localized().targetValue }}</div>\n      </div>\n    }\n  </div>\n\n  @if (localized().subtitle) {\n    <div class=\"__subtitle\">{{ localized().subtitle }}</div>\n  }\n\n  <div class=\"__bar-track\">\n    <div class=\"__bar-fill\" [style.width.%]=\"progressPercent()\"></div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.axp-kpi-progress{display:flex;flex-direction:column;gap:.625rem;height:100%;padding:.75rem}.axp-kpi-progress .__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.axp-kpi-progress .__title{font-size:.9rem;font-weight:600;color:rgb(var(--ax-sys-color-on-light-surface))}.axp-kpi-progress .__badge{padding:.15rem .5rem;border-radius:999px;background:rgb(var(--ax-sys-color-primary-lightest-surface));color:rgb(var(--ax-sys-color-on-primary-lightest-surface));font-size:.75rem;font-weight:700}.axp-kpi-progress .__value-row{display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem}.axp-kpi-progress .__value{font-size:clamp(1.5rem,3.5cqw,2.25rem);font-weight:700;line-height:1.1;color:rgb(var(--ax-sys-color-on-lightest-surface))}.axp-kpi-progress .__target-wrap{display:flex;flex-direction:column;align-items:flex-end}.axp-kpi-progress .__target-label{font-size:.7rem;color:rgb(var(--ax-sys-color-on-light-surface))}.axp-kpi-progress .__target{font-size:.95rem;font-weight:600;color:rgb(var(--ax-sys-color-on-lightest-surface))}.axp-kpi-progress .__subtitle{font-size:.82rem;color:rgb(var(--ax-sys-color-on-light-surface))}.axp-kpi-progress .__bar-track{width:100%;height:.5rem;border-radius:999px;background:rgb(var(--ax-sys-color-lighter-surface));overflow:hidden}.axp-kpi-progress .__bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,rgb(var(--ax-sys-color-primary-300)),rgb(var(--ax-sys-color-primary-500)))}\n"] }]
         }] });
 
 var kpiProgressWidget_component = /*#__PURE__*/Object.freeze({
@@ -1947,8 +2403,9 @@ var kpiProgressWidget_component = /*#__PURE__*/Object.freeze({
 });
 
 const AXPKpiProgressWidget = {
-    name: 'kpi-progress',
-    title: createMultiLanguageString('KPI + Progress', 'شاخص کلیدی + پیشرفت'),
+    name: RootConfig.widgets.kpiProgress,
+    title: '@dashboard:widgets.kpi-progress.widget-title',
+    description: '@dashboard:widgets.kpi-progress.widget-description',
     categories: [AXP_WIDGETS_CHART_CATEGORY],
     groups: [AXPWidgetGroupEnum.DashboardWidget],
     type: 'dashboard',
@@ -2060,12 +2517,11 @@ const AXPKpiProgressWidget = {
     },
 };
 
-class AXPKpiSegmentedWidgetViewComponent extends AXPBaseWidgetComponent {
+class AXPKpiSegmentedWidgetViewComponent extends AXPDashboardWidgetComponent {
     constructor() {
         super(...arguments);
         this.dataService = inject(AXPDataSourceDefinitionProviderService);
         this.translationService = inject(AXTranslationService);
-        this.mlResolver = inject(AXPMultiLanguageStringResolverService);
         this.model = signal({
             title: 'KPI Breakdown',
             segments: [],
@@ -2115,11 +2571,11 @@ class AXPKpiSegmentedWidgetViewComponent extends AXPBaseWidgetComponent {
     }
     getPaletteColor(index) {
         const palette = [
-            'var(--ax-primary-color, var(--ax-text-color))',
-            'var(--ax-warning-color, var(--ax-text-muted))',
-            'var(--ax-success-color, var(--ax-surface-hover))',
-            'var(--ax-info-color, var(--ax-surface-color))',
-            'var(--ax-danger-color, var(--ax-text-muted))',
+            'rgb(var(--ax-sys-color-primary-500))',
+            'rgb(var(--ax-sys-color-warning-500))',
+            'rgb(var(--ax-sys-color-success-500))',
+            'rgb(var(--ax-sys-color-accent2-500))',
+            'rgb(var(--ax-sys-color-danger-500))',
         ];
         return palette[index % palette.length];
     }
@@ -2130,17 +2586,19 @@ class AXPKpiSegmentedWidgetViewComponent extends AXPBaseWidgetComponent {
         if (typeof value === 'string') {
             return value.startsWith('@') ? this.translationService.translateAsync(value) : value;
         }
-        if (typeof value === 'object' && !Array.isArray(value) && this.mlResolver.isValidMultiLanguageObject(value)) {
-            return this.mlResolver.resolve(value);
+        if (typeof value === 'object' &&
+            !Array.isArray(value) &&
+            this.translationService.isValidMultiLanguageObject(value)) {
+            return this.translationService.resolve(value);
         }
         return String(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPKpiSegmentedWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPKpiSegmentedWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"kpi-segmented\">\n  <div class=\"kpi-segmented__header\">{{ title() }}</div>\n\n  <div class=\"kpi-segmented__bar-track\">\n    @for (segment of segments(); track trackByLabel($index, segment)) {\n      <div\n        class=\"kpi-segmented__bar-part\"\n        [style.width.%]=\"segment.percent\"\n        [style.background-color]=\"segment.color\"\n      ></div>\n    }\n  </div>\n\n  <div class=\"kpi-segmented__legend\">\n    @for (segment of segments(); track trackByLabel($index, segment)) {\n      <div class=\"kpi-segmented__legend-item\">\n        <span class=\"kpi-segmented__legend-dot\" [style.background-color]=\"segment.color\"></span>\n        <span class=\"kpi-segmented__legend-text\">{{ segment.value }} - {{ segment.label }}</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.kpi-segmented{display:flex;flex-direction:column;gap:1rem;padding:.5rem}.kpi-segmented__header{font-size:2rem;font-weight:600;color:var(--ax-text-color)}.kpi-segmented__bar-track{display:flex;gap:.25rem;height:1.25rem;width:100%;overflow:hidden}.kpi-segmented__bar-part{border-radius:.5rem;min-width:.5rem}.kpi-segmented__legend{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem}.kpi-segmented__legend-item{display:inline-flex;align-items:center;gap:.5rem}.kpi-segmented__legend-dot{width:1rem;height:1rem;border-radius:.35rem}.kpi-segmented__legend-text{font-size:2rem;color:var(--ax-text-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPKpiSegmentedWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-kpi-segmented\">\n  <div class=\"__header\">{{ title() }}</div>\n\n  <div class=\"__bar-track\">\n    @for (segment of segments(); track trackByLabel($index, segment)) {\n      <div\n        class=\"__bar-part\"\n        [style.width.%]=\"segment.percent\"\n        [style.background-color]=\"segment.color\"\n      ></div>\n    }\n  </div>\n\n  <div class=\"__legend\">\n    @for (segment of segments(); track trackByLabel($index, segment)) {\n      <div class=\"__legend-item\">\n        <span class=\"__legend-dot\" [style.background-color]=\"segment.color\"></span>\n        <span class=\"__legend-value\">{{ segment.value }}</span>\n        <span class=\"__legend-label\">{{ segment.label }}</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.axp-kpi-segmented{display:flex;flex-direction:column;gap:.75rem;height:100%;padding:.75rem}.axp-kpi-segmented .__header{font-size:.95rem;font-weight:600;color:rgb(var(--ax-sys-color-on-lightest-surface))}.axp-kpi-segmented .__bar-track{display:flex;height:.75rem;width:100%;border-radius:999px;background:rgb(var(--ax-sys-color-lighter-surface));overflow:hidden}.axp-kpi-segmented .__bar-part{min-width:.25rem}.axp-kpi-segmented .__legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.4rem .75rem}.axp-kpi-segmented .__legend-item{display:inline-flex;align-items:center;gap:.35rem;min-width:0}.axp-kpi-segmented .__legend-dot{width:.55rem;height:.55rem;border-radius:999px;flex:0 0 auto}.axp-kpi-segmented .__legend-value{font-size:.8rem;font-weight:700;color:rgb(var(--ax-sys-color-on-lightest-surface))}.axp-kpi-segmented .__legend-label{font-size:.78rem;color:rgb(var(--ax-sys-color-on-light-surface));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPKpiSegmentedWidgetViewComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kpi-segmented\">\n  <div class=\"kpi-segmented__header\">{{ title() }}</div>\n\n  <div class=\"kpi-segmented__bar-track\">\n    @for (segment of segments(); track trackByLabel($index, segment)) {\n      <div\n        class=\"kpi-segmented__bar-part\"\n        [style.width.%]=\"segment.percent\"\n        [style.background-color]=\"segment.color\"\n      ></div>\n    }\n  </div>\n\n  <div class=\"kpi-segmented__legend\">\n    @for (segment of segments(); track trackByLabel($index, segment)) {\n      <div class=\"kpi-segmented__legend-item\">\n        <span class=\"kpi-segmented__legend-dot\" [style.background-color]=\"segment.color\"></span>\n        <span class=\"kpi-segmented__legend-text\">{{ segment.value }} - {{ segment.label }}</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.kpi-segmented{display:flex;flex-direction:column;gap:1rem;padding:.5rem}.kpi-segmented__header{font-size:2rem;font-weight:600;color:var(--ax-text-color)}.kpi-segmented__bar-track{display:flex;gap:.25rem;height:1.25rem;width:100%;overflow:hidden}.kpi-segmented__bar-part{border-radius:.5rem;min-width:.5rem}.kpi-segmented__legend{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem}.kpi-segmented__legend-item{display:inline-flex;align-items:center;gap:.5rem}.kpi-segmented__legend-dot{width:1rem;height:1rem;border-radius:.35rem}.kpi-segmented__legend-text{font-size:2rem;color:var(--ax-text-color)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-kpi-segmented\">\n  <div class=\"__header\">{{ title() }}</div>\n\n  <div class=\"__bar-track\">\n    @for (segment of segments(); track trackByLabel($index, segment)) {\n      <div\n        class=\"__bar-part\"\n        [style.width.%]=\"segment.percent\"\n        [style.background-color]=\"segment.color\"\n      ></div>\n    }\n  </div>\n\n  <div class=\"__legend\">\n    @for (segment of segments(); track trackByLabel($index, segment)) {\n      <div class=\"__legend-item\">\n        <span class=\"__legend-dot\" [style.background-color]=\"segment.color\"></span>\n        <span class=\"__legend-value\">{{ segment.value }}</span>\n        <span class=\"__legend-label\">{{ segment.label }}</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.axp-kpi-segmented{display:flex;flex-direction:column;gap:.75rem;height:100%;padding:.75rem}.axp-kpi-segmented .__header{font-size:.95rem;font-weight:600;color:rgb(var(--ax-sys-color-on-lightest-surface))}.axp-kpi-segmented .__bar-track{display:flex;height:.75rem;width:100%;border-radius:999px;background:rgb(var(--ax-sys-color-lighter-surface));overflow:hidden}.axp-kpi-segmented .__bar-part{min-width:.25rem}.axp-kpi-segmented .__legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.4rem .75rem}.axp-kpi-segmented .__legend-item{display:inline-flex;align-items:center;gap:.35rem;min-width:0}.axp-kpi-segmented .__legend-dot{width:.55rem;height:.55rem;border-radius:999px;flex:0 0 auto}.axp-kpi-segmented .__legend-value{font-size:.8rem;font-weight:700;color:rgb(var(--ax-sys-color-on-lightest-surface))}.axp-kpi-segmented .__legend-label{font-size:.78rem;color:rgb(var(--ax-sys-color-on-light-surface));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }] });
 
 var kpiSegmentedWidget_component = /*#__PURE__*/Object.freeze({
@@ -2149,8 +2607,9 @@ var kpiSegmentedWidget_component = /*#__PURE__*/Object.freeze({
 });
 
 const AXPKpiSegmentedWidget = {
-    name: 'kpi-segmented',
-    title: createMultiLanguageString('KPI + Segmented Breakdown', 'شاخص کلیدی + تفکیک بخش‌بندی'),
+    name: RootConfig.widgets.kpiSegmented,
+    title: '@dashboard:widgets.kpi-segmented.widget-title',
+    description: '@dashboard:widgets.kpi-segmented.widget-description',
     categories: [AXP_WIDGETS_CHART_CATEGORY],
     groups: [AXPWidgetGroupEnum.DashboardWidget],
     type: 'dashboard',
@@ -2181,6 +2640,9 @@ const AXPKpiSegmentedWidget = {
         },
     },
     meta: {
+        title: {
+            visible: false,
+        },
         dimensions: {
             lg: {
                 width: 4,
@@ -2202,42 +2664,478 @@ const AXPKpiSegmentedWidget = {
     },
 };
 
-class AXPKpiDetailsWidgetViewComponent extends AXPBaseWidgetComponent {
+class AXPKpiDetailsWidgetViewComponent extends AXPDashboardWidgetComponent {
     constructor() {
         super(...arguments);
         this.dataService = inject(AXPDataSourceDefinitionProviderService);
         this.translationService = inject(AXTranslationService);
-        this.mlResolver = inject(AXPMultiLanguageStringResolverService);
         this.model = signal({
             title: 'KPI',
             value: 0,
-            subtitle: '',
-            details: [],
+            subtitle: '',
+            details: [],
+        }, ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+        this.localized = signal({
+            title: 'KPI',
+            subtitle: '',
+            valuePrefix: '',
+            valueSuffix: '',
+        }, ...(ngDevMode ? [{ debugName: "localized" }] : /* istanbul ignore next */ []));
+        this.detailItems = signal([], ...(ngDevMode ? [{ debugName: "detailItems" }] : /* istanbul ignore next */ []));
+        this.dataSource = computed(() => this.options()['dataSource'], ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+        this.formattedValue = computed(() => this.formatValue(this.model().value, this.model().format), ...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
+        this.optionsEffect = effect(() => {
+            const raw = this.options();
+            this.model.update((current) => ({ ...current, ...raw }));
+        }, ...(ngDevMode ? [{ debugName: "optionsEffect" }] : /* istanbul ignore next */ []));
+        this.localizationEffect = effect(() => {
+            const model = this.model();
+            void Promise.all([
+                this.resolveText(model.title),
+                this.resolveText(model.subtitle),
+                this.resolveText(model.valuePrefix),
+                this.resolveText(model.valueSuffix),
+                this.resolveDetails(model.details),
+            ]).then(([title, subtitle, valuePrefix, valueSuffix, details]) => {
+                this.localized.set({ title, subtitle, valuePrefix, valueSuffix });
+                this.detailItems.set(details);
+            });
+        }, ...(ngDevMode ? [{ debugName: "localizationEffect" }] : /* istanbul ignore next */ []));
+        this.dataLoadEffect = effect(async () => {
+            const ds = this.dataSource();
+            if (!ds) {
+                return;
+            }
+            const result = await this.dataService.get(ds);
+            if (!result) {
+                return;
+            }
+            const source = result.source();
+            const page = await source.config.load({ take: 1, skip: 0, sort: [] });
+            const item = (page.items?.[0] ?? {});
+            this.model.update((current) => ({ ...current, ...item }));
+        }, ...(ngDevMode ? [{ debugName: "dataLoadEffect" }] : /* istanbul ignore next */ []));
+    }
+    trackByLabel(_, item) {
+        return item.label;
+    }
+    async resolveDetails(items = []) {
+        return Promise.all(items.map(async (item) => ({
+            label: await this.resolveText(item.label),
+            value: await this.resolveText(item.value),
+            color: item.color,
+        })));
+    }
+    async resolveText(value) {
+        if (value == null) {
+            return '';
+        }
+        if (typeof value === 'string') {
+            return value.startsWith('@') ? this.translationService.translateAsync(value) : value;
+        }
+        if (typeof value === 'object' &&
+            !Array.isArray(value) &&
+            this.translationService.isValidMultiLanguageObject(value)) {
+            return this.translationService.resolve(value);
+        }
+        return String(value);
+    }
+    formatValue(value, format) {
+        if (value == null || value === '') {
+            return '';
+        }
+        if (typeof value !== 'number' || !format?.style) {
+            return String(value);
+        }
+        return new Intl.NumberFormat(undefined, {
+            style: format.style,
+            currency: format.currency,
+            minimumFractionDigits: format.minimumFractionDigits,
+            maximumFractionDigits: format.maximumFractionDigits,
+        }).format(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPKpiDetailsWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPKpiDetailsWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-kpi-details\">\n  <div class=\"__title\">{{ localized().title }}</div>\n  <div class=\"__value\">\n    {{ localized().valuePrefix }}{{ formattedValue() }}{{ localized().valueSuffix }}\n  </div>\n  @if (localized().subtitle) {\n    <div class=\"__subtitle\">{{ localized().subtitle }}</div>\n  }\n\n  <div class=\"__items\">\n    @for (item of detailItems(); track trackByLabel($index, item)) {\n      <div class=\"__item\">\n        <span class=\"__item-label\">{{ item.label }}</span>\n        <span class=\"__item-value\" [style.color]=\"item.color || 'rgb(var(--ax-sys-color-on-lightest-surface))'\">{{ item.value }}</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.axp-kpi-details{display:flex;flex-direction:column;gap:.55rem;height:100%;padding:.75rem}.axp-kpi-details .__title{font-size:.9rem;font-weight:600;color:rgb(var(--ax-sys-color-on-light-surface))}.axp-kpi-details .__value{font-size:clamp(1.45rem,3.5cqw,2.2rem);font-weight:700;color:rgb(var(--ax-sys-color-on-lightest-surface));line-height:1.1}.axp-kpi-details .__subtitle{font-size:.8rem;color:rgb(var(--ax-sys-color-on-light-surface))}.axp-kpi-details .__items{margin-top:auto;display:flex;flex-direction:column;gap:.3rem;padding-top:.3rem;border-top:1px solid rgb(var(--ax-sys-color-border-lighter-surface))}.axp-kpi-details .__item{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.axp-kpi-details .__item-label{font-size:.78rem;color:rgb(var(--ax-sys-color-on-light-surface))}.axp-kpi-details .__item-value{font-size:.8rem;font-weight:700;color:rgb(var(--ax-sys-color-on-lightest-surface))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPKpiDetailsWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-kpi-details\">\n  <div class=\"__title\">{{ localized().title }}</div>\n  <div class=\"__value\">\n    {{ localized().valuePrefix }}{{ formattedValue() }}{{ localized().valueSuffix }}\n  </div>\n  @if (localized().subtitle) {\n    <div class=\"__subtitle\">{{ localized().subtitle }}</div>\n  }\n\n  <div class=\"__items\">\n    @for (item of detailItems(); track trackByLabel($index, item)) {\n      <div class=\"__item\">\n        <span class=\"__item-label\">{{ item.label }}</span>\n        <span class=\"__item-value\" [style.color]=\"item.color || 'rgb(var(--ax-sys-color-on-lightest-surface))'\">{{ item.value }}</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.axp-kpi-details{display:flex;flex-direction:column;gap:.55rem;height:100%;padding:.75rem}.axp-kpi-details .__title{font-size:.9rem;font-weight:600;color:rgb(var(--ax-sys-color-on-light-surface))}.axp-kpi-details .__value{font-size:clamp(1.45rem,3.5cqw,2.2rem);font-weight:700;color:rgb(var(--ax-sys-color-on-lightest-surface));line-height:1.1}.axp-kpi-details .__subtitle{font-size:.8rem;color:rgb(var(--ax-sys-color-on-light-surface))}.axp-kpi-details .__items{margin-top:auto;display:flex;flex-direction:column;gap:.3rem;padding-top:.3rem;border-top:1px solid rgb(var(--ax-sys-color-border-lighter-surface))}.axp-kpi-details .__item{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.axp-kpi-details .__item-label{font-size:.78rem;color:rgb(var(--ax-sys-color-on-light-surface))}.axp-kpi-details .__item-value{font-size:.8rem;font-weight:700;color:rgb(var(--ax-sys-color-on-lightest-surface))}\n"] }]
+        }] });
+
+var kpiDetailsWidget_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPKpiDetailsWidgetViewComponent: AXPKpiDetailsWidgetViewComponent
+});
+
+const AXPKpiDetailsWidget = {
+    name: RootConfig.widgets.kpiDetails,
+    title: '@dashboard:widgets.kpi-details.widget-title',
+    description: '@dashboard:widgets.kpi-details.widget-description',
+    categories: [AXP_WIDGETS_CHART_CATEGORY],
+    groups: [AXPWidgetGroupEnum.DashboardWidget],
+    type: 'dashboard',
+    icon: 'fa-light fa-square-list',
+    properties: [
+        AXP_DATA_SOURCE_OPTIONS_PROPERTY,
+        cloneProperty(AXP_NAME_PROPERTY, { visible: false }),
+        cloneProperty(AXP_DATA_PATH_PROPERTY, { visible: false }),
+        {
+            name: 'title',
+            title: '@dashboard:widgets.kpi-details.title',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: '',
+                dataType: 'string',
+                interface: {
+                    name: 'title',
+                    path: 'options.title',
+                    type: AXPWidgetsCatalog.text,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'value',
+            title: '@dashboard:widgets.kpi-details.value',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 0,
+                dataType: 'number',
+                interface: {
+                    name: 'value',
+                    path: 'options.value',
+                    type: AXPWidgetsCatalog.number,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'subtitle',
+            title: '@dashboard:widgets.kpi-details.subtitle',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: '',
+                dataType: 'string',
+                interface: {
+                    name: 'subtitle',
+                    path: 'options.subtitle',
+                    type: AXPWidgetsCatalog.text,
+                },
+            },
+            visible: true,
+        },
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return kpiDetailsWidget_component; }).then((c) => c.AXPKpiDetailsWidgetViewComponent),
+        },
+    },
+    meta: {
+        title: {
+            visible: false,
+        },
+        dimensions: {
+            lg: {
+                width: 4,
+                height: 4,
+                minWidth: 3,
+                minHeight: 2,
+            },
+            md: {
+                width: 4,
+                height: 3,
+                minWidth: 3,
+                minHeight: 2,
+            },
+            sm: {
+                height: 3,
+                minHeight: 2,
+            },
+        },
+    },
+};
+
+const ICON_TONE_OPTIONS = ['primary', 'secondary', 'success', 'warning', 'info', 'danger'];
+const TREND_STATUS_OPTIONS = ['success', 'danger', 'neutral'];
+const TITLE_BADGE_TONE_OPTIONS = ['primary', 'secondary', 'warning', 'info', 'neutral'];
+const AXPKpiStatCardWidget = {
+    name: RootConfig.widgets.kpiStatCard,
+    title: '@dashboard:widgets.kpi-stat-card.widget-title',
+    description: '@dashboard:widgets.kpi-stat-card.widget-description',
+    categories: [AXP_WIDGETS_CHART_CATEGORY],
+    groups: [AXPWidgetGroupEnum.DashboardWidget],
+    type: 'dashboard',
+    icon: 'fa-light fa-gauge-high',
+    properties: [
+        AXP_DATA_SOURCE_OPTIONS_PROPERTY,
+        cloneProperty(AXP_NAME_PROPERTY, { visible: false }),
+        cloneProperty(AXP_DATA_PATH_PROPERTY, { visible: false }),
+        {
+            name: 'title',
+            title: '@dashboard:widgets.kpi-stat-card.title',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: '',
+                dataType: 'string',
+                interface: {
+                    name: 'title',
+                    path: 'options.title',
+                    type: AXPWidgetsCatalog.text,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'titleBadgeText',
+            title: '@dashboard:widgets.kpi-stat-card.title-badge-text',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: '',
+                dataType: 'string',
+                interface: {
+                    name: 'titleBadgeText',
+                    path: 'options.titleBadgeText',
+                    type: AXPWidgetsCatalog.text,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'titleBadgeTone',
+            title: '@dashboard:widgets.kpi-stat-card.title-badge-tone',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 'warning',
+                dataType: 'string',
+                interface: {
+                    name: 'titleBadgeTone',
+                    path: 'options.titleBadgeTone',
+                    type: AXPWidgetsCatalog.select,
+                    options: { dataSource: TITLE_BADGE_TONE_OPTIONS },
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'value',
+            title: '@dashboard:widgets.kpi-stat-card.value',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 0,
+                dataType: 'number',
+                interface: {
+                    name: 'value',
+                    path: 'options.value',
+                    type: AXPWidgetsCatalog.number,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'valuePrefix',
+            title: '@dashboard:widgets.kpi-stat-card.value-prefix',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: '',
+                dataType: 'string',
+                interface: {
+                    name: 'valuePrefix',
+                    path: 'options.valuePrefix',
+                    type: AXPWidgetsCatalog.text,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'valueSuffix',
+            title: '@dashboard:widgets.kpi-stat-card.value-suffix',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: '',
+                dataType: 'string',
+                interface: {
+                    name: 'valueSuffix',
+                    path: 'options.valueSuffix',
+                    type: AXPWidgetsCatalog.text,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'trendValue',
+            title: '@dashboard:widgets.kpi-stat-card.trend-value',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: '',
+                dataType: 'string',
+                interface: {
+                    name: 'trendValue',
+                    path: 'options.trendValue',
+                    type: AXPWidgetsCatalog.text,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'trendLabel',
+            title: '@dashboard:widgets.kpi-stat-card.trend-label',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: '',
+                dataType: 'string',
+                interface: {
+                    name: 'trendLabel',
+                    path: 'options.trendLabel',
+                    type: AXPWidgetsCatalog.text,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'trendStatus',
+            title: '@dashboard:widgets.kpi-stat-card.trend-status',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 'neutral',
+                dataType: 'string',
+                interface: {
+                    name: 'trendStatus',
+                    path: 'options.trendStatus',
+                    type: AXPWidgetsCatalog.select,
+                    options: { dataSource: TREND_STATUS_OPTIONS },
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'icon',
+            title: '@dashboard:widgets.kpi-stat-card.icon',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 'fa-light fa-chart-line',
+                dataType: 'string',
+                interface: {
+                    name: 'icon',
+                    path: 'options.icon',
+                    type: AXPWidgetsCatalog.text,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'iconTone',
+            title: '@dashboard:widgets.kpi-stat-card.icon-tone',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 'primary',
+                dataType: 'string',
+                interface: {
+                    name: 'iconTone',
+                    path: 'options.iconTone',
+                    type: AXPWidgetsCatalog.select,
+                    options: { dataSource: ICON_TONE_OPTIONS },
+                },
+            },
+            visible: true,
+        },
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return kpiStatCardWidget_component; }).then((c) => c.AXPKpiStatCardWidgetViewComponent),
+        },
+    },
+    meta: {
+        title: { visible: false },
+        dimensions: {
+            lg: { width: 3, height: 3, minWidth: 2, minHeight: 2 },
+            md: { width: 3, height: 3, minWidth: 2, minHeight: 2 },
+            sm: { height: 3, minHeight: 2 },
+        },
+    },
+};
+
+//#endregion
+class AXPKpiStatCardWidgetViewComponent extends AXPDashboardWidgetComponent {
+    constructor() {
+        super(...arguments);
+        //#region ---- Services & Dependencies ----
+        this.dataService = inject(AXPDataSourceDefinitionProviderService);
+        this.translationService = inject(AXTranslationService);
+        //#endregion
+        //#region ---- State ----
+        this.model = signal({
+            title: 'KPI',
+            value: 0,
+            trendStatus: 'neutral',
+            icon: 'fa-light fa-chart-line',
+            iconTone: 'primary',
         }, ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
         this.localized = signal({
-            title: 'KPI',
-            subtitle: '',
+            title: '',
             valuePrefix: '',
             valueSuffix: '',
+            titleBadgeText: '',
+            trendValue: '',
+            trendLabel: '',
         }, ...(ngDevMode ? [{ debugName: "localized" }] : /* istanbul ignore next */ []));
-        this.detailItems = signal([], ...(ngDevMode ? [{ debugName: "detailItems" }] : /* istanbul ignore next */ []));
         this.dataSource = computed(() => this.options()['dataSource'], ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ---- Computed ----
         this.formattedValue = computed(() => this.formatValue(this.model().value, this.model().format), ...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
+        this.iconClass = computed(() => this.model().icon || 'fa-light fa-chart-line', ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+        this.iconHostClasses = computed(() => {
+            const tone = (this.model().iconTone ?? 'primary');
+            return {
+                'axp-kpi-stat-card__icon-box': true,
+                'axp-kpi-stat-card__icon-box--primary': tone === 'primary',
+                'axp-kpi-stat-card__icon-box--secondary': tone === 'secondary',
+                'axp-kpi-stat-card__icon-box--success': tone === 'success',
+                'axp-kpi-stat-card__icon-box--warning': tone === 'warning',
+                'axp-kpi-stat-card__icon-box--info': tone === 'info',
+                'axp-kpi-stat-card__icon-box--danger': tone === 'danger',
+            };
+        }, ...(ngDevMode ? [{ debugName: "iconHostClasses" }] : /* istanbul ignore next */ []));
+        this.titleBadgeClasses = computed(() => {
+            const raw = this.model();
+            const tone = (raw.titleBadgeTone ?? raw.titleBadge?.tone ?? 'warning');
+            return {
+                'axp-kpi-stat-card__title-badge': true,
+                'axp-kpi-stat-card__title-badge--primary': tone === 'primary',
+                'axp-kpi-stat-card__title-badge--secondary': tone === 'secondary',
+                'axp-kpi-stat-card__title-badge--warning': tone === 'warning',
+                'axp-kpi-stat-card__title-badge--info': tone === 'info',
+                'axp-kpi-stat-card__title-badge--neutral': tone === 'neutral',
+            };
+        }, ...(ngDevMode ? [{ debugName: "titleBadgeClasses" }] : /* istanbul ignore next */ []));
+        this.trendPillClasses = computed(() => {
+            const s = (this.model().trendStatus ?? 'neutral');
+            return {
+                'axp-kpi-stat-card__trend-pill': true,
+                'axp-kpi-stat-card__trend-pill--success': s === 'success',
+                'axp-kpi-stat-card__trend-pill--danger': s === 'danger',
+                'axp-kpi-stat-card__trend-pill--neutral': s === 'neutral',
+            };
+        }, ...(ngDevMode ? [{ debugName: "trendPillClasses" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ---- Effects ----
         this.optionsEffect = effect(() => {
             const raw = this.options();
-            this.model.update((current) => ({ ...current, ...raw }));
+            this.model.update((current) => this.applyPatch(current, raw));
         }, ...(ngDevMode ? [{ debugName: "optionsEffect" }] : /* istanbul ignore next */ []));
         this.localizationEffect = effect(() => {
-            const model = this.model();
+            const m = this.model();
+            const badgeFromNested = m.titleBadge?.text;
+            const badgeFlat = m.titleBadgeText;
+            const badgeText = badgeFromNested ?? badgeFlat;
             void Promise.all([
-                this.resolveText(model.title),
-                this.resolveText(model.subtitle),
-                this.resolveText(model.valuePrefix),
-                this.resolveText(model.valueSuffix),
-                this.resolveDetails(model.details),
-            ]).then(([title, subtitle, valuePrefix, valueSuffix, details]) => {
-                this.localized.set({ title, subtitle, valuePrefix, valueSuffix });
-                this.detailItems.set(details);
+                this.resolveText(m.title),
+                this.resolveText(m.valuePrefix),
+                this.resolveText(m.valueSuffix),
+                this.resolveText(badgeText),
+                this.resolveText(m.trendValue),
+                this.resolveText(m.trendLabel),
+            ]).then(([title, valuePrefix, valueSuffix, titleBadgeText, trendValue, trendLabel]) => {
+                this.localized.set({ title, valuePrefix, valueSuffix, titleBadgeText, trendValue, trendLabel });
             });
         }, ...(ngDevMode ? [{ debugName: "localizationEffect" }] : /* istanbul ignore next */ []));
         this.dataLoadEffect = effect(async () => {
@@ -2252,18 +3150,29 @@ class AXPKpiDetailsWidgetViewComponent extends AXPBaseWidgetComponent {
             const source = result.source();
             const page = await source.config.load({ take: 1, skip: 0, sort: [] });
             const item = (page.items?.[0] ?? {});
-            this.model.update((current) => ({ ...current, ...item }));
+            this.model.update((current) => this.applyPatch(current, item));
         }, ...(ngDevMode ? [{ debugName: "dataLoadEffect" }] : /* istanbul ignore next */ []));
     }
-    trackByLabel(_, item) {
-        return item.label;
-    }
-    async resolveDetails(items = []) {
-        return Promise.all(items.map(async (item) => ({
-            label: await this.resolveText(item.label),
-            value: await this.resolveText(item.value),
-            color: item.color,
-        })));
+    //#endregion
+    //#region ---- Helpers ----
+    applyPatch(current, raw) {
+        const next = { ...current, ...raw };
+        if (raw.titleBadge && typeof raw.titleBadge === 'object') {
+            next.titleBadgeText = raw.titleBadge.text;
+            if (raw.titleBadge.tone != null) {
+                next.titleBadgeTone = raw.titleBadge.tone;
+            }
+        }
+        if (next.trendStatus == null) {
+            next.trendStatus = 'neutral';
+        }
+        if (next.iconTone == null) {
+            next.iconTone = 'primary';
+        }
+        if (!next.icon) {
+            next.icon = 'fa-light fa-chart-line';
+        }
+        return next;
     }
     async resolveText(value) {
         if (value == null) {
@@ -2272,8 +3181,10 @@ class AXPKpiDetailsWidgetViewComponent extends AXPBaseWidgetComponent {
         if (typeof value === 'string') {
             return value.startsWith('@') ? this.translationService.translateAsync(value) : value;
         }
-        if (typeof value === 'object' && !Array.isArray(value) && this.mlResolver.isValidMultiLanguageObject(value)) {
-            return this.mlResolver.resolve(value);
+        if (typeof value === 'object' &&
+            !Array.isArray(value) &&
+            this.translationService.isValidMultiLanguageObject(value)) {
+            return this.translationService.resolve(value);
         }
         return String(value);
     }
@@ -2281,6 +3192,9 @@ class AXPKpiDetailsWidgetViewComponent extends AXPBaseWidgetComponent {
         if (value == null || value === '') {
             return '';
         }
+        if (typeof value === 'string') {
+            return value;
+        }
         if (typeof value !== 'number' || !format?.style) {
             return String(value);
         }
@@ -2291,103 +3205,19 @@ class AXPKpiDetailsWidgetViewComponent extends AXPBaseWidgetComponent {
             maximumFractionDigits: format.maximumFractionDigits,
         }).format(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPKpiDetailsWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPKpiDetailsWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"kpi-details\">\n  <div class=\"kpi-details__title\">{{ localized().title }}</div>\n  <div class=\"kpi-details__value\">\n    {{ localized().valuePrefix }}{{ formattedValue() }}{{ localized().valueSuffix }}\n  </div>\n  @if (localized().subtitle) {\n    <div class=\"kpi-details__subtitle\">{{ localized().subtitle }}</div>\n  }\n\n  <div class=\"kpi-details__items\">\n    @for (item of detailItems(); track trackByLabel($index, item)) {\n      <div class=\"kpi-details__item\">\n        <span class=\"kpi-details__item-label\">{{ item.label }}</span>\n        <span class=\"kpi-details__item-value\" [style.color]=\"item.color || 'var(--ax-text-color)'\">{{ item.value }}</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.kpi-details{display:flex;flex-direction:column;gap:.75rem;padding:.5rem}.kpi-details__title{font-size:1.25rem;color:var(--ax-text-muted)}.kpi-details__value{font-size:2.5rem;font-weight:700;color:var(--ax-text-color);line-height:1.1}.kpi-details__subtitle{font-size:1rem;color:var(--ax-primary-color, var(--ax-text-color))}.kpi-details__items{display:flex;flex-direction:column;gap:.375rem}.kpi-details__item{display:flex;justify-content:space-between;gap:1rem}.kpi-details__item-label{color:var(--ax-text-muted)}.kpi-details__item-value{font-weight:600}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPKpiStatCardWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPKpiStatCardWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-kpi-stat-card\">\n  <div class=\"axp-kpi-stat-card__content\">\n    <div class=\"axp-kpi-stat-card__head\">\n      <div class=\"axp-kpi-stat-card__title-row\">\n        <span class=\"axp-kpi-stat-card__title\">{{ localized().title }}</span>\n        @if (localized().titleBadgeText) {\n          <span [class]=\"titleBadgeClasses()\">\n            {{ localized().titleBadgeText }}\n          </span>\n        }\n      </div>\n      <div [class]=\"iconHostClasses()\" role=\"img\" [attr.aria-label]=\"localized().title\">\n        <i [class]=\"iconClass()\" aria-hidden=\"true\"></i>\n      </div>\n    </div>\n\n    <div class=\"axp-kpi-stat-card__value\">\n      {{ localized().valuePrefix }}{{ formattedValue() }}{{ localized().valueSuffix }}\n    </div>\n\n    @if (localized().trendValue || localized().trendLabel) {\n      <div class=\"axp-kpi-stat-card__trend\">\n        <p class=\"axp-kpi-stat-card__trend-line\">\n          @if (localized().trendValue) {\n            <span [class]=\"trendPillClasses()\">\n              {{ localized().trendValue }}\n            </span>\n          }\n          @if (localized().trendLabel) {\n            <span class=\"axp-kpi-stat-card__trend-label\">{{ localized().trendLabel }}</span>\n          }\n        </p>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;height:100%;min-height:0px;width:100%;-webkit-font-smoothing:antialiased;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}.axp-kpi-stat-card{container-type:inline-size;container-name:kpi-stat;display:flex;height:100%;min-height:0px;width:100%;flex-direction:column;align-items:stretch;justify-content:center;box-sizing:border-box;padding:.75rem .875rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-surface),var(--tw-border-opacity, 1));background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));border-radius:.5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.axp-kpi-stat-card__content{display:flex;width:100%;flex-direction:column;align-items:stretch;gap:.375rem}.axp-kpi-stat-card__head{display:flex;flex:none;align-items:flex-start;justify-content:space-between;column-gap:.875rem;row-gap:.375rem}.axp-kpi-stat-card__title-row{display:flex;min-width:0px;flex:1 1 0%;flex-wrap:wrap;align-items:center;column-gap:.375rem;row-gap:.25rem;padding-top:1px}.axp-kpi-stat-card__title{font-size:.75rem;line-height:1rem;font-weight:600;line-height:1.375;letter-spacing:.025em;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-surface),var(--tw-text-opacity, 1))}.axp-kpi-stat-card__title-badge{box-sizing:border-box;display:inline-flex;align-items:center;min-height:1.25rem;border-radius:.375rem;padding:.25rem .625rem;font-size:.65rem;font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:.1em;border-width:1px;border-style:solid}.axp-kpi-stat-card__title-badge--primary{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-200),var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-800),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-primary-lightest-surface));color:rgb(var(--ax-sys-color-on-primary-lightest-surface));border-color:rgb(var(--ax-sys-color-border-primary-lightest-surface))}.axp-kpi-stat-card__title-badge--secondary{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-surface),var(--tw-border-opacity, 1));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));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-surface),var(--tw-text-opacity, 1))}.axp-kpi-stat-card__title-badge--warning{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}.axp-kpi-stat-card__title-badge--info{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-200),var(--tw-border-opacity, 1));background-color:rgb(var(--ax-sys-color-primary-lightest-surface));color:rgb(var(--ax-sys-color-on-primary-lightest-surface));border-color:rgb(var(--ax-sys-color-border-primary-lightest-surface));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-800),var(--tw-text-opacity, 1))}.axp-kpi-stat-card__title-badge--neutral{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-surface),var(--tw-border-opacity, 1));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));--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-kpi-stat-card__icon-box{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:.5rem;font-size:1rem;line-height:1.5rem;line-height:1}.axp-kpi-stat-card__icon-box--primary{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-700),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-primary-lightest-surface));color:rgb(var(--ax-sys-color-on-primary-lightest-surface));border-color:rgb(var(--ax-sys-color-border-primary-lightest-surface));border-width:1px;border-color:rgba(var(--ax-sys-color-primary-200),.5)}.axp-kpi-stat-card__icon-box--secondary{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1));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));border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-surface),var(--tw-border-opacity, 1))}.axp-kpi-stat-card__icon-box--success{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-700),var(--tw-text-opacity, 1));border-width:1px;border-color:rgba(var(--ax-sys-color-success-200),.8)}.axp-kpi-stat-card__icon-box--warning{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-700),var(--tw-text-opacity, 1));border-width:1px;border-color:rgba(var(--ax-sys-color-warning-200),.8)}.axp-kpi-stat-card__icon-box--info{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-700),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-primary-light-surface));color:rgb(var(--ax-sys-color-on-primary-light-surface));border-color:rgb(var(--ax-sys-color-border-primary-light-surface));border-width:1px;border-color:rgba(var(--ax-sys-color-primary-200),.7)}.axp-kpi-stat-card__icon-box--danger{--tw-bg-opacity: 1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(185 28 28 / var(--tw-text-opacity, 1));border-width:1px;border-color:#fecacacc}.axp-kpi-stat-card__value{margin:0;min-height:0px;flex:none;padding:0;text-align:start;font-weight:700;line-height:1.25;letter-spacing:-.025em;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1));--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);font-size:clamp(1.5rem,2.2cqw + 1rem,1.875rem)}.axp-kpi-stat-card__trend{margin:0;width:100%;flex:none;padding:0}.axp-kpi-stat-card__trend-line{margin:0;max-width:100%;padding:0;line-height:1.45}.axp-kpi-stat-card__trend-pill{box-sizing:border-box;display:inline-flex;align-items:center;vertical-align:middle;margin-inline-end:.375rem;margin-bottom:1px;min-height:1.4rem;border-radius:.375rem;padding:.25rem .625rem;font-size:.75rem;line-height:1rem;font-weight:700;line-height:1.25;border-width:1px;border-style:solid;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.axp-kpi-stat-card__trend-pill--success{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-800),var(--tw-text-opacity, 1));border-color:rgba(var(--ax-sys-color-success-200),.9)}.axp-kpi-stat-card__trend-pill--danger{--tw-bg-opacity: 1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(153 27 27 / var(--tw-text-opacity, 1));border-color:#fecacae6}.axp-kpi-stat-card__trend-pill--neutral{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-surface),var(--tw-text-opacity, 1));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));--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-surface),var(--tw-border-opacity, 1))}.axp-kpi-stat-card__trend-label{display:inline;font-size:.6875rem;font-weight:500;line-height:1.375;letter-spacing:.025em;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPKpiDetailsWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPKpiStatCardWidgetViewComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kpi-details\">\n  <div class=\"kpi-details__title\">{{ localized().title }}</div>\n  <div class=\"kpi-details__value\">\n    {{ localized().valuePrefix }}{{ formattedValue() }}{{ localized().valueSuffix }}\n  </div>\n  @if (localized().subtitle) {\n    <div class=\"kpi-details__subtitle\">{{ localized().subtitle }}</div>\n  }\n\n  <div class=\"kpi-details__items\">\n    @for (item of detailItems(); track trackByLabel($index, item)) {\n      <div class=\"kpi-details__item\">\n        <span class=\"kpi-details__item-label\">{{ item.label }}</span>\n        <span class=\"kpi-details__item-value\" [style.color]=\"item.color || 'var(--ax-text-color)'\">{{ item.value }}</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.kpi-details{display:flex;flex-direction:column;gap:.75rem;padding:.5rem}.kpi-details__title{font-size:1.25rem;color:var(--ax-text-muted)}.kpi-details__value{font-size:2.5rem;font-weight:700;color:var(--ax-text-color);line-height:1.1}.kpi-details__subtitle{font-size:1rem;color:var(--ax-primary-color, var(--ax-text-color))}.kpi-details__items{display:flex;flex-direction:column;gap:.375rem}.kpi-details__item{display:flex;justify-content:space-between;gap:1rem}.kpi-details__item-label{color:var(--ax-text-muted)}.kpi-details__item-value{font-weight:600}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-kpi-stat-card\">\n  <div class=\"axp-kpi-stat-card__content\">\n    <div class=\"axp-kpi-stat-card__head\">\n      <div class=\"axp-kpi-stat-card__title-row\">\n        <span class=\"axp-kpi-stat-card__title\">{{ localized().title }}</span>\n        @if (localized().titleBadgeText) {\n          <span [class]=\"titleBadgeClasses()\">\n            {{ localized().titleBadgeText }}\n          </span>\n        }\n      </div>\n      <div [class]=\"iconHostClasses()\" role=\"img\" [attr.aria-label]=\"localized().title\">\n        <i [class]=\"iconClass()\" aria-hidden=\"true\"></i>\n      </div>\n    </div>\n\n    <div class=\"axp-kpi-stat-card__value\">\n      {{ localized().valuePrefix }}{{ formattedValue() }}{{ localized().valueSuffix }}\n    </div>\n\n    @if (localized().trendValue || localized().trendLabel) {\n      <div class=\"axp-kpi-stat-card__trend\">\n        <p class=\"axp-kpi-stat-card__trend-line\">\n          @if (localized().trendValue) {\n            <span [class]=\"trendPillClasses()\">\n              {{ localized().trendValue }}\n            </span>\n          }\n          @if (localized().trendLabel) {\n            <span class=\"axp-kpi-stat-card__trend-label\">{{ localized().trendLabel }}</span>\n          }\n        </p>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;height:100%;min-height:0px;width:100%;-webkit-font-smoothing:antialiased;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}.axp-kpi-stat-card{container-type:inline-size;container-name:kpi-stat;display:flex;height:100%;min-height:0px;width:100%;flex-direction:column;align-items:stretch;justify-content:center;box-sizing:border-box;padding:.75rem .875rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-surface),var(--tw-border-opacity, 1));background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));border-radius:.5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.axp-kpi-stat-card__content{display:flex;width:100%;flex-direction:column;align-items:stretch;gap:.375rem}.axp-kpi-stat-card__head{display:flex;flex:none;align-items:flex-start;justify-content:space-between;column-gap:.875rem;row-gap:.375rem}.axp-kpi-stat-card__title-row{display:flex;min-width:0px;flex:1 1 0%;flex-wrap:wrap;align-items:center;column-gap:.375rem;row-gap:.25rem;padding-top:1px}.axp-kpi-stat-card__title{font-size:.75rem;line-height:1rem;font-weight:600;line-height:1.375;letter-spacing:.025em;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-surface),var(--tw-text-opacity, 1))}.axp-kpi-stat-card__title-badge{box-sizing:border-box;display:inline-flex;align-items:center;min-height:1.25rem;border-radius:.375rem;padding:.25rem .625rem;font-size:.65rem;font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:.1em;border-width:1px;border-style:solid}.axp-kpi-stat-card__title-badge--primary{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-200),var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-800),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-primary-lightest-surface));color:rgb(var(--ax-sys-color-on-primary-lightest-surface));border-color:rgb(var(--ax-sys-color-border-primary-lightest-surface))}.axp-kpi-stat-card__title-badge--secondary{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-surface),var(--tw-border-opacity, 1));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));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-surface),var(--tw-text-opacity, 1))}.axp-kpi-stat-card__title-badge--warning{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}.axp-kpi-stat-card__title-badge--info{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-200),var(--tw-border-opacity, 1));background-color:rgb(var(--ax-sys-color-primary-lightest-surface));color:rgb(var(--ax-sys-color-on-primary-lightest-surface));border-color:rgb(var(--ax-sys-color-border-primary-lightest-surface));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-800),var(--tw-text-opacity, 1))}.axp-kpi-stat-card__title-badge--neutral{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-surface),var(--tw-border-opacity, 1));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));--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-kpi-stat-card__icon-box{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:.5rem;font-size:1rem;line-height:1.5rem;line-height:1}.axp-kpi-stat-card__icon-box--primary{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-700),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-primary-lightest-surface));color:rgb(var(--ax-sys-color-on-primary-lightest-surface));border-color:rgb(var(--ax-sys-color-border-primary-lightest-surface));border-width:1px;border-color:rgba(var(--ax-sys-color-primary-200),.5)}.axp-kpi-stat-card__icon-box--secondary{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1));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));border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-surface),var(--tw-border-opacity, 1))}.axp-kpi-stat-card__icon-box--success{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-700),var(--tw-text-opacity, 1));border-width:1px;border-color:rgba(var(--ax-sys-color-success-200),.8)}.axp-kpi-stat-card__icon-box--warning{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-700),var(--tw-text-opacity, 1));border-width:1px;border-color:rgba(var(--ax-sys-color-warning-200),.8)}.axp-kpi-stat-card__icon-box--info{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-700),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-primary-light-surface));color:rgb(var(--ax-sys-color-on-primary-light-surface));border-color:rgb(var(--ax-sys-color-border-primary-light-surface));border-width:1px;border-color:rgba(var(--ax-sys-color-primary-200),.7)}.axp-kpi-stat-card__icon-box--danger{--tw-bg-opacity: 1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(185 28 28 / var(--tw-text-opacity, 1));border-width:1px;border-color:#fecacacc}.axp-kpi-stat-card__value{margin:0;min-height:0px;flex:none;padding:0;text-align:start;font-weight:700;line-height:1.25;letter-spacing:-.025em;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1));--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);font-size:clamp(1.5rem,2.2cqw + 1rem,1.875rem)}.axp-kpi-stat-card__trend{margin:0;width:100%;flex:none;padding:0}.axp-kpi-stat-card__trend-line{margin:0;max-width:100%;padding:0;line-height:1.45}.axp-kpi-stat-card__trend-pill{box-sizing:border-box;display:inline-flex;align-items:center;vertical-align:middle;margin-inline-end:.375rem;margin-bottom:1px;min-height:1.4rem;border-radius:.375rem;padding:.25rem .625rem;font-size:.75rem;line-height:1rem;font-weight:700;line-height:1.25;border-width:1px;border-style:solid;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.axp-kpi-stat-card__trend-pill--success{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-800),var(--tw-text-opacity, 1));border-color:rgba(var(--ax-sys-color-success-200),.9)}.axp-kpi-stat-card__trend-pill--danger{--tw-bg-opacity: 1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(153 27 27 / var(--tw-text-opacity, 1));border-color:#fecacae6}.axp-kpi-stat-card__trend-pill--neutral{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-surface),var(--tw-text-opacity, 1));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));--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-surface),var(--tw-border-opacity, 1))}.axp-kpi-stat-card__trend-label{display:inline;font-size:.6875rem;font-weight:500;line-height:1.375;letter-spacing:.025em;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}\n"] }]
         }] });
 
-var kpiDetailsWidget_component = /*#__PURE__*/Object.freeze({
+var kpiStatCardWidget_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AXPKpiDetailsWidgetViewComponent: AXPKpiDetailsWidgetViewComponent
+    AXPKpiStatCardWidgetViewComponent: AXPKpiStatCardWidgetViewComponent
 });
 
-const AXPKpiDetailsWidget = {
-    name: 'kpi-details',
-    title: createMultiLanguageString('KPI + Details', 'شاخص کلیدی + جزئیات'),
-    categories: [AXP_WIDGETS_CHART_CATEGORY],
-    groups: [AXPWidgetGroupEnum.DashboardWidget],
-    type: 'dashboard',
-    icon: 'fa-light fa-square-list',
-    properties: [
-        AXP_DATA_SOURCE_OPTIONS_PROPERTY,
-        cloneProperty(AXP_NAME_PROPERTY, { visible: false }),
-        cloneProperty(AXP_DATA_PATH_PROPERTY, { visible: false }),
-        {
-            name: 'title',
-            title: '@dashboard:widgets.kpi-details.title',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: '',
-                dataType: 'string',
-                interface: {
-                    name: 'title',
-                    path: 'options.title',
-                    type: AXPWidgetsCatalog.text,
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'value',
-            title: '@dashboard:widgets.kpi-details.value',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 0,
-                dataType: 'number',
-                interface: {
-                    name: 'value',
-                    path: 'options.value',
-                    type: AXPWidgetsCatalog.number,
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'subtitle',
-            title: '@dashboard:widgets.kpi-details.subtitle',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: '',
-                dataType: 'string',
-                interface: {
-                    name: 'subtitle',
-                    path: 'options.subtitle',
-                    type: AXPWidgetsCatalog.text,
-                },
-            },
-            visible: true,
-        },
-    ],
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return kpiDetailsWidget_component; }).then((c) => c.AXPKpiDetailsWidgetViewComponent),
-        },
-    },
-    meta: {
-        dimensions: {
-            lg: {
-                width: 4,
-                height: 3,
-                minWidth: 3,
-                minHeight: 2,
-            },
-            md: {
-                width: 4,
-                height: 3,
-                minWidth: 3,
-                minHeight: 2,
-            },
-            sm: {
-                height: 3,
-                minHeight: 2,
-            },
-        },
-    },
-};
-
 /**
  * Abstract Weather API Service
  * Base class that defines the interface and common functionality
@@ -3213,11 +4043,11 @@ class AXMAdvancedWeatherViewComponent extends AXPValueWidgetComponent {
             <!-- No data state (not loading, no error) -->
             <div class="axp-weather-no-data-state">
               <i class="fa-solid fa-cloud-sun"></i>
-              <p>{{ 'weather.no-data' | translate: { scope: 'dashboard' } | async }}</p>
+              <p>{{ 'weather.no-data.title' | translate: { scope: 'dashboard' } | async }}</p>
               <ax-button
                 [look]="'outline'"
                 [color]="'secondary'"
-                [text]="'weather.refresh-weather' | translate: { scope: 'dashboard' } | async"
+                [text]="'widgets.weather.refresh-weather' | translate: { scope: 'dashboard' } | async"
                 (onClick)="loadWeatherData()"
               ></ax-button>
             </div>
@@ -3354,11 +4184,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             <!-- No data state (not loading, no error) -->
             <div class="axp-weather-no-data-state">
               <i class="fa-solid fa-cloud-sun"></i>
-              <p>{{ 'weather.no-data' | translate: { scope: 'dashboard' } | async }}</p>
+              <p>{{ 'weather.no-data.title' | translate: { scope: 'dashboard' } | async }}</p>
               <ax-button
                 [look]="'outline'"
                 [color]="'secondary'"
-                [text]="'weather.refresh-weather' | translate: { scope: 'dashboard' } | async"
+                [text]="'widgets.weather.refresh-weather' | translate: { scope: 'dashboard' } | async"
                 (onClick)="loadWeatherData()"
               ></ax-button>
             </div>
@@ -3384,8 +4214,9 @@ var advancedWeather_component = /*#__PURE__*/Object.freeze({
  * Provides customization options for displaying weather data and forecast
  */
 const AXPAdvancedWeatherWidget = {
-    name: 'advanced-weather',
-    title: 'Advanced Weather Widget',
+    name: RootConfig.widgets.advancedWeather,
+    title: '@dashboard:widgets.advanced-weather.widget-title',
+    description: '@dashboard:widgets.advanced-weather.widget-description',
     categories: [AXP_WIDGETS_UTILITY_CATEGORY],
     groups: [AXPWidgetGroupEnum.DashboardWidget],
     type: 'dashboard',
@@ -3497,7 +4328,7 @@ const AXPAdvancedWeatherWidget = {
     },
 };
 
-class AXMMinimalWeatherViewComponent extends AXPValueWidgetComponent {
+class AXMMinimalWeatherViewComponent extends AXPDashboardWidgetComponent {
     constructor() {
         super();
         this.weatherService = inject(AXPWeatherApiAbstract);
@@ -3579,152 +4410,16 @@ class AXMMinimalWeatherViewComponent extends AXPValueWidgetComponent {
                 provide: AXPWeatherApiAbstract,
                 useClass: AXPWeatherApiService,
             },
-        ], usesInheritance: true, ngImport: i0, template: `
-    @if (weatherData() && !isLoading() && !hasError()) {
-      <div
-        class="ax-flex ax-size-full ax-flex-col ax-items-start ax-p-2 ax-justify-evenly weather-container ax-overflow-hidden"
-        [attr.aria-label]="'Current weather for ' + city()"
-      >
-        <div class="weather-top ax-flex ax-justify-around ax-items-center ax-w-full ax-pt-2 ax-gap-2 ax-flex-wrap">
-          <img
-            [src]="getConditionIcon()"
-            class="ax-size-28 ax-object-cover -ax-m-6"
-            [alt]="weatherData()?.current?.condition + ' weather icon'"
-            loading="lazy"
-          />
-          <div class="temperature ax-flex ax-justify-center ax-items-start">
-            <span class="ax-text-5xl" style="text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3)">
-              {{ getCurrentTemperature() | number: '1.0-0' }}
-            </span>
-            <span>{{ temperatureUnit() }}</span>
-          </div>
-        </div>
-        <div class="ax-text-start ax-ps-6">
-          <div class="ax-mt-1">
-            <span class="ax-font-bold ax-capitalize">{{ city() }}</span>
-          </div>
-          <div class="ax-pt-2 ax-flex ax-gap-4 ax-opacity-75">
-            <span aria-label="High temperature">
-              H: {{ getMaxTemp() | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup>
-            </span>
-            <span aria-label="Low temperature">
-              L: {{ getMinTemp() | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup>
-            </span>
-          </div>
-        </div>
-      </div>
-    } @else {
-      <div class="ax-flex ax-size-full ax-flex-col ax-p-2 ax-gap-2 ax-justify-center" [attr.aria-busy]="isLoading()">
-        @if (isLoading()) {
-          <!-- Weather icon and temperature skeleton -->
-          <div class="ax-flex ax-items-center ax-w-full ax-pt-2 ax-gap-8">
-            <ax-skeleton class="ax-w-16 ax-h-12 ax-rounded-full"></ax-skeleton>
-            <ax-skeleton class="ax-w-24 ax-h-8 ax-rounded -ax-ms-2"></ax-skeleton>
-          </div>
-
-          <!-- City and temperature range skeleton -->
-          <div class="ax-text-start ax-ps-6 ax-w-full">
-            <div class="ax-mt-1">
-              <ax-skeleton class="ax-w-24 ax-h-6 ax-rounded"></ax-skeleton>
-            </div>
-            <div class="ax-pt-2 ax-flex ax-gap-4">
-              <ax-skeleton class="ax-w-12 ax-h-4 ax-rounded"></ax-skeleton>
-              <ax-skeleton class="ax-w-12 ax-h-4 ax-rounded"></ax-skeleton>
-            </div>
-          </div>
-        } @else if (hasError()) {
-          <!-- No data state (not loading, no error) -->
-          <div class="ax-flex ax-flex-col ax-gap-2 ax-justify-center ax-items-center ax-h-full ax-p-8">
-            <i class="ax-text-3xl fa-solid fa-cloud-sun"></i>
-            <p class="ax-text-sm">{{ 'weather.no-data' | translate: { scope: 'dashboard' } | async }}</p>
-            <ax-button
-              [look]="'outline'"
-              [color]="'secondary'"
-              [text]="'weather.refresh-weather' | translate: { scope: 'dashboard' } | async"
-              (onClick)="loadWeatherData()"
-            ></ax-button>
-          </div>
-        }
-      </div>
-    }
-  `, isInline: true, styles: [":host{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (weatherData() && !isLoading() && !hasError()) {\n  <div\n    class=\"ax-flex ax-size-full ax-flex-col ax-items-start ax-p-2 ax-justify-evenly weather-container ax-overflow-hidden\"\n    [attr.aria-label]=\"'Current weather for ' + city()\"\n  >\n    <div class=\"weather-top ax-flex ax-justify-around ax-items-center ax-w-full ax-pt-2 ax-gap-2 ax-flex-wrap\">\n      <img\n        [src]=\"getConditionIcon()\"\n        class=\"ax-size-28 ax-object-cover -ax-m-6\"\n        [alt]=\"weatherData()?.current?.condition + ' weather icon'\"\n        loading=\"lazy\"\n      />\n      <div class=\"temperature ax-flex ax-justify-center ax-items-start\">\n        <span class=\"ax-text-5xl ax-minimal-weather-temp-shadow\">\n          {{ getCurrentTemperature() | number: '1.0-0' }}\n        </span>\n        <span>{{ temperatureUnit() }}</span>\n      </div>\n    </div>\n    <div class=\"ax-text-start ax-ps-6\">\n      <div class=\"ax-mt-1\">\n        <span class=\"ax-font-bold ax-capitalize\">{{ city() }}</span>\n      </div>\n      <div class=\"ax-pt-2 ax-flex ax-gap-4 ax-opacity-75\">\n        <span aria-label=\"High temperature\">\n          H: {{ getMaxTemp() | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup>\n        </span>\n        <span aria-label=\"Low temperature\">\n          L: {{ getMinTemp() | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup>\n        </span>\n      </div>\n    </div>\n  </div>\n} @else {\n  <div class=\"ax-flex ax-size-full ax-flex-col ax-p-2 ax-gap-2 ax-justify-center\" [attr.aria-busy]=\"isLoading()\">\n    @if (isLoading()) {\n      <div class=\"ax-flex ax-items-center ax-w-full ax-pt-2 ax-gap-8\">\n        <ax-skeleton class=\"ax-w-16 ax-h-12 ax-rounded-full\"></ax-skeleton>\n        <ax-skeleton class=\"ax-w-24 ax-h-8 ax-rounded -ax-ms-2\"></ax-skeleton>\n      </div>\n\n      <div class=\"ax-text-start ax-ps-6 ax-w-full\">\n        <div class=\"ax-mt-1\">\n          <ax-skeleton class=\"ax-w-24 ax-h-6 ax-rounded\"></ax-skeleton>\n        </div>\n        <div class=\"ax-pt-2 ax-flex ax-gap-4\">\n          <ax-skeleton class=\"ax-w-12 ax-h-4 ax-rounded\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-12 ax-h-4 ax-rounded\"></ax-skeleton>\n        </div>\n      </div>\n    } @else if (hasError()) {\n      <div class=\"ax-flex ax-flex-col ax-gap-2 ax-justify-center ax-items-center ax-h-full ax-p-8\">\n        <i class=\"ax-text-3xl fa-solid fa-cloud-sun\"></i>\n        <p class=\"ax-text-sm\">{{ 'weather.no-data' | translate: { scope: 'dashboard' } | async }}</p>\n        <ax-button\n          [look]=\"'outline'\"\n          [color]=\"'secondary'\"\n          [text]=\"'weather.refresh-weather' | translate: { scope: 'dashboard' } | async\"\n          (onClick)=\"loadWeatherData()\"\n        ></ax-button>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{width:100%;height:100%}.ax-minimal-weather-temp-shadow{text-shadow:1px 1px 3px rgba(0,0,0,.3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMMinimalWeatherViewComponent, decorators: [{
             type: Component,
-            args: [{ template: `
-    @if (weatherData() && !isLoading() && !hasError()) {
-      <div
-        class="ax-flex ax-size-full ax-flex-col ax-items-start ax-p-2 ax-justify-evenly weather-container ax-overflow-hidden"
-        [attr.aria-label]="'Current weather for ' + city()"
-      >
-        <div class="weather-top ax-flex ax-justify-around ax-items-center ax-w-full ax-pt-2 ax-gap-2 ax-flex-wrap">
-          <img
-            [src]="getConditionIcon()"
-            class="ax-size-28 ax-object-cover -ax-m-6"
-            [alt]="weatherData()?.current?.condition + ' weather icon'"
-            loading="lazy"
-          />
-          <div class="temperature ax-flex ax-justify-center ax-items-start">
-            <span class="ax-text-5xl" style="text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3)">
-              {{ getCurrentTemperature() | number: '1.0-0' }}
-            </span>
-            <span>{{ temperatureUnit() }}</span>
-          </div>
-        </div>
-        <div class="ax-text-start ax-ps-6">
-          <div class="ax-mt-1">
-            <span class="ax-font-bold ax-capitalize">{{ city() }}</span>
-          </div>
-          <div class="ax-pt-2 ax-flex ax-gap-4 ax-opacity-75">
-            <span aria-label="High temperature">
-              H: {{ getMaxTemp() | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup>
-            </span>
-            <span aria-label="Low temperature">
-              L: {{ getMinTemp() | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup>
-            </span>
-          </div>
-        </div>
-      </div>
-    } @else {
-      <div class="ax-flex ax-size-full ax-flex-col ax-p-2 ax-gap-2 ax-justify-center" [attr.aria-busy]="isLoading()">
-        @if (isLoading()) {
-          <!-- Weather icon and temperature skeleton -->
-          <div class="ax-flex ax-items-center ax-w-full ax-pt-2 ax-gap-8">
-            <ax-skeleton class="ax-w-16 ax-h-12 ax-rounded-full"></ax-skeleton>
-            <ax-skeleton class="ax-w-24 ax-h-8 ax-rounded -ax-ms-2"></ax-skeleton>
-          </div>
-
-          <!-- City and temperature range skeleton -->
-          <div class="ax-text-start ax-ps-6 ax-w-full">
-            <div class="ax-mt-1">
-              <ax-skeleton class="ax-w-24 ax-h-6 ax-rounded"></ax-skeleton>
-            </div>
-            <div class="ax-pt-2 ax-flex ax-gap-4">
-              <ax-skeleton class="ax-w-12 ax-h-4 ax-rounded"></ax-skeleton>
-              <ax-skeleton class="ax-w-12 ax-h-4 ax-rounded"></ax-skeleton>
-            </div>
-          </div>
-        } @else if (hasError()) {
-          <!-- No data state (not loading, no error) -->
-          <div class="ax-flex ax-flex-col ax-gap-2 ax-justify-center ax-items-center ax-h-full ax-p-8">
-            <i class="ax-text-3xl fa-solid fa-cloud-sun"></i>
-            <p class="ax-text-sm">{{ 'weather.no-data' | translate: { scope: 'dashboard' } | async }}</p>
-            <ax-button
-              [look]="'outline'"
-              [color]="'secondary'"
-              [text]="'weather.refresh-weather' | translate: { scope: 'dashboard' } | async"
-              (onClick)="loadWeatherData()"
-            ></ax-button>
-          </div>
-        }
-      </div>
-    }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXDecoratorModule, AXTooltipModule, AXSkeletonModule, AXTranslationModule, AXButtonModule], providers: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXDecoratorModule, AXTooltipModule, AXSkeletonModule, AXTranslationModule, AXButtonModule], providers: [
                         {
                             provide: AXPWeatherApiAbstract,
                             useClass: AXPWeatherApiService,
                         },
-                    ], styles: [":host{width:100%;height:100%}\n"] }]
+                    ], template: "@if (weatherData() && !isLoading() && !hasError()) {\n  <div\n    class=\"ax-flex ax-size-full ax-flex-col ax-items-start ax-p-2 ax-justify-evenly weather-container ax-overflow-hidden\"\n    [attr.aria-label]=\"'Current weather for ' + city()\"\n  >\n    <div class=\"weather-top ax-flex ax-justify-around ax-items-center ax-w-full ax-pt-2 ax-gap-2 ax-flex-wrap\">\n      <img\n        [src]=\"getConditionIcon()\"\n        class=\"ax-size-28 ax-object-cover -ax-m-6\"\n        [alt]=\"weatherData()?.current?.condition + ' weather icon'\"\n        loading=\"lazy\"\n      />\n      <div class=\"temperature ax-flex ax-justify-center ax-items-start\">\n        <span class=\"ax-text-5xl ax-minimal-weather-temp-shadow\">\n          {{ getCurrentTemperature() | number: '1.0-0' }}\n        </span>\n        <span>{{ temperatureUnit() }}</span>\n      </div>\n    </div>\n    <div class=\"ax-text-start ax-ps-6\">\n      <div class=\"ax-mt-1\">\n        <span class=\"ax-font-bold ax-capitalize\">{{ city() }}</span>\n      </div>\n      <div class=\"ax-pt-2 ax-flex ax-gap-4 ax-opacity-75\">\n        <span aria-label=\"High temperature\">\n          H: {{ getMaxTemp() | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup>\n        </span>\n        <span aria-label=\"Low temperature\">\n          L: {{ getMinTemp() | number: '1.0-0' }}<sup>{{ temperatureUnit() }}</sup>\n        </span>\n      </div>\n    </div>\n  </div>\n} @else {\n  <div class=\"ax-flex ax-size-full ax-flex-col ax-p-2 ax-gap-2 ax-justify-center\" [attr.aria-busy]=\"isLoading()\">\n    @if (isLoading()) {\n      <div class=\"ax-flex ax-items-center ax-w-full ax-pt-2 ax-gap-8\">\n        <ax-skeleton class=\"ax-w-16 ax-h-12 ax-rounded-full\"></ax-skeleton>\n        <ax-skeleton class=\"ax-w-24 ax-h-8 ax-rounded -ax-ms-2\"></ax-skeleton>\n      </div>\n\n      <div class=\"ax-text-start ax-ps-6 ax-w-full\">\n        <div class=\"ax-mt-1\">\n          <ax-skeleton class=\"ax-w-24 ax-h-6 ax-rounded\"></ax-skeleton>\n        </div>\n        <div class=\"ax-pt-2 ax-flex ax-gap-4\">\n          <ax-skeleton class=\"ax-w-12 ax-h-4 ax-rounded\"></ax-skeleton>\n          <ax-skeleton class=\"ax-w-12 ax-h-4 ax-rounded\"></ax-skeleton>\n        </div>\n      </div>\n    } @else if (hasError()) {\n      <div class=\"ax-flex ax-flex-col ax-gap-2 ax-justify-center ax-items-center ax-h-full ax-p-8\">\n        <i class=\"ax-text-3xl fa-solid fa-cloud-sun\"></i>\n        <p class=\"ax-text-sm\">{{ 'weather.no-data' | translate: { scope: 'dashboard' } | async }}</p>\n        <ax-button\n          [look]=\"'outline'\"\n          [color]=\"'secondary'\"\n          [text]=\"'weather.refresh-weather' | translate: { scope: 'dashboard' } | async\"\n          (onClick)=\"loadWeatherData()\"\n        ></ax-button>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{width:100%;height:100%}.ax-minimal-weather-temp-shadow{text-shadow:1px 1px 3px rgba(0,0,0,.3)}\n"] }]
         }], ctorParameters: () => [] });
 
 var minimalWeather_component = /*#__PURE__*/Object.freeze({
@@ -3737,8 +4432,9 @@ var minimalWeather_component = /*#__PURE__*/Object.freeze({
  * Provides customization options for displaying weather data and forecast
  */
 const AXPMinimalWeatherWidget = {
-    name: 'minimal-weather',
-    title: 'Minimal Weather Widget',
+    name: RootConfig.widgets.minimalWeather,
+    title: '@dashboard:widgets.minimal-weather.widget-title',
+    description: '@dashboard:widgets.minimal-weather.widget-description',
     categories: [AXP_WIDGETS_UTILITY_CATEGORY],
     groups: [AXPWidgetGroupEnum.DashboardWidget],
     type: 'dashboard',
@@ -3815,7 +4511,7 @@ const AXPMinimalWeatherWidget = {
  * Displays current weather conditions and optional forecast data
  * for a specified location with customizable display options.
  */
-class AXPWeatherWidgetViewComponent extends AXPValueWidgetComponent {
+class AXPWeatherWidgetViewComponent extends AXPDashboardWidgetComponent {
     /**
      * Component constructor
      * @param cdr ChangeDetectorRef for triggering view updates
@@ -3853,14 +4549,10 @@ class AXPWeatherWidgetViewComponent extends AXPValueWidgetComponent {
         this.refreshInterval = computed(() => this.options()['refreshInterval']?.id ?? 15, ...(ngDevMode ? [{ debugName: "refreshInterval" }] : /* istanbul ignore next */ []));
         // Reactivity effects
         this.optionsEffect = effect(() => {
-            const opts = this.options();
+            this.options();
             this.loadWeatherData();
             this.setupRefreshTimer();
         }, ...(ngDevMode ? [{ debugName: "optionsEffect" }] : /* istanbul ignore next */ []));
-        this.valueEffect = effect(() => {
-            this.city();
-            this.loadWeatherData();
-        }, ...(ngDevMode ? [{ debugName: "valueEffect" }] : /* istanbul ignore next */ []));
         this.displayedForecast = computed(() => {
             const weatherData = this.weatherData();
             if (!weatherData?.forecast)
@@ -4126,8 +4818,9 @@ var weatherWidget_component = /*#__PURE__*/Object.freeze({
  * Provides customization options for displaying weather data and forecast
  */
 const AXPWeatherWidget = {
-    name: 'weather',
-    title: 'Weather Widget',
+    name: RootConfig.widgets.weather,
+    title: '@dashboard:widgets.weather.widget-title',
+    description: '@dashboard:widgets.weather.widget-description',
     categories: [AXP_WIDGETS_UTILITY_CATEGORY],
     groups: [AXPWidgetGroupEnum.DashboardWidget],
     type: 'dashboard',
@@ -4478,92 +5171,14 @@ class AXMAnalogClockComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMAnalogClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMAnalogClockComponent, isStandalone: true, selector: "axm-analog-clock", inputs: { timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, showNumbers: { classPropertyName: "showNumbers", publicName: "showNumbers", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="axm-analog-clock-container">
-      <div class="axm-analog-clock-face" [class]="classes()">
-        <div class="axm-analog-clock-marks-container">
-          @for (line of hourLines; track $index) {
-            <div class="axm-analog-clock-hour-line" [style.transform]="line.transform">
-              <div class="axm-analog-clock-hour-line-inner"></div>
-            </div>
-          }
-          @for (dot of dots; track $index) {
-            <div class="axm-analog-clock-dot-line" [style.transform]="dot.transform">
-              <div class="axm-analog-clock-dot-line-inner"></div>
-            </div>
-          }
-        </div>
-
-        @if (showNumbers()) {
-          <div class="axm-analog-clock-numbers-container">
-            @for (num of hourNumbers; track num.value) {
-              <div class="axm-analog-clock-hour-number" [style.top]="num.top" [style.left]="num.left">
-                {{ num.value }}
-              </div>
-            }
-          </div>
-        }
-        <div class="axm-analog-clock-hands">
-          <div class="axm-analog-clock-hand axm-analog-clock-hour-hand" [style.transform]="hourHandTransform()"></div>
-          <div
-            class="axm-analog-clock-hand axm-analog-clock-minute-hand"
-            [style.transform]="minuteHandTransform()"
-          ></div>
-          <div
-            class="axm-analog-clock-hand axm-analog-clock-second-hand"
-            [style.transform]="secondHandTransform()"
-          ></div>
-          <div class="axm-analog-clock-center-point"></div>
-        </div>
-      </div>
-    </div>
-  `, isInline: true, styles: [":host{display:grid;width:100%;height:100%;place-items:center}.axm-analog-clock-container{position:relative;max-height:100%;width:100%;aspect-ratio:1;container-type:inline-size}.axm-analog-clock-face{position:relative;height:100%;width:100%;border-radius:9999px}.axm-analog-clock-marks-container,.axm-analog-clock-numbers-container,.axm-analog-clock-hands{position:absolute;inset:0}.axm-analog-clock-hour-line,.axm-analog-clock-dot-line{position:absolute;bottom:50%;left:50%;height:50%;transform-origin:bottom}.axm-analog-clock-hour-line,.axm-analog-clock-dot-line{width:1.8cqw}.axm-analog-clock-hour-line-inner{position:absolute;top:6cqw;left:50%;height:5.5cqw;width:100%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-on-darker-surface),var(--tw-bg-opacity, 1))}.axm-analog-clock-dot-line-inner{position:absolute;top:6cqw;left:50%;height:2cqw;width:1.2cqw;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-on-dark-surface),var(--tw-bg-opacity, 1))}.axm-analog-clock-hour-number{position:absolute;--tw-translate-x: -50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));font-size:10cqw;font-weight:500;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-surface),var(--tw-text-opacity, 1))}.axm-analog-clock-hand{position:absolute;bottom:50%;left:50%;transform-origin:bottom;border-top-left-radius:.5rem;border-top-right-radius:.5rem}.axm-analog-clock-hand:after{content:\"\";position:absolute;left:0;width:100%}.axm-analog-clock-hour-hand{z-index:2;height:25%;width:2.7cqw;--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.axm-analog-clock-hour-hand:after{bottom:-20%;height:20%;--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.axm-analog-clock-minute-hand{z-index:3;height:35%;width:2.1cqw;--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.axm-analog-clock-minute-hand:after{bottom:-20%;height:20%;--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.axm-analog-clock-second-hand{z-index:4;height:42%;width:1.5cqw;--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.axm-analog-clock-second-hand:after{bottom:-20%;height:20%;--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.axm-analog-clock-center-point{position:absolute;top:50%;left:50%;z-index:5;height:9cqw;width:9cqw;--tw-translate-x: -50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;border-width:1.8cqw;--tw-border-opacity: 1;border-color:rgb(0 0 0 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMAnalogClockComponent, isStandalone: true, selector: "axm-analog-clock", inputs: { timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, showNumbers: { classPropertyName: "showNumbers", publicName: "showNumbers", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"axm-analog-clock-container\">\n  <div class=\"axm-analog-clock-face\" [class]=\"classes()\">\n    <div class=\"axm-analog-clock-marks-container\">\n      @for (line of hourLines; track $index) {\n        <div class=\"axm-analog-clock-hour-line\" [style.transform]=\"line.transform\">\n          <div class=\"axm-analog-clock-hour-line-inner\"></div>\n        </div>\n      }\n      @for (dot of dots; track $index) {\n        <div class=\"axm-analog-clock-dot-line\" [style.transform]=\"dot.transform\">\n          <div class=\"axm-analog-clock-dot-line-inner\"></div>\n        </div>\n      }\n    </div>\n\n    @if (showNumbers()) {\n      <div class=\"axm-analog-clock-numbers-container\">\n        @for (num of hourNumbers; track num.value) {\n          <div class=\"axm-analog-clock-hour-number\" [style.top]=\"num.top\" [style.left]=\"num.left\">\n            {{ num.value }}\n          </div>\n        }\n      </div>\n    }\n    <div class=\"axm-analog-clock-hands\">\n      <div class=\"axm-analog-clock-hand axm-analog-clock-hour-hand\" [style.transform]=\"hourHandTransform()\"></div>\n      <div\n        class=\"axm-analog-clock-hand axm-analog-clock-minute-hand\"\n        [style.transform]=\"minuteHandTransform()\"\n      ></div>\n      <div\n        class=\"axm-analog-clock-hand axm-analog-clock-second-hand\"\n        [style.transform]=\"secondHandTransform()\"\n      ></div>\n      <div class=\"axm-analog-clock-center-point\"></div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:grid;width:100%;height:100%;place-items:center}.axm-analog-clock-container{position:relative;max-height:100%;width:100%;aspect-ratio:1;container-type:inline-size}.axm-analog-clock-face{position:relative;height:100%;width:100%;border-radius:9999px}.axm-analog-clock-marks-container,.axm-analog-clock-numbers-container,.axm-analog-clock-hands{position:absolute;inset:0}.axm-analog-clock-hour-line,.axm-analog-clock-dot-line{position:absolute;bottom:50%;left:50%;height:50%;transform-origin:bottom}.axm-analog-clock-hour-line,.axm-analog-clock-dot-line{width:1.8cqw}.axm-analog-clock-hour-line-inner{position:absolute;top:6cqw;left:50%;height:5.5cqw;width:100%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-on-darker-surface),var(--tw-bg-opacity, 1))}.axm-analog-clock-dot-line-inner{position:absolute;top:6cqw;left:50%;height:2cqw;width:1.2cqw;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-on-dark-surface),var(--tw-bg-opacity, 1))}.axm-analog-clock-hour-number{position:absolute;--tw-translate-x: -50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));font-size:10cqw;font-weight:500;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-surface),var(--tw-text-opacity, 1))}.axm-analog-clock-hand{position:absolute;bottom:50%;left:50%;transform-origin:bottom;border-top-left-radius:.5rem;border-top-right-radius:.5rem}.axm-analog-clock-hand:after{content:\"\";position:absolute;left:0;width:100%}.axm-analog-clock-hour-hand{z-index:2;height:25%;width:2.7cqw;--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.axm-analog-clock-hour-hand:after{bottom:-20%;height:20%;--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.axm-analog-clock-minute-hand{z-index:3;height:35%;width:2.1cqw;--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.axm-analog-clock-minute-hand:after{bottom:-20%;height:20%;--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.axm-analog-clock-second-hand{z-index:4;height:42%;width:1.5cqw;--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.axm-analog-clock-second-hand:after{bottom:-20%;height:20%;--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.axm-analog-clock-center-point{position:absolute;top:50%;left:50%;z-index:5;height:9cqw;width:9cqw;--tw-translate-x: -50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;border-width:1.8cqw;--tw-border-opacity: 1;border-color:rgb(0 0 0 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMAnalogClockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axm-analog-clock', standalone: true, imports: [], template: `
-    <div class="axm-analog-clock-container">
-      <div class="axm-analog-clock-face" [class]="classes()">
-        <div class="axm-analog-clock-marks-container">
-          @for (line of hourLines; track $index) {
-            <div class="axm-analog-clock-hour-line" [style.transform]="line.transform">
-              <div class="axm-analog-clock-hour-line-inner"></div>
-            </div>
-          }
-          @for (dot of dots; track $index) {
-            <div class="axm-analog-clock-dot-line" [style.transform]="dot.transform">
-              <div class="axm-analog-clock-dot-line-inner"></div>
-            </div>
-          }
-        </div>
-
-        @if (showNumbers()) {
-          <div class="axm-analog-clock-numbers-container">
-            @for (num of hourNumbers; track num.value) {
-              <div class="axm-analog-clock-hour-number" [style.top]="num.top" [style.left]="num.left">
-                {{ num.value }}
-              </div>
-            }
-          </div>
-        }
-        <div class="axm-analog-clock-hands">
-          <div class="axm-analog-clock-hand axm-analog-clock-hour-hand" [style.transform]="hourHandTransform()"></div>
-          <div
-            class="axm-analog-clock-hand axm-analog-clock-minute-hand"
-            [style.transform]="minuteHandTransform()"
-          ></div>
-          <div
-            class="axm-analog-clock-hand axm-analog-clock-second-hand"
-            [style.transform]="secondHandTransform()"
-          ></div>
-          <div class="axm-analog-clock-center-point"></div>
-        </div>
-      </div>
-    </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:grid;width:100%;height:100%;place-items:center}.axm-analog-clock-container{position:relative;max-height:100%;width:100%;aspect-ratio:1;container-type:inline-size}.axm-analog-clock-face{position:relative;height:100%;width:100%;border-radius:9999px}.axm-analog-clock-marks-container,.axm-analog-clock-numbers-container,.axm-analog-clock-hands{position:absolute;inset:0}.axm-analog-clock-hour-line,.axm-analog-clock-dot-line{position:absolute;bottom:50%;left:50%;height:50%;transform-origin:bottom}.axm-analog-clock-hour-line,.axm-analog-clock-dot-line{width:1.8cqw}.axm-analog-clock-hour-line-inner{position:absolute;top:6cqw;left:50%;height:5.5cqw;width:100%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-on-darker-surface),var(--tw-bg-opacity, 1))}.axm-analog-clock-dot-line-inner{position:absolute;top:6cqw;left:50%;height:2cqw;width:1.2cqw;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-on-dark-surface),var(--tw-bg-opacity, 1))}.axm-analog-clock-hour-number{position:absolute;--tw-translate-x: -50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));font-size:10cqw;font-weight:500;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-surface),var(--tw-text-opacity, 1))}.axm-analog-clock-hand{position:absolute;bottom:50%;left:50%;transform-origin:bottom;border-top-left-radius:.5rem;border-top-right-radius:.5rem}.axm-analog-clock-hand:after{content:\"\";position:absolute;left:0;width:100%}.axm-analog-clock-hour-hand{z-index:2;height:25%;width:2.7cqw;--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.axm-analog-clock-hour-hand:after{bottom:-20%;height:20%;--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.axm-analog-clock-minute-hand{z-index:3;height:35%;width:2.1cqw;--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.axm-analog-clock-minute-hand:after{bottom:-20%;height:20%;--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.axm-analog-clock-second-hand{z-index:4;height:42%;width:1.5cqw;--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.axm-analog-clock-second-hand:after{bottom:-20%;height:20%;--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.axm-analog-clock-center-point{position:absolute;top:50%;left:50%;z-index:5;height:9cqw;width:9cqw;--tw-translate-x: -50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;border-width:1.8cqw;--tw-border-opacity: 1;border-color:rgb(0 0 0 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}\n"] }]
+            args: [{ selector: 'axm-analog-clock', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axm-analog-clock-container\">\n  <div class=\"axm-analog-clock-face\" [class]=\"classes()\">\n    <div class=\"axm-analog-clock-marks-container\">\n      @for (line of hourLines; track $index) {\n        <div class=\"axm-analog-clock-hour-line\" [style.transform]=\"line.transform\">\n          <div class=\"axm-analog-clock-hour-line-inner\"></div>\n        </div>\n      }\n      @for (dot of dots; track $index) {\n        <div class=\"axm-analog-clock-dot-line\" [style.transform]=\"dot.transform\">\n          <div class=\"axm-analog-clock-dot-line-inner\"></div>\n        </div>\n      }\n    </div>\n\n    @if (showNumbers()) {\n      <div class=\"axm-analog-clock-numbers-container\">\n        @for (num of hourNumbers; track num.value) {\n          <div class=\"axm-analog-clock-hour-number\" [style.top]=\"num.top\" [style.left]=\"num.left\">\n            {{ num.value }}\n          </div>\n        }\n      </div>\n    }\n    <div class=\"axm-analog-clock-hands\">\n      <div class=\"axm-analog-clock-hand axm-analog-clock-hour-hand\" [style.transform]=\"hourHandTransform()\"></div>\n      <div\n        class=\"axm-analog-clock-hand axm-analog-clock-minute-hand\"\n        [style.transform]=\"minuteHandTransform()\"\n      ></div>\n      <div\n        class=\"axm-analog-clock-hand axm-analog-clock-second-hand\"\n        [style.transform]=\"secondHandTransform()\"\n      ></div>\n      <div class=\"axm-analog-clock-center-point\"></div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:grid;width:100%;height:100%;place-items:center}.axm-analog-clock-container{position:relative;max-height:100%;width:100%;aspect-ratio:1;container-type:inline-size}.axm-analog-clock-face{position:relative;height:100%;width:100%;border-radius:9999px}.axm-analog-clock-marks-container,.axm-analog-clock-numbers-container,.axm-analog-clock-hands{position:absolute;inset:0}.axm-analog-clock-hour-line,.axm-analog-clock-dot-line{position:absolute;bottom:50%;left:50%;height:50%;transform-origin:bottom}.axm-analog-clock-hour-line,.axm-analog-clock-dot-line{width:1.8cqw}.axm-analog-clock-hour-line-inner{position:absolute;top:6cqw;left:50%;height:5.5cqw;width:100%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-on-darker-surface),var(--tw-bg-opacity, 1))}.axm-analog-clock-dot-line-inner{position:absolute;top:6cqw;left:50%;height:2cqw;width:1.2cqw;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-on-dark-surface),var(--tw-bg-opacity, 1))}.axm-analog-clock-hour-number{position:absolute;--tw-translate-x: -50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));font-size:10cqw;font-weight:500;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-surface),var(--tw-text-opacity, 1))}.axm-analog-clock-hand{position:absolute;bottom:50%;left:50%;transform-origin:bottom;border-top-left-radius:.5rem;border-top-right-radius:.5rem}.axm-analog-clock-hand:after{content:\"\";position:absolute;left:0;width:100%}.axm-analog-clock-hour-hand{z-index:2;height:25%;width:2.7cqw;--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.axm-analog-clock-hour-hand:after{bottom:-20%;height:20%;--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.axm-analog-clock-minute-hand{z-index:3;height:35%;width:2.1cqw;--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.axm-analog-clock-minute-hand:after{bottom:-20%;height:20%;--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.axm-analog-clock-second-hand{z-index:4;height:42%;width:1.5cqw;--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.axm-analog-clock-second-hand:after{bottom:-20%;height:20%;--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.axm-analog-clock-center-point{position:absolute;top:50%;left:50%;z-index:5;height:9cqw;width:9cqw;--tw-translate-x: -50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;border-width:1.8cqw;--tw-border-opacity: 1;border-color:rgb(0 0 0 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { timezone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timezone", required: false }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }], showNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNumbers", required: false }] }] } });
 
-class AXMClockWidgetViewComponent extends AXPLayoutBaseWidgetComponent {
+class AXMClockWidgetViewComponent extends AXPDashboardWidgetComponent {
     constructor() {
         super();
         this.regionalService = inject(AXMLocaleManagementService);
@@ -4648,177 +5263,11 @@ class AXMClockWidgetViewComponent extends AXPLayoutBaseWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMClockWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMClockWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-p-2 ax-h-full ax-overflow-hidden" [class.ax-bg-light]="others().length > 0">
-      <!-- Main Clock Section -->
-      <div class="ax-flex ax-flex-col ax-items-center ax-justify-around ax-gap-2 ax-flex-1 ax-h-full">
-        <div
-          class="ax-flex ax-items-center ax-justify-around ax-gap-2 ax-w-full ax-grow"
-          [class.ax-flex-row]="isHorizontal()"
-          [class.ax-rounded-full]="isHorizontal() && others().length > 0"
-          [class.ax-flex-col]="!isHorizontal()"
-          [class.ax-rounded-xl]="!isHorizontal() && others().length > 0"
-          [class.ax-border]="others().length > 0"
-          [class.ax-border-gray-100]="others().length > 0"
-          [class.ax-shadow-lg]="others().length > 0"
-          [class.ax-bg-lighter]="others().length > 0"
-          [class.ax-p-2]="others().length > 0"
-        >
-          <div
-            class="ax-aspect-square ax-flex ax-items-center ax-justify-center ax-min-w-[100px] ax-min-h-[100px]"
-            [style.height]="isHorizontal() ? '65%' : 'auto'"
-            [style.width]="isHorizontal() ? 'auto' : '65%'"
-          >
-            <axm-analog-clock
-              [timezone]="timezone()?.iana"
-              [classes]="others().length > 0 ? 'ax-bg-lightest' : undefined"
-            ></axm-analog-clock>
-          </div>
-          @if (timezone()?.abbr) {
-            <div class="ax-flex ax-flex-col ax-items-center ax-justify-center ax-text-center ax-min-w-[50px] ax-gap-2">
-              @if (timezone()?.code) {
-                <span
-                  class="ax-font-medium ax-opacity-75 ax-uppercase ax-block ax-2line"
-                  [style.fontSize.px]="codeFontSize()"
-                  >{{ timezone()?.code }}</span
-                >
-              }
-              <span class="ax-font-bold ax-mt-0" [style.fontSize.px]="abbrFontSize()">{{ timezone()?.abbr }}</span>
-            </div>
-          }
-        </div>
-
-        <!-- Additional Clocks Section -->
-        @if (others().length > 0) {
-          <div class="ax-w-full ax-max-w-4xl ax-mx-auto">
-            <div
-              class="ax-flex ax-justify-around ax-items-center"
-              [class.ax-flex-wrap]="hasEnoughSpaceForHorizontal()"
-              [class.ax-gap-3]="true"
-              [class.ax-overflow-auto]="true"
-            >
-              @for (clock of others(); track clock.code) {
-                <div class="ax-flex ax-flex-col ax-items-center ax-justify-center ax-p-2 ax-flex-wrap ax-gap-2">
-                  <div
-                    [axTooltip]="clock.code"
-                    [axTooltipPlacement]="'top'"
-                    class="ax-aspect-square ax-flex ax-items-center ax-justify-center ax-rounded-lg ax-size-16"
-                  >
-                    <axm-analog-clock
-                      [timezone]="clock.iana"
-                      [showNumbers]="false"
-                      [classes]="'ax-bg-lightest'"
-                    ></axm-analog-clock>
-                  </div>
-                  @if (clock.abbr) {
-                    <div
-                      [class.ax-text-center]="hasEnoughSpaceForHorizontal()"
-                      [class.ax-pt-1]="hasEnoughSpaceForHorizontal()"
-                      [class.ax-pl-1]="!hasEnoughSpaceForHorizontal()"
-                    >
-                      <span class="ax-text-xs ax-font-medium ax-truncate ax-block">{{ clock.abbr }}</span>
-                      @if (clock.code) {
-                        <span class="ax-text-xs ax-font-light ax-opacity-75 ax-truncate ax-block">{{
-                          clock.code
-                        }}</span>
-                      }
-                    </div>
-                  }
-                </div>
-              }
-            </div>
-          </div>
-        }
-      </div>
-    </div>
-  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}.ax-2line{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:1.1;max-height:2.2em}.ax-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: AXMAnalogClockComponent, selector: "axm-analog-clock", inputs: ["timezone", "classes", "showNumbers"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i1$2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMClockWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-p-2 ax-h-full ax-overflow-hidden\" [class.ax-bg-light]=\"others().length > 0\">\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-around ax-gap-2 ax-flex-1 ax-h-full\">\n    <div\n      class=\"ax-flex ax-items-center ax-justify-around ax-gap-2 ax-w-full ax-grow\"\n      [class.ax-flex-row]=\"isHorizontal()\"\n      [class.ax-rounded-full]=\"isHorizontal() && others().length > 0\"\n      [class.ax-flex-col]=\"!isHorizontal()\"\n      [class.ax-rounded-xl]=\"!isHorizontal() && others().length > 0\"\n      [class.ax-border]=\"others().length > 0\"\n      [class.ax-border-gray-100]=\"others().length > 0\"\n      [class.ax-shadow-lg]=\"others().length > 0\"\n      [class.ax-bg-lighter]=\"others().length > 0\"\n      [class.ax-p-2]=\"others().length > 0\"\n    >\n      <div\n        class=\"ax-aspect-square ax-flex ax-items-center ax-justify-center ax-min-w-[100px] ax-min-h-[100px]\"\n        [style.height]=\"isHorizontal() ? '65%' : 'auto'\"\n        [style.width]=\"isHorizontal() ? 'auto' : '65%'\"\n      >\n        <axm-analog-clock\n          [timezone]=\"timezone()?.iana\"\n          [classes]=\"others().length > 0 ? 'ax-bg-lightest' : undefined\"\n        ></axm-analog-clock>\n      </div>\n      @if (timezone()?.abbr) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-text-center ax-min-w-[50px] ax-gap-2\">\n          @if (timezone()?.code) {\n            <span\n              class=\"ax-font-medium ax-opacity-75 ax-uppercase ax-block ax-2line\"\n              [style.fontSize.px]=\"codeFontSize()\"\n              >{{ timezone()?.code }}</span\n            >\n          }\n          <span class=\"ax-font-bold ax-mt-0\" [style.fontSize.px]=\"abbrFontSize()\">{{ timezone()?.abbr }}</span>\n        </div>\n      }\n    </div>\n\n    @if (others().length > 0) {\n      <div class=\"ax-w-full ax-max-w-4xl ax-mx-auto\">\n        <div\n          class=\"ax-flex ax-justify-around ax-items-center\"\n          [class.ax-flex-wrap]=\"hasEnoughSpaceForHorizontal()\"\n          [class.ax-gap-3]=\"true\"\n          [class.ax-overflow-auto]=\"true\"\n        >\n          @for (clock of others(); track clock.code) {\n            <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-p-2 ax-flex-wrap ax-gap-2\">\n              <div\n                [axTooltip]=\"clock.code\"\n                [axTooltipPlacement]=\"'top'\"\n                class=\"ax-aspect-square ax-flex ax-items-center ax-justify-center ax-rounded-lg ax-size-16\"\n              >\n                <axm-analog-clock\n                  [timezone]=\"clock.iana\"\n                  [showNumbers]=\"false\"\n                  [classes]=\"'ax-bg-lightest'\"\n                ></axm-analog-clock>\n              </div>\n              @if (clock.abbr) {\n                <div\n                  [class.ax-text-center]=\"hasEnoughSpaceForHorizontal()\"\n                  [class.ax-pt-1]=\"hasEnoughSpaceForHorizontal()\"\n                  [class.ax-pl-1]=\"!hasEnoughSpaceForHorizontal()\"\n                >\n                  <span class=\"ax-text-xs ax-font-medium ax-truncate ax-block\">{{ clock.abbr }}</span>\n                  @if (clock.code) {\n                    <span class=\"ax-text-xs ax-font-light ax-opacity-75 ax-truncate ax-block\">{{ clock.code }}</span>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.ax-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-2line{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:1.1;max-height:2.2em}\n"], dependencies: [{ kind: "component", type: AXMAnalogClockComponent, selector: "axm-analog-clock", inputs: ["timezone", "classes", "showNumbers"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i1$2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMClockWidgetViewComponent, decorators: [{
             type: Component,
-            args: [{ template: `
-    <div class="ax-p-2 ax-h-full ax-overflow-hidden" [class.ax-bg-light]="others().length > 0">
-      <!-- Main Clock Section -->
-      <div class="ax-flex ax-flex-col ax-items-center ax-justify-around ax-gap-2 ax-flex-1 ax-h-full">
-        <div
-          class="ax-flex ax-items-center ax-justify-around ax-gap-2 ax-w-full ax-grow"
-          [class.ax-flex-row]="isHorizontal()"
-          [class.ax-rounded-full]="isHorizontal() && others().length > 0"
-          [class.ax-flex-col]="!isHorizontal()"
-          [class.ax-rounded-xl]="!isHorizontal() && others().length > 0"
-          [class.ax-border]="others().length > 0"
-          [class.ax-border-gray-100]="others().length > 0"
-          [class.ax-shadow-lg]="others().length > 0"
-          [class.ax-bg-lighter]="others().length > 0"
-          [class.ax-p-2]="others().length > 0"
-        >
-          <div
-            class="ax-aspect-square ax-flex ax-items-center ax-justify-center ax-min-w-[100px] ax-min-h-[100px]"
-            [style.height]="isHorizontal() ? '65%' : 'auto'"
-            [style.width]="isHorizontal() ? 'auto' : '65%'"
-          >
-            <axm-analog-clock
-              [timezone]="timezone()?.iana"
-              [classes]="others().length > 0 ? 'ax-bg-lightest' : undefined"
-            ></axm-analog-clock>
-          </div>
-          @if (timezone()?.abbr) {
-            <div class="ax-flex ax-flex-col ax-items-center ax-justify-center ax-text-center ax-min-w-[50px] ax-gap-2">
-              @if (timezone()?.code) {
-                <span
-                  class="ax-font-medium ax-opacity-75 ax-uppercase ax-block ax-2line"
-                  [style.fontSize.px]="codeFontSize()"
-                  >{{ timezone()?.code }}</span
-                >
-              }
-              <span class="ax-font-bold ax-mt-0" [style.fontSize.px]="abbrFontSize()">{{ timezone()?.abbr }}</span>
-            </div>
-          }
-        </div>
-
-        <!-- Additional Clocks Section -->
-        @if (others().length > 0) {
-          <div class="ax-w-full ax-max-w-4xl ax-mx-auto">
-            <div
-              class="ax-flex ax-justify-around ax-items-center"
-              [class.ax-flex-wrap]="hasEnoughSpaceForHorizontal()"
-              [class.ax-gap-3]="true"
-              [class.ax-overflow-auto]="true"
-            >
-              @for (clock of others(); track clock.code) {
-                <div class="ax-flex ax-flex-col ax-items-center ax-justify-center ax-p-2 ax-flex-wrap ax-gap-2">
-                  <div
-                    [axTooltip]="clock.code"
-                    [axTooltipPlacement]="'top'"
-                    class="ax-aspect-square ax-flex ax-items-center ax-justify-center ax-rounded-lg ax-size-16"
-                  >
-                    <axm-analog-clock
-                      [timezone]="clock.iana"
-                      [showNumbers]="false"
-                      [classes]="'ax-bg-lightest'"
-                    ></axm-analog-clock>
-                  </div>
-                  @if (clock.abbr) {
-                    <div
-                      [class.ax-text-center]="hasEnoughSpaceForHorizontal()"
-                      [class.ax-pt-1]="hasEnoughSpaceForHorizontal()"
-                      [class.ax-pl-1]="!hasEnoughSpaceForHorizontal()"
-                    >
-                      <span class="ax-text-xs ax-font-medium ax-truncate ax-block">{{ clock.abbr }}</span>
-                      @if (clock.code) {
-                        <span class="ax-text-xs ax-font-light ax-opacity-75 ax-truncate ax-block">{{
-                          clock.code
-                        }}</span>
-                      }
-                    </div>
-                  }
-                </div>
-              }
-            </div>
-          </div>
-        }
-      </div>
-    </div>
-  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXMAnalogClockComponent, AXTooltipModule], styles: [":host{display:block;width:100%;height:100%}.ax-2line{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:1.1;max-height:2.2em}.ax-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXMAnalogClockComponent, AXTooltipModule], template: "<div class=\"ax-p-2 ax-h-full ax-overflow-hidden\" [class.ax-bg-light]=\"others().length > 0\">\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-around ax-gap-2 ax-flex-1 ax-h-full\">\n    <div\n      class=\"ax-flex ax-items-center ax-justify-around ax-gap-2 ax-w-full ax-grow\"\n      [class.ax-flex-row]=\"isHorizontal()\"\n      [class.ax-rounded-full]=\"isHorizontal() && others().length > 0\"\n      [class.ax-flex-col]=\"!isHorizontal()\"\n      [class.ax-rounded-xl]=\"!isHorizontal() && others().length > 0\"\n      [class.ax-border]=\"others().length > 0\"\n      [class.ax-border-gray-100]=\"others().length > 0\"\n      [class.ax-shadow-lg]=\"others().length > 0\"\n      [class.ax-bg-lighter]=\"others().length > 0\"\n      [class.ax-p-2]=\"others().length > 0\"\n    >\n      <div\n        class=\"ax-aspect-square ax-flex ax-items-center ax-justify-center ax-min-w-[100px] ax-min-h-[100px]\"\n        [style.height]=\"isHorizontal() ? '65%' : 'auto'\"\n        [style.width]=\"isHorizontal() ? 'auto' : '65%'\"\n      >\n        <axm-analog-clock\n          [timezone]=\"timezone()?.iana\"\n          [classes]=\"others().length > 0 ? 'ax-bg-lightest' : undefined\"\n        ></axm-analog-clock>\n      </div>\n      @if (timezone()?.abbr) {\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-text-center ax-min-w-[50px] ax-gap-2\">\n          @if (timezone()?.code) {\n            <span\n              class=\"ax-font-medium ax-opacity-75 ax-uppercase ax-block ax-2line\"\n              [style.fontSize.px]=\"codeFontSize()\"\n              >{{ timezone()?.code }}</span\n            >\n          }\n          <span class=\"ax-font-bold ax-mt-0\" [style.fontSize.px]=\"abbrFontSize()\">{{ timezone()?.abbr }}</span>\n        </div>\n      }\n    </div>\n\n    @if (others().length > 0) {\n      <div class=\"ax-w-full ax-max-w-4xl ax-mx-auto\">\n        <div\n          class=\"ax-flex ax-justify-around ax-items-center\"\n          [class.ax-flex-wrap]=\"hasEnoughSpaceForHorizontal()\"\n          [class.ax-gap-3]=\"true\"\n          [class.ax-overflow-auto]=\"true\"\n        >\n          @for (clock of others(); track clock.code) {\n            <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-p-2 ax-flex-wrap ax-gap-2\">\n              <div\n                [axTooltip]=\"clock.code\"\n                [axTooltipPlacement]=\"'top'\"\n                class=\"ax-aspect-square ax-flex ax-items-center ax-justify-center ax-rounded-lg ax-size-16\"\n              >\n                <axm-analog-clock\n                  [timezone]=\"clock.iana\"\n                  [showNumbers]=\"false\"\n                  [classes]=\"'ax-bg-lightest'\"\n                ></axm-analog-clock>\n              </div>\n              @if (clock.abbr) {\n                <div\n                  [class.ax-text-center]=\"hasEnoughSpaceForHorizontal()\"\n                  [class.ax-pt-1]=\"hasEnoughSpaceForHorizontal()\"\n                  [class.ax-pl-1]=\"!hasEnoughSpaceForHorizontal()\"\n                >\n                  <span class=\"ax-text-xs ax-font-medium ax-truncate ax-block\">{{ clock.abbr }}</span>\n                  @if (clock.code) {\n                    <span class=\"ax-text-xs ax-font-light ax-opacity-75 ax-truncate ax-block\">{{ clock.code }}</span>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.ax-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-2line{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:1.1;max-height:2.2em}\n"] }]
         }], ctorParameters: () => [] });
 
 var analogClockWidgetView_component = /*#__PURE__*/Object.freeze({
@@ -4827,9 +5276,9 @@ var analogClockWidgetView_component = /*#__PURE__*/Object.freeze({
 });
 
 const AXPAnalogClockWidget = {
-    name: 'analog-clock',
-    title: 'Analog Clock',
-    description: '',
+    name: RootConfig.widgets.analogClock,
+    title: '@dashboard:widgets.analog-clock.widget-title',
+    description: '@dashboard:widgets.analog-clock.widget-description',
     type: 'view',
     categories: [],
     groups: [AXPWidgetGroupEnum.DashboardWidget],
@@ -4909,7 +5358,7 @@ const AXPAnalogClockWidget = {
     },
 };
 
-class AXPClockCalendarWidgetViewComponent extends AXPValueWidgetComponent {
+class AXPClockCalendarWidgetViewComponent extends AXPDashboardWidgetComponent {
     constructor() {
         super(...arguments);
         // Dependencies
@@ -5078,8 +5527,9 @@ const AXP_DATE_FORMAT_OPTIONS = [
 ];
 
 const AXPClockCalendarWidget = {
-    name: 'clock-calendar',
-    title: 'Clock & Calendar',
+    name: RootConfig.widgets.clockCalendar,
+    title: '@dashboard:widgets.clock-calendar.widget-title',
+    description: '@dashboard:widgets.clock-calendar.widget-description',
     categories: [AXP_WIDGETS_UTILITY_CATEGORY],
     groups: [AXPWidgetGroupEnum.DashboardWidget],
     type: 'dashboard',
@@ -5098,7 +5548,7 @@ const AXPClockCalendarWidget = {
                     path: 'options.title',
                     type: AXPWidgetsCatalog.text,
                     options: {
-                        placeholder: 'Enter chart title',
+                        placeholder: '@dashboard:widgets.clock-calendar.title-placeholder',
                     },
                 },
             },
@@ -5118,9 +5568,9 @@ const AXPClockCalendarWidget = {
                     type: AXPWidgetsCatalog.select,
                     options: {
                         dataSource: [
-                            { id: 'both', title: 'Digital & Analog' },
-                            { id: 'digital', title: 'Digital Only' },
-                            { id: 'analog', title: 'Analog Only' },
+                            { id: 'both', title: '@dashboard:widgets.clock-calendar.layout-both' },
+                            { id: 'digital', title: '@dashboard:widgets.clock-calendar.layout-digital' },
+                            { id: 'analog', title: '@dashboard:widgets.clock-calendar.layout-analog' },
                         ],
                     },
                 },
@@ -5272,7 +5722,7 @@ const AXPClockCalendarWidget = {
     },
 };
 
-class AXPDashboardShortcutWidgetViewComponent extends AXPLayoutBaseWidgetComponent {
+class AXPShortcutWidgetViewComponent extends AXPDashboardWidgetComponent {
     constructor() {
         super(...arguments);
         this.popupService = inject(AXPopupService);
@@ -5336,71 +5786,12 @@ class AXPDashboardShortcutWidgetViewComponent extends AXPLayoutBaseWidgetCompone
         cls[`ax-text-white`] = true;
         return cls;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDashboardShortcutWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDashboardShortcutWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { properties: { "style": "this.__style", "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
-    @if (item()) {
-      <div
-        class="ax-group ax-flex ax-flex-col ax-items-center ax-justify-center ax-p-3 ax-w-full ax-h-full ax-relative ax-overflow-hidden "
-        (click)="executeCommand()"
-      >
-        <div class="ax-absolute ax-inset-0 ax-bg-black/0 hover:ax-bg-black/10 ax-transition-opacity"></div>
-        <i [class]="item().icon + ' ax-text-3xl'"></i>
-        <span class="ax-text-xl ax-font-semibold">{{ item().title | translate | async }}</span>
-        @if (item().description) {
-          <span class="ax-text-sm ax-opacity-90 ax-text-center ax-px-2">{{
-            item().description! | translate | async
-          }}</span>
-        }
-      </div>
-    } @else {
-      <div
-        (click)="setCommand()"
-        class="ax-group ax-flex ax-flex-col ax-items-center ax-justify-center ax-p-3 ax-w-full ax-h-full  ax-relative ax-overflow-hidden"
-      >
-        <div class="ax-absolute ax-inset-0 ax-bg-black/0 hover:ax-bg-black/5 ax-transition-opacity"></div>
-        <i class="fa-light fa-plus ax-text-3xl"></i>
-        <span class="ax-text-xl ax-font-semibold">{{
-          '@dashboard:widgets.dashboard-shortcut.add-shortcut' | translate | async
-        }}</span>
-      </div>
-    }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPShortcutWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPShortcutWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { properties: { "style": "this.__style", "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: "@if (item()) {\n  <div\n    class=\"ax-group ax-flex ax-flex-col ax-items-center ax-justify-center ax-p-3 ax-w-full ax-h-full ax-relative ax-overflow-hidden \"\n    (click)=\"executeCommand()\"\n  >\n    <div class=\"ax-absolute ax-inset-0 ax-bg-black/0 hover:ax-bg-black/10 ax-transition-opacity\"></div>\n    <i [class]=\"item().icon + ' ax-text-3xl'\"></i>\n    <span class=\"ax-text-xl ax-font-semibold\">{{ item().title | translate | async }}</span>\n    @if (item().description) {\n      <span class=\"ax-text-sm ax-opacity-90 ax-text-center ax-px-2\">{{ item().description! | translate | async }}</span>\n    }\n  </div>\n} @else {\n  <div\n    (click)=\"setCommand()\"\n    class=\"ax-group ax-flex ax-flex-col ax-items-center ax-justify-center ax-p-3 ax-w-full ax-h-full  ax-relative ax-overflow-hidden\"\n  >\n    <div class=\"ax-absolute ax-inset-0 ax-bg-black/0 hover:ax-bg-black/5 ax-transition-opacity\"></div>\n    <i class=\"fa-light fa-plus ax-text-3xl\"></i>\n    <span class=\"ax-text-xl ax-font-semibold\">{{\n      '@dashboard:widgets.shortcut.add-shortcut' | translate | async\n    }}</span>\n  </div>\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDashboardShortcutWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPShortcutWidgetViewComponent, decorators: [{
             type: Component,
-            args: [{
-                    template: `
-    @if (item()) {
-      <div
-        class="ax-group ax-flex ax-flex-col ax-items-center ax-justify-center ax-p-3 ax-w-full ax-h-full ax-relative ax-overflow-hidden "
-        (click)="executeCommand()"
-      >
-        <div class="ax-absolute ax-inset-0 ax-bg-black/0 hover:ax-bg-black/10 ax-transition-opacity"></div>
-        <i [class]="item().icon + ' ax-text-3xl'"></i>
-        <span class="ax-text-xl ax-font-semibold">{{ item().title | translate | async }}</span>
-        @if (item().description) {
-          <span class="ax-text-sm ax-opacity-90 ax-text-center ax-px-2">{{
-            item().description! | translate | async
-          }}</span>
-        }
-      </div>
-    } @else {
-      <div
-        (click)="setCommand()"
-        class="ax-group ax-flex ax-flex-col ax-items-center ax-justify-center ax-p-3 ax-w-full ax-h-full  ax-relative ax-overflow-hidden"
-      >
-        <div class="ax-absolute ax-inset-0 ax-bg-black/0 hover:ax-bg-black/5 ax-transition-opacity"></div>
-        <i class="fa-light fa-plus ax-text-3xl"></i>
-        <span class="ax-text-xl ax-font-semibold">{{
-          '@dashboard:widgets.dashboard-shortcut.add-shortcut' | translate | async
-        }}</span>
-      </div>
-    }
-  `,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXTranslationModule],
-                }]
+            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXTranslationModule], template: "@if (item()) {\n  <div\n    class=\"ax-group ax-flex ax-flex-col ax-items-center ax-justify-center ax-p-3 ax-w-full ax-h-full ax-relative ax-overflow-hidden \"\n    (click)=\"executeCommand()\"\n  >\n    <div class=\"ax-absolute ax-inset-0 ax-bg-black/0 hover:ax-bg-black/10 ax-transition-opacity\"></div>\n    <i [class]=\"item().icon + ' ax-text-3xl'\"></i>\n    <span class=\"ax-text-xl ax-font-semibold\">{{ item().title | translate | async }}</span>\n    @if (item().description) {\n      <span class=\"ax-text-sm ax-opacity-90 ax-text-center ax-px-2\">{{ item().description! | translate | async }}</span>\n    }\n  </div>\n} @else {\n  <div\n    (click)=\"setCommand()\"\n    class=\"ax-group ax-flex ax-flex-col ax-items-center ax-justify-center ax-p-3 ax-w-full ax-h-full  ax-relative ax-overflow-hidden\"\n  >\n    <div class=\"ax-absolute ax-inset-0 ax-bg-black/0 hover:ax-bg-black/5 ax-transition-opacity\"></div>\n    <i class=\"fa-light fa-plus ax-text-3xl\"></i>\n    <span class=\"ax-text-xl ax-font-semibold\">{{\n      '@dashboard:widgets.shortcut.add-shortcut' | translate | async\n    }}</span>\n  </div>\n}\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { __style: [{
                 type: HostBinding,
                 args: ['style']
@@ -5409,15 +5800,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: ['class']
             }] } });
 
-var dashboardShortcutWidgetView_component = /*#__PURE__*/Object.freeze({
+var shortcutWidgetView_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AXPDashboardShortcutWidgetViewComponent: AXPDashboardShortcutWidgetViewComponent
+    AXPShortcutWidgetViewComponent: AXPShortcutWidgetViewComponent
 });
 
-const AXPDashboardShortcutWidget = {
-    name: 'dashboard-shortcut',
-    title: 'Shortcut',
-    description: 'Quick access to your key features.',
+const AXPShortcutWidget = {
+    name: RootConfig.widgets.shortcut,
+    title: '@dashboard:widgets.shortcut.widget-title',
+    description: '@dashboard:widgets.shortcut.widget-description',
     type: 'view',
     categories: [AXP_WIDGETS_UTILITY_CATEGORY],
     groups: [AXPWidgetGroupEnum.DashboardWidget],
@@ -5425,7 +5816,7 @@ const AXPDashboardShortcutWidget = {
     properties: [
         {
             ...AXP_COLOR_PROPERTY,
-            title: '@dashboard:widgets.dashboard-shortcut.color',
+            title: '@dashboard:widgets.shortcut.color',
         },
     ],
     meta: {
@@ -5455,53 +5846,47 @@ const AXPDashboardShortcutWidget = {
     },
     components: {
         view: {
-            component: () => Promise.resolve().then(function () { return dashboardShortcutWidgetView_component; }).then((c) => c.AXPDashboardShortcutWidgetViewComponent),
+            component: () => Promise.resolve().then(function () { return shortcutWidgetView_component; }).then((c) => c.AXPShortcutWidgetViewComponent),
         },
     },
 };
 
-class AXPStickyNoteWidgetViewComponent extends AXPValueWidgetComponent {
+class AXPStickyNoteWidgetViewComponent extends AXPDashboardWidgetComponent {
     constructor() {
         super(...arguments);
         this.isEditing = signal(false, ...(ngDevMode ? [{ debugName: "isEditing" }] : /* istanbul ignore next */ []));
         this.wysiwyg = viewChild('wysiwyg', ...(ngDevMode ? [{ debugName: "wysiwyg" }] : /* istanbul ignore next */ []));
-        // protected value = computed(() => this.getValue());
-        // protected typeValue = signal<string>('');
-        this.value = linkedSignal(() => this.getValue(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Note HTML persisted in `options.noteText`. */
+        this.value = linkedSignal(() => String(this.options()['noteText'] ?? ''), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.date = computed(() => this.options()?.['date'] ?? new Date(), ...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
         this.bgColor = computed(() => this.options()?.['backgroundColor'] ?? '#FFF8B8', ...(ngDevMode ? [{ debugName: "bgColor" }] : /* istanbul ignore next */ []));
         this.color = signal('#333333', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         this.el = inject(ElementRef);
-        // Modern color palette with pastel and vibrant options
         this.colorPresets = [
-            '#FFF8B8', // Soft yellow
-            '#FFD8E6', // Soft pink
-            '#D1F0FF', // Soft blue
-            '#E2FFD1', // Soft green
-            '#FFE8D1', // Soft orange
-            '#F0D1FF', // Soft purple
-            '#FFCDD2', // Soft red
-            '#D1FFF0', // Soft teal
-            '#F5F5F5', // Light gray
-            '#FFFFFF', // White
+            '#FFF8B8',
+            '#FFD8E6',
+            '#D1F0FF',
+            '#E2FFD1',
+            '#FFE8D1',
+            '#F0D1FF',
+            '#FFCDD2',
+            '#D1FFF0',
+            '#F5F5F5',
+            '#FFFFFF',
         ];
     }
-    // Handle clicks outside the component to cancel editing
     handleClickOutside(event) {
         const clickedInside = this.el.nativeElement.contains(event.target);
         if (!clickedInside && this.isEditing()) {
             this.saveChanges();
         }
     }
-    // Handle double-click to activate editing
     activateEdit() {
-        //TODO FOCUS WYSIWYG
         this.wysiwyg()?.focus();
         this.isEditing.set(true);
     }
-    // Save changes and exit edit mode
     saveChanges() {
-        this.setValue(this.value());
+        this.setOptions({ noteText: this.value() });
         this.isEditing.set(false);
     }
     setColor(color) {
@@ -5531,7 +5916,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXFormatModule,
                         AXPopoverModule,
                         CommonModule,
-                        FormsModule,
                         AXColorBoxModule,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -5550,22 +5934,25 @@ var stickyNoteWidget_component = /*#__PURE__*/Object.freeze({
 });
 
 const AXPStickyNoteWidget = {
-    name: 'sticky-note',
-    title: 'Sticky Note Widget',
+    name: RootConfig.widgets.stickyNote,
+    title: '@dashboard:widgets.sticky-note.widget-title',
+    description: '@dashboard:widgets.sticky-note.widget-description',
     categories: AXP_WIDGETS_UTILITY_CATEGORY,
     groups: [AXPWidgetGroupEnum.DashboardWidget],
     type: 'dashboard',
     icon: 'fa-light fa-sticky-note',
     properties: [
-        AXP_DATA_PATH_PROPERTY,
+        createStringProperty({
+            name: 'noteText',
+            title: '@dashboard:widgets.sticky-note.note-text',
+            path: 'options.noteText',
+            group: AXP_DATA_PROPERTY_GROUP,
+            defaultValue: '',
+        }),
         {
             ...AXP_BG_COLOR_PROPERTY,
             title: '@dashboard:widgets.sticky-note.background-color',
         },
-        {
-            ...plainTextDefaultProperty(),
-            title: '@dashboard:widgets.sticky-note.note-text',
-        },
     ],
     components: {
         view: {
@@ -5602,13 +5989,16 @@ const AXPStickyNoteWidget = {
 //#endregion
 //#region ----   Dashboard Management Widgets Provider   ----
 const DASHBOARD_WIDGETS = [
-    AXPDashboardShortcutWidget,
+    AXPShortcutWidget,
     AXPDonutChartWidget,
     AXPBarChartWidget,
     AXPLineChartWidget,
+    AXPFunnelChartWidget,
+    AXPHeatmapChartWidget,
     AXPKpiProgressWidget,
     AXPKpiSegmentedWidget,
     AXPKpiDetailsWidget,
+    AXPKpiStatCardWidget,
     AXPGaugeChartWidget,
     AXPStickyNoteWidget,
     AXPMinimalWeatherWidget,
@@ -6956,7 +7346,7 @@ withMethods((store, dashboardPopup = inject(AXMDashboardPopupService), dialogSer
                 });
                 const filteredWidgets = widgets.map(({ __meta__, ...rest }) => {
                     const widget = rest;
-                    if (widget.type === 'sticky-note' && !widget.options) {
+                    if (widget.type === RootConfig.widgets.stickyNote && !widget.options) {
                         widget.options = { hasConfiguration: false };
                     }
                     const randomId = AXPDataGenerator.uuid();
@@ -7435,7 +7825,7 @@ class AXMDashboardHomeComponent extends AXPPageLayoutBaseComponent {
                 provide: AXPPageLayoutBase,
                 useExisting: AXMDashboardHomeComponent,
             },
-        ], 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          @let title = (widget.node?.options?.['title'] ?? widget.config.title) | axpResolveMultiLanguageString |\n          translate | async;\n          <axm-dashboard-widget-wrapper\n            [title]=\"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$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i2$3.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" }, { kind: "pipe", type: AXPResolveMultiLanguageStringPipe, name: "axpResolveMultiLanguageString" }], 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          @let title = (widget.node?.options?.['title'] ?? widget.config.title) | translate | async; @let\n          isHeaderTitleVisible = widget.node?.meta?.['title']?.['visible'] ?? true;\n          <axm-dashboard-widget-wrapper\n            [title]=\"isHeaderTitleVisible ? title! : null\"\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:.5rem!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;background-color:rgb(var(--ax-sys-color-lightest-surface))!important;color:rgb(var(--ax-sys-color-on-lightest-surface))!important;border-color:rgb(var(--ax-sys-color-border-lightest-surface))!important}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-lighter-surface))!important;color:rgb(var(--ax-sys-color-on-lighter-surface))!important;border-color:rgb(var(--ax-sys-color-border-lighter-surface))!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$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i2$3.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: "21.2.9", ngImport: i0, type: AXMDashboardHomeComponent, decorators: [{
             type: Component,
@@ -7455,7 +7845,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXBreadcrumbsModule,
                         AXMDashboardWidgetWrapperComponent,
                         AXPStateMessageComponent,
-                        AXPResolveMultiLanguageStringPipe,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         AXPDesignerService,
                         AXMDashboardStore,
@@ -7463,7 +7852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             provide: AXPPageLayoutBase,
                             useExisting: AXMDashboardHomeComponent,
                         },
-                    ], 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          @let title = (widget.node?.options?.['title'] ?? widget.config.title) | axpResolveMultiLanguageString |\n          translate | async;\n          <axm-dashboard-widget-wrapper\n            [title]=\"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          @let title = (widget.node?.options?.['title'] ?? widget.config.title) | translate | async; @let\n          isHeaderTitleVisible = widget.node?.meta?.['title']?.['visible'] ?? true;\n          <axm-dashboard-widget-wrapper\n            [title]=\"isHeaderTitleVisible ? title! : null\"\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:.5rem!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;background-color:rgb(var(--ax-sys-color-lightest-surface))!important;color:rgb(var(--ax-sys-color-on-lightest-surface))!important;border-color:rgb(var(--ax-sys-color-border-lightest-surface))!important}axm-dashboard-home ax-grid-layout-widget .grid-stack-item-content:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-lighter-surface))!important;color:rgb(var(--ax-sys-color-on-lighter-surface))!important;border-color:rgb(var(--ax-sys-color-border-lighter-surface))!important}\n"] }]
         }] });
 
 var homeDashboard = /*#__PURE__*/Object.freeze({
@@ -7477,9 +7866,12 @@ class AXMAddDashboardPopup extends AXBasePageComponent {
     constructor() {
         super(...arguments);
         this.scope = RootConfig.config.i18n;
-        this.jobDefinitionService = inject(AXMOrganizationManagementJobDefinitionEntityService);
+        this.entityService = inject(AXPEntityService);
+        this.jobDefinitionData = this.entityService
+            .withEntity(RootConfig$1.module.name, RootConfig$1.entities.jobDefinition.name)
+            .data();
         this.sessionService = inject(AXPSessionService);
-        this.multiLanguageResolver = inject(AXPMultiLanguageStringResolverService);
+        this.multiLanguageResolver = inject(AXTranslationService);
         this.title = model('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         this.description = model('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
         this.selectedRoleIds = model([], ...(ngDevMode ? [{ debugName: "selectedRoleIds" }] : /* istanbul ignore next */ []));
@@ -7503,7 +7895,7 @@ class AXMAddDashboardPopup extends AXBasePageComponent {
         // Load roles if admin
         if (this.showAdminFields()) {
             try {
-                const result = await this.jobDefinitionService.query({ skip: 0, take: 100 });
+                const result = await this.jobDefinitionData.query({ skip: 0, take: 100 });
                 if (result.items && result.items.length > 0) {
                     this.roles = result.items.map((i) => ({
                         id: i.id,
@@ -7705,5 +8097,5 @@ var AXPHomeDashboardSetting;
  * Generated bundle index. Do not edit.
  */
 
-export { AXMAddDashboardPopup, AXMAdvancedWeatherViewComponent, AXMAnalogClockComponent, AXMClockWidgetViewComponent, AXMConfigurationPopup, AXMDashboardEntityModule, AXMDashboardHomeComponent, AXMDashboardManagementModule, AXMDashboardPopupService, AXMDashboardService, AXMDashboardServiceImpl, AXMDashboardStore, AXMDashboardWidgetWrapperComponent, AXMMinimalWeatherViewComponent, AXPAdvancedWeatherWidget, AXPAnalogClockWidget, AXPBarChartWidget, AXPBarChartWidgetViewComponent, AXPClockCalendarWidget, AXPClockCalendarWidgetViewComponent, AXPDashboardShortcutWidget, AXPDashboardShortcutWidgetViewComponent, AXPDonutChartWidget, AXPDonutChartWidgetViewComponent, AXPGaugeChartWidget, AXPGaugeChartWidgetViewComponent, AXPHomeDashboardSetting, AXPKpiDetailsWidget, AXPKpiDetailsWidgetViewComponent, AXPKpiProgressWidget, AXPKpiProgressWidgetViewComponent, AXPKpiSegmentedWidget, AXPKpiSegmentedWidgetViewComponent, AXPLineChartWidget, AXPLineChartWidgetViewComponent, AXPMinimalWeatherWidget, AXPStickyNoteWidget, AXPStickyNoteWidgetViewComponent, AXPWeatherApiAbstract, AXPWeatherApiMockService, AXPWeatherApiService, AXPWeatherWidget, AXPWeatherWidgetViewComponent, AXP_DATE_FORMAT_OPTIONS, AXP_TIMEZONE_OPTIONS, AXP_WIDGETS_CHART_CATEGORY, AXP_WIDGETS_UTILITY_CATEGORY, RootConfig, dashboardFactory };
+export { AXMAddDashboardPopup, AXMAdvancedWeatherViewComponent, AXMAnalogClockComponent, AXMClockWidgetViewComponent, AXMConfigurationPopup, AXMDashboardEntityModule, AXMDashboardHomeComponent, AXMDashboardManagementModule, AXMDashboardPopupService, AXMDashboardService, AXMDashboardServiceImpl, AXMDashboardStore, AXMDashboardWidgetWrapperComponent, AXMMinimalWeatherViewComponent, AXPAdvancedWeatherWidget, AXPAnalogClockWidget, AXPBarChartWidget, AXPBarChartWidgetViewComponent, AXPClockCalendarWidget, AXPClockCalendarWidgetViewComponent, AXPDashboardWidgetComponent, AXPDonutChartWidget, AXPDonutChartWidgetViewComponent, AXPFunnelChartWidget, AXPFunnelChartWidgetViewComponent, AXPGaugeChartWidget, AXPGaugeChartWidgetViewComponent, AXPHeatmapChartWidget, AXPHeatmapChartWidgetViewComponent, AXPHomeDashboardSetting, AXPKpiDetailsWidget, AXPKpiDetailsWidgetViewComponent, AXPKpiProgressWidget, AXPKpiProgressWidgetViewComponent, AXPKpiSegmentedWidget, AXPKpiSegmentedWidgetViewComponent, AXPKpiStatCardWidget, AXPKpiStatCardWidgetViewComponent, AXPLineChartWidget, AXPLineChartWidgetViewComponent, AXPMinimalWeatherWidget, AXPShortcutWidget, AXPShortcutWidgetViewComponent, AXPStickyNoteWidget, AXPStickyNoteWidgetViewComponent, AXPWeatherApiAbstract, AXPWeatherApiMockService, AXPWeatherApiService, AXPWeatherWidget, AXPWeatherWidgetViewComponent, AXP_DATE_FORMAT_OPTIONS, AXP_TIMEZONE_OPTIONS, AXP_WIDGETS_CHART_CATEGORY, AXP_WIDGETS_UTILITY_CATEGORY, RootConfig, dashboardFactory };
 //# sourceMappingURL=acorex-modules-dashboard-management.mjs.map