@acorex/platform 19.3.0-next.4 → 19.3.0

package/fesm2022/acorex-platform-widgets.mjs

@@ -12,7 +12,7 @@ import { AXLoadingModule } from '@acorex/components/loading';
 import * as i1$1 from '@angular/common';
 import { CommonModule, DatePipe } 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, Injector, runInInjectionContext, Directive, output, HostListener, Injectable, 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';
@@ -1927,7 +1927,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 +6721,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 +6741,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 +7877,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 +8414,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 +8512,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,
@@ -12581,6 +12579,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             args: [{ selector: 'ax-chart-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible() && data()) {\n<div class=\"chart-tooltip\" [style.left.px]=\"position().x\" [style.top.px]=\"position().y\" [ngStyle]=\"style()\">\n  <div class=\"chart-tooltip-title\">{{ data()!.title }}</div>\n  <div class=\"chart-tooltip-content\">\n    @if (data()!.color) {\n    <div class=\"chart-tooltip-color\" [style.background-color]=\"data()!.color\"></div>\n    }\n    <div class=\"chart-tooltip-value\">{{ data()!.value }}</div>\n    @if (showPercentage() && data()!.percentage) {\n    <div class=\"chart-tooltip-percentage\">{{ data()!.percentage }}</div>\n    }\n  </div>\n</div>\n}\n", styles: [".chart-tooltip{position:absolute;pointer-events:none;background-color:rgba(33,33,33,.9);color:#fff;padding:.5rem .75rem;border-radius:.375rem;font-size:.8rem;z-index:10;box-shadow:0 4px 12px rgba(0,0,0,.15);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.1);transform:translate(10px,-50%);max-width:200px;font-family:var(--ax-font-family, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);transition:opacity .15s ease,transform .15s ease}.chart-tooltip-title{font-weight:600;padding-bottom:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chart-tooltip-content{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.chart-tooltip-color{width:10px;height:10px;border-radius:2px;flex-shrink:0;box-shadow:0 1px 2px rgba(0,0,0,.2)}.chart-tooltip-value{font-weight:500;flex-grow:1}.chart-tooltip-percentage{background-color:rgba(255,255,255,.2);padding:.125rem .375rem;border-radius:1rem;font-size:.7rem;font-weight:500;flex-shrink:0}\n"] }]
         }] });
 
