@acorex/modules 19.3.1 → 19.3.2

package/fesm2022/{acorex-modules-dashboard-management-acorex-modules-dashboard-management-CReOsVhq.mjs → acorex-modules-dashboard-management-acorex-modules-dashboard-management-VORBD1g-.mjs}

@@ -1,47 +1,48 @@
+import { AXPSessionService, AXPAuthGuard } from '@acorex/platform/auth';
 import { createAllQueryView, AXPEntityCommandScope, AXPEntityQueryType, AXP_HOME_PAGES, AXP_MENU_PROVIDER, AXP_HOME_PAGE_DEFAULT_KEY } from '@acorex/platform/common';
+import * as i3$1 from '@acorex/platform/layout/builder';
+import { AXPWidgetsCatalog, AXPValueWidgetComponent, cloneProperty, AXPWidgetGroupEnum, AXPLayoutWidgetComponent, AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
 import { AXMEntityCrudServiceImpl, AXP_ENTITY_CONFIG_TOKEN, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
+import { AXP_APPEARANCE_PROPERTY_GROUP, AXP_STYLING_PROPERTY_GROUP, AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BG_COLOR_PROPERTY, plainTextDefaultProperty, AXP_DATA_PROPERTY_GROUP, AXP_COLOR_PROPERTY, AXPWidgetsModule } from '@acorex/platform/widgets';
 import * as i0 from '@angular/core';
-import { inject, Injector, Injectable, computed, HostBinding, ChangeDetectionStrategy, Component, signal, runInInjectionContext, effect, Directive, input, output, viewChild, ChangeDetectorRef, ElementRef, HostListener, InjectionToken, NgModule } from '@angular/core';
-import { AXPSessionService, AXPAuthGuard } from '@acorex/platform/auth';
-import { firstValueFrom, interval, map, Observable, catchError, throwError, switchMap } from 'rxjs';
-import { AXP_COLOR_PROPERTY, AXP_STYLING_PROPERTY_GROUP, AXP_APPEARANCE_PROPERTY_GROUP, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_DATA_PATH_PROPERTY, AXP_BG_COLOR_PROPERTY, plainTextDefaultProperty, AXP_DATA_PROPERTY_GROUP, AXPWidgetsModule } from '@acorex/platform/widgets';
-import * as i3 from '@acorex/platform/layout/builder';
-import { AXPWidgetsCatalog, AXPLayoutWidgetComponent, AXPWidgetGroupEnum, AXPValueWidgetComponent, cloneProperty, AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
-import { AXPopupService } from '@acorex/components/popup';
-import * as i2 from '@acorex/core/translation';
-import { AXTranslationModule } from '@acorex/core/translation';
-import { AXPDataGenerator } from '@acorex/platform/core';
-import { AXP_GLOBAL_SEARCH_CONFIG_TOKEN } from '@acorex/platform/layout/search';
-import { AXPWorkflowService } from '@acorex/platform/workflow';
-import * as i1 from '@angular/common';
-import { CommonModule, DatePipe } from '@angular/common';
-import * as i2$3 from '@acorex/components/decorators';
+import { Injectable, inject, Injector, computed, ChangeDetectionStrategy, Component, ChangeDetectorRef, signal, viewChild, ElementRef, HostListener, output, InjectionToken, effect, HostBinding, NgModule } from '@angular/core';
+import { AXBarChartComponent } from '@acorex/charts/bar-chart';
+import * as i2$2 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import { AXTagModule } from '@acorex/components/tag';
 import { AXDateTimeModule } from '@acorex/core/date-time';
-import * as i2$1 from '@acorex/core/format';
+import * as i2 from '@acorex/core/format';
 import { AXFormatModule } from '@acorex/core/format';
-import * as i5 from '@acorex/components/avatar';
-import { AXAvatarModule } from '@acorex/components/avatar';
-import * as i4 from '@acorex/components/badge';
-import { AXBadgeModule } from '@acorex/components/badge';
-import { AXButtonModule } from '@acorex/components/button';
-import * as i6 from '@acorex/components/image';
-import { AXImageModule } from '@acorex/components/image';
-import * as i2$2 from '@acorex/components/tabs';
-import { AXTabsModule } from '@acorex/components/tabs';
+import * as i1 from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
+import { interval, map, Observable, catchError, throwError, switchMap, firstValueFrom } from 'rxjs';
+import { AXDonutChartComponent } from '@acorex/charts/donut-chart';
+import { AXGaugeChartComponent } from '@acorex/charts/gauge-chart';
+import { AXLineChartComponent } from '@acorex/charts/line-chart';
 import { AXColorBoxModule } from '@acorex/components/color-box';
 import { AXGridLayoutWidgetComponent } from '@acorex/components/grid-layout-builder';
 import { AXPopoverModule } from '@acorex/components/popover';
 import { AXToolBarModule } from '@acorex/components/toolbar';
 import * as i1$1 from '@acorex/components/wysiwyg';
 import { AXWysiwygModule } from '@acorex/components/wysiwyg';
-import * as i2$4 from '@angular/forms';
+import * as i2$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i4$1 from '@acorex/components/check-box';
+import { AXAvatarModule } from '@acorex/components/avatar';
+import * as i3 from '@acorex/components/badge';
+import { AXBadgeModule } from '@acorex/components/badge';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i4 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
+import { AXImageModule } from '@acorex/components/image';
 import { AXLabelModule } from '@acorex/components/label';
+import { AXTabsModule } from '@acorex/components/tabs';
+import * as i5 from '@acorex/core/translation';
+import { AXTranslationModule } from '@acorex/core/translation';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { AXPopupService } from '@acorex/components/popup';
+import { AXPDataGenerator } from '@acorex/platform/core';
+import { AXP_GLOBAL_SEARCH_CONFIG_TOKEN } from '@acorex/platform/layout/search';
+import { AXPWorkflowService } from '@acorex/platform/workflow';
 
 const config = {
     i18n: 'common',
@@ -64,48 +65,6 @@ const RootConfig = {
     },
 };
 
-class AXMEntityProvider {
-    constructor() {
-        this.injector = inject(Injector);
-    }
-    preload() {
-        const module = RootConfig.module.name;
-        return Array.from(Object.values(RootConfig.entities)).map((entity) => ({
-            module: module,
-            entity: entity.name,
-        }));
-    }
-    async get(moduleName, entityName) {
-        if (moduleName == RootConfig.module.name) {
-            switch (entityName) {
-                case RootConfig.entities.dashboard.name:
-                    return (await Promise.resolve().then(function () { return dashboard_entity; })).dashboardFactory(this.injector);
-            }
-        }
-        return null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMEntityProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMEntityProvider }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMEntityProvider, decorators: [{
-            type: Injectable
-        }] });
-
-class AXMMenuProvider {
-    constructor() {
-        this.sessionService = inject(AXPSessionService);
-    }
-    async provide(context) {
-        const scope = RootConfig.config.i18n;
-        const module = RootConfig.module;
-        const appName = this.sessionService.application?.name;
-        const isAuthorized = await firstValueFrom(this.sessionService.isAuthorized$);
-        if (!isAuthorized) {
-            return;
-        }
-    }
-}
-
 class AXMDashboardService extends AXMEntityCrudServiceImpl {
 }
 class AXMDashboardServiceImpl extends AXMDashboardService {
@@ -439,134 +398,57 @@ var dashboard_entity = /*#__PURE__*/Object.freeze({
     dashboardFactory: dashboardFactory
 });
 
-class AXPDashboardShortcutWidgetViewComponent extends AXPLayoutWidgetComponent {
+class AXMEntityProvider {
     constructor() {
-        super(...arguments);
-        this.popupService = inject(AXPopupService);
-        this.workflow = inject(AXPWorkflowService);
-        this.searchConfig = inject(AXP_GLOBAL_SEARCH_CONFIG_TOKEN);
-        this.item = computed(() => this.options()['item']);
-        this.color = computed(() => this.options()['color']);
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        if (!this.color()) {
-            this.setOptions({
-                color: AXPDataGenerator.color()
-            });
-        }
+        this.injector = inject(Injector);
     }
-    async executeCommand() {
-        if (this.item()?.command) {
-            await this.workflow.execute(this.item().command.name, this.item().command.options);
-        }
+    preload() {
+        const module = RootConfig.module.name;
+        return Array.from(Object.values(RootConfig.entities)).map((entity) => ({
+            module: module,
+            entity: entity.name,
+        }));
     }
-    async setCommand() {
-        const component = await this.searchConfig.window();
-        const popup = await this.popupService.open(component, {
-            title: 'Choose command...',
-            size: 'fit',
-            closeOnBackdropClick: true,
-            header: false,
-        });
-        if (popup.data) {
-            const result = popup.data;
-            if (result && result.command) {
-                this.setOptions({
-                    item: {
-                        name: result.name,
-                        title: result.title,
-                        description: result.description,
-                        icon: result.icon,
-                        command: result.command
-                    }
-                });
+    async get(moduleName, entityName) {
+        if (moduleName == RootConfig.module.name) {
+            switch (entityName) {
+                case RootConfig.entities.dashboard.name:
+                    return (await Promise.resolve().then(function () { return dashboard_entity; })).dashboardFactory(this.injector);
             }
         }
+        return null;
     }
-    get __style() {
-        const cls = {};
-        cls[`background-color`] = this.color();
-        return cls;
-    }
-    get __class() {
-        const cls = {};
-        cls[`ax-flex`] = true;
-        cls[`ax-flex-col`] = true;
-        cls[`ax-items-center`] = true;
-        cls[`ax-justify-center`] = true;
-        cls[`ax-w-full`] = true;
-        cls[`ax-h-full`] = true;
-        cls[`ax-text-center`] = true;
-        cls[`ax-overflow-hidden`] = true;
-        cls[`ax-cursor-pointer`] = true;
-        cls[`ax-text-white`] = true;
-        return cls;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMEntityProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMEntityProvider }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMEntityProvider, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Bar Chart Widget Component
+ * Renders data as vertical bars with interactive hover effects and animations
+ */
+class AXPBarChartWidgetViewComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.barChartData = computed(() => this.getValue());
+        this.barChartOptions = computed(() => this.options());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDashboardShortcutWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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">Add Shortcut</span>
-      </div>
+    handleBarClick(event) {
+        //console.log(event);
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBarChartWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPBarChartWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ax-bar-chart [data]=\"barChartData()\" [options]=\"barChartOptions()\" (barClick)=\"handleBarClick($event)\"></ax-bar-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: AXBarChartComponent, selector: "ax-bar-chart", inputs: ["data", "options"], outputs: ["barClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDashboardShortcutWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBarChartWidgetViewComponent, 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">Add Shortcut</span>
-      </div>
-    }
-  `,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXTranslationModule]
-                }]
-        }], propDecorators: { __style: [{
-                type: HostBinding,
-                args: ['style']
-            }], __class: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+            args: [{ imports: [AXBarChartComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-bar-chart [data]=\"barChartData()\" [options]=\"barChartOptions()\" (barClick)=\"handleBarClick($event)\"></ax-bar-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
+        }] });
 
-var dashboardShortcutWidgetView_component = /*#__PURE__*/Object.freeze({
+var barChartWidget_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AXPDashboardShortcutWidgetViewComponent: AXPDashboardShortcutWidgetViewComponent
+    AXPBarChartWidgetViewComponent: AXPBarChartWidgetViewComponent
 });
 
 const AXP_WIDGETS_CHART_CATEGORY = {
@@ -580,537 +462,75 @@ const AXP_WIDGETS_UTILITY_CATEGORY = {
     title: 'Utilities',
 };
 
-const AXPDashboardShortcutWidget = {
-    name: "dashboard-shortcut",
-    title: "Shortcut",
-    description: 'Quick access to your key features.',
-    type: 'view',
-    categories: [AXP_WIDGETS_UTILITY_CATEGORY],
+const AXPBarChartWidget = {
+    name: 'bar-chart',
+    title: 'Bar Chart Widget',
+    categories: [AXP_WIDGETS_CHART_CATEGORY],
     groups: [AXPWidgetGroupEnum.DashboardWidget],
-    icon: "fa-light fa-link",
+    type: 'dashboard',
+    icon: 'fa-light fa-chart-bar',
     properties: [
-        AXP_COLOR_PROPERTY
-    ],
-    meta: {
-        dimensions: {
-            width: 2,
-            height: 2,
-            minWidth: 1,
-            minHeight: 1,
-            maxWidth: 3,
-            maxHeight: 2,
-        },
-    },
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return dashboardShortcutWidgetView_component; }).then((c) => c.AXPDashboardShortcutWidgetViewComponent),
+        cloneProperty(AXP_NAME_PROPERTY, { visible: false }),
+        cloneProperty(AXP_DATA_PATH_PROPERTY, { visible: false }),
+        // ====== Chart Title ======
+        {
+            name: 'title',
+            title: 'Chart Title',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: '',
+                dataType: 'string',
+                interface: {
+                    name: 'title',
+                    path: 'options.title',
+                    type: AXPWidgetsCatalog.text,
+                    options: {
+                        placeholder: 'Enter chart title',
+                    },
+                },
+            },
+            visible: true,
         },
-    }
-};
-
-/**
- * Common base types and utilities for all chart components
- */
-/**
- * Color utility functions for charts
- */
-const AXPChartColors = {
-    // Modern color palette suitable for data visualization
-    defaultColors: [
-        '#4361ee', // Blue
-        '#3a0ca3', // Purple
-        '#7209b7', // Violet
-        '#f72585', // Pink
-        '#4cc9f0', // Light Blue
-        '#4895ef', // Sky Blue
-        '#560bad', // Deep Purple
-        '#f15bb5', // Light Pink
-        '#00bbf9', // Cyan
-        '#00f5d4', // Teal
-    ],
-    // Get a color from the palette by index with wraparound
-    getColor: (index, customPalette) => {
-        const palette = customPalette || AXPChartColors.defaultColors;
-        return palette[index % palette.length];
-    },
-    // Generate a continuous color palette from a base color
-    generatePalette: (baseColor, count) => {
-        // Simple implementation - in real usage you might want a more sophisticated algorithm
-        const colors = [];
-        for (let i = 0; i < count; i++) {
-            // This is simplistic - a real implementation would use HSL or other color manipulation
-            const opacity = 0.4 + (0.6 * i) / count;
-            colors.push(`${baseColor}${Math.floor(opacity * 255)
-                .toString(16)
-                .padStart(2, '0')}`);
-        }
-        return colors;
-    },
-};
-/**
- * Shared utility for loading D3.js dynamically
- */
-async function loadD3() {
-    try {
-        // Dynamic import of d3 without relying on d3 being imported at the top
-        return await import('d3');
-    }
-    catch (error) {
-        console.error('Failed to load D3.js:', error);
-        throw error;
-    }
-}
-
-/**
- * Base component class for all chart components with common chart functionality
- */
-class AXPChartBaseComponent extends AXPValueWidgetComponent {
-    // Constructor with protected change detector
-    constructor(cdr) {
-        super();
-        this.cdr = cdr;
-        // Get injector for running effects
-        this.injector = inject(Injector);
-        // Track component lifecycle
-        this.isInitialized = signal(false);
-        this.isRendered = signal(false);
-        // Internal chart data storage with fallback logic
-        this._internalData = signal(null);
-        // Accessor for chart data with fallback to getValue() or defaultValue
-        this.chartData = computed(() => {
-            if (this._internalData()) {
-                return this._internalData();
-            }
-            return this.getValue() || this.defaultValue;
-        });
-        // Options tracker for detecting changes
-        this._lastOptionsSnapshot = '';
-        // Store the effect cleanup function
-        this.effectRef = null;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.loadD3();
-    }
-    ngAfterViewInit() {
-        this.isRendered.set(true);
-        this.setupEffects();
-    }
-    ngOnDestroy() {
-        // Clean up effect if it exists
-        if (this.effectRef) {
-            this.effectRef.destroy();
-        }
-        this.cleanupChart();
-    }
-    /**
-     * Load D3.js library asynchronously
-     */
-    async loadD3() {
-        try {
-            this.d3 = await loadD3();
-            this.isInitialized.set(true);
-            // Initialize chart data once D3 is loaded
-            const initialData = this.getValue() || this.defaultValue;
-            if (initialData) {
-                this._internalData.set(initialData);
-            }
-            // Create chart once D3 is loaded and if we're already rendered
-            if (this.isRendered()) {
-                this.createChart();
-            }
-        }
-        catch (error) {
-            console.error('Error loading D3.js:', error);
-        }
-    }
-    /**
-     * Set up reactive effects to track data and option changes
-     */
-    setupEffects() {
-        // Run effect in injection context to avoid NG0203 error
-        this.effectRef = runInInjectionContext(this.injector, () => {
-            return effect(() => {
-                // Only update if D3 is loaded and component is rendered
-                if (!this.isInitialized() || !this.isRendered())
-                    return;
-                // Track dependencies explicitly
-                const data = this.getValue();
-                const options = this.options();
-                // Store current options snapshot for comparison
-                const currentOptions = JSON.stringify(options);
-                const optionsChanged = currentOptions !== this._lastOptionsSnapshot;
-                this._lastOptionsSnapshot = currentOptions;
-                // Check if data changed
-                const dataChanged = data && JSON.stringify(data) !== JSON.stringify(this._internalData());
-                // Update internal data if it changed
-                if (dataChanged && data) {
-                    this._internalData.set(data);
-                }
-                // Update chart if either data or options changed
-                if (dataChanged || optionsChanged) {
-                    this.updateChart();
-                }
-            });
-        });
-    }
-    /**
-     * Get dimensions of the container element
-     */
-    getContainerDimensions(containerElement) {
-        if (!containerElement?.nativeElement) {
-            return { width: 300, height: 300 }; // Default fallback
-        }
-        const { clientWidth, clientHeight } = containerElement.nativeElement;
-        return {
-            width: clientWidth || 300,
-            height: clientHeight || 300,
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPChartBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: AXPChartBaseComponent, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPChartBaseComponent, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
-
-class AXPChartTooltipComponent {
-    constructor() {
-        this.data = input(null);
-        this.position = input({ x: 0, y: 0 });
-        this.visible = input(false);
-        /**
-         * Whether to show the tooltip's percentage badge
-         */
-        this.showPercentage = input(true);
-        /**
-         * Optional custom styling for the tooltip
-         */
-        this.style = input({});
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPChartTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPChartTooltipComponent, isStandalone: true, selector: "ax-chart-tooltip", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: "showPercentage", publicName: "showPercentage", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (visible() && data()) {\n<div class=\"chart-tooltip\" [style.left.px]=\"position().x\" [style.top.px]=\"position().y\" [ngStyle]=\"style()\">\n  <div class=\"chart-tooltip-title\">{{ data()!.title }}</div>\n  <div class=\"chart-tooltip-content\">\n    @if (data()!.color) {\n    <div class=\"chart-tooltip-color\" [style.background-color]=\"data()!.color\"></div>\n    }\n    <div class=\"chart-tooltip-value\">{{ data()!.value }}</div>\n    @if (showPercentage() && data()!.percentage) {\n    <div class=\"chart-tooltip-percentage\">{{ data()!.percentage }}</div>\n    }\n  </div>\n</div>\n}\n", styles: [".chart-tooltip{position:absolute;pointer-events:none;background-color:rgba(33,33,33,.9);color:#fff;padding:.5rem .75rem;border-radius:.375rem;font-size:.8rem;z-index:10;box-shadow:0 4px 12px rgba(0,0,0,.15);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.1);transform:translate(10px,-50%);max-width:200px;font-family:var(--ax-font-family, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);transition:opacity .15s ease,transform .15s ease}.chart-tooltip-title{font-weight:600;padding-bottom:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chart-tooltip-content{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.chart-tooltip-color{width:10px;height:10px;border-radius:2px;flex-shrink:0;box-shadow:0 1px 2px rgba(0,0,0,.2)}.chart-tooltip-value{font-weight:500;flex-grow:1}.chart-tooltip-percentage{background-color:rgba(255,255,255,.2);padding:.125rem .375rem;border-radius:1rem;font-size:.7rem;font-weight:500;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPChartTooltipComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-chart-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible() && data()) {\n<div class=\"chart-tooltip\" [style.left.px]=\"position().x\" [style.top.px]=\"position().y\" [ngStyle]=\"style()\">\n  <div class=\"chart-tooltip-title\">{{ data()!.title }}</div>\n  <div class=\"chart-tooltip-content\">\n    @if (data()!.color) {\n    <div class=\"chart-tooltip-color\" [style.background-color]=\"data()!.color\"></div>\n    }\n    <div class=\"chart-tooltip-value\">{{ data()!.value }}</div>\n    @if (showPercentage() && data()!.percentage) {\n    <div class=\"chart-tooltip-percentage\">{{ data()!.percentage }}</div>\n    }\n  </div>\n</div>\n}\n", styles: [".chart-tooltip{position:absolute;pointer-events:none;background-color:rgba(33,33,33,.9);color:#fff;padding:.5rem .75rem;border-radius:.375rem;font-size:.8rem;z-index:10;box-shadow:0 4px 12px rgba(0,0,0,.15);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.1);transform:translate(10px,-50%);max-width:200px;font-family:var(--ax-font-family, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);transition:opacity .15s ease,transform .15s ease}.chart-tooltip-title{font-weight:600;padding-bottom:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chart-tooltip-content{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.chart-tooltip-color{width:10px;height:10px;border-radius:2px;flex-shrink:0;box-shadow:0 1px 2px rgba(0,0,0,.2)}.chart-tooltip-value{font-weight:500;flex-grow:1}.chart-tooltip-percentage{background-color:rgba(255,255,255,.2);padding:.125rem .375rem;border-radius:1rem;font-size:.7rem;font-weight:500;flex-shrink:0}\n"] }]
-        }] });
-
-/**
- * Bar Chart Widget Component
- * Renders data as vertical bars with interactive hover effects and animations
- */
-class AXPBarChartWidgetViewComponent extends AXPChartBaseComponent {
-    constructor() {
-        super(...arguments);
-        this.barClick = output();
-        // Chart container reference
-        this.chartContainerEl = viewChild.required('chartContainer');
-        this.margin = { top: 20, right: 20, bottom: 30, left: 40 };
-        // Tooltip state
-        this._tooltipVisible = signal(false);
-        this._tooltipPosition = signal({ x: 0, y: 0 });
-        this._tooltipData = signal({
-            title: '',
-            value: '0',
-            percentage: '0%',
-            color: '',
-        });
-        // Tooltip accessors
-        this.tooltipVisible = computed(() => this._tooltipVisible());
-        this.tooltipPosition = computed(() => this._tooltipPosition());
-        this.tooltipData = computed(() => this._tooltipData());
-        // Bar appearance options
-        this.barWidth = computed(() => this.options()['barWidth'] ?? 80);
-        this.cornerRadius = computed(() => this.options()['cornerRadius'] ?? 4);
-    }
-    // Chart lifecycle methods
-    /**
-     * Creates the bar chart SVG and renders all elements
-     */
-    createChart() {
-        if (!this.d3 || !this.chartContainerEl()?.nativeElement)
-            return;
-        const containerElement = this.chartContainerEl().nativeElement;
-        const data = this.chartData() || [];
-        // Clear existing chart
-        this.d3.select(containerElement).selectAll('svg').remove();
-        // Early return if no data
-        if (!data.length) {
-            this.showNoDataMessage(containerElement);
-            return;
-        }
-        // Get options and setup dimensions
-        const options = this.options();
-        this.setupDimensions(containerElement, options);
-        // No need to create SVG here as it's now done in setupDimensions
-        // Create scales and axes
-        this.setupScales(data);
-        this.createAxes(options);
-        // Render the bars
-        this.renderBars(data);
-    }
-    updateChart() {
-        this.createChart();
-    }
-    cleanupChart() {
-        if (this.svg) {
-            this.d3.select(this.chartContainerEl()?.nativeElement).selectAll('svg').remove();
-            this.svg = null;
-            this.chart = null;
-        }
-        this._tooltipVisible.set(false);
-    }
-    // Private chart creation methods
-    /**
-     * Sets up chart dimensions and creates SVG with responsive attributes
-     */
-    setupDimensions(containerElement, options) {
-        // Get container dimensions
-        const containerWidth = containerElement.clientWidth;
-        const containerHeight = containerElement.clientHeight;
-        // If options specify width and height, use those, otherwise default to container size
-        const minDim = Math.min(200, containerWidth, containerHeight); // Ensure reasonable minimum
-        if (options.width && options.height) {
-            // Explicit dimensions provided
-            this.width = options.width - this.margin.left - this.margin.right;
-            this.height = options.height - this.margin.top - this.margin.bottom;
-        }
-        else {
-            // Responsive dimensions
-            this.width = Math.max(containerWidth, minDim) - this.margin.left - this.margin.right;
-            this.height = Math.max(containerHeight, minDim) - this.margin.top - this.margin.bottom;
-        }
-        // Create responsive SVG that scales with its container
-        const svg = this.d3
-            .select(containerElement)
-            .append('svg')
-            .attr('width', '100%')
-            .attr('height', '100%')
-            .attr('viewBox', `0 0 ${this.width + this.margin.left + this.margin.right} ${this.height + this.margin.top + this.margin.bottom}`)
-            .attr('preserveAspectRatio', 'xMidYMid meet');
-        this.svg = svg;
-        // Create chart group with margins
-        this.chart = this.svg.append('g').attr('transform', `translate(${this.margin.left},${this.margin.top})`);
-    }
-    /**
-     * Creates x and y scales for the chart
-     */
-    setupScales(data) {
-        // Get the bar width percentage (default 80%)
-        const barWidthPercent = this.barWidth() / 100;
-        // Calculate padding based on barWidth (inverse relationship)
-        const padding = Math.max(0.1, 1 - barWidthPercent);
-        // Create x scale (band scale for categorical data)
-        this.xScale = this.d3
-            .scaleBand()
-            .domain(data.map((d) => d.label))
-            .range([0, this.width])
-            .padding(padding);
-        // Create y scale (linear scale for values)
-        this.yScale = this.d3
-            .scaleLinear()
-            .domain([0, this.d3.max(data, (d) => d.value) || 0])
-            .nice()
-            .range([this.height, 0]);
-    }
-    /**
-     * Creates x and y axes with grid lines
-     */
-    createAxes(options) {
-        // Only create axes if they are enabled in options
-        const showXAxis = options.showXAxis !== false;
-        const showYAxis = options.showYAxis !== false;
-        const showGrid = options.showGrid !== false;
-        if (showXAxis) {
-            // Create X axis
-            this.xAxis = this.chart
-                .append('g')
-                .attr('class', 'axp-bar-chart-axis-x')
-                .attr('transform', `translate(0,${this.height})`)
-                .call(this.d3.axisBottom(this.xScale));
-        }
-        if (showYAxis) {
-            // Create Y axis
-            this.yAxis = this.chart.append('g').attr('class', 'axp-bar-chart-axis-y').call(this.d3.axisLeft(this.yScale));
-        }
-        if (showGrid) {
-            // Add horizontal grid lines
-            this.chart
-                .append('g')
-                .attr('class', 'axp-bar-chart-grid')
-                .call(this.d3
-                .axisLeft(this.yScale)
-                .tickSize(-this.width)
-                .tickFormat(() => ''))
-                .selectAll('.tick')
-                .style('color', 'rgb(153 153 153 / 30%)'); // Add gray color to ticks
-        }
-    }
-    /**
-     * Renders the bars with animations
-     */
-    renderBars(data) {
-        // Get corner radius from options
-        const radius = this.cornerRadius();
-        // Add bars with modern colors
-        const bars = this.chart
-            .selectAll('.axp-bar-chart-bar')
-            .data(data)
-            .enter()
-            .append('rect')
-            .attr('class', 'axp-bar-chart-bar')
-            .attr('x', (d) => this.xScale(d.label))
-            .attr('width', this.xScale.bandwidth())
-            .attr('y', this.height) // Start from bottom for animation
-            .attr('height', 0) // Start with height 0 for animation
-            .attr('rx', radius) // Rounded corners
-            .attr('ry', radius) // Rounded corners
-            .attr('fill', (d, i) => d.color || AXPChartColors.getColor(i))
-            .on('mouseenter', (event, d) => this.handleBarHover(event, d))
-            .on('mousemove', (event) => this.updateTooltipPosition(event))
-            .on('mouseleave', () => this._tooltipVisible.set(false))
-            .on('click', (event, d) => this.handleBarClick(event, d));
-        // Add animation
-        bars
-            .transition()
-            .duration(800)
-            .delay((d, i) => i * 50) // Stagger each bar animation
-            .attr('y', (d) => this.yScale(d.value))
-            .attr('height', (d) => this.height - this.yScale(d.value))
-            .ease(this.d3.easeQuadOut); // Simple quadratic ease-out animation
-    }
-    // Event handlers
-    /**
-     * Handles bar hover event and shows tooltip
-     */
-    handleBarHover(event, datum) {
-        if (this.options().showTooltip !== false) {
-            const index = this.chartData().findIndex((item) => item.id === datum.id);
-            const color = datum.color || AXPChartColors.getColor(index);
-            // Calculate percentage of total
-            const total = this.chartData().reduce((sum, item) => sum + item.value, 0);
-            const percentage = total > 0 ? ((datum.value / total) * 100).toFixed(1) : '0';
-            this._tooltipData.set({
-                title: datum.label,
-                value: datum.value.toString(),
-                percentage: `${percentage}%`,
-                color: color,
-            });
-            this.updateTooltipPosition(event);
-            this._tooltipVisible.set(true);
-        }
-    }
-    /**
-     * Updates tooltip position based on mouse coordinates
-     */
-    updateTooltipPosition(event) {
-        const container = this.chartContainerEl().nativeElement.getBoundingClientRect();
-        const x = event.clientX - container.left;
-        const y = event.clientY - container.top;
-        this._tooltipPosition.set({
-            x: x,
-            y: y,
-        });
-    }
-    /**
-     * Handles bar click event
-     */
-    handleBarClick(event, datum) {
-        this.barClick.emit(datum);
-    }
-    /**
-     * Shows a message when no data is available
-     */
-    showNoDataMessage(containerElement) {
-        const messageContainer = this.d3
-            .select(containerElement)
-            .append('div')
-            .attr('class', 'axp-bar-chart-no-data-message')
-            .style('width', '100%')
-            .style('height', '100%')
-            .style('display', 'flex')
-            .style('flex-direction', 'column')
-            .style('align-items', 'center')
-            .style('justify-content', 'center')
-            .style('text-align', 'center');
-        // Add an icon
-        messageContainer
-            .append('div')
-            .attr('class', 'axp-bar-chart-no-data-icon')
-            .style('margin-bottom', '10px')
-            .style('color', 'var(--ax-text-muted, #999)')
-            .html('<i class="fa-light fa-chart-bar fa-2x"></i>');
-        // Add text message
-        messageContainer
-            .append('div')
-            .attr('class', 'axp-bar-chart-no-data-text')
-            .style('font-size', '16px')
-            .style('font-weight', '600')
-            .style('color', 'var(--ax-text-color, #333)')
-            .text('No data available');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBarChartWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPBarChartWidgetViewComponent, isStandalone: true, selector: "ng-component", outputs: { barClick: "barClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-bar-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:200px}.axp-bar-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden}.axp-bar-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.axp-bar-chart-bar{transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer}.axp-bar-chart-bar:hover{filter:brightness(.9);transform:translateY(-3px)}.axp-bar-chart-axis-x path,.axp-bar-chart-axis-y path{stroke:var(--ax-border-color, #e0e0e0)}.axp-bar-chart-axis-x line,.axp-bar-chart-axis-y line,.axp-bar-chart-grid line{stroke:var(--ax-border-color, #e0e0e0);stroke-dasharray:2,2;stroke-opacity:.5}.axp-bar-chart-grid path{stroke-width:0}.axp-bar-chart-axis-x text,.axp-bar-chart-axis-y text{fill:var(--ax-text-muted, #666);font-size:clamp(8px,2vmin,12px)}.axp-bar-chart-no-data-message{font-family:var(--ax-font-family, system-ui, sans-serif);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%}.axp-bar-chart-no-data-icon{margin-bottom:.75rem;color:var(--ax-text-muted, #999)}.axp-bar-chart-no-data-text{font-weight:600;color:var(--ax-text-color, #333)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBarChartWidgetViewComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, imports: [CommonModule, AXPChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-bar-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:200px}.axp-bar-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden}.axp-bar-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.axp-bar-chart-bar{transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer}.axp-bar-chart-bar:hover{filter:brightness(.9);transform:translateY(-3px)}.axp-bar-chart-axis-x path,.axp-bar-chart-axis-y path{stroke:var(--ax-border-color, #e0e0e0)}.axp-bar-chart-axis-x line,.axp-bar-chart-axis-y line,.axp-bar-chart-grid line{stroke:var(--ax-border-color, #e0e0e0);stroke-dasharray:2,2;stroke-opacity:.5}.axp-bar-chart-grid path{stroke-width:0}.axp-bar-chart-axis-x text,.axp-bar-chart-axis-y text{fill:var(--ax-text-muted, #666);font-size:clamp(8px,2vmin,12px)}.axp-bar-chart-no-data-message{font-family:var(--ax-font-family, system-ui, sans-serif);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%}.axp-bar-chart-no-data-icon{margin-bottom:.75rem;color:var(--ax-text-muted, #999)}.axp-bar-chart-no-data-text{font-weight:600;color:var(--ax-text-color, #333)}\n"] }]
-        }] });
-
-var barChartWidget_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPBarChartWidgetViewComponent: AXPBarChartWidgetViewComponent
-});
-
-const AXPBarChartWidget = {
-    name: 'bar-chart',
-    title: 'Bar Chart Widget',
-    categories: [AXP_WIDGETS_CHART_CATEGORY],
-    groups: [AXPWidgetGroupEnum.DashboardWidget],
-    type: 'dashboard',
-    icon: 'fa-light fa-chart-bar',
-    properties: [
         // ====== Layout & Dimensions ======
         {
-            name: 'height',
-            title: 'Height',
+            name: 'width',
+            title: 'Width',
             group: AXP_STYLING_PROPERTY_GROUP,
             schema: {
-                defaultValue: 300,
+                defaultValue: null,
                 dataType: 'number',
                 interface: {
-                    name: 'height',
-                    path: 'options.height',
+                    name: 'width',
+                    path: 'options.width',
                     type: AXPWidgetsCatalog.number,
                     options: {
                         minValue: 0,
-                        maxValue: 800,
+                        maxValue: 1200,
                     },
                 },
             },
             visible: true,
         },
         {
-            name: 'width',
-            title: 'Width',
+            name: 'height',
+            title: 'Height',
             group: AXP_STYLING_PROPERTY_GROUP,
             schema: {
-                defaultValue: null,
+                defaultValue: 300,
                 dataType: 'number',
                 interface: {
-                    name: 'width',
-                    path: 'options.width',
+                    name: 'height',
+                    path: 'options.height',
                     type: AXPWidgetsCatalog.number,
                     options: {
                         minValue: 0,
-                        maxValue: 1200,
+                        maxValue: 800,
                     },
                 },
             },
             visible: true,
         },
-        // ====== Axis Settings ======
+        // ====== X Axis Settings ======
         {
             name: 'showXAxis',
             title: 'Show X Axis',
@@ -1126,6 +546,22 @@ const AXPBarChartWidget = {
             },
             visible: true,
         },
+        {
+            name: 'xAxisLabel',
+            title: 'X Axis Label',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: '',
+                dataType: 'string',
+                interface: {
+                    name: 'xAxisLabel',
+                    path: 'options.xAxisLabel',
+                    type: AXPWidgetsCatalog.text,
+                },
+            },
+            visible: true,
+        },
+        // ====== Y Axis Settings ======
         {
             name: 'showYAxis',
             title: 'Show Y Axis',
@@ -1141,6 +577,63 @@ const AXPBarChartWidget = {
             },
             visible: true,
         },
+        {
+            name: 'yAxisLabel',
+            title: 'Y Axis Label',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: '',
+                dataType: 'string',
+                interface: {
+                    name: 'yAxisLabel',
+                    path: 'options.yAxisLabel',
+                    type: AXPWidgetsCatalog.text,
+                },
+            },
+            visible: true,
+        },
+        // ====== Bar Appearance ======
+        {
+            name: 'barWidth',
+            title: 'Bar Width',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 80,
+                dataType: 'number',
+                interface: {
+                    name: 'barWidth',
+                    path: 'options.barWidth',
+                    type: AXPWidgetsCatalog.number,
+                    options: {
+                        placeholder: '1-100',
+                        minValue: 1,
+                        maxValue: 100,
+                    },
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'cornerRadius',
+            title: 'Corner Radius',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 4,
+                dataType: 'number',
+                interface: {
+                    name: 'cornerRadius',
+                    path: 'options.cornerRadius',
+                    type: AXPWidgetsCatalog.number,
+                    options: {
+                        placeholder: '0-20',
+                        minValue: 0,
+                        maxValue: 20,
+                    },
+                },
+            },
+            visible: true,
+        },
+        // ====== Grid Settings ======
         {
             name: 'showGrid',
             title: 'Show Grid Lines',
@@ -1172,42 +665,52 @@ const AXPBarChartWidget = {
             },
             visible: true,
         },
-        // ====== Bar Appearance ======
+        // ====== Animation Settings ======
         {
-            name: 'barWidth',
-            title: 'Bar Width',
+            name: 'animationEasing',
+            title: 'Animation Easing',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
-                defaultValue: 80,
-                dataType: 'number',
+                defaultValue: 'cubic-out',
+                dataType: 'string',
                 interface: {
-                    name: 'barWidth',
-                    path: 'options.barWidth',
-                    type: AXPWidgetsCatalog.number,
+                    name: 'animationEasing',
+                    path: 'options.animationEasing',
+                    type: AXPWidgetsCatalog.select,
                     options: {
-                        placeholder: '1-100',
-                        minValue: 1,
-                        maxValue: 100,
+                        dataSource: [
+                            { value: 'linear', text: 'Linear' },
+                            { value: 'ease', text: 'Ease' },
+                            { value: 'ease-in', text: 'Ease In' },
+                            { value: 'ease-out', text: 'Ease Out' },
+                            { value: 'ease-in-out', text: 'Ease In Out' },
+                            { value: 'cubic', text: 'Cubic' },
+                            { value: 'cubic-in', text: 'Cubic In' },
+                            { value: 'cubic-out', text: 'Cubic Out' },
+                            { value: 'cubic-in-out', text: 'Cubic In Out' },
+                        ],
+                        textField: 'text',
+                        valueField: 'value',
                     },
                 },
             },
             visible: true,
         },
         {
-            name: 'cornerRadius',
-            title: 'Corner Radius',
+            name: 'animationDuration',
+            title: 'Animation Duration',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
-                defaultValue: 4,
+                defaultValue: 800,
                 dataType: 'number',
                 interface: {
-                    name: 'cornerRadius',
-                    path: 'options.cornerRadius',
+                    name: 'animationDuration',
+                    path: 'options.animationDuration',
                     type: AXPWidgetsCatalog.number,
                     options: {
-                        placeholder: '0-20',
+                        placeholder: '0-2000',
                         minValue: 0,
-                        maxValue: 20,
+                        maxValue: 2000,
                     },
                 },
             },
@@ -1266,7 +769,7 @@ class AXPClockCalendarWidgetViewComponent extends AXPValueWidgetComponent {
         this.showSeconds = computed(() => this.options()?.showSeconds !== false);
         this.dateFormat = computed(() => this.options()?.dateFormat?.id ?? 'dd MMM yyyy');
         this.timezone = computed(() => this.options()?.timezone?.id ?? 'local');
-        this.showTimezoneIndicator = computed(() => this.timezone() !== 'local');
+        // protected readonly showTimezoneIndicator: Signal<boolean> = computed(() => this.timezone() !== 'local');
         this.displayTimezone = computed(() => {
             const tz = this.timezone();
             if (tz === 'local')
@@ -1354,11 +857,11 @@ class AXPClockCalendarWidgetViewComponent extends AXPValueWidgetComponent {
         return days[this.currentDate.getDay()];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPClockCalendarWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPClockCalendarWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-clock-calendar-container\">\n  <!-- Timezone indicator (only shown when not local) -->\n  @if (showTimezoneIndicator()) {\n  <div class=\"axp-clock-calendar-timezone-badge\"><i class=\"fa-solid fa-globe\"></i> {{ displayTimezone() }}</div>\n  }\n\n  <!-- Day of week display -->\n  @if (showDayOfWeek()) {\n  <div class=\"axp-clock-calendar-day-label\">{{ getDayOfWeek() }}</div>\n  }\n\n  <div class=\"axp-clock-calendar-content\">\n    <!-- Digital Clock Display -->\n    @if (showDigitalClock()) {\n    <div class=\"axp-clock-calendar-digital-clock\">\n      {{ currentTime | format : 'datetime' : timeFormat() | async }}\n    </div>\n    }\n\n    <!-- Analog Clock Display -->\n    @if (showAnalogClock()) {\n    <div class=\"axp-clock-calendar-analog-clock\">\n      <!-- Hour markers -->\n      @for (hour of clockHours; track hour) {\n      <div\n        class=\"axp-clock-calendar-hour-marker\"\n        [style.transform]=\"'rotate(' + hour * 30 + 'deg) translateY(-80px)'\"\n      ></div>\n      }\n\n      <!-- Clock Numbers -->\n      <div class=\"axp-clock-calendar-numbers-container\">\n        @for (hour of clockHourNumbers; track hour) {\n        <div\n          class=\"axp-clock-calendar-hour-number\"\n          [style.transform]=\"'rotate(' + hour.angle + 'deg) translateY(-82px)'\"\n        >\n          <span [style.transform]=\"'rotate(' + -hour.angle + 'deg)'\">{{ hour.number }}</span>\n        </div>\n        }\n      </div>\n\n      <!-- Clock Hands -->\n      <div class=\"axp-clock-calendar-hands-container\">\n        <div class=\"axp-clock-calendar-hour-hand\" [style.transform]=\"'rotate(' + hourRotation + 'deg)'\"></div>\n        <div class=\"axp-clock-calendar-minute-hand\" [style.transform]=\"'rotate(' + minuteRotation + 'deg)'\"></div>\n        @if (showSeconds()) {\n        <div class=\"axp-clock-calendar-second-hand\" [style.transform]=\"'rotate(' + secondRotation + 'deg)'\"></div>\n        }\n        <div class=\"axp-clock-calendar-center-dot\"></div>\n      </div>\n    </div>\n    }\n\n    <!-- Date Display -->\n    @if (showDate()) {\n    <div class=\"axp-clock-calendar-date-display\">\n      <i class=\"fa-regular fa-calendar\"></i>\n      {{ currentDate | format : 'datetime' : dateFormat() | async }}\n    </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.axp-clock-calendar-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:1rem;position:relative;overflow:hidden;box-shadow:var(--ax-shadow-sm);background-color:var(--ax-surface-color);color:var(--ax-text-color)}.axp-clock-calendar-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;width:100%;height:100%;position:relative}.axp-clock-calendar-timezone-badge{position:absolute;top:.5rem;right:.5rem;font-size:.75rem;padding:.25rem;border-radius:1rem;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-timezone-badge:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-timezone-badge{display:flex;align-items:center;gap:.25rem}.axp-clock-calendar-timezone-badge i{font-size:.75rem}.axp-clock-calendar-day-label{font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.05rem;margin-bottom:.25rem}.axp-clock-calendar-digital-clock{font-size:1.5rem;font-weight:500;letter-spacing:.05rem;font-family:monospace;padding:.5rem .75rem;border-radius:.25rem}.axp-clock-calendar-analog-clock{position:relative;border-radius:50%;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-analog-clock:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-analog-clock{display:flex;align-items:center;justify-content:center;background:var(--ax-surface-color);width:min(180px,100%);height:0;padding-bottom:min(180px,100%);margin:.5rem auto;min-width:120px;min-height:120px;box-shadow:var(--ax-shadow-sm)}.axp-clock-calendar-hands-container,.axp-clock-calendar-numbers-container{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%}.axp-clock-calendar-hour-marker{position:absolute;left:50%;top:50%;width:2px;height:4%;margin-left:-1px;border-radius:1px;background-color:var(--ax-text-muted);transform-origin:50% 0}.axp-clock-calendar-hour-number{position:absolute;left:50%;top:50%;transform-origin:50% 0;font-size:clamp(.7rem,2.5vw,.9rem);font-weight:600;color:var(--ax-text-color)}.axp-clock-calendar-hour-number span{display:block}.axp-clock-calendar-hour-hand{position:absolute;top:50%;left:50%;width:4px;height:25%;margin-left:-2px;background-color:rgba(23,23,23,.75)}.axp-clock-calendar-hour-hand:is(.ax-dark *){background-color:rgba(245,245,245,.75)}.axp-clock-calendar-hour-hand{transform-origin:50% 0;border-radius:3px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-minute-hand{position:absolute;top:50%;left:50%;width:3px;height:38%;margin-left:-1.5px;background-color:rgba(23,23,23,.5)}.axp-clock-calendar-minute-hand:is(.ax-dark *){background-color:rgba(245,245,245,.5)}.axp-clock-calendar-minute-hand{transform-origin:50% 0;border-radius:2px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-second-hand{position:absolute;top:50%;left:50%;width:2px;height:42%;margin-left:-1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-500),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-400),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand{transform-origin:50% 0;border-radius:1px;box-shadow:0 0 3px rgba(0,0,0,.2)}.axp-clock-calendar-center-dot{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;margin-top:-5px;margin-left:-5px;background-color:#d81159;border:2px solid var(--ax-surface-color);box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-date-display{display:flex;align-items:center;gap:.5rem;font-size:.85rem;padding:.25rem .6rem;border-radius:.25rem;background-color:var(--ax-surface-hover);color:var(--ax-text-color)}.axp-clock-calendar-date-display i{font-size:.85rem;opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i2$1.AXFormatPipe, name: "format" }, { kind: "ngmodule", type: AXTagModule }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPClockCalendarWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-clock-calendar-container\">\n  <!-- Timezone indicator (only shown when not local) -->\n  <!-- @if (showTimezoneIndicator()) {\n  <div class=\"axp-clock-calendar-timezone-badge\"><i class=\"fa-solid fa-globe\"></i> {{ displayTimezone() }}</div>\n  } -->\n\n  <!-- Day of week display -->\n  @if (showDayOfWeek()) {\n  <div class=\"axp-clock-calendar-day-label\">{{ getDayOfWeek() }}</div>\n  }\n\n  <div class=\"axp-clock-calendar-content\">\n    <!-- Digital Clock Display -->\n    @if (showDigitalClock()) {\n    <div class=\"axp-clock-calendar-digital-clock\">\n      {{ currentTime | format : 'datetime' : timeFormat() | async }}\n    </div>\n    }\n\n    <!-- Analog Clock Display -->\n    @if (showAnalogClock()) {\n    <div class=\"axp-clock-calendar-analog-clock\">\n      <!-- Hour markers -->\n      @for (hour of clockHours; track hour) {\n      <div\n        class=\"axp-clock-calendar-hour-marker\"\n        [style.transform]=\"'rotate(' + hour * 30 + 'deg) translateY(-80px)'\"\n      ></div>\n      }\n\n      <!-- Clock Numbers -->\n      <div class=\"axp-clock-calendar-numbers-container\">\n        @for (hour of clockHourNumbers; track hour) {\n        <div\n          class=\"axp-clock-calendar-hour-number\"\n          [style.transform]=\"'rotate(' + hour.angle + 'deg) translateY(-82px)'\"\n        >\n          <span [style.transform]=\"'rotate(' + -hour.angle + 'deg)'\">{{ hour.number }}</span>\n        </div>\n        }\n      </div>\n\n      <!-- Clock Hands -->\n      <div class=\"axp-clock-calendar-hands-container\">\n        <div class=\"axp-clock-calendar-hour-hand\" [style.transform]=\"'rotate(' + hourRotation + 'deg)'\"></div>\n        <div class=\"axp-clock-calendar-minute-hand\" [style.transform]=\"'rotate(' + minuteRotation + 'deg)'\"></div>\n        @if (showSeconds()) {\n        <div class=\"axp-clock-calendar-second-hand\" [style.transform]=\"'rotate(' + secondRotation + 'deg)'\"></div>\n        }\n        <div class=\"axp-clock-calendar-center-dot\"></div>\n      </div>\n    </div>\n    }\n\n    <!-- Date Display -->\n    @if (showDate()) {\n    <div class=\"axp-clock-calendar-date-display\">\n      <i class=\"fa-regular fa-calendar\"></i>\n      {{ currentDate | format : 'datetime' : dateFormat() | async }}\n    </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.axp-clock-calendar-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:1rem;position:relative;overflow:hidden;box-shadow:var(--ax-shadow-sm);background-color:var(--ax-surface-color);color:var(--ax-text-color)}.axp-clock-calendar-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;width:100%;height:100%;position:relative}.axp-clock-calendar-timezone-badge{position:absolute;top:.5rem;right:.5rem;font-size:.75rem;padding:.25rem;border-radius:1rem;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-timezone-badge:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-timezone-badge{display:flex;align-items:center;gap:.25rem}.axp-clock-calendar-timezone-badge i{font-size:.75rem}.axp-clock-calendar-day-label{font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.05rem;margin-bottom:.25rem}.axp-clock-calendar-digital-clock{font-size:1.5rem;font-weight:500;letter-spacing:.05rem;font-family:monospace;padding:.5rem .75rem;border-radius:.25rem}.axp-clock-calendar-analog-clock{position:relative;border-radius:50%;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-analog-clock:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-analog-clock{display:flex;align-items:center;justify-content:center;background:var(--ax-surface-color);width:min(180px,100%);height:0;padding-bottom:min(180px,100%);margin:.5rem auto;min-width:120px;min-height:120px;box-shadow:var(--ax-shadow-sm)}.axp-clock-calendar-hands-container,.axp-clock-calendar-numbers-container{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%}.axp-clock-calendar-hour-marker{position:absolute;left:50%;top:50%;width:2px;height:4%;margin-left:-1px;border-radius:1px;background-color:var(--ax-text-muted);transform-origin:50% 0}.axp-clock-calendar-hour-number{position:absolute;left:50%;top:50%;transform-origin:50% 0;font-size:clamp(.7rem,2.5vw,.9rem);font-weight:600;color:var(--ax-text-color)}.axp-clock-calendar-hour-number span{display:block}.axp-clock-calendar-hour-hand{position:absolute;top:50%;left:50%;width:4px;height:25%;margin-left:-2px;background-color:rgba(23,23,23,.75)}.axp-clock-calendar-hour-hand:is(.ax-dark *){background-color:rgba(245,245,245,.75)}.axp-clock-calendar-hour-hand{transform-origin:50% 0;border-radius:3px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-minute-hand{position:absolute;top:50%;left:50%;width:3px;height:38%;margin-left:-1.5px;background-color:rgba(23,23,23,.5)}.axp-clock-calendar-minute-hand:is(.ax-dark *){background-color:rgba(245,245,245,.5)}.axp-clock-calendar-minute-hand{transform-origin:50% 0;border-radius:2px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-second-hand{position:absolute;top:50%;left:50%;width:2px;height:42%;margin-left:-1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-500),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-400),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand{transform-origin:50% 0;border-radius:1px;box-shadow:0 0 3px rgba(0,0,0,.2)}.axp-clock-calendar-center-dot{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;margin-top:-5px;margin-left:-5px;background-color:#d81159;border:2px solid var(--ax-surface-color);box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-date-display{display:flex;align-items:center;gap:.5rem;font-size:.85rem;padding:.25rem .6rem;border-radius:.25rem;background-color:var(--ax-surface-hover);color:var(--ax-text-color)}.axp-clock-calendar-date-display i{font-size:.85rem;opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i2.AXFormatPipe, name: "format" }, { kind: "ngmodule", type: AXTagModule }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPClockCalendarWidgetViewComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, AXDateTimeModule, AXFormatModule, AXTagModule, AXDecoratorModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-clock-calendar-container\">\n  <!-- Timezone indicator (only shown when not local) -->\n  @if (showTimezoneIndicator()) {\n  <div class=\"axp-clock-calendar-timezone-badge\"><i class=\"fa-solid fa-globe\"></i> {{ displayTimezone() }}</div>\n  }\n\n  <!-- Day of week display -->\n  @if (showDayOfWeek()) {\n  <div class=\"axp-clock-calendar-day-label\">{{ getDayOfWeek() }}</div>\n  }\n\n  <div class=\"axp-clock-calendar-content\">\n    <!-- Digital Clock Display -->\n    @if (showDigitalClock()) {\n    <div class=\"axp-clock-calendar-digital-clock\">\n      {{ currentTime | format : 'datetime' : timeFormat() | async }}\n    </div>\n    }\n\n    <!-- Analog Clock Display -->\n    @if (showAnalogClock()) {\n    <div class=\"axp-clock-calendar-analog-clock\">\n      <!-- Hour markers -->\n      @for (hour of clockHours; track hour) {\n      <div\n        class=\"axp-clock-calendar-hour-marker\"\n        [style.transform]=\"'rotate(' + hour * 30 + 'deg) translateY(-80px)'\"\n      ></div>\n      }\n\n      <!-- Clock Numbers -->\n      <div class=\"axp-clock-calendar-numbers-container\">\n        @for (hour of clockHourNumbers; track hour) {\n        <div\n          class=\"axp-clock-calendar-hour-number\"\n          [style.transform]=\"'rotate(' + hour.angle + 'deg) translateY(-82px)'\"\n        >\n          <span [style.transform]=\"'rotate(' + -hour.angle + 'deg)'\">{{ hour.number }}</span>\n        </div>\n        }\n      </div>\n\n      <!-- Clock Hands -->\n      <div class=\"axp-clock-calendar-hands-container\">\n        <div class=\"axp-clock-calendar-hour-hand\" [style.transform]=\"'rotate(' + hourRotation + 'deg)'\"></div>\n        <div class=\"axp-clock-calendar-minute-hand\" [style.transform]=\"'rotate(' + minuteRotation + 'deg)'\"></div>\n        @if (showSeconds()) {\n        <div class=\"axp-clock-calendar-second-hand\" [style.transform]=\"'rotate(' + secondRotation + 'deg)'\"></div>\n        }\n        <div class=\"axp-clock-calendar-center-dot\"></div>\n      </div>\n    </div>\n    }\n\n    <!-- Date Display -->\n    @if (showDate()) {\n    <div class=\"axp-clock-calendar-date-display\">\n      <i class=\"fa-regular fa-calendar\"></i>\n      {{ currentDate | format : 'datetime' : dateFormat() | async }}\n    </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.axp-clock-calendar-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:1rem;position:relative;overflow:hidden;box-shadow:var(--ax-shadow-sm);background-color:var(--ax-surface-color);color:var(--ax-text-color)}.axp-clock-calendar-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;width:100%;height:100%;position:relative}.axp-clock-calendar-timezone-badge{position:absolute;top:.5rem;right:.5rem;font-size:.75rem;padding:.25rem;border-radius:1rem;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-timezone-badge:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-timezone-badge{display:flex;align-items:center;gap:.25rem}.axp-clock-calendar-timezone-badge i{font-size:.75rem}.axp-clock-calendar-day-label{font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.05rem;margin-bottom:.25rem}.axp-clock-calendar-digital-clock{font-size:1.5rem;font-weight:500;letter-spacing:.05rem;font-family:monospace;padding:.5rem .75rem;border-radius:.25rem}.axp-clock-calendar-analog-clock{position:relative;border-radius:50%;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-analog-clock:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-analog-clock{display:flex;align-items:center;justify-content:center;background:var(--ax-surface-color);width:min(180px,100%);height:0;padding-bottom:min(180px,100%);margin:.5rem auto;min-width:120px;min-height:120px;box-shadow:var(--ax-shadow-sm)}.axp-clock-calendar-hands-container,.axp-clock-calendar-numbers-container{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%}.axp-clock-calendar-hour-marker{position:absolute;left:50%;top:50%;width:2px;height:4%;margin-left:-1px;border-radius:1px;background-color:var(--ax-text-muted);transform-origin:50% 0}.axp-clock-calendar-hour-number{position:absolute;left:50%;top:50%;transform-origin:50% 0;font-size:clamp(.7rem,2.5vw,.9rem);font-weight:600;color:var(--ax-text-color)}.axp-clock-calendar-hour-number span{display:block}.axp-clock-calendar-hour-hand{position:absolute;top:50%;left:50%;width:4px;height:25%;margin-left:-2px;background-color:rgba(23,23,23,.75)}.axp-clock-calendar-hour-hand:is(.ax-dark *){background-color:rgba(245,245,245,.75)}.axp-clock-calendar-hour-hand{transform-origin:50% 0;border-radius:3px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-minute-hand{position:absolute;top:50%;left:50%;width:3px;height:38%;margin-left:-1.5px;background-color:rgba(23,23,23,.5)}.axp-clock-calendar-minute-hand:is(.ax-dark *){background-color:rgba(245,245,245,.5)}.axp-clock-calendar-minute-hand{transform-origin:50% 0;border-radius:2px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-second-hand{position:absolute;top:50%;left:50%;width:2px;height:42%;margin-left:-1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-500),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-400),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand{transform-origin:50% 0;border-radius:1px;box-shadow:0 0 3px rgba(0,0,0,.2)}.axp-clock-calendar-center-dot{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;margin-top:-5px;margin-left:-5px;background-color:#d81159;border:2px solid var(--ax-surface-color);box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-date-display{display:flex;align-items:center;gap:.5rem;font-size:.85rem;padding:.25rem .6rem;border-radius:.25rem;background-color:var(--ax-surface-hover);color:var(--ax-text-color)}.axp-clock-calendar-date-display i{font-size:.85rem;opacity:.7}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, AXDateTimeModule, AXFormatModule, AXTagModule, AXDecoratorModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-clock-calendar-container\">\n  <!-- Timezone indicator (only shown when not local) -->\n  <!-- @if (showTimezoneIndicator()) {\n  <div class=\"axp-clock-calendar-timezone-badge\"><i class=\"fa-solid fa-globe\"></i> {{ displayTimezone() }}</div>\n  } -->\n\n  <!-- Day of week display -->\n  @if (showDayOfWeek()) {\n  <div class=\"axp-clock-calendar-day-label\">{{ getDayOfWeek() }}</div>\n  }\n\n  <div class=\"axp-clock-calendar-content\">\n    <!-- Digital Clock Display -->\n    @if (showDigitalClock()) {\n    <div class=\"axp-clock-calendar-digital-clock\">\n      {{ currentTime | format : 'datetime' : timeFormat() | async }}\n    </div>\n    }\n\n    <!-- Analog Clock Display -->\n    @if (showAnalogClock()) {\n    <div class=\"axp-clock-calendar-analog-clock\">\n      <!-- Hour markers -->\n      @for (hour of clockHours; track hour) {\n      <div\n        class=\"axp-clock-calendar-hour-marker\"\n        [style.transform]=\"'rotate(' + hour * 30 + 'deg) translateY(-80px)'\"\n      ></div>\n      }\n\n      <!-- Clock Numbers -->\n      <div class=\"axp-clock-calendar-numbers-container\">\n        @for (hour of clockHourNumbers; track hour) {\n        <div\n          class=\"axp-clock-calendar-hour-number\"\n          [style.transform]=\"'rotate(' + hour.angle + 'deg) translateY(-82px)'\"\n        >\n          <span [style.transform]=\"'rotate(' + -hour.angle + 'deg)'\">{{ hour.number }}</span>\n        </div>\n        }\n      </div>\n\n      <!-- Clock Hands -->\n      <div class=\"axp-clock-calendar-hands-container\">\n        <div class=\"axp-clock-calendar-hour-hand\" [style.transform]=\"'rotate(' + hourRotation + 'deg)'\"></div>\n        <div class=\"axp-clock-calendar-minute-hand\" [style.transform]=\"'rotate(' + minuteRotation + 'deg)'\"></div>\n        @if (showSeconds()) {\n        <div class=\"axp-clock-calendar-second-hand\" [style.transform]=\"'rotate(' + secondRotation + 'deg)'\"></div>\n        }\n        <div class=\"axp-clock-calendar-center-dot\"></div>\n      </div>\n    </div>\n    }\n\n    <!-- Date Display -->\n    @if (showDate()) {\n    <div class=\"axp-clock-calendar-date-display\">\n      <i class=\"fa-regular fa-calendar\"></i>\n      {{ currentDate | format : 'datetime' : dateFormat() | async }}\n    </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.axp-clock-calendar-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:1rem;position:relative;overflow:hidden;box-shadow:var(--ax-shadow-sm);background-color:var(--ax-surface-color);color:var(--ax-text-color)}.axp-clock-calendar-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;width:100%;height:100%;position:relative}.axp-clock-calendar-timezone-badge{position:absolute;top:.5rem;right:.5rem;font-size:.75rem;padding:.25rem;border-radius:1rem;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-timezone-badge:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-timezone-badge{display:flex;align-items:center;gap:.25rem}.axp-clock-calendar-timezone-badge i{font-size:.75rem}.axp-clock-calendar-day-label{font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.05rem;margin-bottom:.25rem}.axp-clock-calendar-digital-clock{font-size:1.5rem;font-weight:500;letter-spacing:.05rem;font-family:monospace;padding:.5rem .75rem;border-radius:.25rem}.axp-clock-calendar-analog-clock{position:relative;border-radius:50%;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-analog-clock:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-analog-clock{display:flex;align-items:center;justify-content:center;background:var(--ax-surface-color);width:min(180px,100%);height:0;padding-bottom:min(180px,100%);margin:.5rem auto;min-width:120px;min-height:120px;box-shadow:var(--ax-shadow-sm)}.axp-clock-calendar-hands-container,.axp-clock-calendar-numbers-container{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%}.axp-clock-calendar-hour-marker{position:absolute;left:50%;top:50%;width:2px;height:4%;margin-left:-1px;border-radius:1px;background-color:var(--ax-text-muted);transform-origin:50% 0}.axp-clock-calendar-hour-number{position:absolute;left:50%;top:50%;transform-origin:50% 0;font-size:clamp(.7rem,2.5vw,.9rem);font-weight:600;color:var(--ax-text-color)}.axp-clock-calendar-hour-number span{display:block}.axp-clock-calendar-hour-hand{position:absolute;top:50%;left:50%;width:4px;height:25%;margin-left:-2px;background-color:rgba(23,23,23,.75)}.axp-clock-calendar-hour-hand:is(.ax-dark *){background-color:rgba(245,245,245,.75)}.axp-clock-calendar-hour-hand{transform-origin:50% 0;border-radius:3px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-minute-hand{position:absolute;top:50%;left:50%;width:3px;height:38%;margin-left:-1.5px;background-color:rgba(23,23,23,.5)}.axp-clock-calendar-minute-hand:is(.ax-dark *){background-color:rgba(245,245,245,.5)}.axp-clock-calendar-minute-hand{transform-origin:50% 0;border-radius:2px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-second-hand{position:absolute;top:50%;left:50%;width:2px;height:42%;margin-left:-1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-500),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-400),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand{transform-origin:50% 0;border-radius:1px;box-shadow:0 0 3px rgba(0,0,0,.2)}.axp-clock-calendar-center-dot{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;margin-top:-5px;margin-left:-5px;background-color:#d81159;border:2px solid var(--ax-surface-color);box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-date-display{display:flex;align-items:center;gap:.5rem;font-size:.85rem;padding:.25rem .6rem;border-radius:.25rem;background-color:var(--ax-surface-hover);color:var(--ax-text-color)}.axp-clock-calendar-date-display i{font-size:.85rem;opacity:.7}\n"] }]
         }] });
 
 var clockCalendarWidget_component = /*#__PURE__*/Object.freeze({
@@ -1407,6 +910,25 @@ const AXPClockCalendarWidget = {
     type: 'dashboard',
     icon: 'fa-light fa-clock',
     properties: [
+        // ====== Title ======
+        {
+            name: 'title',
+            title: 'Chart Title',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: '',
+                dataType: 'string',
+                interface: {
+                    name: 'title',
+                    path: 'options.title',
+                    type: AXPWidgetsCatalog.text,
+                    options: {
+                        placeholder: 'Enter chart title',
+                    },
+                },
+            },
+            visible: true,
+        },
         // ====== Display Settings ======
         {
             name: 'displayLayout',
@@ -1564,407 +1086,21 @@ const AXPClockCalendarWidget = {
  * Donut Chart Widget Component
  * Displays data in a circular donut chart with interactive segments
  */
-class AXPDonutChartWidgetViewComponent extends AXPChartBaseComponent {
+class AXPDonutChartWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
-        this.segmentClick = output();
-        // Chart reference and D3 related properties
-        this.cdr = inject(ChangeDetectorRef);
-        this.chartContainerEl = viewChild.required('chartContainer');
-        this.pieData = [];
-        // State management
-        this.hiddenSegments = new Set();
-        // Tooltip state
-        this._tooltipVisible = signal(false);
-        this._tooltipPosition = signal({ x: 0, y: 0 });
-        this._tooltipData = signal({
-            title: '',
-            value: 0,
-            percentage: '0%',
-            color: '',
-        });
-        // Public computed properties for the template
-        this.tooltipVisible = computed(() => this._tooltipVisible());
-        this.tooltipPosition = computed(() => this._tooltipPosition());
-        this.tooltipData = computed(() => this._tooltipData());
-        // Computed configuration options
-        this.showLegend = computed(() => this.options()['showLegend'] !== false);
-        this.showTooltip = computed(() => this.options()['showTooltip'] !== false);
-        this.legendPosition = computed(() => this.options()['legendPosition']?.id || 'right');
-        this.donutWidth = computed(() => this.options()['donutWidth'] ?? 35);
-        this.cornerRadius = computed(() => this.options()['cornerRadius'] ?? 4);
-        // Data accessor for handling different incoming data formats
-        this.chartDataArray = computed(() => {
-            const data = this.chartData();
-            if (data === null || data === undefined) {
-                return [];
-            }
-            // Handle both array format and object format with data property
-            return Array.isArray(data) ? data : data.data || [];
-        });
-    }
-    getColor(index) {
-        return AXPChartColors.getColor(index);
-    }
-    isSegmentHidden(id) {
-        return this.hiddenSegments.has(id);
-    }
-    // Event handlers
-    onSegmentClick(item) {
-        this.toggleSegment(item);
-        this.segmentClick.emit(item);
-    }
-    onLegendMouseEnter(item) {
-        if (!this.svg)
-            return;
-        // Highlight the target segment
-        this.svg
-            .selectAll('path')
-            .filter((d) => d?.data?.id === item.id)
-            .classed('axp-donut-chart-highlighted', true)
-            .attr('transform', 'scale(1.02)');
-        // Dim other segments
-        this.svg
-            .selectAll('path')
-            .filter((d) => d?.data?.id !== item.id)
-            .classed('axp-donut-chart-dimmed', true);
-    }
-    onLegendMouseLeave() {
-        if (!this.svg)
-            return;
-        // Reset all segments
-        this.svg
-            .selectAll('path')
-            .classed('axp-donut-chart-highlighted', false)
-            .classed('axp-donut-chart-dimmed', false)
-            .attr('transform', 'scale(1)');
-    }
-    // Chart lifecycle methods (implementation of base class abstract methods)
-    createChart() {
-        if (!this.d3 || !this.chartContainerEl()?.nativeElement)
-            return;
-        try {
-            const containerElement = this.chartContainerEl().nativeElement;
-            const chartElement = containerElement.querySelector('div');
-            this.clearChart(chartElement);
-            const data = this.chartDataArray();
-            if (!data || data.length === 0) {
-                this.showNoDataMessage(chartElement);
-                return;
-            }
-            const options = this.options();
-            const { width, height } = this.setupDimensions(containerElement, options);
-            this.renderDonutChart(chartElement, width, height);
-        }
-        catch (error) {
-            console.error('Error creating donut chart:', error);
-            this.handleChartError();
-        }
-    }
-    updateChart() {
-        this.createChart();
-    }
-    cleanupChart() {
-        if (this.svg) {
-            this.d3.select(this.chartContainerEl()?.nativeElement).selectAll('svg').remove();
-            this.svg = null;
-            this.pieData = [];
-        }
-        this.hiddenSegments.clear();
-        this._tooltipVisible.set(false);
-    }
-    // Private helper methods
-    clearChart(element) {
-        this.d3.select(element).selectAll('*').remove();
-    }
-    handleChartError() {
-        try {
-            const containerElement = this.chartContainerEl()?.nativeElement;
-            if (containerElement) {
-                const chartElement = containerElement.querySelector('div');
-                if (chartElement) {
-                    this.showNoDataMessage(chartElement);
-                }
-            }
-        }
-        catch (e) {
-            console.error('Failed to show no data message:', e);
-        }
-    }
-    setupDimensions(containerElement, options) {
-        const containerWidth = containerElement.clientWidth;
-        const containerHeight = containerElement.clientHeight;
-        // Ensure minimum dimensions for the chart
-        const minDim = 200;
-        const width = Math.max(options['width'] || containerWidth, minDim);
-        const height = Math.max(options['height'] || containerHeight, minDim);
-        return { width, height };
-    }
-    renderDonutChart(chartElement, width, height) {
-        const data = this.chartDataArray();
-        // Filter out hidden segments
-        const visibleData = data.filter((item) => !this.hiddenSegments.has(item.id));
-        // If all segments are hidden, show no data message and return
-        if (visibleData.length === 0) {
-            this.showAllSegmentsHiddenMessage(chartElement);
-            return;
-        }
-        const total = this.calculateTotal();
-        // Calculate chart dimensions based on legend position
-        const { chartWidth, chartHeight, translateX, translateY } = this.calculateChartLayout(width, height);
-        // Create SVG container with filters
-        const svg = this.createSvgWithFilters(chartElement, width, height);
-        // Create main chart group
-        this.svg = svg.append('g').attr('transform', `translate(${translateX}, ${translateY})`);
-        // Create donut segments
-        this.createDonutSegments(chartWidth, chartHeight, visibleData, total);
-        // Add total in center
-        this.addTotalDisplay(total);
+        this.donutChartData = computed(() => this.getValue());
+        this.donutChartOptions = computed(() => this.options());
     }
-    calculateChartLayout(width, height) {
-        const legendPosition = this.legendPosition();
-        let chartWidth = width;
-        let chartHeight = height;
-        let translateX = width / 2;
-        let translateY = height / 2;
-        if (this.showLegend()) {
-            if (legendPosition === 'right') {
-                // Reserve space for right legend
-                const legendWidth = Math.min(width * 0.3, 150);
-                chartWidth = width - legendWidth - 20;
-                translateX = (width - chartWidth) / 3 + chartWidth / 2;
-            }
-            else if (legendPosition === 'bottom') {
-                // Reserve space for bottom legend
-                const legendHeight = Math.min(height * 0.2, 80);
-                chartHeight = height - legendHeight - 20;
-                translateY = (height - chartHeight) / 3 + chartHeight / 2;
-            }
-        }
-        return { chartWidth, chartHeight, translateX, translateY };
-    }
-    createSvgWithFilters(chartElement, width, height) {
-        const svg = this.d3
-            .select(chartElement)
-            .append('svg')
-            .attr('width', width)
-            .attr('height', height)
-            .attr('viewBox', `0 0 ${width} ${height}`)
-            .attr('preserveAspectRatio', 'xMidYMid meet');
-        // Add drop shadow filter
-        const defs = svg.append('defs');
-        const filter = defs.append('filter').attr('id', 'axp-donut-chart-segment-shadow').attr('height', '130%');
-        filter.append('feGaussianBlur').attr('in', 'SourceAlpha').attr('stdDeviation', 2).attr('result', 'blur');
-        filter.append('feOffset').attr('in', 'blur').attr('dx', 1).attr('dy', 1).attr('result', 'offsetBlur');
-        const feComponentTransfer = filter
-            .append('feComponentTransfer')
-            .attr('in', 'offsetBlur')
-            .attr('result', 'offsetBlur');
-        feComponentTransfer.append('feFuncA').attr('type', 'linear').attr('slope', 0.3);
-        const feMerge = filter.append('feMerge');
-        feMerge.append('feMergeNode').attr('in', 'offsetBlur');
-        feMerge.append('feMergeNode').attr('in', 'SourceGraphic');
-        return svg;
-    }
-    createDonutSegments(chartWidth, chartHeight, data, total) {
-        // Create pie layout
-        const pie = this.d3
-            .pie()
-            .value((d) => d.value)
-            .sort(null)
-            .padAngle(0.02);
-        // Calculate the radius of the donut chart
-        const radius = (Math.min(chartWidth, chartHeight) / 2) * 0.85;
-        // Calculate inner radius based on donutWidth percentage
-        const donutWidthPercent = this.donutWidth() / 100;
-        const innerRadius = radius * (1 - donutWidthPercent);
-        // Create arc generator with the configured radius and corner radius
-        const arc = this.d3
-            .arc()
-            .innerRadius(innerRadius)
-            .outerRadius(radius * 0.95)
-            .cornerRadius(this.cornerRadius());
-        // Generate pie data
-        this.pieData = pie(data);
-        // Create color scale
-        const colorScale = this.setupColorScale(this.chartDataArray());
-        // Add segments with animation
-        this.addSegmentsWithAnimation(arc, colorScale, total);
-    }
-    setupColorScale(data) {
-        return this.d3
-            .scaleOrdinal()
-            .domain(data.map((_, i) => i.toString()))
-            .range(data.map((_, i) => this.getColor(i)));
-    }
-    addSegmentsWithAnimation(arc, colorScale, total) {
-        // Add segments
-        const segments = this.svg
-            .selectAll('path')
-            .data(this.pieData)
-            .enter()
-            .append('path')
-            .attr('class', 'axp-donut-chart-segment')
-            .attr('fill', (d, i) => colorScale(i.toString()))
-            .style('opacity', 0)
-            .on('click', (event, d) => this.onSegmentClick(d.data))
-            .on('mousemove', (event, d) => this.handleSegmentHover(event, d, total))
-            .on('mouseleave', () => this._tooltipVisible.set(false));
-        // Animate segments
-        segments
-            .transition()
-            .duration(800)
-            .ease(this.d3.easeCubicOut)
-            .delay((d, i) => i * 50)
-            .style('opacity', 1)
-            .attrTween('d', (d) => {
-            const interpolate = this.d3.interpolate({ startAngle: d.startAngle, endAngle: d.startAngle }, d);
-            return (t) => arc(interpolate(t));
-        });
-    }
-    handleSegmentHover(event, datum, total) {
-        if (!this.showTooltip())
-            return;
-        const percentage = ((datum.data.value / total) * 100).toFixed(1);
-        const segmentColor = this.getColor(this.chartDataArray().findIndex((item) => item.id === datum.data.id));
-        this._tooltipData.set({
-            title: datum.data.name,
-            value: datum.data.value,
-            percentage: `${percentage}%`,
-            color: segmentColor,
-        });
-        this.updateTooltipPosition(event);
-        this._tooltipVisible.set(true);
-    }
-    updateTooltipPosition(event) {
-        const container = this.chartContainerEl().nativeElement.getBoundingClientRect();
-        const x = event.clientX - container.left;
-        const y = event.clientY - container.top;
-        this._tooltipPosition.set({
-            x: x,
-            y: y,
-        });
-    }
-    toggleSegment(item) {
-        if (this.hiddenSegments.has(item.id)) {
-            this.hiddenSegments.delete(item.id);
-        }
-        else {
-            this.hiddenSegments.add(item.id);
-        }
-        // Hide tooltip when toggling segments
-        this._tooltipVisible.set(false);
-        this.updateChart();
-    }
-    calculateTotal() {
-        return this.chartDataArray()
-            .filter((item) => !this.hiddenSegments.has(item.id))
-            .reduce((sum, item) => sum + item.value, 0);
-    }
-    showNoDataMessage(containerElement) {
-        const messageContainer = this.d3
-            .select(containerElement)
-            .append('div')
-            .attr('class', 'axp-donut-chart-no-data-message')
-            .style('width', 'auto')
-            .style('text-align', 'center');
-        // Add an icon
-        messageContainer
-            .append('div')
-            .attr('class', 'axp-donut-chart-no-data-icon')
-            .html('<i class="fa-light fa-chart-pie-simple fa-2x"></i>');
-        // Add text message and help text
-        messageContainer.append('div').attr('class', 'axp-donut-chart-no-data-text').text('No data available');
-        messageContainer
-            .append('div')
-            .attr('class', 'axp-donut-chart-no-data-help')
-            .text('Please provide data in the correct format');
-        // Position in center
-        const container = containerElement.getBoundingClientRect();
-        messageContainer.style('left', `${container.width / 2}px`).style('top', `${container.height / 2}px`);
-    }
-    // Add method to show message when all segments are hidden
-    showAllSegmentsHiddenMessage(containerElement) {
-        this.clearChart(containerElement);
-        // Add a simple div to ensure proper positioning
-        const wrapper = this.d3
-            .select(containerElement)
-            .append('div')
-            .style('position', 'relative')
-            .style('width', '100%')
-            .style('height', '100%');
-        const messageContainer = wrapper
-            .append('div')
-            .attr('class', 'axp-donut-chart-no-data-message')
-            .style('position', 'absolute')
-            .style('left', '50%')
-            .style('top', '50%')
-            .style('transform', 'translate(-50%, -50%)')
-            .style('text-align', 'center')
-            .style('z-index', '10')
-            .style('background-color', 'rgba(255, 255, 255, 0.95)')
-            .style('padding', '1.5rem')
-            .style('border-radius', '0.5rem')
-            .style('box-shadow', '0 2px 12px rgba(0, 0, 0, 0.08)')
-            .style('width', '80%')
-            .style('max-width', '300px');
-        // Add an icon
-        messageContainer
-            .append('div')
-            .attr('class', 'axp-donut-chart-no-data-icon')
-            .style('color', 'var(--ax-text-muted, #999)')
-            .style('margin-bottom', '0.75rem')
-            .html('<i class="fa-light fa-eye-slash fa-2x"></i>');
-        // Add text message and help text
-        messageContainer
-            .append('div')
-            .attr('class', 'axp-donut-chart-no-data-text')
-            .style('font-size', '1rem')
-            .style('font-weight', '600')
-            .style('color', 'var(--ax-text-color, #333)')
-            .style('margin-bottom', '0.5rem')
-            .text('All segments are hidden');
-        messageContainer
-            .append('div')
-            .attr('class', 'axp-donut-chart-no-data-help')
-            .style('font-size', '0.8rem')
-            .style('color', 'var(--ax-text-muted, #999)')
-            .text('Click on a legend item to show data');
-    }
-    addTotalDisplay(total) {
-        if (!this.svg)
-            return;
-        // Remove any existing total display
-        this.svg.selectAll('.axp-donut-chart-total-display').remove();
-        // Create group for the total display
-        const totalDisplay = this.svg
-            .append('g')
-            .attr('class', 'axp-donut-chart-total-display')
-            .attr('text-anchor', 'middle');
-        // Add total value
-        totalDisplay
-            .append('text')
-            .attr('class', 'axp-donut-chart-total-value')
-            .style('font-size', '1.8rem')
-            .style('font-weight', '600')
-            .style('fill', 'currentColor')
-            .text(total.toLocaleString());
-        // Add "Total" label
-        totalDisplay
-            .append('text')
-            .attr('class', 'axp-donut-chart-total-label')
-            .attr('dy', '1.4em')
-            .style('font-size', '0.9rem')
-            .style('fill', 'currentColor')
-            .style('fill-opacity', '0.8')
-            .text('Total');
+    handleDonutChartSegmentClick(event) {
+        //console.log(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDonutChartWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPDonutChartWidgetViewComponent, isStandalone: true, selector: "ng-component", outputs: { segmentClick: "segmentClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-donut-chart-container\" #chartContainer>\n  <!-- Chart visualization area -->\n  <div class=\"axp-donut-chart-content\"></div>\n\n  <!-- Legend with conditional positioning -->\n  @if (showLegend()) {\n  <div\n    class=\"axp-donut-chart-legend-container\"\n    [class.axp-donut-chart-legend-right]=\"legendPosition() === 'right'\"\n    [class.axp-donut-chart-legend-bottom]=\"legendPosition() === 'bottom'\"\n  >\n    @for (item of chartDataArray(); track item.id) {\n    <div\n      class=\"axp-donut-chart-legend-item\"\n      (mouseenter)=\"onLegendMouseEnter(item)\"\n      (mouseleave)=\"onLegendMouseLeave()\"\n      (click)=\"onSegmentClick(item)\"\n      [class.axp-donut-chart-hidden]=\"isSegmentHidden(item.id)\"\n    >\n      <div class=\"axp-donut-chart-legend-color\" [style.background-color]=\"getColor($index)\"></div>\n      <span class=\"axp-donut-chart-legend-name\">{{ item.name }}</span>\n      <span class=\"axp-donut-chart-legend-value\">{{ item.value }}</span>\n    </div>\n    }\n  </div>\n  }\n\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.axp-donut-chart-container{position:relative;height:100%;width:100%;padding:1rem;border-radius:.5rem;box-shadow:var(--ax-card-shadow, 0 2px 8px rgba(0, 0, 0, .05));box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden}.axp-donut-chart-content{flex:1;width:100%;display:flex;align-items:center;justify-content:center;position:relative;min-height:0}.axp-donut-chart-legend-container{display:flex;gap:.75rem;padding:.75rem;flex-wrap:wrap;justify-content:center;font-family:var(--ax-font-family, system-ui, sans-serif);z-index:5}.axp-donut-chart-legend-right{flex-direction:column;position:absolute;right:.75rem;top:0;bottom:0;margin:auto;height:fit-content;max-height:80%;overflow-y:auto;overflow-x:hidden;padding:.75rem;background-color:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:.375rem;box-shadow:0 2px 8px rgba(0,0,0,.05);max-width:30%}.axp-donut-chart-legend-bottom{position:absolute;bottom:.5rem;left:0;right:0;margin:0 auto;width:auto;max-width:98%;flex-direction:row;flex-wrap:wrap;justify-content:center;padding:.75rem;background-color:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:.375rem;box-shadow:0 2px 8px rgba(0,0,0,.05)}.axp-donut-chart-legend-item{display:flex;align-items:center;gap:.375rem;padding:.25rem .5rem;border-radius:.375rem;cursor:pointer;transition:all .2s ease;white-space:nowrap;font-size:.875rem}.axp-donut-chart-legend-item:hover{background-color:var(--ax-hover-bg, rgba(0, 0, 0, .05));transform:translateY(-1px)}.axp-donut-chart-legend-item.axp-donut-chart-hidden{opacity:.5}.axp-donut-chart-legend-color{min-width:10px;min-height:10px;width:10px;height:10px;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.1)}.axp-donut-chart-legend-name{font-size:.875rem;font-weight:500;color:var(--ax-text-color, #333)}.axp-donut-chart-legend-value{font-size:.875rem;opacity:.7;margin-left:4px;font-weight:400;color:var(--ax-text-muted, #666)}.axp-donut-chart-no-data-message{position:absolute;text-align:center;transform:translate(-50%,-50%);font-family:var(--ax-font-family, system-ui, sans-serif);background-color:rgba(255,255,255,.9);padding:1.5rem;border-radius:.5rem;box-shadow:0 2px 12px rgba(0,0,0,.08);width:80%;max-width:300px}.axp-donut-chart-no-data-message .axp-donut-chart-no-data-icon{color:var(--ax-text-muted, #999);margin-bottom:.75rem}.axp-donut-chart-no-data-message .axp-donut-chart-no-data-text{font-size:1rem;font-weight:600;color:var(--ax-text-color, #333);margin-bottom:.5rem}.axp-donut-chart-no-data-message .axp-donut-chart-no-data-help{font-size:.8rem;color:var(--ax-text-muted, #999)}.axp-donut-chart-segment{cursor:pointer;transition:all .3s cubic-bezier(.25,.8,.25,1);stroke:#fff;stroke-width:1.5px;filter:drop-shadow(0px 1px 2px rgba(0,0,0,.1))}.axp-donut-chart-segment:hover{opacity:.92;filter:drop-shadow(0px 3px 5px rgba(0,0,0,.15));transform:scale(1.01)}.axp-donut-chart-highlighted{opacity:1;filter:brightness(1.05) drop-shadow(0px 3px 5px rgba(0,0,0,.15));transform:scale(1.02)}.axp-donut-chart-dimmed{opacity:.4}.axp-donut-chart-total-display{pointer-events:none}.axp-donut-chart-total-value{fill:currentColor}.axp-donut-chart-total-label{fill:currentColor;opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPDonutChartWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ax-donut-chart\n  [data]=\"donutChartData()\"\n  [options]=\"donutChartOptions()\"\n  (segmentClick)=\"handleDonutChartSegmentClick($event)\"\n></ax-donut-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: AXDonutChartComponent, selector: "ax-donut-chart", inputs: ["data", "options"], outputs: ["segmentClick", "segmentHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDonutChartWidgetViewComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, AXPChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-donut-chart-container\" #chartContainer>\n  <!-- Chart visualization area -->\n  <div class=\"axp-donut-chart-content\"></div>\n\n  <!-- Legend with conditional positioning -->\n  @if (showLegend()) {\n  <div\n    class=\"axp-donut-chart-legend-container\"\n    [class.axp-donut-chart-legend-right]=\"legendPosition() === 'right'\"\n    [class.axp-donut-chart-legend-bottom]=\"legendPosition() === 'bottom'\"\n  >\n    @for (item of chartDataArray(); track item.id) {\n    <div\n      class=\"axp-donut-chart-legend-item\"\n      (mouseenter)=\"onLegendMouseEnter(item)\"\n      (mouseleave)=\"onLegendMouseLeave()\"\n      (click)=\"onSegmentClick(item)\"\n      [class.axp-donut-chart-hidden]=\"isSegmentHidden(item.id)\"\n    >\n      <div class=\"axp-donut-chart-legend-color\" [style.background-color]=\"getColor($index)\"></div>\n      <span class=\"axp-donut-chart-legend-name\">{{ item.name }}</span>\n      <span class=\"axp-donut-chart-legend-value\">{{ item.value }}</span>\n    </div>\n    }\n  </div>\n  }\n\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.axp-donut-chart-container{position:relative;height:100%;width:100%;padding:1rem;border-radius:.5rem;box-shadow:var(--ax-card-shadow, 0 2px 8px rgba(0, 0, 0, .05));box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden}.axp-donut-chart-content{flex:1;width:100%;display:flex;align-items:center;justify-content:center;position:relative;min-height:0}.axp-donut-chart-legend-container{display:flex;gap:.75rem;padding:.75rem;flex-wrap:wrap;justify-content:center;font-family:var(--ax-font-family, system-ui, sans-serif);z-index:5}.axp-donut-chart-legend-right{flex-direction:column;position:absolute;right:.75rem;top:0;bottom:0;margin:auto;height:fit-content;max-height:80%;overflow-y:auto;overflow-x:hidden;padding:.75rem;background-color:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:.375rem;box-shadow:0 2px 8px rgba(0,0,0,.05);max-width:30%}.axp-donut-chart-legend-bottom{position:absolute;bottom:.5rem;left:0;right:0;margin:0 auto;width:auto;max-width:98%;flex-direction:row;flex-wrap:wrap;justify-content:center;padding:.75rem;background-color:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:.375rem;box-shadow:0 2px 8px rgba(0,0,0,.05)}.axp-donut-chart-legend-item{display:flex;align-items:center;gap:.375rem;padding:.25rem .5rem;border-radius:.375rem;cursor:pointer;transition:all .2s ease;white-space:nowrap;font-size:.875rem}.axp-donut-chart-legend-item:hover{background-color:var(--ax-hover-bg, rgba(0, 0, 0, .05));transform:translateY(-1px)}.axp-donut-chart-legend-item.axp-donut-chart-hidden{opacity:.5}.axp-donut-chart-legend-color{min-width:10px;min-height:10px;width:10px;height:10px;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.1)}.axp-donut-chart-legend-name{font-size:.875rem;font-weight:500;color:var(--ax-text-color, #333)}.axp-donut-chart-legend-value{font-size:.875rem;opacity:.7;margin-left:4px;font-weight:400;color:var(--ax-text-muted, #666)}.axp-donut-chart-no-data-message{position:absolute;text-align:center;transform:translate(-50%,-50%);font-family:var(--ax-font-family, system-ui, sans-serif);background-color:rgba(255,255,255,.9);padding:1.5rem;border-radius:.5rem;box-shadow:0 2px 12px rgba(0,0,0,.08);width:80%;max-width:300px}.axp-donut-chart-no-data-message .axp-donut-chart-no-data-icon{color:var(--ax-text-muted, #999);margin-bottom:.75rem}.axp-donut-chart-no-data-message .axp-donut-chart-no-data-text{font-size:1rem;font-weight:600;color:var(--ax-text-color, #333);margin-bottom:.5rem}.axp-donut-chart-no-data-message .axp-donut-chart-no-data-help{font-size:.8rem;color:var(--ax-text-muted, #999)}.axp-donut-chart-segment{cursor:pointer;transition:all .3s cubic-bezier(.25,.8,.25,1);stroke:#fff;stroke-width:1.5px;filter:drop-shadow(0px 1px 2px rgba(0,0,0,.1))}.axp-donut-chart-segment:hover{opacity:.92;filter:drop-shadow(0px 3px 5px rgba(0,0,0,.15));transform:scale(1.01)}.axp-donut-chart-highlighted{opacity:1;filter:brightness(1.05) drop-shadow(0px 3px 5px rgba(0,0,0,.15));transform:scale(1.02)}.axp-donut-chart-dimmed{opacity:.4}.axp-donut-chart-total-display{pointer-events:none}.axp-donut-chart-total-value{fill:currentColor}.axp-donut-chart-total-label{fill:currentColor;opacity:.8}\n"] }]
+            args: [{ imports: [AXDonutChartComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-donut-chart\n  [data]=\"donutChartData()\"\n  [options]=\"donutChartOptions()\"\n  (segmentClick)=\"handleDonutChartSegmentClick($event)\"\n></ax-donut-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
         }] });
 
 var donutChartWidget_component = /*#__PURE__*/Object.freeze({
@@ -1980,79 +1116,141 @@ const AXPDonutChartWidget = {
     type: 'dashboard',
     icon: 'fa-light fa-donut',
     properties: [
+        cloneProperty(AXP_NAME_PROPERTY, { visible: false }),
+        cloneProperty(AXP_DATA_PATH_PROPERTY, { visible: false }),
+        // ====== Chart Title ======
+        {
+            name: 'title',
+            title: 'Chart Title',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: '',
+                dataType: 'string',
+                interface: {
+                    name: 'title',
+                    path: 'options.title',
+                    type: AXPWidgetsCatalog.text,
+                    options: {
+                        placeholder: 'Enter chart title',
+                    },
+                },
+            },
+            visible: true,
+        },
         // ====== Size & Layout ======
         {
-            name: 'height',
-            title: 'Height',
+            name: 'width',
+            title: 'Width',
             group: AXP_STYLING_PROPERTY_GROUP,
             schema: {
                 defaultValue: 300,
                 dataType: 'number',
                 interface: {
-                    name: 'height',
-                    path: 'options.height',
+                    name: 'width',
+                    path: 'options.width',
                     type: AXPWidgetsCatalog.number,
                     options: {
                         minValue: 200,
-                        maxValue: 800,
+                        maxValue: 1200,
                     },
                 },
             },
             visible: true,
         },
         {
-            name: 'width',
-            title: 'Width',
+            name: 'height',
+            title: 'Height',
             group: AXP_STYLING_PROPERTY_GROUP,
             schema: {
                 defaultValue: 300,
                 dataType: 'number',
                 interface: {
-                    name: 'width',
-                    path: 'options.width',
+                    name: 'height',
+                    path: 'options.height',
                     type: AXPWidgetsCatalog.number,
                     options: {
                         minValue: 200,
-                        maxValue: 1200,
+                        maxValue: 800,
                     },
                 },
             },
             visible: true,
         },
-        // ====== Legend ======
+        // ====== Donut Appearance ======
         {
-            name: 'showLegend',
-            title: 'Show Legend',
+            name: 'donutWidth',
+            title: 'Donut Width',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
-                defaultValue: true,
-                dataType: 'boolean',
+                defaultValue: 35,
+                dataType: 'number',
                 interface: {
-                    name: 'showLegend',
-                    path: 'options.showLegend',
-                    type: AXPWidgetsCatalog.toggle,
+                    name: 'donutWidth',
+                    path: 'options.donutWidth',
+                    type: AXPWidgetsCatalog.number,
+                    options: {
+                        placeholder: '10-80',
+                        minValue: 10,
+                        maxValue: 80,
+                    },
                 },
             },
             visible: true,
         },
         {
-            name: 'legendPosition',
-            title: 'Legend Position',
+            name: 'cornerRadius',
+            title: 'Corner Radius',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
-                defaultValue: 'right',
-                dataType: 'string',
+                defaultValue: 4,
+                dataType: 'number',
                 interface: {
-                    name: 'legendPosition',
-                    path: 'options.legendPosition',
-                    type: AXPWidgetsCatalog.select,
+                    name: 'cornerRadius',
+                    path: 'options.cornerRadius',
+                    type: AXPWidgetsCatalog.number,
                     options: {
-                        dataSource: ['right', 'bottom'],
+                        placeholder: '0-20',
+                        minValue: 0,
+                        maxValue: 20,
                     },
                 },
             },
             visible: true,
         },
+        // ====== Legend ======
+        // {
+        //   name: 'showLegend',
+        //   title: 'Show Legend',
+        //   group: AXP_APPEARANCE_PROPERTY_GROUP,
+        //   schema: {
+        //     defaultValue: true,
+        //     dataType: 'boolean',
+        //     interface: {
+        //       name: 'showLegend',
+        //       path: 'options.showLegend',
+        //       type: AXPWidgetsCatalog.toggle,
+        //     },
+        //   },
+        //   visible: true,
+        // },
+        // {
+        //   name: 'legendPosition',
+        //   title: 'Legend Position',
+        //   group: AXP_APPEARANCE_PROPERTY_GROUP,
+        //   schema: {
+        //     defaultValue: 'right',
+        //     dataType: 'string',
+        //     interface: {
+        //       name: 'legendPosition',
+        //       path: 'options.legendPosition',
+        //       type: AXPWidgetsCatalog.select,
+        //       options: {
+        //         dataSource: ['right', 'bottom'],
+        //       },
+        //     },
+        //   },
+        //   visible: true,
+        // },
         // ====== Tooltip ======
         {
             name: 'showTooltip',
@@ -2069,42 +1267,52 @@ const AXPDonutChartWidget = {
             },
             visible: true,
         },
-        // ====== Donut Appearance ======
+        // ====== Animation Settings ======
         {
-            name: 'donutWidth',
-            title: 'Donut Width',
+            name: 'animationEasing',
+            title: 'Animation Easing',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
-                defaultValue: 35,
-                dataType: 'number',
+                defaultValue: 'cubic-out',
+                dataType: 'string',
                 interface: {
-                    name: 'donutWidth',
-                    path: 'options.donutWidth',
-                    type: AXPWidgetsCatalog.number,
+                    name: 'animationEasing',
+                    path: 'options.animationEasing',
+                    type: AXPWidgetsCatalog.select,
                     options: {
-                        placeholder: '10-80',
-                        minValue: 10,
-                        maxValue: 80,
+                        dataSource: [
+                            { value: 'linear', text: 'Linear' },
+                            { value: 'ease', text: 'Ease' },
+                            { value: 'ease-in', text: 'Ease In' },
+                            { value: 'ease-out', text: 'Ease Out' },
+                            { value: 'ease-in-out', text: 'Ease In Out' },
+                            { value: 'cubic', text: 'Cubic' },
+                            { value: 'cubic-in', text: 'Cubic In' },
+                            { value: 'cubic-out', text: 'Cubic Out' },
+                            { value: 'cubic-in-out', text: 'Cubic In Out' },
+                        ],
+                        textField: 'text',
+                        valueField: 'value',
                     },
                 },
             },
             visible: true,
         },
         {
-            name: 'cornerRadius',
-            title: 'Corner Radius',
+            name: 'animationDuration',
+            title: 'Animation Duration',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
-                defaultValue: 4,
+                defaultValue: 800,
                 dataType: 'number',
                 interface: {
-                    name: 'cornerRadius',
-                    path: 'options.cornerRadius',
+                    name: 'animationDuration',
+                    path: 'options.animationDuration',
                     type: AXPWidgetsCatalog.number,
                     options: {
-                        placeholder: '0-20',
+                        placeholder: '0-2000',
                         minValue: 0,
-                        maxValue: 20,
+                        maxValue: 2000,
                     },
                 },
             },
@@ -2132,370 +1340,18 @@ const AXPDonutChartWidget = {
  * Gauge Chart Widget Component
  * Renders a semi-circular gauge chart with animated needle and thresholds
  */
-class AXPGaugeChartWidgetViewComponent extends AXPChartBaseComponent {
+class AXPGaugeChartWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
-        this.cdr = inject(ChangeDetectorRef);
-        this.chartContainerEl = viewChild.required('chartContainer');
-        this.chartEl = viewChild.required('chart');
-        // Default values
-        this.backgroundColor = 'transparent';
-        this.baseColor = '#e2e8f0';
-        this.labelFontSize = 16;
-        this.showValue = true;
-        this.valueColor = '#6366f1';
-        this.valueFontSize = 24;
-        // Default values as computed properties
-        this.minValue = computed(() => this.options()['minValue'] ?? 0);
-        this.maxValue = computed(() => this.options()['maxValue'] ?? 100);
-        this.thresholds = computed(() => this.options()['thresholds'] ?? []);
-        this.label = computed(() => this.options()['label'] ?? '');
-        this.width = computed(() => this.options()['width'] ?? 300);
-        this.height = computed(() => this.options()['height'] ?? 300);
-        this.gaugeWidth = computed(() => this.options()['gaugeWidth'] ?? 22);
-        this.cornerRadius = computed(() => this.options()['cornerRadius'] ?? 5);
-    }
-    /**
-     * Creates the gauge chart with all elements
-     */
-    createChart() {
-        // Clear any existing chart
-        this.d3.select(this.chartEl().nativeElement).selectAll('*').remove();
-        // Calculate responsive dimensions
-        const containerElement = this.chartContainerEl().nativeElement;
-        const containerWidth = containerElement.clientWidth;
-        const containerHeight = containerElement.clientHeight;
-        // Determine size based on explicit dimensions or container size
-        const options = this.options();
-        let size;
-        if (options.width && options.height) {
-            // Use explicit dimensions if provided
-            size = Math.min(options.width, options.height * 2);
-        }
-        else {
-            // Use container dimensions with minimum constraints
-            const minDim = Math.max(200, Math.min(containerWidth, containerHeight));
-            size = Math.min(containerWidth, containerHeight * 2, minDim * 2);
-        }
-        const margin = size * 0.1;
-        // Set up SVG with responsive viewBox
-        const svg = this.d3
-            .select(this.chartEl().nativeElement)
-            .attr('width', '100%')
-            .attr('height', '100%')
-            .attr('viewBox', `0 0 ${size} ${size / 2}`)
-            .attr('preserveAspectRatio', 'xMidYMid meet');
-        // Create a group for the chart with margin and move it to show only the top half
-        const chartGroup = svg.append('g').attr('transform', `translate(${size / 2}, ${size / 2 - margin})`);
-        // Define gauge parameters
-        const radius = size / 2 - margin;
-        const innerRadius = radius - this.gaugeWidth();
-        const outerRadius = radius;
-        // Create gradient definitions
-        this.createGradients(svg, this.thresholds());
-        // Draw the background arc
-        this.drawBackgroundArc(chartGroup, innerRadius, outerRadius, this.cornerRadius());
-        // Draw the threshold arcs if thresholds exist
-        if (this.thresholds().length > 0) {
-            this.drawThresholds(chartGroup, innerRadius, outerRadius, this.minValue(), this.maxValue(), this.thresholds(), this.cornerRadius());
-        }
-        // Draw tick marks
-        this.drawTicks(chartGroup, outerRadius, this.minValue(), this.maxValue());
-        // Draw the dial/needle with animation
-        this.drawDial(chartGroup, radius, this.chartData() ?? 0, this.minValue(), this.maxValue());
-        // Draw the value display (after the dial so it's on top)
-        if (this.showValue) {
-            this.drawValueDisplay(chartGroup, this.chartData() ?? 0, this.label(), radius);
-        }
-    }
-    updateChart() {
-        this.createChart();
-    }
-    cleanupChart() {
-        if (this.chartEl()?.nativeElement) {
-            this.d3.select(this.chartEl().nativeElement).selectAll('*').remove();
-        }
-    }
-    /**
-     * Creates gradient definitions for thresholds
-     */
-    createGradients(svg, thresholds) {
-        const defs = svg.append('defs');
-        // Create a radial gradient for the background
-        const bgGradient = defs
-            .append('radialGradient')
-            .attr('id', 'gauge-bg-gradient')
-            .attr('cx', '50%')
-            .attr('cy', '50%')
-            .attr('r', '50%')
-            .attr('gradientUnits', 'userSpaceOnUse');
-        if (thresholds.length === 0) {
-            // Default gradient when no thresholds are provided
-            bgGradient
-                .append('stop')
-                .attr('offset', '0%')
-                .attr('stop-color', this.d3.color(this.valueColor)?.brighter(0.5).toString() || this.valueColor);
-            bgGradient.append('stop').attr('offset', '100%').attr('stop-color', this.valueColor);
-        }
-        else {
-            bgGradient
-                .append('stop')
-                .attr('offset', '0%')
-                .attr('stop-color', this.d3.color(this.baseColor)?.brighter(0.5).toString() || this.baseColor);
-            bgGradient.append('stop').attr('offset', '100%').attr('stop-color', this.baseColor);
-            // Create gradients for each threshold
-            thresholds.forEach((threshold, i) => {
-                const gradient = defs
-                    .append('linearGradient')
-                    .attr('id', `threshold-gradient-${i}`)
-                    .attr('gradientUnits', 'userSpaceOnUse')
-                    .attr('x1', '-1')
-                    .attr('y1', '0')
-                    .attr('x2', '1')
-                    .attr('y2', '0');
-                gradient
-                    .append('stop')
-                    .attr('offset', '0%')
-                    .attr('stop-color', this.d3.color(threshold.color)?.brighter(0.5).toString() || threshold.color);
-                gradient.append('stop').attr('offset', '100%').attr('stop-color', threshold.color);
-            });
-        }
-    }
-    /**
-     * Draws the background arc
-     */
-    drawBackgroundArc(chartGroup, innerRadius, outerRadius, cornerRadius) {
-        const backgroundArc = this.d3
-            .arc()
-            .innerRadius(innerRadius)
-            .outerRadius(outerRadius)
-            .startAngle(-Math.PI / 2) // Start from bottom (-90 degrees)
-            .endAngle(Math.PI / 2) // End at top (90 degrees)
-            .cornerRadius(cornerRadius);
-        chartGroup
-            .append('path')
-            .attr('d', backgroundArc({
-            innerRadius,
-            outerRadius,
-            startAngle: -Math.PI / 2,
-            endAngle: Math.PI / 2,
-        }))
-            .attr('fill', this.backgroundColor === 'transparent' ? 'url(#gauge-bg-gradient)' : this.backgroundColor)
-            .attr('filter', 'drop-shadow(0px 2px 3px rgba(0,0,0,0.1))');
-    }
-    /**
-     * Draws the threshold arcs with colors
-     */
-    drawThresholds(chartGroup, innerRadius, outerRadius, minValue, maxValue, thresholds, cornerRadius) {
-        const arc = this.d3
-            .arc()
-            .innerRadius(innerRadius)
-            .outerRadius(outerRadius * 0.98)
-            .cornerRadius(cornerRadius);
-        // Sort thresholds by value in ascending order
-        const sortedThresholds = [...thresholds].sort((a, b) => a.value - b.value);
-        // Calculate all angles first using the color angle calculation
-        const angles = sortedThresholds.map((t) => this.scaleValueToColorAngle(t.value, minValue, maxValue));
-        // Start from the minimum value angle
-        let previousEndAngle = this.scaleValueToColorAngle(minValue, minValue, maxValue);
-        sortedThresholds.forEach((threshold, i) => {
-            const endAngle = angles[i];
-            chartGroup
-                .append('path')
-                .attr('d', arc({
-                innerRadius,
-                outerRadius,
-                startAngle: previousEndAngle,
-                endAngle,
-            }))
-                .attr('fill', `url(#threshold-gradient-${i})`)
-                .attr('stroke', 'rgba(255,255,255,0.3)')
-                .attr('stroke-width', 1);
-            previousEndAngle = endAngle;
-        });
-        // Fill the remaining space to maxValue if needed
-        const lastEndAngle = this.scaleValueToColorAngle(maxValue, minValue, maxValue);
-        if (previousEndAngle < lastEndAngle) {
-            chartGroup
-                .append('path')
-                .attr('d', arc({
-                innerRadius,
-                outerRadius,
-                startAngle: previousEndAngle,
-                endAngle: lastEndAngle,
-            }))
-                .attr('fill', `url(#threshold-gradient-${sortedThresholds.length - 1})`)
-                .attr('stroke', 'rgba(255,255,255,0.3)')
-                .attr('stroke-width', 1);
-        }
-    }
-    /**
-     * Draws tick marks around the gauge
-     */
-    drawTicks(chartGroup, radius, minValue, maxValue) {
-        const tickCount = 10;
-        const minorTickCount = 40;
-        // Draw minor ticks
-        for (let i = 0; i <= minorTickCount; i++) {
-            const value = minValue + (i / minorTickCount) * (maxValue - minValue);
-            const angle = this.scaleValueToAngle(value, minValue, maxValue);
-            const outerPoint = {
-                x: radius * 0.9 * Math.cos(angle),
-                y: radius * 0.9 * Math.sin(angle),
-            };
-            const innerPoint = {
-                x: radius * 0.87 * Math.cos(angle),
-                y: radius * 0.87 * Math.sin(angle),
-            };
-            chartGroup
-                .append('line')
-                .attr('x1', innerPoint.x)
-                .attr('y1', innerPoint.y)
-                .attr('x2', outerPoint.x)
-                .attr('y2', outerPoint.y)
-                .attr('stroke', '#adb5bd')
-                .attr('stroke-width', 0.5);
-        }
-        // Draw major ticks and labels
-        for (let i = 0; i <= tickCount; i++) {
-            const value = minValue + (i / tickCount) * (maxValue - minValue);
-            const angle = this.scaleValueToAngle(value, minValue, maxValue);
-            const outerPoint = {
-                x: radius * 0.92 * Math.cos(angle),
-                y: radius * 0.92 * Math.sin(angle),
-            };
-            const innerPoint = {
-                x: radius * 0.85 * Math.cos(angle),
-                y: radius * 0.85 * Math.sin(angle),
-            };
-            // Major tick line
-            chartGroup
-                .append('line')
-                .attr('x1', innerPoint.x)
-                .attr('y1', innerPoint.y)
-                .attr('x2', outerPoint.x)
-                .attr('y2', outerPoint.y)
-                .attr('stroke', '#adb5bd')
-                .attr('stroke-width', 2);
-            // Label position with offset
-            const labelRadius = radius * 1.15;
-            const labelX = labelRadius * Math.cos(angle);
-            const labelY = labelRadius * Math.sin(angle);
-            // Add tick value label
-            chartGroup
-                .append('text')
-                .attr('x', labelX)
-                .attr('y', labelY)
-                .attr('text-anchor', 'middle')
-                .style('font-size', `${radius * 0.1}px`)
-                .style('font-weight', '500')
-                .style('fill', 'currentColor')
-                .text(value.toFixed(0));
-        }
-    }
-    /**
-     * Draws the value display in the center
-     */
-    drawValueDisplay(chartGroup, value, label, radius) {
-        // Value text - positioned below the needle pivot
-        chartGroup
-            .append('text')
-            .attr('class', 'gauge-value')
-            .attr('x', 0)
-            .attr('y', radius * 0.25) // Moved up from 0.3
-            .attr('text-anchor', 'middle')
-            .attr('dominant-baseline', 'central')
-            .style('font-size', `${this.valueFontSize}px`)
-            .style('font-weight', 'bold')
-            .style('fill', 'currentColor')
-            .text(value.toFixed(1));
-        // Label text
-        chartGroup
-            .append('text')
-            .attr('class', 'gauge-label')
-            .attr('x', 0)
-            .attr('y', radius * 0.45) // Keeping this position to create more space
-            .attr('text-anchor', 'middle')
-            .attr('dominant-baseline', 'central')
-            .style('font-size', `${this.labelFontSize}px`)
-            .style('fill', '#6c757d')
-            .text(label);
-    }
-    /**
-     * Draws the dial/needle with animation
-     */
-    drawDial(chartGroup, radius, value, minValue, maxValue) {
-        const needleGroup = chartGroup.append('g');
-        const valueAngle = this.scaleValueToAngle(value, minValue, maxValue); // Use regular angle for needle
-        // Draw needle base (circle)
-        needleGroup
-            .append('circle')
-            .attr('cx', 0)
-            .attr('cy', 0)
-            .attr('r', radius * 0.08)
-            .attr('fill', 'url(#gauge-bg-gradient)')
-            .attr('stroke', '#6c757d')
-            .attr('stroke-width', 1);
-        // Inner circle
-        needleGroup
-            .append('circle')
-            .attr('cx', 0)
-            .attr('cy', 0)
-            .attr('r', radius * 0.04)
-            .attr('fill', '#495057');
-        // Create needle
-        const needlePath = needleGroup
-            .append('path')
-            .attr('d', this.createNeedlePath(radius))
-            .attr('fill', '#dc3545')
-            .attr('transform', `rotate(${this.radiansToDegrees(-Math.PI)})`) // Start at left (-180 degrees)
-            .attr('filter', 'drop-shadow(0px 1px 2px rgba(0,0,0,0.3))');
-        // Animate the needle
-        needlePath
-            .transition()
-            .duration(800)
-            .ease(this.d3.easeCubicOut)
-            .attrTween('transform', () => {
-            const interpolate = this.d3.interpolate(-Math.PI, valueAngle);
-            return (t) => `rotate(${this.radiansToDegrees(interpolate(t))})`;
-        });
-    }
-    /**
-     * Creates a path for the needle
-     */
-    createNeedlePath(radius) {
-        const needleLength = radius * 0.75;
-        const needleBaseWidth = radius * 0.04;
-        return `M 0 -${needleBaseWidth} L ${needleLength} 0 L 0 ${needleBaseWidth} Z`;
-    }
-    /**
-     * Scales a value to an angle for needle positioning
-     */
-    scaleValueToAngle(value, min, max) {
-        const scaledValue = (value - min) / (max - min);
-        // Map from -180 to 0 degrees in radians, starting from the left
-        return -Math.PI + scaledValue * Math.PI;
-    }
-    /**
-     * Scales a value to an angle for threshold colors
-     */
-    scaleValueToColorAngle(value, min, max) {
-        const scaledValue = (value - min) / (max - min);
-        // Map from -90 to 90 degrees in radians (-π/2 to π/2), starting from the bottom
-        return -Math.PI / 2 + scaledValue * Math.PI;
-    }
-    /**
-     * Converts radians to degrees
-     */
-    radiansToDegrees(radians) {
-        return radians * (180 / Math.PI);
+        this.gaugeChartValue = computed(() => this.getValue());
+        this.gaugeChartOptions = computed(() => this.options());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGaugeChartWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPGaugeChartWidgetViewComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }, { propertyName: "chartEl", first: true, predicate: ["chart"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-justify-center ax-items-center ax-w-full ax-h-full\" #chartContainer>\n  <svg #chart class=\"ax-w-full ax-h-full\"></svg>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:200px}div.ax-flex{position:relative;width:100%;height:100%;overflow:visible}svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.gauge-arc{transition:stroke-dashoffset 1s ease}.gauge-label{font-family:var(--ax-font-family, system-ui, sans-serif);font-weight:600}.gauge-value{font-family:var(--ax-font-family, system-ui, sans-serif);font-weight:700}.gauge-min-max{font-family:var(--ax-font-family, system-ui, sans-serif);opacity:.7}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPGaugeChartWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ax-gauge-chart [value]=\"gaugeChartValue()\" [options]=\"gaugeChartOptions()\"></ax-gauge-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: AXGaugeChartComponent, selector: "ax-gauge-chart", inputs: ["value", "options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGaugeChartWidgetViewComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-flex ax-justify-center ax-items-center ax-w-full ax-h-full\" #chartContainer>\n  <svg #chart class=\"ax-w-full ax-h-full\"></svg>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:200px}div.ax-flex{position:relative;width:100%;height:100%;overflow:visible}svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.gauge-arc{transition:stroke-dashoffset 1s ease}.gauge-label{font-family:var(--ax-font-family, system-ui, sans-serif);font-weight:600}.gauge-value{font-family:var(--ax-font-family, system-ui, sans-serif);font-weight:700}.gauge-min-max{font-family:var(--ax-font-family, system-ui, sans-serif);opacity:.7}\n"] }]
+            args: [{ imports: [AXGaugeChartComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-gauge-chart [value]=\"gaugeChartValue()\" [options]=\"gaugeChartOptions()\"></ax-gauge-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
         }] });
 
 var gaugeChartWidget_component = /*#__PURE__*/Object.freeze({
@@ -2510,27 +1366,28 @@ const AXPGaugeChartWidget = {
     type: 'dashboard',
     icon: 'fa-light fa-gauge',
     properties: [
-        // ====== Layout & Dimensions ======
+        cloneProperty(AXP_NAME_PROPERTY, { visible: false }),
+        cloneProperty(AXP_DATA_PATH_PROPERTY, { visible: false }),
+        // ====== Chart Title ======
         {
-            name: 'height',
-            title: 'Height',
-            group: AXP_STYLING_PROPERTY_GROUP,
+            name: 'title',
+            title: 'Chart Title',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
-                defaultValue: 300,
-                dataType: 'number',
+                defaultValue: '',
+                dataType: 'string',
                 interface: {
-                    name: 'height',
-                    path: 'options.height',
-                    type: AXPWidgetsCatalog.number,
+                    name: 'title',
+                    path: 'options.title',
+                    type: AXPWidgetsCatalog.text,
                     options: {
-                        placeholder: '1-800',
-                        minValue: 1,
-                        maxValue: 800,
+                        placeholder: 'Enter chart title',
                     },
                 },
             },
             visible: true,
         },
+        // ====== Layout & Dimensions ======
         {
             name: 'width',
             title: 'Width',
@@ -2551,6 +1408,26 @@ const AXPGaugeChartWidget = {
             },
             visible: true,
         },
+        {
+            name: 'height',
+            title: 'Height',
+            group: AXP_STYLING_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 300,
+                dataType: 'number',
+                interface: {
+                    name: 'height',
+                    path: 'options.height',
+                    type: AXPWidgetsCatalog.number,
+                    options: {
+                        placeholder: '1-800',
+                        minValue: 1,
+                        maxValue: 800,
+                    },
+                },
+            },
+            visible: true,
+        },
         // ====== Gauge Configuration ======
         {
             name: 'minValue',
@@ -2639,11 +1516,62 @@ const AXPGaugeChartWidget = {
             },
             visible: true,
         },
-    ],
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return gaugeChartWidget_component; }).then((c) => c.AXPGaugeChartWidgetViewComponent),
-        },
+        // ====== Animation Settings ======
+        {
+            name: 'animationEasing',
+            title: 'Animation Easing',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 'cubic-out',
+                dataType: 'string',
+                interface: {
+                    name: 'animationEasing',
+                    path: 'options.animationEasing',
+                    type: AXPWidgetsCatalog.select,
+                    options: {
+                        dataSource: [
+                            { value: 'linear', text: 'Linear' },
+                            { value: 'ease', text: 'Ease' },
+                            { value: 'ease-in', text: 'Ease In' },
+                            { value: 'ease-out', text: 'Ease Out' },
+                            { value: 'ease-in-out', text: 'Ease In Out' },
+                            { value: 'cubic', text: 'Cubic' },
+                            { value: 'cubic-in', text: 'Cubic In' },
+                            { value: 'cubic-out', text: 'Cubic Out' },
+                            { value: 'cubic-in-out', text: 'Cubic In Out' },
+                        ],
+                        textField: 'text',
+                        valueField: 'value',
+                    },
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'animationDuration',
+            title: 'Animation Duration',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 800,
+                dataType: 'number',
+                interface: {
+                    name: 'animationDuration',
+                    path: 'options.animationDuration',
+                    type: AXPWidgetsCatalog.number,
+                    options: {
+                        placeholder: '0-2000',
+                        minValue: 0,
+                        maxValue: 2000,
+                    },
+                },
+            },
+            visible: true,
+        },
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return gaugeChartWidget_component; }).then((c) => c.AXPGaugeChartWidgetViewComponent),
+        },
     },
     meta: {
         dimensions: {
@@ -2661,399 +1589,21 @@ const AXPGaugeChartWidget = {
  * Line Chart Widget Component
  * Renders data as lines with interactive hover effects and animations
  */
-class AXPLineChartWidgetViewComponent extends AXPChartBaseComponent {
+class AXPLineChartWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
-        this.pointClick = output();
-        // Chart container reference
-        this.chartContainerEl = viewChild.required('chartContainer');
-        this.margin = { top: 20, right: 20, bottom: 30, left: 40 };
-        // Tooltip state
-        this._tooltipVisible = signal(false);
-        this._tooltipPosition = signal({ x: 0, y: 0 });
-        this._tooltipData = signal({
-            title: '',
-            value: '0',
-            percentage: '0%',
-            color: '',
-        });
-        // Tooltip accessors
-        this.tooltipVisible = computed(() => this._tooltipVisible());
-        this.tooltipPosition = computed(() => this._tooltipPosition());
-        this.tooltipData = computed(() => this._tooltipData());
-        // Line appearance options
-        this.lineWidth = computed(() => this.options()['lineWidth'] ?? 2);
-        this.showPoints = computed(() => this.options()['showPoints'] !== false);
-        this.pointRadius = computed(() => this.options()['pointRadius'] ?? 4);
-        this.smoothLine = computed(() => this.options()['smoothLine'] !== false);
-        this.fillArea = computed(() => this.options()['fillArea'] === true);
-        this.fillOpacity = computed(() => (this.options()['fillOpacity'] ?? 20) / 100);
-    }
-    // Chart lifecycle methods
-    /**
-     * Creates the line chart SVG and renders all elements
-     */
-    createChart() {
-        if (!this.d3 || !this.chartContainerEl()?.nativeElement)
-            return;
-        const containerElement = this.chartContainerEl().nativeElement;
-        let data = this.chartData() || [];
-        // Clear existing chart
-        this.d3.select(containerElement).selectAll('svg').remove();
-        // Normalize data structure to array of arrays (multi-series format)
-        let normalizedData = [];
-        // Handle both flat array and array of arrays formats
-        if (data.length > 0) {
-            if (Array.isArray(data[0])) {
-                // Already in multi-series format
-                normalizedData = data;
-            }
-            else {
-                // Single series or flat array with seriesName
-                const dataPoints = data;
-                // Check if this is multi-series data (has seriesName property)
-                const hasSeriesNames = dataPoints.some((d) => d.seriesName !== undefined);
-                if (hasSeriesNames) {
-                    // Organize by series name
-                    const seriesMap = new Map();
-                    dataPoints.forEach((d) => {
-                        const seriesName = d.seriesName || 'default';
-                        if (!seriesMap.has(seriesName)) {
-                            seriesMap.set(seriesName, []);
-                        }
-                        seriesMap.get(seriesName).push(d);
-                    });
-                    // Convert to array of arrays
-                    normalizedData = Array.from(seriesMap.values());
-                }
-                else {
-                    // Single series, wrap it in an array
-                    normalizedData = [dataPoints];
-                }
-            }
-        }
-        // Early return if no data
-        if (normalizedData.length === 0 || normalizedData.flat().length === 0) {
-            this.showNoDataMessage(containerElement);
-            return;
-        }
-        // Get options and setup dimensions
-        const options = this.options();
-        this.setupDimensions(containerElement, options);
-        // Flatten data for scale calculation
-        const flatData = normalizedData.flat();
-        // Create scales with the flattened data
-        this.setupScales(flatData);
-        this.createAxes(options);
-        // Render the lines using the structured data (array of arrays)
-        this.renderLines(normalizedData);
-    }
-    updateChart() {
-        this.createChart();
-    }
-    cleanupChart() {
-        if (this.svg) {
-            this.d3.select(this.chartContainerEl()?.nativeElement).selectAll('svg').remove();
-            this.svg = null;
-            this.chart = null;
-        }
-        this._tooltipVisible.set(false);
-    }
-    // Private chart creation methods
-    /**
-     * Sets up chart dimensions and creates SVG with responsive attributes
-     */
-    setupDimensions(containerElement, options) {
-        // Get container dimensions
-        const containerWidth = containerElement.clientWidth;
-        const containerHeight = containerElement.clientHeight;
-        // If options specify width and height, use those, otherwise default to container size
-        const minDim = Math.min(200, containerWidth, containerHeight); // Ensure reasonable minimum
-        if (options.width && options.height) {
-            // Explicit dimensions provided
-            this.width = options.width - this.margin.left - this.margin.right;
-            this.height = options.height - this.margin.top - this.margin.bottom;
-        }
-        else {
-            // Responsive dimensions
-            this.width = Math.max(containerWidth, minDim) - this.margin.left - this.margin.right;
-            this.height = Math.max(containerHeight, minDim) - this.margin.top - this.margin.bottom;
-        }
-        // Create responsive SVG that scales with its container
-        const svg = this.d3
-            .select(containerElement)
-            .append('svg')
-            .attr('width', '100%')
-            .attr('height', '100%')
-            .attr('viewBox', `0 0 ${this.width + this.margin.left + this.margin.right} ${this.height + this.margin.top + this.margin.bottom}`)
-            .attr('preserveAspectRatio', 'xMidYMid meet');
-        this.svg = svg;
-        // Create chart group with margins
-        this.chart = this.svg.append('g').attr('transform', `translate(${this.margin.left},${this.margin.top})`);
-    }
-    /**
-     * Creates x and y scales for the chart
-     */
-    setupScales(data) {
-        // Determine x-axis type based on data
-        const allNumericX = data.every((d) => typeof d.xValue === 'number');
-        const allDates = data.every((d) => !isNaN(new Date(d.xValue).getTime()));
-        // Create appropriate x scale based on data type
-        if (allNumericX) {
-            // Numeric x-axis
-            this.xScale = this.d3
-                .scaleLinear()
-                .domain([
-                this.d3.min(data, (d) => d.xValue) || 0,
-                this.d3.max(data, (d) => d.xValue) || 0,
-            ])
-                .range([0, this.width]);
-        }
-        else if (allDates) {
-            // Date x-axis
-            this.xScale = this.d3
-                .scaleTime()
-                .domain([
-                this.d3.min(data, (d) => new Date(d.xValue)) || new Date(),
-                this.d3.max(data, (d) => new Date(d.xValue)) || new Date(),
-            ])
-                .range([0, this.width]);
-        }
-        else {
-            // Categorical x-axis
-            this.xScale = this.d3
-                .scaleBand()
-                .domain(data.map((d) => d.xValue.toString()))
-                .range([0, this.width])
-                .padding(0.1);
-        }
-        // Create y scale (linear scale for values)
-        this.yScale = this.d3
-            .scaleLinear()
-            .domain([0, this.d3.max(data, (d) => d.value) || 0])
-            .nice()
-            .range([this.height, 0]);
-    }
-    /**
-     * Creates x and y axes with grid lines
-     */
-    createAxes(options) {
-        // Only create axes if they are enabled in options
-        const showXAxis = options.showXAxis !== false;
-        const showYAxis = options.showYAxis !== false;
-        const showGrid = options.showGrid !== false;
-        if (showXAxis) {
-            // Create X axis
-            this.xAxis = this.chart
-                .append('g')
-                .attr('class', 'axp-line-chart-axis-x')
-                .attr('transform', `translate(0,${this.height})`)
-                .call(this.d3.axisBottom(this.xScale));
-        }
-        if (showYAxis) {
-            // Create Y axis
-            this.yAxis = this.chart.append('g').attr('class', 'axp-line-chart-axis-y').call(this.d3.axisLeft(this.yScale));
-        }
-        if (showGrid) {
-            // Add horizontal grid lines
-            this.chart
-                .append('g')
-                .attr('class', 'axp-line-chart-grid')
-                .call(this.d3
-                .axisLeft(this.yScale)
-                .tickSize(-this.width)
-                .tickFormat(() => ''))
-                .selectAll('.tick')
-                .style('color', 'rgb(153 153 153 / 30%)'); // Add gray color to ticks
-        }
-    }
-    /**
-     * Renders the lines with animations
-     */
-    renderLines(data) {
-        // Get line options
-        const lineWidth = this.lineWidth();
-        const useSmooth = this.smoothLine();
-        const shouldFill = this.fillArea();
-        const fillOpacity = this.fillOpacity();
-        // Create line generator
-        const getX = (d) => {
-            // Handle different x scale types
-            if (this.xScale.bandwidth) {
-                // band scale for categorical
-                return this.xScale(d.xValue.toString()) + this.xScale.bandwidth() / 2;
-            }
-            else {
-                // linear or time scale
-                return this.xScale(d.xValue);
-            }
-        };
-        // Define line generator function
-        const lineGenerator = useSmooth
-            ? this.d3
-                .line()
-                .x(getX)
-                .y((d) => this.yScale(d.value))
-                .curve(this.d3.curveMonotoneX) // Smooth curve
-            : this.d3
-                .line()
-                .x(getX)
-                .y((d) => this.yScale(d.value))
-                .curve(this.d3.curveLinear); // Straight lines
-        // Define area generator if we should fill
-        const areaGenerator = useSmooth
-            ? this.d3
-                .area()
-                .x(getX)
-                .y0(this.height)
-                .y1((d) => this.yScale(d.value))
-                .curve(this.d3.curveMonotoneX)
-            : this.d3
-                .area()
-                .x(getX)
-                .y0(this.height)
-                .y1((d) => this.yScale(d.value))
-                .curve(this.d3.curveLinear);
-        // Render each series
-        data.forEach((seriesData, seriesIndex) => {
-            // Skip empty series
-            if (!seriesData.length)
-                return;
-            // Sort data within series by x value
-            seriesData.sort((a, b) => {
-                if (typeof a.xValue === 'number' && typeof b.xValue === 'number') {
-                    return a.xValue - b.xValue;
-                }
-                else {
-                    return a.xValue.toString().localeCompare(b.xValue.toString());
-                }
-            });
-            // Get series name and color
-            const seriesName = seriesData[0].seriesName || `Series ${seriesIndex + 1}`;
-            // Get color for this series - prefer the color from data point, otherwise use palette
-            const seriesColor = seriesData[0]?.color || AXPChartColors.getColor(seriesIndex);
-            // Draw the area if fill is enabled
-            if (shouldFill) {
-                this.chart
-                    .append('path')
-                    .datum(seriesData)
-                    .attr('class', 'axp-line-chart-area')
-                    .attr('fill', seriesColor)
-                    .attr('fill-opacity', fillOpacity)
-                    .attr('d', areaGenerator);
-            }
-            // Draw the line with animation
-            const path = this.chart
-                .append('path')
-                .datum(seriesData)
-                .attr('class', 'axp-line-chart-line')
-                .attr('stroke', seriesColor)
-                .attr('stroke-width', lineWidth)
-                .attr('fill', 'none') // Ensure no fill on the line
-                .attr('d', lineGenerator);
-            // Animate the line drawing
-            const pathLength = path.node().getTotalLength();
-            path
-                .attr('stroke-dasharray', pathLength)
-                .attr('stroke-dashoffset', pathLength)
-                .transition()
-                .duration(1000)
-                .attr('stroke-dashoffset', 0)
-                .ease(this.d3.easeQuadOut);
-            // Add data points if enabled
-            if (this.showPoints()) {
-                this.chart
-                    .selectAll(`.axp-line-chart-point-${seriesIndex}`)
-                    .data(seriesData)
-                    .enter()
-                    .append('circle')
-                    .attr('class', `axp-line-chart-point axp-line-chart-point-${seriesIndex}`)
-                    .attr('cx', (d) => getX(d))
-                    .attr('cy', (d) => this.yScale(d.value))
-                    .attr('r', 0) // Start with radius 0 for animation
-                    .attr('fill', seriesColor)
-                    .attr('stroke', 'white')
-                    .attr('stroke-width', 1)
-                    .on('mouseenter', (event, d) => this.handlePointHover(event, d, seriesName))
-                    .on('mousemove', (event) => this.updateTooltipPosition(event))
-                    .on('mouseleave', () => this._tooltipVisible.set(false))
-                    .on('click', (event, d) => this.handlePointClick(event, d))
-                    .transition()
-                    .delay((d, i) => i * 50 + 300) // Stagger with delay after line animation
-                    .duration(300)
-                    .attr('r', this.pointRadius())
-                    .ease(this.d3.easeBackOut); // Bouncy animation
-            }
-        });
-    }
-    // Event handlers
-    /**
-     * Handles point hover event and shows tooltip
-     */
-    handlePointHover(event, datum, seriesName) {
-        if (this.options().showTooltip !== false) {
-            const data = this.chartData();
-            let index = 0;
-            // Find index based on data structure
-            if (Array.isArray(data)) {
-                if (Array.isArray(data[0])) {
-                    // Multi-series data (array of arrays)
-                    const flatData = data.flat();
-                    index = flatData.findIndex((item) => item.id === datum.id);
-                }
-                else {
-                    // Single series (array of data points)
-                    index = data.findIndex((item) => item.id === datum.id);
-                }
-            }
-            const color = datum.color || AXPChartColors.getColor(index);
-            // Update tooltip data
-            this._tooltipData.set({
-                title: datum.label || seriesName,
-                value: datum.value.toString(),
-                percentage: '', // Not showing percentage for line charts
-                color,
-            });
-            // Position tooltip near the point
-            this.updateTooltipPosition(event);
-            this._tooltipVisible.set(true);
-        }
-    }
-    /**
-     * Updates tooltip position based on mouse coordinates
-     */
-    updateTooltipPosition(event) {
-        const rect = event.target.getBoundingClientRect();
-        const containerRect = this.chartContainerEl().nativeElement.getBoundingClientRect();
-        // Position relative to the container
-        const x = event.clientX - containerRect.left;
-        const y = event.clientY - containerRect.top;
-        this._tooltipPosition.set({ x, y });
-    }
-    /**
-     * Handles point click event
-     */
-    handlePointClick(event, datum) {
-        // Emit click event with the data point
-        this.pointClick.emit(datum);
+        this.lineChartData = computed(() => this.getValue());
+        this.lineChartOptions = computed(() => this.options());
     }
-    /**
-     * Shows a message when no data is available
-     */
-    showNoDataMessage(containerElement) {
-        const noDataDiv = this.d3.select(containerElement).append('div').attr('class', 'axp-line-chart-no-data-message');
-        noDataDiv
-            .append('div')
-            .attr('class', 'axp-line-chart-no-data-icon')
-            .html('<i class="fa-light fa-chart-line fa-3x"></i>');
-        noDataDiv.append('div').attr('class', 'axp-line-chart-no-data-text').text('No data available');
+    handleLineChartPointClick(event) {
+        //console.log(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLineChartWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPLineChartWidgetViewComponent, isStandalone: true, selector: "ng-component", outputs: { pointClick: "pointClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-line-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"false\"\n  ></ax-chart-tooltip>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:200px}.axp-line-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden}.axp-line-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.axp-line-chart-line{fill:none;stroke-width:2px;stroke-linejoin:round;stroke-linecap:round;transition:stroke-width .3s ease}.axp-line-chart-line:hover{stroke-width:3px}.axp-line-chart-area{opacity:.2;transition:opacity .3s ease}.axp-line-chart-area:hover{opacity:.3}.axp-line-chart-point{cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.axp-line-chart-point:hover{r:6;stroke-width:2;stroke:var(--ax-background-color, #fff)}.axp-line-chart-axis-x path,.axp-line-chart-axis-y path{stroke:var(--ax-border-color, #e0e0e0)}.axp-line-chart-axis-x line,.axp-line-chart-axis-y line,.axp-line-chart-grid line{stroke:var(--ax-border-color, #e0e0e0);stroke-dasharray:2,2;stroke-opacity:.5}.axp-line-chart-grid path{stroke-width:0}.axp-line-chart-axis-x text,.axp-line-chart-axis-y text{fill:var(--ax-text-muted, #666);font-size:clamp(8px,2vmin,12px)}.axp-line-chart-no-data-message{font-family:var(--ax-font-family, system-ui, sans-serif);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%}.axp-line-chart-no-data-icon{margin-bottom:.75rem;color:var(--ax-text-muted, #999)}.axp-line-chart-no-data-text{font-weight:600;color:var(--ax-text-color, #333)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPLineChartWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ax-line-chart\n  (pointClick)=\"handleLineChartPointClick($event)\"\n  [data]=\"lineChartData()\"\n  [options]=\"lineChartOptions()\"\n></ax-line-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: AXLineChartComponent, selector: "ax-line-chart", inputs: ["data", "options"], outputs: ["pointClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLineChartWidgetViewComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, AXPChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-line-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"false\"\n  ></ax-chart-tooltip>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:200px}.axp-line-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden}.axp-line-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.axp-line-chart-line{fill:none;stroke-width:2px;stroke-linejoin:round;stroke-linecap:round;transition:stroke-width .3s ease}.axp-line-chart-line:hover{stroke-width:3px}.axp-line-chart-area{opacity:.2;transition:opacity .3s ease}.axp-line-chart-area:hover{opacity:.3}.axp-line-chart-point{cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.axp-line-chart-point:hover{r:6;stroke-width:2;stroke:var(--ax-background-color, #fff)}.axp-line-chart-axis-x path,.axp-line-chart-axis-y path{stroke:var(--ax-border-color, #e0e0e0)}.axp-line-chart-axis-x line,.axp-line-chart-axis-y line,.axp-line-chart-grid line{stroke:var(--ax-border-color, #e0e0e0);stroke-dasharray:2,2;stroke-opacity:.5}.axp-line-chart-grid path{stroke-width:0}.axp-line-chart-axis-x text,.axp-line-chart-axis-y text{fill:var(--ax-text-muted, #666);font-size:clamp(8px,2vmin,12px)}.axp-line-chart-no-data-message{font-family:var(--ax-font-family, system-ui, sans-serif);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%}.axp-line-chart-no-data-icon{margin-bottom:.75rem;color:var(--ax-text-muted, #999)}.axp-line-chart-no-data-text{font-weight:600;color:var(--ax-text-color, #333)}\n"] }]
+            args: [{ standalone: true, imports: [AXLineChartComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-line-chart\n  (pointClick)=\"handleLineChartPointClick($event)\"\n  [data]=\"lineChartData()\"\n  [options]=\"lineChartOptions()\"\n></ax-line-chart>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
         }] });
 
 var lineChartWidget_component = /*#__PURE__*/Object.freeze({
@@ -3069,26 +1619,28 @@ const AXPLineChartWidget = {
     type: 'dashboard',
     icon: 'fa-light fa-chart-line',
     properties: [
-        // ====== Layout & Dimensions ======
+        cloneProperty(AXP_NAME_PROPERTY, { visible: false }),
+        cloneProperty(AXP_DATA_PATH_PROPERTY, { visible: false }),
+        // ====== Chart Title ======
         {
-            name: 'height',
-            title: 'Height',
-            group: AXP_STYLING_PROPERTY_GROUP,
+            name: 'title',
+            title: 'Chart Title',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
-                defaultValue: 300,
-                dataType: 'number',
+                defaultValue: '',
+                dataType: 'string',
                 interface: {
-                    name: 'height',
-                    path: 'options.height',
-                    type: AXPWidgetsCatalog.number,
+                    name: 'title',
+                    path: 'options.title',
+                    type: AXPWidgetsCatalog.text,
                     options: {
-                        minValue: 0,
-                        maxValue: 800,
+                        placeholder: 'Enter chart title',
                     },
                 },
             },
             visible: true,
         },
+        // ====== Layout & Dimensions ======
         {
             name: 'width',
             title: 'Width',
@@ -3108,6 +1660,25 @@ const AXPLineChartWidget = {
             },
             visible: true,
         },
+        {
+            name: 'height',
+            title: 'Height',
+            group: AXP_STYLING_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 300,
+                dataType: 'number',
+                interface: {
+                    name: 'height',
+                    path: 'options.height',
+                    type: AXPWidgetsCatalog.number,
+                    options: {
+                        minValue: 0,
+                        maxValue: 800,
+                    },
+                },
+            },
+            visible: true,
+        },
         // ====== Axis Settings ======
         {
             name: 'showXAxis',
@@ -3124,6 +1695,21 @@ const AXPLineChartWidget = {
             },
             visible: true,
         },
+        {
+            name: 'xAxisLabel',
+            title: 'X Axis Label',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: '',
+                dataType: 'string',
+                interface: {
+                    name: 'xAxisLabel',
+                    path: 'options.xAxisLabel',
+                    type: AXPWidgetsCatalog.text,
+                },
+            },
+            visible: true,
+        },
         {
             name: 'showYAxis',
             title: 'Show Y Axis',
@@ -3140,82 +1726,95 @@ const AXPLineChartWidget = {
             visible: true,
         },
         {
-            name: 'showGrid',
-            title: 'Show Grid Lines',
+            name: 'yAxisLabel',
+            title: 'Y Axis Label',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
-                defaultValue: true,
-                dataType: 'boolean',
+                defaultValue: '',
+                dataType: 'string',
                 interface: {
-                    name: 'showGrid',
-                    path: 'options.showGrid',
-                    type: AXPWidgetsCatalog.toggle,
+                    name: 'yAxisLabel',
+                    path: 'options.yAxisLabel',
+                    type: AXPWidgetsCatalog.text,
                 },
             },
             visible: true,
         },
-        // ====== Tooltip Settings ======
         {
-            name: 'showTooltip',
-            title: 'Show Tooltip',
+            name: 'yAxisStartsAtZero',
+            title: 'Y Axis Starts At Zero',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
                 dataType: 'boolean',
                 interface: {
-                    name: 'showTooltip',
-                    path: 'options.showTooltip',
+                    name: 'yAxisStartsAtZero',
+                    path: 'options.yAxisStartsAtZero',
                     type: AXPWidgetsCatalog.toggle,
                 },
             },
             visible: true,
         },
-        // ====== Line Appearance ======
         {
-            name: 'lineWidth',
-            title: 'Line Width',
+            name: 'axisPadding',
+            title: 'Axis Padding',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
-                defaultValue: 2,
+                defaultValue: 5,
                 dataType: 'number',
                 interface: {
-                    name: 'lineWidth',
-                    path: 'options.lineWidth',
+                    name: 'axisPadding',
+                    path: 'options.axisPadding',
                     type: AXPWidgetsCatalog.number,
                     options: {
-                        placeholder: '1-10',
-                        minValue: 1,
-                        maxValue: 10,
+                        minValue: 0,
+                        maxValue: 50,
                     },
                 },
             },
             visible: true,
         },
         {
-            name: 'showPoints',
-            title: 'Show Points',
+            name: 'showGrid',
+            title: 'Show Grid Lines',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
                 dataType: 'boolean',
                 interface: {
-                    name: 'showPoints',
-                    path: 'options.showPoints',
+                    name: 'showGrid',
+                    path: 'options.showGrid',
                     type: AXPWidgetsCatalog.toggle,
                 },
             },
             visible: true,
         },
         {
-            name: 'pointRadius',
-            title: 'Point Size',
+            name: 'showVerticalGrid',
+            title: 'Show Vertical Grid',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
-                defaultValue: 4,
+                defaultValue: true,
+                dataType: 'boolean',
+                interface: {
+                    name: 'showVerticalGrid',
+                    path: 'options.showVerticalGrid',
+                    type: AXPWidgetsCatalog.toggle,
+                },
+            },
+            visible: true,
+        },
+        // ====== Line Appearance ======
+        {
+            name: 'lineWidth',
+            title: 'Line Width',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 2,
                 dataType: 'number',
                 interface: {
-                    name: 'pointRadius',
-                    path: 'options.pointRadius',
+                    name: 'lineWidth',
+                    path: 'options.lineWidth',
                     type: AXPWidgetsCatalog.number,
                     options: {
                         placeholder: '1-10',
@@ -3242,287 +1841,170 @@ const AXPLineChartWidget = {
             visible: true,
         },
         {
-            name: 'fillArea',
-            title: 'Fill Area',
+            name: 'showPoints',
+            title: 'Show Points',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
-                defaultValue: false,
+                defaultValue: true,
                 dataType: 'boolean',
                 interface: {
-                    name: 'fillArea',
-                    path: 'options.fillArea',
+                    name: 'showPoints',
+                    path: 'options.showPoints',
                     type: AXPWidgetsCatalog.toggle,
                 },
             },
             visible: true,
         },
         {
-            name: 'fillOpacity',
-            title: 'Fill Opacity',
+            name: 'pointRadius',
+            title: 'Point Size',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
-                defaultValue: 10,
+                defaultValue: 4,
                 dataType: 'number',
                 interface: {
-                    name: 'fillOpacity',
-                    path: 'options.fillOpacity',
+                    name: 'pointRadius',
+                    path: 'options.pointRadius',
                     type: AXPWidgetsCatalog.number,
                     options: {
-                        placeholder: '0-100',
-                        minValue: 0,
-                        maxValue: 100,
+                        placeholder: '1-10',
+                        minValue: 1,
+                        maxValue: 10,
                     },
                 },
             },
             visible: true,
         },
-    ],
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return lineChartWidget_component; }).then((c) => c.AXPLineChartWidgetViewComponent),
-        },
-    },
-    meta: {
-        dimensions: {
-            width: 5,
-            height: 6,
-            minWidth: 2,
-            minHeight: 2,
-            maxWidth: 6,
-            maxHeight: 7,
-        },
-    },
-};
-
-/**
- * Notification Widget Component
- * Displays notifications in a card with tabs
- */
-class AXPNotificationWidgetViewComponent extends AXPValueWidgetComponent {
-    constructor() {
-        super(...arguments);
-        // Outputs
-        this.notificationClick = output();
-        this.markAsRead = output();
-        // Dependencies
-        this.cdr = inject(ChangeDetectorRef);
-        this.datePipe = inject(DatePipe);
-        // State
-        this.activeTab = signal('new');
-        // Configuration
-        this.maxItems = computed(() => this.options()?.maxItems ?? 10);
-        this.showAvatar = computed(() => this.options()?.showAvatar ?? true);
-        this.showDate = computed(() => this.options()?.showDate ?? true);
-        // Computed data
-        this.notificationItems = computed(() => {
-            const value = this.getValue();
-            if (!value?.data?.length)
-                return [];
-            // Filter by active tab
-            const filtered = this.activeTab() === 'new' ? value.data.filter((n) => !n.readAt) : value.data;
-            return filtered.slice(0, this.maxItems());
-        });
-    }
-    /**
-     * Get the count of new messages for the badge
-     */
-    getNewMessageCount() {
-        const value = this.getValue();
-        if (!value?.data?.length)
-            return 0;
-        return value.data.filter((n) => !n.readAt).length;
-    }
-    /**
-     * Handle tab change event from ax-tabs component
-     * @param index The index of the tab that was activated
-     */
-    handleTabChange(data) {
-        const index = data.index;
-        // Map index to tab name: 0 = 'new', 1 = 'all'
-        const tabName = index === 0 ? 'new' : 'all';
-        this.onTabChange(tabName);
-    }
-    /**
-     * Mark all notifications as read
-     */
-    markAllAsRead() {
-        const value = this.getValue();
-        if (!value?.data?.length)
-            return;
-        const now = new Date();
-        const updatedNotifications = value.data.map((n) => {
-            if (n.readAt)
-                return n;
-            return { ...n, readAt: now };
-        });
-        this.setValue({
-            ...value,
-            data: updatedNotifications,
-        });
-        this.cdr.detectChanges();
-    }
-    /**
-     * Change the active tab
-     */
-    onTabChange(tabName) {
-        this.activeTab.set(tabName);
-        this.cdr.detectChanges();
-    }
-    /**
-     * Handle notification click event
-     */
-    onNotificationClick(notification) {
-        this.markAsReadIfNeeded(notification);
-        this.notificationClick.emit(notification);
-    }
-    /**
-     * Format the timestamp in a user-friendly way
-     */
-    formatTime(date) {
-        if (!date)
-            return '';
-        const dateObj = typeof date === 'string' ? new Date(date) : date;
-        const diffDays = this.getDaysDifference(dateObj);
-        // Format based on how recent the date is
-        if (diffDays === 0)
-            return this.datePipe.transform(dateObj, 'h:mm a') || ''; // Today
-        if (diffDays === 1)
-            return 'Yesterday';
-        if (diffDays < 7)
-            return this.datePipe.transform(dateObj, 'EEE') || ''; // Day of week
-        return this.datePipe.transform(dateObj, 'MM/dd/yyyy') || ''; // Older date
-    }
-    /**
-     * Mark notification as read if needed
-     */
-    markAsReadIfNeeded(notification) {
-        // Only mark as read if not already read
-        if (notification.readAt)
-            return;
-        const updatedNotification = {
-            ...notification,
-            readAt: new Date(),
-        };
-        // Update the model
-        const value = this.getValue();
-        if (!value?.data)
-            return;
-        const updatedNotifications = value.data.map((n) => (n.id === notification.id ? updatedNotification : n));
-        this.setValue({
-            ...value,
-            data: updatedNotifications,
-        });
-        // Notify about the change
-        this.markAsRead.emit(updatedNotification);
-    }
-    /**
-     * Calculate days difference from now
-     */
-    getDaysDifference(date) {
-        const now = new Date();
-        const diffMs = now.getTime() - date.getTime();
-        return Math.floor(diffMs / (1000 * 60 * 60 * 24));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPNotificationWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPNotificationWidgetViewComponent, isStandalone: true, selector: "ng-component", outputs: { notificationClick: "notificationClick", markAsRead: "markAsRead" }, providers: [DatePipe], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-p-4 ax-size-full\">\n  <ax-tabs\n    class=\"ax-bg-light-start ax-border-b ax-border-default\"\n    [fitParent]=\"true\"\n    location=\"bottom\"\n    (onActiveTabChanged)=\"handleTabChange($event)\"\n  >\n    <ax-tab-item [text]=\"('widget.notification.new' | translate | async) ?? 'New'\" class=\"ax-font-medium\">\n      <ax-suffix>\n        @if (getNewMessageCount() > 0) {\n        <ax-badge color=\"primary\" [text]=\"getNewMessageCount().toString()\" size=\"sm\" class=\"ax-ml-1\"></ax-badge>\n        }\n      </ax-suffix>\n    </ax-tab-item>\n    <ax-tab-item [text]=\"('widget.notification.all' | translate | async) ?? 'All'\" class=\"ax-font-medium\"></ax-tab-item>\n  </ax-tabs>\n  <div class=\"ax-space-y-4 ax-mt-4 ax-px-2\">\n    @for (item of notificationItems(); track item.id) {\n    <ng-container [ngTemplateOutlet]=\"chatItemTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: item }\">\n    </ng-container>\n    } @empty {\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-12 ax-px-4 ax-text-gray-400\">\n      <ax-icon class=\"ax-text-4xl ax-mb-3 ax-text-gray-300\">\n        <i class=\"fa-light fa-bell-slash\"></i>\n      </ax-icon>\n      <p class=\"ax-text-center\">{{ 'widget.notification.noNotifications' | translate | async }}</p>\n    </div>\n    }\n  </div>\n</div>\n\n<ng-template #chatItemTemplateRef let-data>\n  <div class=\"ax-flex ax-gap-3\">\n    @if(showAvatar()){\n    <div class=\"ax-rounded-full ax-size-10\">\n      <ax-avatar shape=\"rounded\" class=\"ax-shrink-0\" [size]=\"40\">\n        @if(data.user?.image){\n        <ax-image\n          [src]=\"data.user.image\"\n          [alt]=\"data.user?.name || ('widget.notification.user' | translate | async)\"\n        ></ax-image>\n        } @else {\n        <ax-icon>\n          <i class=\"fa-light fa-user\"></i>\n        </ax-icon>\n        }\n      </ax-avatar>\n    </div>\n    }\n    <div class=\"ax-overflow-hidden ax-grow ax-text-start\">\n      <h6 class=\"ax-pb-2 ax-font-semibold ax-truncate\">{{ data.user?.name || data.title }}</h6>\n      <p class=\"ax-text-xs ax-truncate\">{{ data.body }}</p>\n    </div>\n    @if(showDate()){\n    <div class=\"ax-text-xs ax-shrink-0\">\n      <span>\n        {{ formatTime(data.createdAt) }}\n      </span>\n    </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2$2.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$2.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i4.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i5.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i6.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPNotificationWidgetViewComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, imports: [
-                        CommonModule,
-                        AXTabsModule,
-                        AXDecoratorModule,
-                        AXButtonModule,
-                        AXBadgeModule,
-                        AXAvatarModule,
-                        AXImageModule,
-                        AXTranslationModule,
-                    ], providers: [DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-p-4 ax-size-full\">\n  <ax-tabs\n    class=\"ax-bg-light-start ax-border-b ax-border-default\"\n    [fitParent]=\"true\"\n    location=\"bottom\"\n    (onActiveTabChanged)=\"handleTabChange($event)\"\n  >\n    <ax-tab-item [text]=\"('widget.notification.new' | translate | async) ?? 'New'\" class=\"ax-font-medium\">\n      <ax-suffix>\n        @if (getNewMessageCount() > 0) {\n        <ax-badge color=\"primary\" [text]=\"getNewMessageCount().toString()\" size=\"sm\" class=\"ax-ml-1\"></ax-badge>\n        }\n      </ax-suffix>\n    </ax-tab-item>\n    <ax-tab-item [text]=\"('widget.notification.all' | translate | async) ?? 'All'\" class=\"ax-font-medium\"></ax-tab-item>\n  </ax-tabs>\n  <div class=\"ax-space-y-4 ax-mt-4 ax-px-2\">\n    @for (item of notificationItems(); track item.id) {\n    <ng-container [ngTemplateOutlet]=\"chatItemTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: item }\">\n    </ng-container>\n    } @empty {\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-12 ax-px-4 ax-text-gray-400\">\n      <ax-icon class=\"ax-text-4xl ax-mb-3 ax-text-gray-300\">\n        <i class=\"fa-light fa-bell-slash\"></i>\n      </ax-icon>\n      <p class=\"ax-text-center\">{{ 'widget.notification.noNotifications' | translate | async }}</p>\n    </div>\n    }\n  </div>\n</div>\n\n<ng-template #chatItemTemplateRef let-data>\n  <div class=\"ax-flex ax-gap-3\">\n    @if(showAvatar()){\n    <div class=\"ax-rounded-full ax-size-10\">\n      <ax-avatar shape=\"rounded\" class=\"ax-shrink-0\" [size]=\"40\">\n        @if(data.user?.image){\n        <ax-image\n          [src]=\"data.user.image\"\n          [alt]=\"data.user?.name || ('widget.notification.user' | translate | async)\"\n        ></ax-image>\n        } @else {\n        <ax-icon>\n          <i class=\"fa-light fa-user\"></i>\n        </ax-icon>\n        }\n      </ax-avatar>\n    </div>\n    }\n    <div class=\"ax-overflow-hidden ax-grow ax-text-start\">\n      <h6 class=\"ax-pb-2 ax-font-semibold ax-truncate\">{{ data.user?.name || data.title }}</h6>\n      <p class=\"ax-text-xs ax-truncate\">{{ data.body }}</p>\n    </div>\n    @if(showDate()){\n    <div class=\"ax-text-xs ax-shrink-0\">\n      <span>\n        {{ formatTime(data.createdAt) }}\n      </span>\n    </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
-        }] });
-
-var notificationWidget_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPNotificationWidgetViewComponent: AXPNotificationWidgetViewComponent
-});
-
-/**
- * Configuration for the Notification Widget
- */
-const AXPNotificationWidget = {
-    name: 'notification',
-    title: 'Notification Widget',
-    categories: [AXP_WIDGETS_UTILITY_CATEGORY],
-    groups: [AXPWidgetGroupEnum.DashboardWidget],
-    type: 'dashboard',
-    description: 'Displays notifications in a widget format',
-    icon: 'fa-regular fa-bell',
-    properties: [
-        cloneProperty(AXP_DATA_PATH_PROPERTY, { visible: false }),
         {
-            name: 'maxItems',
-            title: 'Max Items',
-            description: 'Maximum number of notification items to display',
-            group: AXP_STYLING_PROPERTY_GROUP,
+            name: 'fillArea',
+            title: 'Fill Area',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: false,
+                dataType: 'boolean',
+                interface: {
+                    name: 'fillArea',
+                    path: 'options.fillArea',
+                    type: AXPWidgetsCatalog.toggle,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'fillOpacity',
+            title: 'Fill Opacity',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: 10,
                 dataType: 'number',
                 interface: {
-                    name: 'maxItems',
-                    path: 'options.maxItems',
+                    name: 'fillOpacity',
+                    path: 'options.fillOpacity',
                     type: AXPWidgetsCatalog.number,
                     options: {
-                        minValue: 1,
+                        placeholder: '0-100',
+                        minValue: 0,
                         maxValue: 100,
                     },
                 },
             },
             visible: true,
         },
+        // ====== Tooltip Settings ======
         {
-            name: 'showAvatar',
-            title: 'Show Avatar',
-            description: 'Whether to show avatars in notifications',
+            name: 'showTooltip',
+            title: 'Show Tooltip',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
                 defaultValue: true,
                 dataType: 'boolean',
                 interface: {
-                    name: 'showAvatar',
-                    path: 'options.showAvatar',
+                    name: 'showTooltip',
+                    path: 'options.showTooltip',
                     type: AXPWidgetsCatalog.toggle,
                 },
             },
             visible: true,
         },
         {
-            name: 'showDate',
-            title: 'Show Date',
-            description: 'Whether to show date in notifications',
+            name: 'showCrosshair',
+            title: 'Show Crosshair',
             group: AXP_APPEARANCE_PROPERTY_GROUP,
             schema: {
-                defaultValue: true,
+                defaultValue: false,
                 dataType: 'boolean',
                 interface: {
-                    name: 'showDate',
-                    path: 'options.showDate',
+                    name: 'showCrosshair',
+                    path: 'options.showCrosshair',
                     type: AXPWidgetsCatalog.toggle,
                 },
             },
             visible: true,
         },
+        // ====== Animation Settings ======
+        {
+            name: 'animationEasing',
+            title: 'Animation Easing',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 'cubic-out',
+                dataType: 'string',
+                interface: {
+                    name: 'animationEasing',
+                    path: 'options.animationEasing',
+                    type: AXPWidgetsCatalog.select,
+                    options: {
+                        dataSource: [
+                            { value: 'linear', text: 'Linear' },
+                            { value: 'ease', text: 'Ease' },
+                            { value: 'ease-in', text: 'Ease In' },
+                            { value: 'ease-out', text: 'Ease Out' },
+                            { value: 'ease-in-out', text: 'Ease In Out' },
+                            { value: 'cubic', text: 'Cubic' },
+                            { value: 'cubic-in', text: 'Cubic In' },
+                            { value: 'cubic-out', text: 'Cubic Out' },
+                            { value: 'cubic-in-out', text: 'Cubic In Out' },
+                        ],
+                        textField: 'text',
+                        valueField: 'value',
+                    },
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'animationDuration',
+            title: 'Animation Duration',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 800,
+                dataType: 'number',
+                interface: {
+                    name: 'animationDuration',
+                    path: 'options.animationDuration',
+                    type: AXPWidgetsCatalog.number,
+                    options: {
+                        placeholder: '0-2000',
+                        minValue: 0,
+                        maxValue: 2000,
+                    },
+                },
+            },
+            visible: true,
+        },
     ],
     components: {
         view: {
-            component: () => Promise.resolve().then(function () { return notificationWidget_component; }).then((c) => c.AXPNotificationWidgetViewComponent),
+            component: () => Promise.resolve().then(function () { return lineChartWidget_component; }).then((c) => c.AXPLineChartWidgetViewComponent),
         },
     },
     meta: {
         dimensions: {
-            width: 3,
-            height: 5,
+            width: 5,
+            height: 6,
             minWidth: 2,
-            minHeight: 4,
-            maxWidth: 4,
+            minHeight: 2,
+            maxWidth: 6,
             maxHeight: 7,
         },
     },
