@acorex/platform 19.3.0-next.5 → 19.3.1

package/fesm2022/acorex-platform-widgets.mjs

@@ -10,9 +10,9 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i2 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import * as i1$1 from '@angular/common';
-import { CommonModule, DatePipe } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, EventEmitter, ChangeDetectionStrategy, Component, inject, afterNextRender, HostBinding, signal, ViewEncapsulation, InjectionToken, effect, ViewChild, untracked, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef, viewChild, ElementRef, afterRender, NgZone, model, input, linkedSignal, Injector, runInInjectionContext, Directive, output, HostListener, Injectable, NgModule, importProvidersFrom } from '@angular/core';
+import { computed, EventEmitter, ChangeDetectionStrategy, Component, inject, afterNextRender, HostBinding, signal, ViewEncapsulation, InjectionToken, effect, ViewChild, untracked, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef, viewChild, ElementRef, afterRender, NgZone, model, input, linkedSignal, HostListener, importProvidersFrom, NgModule } from '@angular/core';
 import * as i1 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
 import * as i4 from '@acorex/components/form';
@@ -31,7 +31,7 @@ import { AXTextBoxModule } from '@acorex/components/text-box';
 import * as i5$1 from '@acorex/core/translation';
 import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
 import { AXBasePageComponent } from '@acorex/components/page';
-import { AXDateTimeFormatter, AXDateTimeModule, AXCalendarService } from '@acorex/core/date-time';
+import { AXDateTimeFormatter, AXCalendarService } from '@acorex/core/date-time';
 import * as i3$2 from '@acorex/components/datetime-box';
 import { AXDateTimeBoxModule } from '@acorex/components/datetime-box';
 import * as i5$2 from '@acorex/components/text-area';
@@ -39,8 +39,7 @@ import { AXTextAreaModule } from '@acorex/components/text-area';
 import { set, isNumber, castArray, cloneDeep, isEqual, sum, get } from 'lodash-es';
 import * as i4$1 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
-import * as i2$9 from '@acorex/core/format';
-import { AXFormatService, AXFormatModule } from '@acorex/core/format';
+import { AXFormatService } from '@acorex/core/format';
 import * as i1$4 from '@acorex/components/number-box';
 import { AXNumberBoxModule } from '@acorex/components/number-box';
 import * as i3$3 from '@acorex/components/password-box';
@@ -55,7 +54,7 @@ import * as i5$3 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
 import * as i2$4 from '@acorex/components/selection-list';
 import { AXSelectionListModule } from '@acorex/components/selection-list';
-import { first, Subscription, interval, map, Observable, catchError, throwError, switchMap } from 'rxjs';
+import { first, Subscription } from 'rxjs';
 import { AXFileService } from '@acorex/core/file';
 import * as i6 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
@@ -71,7 +70,7 @@ import { AXImageModule } from '@acorex/components/image';
 import * as i1$6 from '@acorex/components/map';
 import { AXMapModule } from '@acorex/components/map';
 import * as i1$7 from '@acorex/components/grid-layout-builder';
-import { AXGridLayoutContainerComponent, AXGridLayoutBuilderModule, AXGridLayoutWidgetComponent } from '@acorex/components/grid-layout-builder';
+import { AXGridLayoutContainerComponent, AXGridLayoutBuilderModule } from '@acorex/components/grid-layout-builder';
 import { AXPDesignerService, AXPWidgetDesignerRendererDirective, AXPDesignerGridDrawerComponent, AXPDesignerAddWidgetMiniButtonComponent } from '@acorex/platform/layout/designer';
 import * as i1$8 from '@acorex/components/button-group';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
@@ -81,10 +80,6 @@ import * as i2$8 from '@acorex/components/color-box';
 import { AXColorBoxModule } from '@acorex/components/color-box';
 import * as i1$9 from '@acorex/components/popover';
 import { AXPopoverComponent, AXPopoverModule } from '@acorex/components/popover';
-import { AXTagModule } from '@acorex/components/tag';
-import * as i5$4 from '@acorex/components/avatar';
-import { AXAvatarModule } from '@acorex/components/avatar';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
 import * as i1$a from '@acorex/components/cron-job';
 import { AXCronJobModule } from '@acorex/components/cron-job';
 import * as i1$b from '@acorex/components/qrcode';
@@ -1927,7 +1922,7 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
       ></ax-button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$2.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$2.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "calendar", "picker", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDateTimeBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -6721,20 +6716,19 @@ class AXPToggleWidgetEditComponent extends AXPValueWidgetComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPToggleWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPToggleWidgetEditComponent, isStandalone: true, selector: "axp-switch-widget-edit", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
-  <div class="ax-flex ax-flex-row ax-gap-2">
-    <ax-switch
-          [ngModel]="this.getValue()"
-          [disabled]="disabled()"
-          [readonly]="readonly()"
-          [color]="color()"
-          (onValueChanged)="handleValueChanged($event)">
-         
+    <div class="ax-flex ax-items-center ax-gap-2">
+      <ax-switch
+        [ngModel]="this.getValue()"
+        [disabled]="disabled()"
+        [readonly]="readonly()"
+        [color]="color()"
+        (onValueChanged)="handleValueChanged($event)"
+      >
       </ax-switch>