+/**
+ * Bar Chart Widget Component
+ * Renders data as vertical bars with interactive hover effects and animations
+ */
 class AXPBarChartWidgetViewComponent extends AXPChartBaseComponent {
     constructor() {
         super(...arguments);
@@ -12606,6 +12608,9 @@ class AXPBarChartWidgetViewComponent extends AXPChartBaseComponent {
         this.cornerRadius = computed(() => this.options()['cornerRadius'] ?? 4);
     }
     // Chart lifecycle methods
+    /**
+     * Creates the bar chart SVG and renders all elements
+     */
     createChart() {
         if (!this.d3 || !this.chartContainerEl()?.nativeElement)
             return;
@@ -12621,14 +12626,7 @@ class AXPBarChartWidgetViewComponent extends AXPChartBaseComponent {
         // 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})`);
+        // No need to create SVG here as it's now done in setupDimensions
         // Create scales and axes
         this.setupScales(data);
         this.createAxes(options);
@@ -12647,15 +12645,40 @@ class AXPBarChartWidgetViewComponent extends AXPChartBaseComponent {
         this._tooltipVisible.set(false);
     }
     // Private chart creation methods
+    /**
+     * Sets up chart dimensions and creates SVG with responsive attributes
+     */
     setupDimensions(containerElement, options) {
-        // Set width and height based on container or options
+        // Get container dimensions
         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;
+        // If options specify width and height, use those, otherwise default to container size
+        const minDim = Math.min(200, containerWidth, containerHeight); // Ensure reasonable minimum
+        if (options.width && options.height) {
+            // Explicit dimensions provided
+            this.width = options.width - this.margin.left - this.margin.right;
+            this.height = options.height - this.margin.top - this.margin.bottom;
+        }
+        else {
+            // Responsive dimensions
+            this.width = Math.max(containerWidth, minDim) - this.margin.left - this.margin.right;
+            this.height = Math.max(containerHeight, minDim) - this.margin.top - this.margin.bottom;
+        }
+        // Create responsive SVG that scales with its container
+        const svg = this.d3
+            .select(containerElement)
+            .append('svg')
+            .attr('width', '100%')
+            .attr('height', '100%')
+            .attr('viewBox', `0 0 ${this.width + this.margin.left + this.margin.right} ${this.height + this.margin.top + this.margin.bottom}`)
+            .attr('preserveAspectRatio', 'xMidYMid meet');
+        this.svg = svg;
+        // Create chart group with margins
+        this.chart = this.svg.append('g').attr('transform', `translate(${this.margin.left},${this.margin.top})`);
     }
+    /**
+     * Creates x and y scales for the chart
+     */
     setupScales(data) {
         // Get the bar width percentage (default 80%)
         const barWidthPercent = this.barWidth() / 100;
@@ -12674,6 +12697,9 @@ class AXPBarChartWidgetViewComponent extends AXPChartBaseComponent {
             .nice()
             .range([this.height, 0]);
     }
+    /**
+     * Creates x and y axes with grid lines
+     */
     createAxes(options) {
         // Only create axes if they are enabled in options
         const showXAxis = options.showXAxis !== false;
@@ -12704,6 +12730,9 @@ class AXPBarChartWidgetViewComponent extends AXPChartBaseComponent {
                 .style('color', 'rgb(153 153 153 / 30%)'); // Add gray color to ticks
         }
     }
+    /**
+     * Renders the bars with animations
+     */
     renderBars(data) {
         // Get corner radius from options
         const radius = this.cornerRadius();
@@ -12735,6 +12764,9 @@ class AXPBarChartWidgetViewComponent extends AXPChartBaseComponent {
             .ease(this.d3.easeQuadOut); // Simple quadratic ease-out animation
     }
     // Event handlers
+    /**
+     * Handles bar hover event and shows tooltip
+     */
     handleBarHover(event, datum) {
         if (this.options().showTooltip !== false) {
             const index = this.chartData().findIndex((item) => item.id === datum.id);
@@ -12752,6 +12784,9 @@ class AXPBarChartWidgetViewComponent extends AXPChartBaseComponent {
             this._tooltipVisible.set(true);
         }
     }
+    /**
+     * Updates tooltip position based on mouse coordinates
+     */
     updateTooltipPosition(event) {
         const container = this.chartContainerEl().nativeElement.getBoundingClientRect();
         const x = event.clientX - container.left;
@@ -12761,9 +12796,15 @@ class AXPBarChartWidgetViewComponent extends AXPChartBaseComponent {
             y: y,
         });
     }
+    /**
+     * Handles bar click event
+     */
     handleBarClick(event, datum) {
         this.barClick.emit(datum);
     }
+    /**
+     * Shows a message when no data is available
+     */
     showNoDataMessage(containerElement) {
         const messageContainer = this.d3
             .select(containerElement)
@@ -12793,11 +12834,11 @@ class AXPBarChartWidgetViewComponent extends AXPChartBaseComponent {
             .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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPBarChartWidgetViewComponent, isStandalone: true, selector: "ng-component", outputs: { barClick: "barClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-bar-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:200px}.axp-bar-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden}.axp-bar-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.axp-bar-chart-bar{transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer}.axp-bar-chart-bar:hover{filter:brightness(.9);transform:translateY(-3px)}.axp-bar-chart-axis-x path,.axp-bar-chart-axis-y path{stroke:var(--ax-border-color, #e0e0e0)}.axp-bar-chart-axis-x line,.axp-bar-chart-axis-y line,.axp-bar-chart-grid line{stroke:var(--ax-border-color, #e0e0e0);stroke-dasharray:2,2;stroke-opacity:.5}.axp-bar-chart-grid path{stroke-width:0}.axp-bar-chart-axis-x text,.axp-bar-chart-axis-y text{fill:var(--ax-text-muted, #666);font-size:clamp(8px,2vmin,12px)}.axp-bar-chart-no-data-message{font-family:var(--ax-font-family, system-ui, sans-serif);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%}.axp-bar-chart-no-data-icon{margin-bottom:.75rem;color:var(--ax-text-muted, #999)}.axp-bar-chart-no-data-text{font-weight:600;color:var(--ax-text-color, #333)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBarChartWidgetViewComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, AXPChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-bar-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height: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"] }]
+            args: [{ standalone: true, imports: [CommonModule, AXPChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-bar-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:200px}.axp-bar-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden}.axp-bar-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.axp-bar-chart-bar{transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer}.axp-bar-chart-bar:hover{filter:brightness(.9);transform:translateY(-3px)}.axp-bar-chart-axis-x path,.axp-bar-chart-axis-y path{stroke:var(--ax-border-color, #e0e0e0)}.axp-bar-chart-axis-x line,.axp-bar-chart-axis-y line,.axp-bar-chart-grid line{stroke:var(--ax-border-color, #e0e0e0);stroke-dasharray:2,2;stroke-opacity:.5}.axp-bar-chart-grid path{stroke-width:0}.axp-bar-chart-axis-x text,.axp-bar-chart-axis-y text{fill:var(--ax-text-muted, #666);font-size:clamp(8px,2vmin,12px)}.axp-bar-chart-no-data-message{font-family:var(--ax-font-family, system-ui, sans-serif);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%}.axp-bar-chart-no-data-icon{margin-bottom:.75rem;color:var(--ax-text-muted, #999)}.axp-bar-chart-no-data-text{font-weight:600;color:var(--ax-text-color, #333)}\n"] }]
         }] });
 
 var barChartWidget_component = /*#__PURE__*/Object.freeze({
@@ -13881,6 +13922,10 @@ const AXPDonutChartWidget = {
     },
 };
 
+/**
+ * Gauge Chart Widget Component
+ * Renders a semi-circular gauge chart with animated needle and thresholds
+ */
 class AXPGaugeChartWidgetViewComponent extends AXPChartBaseComponent {
     constructor() {
         super(...arguments);
@@ -13904,15 +13949,30 @@ class AXPGaugeChartWidgetViewComponent extends AXPChartBaseComponent {
         this.gaugeWidth = computed(() => this.options()['gaugeWidth'] ?? 22);
         this.cornerRadius = computed(() => this.options()['cornerRadius'] ?? 5);
     }
+    /**
+     * Creates the gauge chart with all elements
+     */
     createChart() {
         // Clear any existing chart
         this.d3.select(this.chartEl().nativeElement).selectAll('*').remove();
         // Calculate responsive dimensions
-        const containerWidth = this.width() || this.chartContainerEl().nativeElement.clientWidth;
-        const containerHeight = this.height() || this.chartContainerEl().nativeElement.clientHeight;
-        const size = Math.min(containerWidth, containerHeight * 2);
+        const containerElement = this.chartContainerEl().nativeElement;
+        const containerWidth = containerElement.clientWidth;
+        const containerHeight = containerElement.clientHeight;
+        // Determine size based on explicit dimensions or container size
+        const options = this.options();
+        let size;
+        if (options.width && options.height) {
+            // Use explicit dimensions if provided
+            size = Math.min(options.width, options.height * 2);
+        }
+        else {
+            // Use container dimensions with minimum constraints
+            const minDim = Math.max(200, Math.min(containerWidth, containerHeight));
+            size = Math.min(containerWidth, containerHeight * 2, minDim * 2);
+        }
         const margin = size * 0.1;
-        // Set up SVG dimensions with viewBox for responsiveness
+        // Set up SVG with responsive viewBox
         const svg = this.d3
             .select(this.chartEl().nativeElement)
             .attr('width', '100%')
@@ -13951,7 +14011,7 @@ class AXPGaugeChartWidgetViewComponent extends AXPChartBaseComponent {
         }
     }
     /**
-     * Create gradient definitions for thresholds
+     * Creates gradient definitions for thresholds
      */
     createGradients(svg, thresholds) {
         const defs = svg.append('defs');
@@ -13996,7 +14056,7 @@ class AXPGaugeChartWidgetViewComponent extends AXPChartBaseComponent {
         }
     }
     /**
-     * Draw the background arc.
+     * Draws the background arc
      */
     drawBackgroundArc(chartGroup, innerRadius, outerRadius, cornerRadius) {
         const backgroundArc = this.d3
@@ -14018,7 +14078,7 @@ class AXPGaugeChartWidgetViewComponent extends AXPChartBaseComponent {
             .attr('filter', 'drop-shadow(0px 2px 3px rgba(0,0,0,0.1))');
     }
     /**
-     * Draw the threshold arcs and labels.
+     * Draws the threshold arcs with colors
      */
     drawThresholds(chartGroup, innerRadius, outerRadius, minValue, maxValue, thresholds, cornerRadius) {
         const arc = this.d3
@@ -14064,7 +14124,7 @@ class AXPGaugeChartWidgetViewComponent extends AXPChartBaseComponent {
         }
     }
     /**
-     * Draw tick marks around the gauge
+     * Draws tick marks around the gauge
      */
     drawTicks(chartGroup, radius, minValue, maxValue) {
         const tickCount = 10;
@@ -14128,13 +14188,13 @@ class AXPGaugeChartWidgetViewComponent extends AXPChartBaseComponent {
         }
     }
     /**
-     * Draw the value display in the center
+     * Draws 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('class', 'gauge-value')
             .attr('x', 0)
             .attr('y', radius * 0.25) // Moved up from 0.3
             .attr('text-anchor', 'middle')
@@ -14146,7 +14206,7 @@ class AXPGaugeChartWidgetViewComponent extends AXPChartBaseComponent {
         // Label text
         chartGroup
             .append('text')
-            .attr('class', 'label')
+            .attr('class', 'gauge-label')
             .attr('x', 0)
             .attr('y', radius * 0.45) // Keeping this position to create more space
             .attr('text-anchor', 'middle')
@@ -14156,7 +14216,7 @@ class AXPGaugeChartWidgetViewComponent extends AXPChartBaseComponent {
             .text(label);
     }
     /**
-     * Draw the dial/needle with animation.
+     * Draws the dial/needle with animation
      */
     drawDial(chartGroup, radius, value, minValue, maxValue) {
         const needleGroup = chartGroup.append('g');
@@ -14195,7 +14255,7 @@ class AXPGaugeChartWidgetViewComponent extends AXPChartBaseComponent {
         });
     }
     /**
-     * Create a path for the needle
+     * Creates a path for the needle
      */
     createNeedlePath(radius) {
         const needleLength = radius * 0.75;
@@ -14203,42 +14263,33 @@ class AXPGaugeChartWidgetViewComponent extends AXPChartBaseComponent {
         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.
+     * Scales a value to an angle for needle positioning
      */
     scaleValueToAngle(value, min, max) {
         const scaledValue = (value - min) / (max - min);
         // Map from -180 to 0 degrees in radians, starting from the left
         return -Math.PI + scaledValue * Math.PI;
     }
+    /**
+     * Scales a value to an angle for threshold colors
+     */
     scaleValueToColorAngle(value, min, max) {
         const scaledValue = (value - min) / (max - min);
         // Map from -90 to 90 degrees in radians (-π/2 to π/2), starting from the bottom
         return -Math.PI / 2 + scaledValue * Math.PI;
     }
     /**
-     * Convert radians to degrees.
+     * Converts 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPGaugeChartWidgetViewComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }, { propertyName: "chartEl", first: true, predicate: ["chart"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-justify-center ax-items-center ax-w-full ax-h-full\" #chartContainer>\n  <svg #chart class=\"ax-w-full ax-h-full\"></svg>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:200px}div.ax-flex{position:relative;width:100%;height:100%;overflow:visible}svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.gauge-arc{transition:stroke-dashoffset 1s ease}.gauge-label{font-family:var(--ax-font-family, system-ui, sans-serif);font-weight:600}.gauge-value{font-family:var(--ax-font-family, system-ui, sans-serif);font-weight:700}.gauge-min-max{font-family:var(--ax-font-family, system-ui, sans-serif);opacity:.7}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 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"] }]
+            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-flex ax-justify-center ax-items-center ax-w-full ax-h-full\" #chartContainer>\n  <svg #chart class=\"ax-w-full ax-h-full\"></svg>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:200px}div.ax-flex{position:relative;width:100%;height:100%;overflow:visible}svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.gauge-arc{transition:stroke-dashoffset 1s ease}.gauge-label{font-family:var(--ax-font-family, system-ui, sans-serif);font-weight:600}.gauge-value{font-family:var(--ax-font-family, system-ui, sans-serif);font-weight:700}.gauge-min-max{font-family:var(--ax-font-family, system-ui, sans-serif);opacity:.7}\n"] }]
         }] });
 
 var gaugeChartWidget_component = /*#__PURE__*/Object.freeze({
@@ -14400,6 +14451,643 @@ const AXPGaugeChartWidget = {
     },
 };
 
+/**
+ * Line Chart Widget Component
+ * Renders data as lines with interactive hover effects and animations
+ */
+class AXPLineChartWidgetViewComponent extends AXPChartBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.pointClick = output();
+        // Chart container reference
+        this.chartContainerEl = viewChild.required('chartContainer');
+        this.margin = { top: 20, right: 20, bottom: 30, left: 40 };
+        // Tooltip state
+        this._tooltipVisible = signal(false);
+        this._tooltipPosition = signal({ x: 0, y: 0 });
+        this._tooltipData = signal({
+            title: '',
+            value: '0',
+            percentage: '0%',
+            color: '',
+        });
+        // Tooltip accessors
+        this.tooltipVisible = computed(() => this._tooltipVisible());
+        this.tooltipPosition = computed(() => this._tooltipPosition());
+        this.tooltipData = computed(() => this._tooltipData());
+        // Line appearance options
+        this.lineWidth = computed(() => this.options()['lineWidth'] ?? 2);
+        this.showPoints = computed(() => this.options()['showPoints'] !== false);
+        this.pointRadius = computed(() => this.options()['pointRadius'] ?? 4);
+        this.smoothLine = computed(() => this.options()['smoothLine'] !== false);
+        this.fillArea = computed(() => this.options()['fillArea'] === true);
+        this.fillOpacity = computed(() => (this.options()['fillOpacity'] ?? 20) / 100);
+    }
+    // Chart lifecycle methods
+    /**
+     * Creates the line chart SVG and renders all elements
+     */
+    createChart() {
+        if (!this.d3 || !this.chartContainerEl()?.nativeElement)
+            return;
+        const containerElement = this.chartContainerEl().nativeElement;
+        let data = this.chartData() || [];
+        // Clear existing chart
+        this.d3.select(containerElement).selectAll('svg').remove();
+        // Normalize data structure to array of arrays (multi-series format)
+        let normalizedData = [];
+        // Handle both flat array and array of arrays formats
+        if (data.length > 0) {
+            if (Array.isArray(data[0])) {
+                // Already in multi-series format
+                normalizedData = data;
+            }
+            else {
+                // Single series or flat array with seriesName
+                const dataPoints = data;
+                // Check if this is multi-series data (has seriesName property)
+                const hasSeriesNames = dataPoints.some((d) => d.seriesName !== undefined);
+                if (hasSeriesNames) {
+                    // Organize by series name
+                    const seriesMap = new Map();
+                    dataPoints.forEach((d) => {
+                        const seriesName = d.seriesName || 'default';
+                        if (!seriesMap.has(seriesName)) {
+                            seriesMap.set(seriesName, []);
+                        }
+                        seriesMap.get(seriesName).push(d);
+                    });
+                    // Convert to array of arrays
+                    normalizedData = Array.from(seriesMap.values());
+                }
+                else {
+                    // Single series, wrap it in an array
+                    normalizedData = [dataPoints];
+                }
+            }
+        }
+        // Early return if no data
+        if (normalizedData.length === 0 || normalizedData.flat().length === 0) {
+            this.showNoDataMessage(containerElement);
+            return;
+        }
+        // Get options and setup dimensions
+        const options = this.options();
+        this.setupDimensions(containerElement, options);
+        // Flatten data for scale calculation
+        const flatData = normalizedData.flat();
+        // Create scales with the flattened data
+        this.setupScales(flatData);
+        this.createAxes(options);
+        // Render the lines using the structured data (array of arrays)
+        this.renderLines(normalizedData);
+    }
+    updateChart() {
+        this.createChart();
+    }
+    cleanupChart() {
+        if (this.svg) {
+            this.d3.select(this.chartContainerEl()?.nativeElement).selectAll('svg').remove();
+            this.svg = null;
+            this.chart = null;
+        }
+        this._tooltipVisible.set(false);
+    }
+    // Private chart creation methods
+    /**
+     * Sets up chart dimensions and creates SVG with responsive attributes
+     */
+    setupDimensions(containerElement, options) {
+        // Get container dimensions
+        const containerWidth = containerElement.clientWidth;
+        const containerHeight = containerElement.clientHeight;
+        // If options specify width and height, use those, otherwise default to container size
+        const minDim = Math.min(200, containerWidth, containerHeight); // Ensure reasonable minimum
+        if (options.width && options.height) {
+            // Explicit dimensions provided
+            this.width = options.width - this.margin.left - this.margin.right;
+            this.height = options.height - this.margin.top - this.margin.bottom;
+        }
+        else {
+            // Responsive dimensions
+            this.width = Math.max(containerWidth, minDim) - this.margin.left - this.margin.right;
+            this.height = Math.max(containerHeight, minDim) - this.margin.top - this.margin.bottom;
+        }
+        // Create responsive SVG that scales with its container
+        const svg = this.d3
+            .select(containerElement)
+            .append('svg')
+            .attr('width', '100%')
+            .attr('height', '100%')
+            .attr('viewBox', `0 0 ${this.width + this.margin.left + this.margin.right} ${this.height + this.margin.top + this.margin.bottom}`)
+            .attr('preserveAspectRatio', 'xMidYMid meet');
+        this.svg = svg;
+        // Create chart group with margins
+        this.chart = this.svg.append('g').attr('transform', `translate(${this.margin.left},${this.margin.top})`);
+    }
+    /**
+     * Creates x and y scales for the chart
+     */
+    setupScales(data) {
+        // Determine x-axis type based on data
+        const allNumericX = data.every((d) => typeof d.xValue === 'number');
+        const allDates = data.every((d) => !isNaN(new Date(d.xValue).getTime()));
+        // Create appropriate x scale based on data type
+        if (allNumericX) {
+            // Numeric x-axis
+            this.xScale = this.d3
+                .scaleLinear()
+                .domain([
+                this.d3.min(data, (d) => d.xValue) || 0,
+                this.d3.max(data, (d) => d.xValue) || 0,
+            ])
+                .range([0, this.width]);
+        }
+        else if (allDates) {
+            // Date x-axis
+            this.xScale = this.d3
+                .scaleTime()
+                .domain([
+                this.d3.min(data, (d) => new Date(d.xValue)) || new Date(),
+                this.d3.max(data, (d) => new Date(d.xValue)) || new Date(),
+            ])
+                .range([0, this.width]);
+        }
+        else {
+            // Categorical x-axis
+            this.xScale = this.d3
+                .scaleBand()
+                .domain(data.map((d) => d.xValue.toString()))
+                .range([0, this.width])
+                .padding(0.1);
+        }
+        // Create y scale (linear scale for values)
+        this.yScale = this.d3
+            .scaleLinear()
+            .domain([0, this.d3.max(data, (d) => d.value) || 0])
+            .nice()
+            .range([this.height, 0]);
+    }
+    /**
+     * Creates x and y axes with grid lines
+     */
+    createAxes(options) {
+        // Only create axes if they are enabled in options
+        const showXAxis = options.showXAxis !== false;
+        const showYAxis = options.showYAxis !== false;
+        const showGrid = options.showGrid !== false;
+        if (showXAxis) {
+            // Create X axis
+            this.xAxis = this.chart
+                .append('g')
+                .attr('class', 'axp-line-chart-axis-x')
+                .attr('transform', `translate(0,${this.height})`)
+                .call(this.d3.axisBottom(this.xScale));
+        }
+        if (showYAxis) {
+            // Create Y axis
+            this.yAxis = this.chart.append('g').attr('class', 'axp-line-chart-axis-y').call(this.d3.axisLeft(this.yScale));
+        }
+        if (showGrid) {
+            // Add horizontal grid lines
+            this.chart
+                .append('g')
+                .attr('class', 'axp-line-chart-grid')
+                .call(this.d3
+                .axisLeft(this.yScale)
+                .tickSize(-this.width)
+                .tickFormat(() => ''))
+                .selectAll('.tick')
+                .style('color', 'rgb(153 153 153 / 30%)'); // Add gray color to ticks
+        }
+    }
+    /**
+     * Renders the lines with animations
+     */
+    renderLines(data) {
+        // Get line options
+        const lineWidth = this.lineWidth();
+        const useSmooth = this.smoothLine();
+        const shouldFill = this.fillArea();
+        const fillOpacity = this.fillOpacity();
+        // Create line generator
+        const getX = (d) => {
+            // Handle different x scale types
+            if (this.xScale.bandwidth) {
+                // band scale for categorical
+                return this.xScale(d.xValue.toString()) + this.xScale.bandwidth() / 2;
+            }
+            else {
+                // linear or time scale
+                return this.xScale(d.xValue);
+            }
+        };
+        // Define line generator function
+        const lineGenerator = useSmooth
+            ? this.d3
+                .line()
+                .x(getX)
+                .y((d) => this.yScale(d.value))
+                .curve(this.d3.curveMonotoneX) // Smooth curve
+            : this.d3
+                .line()
+                .x(getX)
+                .y((d) => this.yScale(d.value))
+                .curve(this.d3.curveLinear); // Straight lines
+        // Define area generator if we should fill
+        const areaGenerator = useSmooth
+            ? this.d3
+                .area()
+                .x(getX)
+                .y0(this.height)
+                .y1((d) => this.yScale(d.value))
+                .curve(this.d3.curveMonotoneX)
+            : this.d3
+                .area()
+                .x(getX)
+                .y0(this.height)
+                .y1((d) => this.yScale(d.value))
+                .curve(this.d3.curveLinear);
+        // Render each series
+        data.forEach((seriesData, seriesIndex) => {
+            // Skip empty series
+            if (!seriesData.length)
+                return;
+            // Sort data within series by x value
+            seriesData.sort((a, b) => {
+                if (typeof a.xValue === 'number' && typeof b.xValue === 'number') {
+                    return a.xValue - b.xValue;
+                }
+                else {
+                    return a.xValue.toString().localeCompare(b.xValue.toString());
+                }
+            });
+            // Get series name and color
+            const seriesName = seriesData[0].seriesName || `Series ${seriesIndex + 1}`;
+            // Get color for this series - prefer the color from data point, otherwise use palette
+            const seriesColor = seriesData[0]?.color || AXPChartColors.getColor(seriesIndex);
+            // Draw the area if fill is enabled
+            if (shouldFill) {
+                this.chart
+                    .append('path')
+                    .datum(seriesData)
+                    .attr('class', 'axp-line-chart-area')
+                    .attr('fill', seriesColor)
+                    .attr('fill-opacity', fillOpacity)
+                    .attr('d', areaGenerator);
+            }
+            // Draw the line with animation
+            const path = this.chart
+                .append('path')
+                .datum(seriesData)
+                .attr('class', 'axp-line-chart-line')
+                .attr('stroke', seriesColor)
+                .attr('stroke-width', lineWidth)
+                .attr('fill', 'none') // Ensure no fill on the line
+                .attr('d', lineGenerator);
+            // Animate the line drawing
+            const pathLength = path.node().getTotalLength();
+            path
+                .attr('stroke-dasharray', pathLength)
+                .attr('stroke-dashoffset', pathLength)
+                .transition()
+                .duration(1000)
+                .attr('stroke-dashoffset', 0)
+                .ease(this.d3.easeQuadOut);
+            // Add data points if enabled
+            if (this.showPoints()) {
+                this.chart
+                    .selectAll(`.axp-line-chart-point-${seriesIndex}`)
+                    .data(seriesData)
+                    .enter()
+                    .append('circle')
+                    .attr('class', `axp-line-chart-point axp-line-chart-point-${seriesIndex}`)
+                    .attr('cx', (d) => getX(d))
+                    .attr('cy', (d) => this.yScale(d.value))
+                    .attr('r', 0) // Start with radius 0 for animation
+                    .attr('fill', seriesColor)
+                    .attr('stroke', 'white')
+                    .attr('stroke-width', 1)
+                    .on('mouseenter', (event, d) => this.handlePointHover(event, d, seriesName))
+                    .on('mousemove', (event) => this.updateTooltipPosition(event))
+                    .on('mouseleave', () => this._tooltipVisible.set(false))
+                    .on('click', (event, d) => this.handlePointClick(event, d))
+                    .transition()
+                    .delay((d, i) => i * 50 + 300) // Stagger with delay after line animation
+                    .duration(300)
+                    .attr('r', this.pointRadius())
+                    .ease(this.d3.easeBackOut); // Bouncy animation
+            }
+        });
+    }
+    // Event handlers
+    /**
+     * Handles point hover event and shows tooltip
+     */
+    handlePointHover(event, datum, seriesName) {
+        if (this.options().showTooltip !== false) {
+            const data = this.chartData();
+            let index = 0;
+            // Find index based on data structure
+            if (Array.isArray(data)) {
+                if (Array.isArray(data[0])) {
+                    // Multi-series data (array of arrays)
+                    const flatData = data.flat();
+                    index = flatData.findIndex((item) => item.id === datum.id);
+                }
+                else {
+                    // Single series (array of data points)
+                    index = data.findIndex((item) => item.id === datum.id);
+                }
+            }
+            const color = datum.color || AXPChartColors.getColor(index);
+            // Update tooltip data
+            this._tooltipData.set({
+                title: datum.label || seriesName,
+                value: datum.value.toString(),
+                percentage: '', // Not showing percentage for line charts
+                color,
+            });
+            // Position tooltip near the point
+            this.updateTooltipPosition(event);
+            this._tooltipVisible.set(true);
+        }
+    }
+    /**
+     * Updates tooltip position based on mouse coordinates
+     */
+    updateTooltipPosition(event) {
+        const rect = event.target.getBoundingClientRect();
+        const containerRect = this.chartContainerEl().nativeElement.getBoundingClientRect();
+        // Position relative to the container
+        const x = event.clientX - containerRect.left;
+        const y = event.clientY - containerRect.top;
+        this._tooltipPosition.set({ x, y });
+    }
+    /**
+     * Handles point click event
+     */
+    handlePointClick(event, datum) {
+        // Emit click event with the data point
+        this.pointClick.emit(datum);
+    }
+    /**
+     * Shows a message when no data is available
+     */
+    showNoDataMessage(containerElement) {
+        const noDataDiv = this.d3.select(containerElement).append('div').attr('class', 'axp-line-chart-no-data-message');
+        noDataDiv
+            .append('div')
+            .attr('class', 'axp-line-chart-no-data-icon')
+            .html('<i class="fa-light fa-chart-line fa-3x"></i>');
+        noDataDiv.append('div').attr('class', 'axp-line-chart-no-data-text').text('No data available');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLineChartWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPLineChartWidgetViewComponent, isStandalone: true, selector: "ng-component", outputs: { pointClick: "pointClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-line-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"false\"\n  ></ax-chart-tooltip>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:200px}.axp-line-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden}.axp-line-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.axp-line-chart-line{fill:none;stroke-width:2px;stroke-linejoin:round;stroke-linecap:round;transition:stroke-width .3s ease}.axp-line-chart-line:hover{stroke-width:3px}.axp-line-chart-area{opacity:.2;transition:opacity .3s ease}.axp-line-chart-area:hover{opacity:.3}.axp-line-chart-point{cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.axp-line-chart-point:hover{r:6;stroke-width:2;stroke:var(--ax-background-color, #fff)}.axp-line-chart-axis-x path,.axp-line-chart-axis-y path{stroke:var(--ax-border-color, #e0e0e0)}.axp-line-chart-axis-x line,.axp-line-chart-axis-y line,.axp-line-chart-grid line{stroke:var(--ax-border-color, #e0e0e0);stroke-dasharray:2,2;stroke-opacity:.5}.axp-line-chart-grid path{stroke-width:0}.axp-line-chart-axis-x text,.axp-line-chart-axis-y text{fill:var(--ax-text-muted, #666);font-size:clamp(8px,2vmin,12px)}.axp-line-chart-no-data-message{font-family:var(--ax-font-family, system-ui, sans-serif);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%}.axp-line-chart-no-data-icon{margin-bottom:.75rem;color:var(--ax-text-muted, #999)}.axp-line-chart-no-data-text{font-weight:600;color:var(--ax-text-color, #333)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLineChartWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, AXPChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-line-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"false\"\n  ></ax-chart-tooltip>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:200px}.axp-line-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden}.axp-line-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.axp-line-chart-line{fill:none;stroke-width:2px;stroke-linejoin:round;stroke-linecap:round;transition:stroke-width .3s ease}.axp-line-chart-line:hover{stroke-width:3px}.axp-line-chart-area{opacity:.2;transition:opacity .3s ease}.axp-line-chart-area:hover{opacity:.3}.axp-line-chart-point{cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.axp-line-chart-point:hover{r:6;stroke-width:2;stroke:var(--ax-background-color, #fff)}.axp-line-chart-axis-x path,.axp-line-chart-axis-y path{stroke:var(--ax-border-color, #e0e0e0)}.axp-line-chart-axis-x line,.axp-line-chart-axis-y line,.axp-line-chart-grid line{stroke:var(--ax-border-color, #e0e0e0);stroke-dasharray:2,2;stroke-opacity:.5}.axp-line-chart-grid path{stroke-width:0}.axp-line-chart-axis-x text,.axp-line-chart-axis-y text{fill:var(--ax-text-muted, #666);font-size:clamp(8px,2vmin,12px)}.axp-line-chart-no-data-message{font-family:var(--ax-font-family, system-ui, sans-serif);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%}.axp-line-chart-no-data-icon{margin-bottom:.75rem;color:var(--ax-text-muted, #999)}.axp-line-chart-no-data-text{font-weight:600;color:var(--ax-text-color, #333)}\n"] }]
+        }] });
+
+var lineChartWidget_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPLineChartWidgetViewComponent: AXPLineChartWidgetViewComponent
+});
+
+const AXPLineChartWidget = {
+    name: 'line-chart',
+    title: 'Line Chart Widget',
+    categories: [AXP_WIDGETS_CHART_CATEGORY],
+    groups: [AXPWidgetGroupEnum.DashboardWidget],
+    type: 'dashboard',
+    icon: 'fa-light fa-chart-line',
+    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,
+        },
+        // ====== Line Appearance ======
+        {
+            name: 'lineWidth',
+            title: 'Line Width',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 2,
+                dataType: 'number',
+                interface: {
+                    name: 'lineWidth',
+                    path: 'options.lineWidth',
+                    type: AXPWidgetsCatalog.number,
+                    options: {
+                        placeholder: '1-10',
+                        minValue: 1,
+                        maxValue: 10,
+                    },
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'showPoints',
+            title: 'Show Points',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: true,
+                dataType: 'boolean',
+                interface: {
+                    name: 'showPoints',
+                    path: 'options.showPoints',
+                    type: AXPWidgetsCatalog.toggle,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'pointRadius',
+            title: 'Point Size',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 4,
+                dataType: 'number',
+                interface: {
+                    name: 'pointRadius',
+                    path: 'options.pointRadius',
+                    type: AXPWidgetsCatalog.number,
+                    options: {
+                        placeholder: '1-10',
+                        minValue: 1,
+                        maxValue: 10,
+                    },
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'smoothLine',
+            title: 'Smooth Line',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: true,
+                dataType: 'boolean',
+                interface: {
+                    name: 'smoothLine',
+                    path: 'options.smoothLine',
+                    type: AXPWidgetsCatalog.toggle,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'fillArea',
+            title: 'Fill Area',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: false,
+                dataType: 'boolean',
+                interface: {
+                    name: 'fillArea',
+                    path: 'options.fillArea',
+                    type: AXPWidgetsCatalog.toggle,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'fillOpacity',
+            title: 'Fill Opacity',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 10,
+                dataType: 'number',
+                interface: {
+                    name: 'fillOpacity',
+                    path: 'options.fillOpacity',
+                    type: AXPWidgetsCatalog.number,
+                    options: {
+                        placeholder: '0-100',
+                        minValue: 0,
+                        maxValue: 100,
+                    },
+                },
+            },
+            visible: true,
+        },
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return lineChartWidget_component; }).then((c) => c.AXPLineChartWidgetViewComponent),
+        },
+    },
+    meta: {
+        dimensions: {
+            width: 5,
+            height: 6,
+            minWidth: 2,
+            minHeight: 2,
+            maxWidth: 6,
+            maxHeight: 7,
+        },
+    },
+};
+
 /**
  * Notification Widget Component
  * Displays notifications in a card with tabs
@@ -14530,7 +15218,7 @@ class AXPNotificationWidgetViewComponent extends AXPValueWidgetComponent {
         return Math.floor(diffMs / (1000 * 60 * 60 * 24));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: 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 }); }
+    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: ["width", "height", "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,
@@ -14689,7 +15377,7 @@ class AXPStickyNoteWidgetViewComponent extends AXPValueWidgetComponent {
                 provide: AXGridLayoutWidgetComponent,
                 useExisting: AXPStickyNoteWidgetViewComponent,
             },
-        ], viewQueries: [{ propertyName: "wysiwyg", first: true, predicate: ["wysiwyg"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"sticky-note-container ax-size-full ax-rounded-lg ax-flex ax-flex-col ax-p-4 ax-shadow-md ax-transition-all ax-duration-300 hover:ax-shadow-lg\"\n  [style.background-color]=\"bgColor()\"\n  [style.color]=\"color()\"\n  [class.ax-shadow-lg]=\"isEditing()\"\n  [class.ax-scale-[1.02]]=\"isEditing()\"\n  (dblclick)=\"activateEdit()\"\n>\n  <!-- Header with timestamp -->\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3\">\n    <div class=\"ax-text-xs ax-opacity-70 ax-font-medium ax-flex ax-items-center ax-gap-1\">\n      <i class=\"fa-regular fa-clock ax-text-[0.65rem]\"></i>\n      {{ date() | format : 'datetime' : 'dd MMM, YY HH:mm' | async }}\n    </div>\n  </div>\n\n  <!-- Content area -->\n  <div class=\"ax-flex-1 ax-overflow-auto\">\n    <ax-wysiwyg-container\n      #wysiwyg\n      [class]=\"\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 }); }
+        ], viewQueries: [{ propertyName: "wysiwyg", first: true, predicate: ["wysiwyg"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"sticky-note-container ax-size-full ax-rounded-lg ax-flex ax-flex-col ax-p-4 ax-shadow-md ax-transition-all ax-duration-300 hover:ax-shadow-lg\"\n  [style.background-color]=\"bgColor()\"\n  [style.color]=\"color()\"\n  [class.ax-shadow-lg]=\"isEditing()\"\n  [class.ax-scale-[1.02]]=\"isEditing()\"\n  (dblclick)=\"activateEdit()\"\n>\n  <!-- Header with timestamp -->\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3\">\n    <div class=\"ax-text-xs ax-opacity-70 ax-font-medium ax-flex ax-items-center ax-gap-1\">\n      <i class=\"fa-regular fa-clock ax-text-[0.65rem]\"></i>\n      {{ date() | format : 'datetime' : 'dd MMM, YY HH:mm' | async }}\n    </div>\n  </div>\n\n  <!-- Content area -->\n  <div class=\"ax-flex-1 ax-overflow-auto\">\n    <ax-wysiwyg-container\n      #wysiwyg\n      [class]=\"isEditing() ? 'ax-pointer-events-auto ax-cursor-text' : 'ax-pointer-events-none !ax-cursor-pointer'\"\n      class=\"ax-h-full\"\n      placeHolder=\"start writing with double click...\"\n      look=\"none\"\n      (onValueChanged)=\"valueChange($event)\"\n      [ngModel]=\"value()\"\n    >\n      <ax-wysiwyg-view class=\"!ax-size-full ax-border-b-0\"></ax-wysiwyg-view>\n    </ax-wysiwyg-container>\n  </div>\n\n  <!-- Footer with color selector and save button -->\n  @if (isEditing()) {\n  <div class=\"ax-absolute ax-bottom-2 ax-left-2 ax-right-2 ax-flex ax-flex-wrap ax-gap-1 ax-text-xs\">\n    <!-- Color selection bar when in edit mode -->\n    <div class=\"ax-flex ax-w-full ax-mt-2 ax-border ax-border-gray-200 ax-overflow-hidden ax-rounded-md\">\n      @for (preset of colorPresets; track preset) {\n      <div\n        class=\"ax-h-6 ax-flex-1 ax-cursor-pointer ax-transition-all ax-duration-200 ax-border-r ax-border-gray-200 last:ax-border-r-0 hover:ax-brightness-95\"\n        [style.background-color]=\"preset\"\n        [class.ax-ring-inset]=\"bgColor() === preset\"\n        [class.ax-ring-2]=\"bgColor() === preset\"\n        [class.ax-ring-primary]=\"bgColor() === preset\"\n        (click)=\"setColor(preset)\"\n      ></div>\n      }\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep ax-wysiwyg-view{color:#2e2e2e!important}\n"], dependencies: [{ kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: 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,
@@ -14709,7 +15397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                             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"] }]
+                    ], template: "<div\n  class=\"sticky-note-container ax-size-full ax-rounded-lg ax-flex ax-flex-col ax-p-4 ax-shadow-md ax-transition-all ax-duration-300 hover:ax-shadow-lg\"\n  [style.background-color]=\"bgColor()\"\n  [style.color]=\"color()\"\n  [class.ax-shadow-lg]=\"isEditing()\"\n  [class.ax-scale-[1.02]]=\"isEditing()\"\n  (dblclick)=\"activateEdit()\"\n>\n  <!-- Header with timestamp -->\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3\">\n    <div class=\"ax-text-xs ax-opacity-70 ax-font-medium ax-flex ax-items-center ax-gap-1\">\n      <i class=\"fa-regular fa-clock ax-text-[0.65rem]\"></i>\n      {{ date() | format : 'datetime' : 'dd MMM, YY HH:mm' | async }}\n    </div>\n  </div>\n\n  <!-- Content area -->\n  <div class=\"ax-flex-1 ax-overflow-auto\">\n    <ax-wysiwyg-container\n      #wysiwyg\n      [class]=\"isEditing() ? 'ax-pointer-events-auto ax-cursor-text' : 'ax-pointer-events-none !ax-cursor-pointer'\"\n      class=\"ax-h-full\"\n      placeHolder=\"start writing with double click...\"\n      look=\"none\"\n      (onValueChanged)=\"valueChange($event)\"\n      [ngModel]=\"value()\"\n    >\n      <ax-wysiwyg-view class=\"!ax-size-full ax-border-b-0\"></ax-wysiwyg-view>\n    </ax-wysiwyg-container>\n  </div>\n\n  <!-- Footer with color selector and save button -->\n  @if (isEditing()) {\n  <div class=\"ax-absolute ax-bottom-2 ax-left-2 ax-right-2 ax-flex ax-flex-wrap ax-gap-1 ax-text-xs\">\n    <!-- Color selection bar when in edit mode -->\n    <div class=\"ax-flex ax-w-full ax-mt-2 ax-border ax-border-gray-200 ax-overflow-hidden ax-rounded-md\">\n      @for (preset of colorPresets; track preset) {\n      <div\n        class=\"ax-h-6 ax-flex-1 ax-cursor-pointer ax-transition-all ax-duration-200 ax-border-r ax-border-gray-200 last:ax-border-r-0 hover:ax-brightness-95\"\n        [style.background-color]=\"preset\"\n        [class.ax-ring-inset]=\"bgColor() === preset\"\n        [class.ax-ring-2]=\"bgColor() === preset\"\n        [class.ax-ring-primary]=\"bgColor() === preset\"\n        (click)=\"setColor(preset)\"\n      ></div>\n      }\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep ax-wysiwyg-view{color:#2e2e2e!important}\n"] }]
         }], propDecorators: { handleClickOutside: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -15790,7 +16478,7 @@ class AXPWeatherWidgetViewComponent extends AXPValueWidgetComponent {
                 provide: AXPWeatherApiAbstract,
                 useClass: AXPWeatherApiService,
             },
-        ], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["containerElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Weather Widget Component Template -->\n<div class=\"axp-weather-container\" #containerElement>\n  <!-- Loading indicator -->\n  @if (isLoading()) {\n  <div class=\"axp-weather-loading-overlay\">\n    <div class=\"axp-weather-loading-spinner\">\n      <i class=\"fa-solid fa-spinner fa-spin\"></i>\n      <span>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 }); }
+        ], 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:.4rem}.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}}: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,
@@ -15799,7 +16487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                             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"] }]
+                    ], 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:.4rem}.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}}: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({
@@ -16050,49 +16738,6 @@ const AXPWeatherWidget = {
     },
 };
 
-/**
- * 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> {
@@ -17656,7 +18301,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,
@@ -19332,6 +19977,7 @@ class AXPWidgetsModule {
                     //charts
                     AXPDonutChartWidget,
                     AXPBarChartWidget,
+                    AXPLineChartWidget,
                     AXPGaugeChartWidget,
                     AXPStickyNoteWidget,
                     AXPClockCalendarWidget,
@@ -19412,6 +20058,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                                 //charts
                                 AXPDonutChartWidget,
                                 AXPBarChartWidget,
+                                AXPLineChartWidget,
                                 AXPGaugeChartWidget,
                                 AXPStickyNoteWidget,
                                 AXPClockCalendarWidget,
@@ -19438,5 +20085,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, AXPBarChartWidget, AXPBarChartWidgetViewComponent, AXPBetweenExpressionValidationWidget, AXPBetweenValidationWidgetEditComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetViewComponent, AXPCallbackValidationWidget, AXPCallbackValidationWidgetEditComponent, AXPChartBaseComponent, AXPChartColors, AXPChartTooltipComponent, 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, AXPLineChartWidget, AXPLineChartWidgetViewComponent, 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, 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, loadD3, numberDefaultProperty, numberMaxValueProperty, numberMinValueProperty, plainTextDefaultProperty };
 //# sourceMappingURL=acorex-platform-widgets.mjs.map