@@ -3583,7 +2065,7 @@ class AXPStickyNoteWidgetViewComponent extends AXPValueWidgetComponent {
                 provide: AXGridLayoutWidgetComponent,
                 useExisting: AXPStickyNoteWidgetViewComponent,
             },
-        ], viewQueries: [{ propertyName: "wysiwyg", first: true, predicate: ["wysiwyg"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"sticky-note-container ax-size-full ax-rounded-lg ax-flex ax-flex-col ax-p-4 ax-shadow-md ax-transition-all ax-duration-300 hover:ax-shadow-lg\"\n  [style.background-color]=\"bgColor()\"\n  [style.color]=\"color()\"\n  [class.ax-shadow-lg]=\"isEditing()\"\n  [class.ax-scale-[1.02]]=\"isEditing()\"\n  (dblclick)=\"activateEdit()\"\n>\n  <!-- Header with timestamp -->\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3\">\n    <div class=\"ax-text-xs ax-opacity-70 ax-font-medium ax-flex ax-items-center ax-gap-1\">\n      <i class=\"fa-regular fa-clock ax-text-[0.65rem]\"></i>\n      {{ date() | format : 'datetime' : 'dd MMM, YY HH:mm' | async }}\n    </div>\n  </div>\n\n  <!-- Content area -->\n  <div class=\"ax-flex-1 ax-overflow-auto\">\n    <ax-wysiwyg-container\n      #wysiwyg\n      [class]=\"isEditing() ? 'ax-pointer-events-auto ax-cursor-text' : 'ax-pointer-events-none !ax-cursor-pointer'\"\n      class=\"ax-h-full\"\n      placeHolder=\"start writing with double click...\"\n      look=\"none\"\n      (onValueChanged)=\"valueChange($event)\"\n      [ngModel]=\"value()\"\n    >\n      <ax-wysiwyg-view class=\"!ax-size-full ax-border-b-0\"></ax-wysiwyg-view>\n    </ax-wysiwyg-container>\n  </div>\n\n  <!-- Footer with color selector and save button -->\n  @if (isEditing()) {\n  <div class=\"ax-absolute ax-bottom-2 ax-left-2 ax-right-2 ax-flex ax-flex-wrap ax-gap-1 ax-text-xs\">\n    <!-- Color selection bar when in edit mode -->\n    <div class=\"ax-flex ax-w-full ax-mt-2 ax-border ax-border-gray-200 ax-overflow-hidden ax-rounded-md\">\n      @for (preset of colorPresets; track preset) {\n      <div\n        class=\"ax-h-6 ax-flex-1 ax-cursor-pointer ax-transition-all ax-duration-200 ax-border-r ax-border-gray-200 last:ax-border-r-0 hover:ax-brightness-95\"\n        [style.background-color]=\"preset\"\n        [class.ax-ring-inset]=\"bgColor() === preset\"\n        [class.ax-ring-2]=\"bgColor() === preset\"\n        [class.ax-ring-primary]=\"bgColor() === preset\"\n        (click)=\"setColor(preset)\"\n      ></div>\n      }\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep ax-wysiwyg-view{color:#2e2e2e!important}\n"], dependencies: [{ kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i1$1.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$1.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i2$1.AXFormatPipe, name: "format" }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXColorBoxModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "wysiwyg", first: true, predicate: ["wysiwyg"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"sticky-note-container ax-size-full ax-rounded-lg ax-flex ax-flex-col ax-p-4 ax-shadow-md ax-transition-all ax-duration-300 hover:ax-shadow-lg\"\n  [style.background-color]=\"bgColor()\"\n  [style.color]=\"color()\"\n  [class.ax-shadow-lg]=\"isEditing()\"\n  [class.ax-scale-[1.02]]=\"isEditing()\"\n  (dblclick)=\"activateEdit()\"\n>\n  <!-- Header with timestamp -->\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3\">\n    <div class=\"ax-text-xs ax-opacity-70 ax-font-medium ax-flex ax-items-center ax-gap-1\">\n      <i class=\"fa-regular fa-clock ax-text-[0.65rem]\"></i>\n      {{ date() | format : 'datetime' : 'dd MMM, YY HH:mm' | async }}\n    </div>\n  </div>\n\n  <!-- Content area -->\n  <div class=\"ax-flex-1 ax-overflow-auto\">\n    <ax-wysiwyg-container\n      #wysiwyg\n      [class]=\"isEditing() ? 'ax-pointer-events-auto ax-cursor-text' : 'ax-pointer-events-none !ax-cursor-pointer'\"\n      class=\"ax-h-full\"\n      placeHolder=\"start writing with double click...\"\n      look=\"none\"\n      (onValueChanged)=\"valueChange($event)\"\n      [ngModel]=\"value()\"\n    >\n      <ax-wysiwyg-view class=\"!ax-size-full ax-border-b-0\"></ax-wysiwyg-view>\n    </ax-wysiwyg-container>\n  </div>\n\n  <!-- Footer with color selector and save button -->\n  @if (isEditing()) {\n  <div class=\"ax-absolute ax-bottom-2 ax-left-2 ax-right-2 ax-flex ax-flex-wrap ax-gap-1 ax-text-xs\">\n    <!-- Color selection bar when in edit mode -->\n    <div class=\"ax-flex ax-w-full ax-mt-2 ax-border ax-border-gray-200 ax-overflow-hidden ax-rounded-md\">\n      @for (preset of colorPresets; track preset) {\n      <div\n        class=\"ax-h-6 ax-flex-1 ax-cursor-pointer ax-transition-all ax-duration-200 ax-border-r ax-border-gray-200 last:ax-border-r-0 hover:ax-brightness-95\"\n        [style.background-color]=\"preset\"\n        [class.ax-ring-inset]=\"bgColor() === preset\"\n        [class.ax-ring-2]=\"bgColor() === preset\"\n        [class.ax-ring-primary]=\"bgColor() === preset\"\n        (click)=\"setColor(preset)\"\n      ></div>\n      }\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep ax-wysiwyg-view{color:#2e2e2e!important}\n"], dependencies: [{ kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i1$1.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$1.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i2.AXFormatPipe, name: "format" }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXColorBoxModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPStickyNoteWidgetViewComponent, decorators: [{
             type: Component,
@@ -3762,7 +2244,7 @@ class AXPTaskListWidgetViewComponent extends AXPValueWidgetComponent {
         return Math.floor(diffMs / (1000 * 60 * 60 * 24));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTaskListWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPTaskListWidgetViewComponent, isStandalone: true, selector: "ng-component", outputs: { taskClick: "taskClick", taskCompleted: "taskCompleted" }, providers: [DatePipe], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-size-full ax-p-4\">\n  <!-- Header -->\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3\">\n    <h3 class=\"ax-text-lg ax-font-semibold\">{{ 'widget.tasklist.title' | translate | async }}</h3>\n    <div class=\"ax-flex ax-gap-2\">\n      @if(getPendingTaskCount() > 0){\n      <ax-badge\n        [text]=\"getPendingTaskCount() + ' ' + ('widget.tasklist.pending' | translate | async)\"\n        [color]=\"'warning'\"\n        size=\"sm\"\n        class=\"ax-ml-1\"\n      >\n      </ax-badge>\n      } @if(getCompletedTaskCount() > 0){\n      <ax-badge\n        [text]=\"getCompletedTaskCount() + ' ' + ('widget.tasklist.completed' | translate | async)\"\n        [color]=\"'success'\"\n        size=\"sm\"\n        class=\"ax-ml-1\"\n      >\n      </ax-badge>\n      }\n    </div>\n  </div>\n\n  <!-- Task List -->\n  <div class=\"ax-space-y-4 ax-my-4 ax-px-2\">\n    @if (showCategories() && hasCategories()) {\n    <!-- Categorized Tasks -->\n    @for (category of getCategories(); track category) {\n    <div class=\"ax-mb-3\">\n      <!-- Category Header -->\n      <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-2 ax-h-5\">\n        <h4 class=\"ax-font-medium ax-text-gray-700\">{{ category }}</h4>\n        @if(getCategoryTaskCount(category)){\n        <ax-badge [text]=\"getCategoryTaskCount(category).toString()\" [color]=\"'primary'\" size=\"sm\"></ax-badge>\n        }\n      </div>\n      <!-- Tasks in Category -->\n      @for (task of getTasksByCategory(category); track task.id) {\n      <ng-container\n        [ngTemplateOutlet]=\"taskItemTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: task }\"\n      ></ng-container>\n      }\n    </div>\n    } } @else {\n    <!-- Uncategorized Tasks -->\n    @for (task of taskItems(); track task.id) {\n    <ng-container\n      [ngTemplateOutlet]=\"taskItemTemplateRef\"\n      [ngTemplateOutletContext]=\"{ $implicit: task }\"\n    ></ng-container>\n    } @empty {\n    <!-- Empty State -->\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-12 ax-px-4 ax-text-gray-400\">\n      <ax-icon class=\"ax-text-4xl ax-mb-3 ax-text-gray-300\">\n        <i class=\"fa-light fa-clipboard-list-check\"></i>\n      </ax-icon>\n      <p class=\"ax-text-center\">{{ 'widget.tasklist.noTasks' | translate | async }}</p>\n    </div>\n    } }\n  </div>\n</div>\n\n<!-- Task Item Template -->\n<ng-template #taskItemTemplateRef let-task>\n  <div class=\"ax-flex ax-gap-3 ax-items-center ax-py-2 ax-border-b ax-border-gray-100 last:ax-border-0\">\n    <!-- Checkbox -->\n    <ax-check-box\n      class=\"ax-flex-shrink-0\"\n      [value]=\"task.completed\"\n      [disabled]=\"!allowMarkComplete()\"\n      (valueChange)=\"onTaskCompletionChange(task, $event)\"\n    >\n    </ax-check-box>\n\n    <!-- Task Details -->\n    <div class=\"ax-overflow-hidden ax-grow ax-text-start\" (click)=\"onTaskClick(task)\">\n      <!-- Title and Priority -->\n      <div class=\"ax-flex ax-items-center ax-gap-2\">\n        <h6\n          class=\"ax-font-semibold ax-truncate ax-pb-1\"\n          [class.ax-line-through]=\"task.completed\"\n          [class.ax-text-gray-400]=\"task.completed\"\n        >\n          {{ task.title }}\n        </h6>\n        @if(showPriority() && task.priority) {\n        <ax-badge [color]=\"getPriorityColor(task.priority)\" [text]=\"task.priority\" size=\"sm\" class=\"ax-ml-1\"></ax-badge>\n        }\n      </div>\n\n      <!-- Metadata -->\n      <div class=\"ax-flex ax-flex-wrap ax-gap-x-3 ax-gap-y-1 ax-mt-1 ax-text-xs ax-text-gray-500\">\n        @if(showDate() && task.dueDate) {\n        <span class=\"ax-flex ax-items-center ax-gap-1\" [class.ax-text-danger-500]=\"getDaysDifference(task.dueDate) < 0\">\n          <ax-icon><i class=\"fa-light fa-calendar\"></i></ax-icon>\n          {{ formatDueDate(task.dueDate) }}\n        </span>\n        } @if(showAssignee() && task.assignedTo) {\n        <span class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-icon><i class=\"fa-light fa-user\"></i></ax-icon>\n          {{ task.assignedTo.name }}\n        </span>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;height:100%;width:100%}.task-completed{text-decoration:line-through;color:var(--ax-text-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i4.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i4$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPTaskListWidgetViewComponent, isStandalone: true, selector: "ng-component", outputs: { taskClick: "taskClick", taskCompleted: "taskCompleted" }, providers: [DatePipe], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-size-full ax-p-4\">\n  <!-- Header -->\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3\">\n    <h3 class=\"ax-text-lg ax-font-semibold\">{{ 'widget.tasklist.title' | translate | async }}</h3>\n    <div class=\"ax-flex ax-gap-2\">\n      @if(getPendingTaskCount() > 0){\n      <ax-badge\n        [text]=\"getPendingTaskCount() + ' ' + ('widget.tasklist.pending' | translate | async)\"\n        [color]=\"'warning'\"\n        size=\"sm\"\n        class=\"ax-ml-1\"\n      >\n      </ax-badge>\n      } @if(getCompletedTaskCount() > 0){\n      <ax-badge\n        [text]=\"getCompletedTaskCount() + ' ' + ('widget.tasklist.completed' | translate | async)\"\n        [color]=\"'success'\"\n        size=\"sm\"\n        class=\"ax-ml-1\"\n      >\n      </ax-badge>\n      }\n    </div>\n  </div>\n\n  <!-- Task List -->\n  <div class=\"ax-space-y-4 ax-my-4 ax-px-2\">\n    @if (showCategories() && hasCategories()) {\n    <!-- Categorized Tasks -->\n    @for (category of getCategories(); track category) {\n    <div class=\"ax-mb-3\">\n      <!-- Category Header -->\n      <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-2 ax-h-5\">\n        <h4 class=\"ax-font-medium ax-text-gray-700\">{{ category }}</h4>\n        @if(getCategoryTaskCount(category)){\n        <ax-badge [text]=\"getCategoryTaskCount(category).toString()\" [color]=\"'primary'\" size=\"sm\"></ax-badge>\n        }\n      </div>\n      <!-- Tasks in Category -->\n      @for (task of getTasksByCategory(category); track task.id) {\n      <ng-container\n        [ngTemplateOutlet]=\"taskItemTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: task }\"\n      ></ng-container>\n      }\n    </div>\n    } } @else {\n    <!-- Uncategorized Tasks -->\n    @for (task of taskItems(); track task.id) {\n    <ng-container\n      [ngTemplateOutlet]=\"taskItemTemplateRef\"\n      [ngTemplateOutletContext]=\"{ $implicit: task }\"\n    ></ng-container>\n    } @empty {\n    <!-- Empty State -->\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-12 ax-px-4 ax-text-gray-400\">\n      <ax-icon class=\"ax-text-4xl ax-mb-3 ax-text-gray-300\">\n        <i class=\"fa-light fa-clipboard-list-check\"></i>\n      </ax-icon>\n      <p class=\"ax-text-center\">{{ 'widget.tasklist.noTasks' | translate | async }}</p>\n    </div>\n    } }\n  </div>\n</div>\n\n<!-- Task Item Template -->\n<ng-template #taskItemTemplateRef let-task>\n  <div class=\"ax-flex ax-gap-3 ax-items-center ax-py-2 ax-border-b ax-border-gray-100 last:ax-border-0\">\n    <!-- Checkbox -->\n    <ax-check-box\n      class=\"ax-flex-shrink-0\"\n      [value]=\"task.completed\"\n      [disabled]=\"!allowMarkComplete()\"\n      (valueChange)=\"onTaskCompletionChange(task, $event)\"\n    >\n    </ax-check-box>\n\n    <!-- Task Details -->\n    <div class=\"ax-overflow-hidden ax-grow ax-text-start\" (click)=\"onTaskClick(task)\">\n      <!-- Title and Priority -->\n      <div class=\"ax-flex ax-items-center ax-gap-2\">\n        <h6\n          class=\"ax-font-semibold ax-truncate ax-pb-1\"\n          [class.ax-line-through]=\"task.completed\"\n          [class.ax-text-gray-400]=\"task.completed\"\n        >\n          {{ task.title }}\n        </h6>\n        @if(showPriority() && task.priority) {\n        <ax-badge [color]=\"getPriorityColor(task.priority)\" [text]=\"task.priority\" size=\"sm\" class=\"ax-ml-1\"></ax-badge>\n        }\n      </div>\n\n      <!-- Metadata -->\n      <div class=\"ax-flex ax-flex-wrap ax-gap-x-3 ax-gap-y-1 ax-mt-1 ax-text-xs ax-text-gray-500\">\n        @if(showDate() && task.dueDate) {\n        <span class=\"ax-flex ax-items-center ax-gap-1\" [class.ax-text-danger-500]=\"getDaysDifference(task.dueDate) < 0\">\n          <ax-icon><i class=\"fa-light fa-calendar\"></i></ax-icon>\n          {{ formatDueDate(task.dueDate) }}\n        </span>\n        } @if(showAssignee() && task.assignedTo) {\n        <span class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-icon><i class=\"fa-light fa-user\"></i></ax-icon>\n          {{ task.assignedTo.name }}\n        </span>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;height:100%;width:100%}.task-completed{text-decoration:line-through;color:var(--ax-text-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i4.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTaskListWidgetViewComponent, decorators: [{
             type: Component,
@@ -3794,6 +2276,25 @@ const AXPTaskListWidget = {
     icon: 'fa-light fa-clipboard-list-check',
     properties: [
         cloneProperty(AXP_DATA_PATH_PROPERTY, { visible: false }),
+        // ====== Title ======
+        {
+            name: 'title',
+            title: 'Chart Title',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: '',
+                dataType: 'string',
+                interface: {
+                    name: 'title',
+                    path: 'options.title',
+                    type: AXPWidgetsCatalog.text,
+                    options: {
+                        placeholder: 'Enter chart title',
+                    },
+                },
+            },
+            visible: true,
+        },
         // Display options
         {
             name: 'maxItems',
@@ -4944,6 +3445,179 @@ const AXPWeatherWidget = {
     },
 };
 
+class AXPDashboardShortcutWidgetViewComponent extends AXPLayoutWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.popupService = inject(AXPopupService);
+        this.workflow = inject(AXPWorkflowService);
+        this.searchConfig = inject(AXP_GLOBAL_SEARCH_CONFIG_TOKEN);
+        this.item = computed(() => this.options()['item']);
+        this.color = computed(() => this.options()['color']);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        if (!this.color()) {
+            this.setOptions({
+                color: AXPDataGenerator.color()
+            });
+        }
+    }
+    async executeCommand() {
+        if (this.item()?.command) {
+            await this.workflow.execute(this.item().command.name, this.item().command.options);
+        }
+    }
+    async setCommand() {
+        const component = await this.searchConfig.window();
+        const popup = await this.popupService.open(component, {
+            title: 'Choose command...',
+            size: 'fit',
+            closeOnBackdropClick: true,
+            header: false,
+        });
+        if (popup.data) {
+            const result = popup.data;
+            if (result && result.command) {
+                this.setOptions({
+                    item: {
+                        name: result.name,
+                        title: result.title,
+                        description: result.description,
+                        icon: result.icon,
+                        command: result.command
+                    }
+                });
+            }
+        }
+    }
+    get __style() {
+        const cls = {};
+        cls[`background-color`] = this.color();
+        return cls;
+    }
+    get __class() {
+        const cls = {};
+        cls[`ax-flex`] = true;
+        cls[`ax-flex-col`] = true;
+        cls[`ax-items-center`] = true;
+        cls[`ax-justify-center`] = true;
+        cls[`ax-w-full`] = true;
+        cls[`ax-h-full`] = true;
+        cls[`ax-text-center`] = true;
+        cls[`ax-overflow-hidden`] = true;
+        cls[`ax-cursor-pointer`] = true;
+        cls[`ax-text-white`] = true;
+        return cls;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDashboardShortcutWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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">Add Shortcut</span>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDashboardShortcutWidgetViewComponent, 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">Add Shortcut</span>
+      </div>
+    }
+  `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXTranslationModule]
+                }]
+        }], propDecorators: { __style: [{
+                type: HostBinding,
+                args: ['style']
+            }], __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+var dashboardShortcutWidgetView_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPDashboardShortcutWidgetViewComponent: AXPDashboardShortcutWidgetViewComponent
+});
+
+const AXPDashboardShortcutWidget = {
+    name: "dashboard-shortcut",
+    title: "Shortcut",
+    description: 'Quick access to your key features.',
+    type: 'view',
+    categories: [AXP_WIDGETS_UTILITY_CATEGORY],
+    groups: [AXPWidgetGroupEnum.DashboardWidget],
+    icon: "fa-light fa-link",
+    properties: [
+        AXP_COLOR_PROPERTY
+    ],
+    meta: {
+        dimensions: {
+            width: 2,
+            height: 2,
+            minWidth: 1,
+            minHeight: 1,
+            maxWidth: 3,
+            maxHeight: 2,
+        },
+    },
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return dashboardShortcutWidgetView_component; }).then((c) => c.AXPDashboardShortcutWidgetViewComponent),
+        },
+    }
+};
+
+class AXMMenuProvider {
+    constructor() {
+        this.sessionService = inject(AXPSessionService);
+    }
+    async provide(context) {
+        const scope = RootConfig.config.i18n;
+        const module = RootConfig.module;
+        const appName = this.sessionService.application?.name;
+        const isAuthorized = await firstValueFrom(this.sessionService.isAuthorized$);
+        if (!isAuthorized) {
+            return;
+        }
+    }
+}
+
 function routesFactory() {
     const config = inject(AXP_ENTITY_CONFIG_TOKEN);
     return {
@@ -4955,14 +3629,14 @@ function routesFactory() {
         children: [
             {
                 path: 'dashboard',
-                loadComponent: () => import('./acorex-modules-dashboard-management-home-dashboard-CHXDeuSF.mjs').then((c) => c.AXPDashboardHomeComponent),
+                loadComponent: () => import('./acorex-modules-dashboard-management-home-dashboard-DiPn_RhH.mjs').then((c) => c.AXMDashboardHomeComponent),
             },
         ],
     };
 }
 class AXMDashboardManagementModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDashboardManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXMDashboardManagementModule, imports: [i3.AXPLayoutBuilderModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXMDashboardManagementModule, imports: [i3$1.AXPLayoutBuilderModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMDashboardManagementModule, providers: [
             {
                 provide: AXMDashboardService,
@@ -4975,8 +3649,8 @@ class AXMDashboardManagementModule {
                     {
                         key: 'dashboard',
                         title: 'Dashboard',
-                        route: routesFactory()
-                    }
+                        route: routesFactory(),
+                    },
                 ],
             },
             AXPWidgetsModule,
@@ -5009,7 +3683,6 @@ class AXMDashboardManagementModule {
                     AXPStickyNoteWidget,
                     AXPClockCalendarWidget,
                     AXPWeatherWidget,
-                    AXPNotificationWidget,
                     AXPTaskListWidget,
                 ],
             })] }); }
@@ -5029,7 +3702,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                                 AXPStickyNoteWidget,
                                 AXPClockCalendarWidget,
                                 AXPWeatherWidget,
-                                AXPNotificationWidget,
                                 AXPTaskListWidget,
                             ],
                         }),
@@ -5048,8 +3720,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                                 {
                                     key: 'dashboard',
                                     title: 'Dashboard',
-                                    route: routesFactory()
-                                }
+                                    route: routesFactory(),
+                                },
                             ],
                         },
                         AXPWidgetsModule,
@@ -5079,5 +3751,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXMDashboardService as A, AXPWeatherApiMockService as B, AXPWeatherApiService as C, AXPWeatherWidgetViewComponent as D, AXPWeatherWidget as E, RootConfig as R, AXMDashboardManagementModule as a, AXPBarChartWidgetViewComponent as b, AXPBarChartWidget as c, AXP_WIDGETS_CHART_CATEGORY as d, AXP_WIDGETS_UTILITY_CATEGORY as e, AXPClockCalendarWidgetViewComponent as f, AXPClockCalendarWidget as g, AXP_TIMEZONE_OPTIONS as h, AXP_DATE_FORMAT_OPTIONS as i, AXPDonutChartWidgetViewComponent as j, AXPDonutChartWidget as k, AXPGaugeChartWidgetViewComponent as l, AXPGaugeChartWidget as m, AXPLineChartWidgetViewComponent as n, AXPLineChartWidget as o, AXPNotificationWidgetViewComponent as p, AXPNotificationWidget as q, AXPChartBaseComponent as r, AXPChartColors as s, loadD3 as t, AXPChartTooltipComponent as u, AXPStickyNoteWidgetViewComponent as v, AXPStickyNoteWidget as w, AXPTaskListWidgetViewComponent as x, AXPTaskListWidget as y, AXPWeatherApiAbstract as z };
-//# sourceMappingURL=acorex-modules-dashboard-management-acorex-modules-dashboard-management-CReOsVhq.mjs.map
+export { AXMDashboardService as A, RootConfig as R, AXMDashboardManagementModule as a, AXPBarChartWidgetViewComponent as b, AXPBarChartWidget as c, AXP_WIDGETS_CHART_CATEGORY as d, AXP_WIDGETS_UTILITY_CATEGORY as e, AXPClockCalendarWidgetViewComponent as f, AXPClockCalendarWidget as g, AXP_TIMEZONE_OPTIONS as h, AXP_DATE_FORMAT_OPTIONS as i, AXPDonutChartWidgetViewComponent as j, AXPDonutChartWidget as k, AXPGaugeChartWidgetViewComponent as l, AXPGaugeChartWidget as m, AXPLineChartWidgetViewComponent as n, AXPLineChartWidget as o, AXPStickyNoteWidgetViewComponent as p, AXPStickyNoteWidget as q, AXPTaskListWidgetViewComponent as r, AXPTaskListWidget as s, AXPWeatherApiAbstract as t, AXPWeatherApiMockService as u, AXPWeatherApiService as v, AXPWeatherWidgetViewComponent as w, AXPWeatherWidget as x };
+//# sourceMappingURL=acorex-modules-dashboard-management-acorex-modules-dashboard-management-VORBD1g-.mjs.map