-      @if(label())
-      {
-        <ax-label  [textContent]="label()"></ax-label>
+      @if(label()) {
+      <ax-label [textContent]="label()"></ax-label>
       }
-  </div>
+    </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: AXFormModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i2$5.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPToggleWidgetEditComponent, decorators: [{
@@ -6742,20 +6736,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             args: [{
                     selector: 'axp-switch-widget-edit',
                     template: `
-  <div class="ax-flex ax-flex-row ax-gap-2">
-    <ax-switch
-          [ngModel]="this.getValue()"
-          [disabled]="disabled()"
-          [readonly]="readonly()"
-          [color]="color()"
-          (onValueChanged)="handleValueChanged($event)">
-         
+    <div class="ax-flex ax-items-center ax-gap-2">
+      <ax-switch
+        [ngModel]="this.getValue()"
+        [disabled]="disabled()"
+        [readonly]="readonly()"
+        [color]="color()"
+        (onValueChanged)="handleValueChanged($event)"
+      >
       </ax-switch>
-      @if(label())
-      {
-        <ax-label  [textContent]="label()"></ax-label>
+      @if(label()) {
+      <ax-label [textContent]="label()"></ax-label>
       }
-  </div>
+    </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, FormsModule, AXFormModule, AXSwitchModule, AXValidationModule, AXLabelModule],
@@ -7879,7 +7872,7 @@ class AXPGalleryWidgetViewComponent extends AXPValueWidgetComponent {
       <small>No Media!</small>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$7.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.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: AXLoadingModule }, { kind: "component", type: i2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$7.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.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: AXLoadingModule }, { kind: "component", type: i2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGalleryWidgetViewComponent, decorators: [{
             type: Component,
@@ -8416,7 +8409,7 @@ class AXPSignatureWidgetEditComponent extends AXPValueWidgetComponent {
       </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.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: AXImageModule }, { kind: "component", type: i2$7.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.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: AXImageModule }, { kind: "component", type: i2$7.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPSignatureWidgetEditComponent, decorators: [{
             type: Component,
@@ -8514,7 +8507,7 @@ class AXPSignatureWidgetViewComponent extends AXPValueWidgetComponent {
       <span>{{placeholder()}}</span>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$7.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$7.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPSignatureWidgetViewComponent, decorators: [{
             type: Component,
@@ -12393,3721 +12386,6 @@ const AXPRequiredValidationWidget = {
     },
 };
 
-/**
- * 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$1.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"] }]
-        }] });
-
-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
-    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);
-        // Create SVG container
-        this.svg = this.d3
-            .select(containerElement)
-            .append('svg')
-            .attr('width', this.width + this.margin.left + this.margin.right)
-            .attr('height', this.height + this.margin.top + this.margin.bottom);
-        // Create chart group with margins
-        this.chart = this.svg.append('g').attr('transform', `translate(${this.margin.left},${this.margin.top})`);
-        // 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
-    setupDimensions(containerElement, options) {
-        // Set width and height based on container or options
-        const containerWidth = containerElement.clientWidth;
-        const containerHeight = containerElement.clientHeight;
-        // Ensure minimum dimensions for the chart
-        const minDim = 200;
-        this.width = Math.max(options.width || containerWidth, minDim) - this.margin.left - this.margin.right;
-        this.height = Math.max(options.height || containerHeight, minDim) - this.margin.top - this.margin.bottom;
-    }
-    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]);
-    }
-    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
-        }
-    }
-    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
-    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);
-        }
-    }
-    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,
-        });
-    }
-    handleBarClick(event, datum) {
-        this.barClick.emit(datum);
-    }
-    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:300px}:host .axp-bar-chart{width:100%;height:100%;min-height:300px;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden}:host .axp-bar-chart-bar{transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),filter .3s cubic-bezier(.4,0,.2,1);cursor:pointer;filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))}:host .axp-bar-chart-bar:hover{filter:brightness(.9) drop-shadow(0 4px 6px rgba(0,0,0,.15));transform:translateY(-3px)}:host .axp-bar-chart-axis-x path,:host .axp-bar-chart-axis-y path{stroke:var(--ax-border-color, #e0e0e0)}:host .axp-bar-chart-axis-x line,:host .axp-bar-chart-axis-y line,:host .axp-bar-chart-grid line{stroke:var(--ax-border-color, #e0e0e0);stroke-dasharray:2,2;stroke-opacity:.5}:host .axp-bar-chart-grid path{stroke-width:0}:host .axp-bar-chart-axis-x text,:host .axp-bar-chart-axis-y text{fill:var(--ax-text-muted, #666);font-size:12px}:host .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:1.5rem}:host .axp-bar-chart-no-data-icon{font-size:1.5rem;margin-bottom:.75rem;color:var(--ax-text-muted, #999)}:host .axp-bar-chart-no-data-text{font-size:1rem;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:300px}:host .axp-bar-chart{width:100%;height:100%;min-height:300px;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden}:host .axp-bar-chart-bar{transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),filter .3s cubic-bezier(.4,0,.2,1);cursor:pointer;filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))}:host .axp-bar-chart-bar:hover{filter:brightness(.9) drop-shadow(0 4px 6px rgba(0,0,0,.15));transform:translateY(-3px)}:host .axp-bar-chart-axis-x path,:host .axp-bar-chart-axis-y path{stroke:var(--ax-border-color, #e0e0e0)}:host .axp-bar-chart-axis-x line,:host .axp-bar-chart-axis-y line,:host .axp-bar-chart-grid line{stroke:var(--ax-border-color, #e0e0e0);stroke-dasharray:2,2;stroke-opacity:.5}:host .axp-bar-chart-grid path{stroke-width:0}:host .axp-bar-chart-axis-x text,:host .axp-bar-chart-axis-y text{fill:var(--ax-text-muted, #666);font-size:12px}:host .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:1.5rem}:host .axp-bar-chart-no-data-icon{font-size:1.5rem;margin-bottom:.75rem;color:var(--ax-text-muted, #999)}:host .axp-bar-chart-no-data-text{font-size:1rem;font-weight:600;color:var(--ax-text-color, #333)}\n"] }]
-        }] });
-
-var barChartWidget_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPBarChartWidgetViewComponent: AXPBarChartWidgetViewComponent
-});
-
-const AXP_WIDGETS_CHART_CATEGORY = {
-    name: 'chart',
-    order: 6,
-    title: 'Charts',
-};
-const AXP_WIDGETS_UTILITY_CATEGORY = {
-    name: 'utility',
-    order: 7,
-    title: 'Utilities',
-};
-
-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',
-            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,
-        },
-        {
-            name: 'width',
-            title: 'Width',
-            group: AXP_STYLING_PROPERTY_GROUP,
-            schema: {
-                defaultValue: null,
-                dataType: 'number',
-                interface: {
-                    name: 'width',
-                    path: 'options.width',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        minValue: 0,
-                        maxValue: 1200,
-                    },
-                },
-            },
-            visible: true,
-        },
-        // ====== Axis Settings ======
-        {
-            name: 'showXAxis',
-            title: 'Show X Axis',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showXAxis',
-                    path: 'options.showXAxis',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'showYAxis',
-            title: 'Show Y Axis',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showYAxis',
-                    path: 'options.showYAxis',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'showGrid',
-            title: 'Show Grid Lines',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showGrid',
-                    path: 'options.showGrid',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
-        // ====== Tooltip Settings ======
-        {
-            name: 'showTooltip',
-            title: 'Show Tooltip',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showTooltip',
-                    path: 'options.showTooltip',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            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,
-        },
-    ],
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return barChartWidget_component; }).then((c) => c.AXPBarChartWidgetViewComponent),
-        },
-    },
-    meta: {
-        dimensions: {
-            width: 5,
-            height: 6,
-            minWidth: 2,
-            minHeight: 2,
-            maxWidth: 6,
-            maxHeight: 7,
-        },
-    },
-};
-
-class AXPClockCalendarWidgetViewComponent extends AXPValueWidgetComponent {
-    constructor() {
-        super(...arguments);
-        // Dependencies
-        this.cdr = inject(ChangeDetectorRef);
-        // Time state
-        this.currentTime = new Date();
-        this.currentDate = new Date();
-        this.clockSubscription = null;
-        // Static clock elements
-        this.clockHours = Array.from({ length: 12 }, (_, i) => i + 1);
-        this.clockHourNumbers = Array.from({ length: 12 }, (_, i) => ({
-            number: i === 0 ? 12 : i,
-            angle: i * 30,
-        }));
-        // Clock hands rotation angles
-        this.hourRotation = 0;
-        this.minuteRotation = 0;
-        this.secondRotation = 0;
-        // Options with computed properties and defaults
-        this.displayLayout = computed(() => this.options()?.displayLayout?.id ?? 'both');
-        this.showDigitalClock = computed(() => {
-            const layout = this.displayLayout();
-            return layout === 'both' || layout === 'digital';
-        });
-        this.showAnalogClock = computed(() => {
-            const layout = this.displayLayout();
-            return layout === 'both' || layout === 'analog';
-        });
-        this.showDate = computed(() => this.options()?.showDate !== false);
-        this.showDayOfWeek = computed(() => this.options()?.showDayOfWeek !== false);
-        this.use24Hour = computed(() => this.options()?.use24Hour === true);
-        this.showSeconds = computed(() => this.options()?.showSeconds !== false);
-        this.dateFormat = computed(() => this.options()?.dateFormat?.id ?? 'dd MMM yyyy');
-        this.timezone = computed(() => this.options()?.timezone?.id ?? 'local');
-        this.showTimezoneIndicator = computed(() => this.timezone() !== 'local');
-        this.displayTimezone = computed(() => {
-            const tz = this.timezone();
-            if (tz === 'local')
-                return '';
-            if (tz.startsWith('UTC')) {
-                const [match, sign, hours, minutes] = tz.match(/UTC([+-])(\d+):?(\d+)?/) ?? [];
-                if (match) {
-                    if (!minutes || minutes === '00') {
-                        return `UTC${sign}${parseInt(hours)}`;
-                    }
-                    return `UTC${sign}${parseInt(hours)}:${minutes}`;
-                }
-            }
-            return tz;
-        });
-        this.timeFormat = computed(() => this.showSeconds() ? (this.use24Hour() ? 'HH:mm:ss' : 'hh:mm:ss a') : this.use24Hour() ? 'HH:mm' : 'hh:mm a');
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.startClockTimer();
-        this.updateTime();
-    }
-    ngOnDestroy() {
-        this.stopClockTimer();
-    }
-    startClockTimer() {
-        this.stopClockTimer();
-        this.clockSubscription = interval(1000).subscribe(() => this.updateTime());
-    }
-    stopClockTimer() {
-        this.clockSubscription?.unsubscribe();
-        this.clockSubscription = null;
-    }
-    updateTime() {
-        const now = this.getAdjustedTime();
-        this.currentTime = now;
-        this.currentDate = now;
-        this.updateClockHandsRotation(now);
-        this.cdr.markForCheck();
-    }
-    getAdjustedTime() {
-        const now = new Date();
-        const tz = this.timezone();
-        if (tz === 'local' || !tz.startsWith('UTC')) {
-            return now;
-        }
-        const [match, sign, hours, minutes] = tz.match(/UTC([+-])(\d+):?(\d+)?/) ?? [];
-        if (!match) {
-            return now;
-        }
-        const offsetHours = parseInt(hours) * (sign === '+' ? 1 : -1);
-        const offsetMinutes = minutes ? parseInt(minutes) * (sign === '+' ? 1 : -1) : 0;
-        const utcTime = now.getTime() + now.getTimezoneOffset() * 60000;
-        return new Date(utcTime + (offsetHours * 3600000 + offsetMinutes * 60000));
-    }
-    updateClockHandsRotation(now) {
-        const hours = now.getHours() % 12;
-        const minutes = now.getMinutes();
-        const seconds = now.getSeconds();
-        // For analog clocks:
-        // - 12 o'clock is 0°
-        // - 3 o'clock is 90°
-        // - 6 o'clock is 180°
-        // - 9 o'clock is 270°
-        // Hour hand: 30° per hour (360°/12) plus gradual movement from minutes
-        this.hourRotation = hours * 30 + minutes / 2 + 180;
-        // Minute hand: 6° per minute (360°/60)
-        this.minuteRotation = minutes * 6 + 180;
-        // Second hand: 6° per second (360°/60)
-        this.secondRotation = seconds * 6 + 180;
-    }
-    initializeWidget() {
-        this.updateTime();
-    }
-    updateWidget() {
-        this.stopClockTimer();
-        this.startClockTimer();
-        this.updateTime();
-    }
-    destroyWidget() {
-        this.stopClockTimer();
-    }
-    getDayOfWeek() {
-        const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-        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$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i2$9.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"] }]
-        }] });
-
-var clockCalendarWidget_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPClockCalendarWidgetViewComponent: AXPClockCalendarWidgetViewComponent
-});
-
-/**
- * ACoreX Clock Calendar Widget Types
- * Contains all types and interfaces for the Clock Calendar widget
- */
-/**
- * Common timezone options for the widget configuration
- */
-const AXP_TIMEZONE_OPTIONS = [
-    { id: 'local', title: 'Local Time' },
-    { id: 'UTC+0', title: 'UTC (GMT)' },
-    { id: 'UTC+1', title: 'Central European Time (UTC+1)' },
-    { id: 'UTC+2', title: 'Eastern European Time (UTC+2)' },
-    { id: 'UTC+3', title: 'Moscow Time (UTC+3)' },
-    { id: 'UTC+4', title: 'Gulf Time (UTC+4)' },
-    { id: 'UTC+5:30', title: 'Indian Time (UTC+5:30)' },
-    { id: 'UTC+8', title: 'China Time (UTC+8)' },
-    { id: 'UTC+9', title: 'Japan Time (UTC+9)' },
-    { id: 'UTC+10', title: 'Australian Eastern Time (UTC+10)' },
-    { id: 'UTC-5', title: 'Eastern Time (UTC-5)' },
-    { id: 'UTC-6', title: 'Central Time (UTC-6)' },
-    { id: 'UTC-7', title: 'Mountain Time (UTC-7)' },
-    { id: 'UTC-8', title: 'Pacific Time (UTC-8)' },
-];
-/**
- * Common date format options for the widget configuration
- */
-const AXP_DATE_FORMAT_OPTIONS = [
-    { id: 'dd MMM yyyy', title: '31 Dec 2023' },
-    { id: 'MMM dd, yyyy', title: 'Dec 31, 2023' },
-    { id: 'dd/MM/yyyy', title: '31/12/2023' },
-    { id: 'MM/dd/yyyy', title: '12/31/2023' },
-];
-
-const AXPClockCalendarWidget = {
-    name: 'clock-calendar',
-    title: 'Clock & Calendar',
-    categories: [AXP_WIDGETS_UTILITY_CATEGORY],
-    groups: [AXPWidgetGroupEnum.DashboardWidget],
-    type: 'dashboard',
-    icon: 'fa-light fa-clock',
-    properties: [
-        // ====== Display Settings ======
-        {
-            name: 'displayLayout',
-            title: 'Display Layout',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                dataType: 'string',
-                defaultValue: 'both',
-                interface: {
-                    name: 'displayLayout',
-                    path: 'options.displayLayout',
-                    type: AXPWidgetsCatalog.select,
-                    options: {
-                        dataSource: [
-                            { id: 'both', title: 'Digital & Analog' },
-                            { id: 'digital', title: 'Digital Only' },
-                            { id: 'analog', title: 'Analog Only' },
-                        ],
-                    },
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'showDate',
-            title: 'Show Date',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showDate',
-                    path: 'options.showDate',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'showDayOfWeek',
-            title: 'Show Day of Week',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showDayOfWeek',
-                    path: 'options.showDayOfWeek',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
-        // ====== Time Format Settings ======
-        {
-            name: 'use24Hour',
-            title: 'Use 24 Hour Format',
-            group: AXP_BEHAVIOR_PROPERTY_GROUP,
-            schema: {
-                defaultValue: false,
-                dataType: 'boolean',
-                interface: {
-                    name: 'use24Hour',
-                    path: 'options.use24Hour',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'showSeconds',
-            title: 'Show Seconds',
-            group: AXP_BEHAVIOR_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showSeconds',
-                    path: 'options.showSeconds',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
-        // {
-        //   name: 'showHourMarkers',
-        //   title: 'Show Hour Markers',
-        //   group: AXP_APPEARANCE_PROPERTY_GROUP,
-        //   schema: {
-        //     defaultValue: true,
-        //     dataType: 'boolean',
-        //     interface: {
-        //       name: 'showHourMarkers',
-        //       path: 'options.showHourMarkers',
-        //       type: AXPWidgetsCatalog.toggle,
-        //     },
-        //   },
-        //   visible: true,
-        // },
-        {
-            name: 'dateFormat',
-            title: 'Date Format',
-            group: AXP_BEHAVIOR_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 'dd MMM yyyy',
-                dataType: 'string',
-                interface: {
-                    name: 'dateFormat',
-                    path: 'options.dateFormat',
-                    type: AXPWidgetsCatalog.select,
-                    options: {
-                        dataSource: AXP_DATE_FORMAT_OPTIONS,
-                    },
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'timezone',
-            title: 'Timezone',
-            group: AXP_BEHAVIOR_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 'local',
-                dataType: 'string',
-                interface: {
-                    name: 'timezone',
-                    path: 'options.timezone',
-                    type: AXPWidgetsCatalog.select,
-                    options: {
-                        dataSource: AXP_TIMEZONE_OPTIONS,
-                    },
-                },
-            },
-            visible: true,
-        },
-    ],
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return clockCalendarWidget_component; }).then((m) => m.AXPClockCalendarWidgetViewComponent),
-        },
-    },
-    meta: {
-        dimensions: {
-            width: 2,
-            height: 5,
-            minWidth: 2,
-            minHeight: 2,
-            maxWidth: 3,
-            maxHeight: 6,
-        },
-    },
-};
-
-/**
- * Donut Chart Widget Component
- * Displays data in a circular donut chart with interactive segments
- */
-class AXPDonutChartWidgetViewComponent extends AXPChartBaseComponent {
-    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);
-    }
-    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');
-    }
-    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 }); }
-}
-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"] }]
-        }] });
-
-var donutChartWidget_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPDonutChartWidgetViewComponent: AXPDonutChartWidgetViewComponent
-});
-
-const AXPDonutChartWidget = {
-    name: 'donut-chart',
-    title: 'Donut Chart Widget',
-    categories: AXP_WIDGETS_CHART_CATEGORY,
-    groups: [AXPWidgetGroupEnum.DashboardWidget],
-    type: 'dashboard',
-    icon: 'fa-light fa-donut',
-    properties: [
-        // ====== Size & Layout ======
-        {
-            name: 'height',
-            title: 'Height',
-            group: AXP_STYLING_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 300,
-                dataType: 'number',
-                interface: {
-                    name: 'height',
-                    path: 'options.height',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        minValue: 200,
-                        maxValue: 800,
-                    },
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'width',
-            title: 'Width',
-            group: AXP_STYLING_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 300,
-                dataType: 'number',
-                interface: {
-                    name: 'width',
-                    path: 'options.width',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        minValue: 200,
-                        maxValue: 1200,
-                    },
-                },
-            },
-            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',
-            title: 'Show Tooltip',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showTooltip',
-                    path: 'options.showTooltip',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
-        // ====== Donut Appearance ======
-        {
-            name: 'donutWidth',
-            title: 'Donut Width',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 35,
-                dataType: 'number',
-                interface: {
-                    name: 'donutWidth',
-                    path: 'options.donutWidth',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '10-80',
-                        minValue: 10,
-                        maxValue: 80,
-                    },
-                },
-            },
-            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,
-        },
-    ],
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return donutChartWidget_component; }).then((c) => c.AXPDonutChartWidgetViewComponent),
-        },
-    },
-    meta: {
-        dimensions: {
-            width: 4,
-            height: 4,
-            minWidth: 2,
-            minHeight: 2,
-            maxWidth: 5,
-            maxHeight: 6,
-        },
-    },
-};
-
-class AXPGaugeChartWidgetViewComponent extends AXPChartBaseComponent {
-    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);
-    }
-    createChart() {
-        // Clear any existing chart
-        this.d3.select(this.chartEl().nativeElement).selectAll('*').remove();
-        // Calculate responsive dimensions
-        const containerWidth = this.width() || this.chartContainerEl().nativeElement.clientWidth;
-        const containerHeight = this.height() || this.chartContainerEl().nativeElement.clientHeight;
-        const size = Math.min(containerWidth, containerHeight * 2);
-        const margin = size * 0.1;
-        // Set up SVG dimensions with viewBox for responsiveness
-        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();
-        }
-    }
-    /**
-     * Create 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);
-            });
-        }
-    }
-    /**
-     * Draw 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))');
-    }
-    /**
-     * Draw the threshold arcs and labels.
-     */
-    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);
-        }
-    }
-    /**
-     * Draw 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));
-        }
-    }
-    /**
-     * Draw the value display in the center
-     */
-    drawValueDisplay(chartGroup, value, label, radius) {
-        // Value text - positioned below the needle pivot
-        chartGroup
-            .append('text')
-            .attr('class', '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', '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);
-    }
-    /**
-     * Draw 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))})`;
-        });
-    }
-    /**
-     * Create 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`;
-    }
-    /**
-     * Draw the chart label.
-     */
-    drawLabel(chartGroup, label) {
-        chartGroup
-            .append('text')
-            .attr('text-anchor', 'middle')
-            .attr('dy', '0.35em')
-            .text(label || '')
-            .style('font-size', '16px')
-            .style('fill', '#000');
-    }
-    /**
-     * Scale a value to an angle for the gauge chart.
-     */
-    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;
-    }
-    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;
-    }
-    /**
-     * Convert radians to degrees.
-     */
-    radiansToDegrees(radians) {
-        return radians * (180 / Math.PI);
-    }
-    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%}\n"], 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%}\n"] }]
-        }] });
-
-var gaugeChartWidget_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPGaugeChartWidgetViewComponent: AXPGaugeChartWidgetViewComponent
-});
-
-const AXPGaugeChartWidget = {
-    name: 'gauge-chart',
-    title: 'Gauge Chart Widget',
-    categories: [AXP_WIDGETS_CHART_CATEGORY],
-    type: 'dashboard',
-    icon: 'fa-light fa-gauge',
-    properties: [
-        // ====== Layout & Dimensions ======
-        {
-            name: 'height',
-            title: 'Height',
-            group: AXP_STYLING_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 300,
-                dataType: 'number',
-                interface: {
-                    name: 'height',
-                    path: 'options.height',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '1-800',
-                        minValue: 1,
-                        maxValue: 800,
-                    },
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'width',
-            title: 'Width',
-            group: AXP_STYLING_PROPERTY_GROUP,
-            schema: {
-                defaultValue: null,
-                dataType: 'number',
-                interface: {
-                    name: 'width',
-                    path: 'options.width',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '1-1200',
-                        minValue: 1,
-                        maxValue: 1200,
-                    },
-                },
-            },
-            visible: true,
-        },
-        // ====== Gauge Configuration ======
-        {
-            name: 'minValue',
-            title: 'Minimum Value',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 0,
-                dataType: 'number',
-                interface: {
-                    name: 'minValue',
-                    path: 'options.minValue',
-                    type: AXPWidgetsCatalog.number,
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'maxValue',
-            title: 'Maximum Value',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 100,
-                dataType: 'number',
-                interface: {
-                    name: 'maxValue',
-                    path: 'options.maxValue',
-                    type: AXPWidgetsCatalog.number,
-                },
-            },
-            visible: true,
-        },
-        // ====== Gauge Appearance ======
-        {
-            name: 'gaugeWidth',
-            title: 'Gauge Width',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 30,
-                dataType: 'number',
-                interface: {
-                    name: 'gaugeWidth',
-                    path: 'options.gaugeWidth',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '1-100',
-                        minValue: 1,
-                        maxValue: 100,
-                    },
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'cornerRadius',
-            title: 'Corner Radius',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 4,
-                dataType: 'number',
-                interface: {
-                    name: 'cornerRadius',
-                    path: 'options.cornerRadius',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        placeholder: '1-20',
-                        minValue: 0,
-                        maxValue: 20,
-                    },
-                },
-            },
-            visible: true,
-        },
-        // ====== Label Display ======
-        {
-            name: 'label',
-            title: 'Label Text',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: '',
-                dataType: 'string',
-                interface: {
-                    name: 'label',
-                    path: 'options.label',
-                    type: AXPWidgetsCatalog.text,
-                },
-            },
-            visible: true,
-        },
-    ],
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return gaugeChartWidget_component; }).then((c) => c.AXPGaugeChartWidgetViewComponent),
-        },
-    },
-    meta: {
-        dimensions: {
-            width: 3,
-            height: 4,
-            minWidth: 2,
-            minHeight: 2,
-            maxWidth: 4,
-            maxHeight: 5,
-        },
-    },
-};
-
-/**
- * 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$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i4$1.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i4$1.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.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: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i5$4.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$7.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5$1.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,
-            schema: {
-                defaultValue: 10,
-                dataType: 'number',
-                interface: {
-                    name: 'maxItems',
-                    path: 'options.maxItems',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        minValue: 1,
-                        maxValue: 100,
-                    },
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'showAvatar',
-            title: 'Show Avatar',
-            description: 'Whether to show avatars in notifications',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showAvatar',
-                    path: 'options.showAvatar',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'showDate',
-            title: 'Show Date',
-            description: 'Whether to show date in notifications',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showDate',
-                    path: 'options.showDate',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
-    ],
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return notificationWidget_component; }).then((c) => c.AXPNotificationWidgetViewComponent),
-        },
-    },
-    meta: {
-        dimensions: {
-            width: 3,
-            height: 5,
-            minWidth: 2,
-            minHeight: 4,
-            maxWidth: 4,
-            maxHeight: 7,
-        },
-    },
-};
-
-class AXPStickyNoteWidgetViewComponent extends AXPValueWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.isEditing = signal(false);
-        this.wysiwyg = viewChild('wysiwyg');
-        this.value = computed(() => this.getValue());
-        this.date = computed(() => this.options()?.date ?? new Date());
-        this.bgColor = computed(() => this.options()?.backgroundColor ?? '#FFF8B8');
-        this.color = signal('#333333');
-        this.el = inject(ElementRef);
-        // Modern color palette with pastel and vibrant options
-        this.colorPresets = [
-            '#FFF8B8', // Soft yellow
-            '#FFD8E6', // Soft pink
-            '#D1F0FF', // Soft blue
-            '#E2FFD1', // Soft green
-            '#FFE8D1', // Soft orange
-            '#F0D1FF', // Soft purple
-            '#FFCDD2', // Soft red
-            '#D1FFF0', // Soft teal
-            '#F5F5F5', // Light gray
-            '#FFFFFF', // White
-        ];
-    }
-    // Handle clicks outside the component to cancel editing
-    handleClickOutside(event) {
-        const clickedInside = this.el.nativeElement.contains(event.target);
-        if (!clickedInside && this.isEditing()) {
-            this.saveChanges();
-        }
-    }
-    // Handle double-click to activate editing
-    activateEdit() {
-        //TODO FOCUS WYSIWYG
-        this.wysiwyg()?.focus();
-        this.isEditing.set(true);
-    }
-    // Save changes and exit edit mode
-    saveChanges() {
-        this.isEditing.set(false);
-    }
-    setColor(color) {
-        this.setOptions({ backgroundColor: color });
-    }
-    valueChange(event) {
-        if (event.isUserInteraction) {
-            this.setValue(event.value);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPStickyNoteWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPStickyNoteWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { listeners: { "document:click": "handleClickOutside($event)" } }, providers: [
-            {
-                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]=\"\n        isEditing()\n          ? 'ax-pointer-events-auto ax-cursor-text ax-ring-2 ax-ring-black/5 ax-rounded-md'\n          : 'ax-pointer-events-none !ax-cursor-pointer'\n      \"\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 .sticky-note-container{transition:all .2s ease-in-out}:host :host ::ng-deep ax-wysiwyg-view{color:inherit!important}:host :host ::ng-deep ax-wysiwyg-view .ql-editor{padding:0!important;font-size:.95rem;line-height:1.5;color:#2e2e2e}:host :host ::ng-deep ax-wysiwyg-view .ql-editor:before{color:inherit!important;opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i2$3.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i2$3.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$9.AXFormatPipe, name: "format" }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.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,
-            args: [{ standalone: true, imports: [
-                        AXWysiwygModule,
-                        AXDecoratorModule,
-                        AXToolBarModule,
-                        FormsModule,
-                        AXDateTimeModule,
-                        AXFormatModule,
-                        AXPopoverModule,
-                        CommonModule,
-                        FormsModule,
-                        AXColorBoxModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: AXGridLayoutWidgetComponent,
-                            useExisting: AXPStickyNoteWidgetViewComponent,
-                        },
-                    ], template: "<div\n  class=\"sticky-note-container ax-size-full ax-rounded-lg ax-flex ax-flex-col ax-p-4 ax-shadow-md ax-transition-all ax-duration-300 hover:ax-shadow-lg\"\n  [style.background-color]=\"bgColor()\"\n  [style.color]=\"color()\"\n  [class.ax-shadow-lg]=\"isEditing()\"\n  [class.ax-scale-[1.02]]=\"isEditing()\"\n  (dblclick)=\"activateEdit()\"\n>\n  <!-- Header with timestamp -->\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3\">\n    <div class=\"ax-text-xs ax-opacity-70 ax-font-medium ax-flex ax-items-center ax-gap-1\">\n      <i class=\"fa-regular fa-clock ax-text-[0.65rem]\"></i>\n      {{ date() | format : 'datetime' : '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]=\"\n        isEditing()\n          ? 'ax-pointer-events-auto ax-cursor-text ax-ring-2 ax-ring-black/5 ax-rounded-md'\n          : 'ax-pointer-events-none !ax-cursor-pointer'\n      \"\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 .sticky-note-container{transition:all .2s ease-in-out}:host :host ::ng-deep ax-wysiwyg-view{color:inherit!important}:host :host ::ng-deep ax-wysiwyg-view .ql-editor{padding:0!important;font-size:.95rem;line-height:1.5;color:#2e2e2e}:host :host ::ng-deep ax-wysiwyg-view .ql-editor:before{color:inherit!important;opacity:.7}\n"] }]
-        }], propDecorators: { handleClickOutside: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
-
-var stickyNoteWidget_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPStickyNoteWidgetViewComponent: AXPStickyNoteWidgetViewComponent
-});
-
-const AXPStickyNoteWidget = {
-    name: 'sticky-note',
-    title: 'Sticky Note Widget',
-    categories: AXP_WIDGETS_UTILITY_CATEGORY,
-    groups: [AXPWidgetGroupEnum.DashboardWidget],
-    type: 'dashboard',
-    icon: 'fa-light fa-sticky-note',
-    properties: [AXP_DATA_PATH_PROPERTY, AXP_BG_COLOR_PROPERTY, plainTextDefaultProperty()],
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return stickyNoteWidget_component; }).then((c) => c.AXPStickyNoteWidgetViewComponent),
-        },
-    },
-    meta: {
-        dimensions: {
-            width: 2,
-            height: 3,
-            minWidth: 2,
-            minHeight: 2,
-            maxWidth: 4,
-            maxHeight: 4,
-        },
-    },
-};
-
-/**
- * Task List Widget Component
- * Displays a list of tasks with checkboxes and filtering options
- */
-class AXPTaskListWidgetViewComponent extends AXPValueWidgetComponent {
-    constructor() {
-        super(...arguments);
-        // Outputs
-        this.taskClick = output();
-        this.taskCompleted = output();
-        // Dependencies
-        this.cdr = inject(ChangeDetectorRef);
-        this.datePipe = inject(DatePipe);
-        // Configuration options
-        this.maxItems = computed(() => this.options()?.maxItems ?? 10);
-        this.showDate = computed(() => this.options()?.showDate ?? true);
-        this.showAssignee = computed(() => this.options()?.showAssignee ?? true);
-        this.showPriority = computed(() => this.options()?.showPriority ?? true);
-        this.allowMarkComplete = computed(() => this.options()?.allowMarkComplete ?? true);
-        this.showCategories = computed(() => this.options()?.groupByCategory ?? true);
-        // Data computed properties
-        this.taskItems = computed(() => {
-            const value = this.getValue();
-            if (!value?.data?.length)
-                return [];
-            return value.data.slice(0, this.maxItems());
-        });
-    }
-    // Task counting methods
-    getPendingTaskCount() {
-        return this.getFilteredTasks((task) => !task.completed).length;
-    }
-    getCompletedTaskCount() {
-        return this.getFilteredTasks((task) => task.completed).length;
-    }
-    // Category-related methods
-    hasCategories() {
-        return this.taskItems().some((task) => !!task.category);
-    }
-    getCategories() {
-        const tasks = this.taskItems();
-        const categories = new Set();
-        let hasUncategorized = false;
-        tasks.forEach((task) => {
-            if (task.category) {
-                categories.add(task.category);
-            }
-            else {
-                hasUncategorized = true;
-            }
-        });
-        const result = Array.from(categories);
-        if (hasUncategorized) {
-            result.push('Uncategorized');
-        }
-        return result;
-    }
-    getTasksByCategory(category) {
-        const tasks = this.taskItems();
-        if (category === 'Uncategorized') {
-            return tasks.filter((task) => !task.category);
-        }
-        return tasks.filter((task) => task.category === category);
-    }
-    getCategoryTaskCount(category) {
-        return this.getTasksByCategory(category).filter((task) => !task.completed).length;
-    }
-    // Event handlers
-    onTaskClick(task) {
-        this.taskClick.emit(task);
-    }
-    onTaskCompletionChange(task, isCompleted) {
-        const updatedTask = { ...task, completed: isCompleted };
-        const value = this.getValue();
-        if (!value?.data)
-            return;
-        const updatedTasks = value.data.map((t) => (t.id === task.id ? updatedTask : t));
-        this.setValue({ ...value, data: updatedTasks });
-        this.taskCompleted.emit(updatedTask);
-        this.cdr.detectChanges();
-    }
-    // Formatting and utility methods
-    formatDueDate(date) {
-        if (!date)
-            return '';
-        const dateObj = typeof date === 'string' ? new Date(date) : date;
-        const diffDays = this.getDaysDifference(dateObj);
-        if (diffDays < 0)
-            return 'Overdue!';
-        if (diffDays === 0)
-            return 'Today';
-        if (diffDays === 1)
-            return 'Tomorrow';
-        if (diffDays < 7)
-            return this.datePipe.transform(dateObj, 'EEE') || '';
-        return this.datePipe.transform(dateObj, 'MM/dd/yyyy') || '';
-    }
-    getPriorityColor(priority) {
-        if (!priority)
-            return '';
-        const priorityColors = {
-            high: 'danger',
-            medium: 'warning',
-            low: 'success',
-        };
-        return priorityColors[priority] || '';
-    }
-    // Helper methods
-    getFilteredTasks(filterFn) {
-        const value = this.getValue();
-        if (!value?.data?.length)
-            return [];
-        return value.data.filter(filterFn);
-    }
-    getDaysDifference(date) {
-        const now = new Date();
-        now.setHours(0, 0, 0, 0);
-        const targetDate = new Date(date);
-        targetDate.setHours(0, 0, 0, 0);
-        const diffMs = targetDate.getTime() - now.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: 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$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1.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$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTaskListWidgetViewComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, imports: [
-                        CommonModule,
-                        AXTabsModule,
-                        AXDecoratorModule,
-                        AXButtonModule,
-                        AXBadgeModule,
-                        AXAvatarModule,
-                        AXImageModule,
-                        AXCheckBoxModule,
-                        AXLabelModule,
-                        AXTranslationModule,
-                    ], providers: [DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-size-full ax-p-4\">\n  <!-- Header -->\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3\">\n    <h3 class=\"ax-text-lg ax-font-semibold\">{{ 'widget.tasklist.title' | translate | async }}</h3>\n    <div class=\"ax-flex ax-gap-2\">\n      @if(getPendingTaskCount() > 0){\n      <ax-badge\n        [text]=\"getPendingTaskCount() + ' ' + ('widget.tasklist.pending' | translate | async)\"\n        [color]=\"'warning'\"\n        size=\"sm\"\n        class=\"ax-ml-1\"\n      >\n      </ax-badge>\n      } @if(getCompletedTaskCount() > 0){\n      <ax-badge\n        [text]=\"getCompletedTaskCount() + ' ' + ('widget.tasklist.completed' | translate | async)\"\n        [color]=\"'success'\"\n        size=\"sm\"\n        class=\"ax-ml-1\"\n      >\n      </ax-badge>\n      }\n    </div>\n  </div>\n\n  <!-- Task List -->\n  <div class=\"ax-space-y-4 ax-my-4 ax-px-2\">\n    @if (showCategories() && hasCategories()) {\n    <!-- Categorized Tasks -->\n    @for (category of getCategories(); track category) {\n    <div class=\"ax-mb-3\">\n      <!-- Category Header -->\n      <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-2 ax-h-5\">\n        <h4 class=\"ax-font-medium ax-text-gray-700\">{{ category }}</h4>\n        @if(getCategoryTaskCount(category)){\n        <ax-badge [text]=\"getCategoryTaskCount(category).toString()\" [color]=\"'primary'\" size=\"sm\"></ax-badge>\n        }\n      </div>\n      <!-- Tasks in Category -->\n      @for (task of getTasksByCategory(category); track task.id) {\n      <ng-container\n        [ngTemplateOutlet]=\"taskItemTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: task }\"\n      ></ng-container>\n      }\n    </div>\n    } } @else {\n    <!-- Uncategorized Tasks -->\n    @for (task of taskItems(); track task.id) {\n    <ng-container\n      [ngTemplateOutlet]=\"taskItemTemplateRef\"\n      [ngTemplateOutletContext]=\"{ $implicit: task }\"\n    ></ng-container>\n    } @empty {\n    <!-- Empty State -->\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-12 ax-px-4 ax-text-gray-400\">\n      <ax-icon class=\"ax-text-4xl ax-mb-3 ax-text-gray-300\">\n        <i class=\"fa-light fa-clipboard-list-check\"></i>\n      </ax-icon>\n      <p class=\"ax-text-center\">{{ 'widget.tasklist.noTasks' | translate | async }}</p>\n    </div>\n    } }\n  </div>\n</div>\n\n<!-- Task Item Template -->\n<ng-template #taskItemTemplateRef let-task>\n  <div class=\"ax-flex ax-gap-3 ax-items-center ax-py-2 ax-border-b ax-border-gray-100 last:ax-border-0\">\n    <!-- Checkbox -->\n    <ax-check-box\n      class=\"ax-flex-shrink-0\"\n      [value]=\"task.completed\"\n      [disabled]=\"!allowMarkComplete()\"\n      (valueChange)=\"onTaskCompletionChange(task, $event)\"\n    >\n    </ax-check-box>\n\n    <!-- Task Details -->\n    <div class=\"ax-overflow-hidden ax-grow ax-text-start\" (click)=\"onTaskClick(task)\">\n      <!-- Title and Priority -->\n      <div class=\"ax-flex ax-items-center ax-gap-2\">\n        <h6\n          class=\"ax-font-semibold ax-truncate ax-pb-1\"\n          [class.ax-line-through]=\"task.completed\"\n          [class.ax-text-gray-400]=\"task.completed\"\n        >\n          {{ task.title }}\n        </h6>\n        @if(showPriority() && task.priority) {\n        <ax-badge [color]=\"getPriorityColor(task.priority)\" [text]=\"task.priority\" size=\"sm\" class=\"ax-ml-1\"></ax-badge>\n        }\n      </div>\n\n      <!-- Metadata -->\n      <div class=\"ax-flex ax-flex-wrap ax-gap-x-3 ax-gap-y-1 ax-mt-1 ax-text-xs ax-text-gray-500\">\n        @if(showDate() && task.dueDate) {\n        <span class=\"ax-flex ax-items-center ax-gap-1\" [class.ax-text-danger-500]=\"getDaysDifference(task.dueDate) < 0\">\n          <ax-icon><i class=\"fa-light fa-calendar\"></i></ax-icon>\n          {{ formatDueDate(task.dueDate) }}\n        </span>\n        } @if(showAssignee() && task.assignedTo) {\n        <span class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-icon><i class=\"fa-light fa-user\"></i></ax-icon>\n          {{ task.assignedTo.name }}\n        </span>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;height:100%;width:100%}.task-completed{text-decoration:line-through;color:var(--ax-text-secondary)}\n"] }]
-        }] });
-
-var tasklistWidget_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPTaskListWidgetViewComponent: AXPTaskListWidgetViewComponent
-});
-
-const AXPTaskListWidget = {
-    name: 'task-list',
-    title: 'Task List Widget',
-    categories: [AXP_WIDGETS_CHART_CATEGORY],
-    groups: [AXPWidgetGroupEnum.DashboardWidget],
-    type: 'dashboard',
-    icon: 'fa-light fa-clipboard-list-check',
-    properties: [
-        cloneProperty(AXP_DATA_PATH_PROPERTY, { visible: false }),
-        // Display options
-        {
-            name: 'maxItems',
-            title: 'Max Items',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 10,
-                dataType: 'number',
-                interface: {
-                    name: 'maxItems',
-                    path: 'options.maxItems',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        minValue: 1,
-                        maxValue: 50,
-                    },
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'showDate',
-            title: 'Show Date',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showDate',
-                    path: 'options.showDate',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'showAssignee',
-            title: 'Show Assignee',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showAssignee',
-                    path: 'options.showAssignee',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'groupByCategory',
-            title: 'Group by Category',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'groupByCategory',
-                    path: 'options.groupByCategory',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'showPriority',
-            title: 'Show Priority',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showPriority',
-                    path: 'options.showPriority',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'allowMarkComplete',
-            title: 'Allow Complete',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'allowMarkComplete',
-                    path: 'options.allowMarkComplete',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
-    ],
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return tasklistWidget_component; }).then((c) => c.AXPTaskListWidgetViewComponent),
-        },
-    },
-    meta: {
-        dimensions: {
-            width: 5,
-            height: 7,
-            minWidth: 3,
-            minHeight: 4,
-            maxWidth: 6,
-            maxHeight: 8,
-        },
-    },
-};
-
-/**
- * Abstract Weather API Service
- * Base class that defines the interface and common functionality
- * for weather data providers
- */
-class AXPWeatherApiAbstract {
-    constructor() {
-        /** Weather condition definitions mapping */
-        this.weatherConditions = {
-            sunny: {
-                id: 'sunny',
-                name: 'Sunny',
-                icon: 'fa-solid fa-sun',
-                color: '#ff9d00',
-            },
-            clearNight: {
-                id: 'clearNight',
-                name: 'Clear Night',
-                icon: 'fa-solid fa-moon',
-                color: '#5d639e',
-            },
-            partlyCloudy: {
-                id: 'partlyCloudy',
-                name: 'Partly Cloudy',
-                icon: 'fa-solid fa-cloud-sun',
-                color: '#6ba4e8',
-            },
-            partlyCloudyNight: {
-                id: 'partlyCloudyNight',
-                name: 'Partly Cloudy Night',
-                icon: 'fa-solid fa-cloud-moon',
-                color: '#5d639e',
-            },
-            cloudy: {
-                id: 'cloudy',
-                name: 'Cloudy',
-                icon: 'fa-solid fa-cloud',
-                color: '#72869d',
-            },
-            rain: {
-                id: 'rain',
-                name: 'Rain',
-                icon: 'fa-solid fa-cloud-rain',
-                color: '#3a74ad',
-            },
-            showers: {
-                id: 'showers',
-                name: 'Showers',
-                icon: 'fa-solid fa-cloud-showers-heavy',
-                color: '#2c5d8c',
-            },
-            thunderstorm: {
-                id: 'thunderstorm',
-                name: 'Thunderstorm',
-                icon: 'fa-solid fa-bolt-lightning',
-                color: '#8834af',
-            },
-            snow: {
-                id: 'snow',
-                name: 'Snow',
-                icon: 'fa-solid fa-snowflake',
-                color: '#68a9cd',
-            },
-            mist: {
-                id: 'mist',
-                name: 'Mist',
-                icon: 'fa-solid fa-smog',
-                color: '#94a3b8',
-            },
-        };
-        /** Day of week mapping */
-        this.dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-    }
-    /**
-     * Get weather condition info by ID
-     * @param id Condition ID
-     * @returns Weather condition info or default if not found
-     */
-    getCondition(id) {
-        // Normalize condition ID by removing spaces and converting to lowercase
-        const normalizedId = id.toLowerCase().replace(/\s+/g, '');
-        // Direct match first
-        if (this.weatherConditions[normalizedId]) {
-            return this.weatherConditions[normalizedId];
-        }
-        // Check for partial matches or common variants
-        if (normalizedId.includes('partly') && normalizedId.includes('cloud')) {
-            return this.weatherConditions['partlyCloudy'];
-        }
-        if (normalizedId.includes('cloud')) {
-            return this.weatherConditions['cloudy'];
-        }
-        if (normalizedId.includes('sun')) {
-            return this.weatherConditions['sunny'];
-        }
-        if (normalizedId.includes('rain')) {
-            return this.weatherConditions['rain'];
-        }
-        if (normalizedId.includes('snow')) {
-            return this.weatherConditions['snow'];
-        }
-        // If no match found, return default unknown condition
-        return {
-            id: 'unknown',
-            name: 'Unknown',
-            icon: 'fa-solid fa-question',
-            color: '#999999',
-        };
-    }
-    /**
-     * Parse location string into city and display components
-     * @param location Location query string
-     * @returns Parsed location parts
-     */
-    parseLocation(location) {
-        if (!location || location.trim() === '') {
-            return { city: 'New York', country: 'USA', display: 'New York' };
-        }
-        const city = location.trim();
-        return { city, country: '', display: city };
-    }
-    /**
-     * Format location name for display
-     * @param locationParts Parsed location parts
-     * @returns Formatted location name
-     */
-    formatLocationName(locationParts) {
-        return locationParts.city || 'Unknown Location';
-    }
-    /**
-     * Map API condition text to our internal condition IDs
-     * @param conditionText Condition text from API
-     * @returns Internal condition ID
-     */
-    mapApiConditionToId(conditionText) {
-        const text = conditionText.toLowerCase();
-        // Match WeatherAPI.com condition text
-        // Reference: https://www.weatherapi.com/docs/#weather-icons
-        if (text.includes('sunny') || text.includes('clear')) {
-            return 'sunny';
-        }
-        if (text === 'partly cloudy') {
-            return 'partlyCloudy';
-        }
-        if (text.includes('cloudy') || text.includes('overcast')) {
-            return 'cloudy';
-        }
-        if (text.includes('rain') || text.includes('drizzle') || text.includes('shower')) {
-            return 'rain';
-        }
-        if (text.includes('thunder') || text.includes('lightning')) {
-            return 'thunderstorm';
-        }
-        if (text.includes('snow') || text.includes('sleet') || text.includes('blizzard')) {
-            return 'snow';
-        }
-        if (text.includes('mist') || text.includes('fog')) {
-            return 'mist';
-        }
-        // Default to partly cloudy if we don't have a specific mapping
-        return 'partlyCloudy';
-    }
-    /**
-     * Generate random integer between min and max (inclusive)
-     * Helper method for implementations
-     * @param min Minimum value
-     * @param max Maximum value
-     * @returns Random integer
-     */
-    getRandomInt(min, max) {
-        return Math.floor(Math.random() * (max - min + 1)) + min;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWeatherApiAbstract, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWeatherApiAbstract }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWeatherApiAbstract, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * Mock Weather API Service
- * Provides simulated weather data for development and testing
- */
-class AXPWeatherApiMockService extends AXPWeatherApiAbstract {
-    constructor() {
-        super(...arguments);
-        // Mock configuration
-        this.mockDelay = 500;
-    }
-    /**
-     * Get current weather data for given location
-     * @param options Weather request options
-     * @returns Observable with weather data
-     */
-    getWeather(options) {
-        const locationParts = this.parseLocation(options.location || '');
-        const displayName = this.formatLocationName(locationParts);
-        return this.getMockWeatherData(locationParts.city, options).pipe(map((mockData) => ({
-            ...mockData,
-            location: {
-                city: locationParts.city,
-                country: '',
-                displayName: displayName,
-            },
-        })));
-    }
-    /**
-     * Get weather forecast for a location
-     * @param options Weather request options with days
-     * @returns Observable of weather data with forecast
-     */
-    getForecast(options) {
-        const days = options.days || 5;
-        return this.getMockForecast(options.location || '', days, options);
-    }
-    /**
-     * Get mock weather data for demo/development
-     * @param location Location query
-     * @param options Request options
-     * @returns Observable of mock weather data
-     */
-    getMockWeatherData(location, options) {
-        return new Observable((observer) => {
-            setTimeout(() => {
-                try {
-                    const locationParts = this.parseLocation(location);
-                    const tempUnit = options?.tempUnit || '°C';
-                    const isCelsius = tempUnit === '°C';
-                    // Generate more realistic weather data based on location and current date
-                    const now = new Date();
-                    const month = now.getMonth(); // 0-11
-                    // Seasonally appropriate temperature range
-                    let minRange = 15;
-                    let maxRange = 25;
-                    // Northern hemisphere seasonal adjustments
-                    if (month >= 11 || month <= 1) {
-                        // Winter
-                        minRange = -5;
-                        maxRange = 10;
-                    }
-                    else if (month >= 2 && month <= 4) {
-                        // Spring
-                        minRange = 10;
-                        maxRange = 20;
-                    }
-                    else if (month >= 5 && month <= 7) {
-                        // Summer
-                        minRange = 20;
-                        maxRange = 35;
-                    }
-                    else if (month >= 8 && month <= 10) {
-                        // Fall/Autumn
-                        minRange = 10;
-                        maxRange = 25;
-                    }
-                    // Generate current temperature - more likely to be in the middle of the range
-                    const tempC = Math.round(minRange + (this.getRandomInt(4, 8) / 10) * (maxRange - minRange));
-                    const tempF = Math.round((tempC * 9) / 5 + 32);
-                    const humidity = this.getRandomInt(30, 90);
-                    const windKph = this.getRandomInt(5, 30);
-                    const windMph = Math.round(windKph * 0.621371);
-                    // Temperature-based conditions with randomization
-                    let conditionId = 'partlyCloudy';
-                    if (tempC > 25)
-                        conditionId = 'sunny';
-                    else if (tempC < 10)
-                        conditionId = 'cloudy';
-                    if (this.getRandomInt(1, 10) > 7)
-                        conditionId = 'rain';
-                    observer.next({
-                        location: {
-                            city: locationParts.city,
-                            country: '',
-                            displayName: this.formatLocationName(locationParts),
-                        },
-                        current: {
-                            condition: conditionId,
-                            conditionCode: 0,
-                            iconUrl: '', // Would be set from API
-                            tempC: tempC,
-                            tempF: tempF,
-                            feelsLikeC: tempC + this.getRandomInt(-3, 2),
-                            feelsLikeF: tempF + this.getRandomInt(-5, 3),
-                            humidity: humidity,
-                            windKph: windKph,
-                            windMph: windMph,
-                            windDirection: ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'][this.getRandomInt(0, 7)],
-                            uv: this.getRandomInt(0, 10),
-                            lastUpdated: new Date().toISOString(),
-                        },
-                        forecast: [],
-                    });
-                    observer.complete();
-                }
-                catch (error) {
-                    observer.error(error);
-                }
-            }, this.mockDelay);
-        }).pipe(catchError((error) => throwError(() => new Error(`Failed to get weather data: ${error.message}`))));
-    }
-    /**
-     * Get mock forecast data for demo/development
-     * @param location Location query
-     * @param days Number of forecast days
-     * @param options Request options
-     * @returns Observable of mock weather data with forecast
-     */
-    getMockForecast(location, days = 5, options) {
-        return this.getMockWeatherData(location, options).pipe(map((data) => {
-            const currentCondition = data.current.condition;
-            const currentTemp = data.current.tempC;
-            // Use the current weather as a base for the forecast trend
-            const forecast = Array.from({ length: days }, (_, i) => {
-                // Create forecast date for each day (starting from tomorrow)
-                const forecastDate = new Date();
-                forecastDate.setDate(new Date().getDate() + i + 1);
-                const dateStr = forecastDate.toISOString().split('T')[0];
-                const dayName = this.dayNames[forecastDate.getDay()];
-                // Generate condition with some continuity from current weather
-                // Weather tends to be similar for a few days with gradual changes
-                let conditionId;
-                if (i === 0) {
-                    // Tomorrow's weather has 60% chance of being similar to today
-                    conditionId =
-                        this.getRandomInt(1, 10) <= 6
-                            ? currentCondition
-                            : ['sunny', 'partlyCloudy', 'cloudy', 'rain', 'snow'][this.getRandomInt(0, 4)];
-                }
-                else {
-                    // Subsequent days have 70% chance of being similar to previous day
-                    const previousCondition = forecast[i - 1]?.condition || currentCondition;
-                    conditionId =
-                        this.getRandomInt(1, 10) <= 7
-                            ? previousCondition
-                            : ['sunny', 'partlyCloudy', 'cloudy', 'rain', 'snow'][this.getRandomInt(0, 4)];
-                }
-                // Generate temperatures with realistic variance
-                // Max is typically higher than current temperature
-                // Min is typically lower than current temperature
-                const tempVariance = this.getRandomInt(-3, 3); // Small day-to-day change
-                const baseMaxC = currentTemp + this.getRandomInt(0, 5); // Max is higher than current
-                const maxTempC = baseMaxC + tempVariance;
-                const minTempC = maxTempC - this.getRandomInt(5, 10); // Min is lower than max
-                const maxTempF = Math.round((maxTempC * 9) / 5 + 32);
-                const minTempF = Math.round((minTempC * 9) / 5 + 32);
-                return {
-                    date: dateStr,
-                    day: dayName,
-                    condition: conditionId,
-                    iconUrl: '', // Would be set from API
-                    maxTempC,
-                    maxTempF,
-                    minTempC,
-                    minTempF,
-                };
-            });
-            return { ...data, forecast };
-        }));
-    }
-    /**
-     * Set the API key for the weather service
-     * No-op in the mock implementation
-     * @param key The API key
-     */
-    setApiKey(key) {
-        // No-op for mock service
-        console.log('API key setting is ignored in mock weather service');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWeatherApiMockService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWeatherApiMockService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWeatherApiMockService, decorators: [{
-            type: Injectable
-        }] });
-
-const AXP_WEATHER_API_KEY = new InjectionToken('AXP_WEATHER_API_KEY', {
-    providedIn: 'root',
-    factory: () => {
-        return '40281dc1e31749edb6c104828250604';
-    },
-});
-
-/**
- * Real Weather API Service
- * Fetches actual weather data from a weather API service
- */
-class AXPWeatherApiService extends AXPWeatherApiAbstract {
-    constructor() {
-        super(...arguments);
-        this.http = inject(HttpClient);
-        // API configuration
-        this.baseApiUrl = 'https://api.weatherapi.com/v1';
-        this.apiKeyToken = inject(AXP_WEATHER_API_KEY, { optional: true });
-    }
-    /**
-     * Set the API key for the weather service
-     * @param key The API key
-     */
-    setApiKey(key) {
-        if (key && key.trim() !== '') {
-            this.apiKeyToken = key;
-        }
-    }
-    /**
-     * Get current weather data for given location
-     * @param options Weather request options
-     * @returns Observable with weather data
-     */
-    getWeather(options) {
-        // If forecast is likely needed, we should fetch it all at once
-        if (options.useMockData === false || options.useMockData === undefined) {
-            // For real API, use the forecast endpoint which includes current data
-            return this.getForecast({
-                ...options,
-                days: 1, // Request minimal forecast data
-            });
-        }
-        // For mock data, we'll continue using separate calls for backward compatibility
-        const locationParts = this.parseLocation(options.location || '');
-        const displayName = this.formatLocationName(locationParts);
-        // Use real API with query based on city only
-        const query = encodeURIComponent(locationParts.city);
-        const url = `${this.baseApiUrl}/current.json?key=${this.apiKeyToken}&q=${query}&aqi=no`;
-        return this.http.get(url).pipe(map((data) => this.transformApiResponse(data, displayName)), catchError((error) => {
-            console.error('Weather API error:', error);
-            // Check for location not found error
-            if (error.error?.error?.code === 1006) {
-                return throwError(() => new Error(`Location "${locationParts.city}" not found. Please check the city name and try again.`));
-            }
-            return throwError(() => new Error(`Failed to fetch weather data: ${error.message}`));
-        }));
-    }
-    /**
-     * Get weather forecast for a location
-     * @param options Weather request options with days
-     * @returns Observable of weather data with forecast
-     */
-    getForecast(options) {
-        const locationParts = this.parseLocation(options.location || '');
-        const displayName = this.formatLocationName(locationParts);
-        const days = options.days || 5;
-        // Build forecast API URL
-        const query = encodeURIComponent(locationParts.city);
-        const url = `${this.baseApiUrl}/forecast.json?key=${this.apiKeyToken}&q=${query}&days=${days}&aqi=no`;
-        return this.http.get(url).pipe(map((data) => this.transformForecastResponse(data, displayName, days)), catchError((error) => {
-            console.error('Weather API error:', error);
-            // Check for location not found error
-            if (error.error?.error?.code === 1006) {
-                return throwError(() => new Error(`Location "${locationParts.city}" not found. Please check the city name and try again.`));
-            }
-            return throwError(() => new Error(`Failed to fetch forecast data: ${error.message}`));
-        }));
-    }
-    /**
-     * Transform API response to our internal data model
-     * @param apiData Raw API response
-     * @param displayName Formatted location name
-     * @returns Normalized weather data
-     */
-    transformApiResponse(apiData, displayName) {
-        // Map API condition text to our condition IDs
-        const conditionText = apiData.current?.condition?.text || '';
-        const conditionId = this.mapApiConditionToId(conditionText);
-        return {
-            location: {
-                city: apiData.location?.name || '',
-                country: apiData.location?.country || '',
-                displayName: displayName,
-            },
-            current: {
-                condition: conditionId, // Use our mapped condition ID
-                conditionCode: apiData.current?.condition?.code || 0,
-                iconUrl: apiData.current?.condition?.icon || '',
-                tempC: apiData.current?.temp_c || 0,
-                tempF: apiData.current?.temp_f || 0,
-                feelsLikeC: apiData.current?.feelslike_c || 0,
-                feelsLikeF: apiData.current?.feelslike_f || 0,
-                humidity: apiData.current?.humidity || 0,
-                windKph: apiData.current?.wind_kph || 0,
-                windMph: apiData.current?.wind_mph || 0,
-                windDirection: apiData.current?.wind_dir || '',
-                uv: apiData.current?.uv || 0,
-                lastUpdated: apiData.current?.last_updated || new Date().toISOString(),
-            },
-            forecast: [],
-        };
-    }
-    /**
-     * Transform forecast API response to our internal data model
-     * @param apiData Raw API response with forecast
-     * @param displayName Formatted location name
-     * @param days Number of forecast days
-     * @returns Normalized weather data with forecast
-     */
-    transformForecastResponse(apiData, displayName, days) {
-        // First transform the current weather data using the current field of the forecast response
-        const weatherData = this.transformApiResponse(apiData, displayName);
-        // Then add the forecast data
-        const forecastDays = apiData.forecast?.forecastday || [];
-        weatherData.forecast = forecastDays.slice(0, days).map((day) => {
-            // Parse the date for day name
-            const date = new Date(day.date);
-            const dayName = date.toLocaleDateString('en-US', { weekday: 'short' });
-            // Map condition to our internal ID
-            const conditionText = day.day?.condition?.text || '';
-            const conditionId = this.mapApiConditionToId(conditionText);
-            return {
-                date: day.date,
-                day: dayName,
-                condition: conditionId,
-                iconUrl: day.day?.condition?.icon || '',
-                maxTempC: day.day?.maxtemp_c || 0,
-                maxTempF: day.day?.maxtemp_f || 0,
-                minTempC: day.day?.mintemp_c || 0,
-                minTempF: day.day?.mintemp_f || 0,
-            };
-        });
-        return weatherData;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWeatherApiService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWeatherApiService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWeatherApiService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * Weather Widget Component
- * Displays current weather conditions and optional forecast data
- * for a specified location with customizable display options.
- */
-class AXPWeatherWidgetViewComponent extends AXPValueWidgetComponent {
-    /**
-     * Component constructor
-     * @param cdr ChangeDetectorRef for triggering view updates
-     */
-    constructor(cdr) {
-        super();
-        this.cdr = cdr;
-        // Container element reference
-        this.containerEl = viewChild.required('containerElement');
-        // Weather API service instance
-        this.weatherService = inject(AXPWeatherApiAbstract);
-        // State signals
-        this.weatherData = signal(null);
-        this.isLoading = signal(true);
-        this.hasError = signal(false);
-        this.errorMessage = signal('');
-        this.isForecastLoading = signal(false);
-        // Auto-refresh subscription
-        this.refreshSubscription = null;
-        // Option-derived computed properties
-        this.city = computed(() => {
-            return this.options()['city'] || 'Newyork';
-        });
-        this.temperatureUnit = computed(() => this.options()['temperatureUnit']?.id || '°C');
-        this.windSpeedUnit = computed(() => this.options()['windSpeedUnit']?.id || 'km/h');
-        // Display option flags
-        this.showCurrentCondition = computed(() => this.options()['showCurrentCondition'] !== false);
-        this.showTemperature = computed(() => this.options()['showTemperature'] !== false);
-        this.showHumidity = computed(() => this.options()['showHumidity'] !== false);
-        this.showWind = computed(() => this.options()['showWind'] !== false);
-        this.showForecast = computed(() => this.options()['showForecast'] !== false);
-        this.forecastDays = computed(() => this.options()['forecastDays'] ?? 5);
-        // Refresh settings
-        this.autoRefresh = computed(() => this.options()['autoRefresh'] !== false);
-        this.refreshInterval = computed(() => this.options()['refreshInterval']?.id ?? 15);
-        // Reactivity effects
-        this.optionsEffect = effect(() => {
-            const opts = this.options();
-            this.loadWeatherData();
-            this.setupRefreshTimer();
-        });
-        this.valueEffect = effect(() => {
-            this.city();
-            this.loadWeatherData();
-        });
-        this.displayedForecast = computed(() => {
-            const weatherData = this.weatherData();
-            if (!weatherData?.forecast)
-                return [];
-            const forecastDays = this.forecastDays();
-            return weatherData.forecast.slice(0, forecastDays);
-        });
-        // Inject the abstract service which will resolve to either the mock or real implementation
-        this.weatherService = inject(AXPWeatherApiAbstract);
-        setTimeout(() => {
-            this.loadWeatherData();
-            this.setupRefreshTimer();
-        }, 0);
-    }
-    /**
-     * Component cleanup on destroy
-     */
-    ngOnDestroy() {
-        this.clearRefreshTimer();
-    }
-    /**
-     * Loads weather data from the API
-     * Sets loading state and handles errors
-     */
-    loadWeatherData() {
-        this.isLoading.set(true);
-        this.hasError.set(false);
-        this.errorMessage.set('');
-        const locationQuery = this.city();
-        const shouldShowForecast = this.showForecast();
-        // If we need forecast, request it directly to avoid duplicate calls
-        // The forecast endpoint also returns current weather
-        if (shouldShowForecast) {
-            const forecastOptions = {
-                location: locationQuery,
-                tempUnit: this.temperatureUnit(),
-                useMockData: false, // Use real API, signals to use forecast endpoint
-                days: this.forecastDays(),
-            };
-            this.isForecastLoading.set(true);
-            this.weatherService.getForecast(forecastOptions).subscribe({
-                next: (data) => {
-                    this.weatherData.set(data);
-                    this.isLoading.set(false);
-                    this.isForecastLoading.set(false);
-                    setTimeout(() => this.cdr.detectChanges());
-                },
-                error: (error) => {
-                    this.hasError.set(true);
-                    this.errorMessage.set(error.message || 'Failed to load weather data. Please try again.');
-                    this.isLoading.set(false);
-                    this.isForecastLoading.set(false);
-                    this.cdr.detectChanges();
-                },
-            });
-            return;
-        }
-        // If we only need current weather, use getWeather
-        const requestOptions = {
-            location: locationQuery,
-            tempUnit: this.temperatureUnit(),
-            useMockData: false, // Use real API
-        };
-        this.weatherService.getWeather(requestOptions).subscribe({
-            next: (data) => {
-                this.weatherData.set(data);
-                this.isLoading.set(false);
-                setTimeout(() => this.cdr.detectChanges());
-            },
-            error: (error) => {
-                this.hasError.set(true);
-                this.errorMessage.set(error.message || 'Failed to load weather data. Please try again.');
-                this.isLoading.set(false);
-                this.cdr.detectChanges();
-            },
-        });
-    }
-    /**
-     * Sets up the auto-refresh timer based on configuration
-     */
-    setupRefreshTimer() {
-        this.clearRefreshTimer();
-        if (!this.autoRefresh())
-            return;
-        const minInterval = 5; // 5 minutes minimum
-        const intervalValue = Math.max(this.refreshInterval(), minInterval);
-        const intervalMs = intervalValue * 60 * 1000;
-        this.refreshSubscription = interval(intervalMs)
-            .pipe(switchMap(() => {
-            // Always use the loadWeatherData method to determine the correct API call
-            this.loadWeatherData();
-            // Return an empty observable to satisfy the switchMap typing
-            return new Observable((observer) => {
-                observer.complete();
-            });
-        }))
-            .subscribe();
-    }
-    /**
-     * Clears the refresh timer subscription
-     */
-    clearRefreshTimer() {
-        if (this.refreshSubscription) {
-            this.refreshSubscription.unsubscribe();
-            this.refreshSubscription = null;
-        }
-    }
-    /**
-     * Manually refreshes the weather data
-     */
-    refreshWeather() {
-        this.loadWeatherData();
-    }
-    /**
-     * Gets the current temperature based on selected unit
-     */
-    getCurrentTemperature() {
-        if (!this.weatherData())
-            return 0;
-        return this.temperatureUnit() === '°C' ? this.weatherData().current.tempC : this.weatherData().current.tempF;
-    }
-    /**
-     * Gets the feels like temperature based on selected unit
-     */
-    getFeelsLikeTemperature() {
-        if (!this.weatherData())
-            return 0;
-        return this.temperatureUnit() === '°C'
-            ? this.weatherData().current.feelsLikeC
-            : this.weatherData().current.feelsLikeF;
-    }
-    /**
-     * Gets the humidity percentage
-     */
-    getHumidity() {
-        return this.weatherData()?.current.humidity || 0;
-    }
-    /**
-     * Gets the wind speed based on selected unit
-     */
-    getWindSpeed() {
-        if (!this.weatherData())
-            return 0;
-        return this.windSpeedUnit() === 'km/h' ? this.weatherData().current.windKph : this.weatherData().current.windMph;
-    }
-    /**
-     * Gets the current weather condition
-     */
-    getCurrentCondition() {
-        const conditionId = this.weatherData()?.current.condition || '';
-        return this.getConditionName(conditionId);
-    }
-    /**
-     * Gets the formatted last updated time
-     */
-    getLastUpdated() {
-        if (!this.weatherData()?.current.lastUpdated)
-            return '';
-        return new Date(this.weatherData().current.lastUpdated).toLocaleTimeString();
-    }
-    /**
-     * Gets the icon class for a weather condition
-     * @param conditionId Weather condition ID
-     * @returns Font Awesome icon class
-     */
-    getConditionIcon(conditionId) {
-        const condition = this.weatherService.getCondition(conditionId);
-        return condition?.icon || 'fa-solid fa-question';
-    }
-    /**
-     * Gets the display name for a weather condition
-     * @param conditionId Weather condition ID
-     * @returns Condition display name
-     */
-    getConditionName(conditionId) {
-        const condition = this.weatherService.getCondition(conditionId);
-        return condition?.name || 'Unknown';
-    }
-    /**
-     * Gets the color for a weather condition
-     * @param conditionId Weather condition ID
-     * @returns CSS color value
-     */
-    getConditionColor(conditionId) {
-        const condition = this.weatherService.getCondition(conditionId);
-        return condition?.color || '#999999';
-    }
-    /**
-     * Cleans up chart resources
-     * Required by AXPChartBaseComponent
-     */
-    cleanupChart() {
-        this.clearRefreshTimer();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWeatherWidgetViewComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPWeatherWidgetViewComponent, isStandalone: true, selector: "ng-component", providers: [
-            {
-                provide: AXPWeatherApiAbstract,
-                useClass: AXPWeatherApiService,
-            },
-        ], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["containerElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Weather Widget Component Template -->\n<div class=\"axp-weather-container\" #containerElement>\n  <!-- Loading indicator -->\n  @if (isLoading()) {\n  <div class=\"axp-weather-loading-overlay\">\n    <div class=\"axp-weather-loading-spinner\">\n      <i class=\"fa-solid fa-spinner fa-spin\"></i>\n      <span>Loading weather data...</span>\n    </div>\n  </div>\n  }\n\n  <!-- Error message -->\n  @if (hasError()) {\n  <div class=\"axp-weather-error-overlay\">\n    <div class=\"axp-weather-error-message\">\n      <i class=\"fa-solid fa-exclamation-triangle\"></i>\n      <span>{{ errorMessage() }}</span>\n      <button class=\"axp-weather-retry-button\" (click)=\"refreshWeather()\">\n        <i class=\"fa-solid fa-sync-alt\"></i>\n        <span>Retry</span>\n      </button>\n    </div>\n  </div>\n  }\n\n  <!-- Weather content - only show when we have data -->\n  @if (weatherData()) {\n  <!-- Background decorations based on weather condition -->\n  <div class=\"axp-weather-background-decorations\">\n    <div class=\"axp-weather-decoration\" [ngClass]=\"weatherData()?.current?.condition?.toLowerCase()\"></div>\n    <div class=\"axp-weather-gradient-overlay\"></div>\n  </div>\n\n  <div class=\"axp-weather-inner\">\n    <!-- Location information section -->\n    <div class=\"axp-weather-location-info\">\n      <div class=\"axp-weather-location-icon\">\n        <i class=\"fa-solid fa-location-dot\"></i>\n      </div>\n      <div class=\"axp-weather-location-text\">\n        <h2 class=\"axp-weather-location-name\">{{ city() }}</h2>\n      </div>\n    </div>\n\n    <!-- Current weather conditions section -->\n    <div class=\"axp-weather-current-weather\">\n      <!-- Weather icon and condition name -->\n      @if (showCurrentCondition()) {\n      <div class=\"axp-weather-condition\">\n        <div class=\"axp-weather-icon-wrapper\">\n          <div class=\"axp-weather-icon\">\n            <i\n              [class]=\"getConditionIcon(weatherData()?.current?.condition || '')\"\n              [style.color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n            ></i>\n          </div>\n          <div\n            class=\"axp-weather-icon-glow\"\n            [style.background-color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n          ></div>\n        </div>\n        <div class=\"axp-weather-condition-name\">{{ getCurrentCondition() }}</div>\n      </div>\n      }\n\n      <!-- Temperature display -->\n      @if (showTemperature()) {\n      <div class=\"axp-weather-temperature\">\n        <span class=\"axp-weather-temperature-value\">{{ getCurrentTemperature() }}</span>\n        <span class=\"axp-weather-temperature-unit\">{{ temperatureUnit() }}</span>\n      </div>\n      }\n    </div>\n\n    <!-- Weather details section (humidity and wind) -->\n    @if (showHumidity() || showWind()) {\n    <div class=\"axp-weather-details\">\n      <!-- Humidity information -->\n      @if (showHumidity()) {\n      <div class=\"axp-weather-detail-item\">\n        <div class=\"axp-weather-detail-icon\">\n          <i class=\"fa-solid fa-droplet\"></i>\n        </div>\n        <div class=\"axp-weather-detail-info\">\n          <div class=\"axp-weather-detail-label\">Humidity</div>\n          <div class=\"axp-weather-detail-value\">{{ getHumidity() }}%</div>\n        </div>\n      </div>\n      }\n\n      <!-- Wind speed information -->\n      @if (showWind()) {\n      <div class=\"axp-weather-detail-item\">\n        <div class=\"axp-weather-detail-icon\">\n          <i class=\"fa-solid fa-wind\"></i>\n        </div>\n        <div class=\"axp-weather-detail-info\">\n          <div class=\"axp-weather-detail-label\">Wind</div>\n          <div class=\"axp-weather-detail-value\">{{ getWindSpeed() }} {{ windSpeedUnit() }}</div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Weather forecast section -->\n    @if (showForecast() && weatherData()?.forecast) {\n    <div class=\"axp-weather-forecast\">\n      <div class=\"axp-weather-forecast-header\">\n        <h3 class=\"axp-weather-forecast-title\">\n          <i class=\"fa-solid fa-calendar-days\"></i>\n          <span>Forecast</span>\n        </h3>\n        <!-- <div class=\"axp-weather-scroll-indicator\">\n          <i class=\"fa-solid fa-chevron-right\"></i>\n        </div> -->\n      </div>\n      <!-- Loading indicator for forecast -->\n      @if (isForecastLoading()) {\n      <div class=\"axp-weather-forecast-loading\">\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        <span>Loading forecast...</span>\n      </div>\n      }\n      <!-- Scrollable forecast days display -->\n      <div class=\"axp-weather-forecast-items\">\n        @for (day of displayedForecast(); track day.day) {\n        <div class=\"axp-weather-forecast-day\">\n          <div class=\"axp-weather-forecast-day-name\">{{ day.day }}</div>\n          <div class=\"axp-weather-forecast-icon\" title=\"{{ getConditionName(day.condition) }}\">\n            <i [class]=\"getConditionIcon(day.condition)\" [style.color]=\"getConditionColor(day.condition)\"></i>\n          </div>\n          <div class=\"axp-weather-forecast-temps\">\n            <span class=\"axp-weather-forecast-low\">\n              {{ temperatureUnit() === '\u00B0C' ? day.minTempC : day.minTempF }}\u00B0\n            </span>\n            <span class=\"axp-weather-forecast-high\">\n              {{ temperatureUnit() === '\u00B0C' ? day.maxTempC : day.maxTempF }}\u00B0\n            </span>\n          </div>\n        </div>\n        }\n      </div>\n    </div>\n    }\n\n    <!-- Last updated timestamp -->\n    <div class=\"axp-weather-last-updated\">\n      <span>Last updated: {{ getLastUpdated() }}</span>\n    </div>\n\n    <!-- Manual refresh button -->\n    <div class=\"axp-weather-refresh-action\">\n      <button\n        class=\"axp-weather-refresh-button\"\n        (click)=\"refreshWeather()\"\n        [attr.aria-label]=\"'Refresh weather data'\"\n        title=\"Refresh weather data\"\n      >\n        <i class=\"fa-solid fa-sync-alt\"></i>\n        <span>Refresh</span>\n      </button>\n    </div>\n  </div>\n  } @else if (!isLoading() && !hasError()) {\n  <!-- No data state (not loading, no error) -->\n  <div class=\"axp-weather-no-data-state\">\n    <i class=\"fa-solid fa-cloud-sun\"></i>\n    <p>No weather data available</p>\n    <button class=\"axp-weather-refresh-button\" (click)=\"refreshWeather()\">\n      <i class=\"fa-solid fa-sync-alt\"></i>\n      <span>Load Data</span>\n    </button>\n  </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;--primary-gradient-start: #2196f3;--primary-gradient-end: #1976d2;--shadow-color: rgba(0, 0, 0, .2);--glass-bg: rgba(255, 255, 255, .15);--glass-border: rgba(255, 255, 255, .2);--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .75);--transition-speed: .3s}.axp-weather-container{width:100%;height:100%;border-radius:8px;overflow:hidden;position:relative;box-shadow:0 4px 8px rgba(0,0,0,.1);color:#fff;min-height:300px;background-color:#2c3e50}.axp-weather-loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(44,62,80,.85);display:flex;justify-content:center;align-items:center;z-index:100}.axp-weather-loading-spinner{text-align:center}.axp-weather-loading-spinner i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-loading-spinner span{display:block;color:#fff;font-size:1rem}.axp-weather-error-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(189,54,47,.85);display:flex;justify-content:center;align-items:center;z-index:100}.axp-weather-error-message{text-align:center;padding:1rem}.axp-weather-error-message i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-error-message span{display:block;color:#fff;font-size:1.1rem;margin-bottom:1rem}.axp-weather-error-message .axp-weather-retry-button{color:#bd362f;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-error-message .axp-weather-retry-button:hover{transform:translateY(-1px)}.axp-weather-no-data-state{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:2rem;text-align:center}.axp-weather-no-data-state i{font-size:3rem;margin-bottom:1rem;color:rgba(255,255,255,.8)}.axp-weather-no-data-state p{margin-bottom:1.5rem;font-size:1.1rem}.axp-weather-no-data-state .axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-no-data-state .axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-background-decorations{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.axp-weather-decoration{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center}.axp-weather-decoration.sunny{background:linear-gradient(135deg,#ff7e00,#f7d358)}.axp-weather-decoration.partlyCloudy{background:linear-gradient(135deg,#7ba2e7,#b4d2f7)}.axp-weather-decoration.cloudy{background:linear-gradient(135deg,#717e8c,#919eab)}.axp-weather-decoration.rain{background:linear-gradient(135deg,#6a8caf,#567a9e)}.axp-weather-decoration.snow{background:linear-gradient(135deg,#99b3cc,#c6d4e1)}.axp-weather-decoration.thunder{background:linear-gradient(135deg,#425777,#2c3e50)}.axp-weather-decoration.mist{background:linear-gradient(135deg,#94a3b8,#cbd5e1)}.axp-weather-gradient-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5))}.axp-weather-inner{position:relative;z-index:2;height:100%;padding:1.5rem;display:flex;flex-direction:column}.axp-weather-location-info{display:flex;align-items:center;margin-bottom:1.5rem}.axp-weather-location-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,.2);border-radius:50%;margin-right:.75rem}.axp-weather-location-icon i{color:#fff}.axp-weather-location-name{margin:0;font-size:1.5rem;font-weight:500;text-shadow:1px 1px 3px rgba(0,0,0,.2);text-transform:capitalize}.axp-weather-current-weather{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap}.axp-weather-condition{display:flex;flex-direction:column;align-items:center}.axp-weather-icon-wrapper{position:relative;margin-bottom:.5rem}.axp-weather-icon{position:relative;z-index:2}.axp-weather-icon i{font-size:2.75rem;filter:drop-shadow(0 0 8px rgba(0,0,0,.3))}.axp-weather-icon-glow{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);width:45px;height:45px;border-radius:50%;filter:blur(15px);opacity:.75}.axp-weather-condition-name{font-size:1.1rem;text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.axp-weather-temperature{display:flex;align-items:flex-start;text-shadow:1px 1px 3px rgba(0,0,0,.3)}.axp-weather-temperature-value{font-size:3.5rem;font-weight:500;line-height:1}.axp-weather-temperature-unit{font-size:1.5rem;margin-top:.25rem}.axp-weather-details{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:1.5rem;padding:1rem;background-color:rgba(0,0,0,.15);border-radius:8px}.axp-weather-detail-item{display:flex;align-items:center;flex:1;min-width:120px}.axp-weather-detail-icon{width:40px;height:40px;border-radius:50%;background-color:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin-right:.75rem}.axp-weather-detail-icon i{font-size:1.25rem}.axp-weather-detail-info{display:flex;flex-direction:column}.axp-weather-detail-label{font-size:.875rem;color:rgba(255,255,255,.8);margin-bottom:.25rem}.axp-weather-detail-value{font-size:1.125rem;font-weight:500}.axp-weather-forecast{margin-top:auto;margin-bottom:1rem;background-color:rgba(0,0,0,.15);border-radius:8px;padding:1rem}.axp-weather-forecast-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.axp-weather-forecast-title{margin:0;font-size:1.125rem;font-weight:500;display:flex;align-items:center}.axp-weather-forecast-title i{margin-right:.5rem;opacity:.8}.axp-weather-scroll-indicator{color:rgba(255,255,255,.6)}.axp-weather-forecast-items{display:flex;overflow-x:auto;gap:.75rem;padding-bottom:.5rem}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.3);border-radius:4px}.axp-weather-forecast-items::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:4px}.axp-weather-forecast-day{min-width:80px;display:flex;flex-direction:column;align-items:center;padding:.75rem .5rem;background-color:rgba(255,255,255,.1);border-radius:6px;transition:all .3s ease}.axp-weather-forecast-day:hover{background-color:rgba(255,255,255,.15);transform:translateY(-2px)}.axp-weather-forecast-day-name{font-size:.875rem;margin-bottom:.5rem;font-weight:500}.axp-weather-forecast-icon{font-size:1.5rem;margin-bottom:.5rem}.axp-weather-forecast-icon i{filter:drop-shadow(0 0 5px rgba(0,0,0,.2))}.axp-weather-forecast-temps{display:flex;flex-direction:row;gap:.75rem;align-items:center;font-size:.875rem}.axp-weather-last-updated{text-align:center;font-size:.75rem;opacity:.7;margin-bottom:.5rem}.axp-weather-refresh-action{text-align:center}.axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:.875rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-refresh-button i{font-size:.875rem}@media (max-width: 576px){.axp-weather-inner{padding:.8rem;gap:.6rem}.axp-weather-location-name{font-size:1.1rem}.axp-weather-temperature{font-size:2.5rem}.axp-weather-temperature-unit{font-size:1.1rem}.axp-weather-weather-details{flex-direction:column;gap:.5rem}.axp-weather-forecast-items{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.5rem;margin:0 -.4rem;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;mask-image:linear-gradient(to right,#000 95%,rgba(0,0,0,0));-webkit-mask-image:linear-gradient(to right,rgb(0,0,0) 95%,rgba(0,0,0,0))}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.2);border-radius:4px}.axp-weather-forecast-day{min-width:60px;flex:0 0 auto;padding:.4rem .6rem}.axp-weather-forecast-day-name{font-size:.7rem}.axp-weather-forecast-icon{padding:.3rem;height:1.6rem}.axp-weather-forecast-temps{font-size:.7rem}.axp-weather-scroll-indicator{display:block}}@media (max-width: 400px){.axp-weather-current-weather{flex-direction:column;gap:.8rem;align-items:center}.axp-weather-temperature{font-size:2.2rem}.axp-weather-forecast-day{min-width:55px}}:host-context(.theme-dark){--glass-bg: rgba(0, 0, 0, .3);--glass-border: rgba(255, 255, 255, .1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: HttpClientModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWeatherWidgetViewComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, imports: [CommonModule, AXDateTimeModule, AXFormatModule, HttpClientModule], providers: [
-                        {
-                            provide: AXPWeatherApiAbstract,
-                            useClass: AXPWeatherApiService,
-                        },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Weather Widget Component Template -->\n<div class=\"axp-weather-container\" #containerElement>\n  <!-- Loading indicator -->\n  @if (isLoading()) {\n  <div class=\"axp-weather-loading-overlay\">\n    <div class=\"axp-weather-loading-spinner\">\n      <i class=\"fa-solid fa-spinner fa-spin\"></i>\n      <span>Loading weather data...</span>\n    </div>\n  </div>\n  }\n\n  <!-- Error message -->\n  @if (hasError()) {\n  <div class=\"axp-weather-error-overlay\">\n    <div class=\"axp-weather-error-message\">\n      <i class=\"fa-solid fa-exclamation-triangle\"></i>\n      <span>{{ errorMessage() }}</span>\n      <button class=\"axp-weather-retry-button\" (click)=\"refreshWeather()\">\n        <i class=\"fa-solid fa-sync-alt\"></i>\n        <span>Retry</span>\n      </button>\n    </div>\n  </div>\n  }\n\n  <!-- Weather content - only show when we have data -->\n  @if (weatherData()) {\n  <!-- Background decorations based on weather condition -->\n  <div class=\"axp-weather-background-decorations\">\n    <div class=\"axp-weather-decoration\" [ngClass]=\"weatherData()?.current?.condition?.toLowerCase()\"></div>\n    <div class=\"axp-weather-gradient-overlay\"></div>\n  </div>\n\n  <div class=\"axp-weather-inner\">\n    <!-- Location information section -->\n    <div class=\"axp-weather-location-info\">\n      <div class=\"axp-weather-location-icon\">\n        <i class=\"fa-solid fa-location-dot\"></i>\n      </div>\n      <div class=\"axp-weather-location-text\">\n        <h2 class=\"axp-weather-location-name\">{{ city() }}</h2>\n      </div>\n    </div>\n\n    <!-- Current weather conditions section -->\n    <div class=\"axp-weather-current-weather\">\n      <!-- Weather icon and condition name -->\n      @if (showCurrentCondition()) {\n      <div class=\"axp-weather-condition\">\n        <div class=\"axp-weather-icon-wrapper\">\n          <div class=\"axp-weather-icon\">\n            <i\n              [class]=\"getConditionIcon(weatherData()?.current?.condition || '')\"\n              [style.color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n            ></i>\n          </div>\n          <div\n            class=\"axp-weather-icon-glow\"\n            [style.background-color]=\"getConditionColor(weatherData()?.current?.condition || '')\"\n          ></div>\n        </div>\n        <div class=\"axp-weather-condition-name\">{{ getCurrentCondition() }}</div>\n      </div>\n      }\n\n      <!-- Temperature display -->\n      @if (showTemperature()) {\n      <div class=\"axp-weather-temperature\">\n        <span class=\"axp-weather-temperature-value\">{{ getCurrentTemperature() }}</span>\n        <span class=\"axp-weather-temperature-unit\">{{ temperatureUnit() }}</span>\n      </div>\n      }\n    </div>\n\n    <!-- Weather details section (humidity and wind) -->\n    @if (showHumidity() || showWind()) {\n    <div class=\"axp-weather-details\">\n      <!-- Humidity information -->\n      @if (showHumidity()) {\n      <div class=\"axp-weather-detail-item\">\n        <div class=\"axp-weather-detail-icon\">\n          <i class=\"fa-solid fa-droplet\"></i>\n        </div>\n        <div class=\"axp-weather-detail-info\">\n          <div class=\"axp-weather-detail-label\">Humidity</div>\n          <div class=\"axp-weather-detail-value\">{{ getHumidity() }}%</div>\n        </div>\n      </div>\n      }\n\n      <!-- Wind speed information -->\n      @if (showWind()) {\n      <div class=\"axp-weather-detail-item\">\n        <div class=\"axp-weather-detail-icon\">\n          <i class=\"fa-solid fa-wind\"></i>\n        </div>\n        <div class=\"axp-weather-detail-info\">\n          <div class=\"axp-weather-detail-label\">Wind</div>\n          <div class=\"axp-weather-detail-value\">{{ getWindSpeed() }} {{ windSpeedUnit() }}</div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Weather forecast section -->\n    @if (showForecast() && weatherData()?.forecast) {\n    <div class=\"axp-weather-forecast\">\n      <div class=\"axp-weather-forecast-header\">\n        <h3 class=\"axp-weather-forecast-title\">\n          <i class=\"fa-solid fa-calendar-days\"></i>\n          <span>Forecast</span>\n        </h3>\n        <!-- <div class=\"axp-weather-scroll-indicator\">\n          <i class=\"fa-solid fa-chevron-right\"></i>\n        </div> -->\n      </div>\n      <!-- Loading indicator for forecast -->\n      @if (isForecastLoading()) {\n      <div class=\"axp-weather-forecast-loading\">\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        <span>Loading forecast...</span>\n      </div>\n      }\n      <!-- Scrollable forecast days display -->\n      <div class=\"axp-weather-forecast-items\">\n        @for (day of displayedForecast(); track day.day) {\n        <div class=\"axp-weather-forecast-day\">\n          <div class=\"axp-weather-forecast-day-name\">{{ day.day }}</div>\n          <div class=\"axp-weather-forecast-icon\" title=\"{{ getConditionName(day.condition) }}\">\n            <i [class]=\"getConditionIcon(day.condition)\" [style.color]=\"getConditionColor(day.condition)\"></i>\n          </div>\n          <div class=\"axp-weather-forecast-temps\">\n            <span class=\"axp-weather-forecast-low\">\n              {{ temperatureUnit() === '\u00B0C' ? day.minTempC : day.minTempF }}\u00B0\n            </span>\n            <span class=\"axp-weather-forecast-high\">\n              {{ temperatureUnit() === '\u00B0C' ? day.maxTempC : day.maxTempF }}\u00B0\n            </span>\n          </div>\n        </div>\n        }\n      </div>\n    </div>\n    }\n\n    <!-- Last updated timestamp -->\n    <div class=\"axp-weather-last-updated\">\n      <span>Last updated: {{ getLastUpdated() }}</span>\n    </div>\n\n    <!-- Manual refresh button -->\n    <div class=\"axp-weather-refresh-action\">\n      <button\n        class=\"axp-weather-refresh-button\"\n        (click)=\"refreshWeather()\"\n        [attr.aria-label]=\"'Refresh weather data'\"\n        title=\"Refresh weather data\"\n      >\n        <i class=\"fa-solid fa-sync-alt\"></i>\n        <span>Refresh</span>\n      </button>\n    </div>\n  </div>\n  } @else if (!isLoading() && !hasError()) {\n  <!-- No data state (not loading, no error) -->\n  <div class=\"axp-weather-no-data-state\">\n    <i class=\"fa-solid fa-cloud-sun\"></i>\n    <p>No weather data available</p>\n    <button class=\"axp-weather-refresh-button\" (click)=\"refreshWeather()\">\n      <i class=\"fa-solid fa-sync-alt\"></i>\n      <span>Load Data</span>\n    </button>\n  </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;--primary-gradient-start: #2196f3;--primary-gradient-end: #1976d2;--shadow-color: rgba(0, 0, 0, .2);--glass-bg: rgba(255, 255, 255, .15);--glass-border: rgba(255, 255, 255, .2);--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .75);--transition-speed: .3s}.axp-weather-container{width:100%;height:100%;border-radius:8px;overflow:hidden;position:relative;box-shadow:0 4px 8px rgba(0,0,0,.1);color:#fff;min-height:300px;background-color:#2c3e50}.axp-weather-loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(44,62,80,.85);display:flex;justify-content:center;align-items:center;z-index:100}.axp-weather-loading-spinner{text-align:center}.axp-weather-loading-spinner i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-loading-spinner span{display:block;color:#fff;font-size:1rem}.axp-weather-error-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(189,54,47,.85);display:flex;justify-content:center;align-items:center;z-index:100}.axp-weather-error-message{text-align:center;padding:1rem}.axp-weather-error-message i{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.axp-weather-error-message span{display:block;color:#fff;font-size:1.1rem;margin-bottom:1rem}.axp-weather-error-message .axp-weather-retry-button{color:#bd362f;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-error-message .axp-weather-retry-button:hover{transform:translateY(-1px)}.axp-weather-no-data-state{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:2rem;text-align:center}.axp-weather-no-data-state i{font-size:3rem;margin-bottom:1rem;color:rgba(255,255,255,.8)}.axp-weather-no-data-state p{margin-bottom:1.5rem;font-size:1.1rem}.axp-weather-no-data-state .axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-no-data-state .axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-background-decorations{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.axp-weather-decoration{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center}.axp-weather-decoration.sunny{background:linear-gradient(135deg,#ff7e00,#f7d358)}.axp-weather-decoration.partlyCloudy{background:linear-gradient(135deg,#7ba2e7,#b4d2f7)}.axp-weather-decoration.cloudy{background:linear-gradient(135deg,#717e8c,#919eab)}.axp-weather-decoration.rain{background:linear-gradient(135deg,#6a8caf,#567a9e)}.axp-weather-decoration.snow{background:linear-gradient(135deg,#99b3cc,#c6d4e1)}.axp-weather-decoration.thunder{background:linear-gradient(135deg,#425777,#2c3e50)}.axp-weather-decoration.mist{background:linear-gradient(135deg,#94a3b8,#cbd5e1)}.axp-weather-gradient-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5))}.axp-weather-inner{position:relative;z-index:2;height:100%;padding:1.5rem;display:flex;flex-direction:column}.axp-weather-location-info{display:flex;align-items:center;margin-bottom:1.5rem}.axp-weather-location-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,.2);border-radius:50%;margin-right:.75rem}.axp-weather-location-icon i{color:#fff}.axp-weather-location-name{margin:0;font-size:1.5rem;font-weight:500;text-shadow:1px 1px 3px rgba(0,0,0,.2);text-transform:capitalize}.axp-weather-current-weather{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap}.axp-weather-condition{display:flex;flex-direction:column;align-items:center}.axp-weather-icon-wrapper{position:relative;margin-bottom:.5rem}.axp-weather-icon{position:relative;z-index:2}.axp-weather-icon i{font-size:2.75rem;filter:drop-shadow(0 0 8px rgba(0,0,0,.3))}.axp-weather-icon-glow{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);width:45px;height:45px;border-radius:50%;filter:blur(15px);opacity:.75}.axp-weather-condition-name{font-size:1.1rem;text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.axp-weather-temperature{display:flex;align-items:flex-start;text-shadow:1px 1px 3px rgba(0,0,0,.3)}.axp-weather-temperature-value{font-size:3.5rem;font-weight:500;line-height:1}.axp-weather-temperature-unit{font-size:1.5rem;margin-top:.25rem}.axp-weather-details{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:1.5rem;padding:1rem;background-color:rgba(0,0,0,.15);border-radius:8px}.axp-weather-detail-item{display:flex;align-items:center;flex:1;min-width:120px}.axp-weather-detail-icon{width:40px;height:40px;border-radius:50%;background-color:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin-right:.75rem}.axp-weather-detail-icon i{font-size:1.25rem}.axp-weather-detail-info{display:flex;flex-direction:column}.axp-weather-detail-label{font-size:.875rem;color:rgba(255,255,255,.8);margin-bottom:.25rem}.axp-weather-detail-value{font-size:1.125rem;font-weight:500}.axp-weather-forecast{margin-top:auto;margin-bottom:1rem;background-color:rgba(0,0,0,.15);border-radius:8px;padding:1rem}.axp-weather-forecast-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.axp-weather-forecast-title{margin:0;font-size:1.125rem;font-weight:500;display:flex;align-items:center}.axp-weather-forecast-title i{margin-right:.5rem;opacity:.8}.axp-weather-scroll-indicator{color:rgba(255,255,255,.6)}.axp-weather-forecast-items{display:flex;overflow-x:auto;gap:.75rem;padding-bottom:.5rem}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.3);border-radius:4px}.axp-weather-forecast-items::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:4px}.axp-weather-forecast-day{min-width:80px;display:flex;flex-direction:column;align-items:center;padding:.75rem .5rem;background-color:rgba(255,255,255,.1);border-radius:6px;transition:all .3s ease}.axp-weather-forecast-day:hover{background-color:rgba(255,255,255,.15);transform:translateY(-2px)}.axp-weather-forecast-day-name{font-size:.875rem;margin-bottom:.5rem;font-weight:500}.axp-weather-forecast-icon{font-size:1.5rem;margin-bottom:.5rem}.axp-weather-forecast-icon i{filter:drop-shadow(0 0 5px rgba(0,0,0,.2))}.axp-weather-forecast-temps{display:flex;flex-direction:row;gap:.75rem;align-items:center;font-size:.875rem}.axp-weather-last-updated{text-align:center;font-size:.75rem;opacity:.7;margin-bottom:.5rem}.axp-weather-refresh-action{text-align:center}.axp-weather-refresh-button{background-color:rgba(255,255,255,.2);color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;font-size:.875rem;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.axp-weather-refresh-button:hover{background-color:rgba(255,255,255,.3);transform:translateY(-1px)}.axp-weather-refresh-button i{font-size:.875rem}@media (max-width: 576px){.axp-weather-inner{padding:.8rem;gap:.6rem}.axp-weather-location-name{font-size:1.1rem}.axp-weather-temperature{font-size:2.5rem}.axp-weather-temperature-unit{font-size:1.1rem}.axp-weather-weather-details{flex-direction:column;gap:.5rem}.axp-weather-forecast-items{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.5rem;margin:0 -.4rem;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;mask-image:linear-gradient(to right,#000 95%,rgba(0,0,0,0));-webkit-mask-image:linear-gradient(to right,rgb(0,0,0) 95%,rgba(0,0,0,0))}.axp-weather-forecast-items::-webkit-scrollbar{height:4px}.axp-weather-forecast-items::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.2);border-radius:4px}.axp-weather-forecast-day{min-width:60px;flex:0 0 auto;padding:.4rem .6rem}.axp-weather-forecast-day-name{font-size:.7rem}.axp-weather-forecast-icon{padding:.3rem;height:1.6rem}.axp-weather-forecast-temps{font-size:.7rem}.axp-weather-scroll-indicator{display:block}}@media (max-width: 400px){.axp-weather-current-weather{flex-direction:column;gap:.8rem;align-items:center}.axp-weather-temperature{font-size:2.2rem}.axp-weather-forecast-day{min-width:55px}}:host-context(.theme-dark){--glass-bg: rgba(0, 0, 0, .3);--glass-border: rgba(255, 255, 255, .1)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
-
-var weatherWidget_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPWeatherWidgetViewComponent: AXPWeatherWidgetViewComponent
-});
-
-/**
- * Weather Widget Configuration
- * Provides customization options for displaying weather data and forecast
- */
-const AXPWeatherWidget = {
-    name: 'weather',
-    title: 'Weather Widget',
-    categories: [AXP_WIDGETS_UTILITY_CATEGORY],
-    groups: [AXPWidgetGroupEnum.DashboardWidget],
-    type: 'dashboard',
-    icon: 'fa-light fa-cloud-sun',
-    properties: [
-        /* Location Settings */
-        {
-            name: 'city',
-            title: 'City',
-            group: AXP_DATA_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 'New York',
-                dataType: 'string',
-                interface: {
-                    name: 'city',
-                    path: 'options.city',
-                    type: AXPWidgetsCatalog.text,
-                },
-            },
-            visible: true,
-        },
-        /* Display Options */
-        // {
-        //   name: 'showCurrentCondition',
-        //   title: 'Show Current Condition',
-        //   group: AXP_APPEARANCE_PROPERTY_GROUP,
-        //   schema: {
-        //     defaultValue: true,
-        //     dataType: 'boolean',
-        //     interface: {
-        //       name: 'showCurrentCondition',
-        //       path: 'options.showCurrentCondition',
-        //       type: AXPWidgetsCatalog.toggle,
-        //     },
-        //   },
-        //   visible: true,
-        // },
-        // {
-        //   name: 'showTemperature',
-        //   title: 'Show Temperature',
-        //   group: AXP_APPEARANCE_PROPERTY_GROUP,
-        //   schema: {
-        //     defaultValue: true,
-        //     dataType: 'boolean',
-        //     interface: {
-        //       name: 'showTemperature',
-        //       path: 'options.showTemperature',
-        //       type: AXPWidgetsCatalog.toggle,
-        //     },
-        //   },
-        //   visible: true,
-        // },
-        // {
-        //   name: 'showCurrentCondition',
-        //   title: 'Show Current Condition',
-        //   group: AXP_APPEARANCE_PROPERTY_GROUP,
-        //   schema: {
-        //     defaultValue: true,
-        //     dataType: 'boolean',
-        //     interface: {
-        //       name: 'showCurrentCondition',
-        //       path: 'options.showCurrentCondition',
-        //       type: AXPWidgetsCatalog.toggle,
-        //     },
-        //   },
-        //   visible: true,
-        // },
-        // {
-        //   name: 'showTemperature',
-        //   title: 'Show Temperature',
-        //   group: AXP_APPEARANCE_PROPERTY_GROUP,
-        //   schema: {
-        //     defaultValue: true,
-        //     dataType: 'boolean',
-        //     interface: {
-        //       name: 'showTemperature',
-        //       path: 'options.showTemperature',
-        //       type: AXPWidgetsCatalog.toggle,
-        //     },
-        //   },
-        //   visible: true,
-        // },
-        {
-            name: 'showHumidity',
-            title: 'Show Humidity',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showHumidity',
-                    path: 'options.showHumidity',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'showWind',
-            title: 'Show Wind Speed',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showWind',
-                    path: 'options.showWind',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'showForecast',
-            title: 'Show Forecast',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'showForecast',
-                    path: 'options.showForecast',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'forecastDays',
-            title: 'Forecast Days',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 5,
-                dataType: 'number',
-                interface: {
-                    name: 'forecastDays',
-                    path: 'options.forecastDays',
-                    type: AXPWidgetsCatalog.number,
-                    options: {
-                        minValue: 1,
-                        maxValue: 7,
-                        step: 1,
-                    },
-                },
-            },
-            visible: true,
-        },
-        /* Units Settings */
-        {
-            name: 'temperatureUnit',
-            title: 'Temperature Unit',
-            group: AXP_DATA_PROPERTY_GROUP,
-            schema: {
-                defaultValue: '°C',
-                dataType: 'string',
-                interface: {
-                    name: 'temperatureUnit',
-                    path: 'options.temperatureUnit',
-                    type: AXPWidgetsCatalog.select,
-                    options: {
-                        dataSource: ['°C', '°F'],
-                    },
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'windSpeedUnit',
-            title: 'Wind Speed Unit',
-            group: AXP_DATA_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 'km/h',
-                dataType: 'string',
-                interface: {
-                    name: 'windSpeedUnit',
-                    path: 'options.windSpeedUnit',
-                    type: AXPWidgetsCatalog.select,
-                    options: {
-                        dataSource: ['km/h', 'mph', 'm/s'],
-                    },
-                },
-            },
-            visible: true,
-        },
-        /* Refresh Settings */
-        {
-            name: 'autoRefresh',
-            title: 'Auto Refresh',
-            group: AXP_BEHAVIOR_PROPERTY_GROUP,
-            schema: {
-                defaultValue: true,
-                dataType: 'boolean',
-                interface: {
-                    name: 'autoRefresh',
-                    path: 'options.autoRefresh',
-                    type: AXPWidgetsCatalog.toggle,
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'refreshInterval',
-            title: 'Refresh Interval (minutes)',
-            group: AXP_BEHAVIOR_PROPERTY_GROUP,
-            schema: {
-                defaultValue: 15,
-                dataType: 'number',
-                interface: {
-                    name: 'refreshInterval',
-                    path: 'options.refreshInterval',
-                    type: AXPWidgetsCatalog.select,
-                    options: {
-                        dataSource: [5, 10, 15, 30, 60],
-                    },
-                },
-            },
-            visible: true,
-        },
-    ],
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return weatherWidget_component; }).then((c) => c.AXPWeatherWidgetViewComponent),
-        },
-    },
-    meta: {
-        dimensions: {
-            width: 3,
-            height: 7,
-            minWidth: 2,
-            minHeight: 4,
-            maxWidth: 4,
-            maxHeight: 8,
-        },
-    },
-};
-
-/**
- * Weather Widget Module
- * Provides weather display functionality as a dashboard widget
- */
-class AXPWeatherWidgetModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWeatherWidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXPWeatherWidgetModule, imports: [HttpClientModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWeatherWidgetModule, providers: [
-            // You can choose which implementation to use:
-            // Option 1: Use the mock service for development/testing
-            {
-                provide: AXPWeatherApiAbstract,
-                useClass: AXPWeatherApiMockService,
-            },
-            // Option 2: Use the real API service for production (uncomment to use)
-            // {
-            //   provide: AXPWeatherApiAbstract,
-            //   useClass: AXPWeatherApiService
-            // }
-        ], imports: [HttpClientModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWeatherWidgetModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [HttpClientModule],
-                    declarations: [],
-                    providers: [
-                        // You can choose which implementation to use:
-                        // Option 1: Use the mock service for development/testing
-                        {
-                            provide: AXPWeatherApiAbstract,
-                            useClass: AXPWeatherApiMockService,
-                        },
-                        // Option 2: Use the real API service for production (uncomment to use)
-                        // {
-                        //   provide: AXPWeatherApiAbstract,
-                        //   useClass: AXPWeatherApiService
-                        // }
-                    ],
-                    exports: [],
-                }]
-        }] });
-
-// export interface AXPWidgetOptions {
-// }
-// export interface AXPWidgetConfig<T extends AXPWidgetOptions> {
-//     name: string;
-//     options: T;
-// }
-// export interface AXpTextBoxWidget {
-// }
-// export interface AXPTextBoxWidgetOptions {
-//     disabled?: boolean;
-//     readonly?: boolean;
-//     hasClearButton?: boolean;
-//     placeholder?: string;
-// }
-
 class AXPCronJobWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
@@ -17174,7 +13452,7 @@ class AXPTabularDataWidgetEditComponent extends AXPValueWidgetComponent {
         this.platform = inject(AXPlatform);
     }
     async openPopup() {
-        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-widgets-tabular-data-edit-popup.component-CybYV1Kf.mjs');
+        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-widgets-tabular-data-edit-popup.component-1IseEVXQ.mjs');
         const popupData = await this.popupService.open(AXPTabularDataPopupComponent, {
             size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : this.columns().length > 3 ? 'lg' : 'md',
             header: true,
@@ -17656,7 +13934,7 @@ class AXPDateTimeFilterWidgetEditComponent extends AXPValueWidgetComponent {
       </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { 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: AXTranslationModule }, { kind: "pipe", type: i5$1.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$2.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { 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: AXTranslationModule }, { kind: "pipe", type: i5$1.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$2.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "calendar", "picker", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDateTimeFilterWidgetEditComponent, decorators: [{
             type: Component,
@@ -19329,19 +15607,10 @@ class AXPWidgetsModule {
                     AXPBetweenExpressionValidationWidget,
                     AXPEqualValidationWidget,
                     AXPCallbackValidationWidget,
-                    //charts
-                    AXPDonutChartWidget,
-                    AXPBarChartWidget,
-                    AXPGaugeChartWidget,
-                    AXPStickyNoteWidget,
-                    AXPClockCalendarWidget,
-                    AXPWeatherWidget,
                     AXPMetaDataWidget,
                     //Custom Widgets
                     AXPNumberUnitBoxWidget,
                     AXPPanelWidget,
-                    AXPNotificationWidget,
-                    AXPTaskListWidget,
                 ],
             })] }); }
 }
@@ -19409,19 +15678,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                                 AXPBetweenExpressionValidationWidget,
                                 AXPEqualValidationWidget,
                                 AXPCallbackValidationWidget,
-                                //charts
-                                AXPDonutChartWidget,
-                                AXPBarChartWidget,
-                                AXPGaugeChartWidget,
-                                AXPStickyNoteWidget,
-                                AXPClockCalendarWidget,
-                                AXPWeatherWidget,
                                 AXPMetaDataWidget,
                                 //Custom Widgets
                                 AXPNumberUnitBoxWidget,
                                 AXPPanelWidget,
-                                AXPNotificationWidget,
-                                AXPTaskListWidget,
                             ],
                         }),
                     ],
@@ -19438,5 +15698,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPAdvancedGridItemWidget, AXPAdvancedGridItemWidgetDesignerComponent, AXPAdvancedGridItemWidgetPrintComponent, AXPAdvancedGridItemWidgetViewComponent, AXPAdvancedGridOptionsWidget, AXPAdvancedGridOptionsWidgetEditComponent, AXPAdvancedGridWidget, AXPAdvancedGridWidgetDesignerComponent, AXPAdvancedGridWidgetViewComponent, AXPAvatarWidget, AXPAvatarWidgetColumnComponent, AXPAvatarWidgetDesignerComponent, AXPAvatarWidgetEditComponent, AXPAvatarWidgetPrintComponent, AXPAvatarWidgetViewComponent, AXPBarChartWidget, AXPBarChartWidgetViewComponent, AXPBetweenExpressionValidationWidget, AXPBetweenValidationWidgetEditComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetViewComponent, AXPCallbackValidationWidget, AXPCallbackValidationWidgetEditComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetEditComponent, AXPClockCalendarWidget, AXPClockCalendarWidgetViewComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetPrintComponent, AXPContactWidgetViewComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetFilterComponent, AXPDateTimeBoxWidgetPrintComponent, AXPDateTimeBoxWidgetViewComponent, AXPDonutChartWidget, AXPDonutChartWidgetViewComponent, AXPEmailBoxWidget, AXPEmailBoxWidgetColumnComponent, AXPEmailBoxWidgetEditComponent, AXPEmailBoxWidgetFilterComponent, AXPEmailBoxWidgetPrintComponent, AXPEmailBoxWidgetViewComponent, AXPEqualValidationWidget, AXPEqualValidationWidgetEditComponent, AXPFileBoxWidget, AXPFileBoxWidgetColumnComponent, AXPFileBoxWidgetEditComponent, AXPFileBoxWidgetFilterComponent, AXPFileBoxWidgetPrintComponent, AXPFileBoxWidgetViewComponent, AXPFileManagementService, AXPFlexOptionsWidget, AXPFlexOptionsWidgetEditComponent, AXPGalleryWidget, AXPGalleryWidgetEditComponent, AXPGalleryWidgetPrintComponent, AXPGalleryWidgetViewComponent, AXPGaugeChartWidget, AXPGaugeChartWidgetViewComponent, AXPGreaterThanExpressionValidationWidget, AXPGreaterThanValidationWidgetEditComponent, AXPGridOptionsWidget, AXPGridOptionsWidgetEditComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetFilterComponent, AXPLargeTextWidgetPrintComponent, AXPLargeTextWidgetViewComponent, AXPLessThanExpressionValidationWidget, AXPLessThanValidationWidgetEditComponent, AXPLinkWidget, AXPLinkWidgetColumnComponent, AXPLinkWidgetEditComponent, AXPLinkWidgetFilterComponent, AXPLinkWidgetPrintComponent, AXPLinkWidgetViewComponent, AXPMapBoxWidget, AXPMapBoxWidgetEditComponent, AXPMapBoxWidgetViewComponent, AXPMaxLengthExpressionValidationWidget, AXPMaxLengthValidationWidgetEditComponent, AXPMinLengthExpressionValidationWidget, AXPMinLengthValidationWidgetEditComponent, AXPNotificationWidget, AXPNotificationWidgetViewComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetFilterComponent, AXPNumberBoxWidgetPrintComponent, AXPNumberBoxWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetFilterComponent, AXPPasswordBoxWidgetPrintComponent, AXPPasswordBoxWidgetViewComponent, AXPPhoneBoxWidget, AXPPhoneBoxWidgetColumnComponent, AXPPhoneBoxWidgetEditComponent, AXPPhoneBoxWidgetFilterComponent, AXPPhoneBoxWidgetPrintComponent, AXPPhoneBoxWidgetViewComponent, AXPPropertyEditorHelper, AXPRegularExpressionValidationWidget, AXPRegularExpressionValidationWidgetEditComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetPrintComponent, AXPRepeaterWidgetViewComponent, AXPRequiredValidationWidget, AXPRequiredValidationWidgetEditComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetFilterComponent, AXPRichTextWidgetPrintComponent, AXPRichTextWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetFilterComponent, AXPSelectBoxWidgetPrintComponent, AXPSelectBoxWidgetViewComponent, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetFilterComponent, AXPSelectionListWidgetPrintComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetFilterComponent, AXPSignatureWidgetPrintComponent, AXPSignatureWidgetViewComponent, AXPSingleFileBoxWidget, AXPSingleFileBoxWidgetColumnComponent, AXPSingleFileBoxWidgetEditComponent, AXPSingleFileBoxWidgetFilterComponent, AXPSingleFileBoxWidgetPrintComponent, AXPSingleFileBoxWidgetViewComponent, AXPSpacingWidget, AXPSpacingWidgetEditComponent, AXPStickyNoteWidget, AXPStickyNoteWidgetViewComponent, AXPTaskListWidget, AXPTaskListWidgetViewComponent, AXPTemplateBoxWidget, AXPTemplateBoxWidgetColumnComponent, AXPTemplateBoxWidgetEditComponent, AXPTemplateBoxWidgetFilterComponent, AXPTemplateBoxWidgetPrintComponent, AXPTemplateBoxWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetFilterComponent, AXPTextBoxWidgetPrintComponent$1 as AXPTextBoxWidgetPrintComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetFilterComponent, AXPToggleWidgetPrintComponent, AXPToggleWidgetViewComponent, AXPWeatherApiAbstract, AXPWeatherApiMockService, AXPWeatherApiService, AXPWeatherWidget, AXPWeatherWidgetModule, AXPWeatherWidgetViewComponent, AXPWidgetsModule, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_ALLOW_SEARCH_PROPERTY, AXP_ANIMATION_PROPERTY_GROUP, AXP_APPEARANCE_PROPERTY_GROUP, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BETWEEN_VALIDATION_PROPERTY, AXP_BG_COLOR_PROPERTY, AXP_BOX_MODEL_PROPERTY_GROUP, AXP_CALLBACK_VALIDATION_PROPERTY, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_PROPERTIES, AXP_DATA_SOURCE_PROPERTY, AXP_DATA_SOURCE_TEXT_FIELD, AXP_DATA_SOURCE_VALUE_FIELD, AXP_DATE_FORMAT_OPTIONS, AXP_DATE_FORMAT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_EQUAL_VALIDATION_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_Flex_Box_Align_Options, AXP_Flex_Box_Alignments, AXP_Flex_Box_Justify_Options, AXP_GREATER_THAN_VALIDATION_PROPERTY, AXP_Grid_Box_Align_Items_Options, AXP_Grid_Box_Alignments, AXP_Grid_Box_Justify_Items_Options, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_HAS_LABEL_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, AXP_LABEL_PROPERTY, AXP_LAYOUT_ADVANCED_GRID_PROPERTY, AXP_LAYOUT_BORDER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_COL_END_PROPERTY, AXP_LAYOUT_COL_SPAN_PROPERTY, AXP_LAYOUT_COL_START_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY_GROUP, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTIES, AXP_LAYOUT_GRID_PROPERTIES, AXP_LAYOUT_GRID_PROPERTY, AXP_LAYOUT_GRID_PROPERTY_GROUP, AXP_LAYOUT_GRID_ROW_PROPERTIES, AXP_LAYOUT_ROWS_PROPERTY, AXP_LAYOUT_SPACING_PROPERTY, AXP_LESS_THAN_VALIDATION_PROPERTY, AXP_MAX_LENGTH_VALIDATION_PROPERTY, AXP_MIN_LENGTH_VALIDATION_PROPERTY, AXP_NAME_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_READONLY_PROPERTY, AXP_REGULAR_EXPRESSION_VALIDATION_PROPERTY, AXP_REQUIRED_VALIDATION_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_STYLING_PROPERTY_GROUP, AXP_TABLE_COLUMN_HEIGHT_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_TEXT_FIELD_PROPERTY, AXP_TEXT_PROPERTY, AXP_THEME_PROPERTY, AXP_TIMEZONE_OPTIONS, AXP_TITLE_PROPERTY, AXP_TRULY_TEXT_PROPERTY, AXP_VALIDATION_PROPERTY_GROUP, AXP_VALUE_FIELD_PROPERTY, AXP_WIDGETS_CHART_CATEGORY, AXP_WIDGETS_UTILITY_CATEGORY, AXP_WIDGET_PROPERTY_GROUP, AXP_default_Border_Box_Units, AXP_default_Border_Box_Value, AXP_default_Spacing_Box_Units, AXP_default_Spacing_Box_Value, DEFAULT_STRATEGY_CONFIG, STRATEGY_CONFIG_TOKEN, booleanDefaultProperty, findNonEmptyBreakpoints, largeTextDefaultProperty, numberDefaultProperty, numberMaxValueProperty, numberMinValueProperty, plainTextDefaultProperty };
+export { AXPAdvancedGridItemWidget, AXPAdvancedGridItemWidgetDesignerComponent, AXPAdvancedGridItemWidgetPrintComponent, AXPAdvancedGridItemWidgetViewComponent, AXPAdvancedGridOptionsWidget, AXPAdvancedGridOptionsWidgetEditComponent, AXPAdvancedGridWidget, AXPAdvancedGridWidgetDesignerComponent, AXPAdvancedGridWidgetViewComponent, AXPAvatarWidget, AXPAvatarWidgetColumnComponent, AXPAvatarWidgetDesignerComponent, AXPAvatarWidgetEditComponent, AXPAvatarWidgetPrintComponent, AXPAvatarWidgetViewComponent, AXPBetweenExpressionValidationWidget, AXPBetweenValidationWidgetEditComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetViewComponent, AXPCallbackValidationWidget, AXPCallbackValidationWidgetEditComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetEditComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetPrintComponent, AXPContactWidgetViewComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetFilterComponent, AXPDateTimeBoxWidgetPrintComponent, AXPDateTimeBoxWidgetViewComponent, AXPEmailBoxWidget, AXPEmailBoxWidgetColumnComponent, AXPEmailBoxWidgetEditComponent, AXPEmailBoxWidgetFilterComponent, AXPEmailBoxWidgetPrintComponent, AXPEmailBoxWidgetViewComponent, AXPEqualValidationWidget, AXPEqualValidationWidgetEditComponent, AXPFileBoxWidget, AXPFileBoxWidgetColumnComponent, AXPFileBoxWidgetEditComponent, AXPFileBoxWidgetFilterComponent, AXPFileBoxWidgetPrintComponent, AXPFileBoxWidgetViewComponent, AXPFileManagementService, AXPFlexOptionsWidget, AXPFlexOptionsWidgetEditComponent, AXPGalleryWidget, AXPGalleryWidgetEditComponent, AXPGalleryWidgetPrintComponent, AXPGalleryWidgetViewComponent, AXPGreaterThanExpressionValidationWidget, AXPGreaterThanValidationWidgetEditComponent, AXPGridOptionsWidget, AXPGridOptionsWidgetEditComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetFilterComponent, AXPLargeTextWidgetPrintComponent, AXPLargeTextWidgetViewComponent, AXPLessThanExpressionValidationWidget, AXPLessThanValidationWidgetEditComponent, AXPLinkWidget, AXPLinkWidgetColumnComponent, AXPLinkWidgetEditComponent, AXPLinkWidgetFilterComponent, AXPLinkWidgetPrintComponent, AXPLinkWidgetViewComponent, AXPMapBoxWidget, AXPMapBoxWidgetEditComponent, AXPMapBoxWidgetViewComponent, AXPMaxLengthExpressionValidationWidget, AXPMaxLengthValidationWidgetEditComponent, AXPMinLengthExpressionValidationWidget, AXPMinLengthValidationWidgetEditComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetFilterComponent, AXPNumberBoxWidgetPrintComponent, AXPNumberBoxWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetFilterComponent, AXPPasswordBoxWidgetPrintComponent, AXPPasswordBoxWidgetViewComponent, AXPPhoneBoxWidget, AXPPhoneBoxWidgetColumnComponent, AXPPhoneBoxWidgetEditComponent, AXPPhoneBoxWidgetFilterComponent, AXPPhoneBoxWidgetPrintComponent, AXPPhoneBoxWidgetViewComponent, AXPPropertyEditorHelper, AXPRegularExpressionValidationWidget, AXPRegularExpressionValidationWidgetEditComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetPrintComponent, AXPRepeaterWidgetViewComponent, AXPRequiredValidationWidget, AXPRequiredValidationWidgetEditComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetFilterComponent, AXPRichTextWidgetPrintComponent, AXPRichTextWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetFilterComponent, AXPSelectBoxWidgetPrintComponent, AXPSelectBoxWidgetViewComponent, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetFilterComponent, AXPSelectionListWidgetPrintComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetFilterComponent, AXPSignatureWidgetPrintComponent, AXPSignatureWidgetViewComponent, AXPSingleFileBoxWidget, AXPSingleFileBoxWidgetColumnComponent, AXPSingleFileBoxWidgetEditComponent, AXPSingleFileBoxWidgetFilterComponent, AXPSingleFileBoxWidgetPrintComponent, AXPSingleFileBoxWidgetViewComponent, AXPSpacingWidget, AXPSpacingWidgetEditComponent, AXPTemplateBoxWidget, AXPTemplateBoxWidgetColumnComponent, AXPTemplateBoxWidgetEditComponent, AXPTemplateBoxWidgetFilterComponent, AXPTemplateBoxWidgetPrintComponent, AXPTemplateBoxWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetFilterComponent, AXPTextBoxWidgetPrintComponent$1 as AXPTextBoxWidgetPrintComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetFilterComponent, AXPToggleWidgetPrintComponent, AXPToggleWidgetViewComponent, AXPWidgetsModule, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_ALLOW_SEARCH_PROPERTY, AXP_ANIMATION_PROPERTY_GROUP, AXP_APPEARANCE_PROPERTY_GROUP, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BETWEEN_VALIDATION_PROPERTY, AXP_BG_COLOR_PROPERTY, AXP_BOX_MODEL_PROPERTY_GROUP, AXP_CALLBACK_VALIDATION_PROPERTY, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_PROPERTIES, AXP_DATA_SOURCE_PROPERTY, AXP_DATA_SOURCE_TEXT_FIELD, AXP_DATA_SOURCE_VALUE_FIELD, AXP_DATE_FORMAT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_EQUAL_VALIDATION_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_Flex_Box_Align_Options, AXP_Flex_Box_Alignments, AXP_Flex_Box_Justify_Options, AXP_GREATER_THAN_VALIDATION_PROPERTY, AXP_Grid_Box_Align_Items_Options, AXP_Grid_Box_Alignments, AXP_Grid_Box_Justify_Items_Options, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_HAS_LABEL_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, AXP_LABEL_PROPERTY, AXP_LAYOUT_ADVANCED_GRID_PROPERTY, AXP_LAYOUT_BORDER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_COL_END_PROPERTY, AXP_LAYOUT_COL_SPAN_PROPERTY, AXP_LAYOUT_COL_START_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY_GROUP, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTIES, AXP_LAYOUT_GRID_PROPERTIES, AXP_LAYOUT_GRID_PROPERTY, AXP_LAYOUT_GRID_PROPERTY_GROUP, AXP_LAYOUT_GRID_ROW_PROPERTIES, AXP_LAYOUT_ROWS_PROPERTY, AXP_LAYOUT_SPACING_PROPERTY, AXP_LESS_THAN_VALIDATION_PROPERTY, AXP_MAX_LENGTH_VALIDATION_PROPERTY, AXP_MIN_LENGTH_VALIDATION_PROPERTY, AXP_NAME_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_READONLY_PROPERTY, AXP_REGULAR_EXPRESSION_VALIDATION_PROPERTY, AXP_REQUIRED_VALIDATION_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_STYLING_PROPERTY_GROUP, AXP_TABLE_COLUMN_HEIGHT_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_TEXT_FIELD_PROPERTY, AXP_TEXT_PROPERTY, AXP_THEME_PROPERTY, AXP_TITLE_PROPERTY, AXP_TRULY_TEXT_PROPERTY, AXP_VALIDATION_PROPERTY_GROUP, AXP_VALUE_FIELD_PROPERTY, AXP_WIDGET_PROPERTY_GROUP, AXP_default_Border_Box_Units, AXP_default_Border_Box_Value, AXP_default_Spacing_Box_Units, AXP_default_Spacing_Box_Value, DEFAULT_STRATEGY_CONFIG, STRATEGY_CONFIG_TOKEN, booleanDefaultProperty, findNonEmptyBreakpoints, largeTextDefaultProperty, numberDefaultProperty, numberMaxValueProperty, numberMinValueProperty, plainTextDefaultProperty };
 //# sourceMappingURL=acorex-platform-widgets.mjs.map