@acorex/platform 19.3.0-next.2 → 19.3.0-next.3

package/fesm2022/acorex-platform-widgets.mjs

@@ -10,7 +10,7 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i2 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import * as i1$1 from '@angular/common';
-import { CommonModule } 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 * as i1 from '@acorex/components/check-box';
@@ -44,7 +44,7 @@ import { AXNumberBoxModule } from '@acorex/components/number-box';
 import * as i3$3 from '@acorex/components/password-box';
 import { AXPasswordBoxModule } from '@acorex/components/password-box';
 import { AXPlatform } from '@acorex/core/platform';
-import { AXPHtmlUtils } from '@acorex/platform/core';
+import { AXPHtmlUtils, objectKeyValueTransforms } from '@acorex/platform/core';
 import * as i3$4 from '@acorex/components/toolbar';
 import { AXToolBarModule } from '@acorex/components/toolbar';
 import * as i2$3 from '@acorex/components/wysiwyg';
@@ -80,6 +80,10 @@ import { AXColorBoxModule } from '@acorex/components/color-box';
 import * as i1$9 from '@acorex/components/popover';
 import { AXPopoverComponent, AXPopoverModule } from '@acorex/components/popover';
 import { AXTagModule } from '@acorex/components/tag';
+import * as i5$3 from '@acorex/components/avatar';
+import { AXAvatarModule } from '@acorex/components/avatar';
+import * as i2$a from '@acorex/components/tabs';
+import { AXTabsModule } from '@acorex/components/tabs';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import * as i1$a from '@acorex/components/cron-job';
 import { AXCronJobModule } from '@acorex/components/cron-job';
@@ -7876,6 +7880,7 @@ const AXPMapBoxWidget = {
     description: 'Displays and interacts with maps',
     icon: 'fa-light fa-map-location',
     categories: AXP_WIDGETS_ADVANCE_CATEGORY,
+    groups: [AXPWidgetGroupEnum.FormElement, AXPWidgetGroupEnum.DashboardWidget],
     type: 'editor',
     properties: [
         AXP_NAME_PROPERTY,
@@ -12847,11 +12852,11 @@ class AXPClockCalendarWidgetViewComponent extends AXPValueWidgetComponent {
         return days[this.currentDate.getDay()];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPClockCalendarWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPClockCalendarWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-clock-calendar-container\">\n  <!-- Timezone indicator (only shown when not local) -->\n  @if (showTimezoneIndicator()) {\n  <div class=\"axp-clock-calendar-timezone-badge\"><i class=\"fa-solid fa-globe\"></i> {{ displayTimezone() }}</div>\n  }\n\n  <!-- Day of week display -->\n  @if (showDayOfWeek()) {\n  <div class=\"axp-clock-calendar-day-label\">{{ getDayOfWeek() }}</div>\n  }\n\n  <div class=\"axp-clock-calendar-content\">\n    <!-- Digital Clock Display -->\n    @if (showDigitalClock()) {\n    <div class=\"axp-clock-calendar-digital-clock\">\n      {{ currentTime | format : 'datetime' : timeFormat() | async }}\n    </div>\n    }\n\n    <!-- Analog Clock Display -->\n    @if (showAnalogClock()) {\n    <div class=\"axp-clock-calendar-analog-clock\">\n      <!-- Hour markers -->\n      @for (hour of clockHours; track hour) {\n      <div\n        class=\"axp-clock-calendar-hour-marker\"\n        [style.transform]=\"'rotate(' + hour * 30 + 'deg) translateY(-80px)'\"\n      ></div>\n      }\n\n      <!-- Clock Numbers -->\n      <div class=\"axp-clock-calendar-numbers-container\">\n        @for (hour of clockHourNumbers; track hour) {\n        <div\n          class=\"axp-clock-calendar-hour-number\"\n          [style.transform]=\"'rotate(' + hour.angle + 'deg) translateY(-70px)'\"\n        >\n          <span [style.transform]=\"'rotate(' + -hour.angle + 'deg)'\">{{ hour.number }}</span>\n        </div>\n        }\n      </div>\n\n      <!-- Clock Hands -->\n      <div class=\"axp-clock-calendar-hands-container\">\n        <div class=\"axp-clock-calendar-hour-hand\" [style.transform]=\"'rotate(' + hourRotation + 'deg)'\"></div>\n        <div class=\"axp-clock-calendar-minute-hand\" [style.transform]=\"'rotate(' + minuteRotation + 'deg)'\"></div>\n        @if (showSeconds()) {\n        <div class=\"axp-clock-calendar-second-hand\" [style.transform]=\"'rotate(' + secondRotation + 'deg)'\"></div>\n        }\n        <div class=\"axp-clock-calendar-center-dot\"></div>\n      </div>\n    </div>\n    }\n\n    <!-- Date Display -->\n    @if (showDate()) {\n    <div class=\"axp-clock-calendar-date-display\">\n      <i class=\"fa-regular fa-calendar\"></i>\n      {{ currentDate | format : 'datetime' : dateFormat() | async }}\n    </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.axp-clock-calendar-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:1rem;position:relative;overflow:hidden;box-shadow:var(--ax-shadow-sm);background-color:var(--ax-surface-color);color:var(--ax-text-color)}.axp-clock-calendar-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;width:100%;height:100%;position:relative}.axp-clock-calendar-timezone-badge{position:absolute;top:.5rem;right:.5rem;font-size:.75rem;padding:.25rem;border-radius:1rem;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-timezone-badge:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-timezone-badge{display:flex;align-items:center;gap:.25rem}.axp-clock-calendar-timezone-badge i{font-size:.75rem}.axp-clock-calendar-day-label{font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.05rem;margin-bottom:.25rem}.axp-clock-calendar-digital-clock{font-size:1.5rem;font-weight:500;letter-spacing:.05rem;font-family:monospace;padding:.5rem .75rem;border-radius:.25rem}.axp-clock-calendar-analog-clock{position:relative;border-radius:50%;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-analog-clock:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-analog-clock{display:flex;align-items:center;justify-content:center;background:var(--ax-surface-color);width:min(180px,100%);height:0;padding-bottom:min(180px,100%);margin:.5rem auto;min-width:120px;min-height:120px;box-shadow:var(--ax-shadow-sm)}.axp-clock-calendar-hands-container,.axp-clock-calendar-numbers-container{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%}.axp-clock-calendar-hour-marker{position:absolute;left:50%;top:50%;width:2px;height:4%;margin-left:-1px;border-radius:1px;background-color:var(--ax-text-muted);transform-origin:50% 0}.axp-clock-calendar-hour-number{position:absolute;left:50%;top:50%;transform-origin:50% 0;font-size:clamp(.7rem,2.5vw,.9rem);font-weight:600;color:var(--ax-text-color)}.axp-clock-calendar-hour-number span{display:block}.axp-clock-calendar-hour-hand{position:absolute;top:50%;left:50%;width:4px;height:25%;margin-left:-2px;background-color:rgba(23,23,23,.75)}.axp-clock-calendar-hour-hand:is(.ax-dark *){background-color:rgba(245,245,245,.75)}.axp-clock-calendar-hour-hand{transform-origin:50% 0;border-radius:3px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-minute-hand{position:absolute;top:50%;left:50%;width:3px;height:38%;margin-left:-1.5px;background-color:rgba(23,23,23,.5)}.axp-clock-calendar-minute-hand:is(.ax-dark *){background-color:rgba(245,245,245,.5)}.axp-clock-calendar-minute-hand{transform-origin:50% 0;border-radius:2px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-second-hand{position:absolute;top:50%;left:50%;width:2px;height:42%;margin-left:-1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-500),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-400),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand{transform-origin:50% 0;border-radius:1px;box-shadow:0 0 3px rgba(0,0,0,.2)}.axp-clock-calendar-center-dot{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;margin-top:-5px;margin-left:-5px;background-color:#d81159;border:2px solid var(--ax-surface-color);box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-date-display{display:flex;align-items:center;gap:.5rem;font-size:.85rem;padding:.25rem .6rem;border-radius:.25rem;background-color:var(--ax-surface-hover);color:var(--ax-text-color)}.axp-clock-calendar-date-display i{font-size:.85rem;opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i2$9.AXFormatPipe, name: "format" }, { kind: "ngmodule", type: AXTagModule }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPClockCalendarWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-clock-calendar-container\">\n  <!-- Timezone indicator (only shown when not local) -->\n  @if (showTimezoneIndicator()) {\n  <div class=\"axp-clock-calendar-timezone-badge\"><i class=\"fa-solid fa-globe\"></i> {{ displayTimezone() }}</div>\n  }\n\n  <!-- Day of week display -->\n  @if (showDayOfWeek()) {\n  <div class=\"axp-clock-calendar-day-label\">{{ getDayOfWeek() }}</div>\n  }\n\n  <div class=\"axp-clock-calendar-content\">\n    <!-- Digital Clock Display -->\n    @if (showDigitalClock()) {\n    <div class=\"axp-clock-calendar-digital-clock\">\n      {{ currentTime | format : 'datetime' : timeFormat() | async }}\n    </div>\n    }\n\n    <!-- Analog Clock Display -->\n    @if (showAnalogClock()) {\n    <div class=\"axp-clock-calendar-analog-clock\">\n      <!-- Hour markers -->\n      @for (hour of clockHours; track hour) {\n      <div\n        class=\"axp-clock-calendar-hour-marker\"\n        [style.transform]=\"'rotate(' + hour * 30 + 'deg) translateY(-80px)'\"\n      ></div>\n      }\n\n      <!-- Clock Numbers -->\n      <div class=\"axp-clock-calendar-numbers-container\">\n        @for (hour of clockHourNumbers; track hour) {\n        <div\n          class=\"axp-clock-calendar-hour-number\"\n          [style.transform]=\"'rotate(' + hour.angle + 'deg) translateY(-82px)'\"\n        >\n          <span [style.transform]=\"'rotate(' + -hour.angle + 'deg)'\">{{ hour.number }}</span>\n        </div>\n        }\n      </div>\n\n      <!-- Clock Hands -->\n      <div class=\"axp-clock-calendar-hands-container\">\n        <div class=\"axp-clock-calendar-hour-hand\" [style.transform]=\"'rotate(' + hourRotation + 'deg)'\"></div>\n        <div class=\"axp-clock-calendar-minute-hand\" [style.transform]=\"'rotate(' + minuteRotation + 'deg)'\"></div>\n        @if (showSeconds()) {\n        <div class=\"axp-clock-calendar-second-hand\" [style.transform]=\"'rotate(' + secondRotation + 'deg)'\"></div>\n        }\n        <div class=\"axp-clock-calendar-center-dot\"></div>\n      </div>\n    </div>\n    }\n\n    <!-- Date Display -->\n    @if (showDate()) {\n    <div class=\"axp-clock-calendar-date-display\">\n      <i class=\"fa-regular fa-calendar\"></i>\n      {{ currentDate | format : 'datetime' : dateFormat() | async }}\n    </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.axp-clock-calendar-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:1rem;position:relative;overflow:hidden;box-shadow:var(--ax-shadow-sm);background-color:var(--ax-surface-color);color:var(--ax-text-color)}.axp-clock-calendar-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;width:100%;height:100%;position:relative}.axp-clock-calendar-timezone-badge{position:absolute;top:.5rem;right:.5rem;font-size:.75rem;padding:.25rem;border-radius:1rem;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-timezone-badge:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-timezone-badge{display:flex;align-items:center;gap:.25rem}.axp-clock-calendar-timezone-badge i{font-size:.75rem}.axp-clock-calendar-day-label{font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.05rem;margin-bottom:.25rem}.axp-clock-calendar-digital-clock{font-size:1.5rem;font-weight:500;letter-spacing:.05rem;font-family:monospace;padding:.5rem .75rem;border-radius:.25rem}.axp-clock-calendar-analog-clock{position:relative;border-radius:50%;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-analog-clock:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-analog-clock{display:flex;align-items:center;justify-content:center;background:var(--ax-surface-color);width:min(180px,100%);height:0;padding-bottom:min(180px,100%);margin:.5rem auto;min-width:120px;min-height:120px;box-shadow:var(--ax-shadow-sm)}.axp-clock-calendar-hands-container,.axp-clock-calendar-numbers-container{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%}.axp-clock-calendar-hour-marker{position:absolute;left:50%;top:50%;width:2px;height:4%;margin-left:-1px;border-radius:1px;background-color:var(--ax-text-muted);transform-origin:50% 0}.axp-clock-calendar-hour-number{position:absolute;left:50%;top:50%;transform-origin:50% 0;font-size:clamp(.7rem,2.5vw,.9rem);font-weight:600;color:var(--ax-text-color)}.axp-clock-calendar-hour-number span{display:block}.axp-clock-calendar-hour-hand{position:absolute;top:50%;left:50%;width:4px;height:25%;margin-left:-2px;background-color:rgba(23,23,23,.75)}.axp-clock-calendar-hour-hand:is(.ax-dark *){background-color:rgba(245,245,245,.75)}.axp-clock-calendar-hour-hand{transform-origin:50% 0;border-radius:3px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-minute-hand{position:absolute;top:50%;left:50%;width:3px;height:38%;margin-left:-1.5px;background-color:rgba(23,23,23,.5)}.axp-clock-calendar-minute-hand:is(.ax-dark *){background-color:rgba(245,245,245,.5)}.axp-clock-calendar-minute-hand{transform-origin:50% 0;border-radius:2px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-second-hand{position:absolute;top:50%;left:50%;width:2px;height:42%;margin-left:-1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-500),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-400),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand{transform-origin:50% 0;border-radius:1px;box-shadow:0 0 3px rgba(0,0,0,.2)}.axp-clock-calendar-center-dot{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;margin-top:-5px;margin-left:-5px;background-color:#d81159;border:2px solid var(--ax-surface-color);box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-date-display{display:flex;align-items:center;gap:.5rem;font-size:.85rem;padding:.25rem .6rem;border-radius:.25rem;background-color:var(--ax-surface-hover);color:var(--ax-text-color)}.axp-clock-calendar-date-display i{font-size:.85rem;opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i2$9.AXFormatPipe, name: "format" }, { kind: "ngmodule", type: AXTagModule }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPClockCalendarWidgetViewComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, AXDateTimeModule, AXFormatModule, AXTagModule, AXDecoratorModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-clock-calendar-container\">\n  <!-- Timezone indicator (only shown when not local) -->\n  @if (showTimezoneIndicator()) {\n  <div class=\"axp-clock-calendar-timezone-badge\"><i class=\"fa-solid fa-globe\"></i> {{ displayTimezone() }}</div>\n  }\n\n  <!-- Day of week display -->\n  @if (showDayOfWeek()) {\n  <div class=\"axp-clock-calendar-day-label\">{{ getDayOfWeek() }}</div>\n  }\n\n  <div class=\"axp-clock-calendar-content\">\n    <!-- Digital Clock Display -->\n    @if (showDigitalClock()) {\n    <div class=\"axp-clock-calendar-digital-clock\">\n      {{ currentTime | format : 'datetime' : timeFormat() | async }}\n    </div>\n    }\n\n    <!-- Analog Clock Display -->\n    @if (showAnalogClock()) {\n    <div class=\"axp-clock-calendar-analog-clock\">\n      <!-- Hour markers -->\n      @for (hour of clockHours; track hour) {\n      <div\n        class=\"axp-clock-calendar-hour-marker\"\n        [style.transform]=\"'rotate(' + hour * 30 + 'deg) translateY(-80px)'\"\n      ></div>\n      }\n\n      <!-- Clock Numbers -->\n      <div class=\"axp-clock-calendar-numbers-container\">\n        @for (hour of clockHourNumbers; track hour) {\n        <div\n          class=\"axp-clock-calendar-hour-number\"\n          [style.transform]=\"'rotate(' + hour.angle + 'deg) translateY(-70px)'\"\n        >\n          <span [style.transform]=\"'rotate(' + -hour.angle + 'deg)'\">{{ hour.number }}</span>\n        </div>\n        }\n      </div>\n\n      <!-- Clock Hands -->\n      <div class=\"axp-clock-calendar-hands-container\">\n        <div class=\"axp-clock-calendar-hour-hand\" [style.transform]=\"'rotate(' + hourRotation + 'deg)'\"></div>\n        <div class=\"axp-clock-calendar-minute-hand\" [style.transform]=\"'rotate(' + minuteRotation + 'deg)'\"></div>\n        @if (showSeconds()) {\n        <div class=\"axp-clock-calendar-second-hand\" [style.transform]=\"'rotate(' + secondRotation + 'deg)'\"></div>\n        }\n        <div class=\"axp-clock-calendar-center-dot\"></div>\n      </div>\n    </div>\n    }\n\n    <!-- Date Display -->\n    @if (showDate()) {\n    <div class=\"axp-clock-calendar-date-display\">\n      <i class=\"fa-regular fa-calendar\"></i>\n      {{ currentDate | format : 'datetime' : dateFormat() | async }}\n    </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.axp-clock-calendar-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:1rem;position:relative;overflow:hidden;box-shadow:var(--ax-shadow-sm);background-color:var(--ax-surface-color);color:var(--ax-text-color)}.axp-clock-calendar-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;width:100%;height:100%;position:relative}.axp-clock-calendar-timezone-badge{position:absolute;top:.5rem;right:.5rem;font-size:.75rem;padding:.25rem;border-radius:1rem;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-timezone-badge:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-timezone-badge{display:flex;align-items:center;gap:.25rem}.axp-clock-calendar-timezone-badge i{font-size:.75rem}.axp-clock-calendar-day-label{font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.05rem;margin-bottom:.25rem}.axp-clock-calendar-digital-clock{font-size:1.5rem;font-weight:500;letter-spacing:.05rem;font-family:monospace;padding:.5rem .75rem;border-radius:.25rem}.axp-clock-calendar-analog-clock{position:relative;border-radius:50%;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-analog-clock:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-analog-clock{display:flex;align-items:center;justify-content:center;background:var(--ax-surface-color);width:min(180px,100%);height:0;padding-bottom:min(180px,100%);margin:.5rem auto;min-width:120px;min-height:120px;box-shadow:var(--ax-shadow-sm)}.axp-clock-calendar-hands-container,.axp-clock-calendar-numbers-container{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%}.axp-clock-calendar-hour-marker{position:absolute;left:50%;top:50%;width:2px;height:4%;margin-left:-1px;border-radius:1px;background-color:var(--ax-text-muted);transform-origin:50% 0}.axp-clock-calendar-hour-number{position:absolute;left:50%;top:50%;transform-origin:50% 0;font-size:clamp(.7rem,2.5vw,.9rem);font-weight:600;color:var(--ax-text-color)}.axp-clock-calendar-hour-number span{display:block}.axp-clock-calendar-hour-hand{position:absolute;top:50%;left:50%;width:4px;height:25%;margin-left:-2px;background-color:rgba(23,23,23,.75)}.axp-clock-calendar-hour-hand:is(.ax-dark *){background-color:rgba(245,245,245,.75)}.axp-clock-calendar-hour-hand{transform-origin:50% 0;border-radius:3px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-minute-hand{position:absolute;top:50%;left:50%;width:3px;height:38%;margin-left:-1.5px;background-color:rgba(23,23,23,.5)}.axp-clock-calendar-minute-hand:is(.ax-dark *){background-color:rgba(245,245,245,.5)}.axp-clock-calendar-minute-hand{transform-origin:50% 0;border-radius:2px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-second-hand{position:absolute;top:50%;left:50%;width:2px;height:42%;margin-left:-1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-500),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-400),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand{transform-origin:50% 0;border-radius:1px;box-shadow:0 0 3px rgba(0,0,0,.2)}.axp-clock-calendar-center-dot{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;margin-top:-5px;margin-left:-5px;background-color:#d81159;border:2px solid var(--ax-surface-color);box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-date-display{display:flex;align-items:center;gap:.5rem;font-size:.85rem;padding:.25rem .6rem;border-radius:.25rem;background-color:var(--ax-surface-hover);color:var(--ax-text-color)}.axp-clock-calendar-date-display i{font-size:.85rem;opacity:.7}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, AXDateTimeModule, AXFormatModule, AXTagModule, AXDecoratorModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-clock-calendar-container\">\n  <!-- Timezone indicator (only shown when not local) -->\n  @if (showTimezoneIndicator()) {\n  <div class=\"axp-clock-calendar-timezone-badge\"><i class=\"fa-solid fa-globe\"></i> {{ displayTimezone() }}</div>\n  }\n\n  <!-- Day of week display -->\n  @if (showDayOfWeek()) {\n  <div class=\"axp-clock-calendar-day-label\">{{ getDayOfWeek() }}</div>\n  }\n\n  <div class=\"axp-clock-calendar-content\">\n    <!-- Digital Clock Display -->\n    @if (showDigitalClock()) {\n    <div class=\"axp-clock-calendar-digital-clock\">\n      {{ currentTime | format : 'datetime' : timeFormat() | async }}\n    </div>\n    }\n\n    <!-- Analog Clock Display -->\n    @if (showAnalogClock()) {\n    <div class=\"axp-clock-calendar-analog-clock\">\n      <!-- Hour markers -->\n      @for (hour of clockHours; track hour) {\n      <div\n        class=\"axp-clock-calendar-hour-marker\"\n        [style.transform]=\"'rotate(' + hour * 30 + 'deg) translateY(-80px)'\"\n      ></div>\n      }\n\n      <!-- Clock Numbers -->\n      <div class=\"axp-clock-calendar-numbers-container\">\n        @for (hour of clockHourNumbers; track hour) {\n        <div\n          class=\"axp-clock-calendar-hour-number\"\n          [style.transform]=\"'rotate(' + hour.angle + 'deg) translateY(-82px)'\"\n        >\n          <span [style.transform]=\"'rotate(' + -hour.angle + 'deg)'\">{{ hour.number }}</span>\n        </div>\n        }\n      </div>\n\n      <!-- Clock Hands -->\n      <div class=\"axp-clock-calendar-hands-container\">\n        <div class=\"axp-clock-calendar-hour-hand\" [style.transform]=\"'rotate(' + hourRotation + 'deg)'\"></div>\n        <div class=\"axp-clock-calendar-minute-hand\" [style.transform]=\"'rotate(' + minuteRotation + 'deg)'\"></div>\n        @if (showSeconds()) {\n        <div class=\"axp-clock-calendar-second-hand\" [style.transform]=\"'rotate(' + secondRotation + 'deg)'\"></div>\n        }\n        <div class=\"axp-clock-calendar-center-dot\"></div>\n      </div>\n    </div>\n    }\n\n    <!-- Date Display -->\n    @if (showDate()) {\n    <div class=\"axp-clock-calendar-date-display\">\n      <i class=\"fa-regular fa-calendar\"></i>\n      {{ currentDate | format : 'datetime' : dateFormat() | async }}\n    </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.axp-clock-calendar-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:1rem;position:relative;overflow:hidden;box-shadow:var(--ax-shadow-sm);background-color:var(--ax-surface-color);color:var(--ax-text-color)}.axp-clock-calendar-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;width:100%;height:100%;position:relative}.axp-clock-calendar-timezone-badge{position:absolute;top:.5rem;right:.5rem;font-size:.75rem;padding:.25rem;border-radius:1rem;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-timezone-badge:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-timezone-badge{display:flex;align-items:center;gap:.25rem}.axp-clock-calendar-timezone-badge i{font-size:.75rem}.axp-clock-calendar-day-label{font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.05rem;margin-bottom:.25rem}.axp-clock-calendar-digital-clock{font-size:1.5rem;font-weight:500;letter-spacing:.05rem;font-family:monospace;padding:.5rem .75rem;border-radius:.25rem}.axp-clock-calendar-analog-clock{position:relative;border-radius:50%;border-width:1px;border-color:rgba(23,23,23,.5)}.axp-clock-calendar-analog-clock:is(.ax-dark *){border-color:rgba(245,245,245,.5)}.axp-clock-calendar-analog-clock{display:flex;align-items:center;justify-content:center;background:var(--ax-surface-color);width:min(180px,100%);height:0;padding-bottom:min(180px,100%);margin:.5rem auto;min-width:120px;min-height:120px;box-shadow:var(--ax-shadow-sm)}.axp-clock-calendar-hands-container,.axp-clock-calendar-numbers-container{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%}.axp-clock-calendar-hour-marker{position:absolute;left:50%;top:50%;width:2px;height:4%;margin-left:-1px;border-radius:1px;background-color:var(--ax-text-muted);transform-origin:50% 0}.axp-clock-calendar-hour-number{position:absolute;left:50%;top:50%;transform-origin:50% 0;font-size:clamp(.7rem,2.5vw,.9rem);font-weight:600;color:var(--ax-text-color)}.axp-clock-calendar-hour-number span{display:block}.axp-clock-calendar-hour-hand{position:absolute;top:50%;left:50%;width:4px;height:25%;margin-left:-2px;background-color:rgba(23,23,23,.75)}.axp-clock-calendar-hour-hand:is(.ax-dark *){background-color:rgba(245,245,245,.75)}.axp-clock-calendar-hour-hand{transform-origin:50% 0;border-radius:3px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-minute-hand{position:absolute;top:50%;left:50%;width:3px;height:38%;margin-left:-1.5px;background-color:rgba(23,23,23,.5)}.axp-clock-calendar-minute-hand:is(.ax-dark *){background-color:rgba(245,245,245,.5)}.axp-clock-calendar-minute-hand{transform-origin:50% 0;border-radius:2px;box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-second-hand{position:absolute;top:50%;left:50%;width:2px;height:42%;margin-left:-1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-500),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-400),var(--tw-bg-opacity, 1))}.axp-clock-calendar-second-hand{transform-origin:50% 0;border-radius:1px;box-shadow:0 0 3px rgba(0,0,0,.2)}.axp-clock-calendar-center-dot{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;margin-top:-5px;margin-left:-5px;background-color:#d81159;border:2px solid var(--ax-surface-color);box-shadow:0 0 4px rgba(0,0,0,.3)}.axp-clock-calendar-date-display{display:flex;align-items:center;gap:.5rem;font-size:.85rem;padding:.25rem .6rem;border-radius:.25rem;background-color:var(--ax-surface-hover);color:var(--ax-text-color)}.axp-clock-calendar-date-display i{font-size:.85rem;opacity:.7}\n"] }]
         }] });
 
 var clockCalendarWidget_component = /*#__PURE__*/Object.freeze({
@@ -14140,14 +14145,248 @@ const AXPGaugeChartWidget = {
     },
 };
 
+/**
+ * Notification Widget Component
+ * Displays notifications in a card with tabs
+ */
+class AXPNotificationWidgetViewComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        // Outputs
+        this.notificationClick = output();
+        this.markAsRead = output();
+        // Dependencies
+        this.cdr = inject(ChangeDetectorRef);
+        this.datePipe = inject(DatePipe);
+        // State
+        this.activeTab = signal('new');
+        // Configuration
+        this.maxItems = computed(() => this.options()?.maxItems ?? 10);
+        this.showAvatar = computed(() => this.options()?.showAvatar ?? true);
+        this.showDate = computed(() => this.options()?.showDate ?? true);
+        // Computed data
+        this.notificationItems = computed(() => {
+            const value = this.getValue();
+            if (!value?.data?.length)
+                return [];
+            // Filter by active tab
+            const filtered = this.activeTab() === 'new' ? value.data.filter((n) => !n.readAt) : value.data;
+            return filtered.slice(0, this.maxItems());
+        });
+    }
+    /**
+     * Get the count of new messages for the badge
+     */
+    getNewMessageCount() {
+        const value = this.getValue();
+        if (!value?.data?.length)
+            return 0;
+        return value.data.filter((n) => !n.readAt).length;
+    }
+    /**
+     * Handle tab change event from ax-tabs component
+     * @param index The index of the tab that was activated
+     */
+    handleTabChange(data) {
+        const index = data.index;
+        // Map index to tab name: 0 = 'new', 1 = 'all'
+        const tabName = index === 0 ? 'new' : 'all';
+        this.onTabChange(tabName);
+    }
+    /**
+     * Mark all notifications as read
+     */
+    markAllAsRead() {
+        const value = this.getValue();
+        if (!value?.data?.length)
+            return;
+        const now = new Date();
+        const updatedNotifications = value.data.map((n) => {
+            if (n.readAt)
+                return n;
+            return { ...n, readAt: now };
+        });
+        this.setValue({
+            ...value,
+            data: updatedNotifications,
+        });
+        this.cdr.detectChanges();
+    }
+    /**
+     * Change the active tab
+     */
+    onTabChange(tabName) {
+        this.activeTab.set(tabName);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Handle notification click event
+     */
+    onNotificationClick(notification) {
+        this.markAsReadIfNeeded(notification);
+        this.notificationClick.emit(notification);
+    }
+    /**
+     * Format the timestamp in a user-friendly way
+     */
+    formatTime(date) {
+        if (!date)
+            return '';
+        const dateObj = typeof date === 'string' ? new Date(date) : date;
+        const diffDays = this.getDaysDifference(dateObj);
+        // Format based on how recent the date is
+        if (diffDays === 0)
+            return this.datePipe.transform(dateObj, 'h:mm a') || ''; // Today
+        if (diffDays === 1)
+            return 'Yesterday';
+        if (diffDays < 7)
+            return this.datePipe.transform(dateObj, 'EEE') || ''; // Day of week
+        return this.datePipe.transform(dateObj, 'MM/dd/yyyy') || ''; // Older date
+    }
+    /**
+     * Mark notification as read if needed
+     */
+    markAsReadIfNeeded(notification) {
+        // Only mark as read if not already read
+        if (notification.readAt)
+            return;
+        const updatedNotification = {
+            ...notification,
+            readAt: new Date(),
+        };
+        // Update the model
+        const value = this.getValue();
+        if (!value?.data)
+            return;
+        const updatedNotifications = value.data.map((n) => (n.id === notification.id ? updatedNotification : n));
+        this.setValue({
+            ...value,
+            data: updatedNotifications,
+        });
+        // Notify about the change
+        this.markAsRead.emit(updatedNotification);
+    }
+    /**
+     * Calculate days difference from now
+     */
+    getDaysDifference(date) {
+        const now = new Date();
+        const diffMs = now.getTime() - date.getTime();
+        return Math.floor(diffMs / (1000 * 60 * 60 * 24));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPNotificationWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPNotificationWidgetViewComponent, isStandalone: true, selector: "ng-component", outputs: { notificationClick: "notificationClick", markAsRead: "markAsRead" }, providers: [DatePipe], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-p-4 ax-size-full\">\n  <ax-tabs\n    class=\"ax-bg-light-start ax-border-b ax-border-default\"\n    [fitParent]=\"true\"\n    location=\"bottom\"\n    (onActiveTabChanged)=\"handleTabChange($event)\"\n  >\n    <ax-tab-item [text]=\"('widget.notification.new' | translate | async) ?? 'New'\" class=\"ax-font-medium\">\n      <ax-suffix>\n        @if (getNewMessageCount() > 0) {\n        <ax-badge color=\"primary\" [text]=\"getNewMessageCount().toString()\" size=\"sm\" class=\"ax-ml-1\"></ax-badge>\n        }\n      </ax-suffix>\n    </ax-tab-item>\n    <ax-tab-item [text]=\"('widget.notification.all' | translate | async) ?? 'All'\" class=\"ax-font-medium\"></ax-tab-item>\n  </ax-tabs>\n  <div class=\"ax-space-y-4 ax-mt-4 ax-px-2\">\n    @for (item of notificationItems(); track item.id) {\n    <ng-container [ngTemplateOutlet]=\"chatItemTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: item }\">\n    </ng-container>\n    } @empty {\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-12 ax-px-4 ax-text-gray-400\">\n      <ax-icon class=\"ax-text-4xl ax-mb-3 ax-text-gray-300\">\n        <i class=\"fa-light fa-bell-slash\"></i>\n      </ax-icon>\n      <p class=\"ax-text-center\">{{ 'widget.notification.noNotifications' | translate | async }}</p>\n    </div>\n    }\n  </div>\n</div>\n\n<ng-template #chatItemTemplateRef let-data>\n  <div class=\"ax-flex ax-gap-3\">\n    @if(showAvatar()){\n    <div class=\"ax-rounded-full ax-size-10\">\n      <ax-avatar shape=\"rounded\" class=\"ax-shrink-0\" [size]=\"40\">\n        @if(data.user?.image){\n        <ax-image\n          [src]=\"data.user.image\"\n          [alt]=\"data.user?.name || ('widget.notification.user' | translate | async)\"\n        ></ax-image>\n        } @else {\n        <ax-icon>\n          <i class=\"fa-light fa-user\"></i>\n        </ax-icon>\n        }\n      </ax-avatar>\n    </div>\n    }\n    <div class=\"ax-overflow-hidden ax-grow ax-text-start\">\n      <h6 class=\"ax-pb-2 ax-font-semibold ax-truncate\">{{ data.user?.name || data.title }}</h6>\n      <p class=\"ax-text-xs ax-truncate\">{{ data.body }}</p>\n    </div>\n    @if(showDate()){\n    <div class=\"ax-text-xs ax-shrink-0\">\n      <span>\n        {{ formatTime(data.createdAt) }}\n      </span>\n    </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2$a.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$a.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$3.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$7.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPNotificationWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        CommonModule,
+                        AXTabsModule,
+                        AXDecoratorModule,
+                        AXButtonModule,
+                        AXBadgeModule,
+                        AXAvatarModule,
+                        AXImageModule,
+                        AXTranslationModule,
+                    ], providers: [DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-p-4 ax-size-full\">\n  <ax-tabs\n    class=\"ax-bg-light-start ax-border-b ax-border-default\"\n    [fitParent]=\"true\"\n    location=\"bottom\"\n    (onActiveTabChanged)=\"handleTabChange($event)\"\n  >\n    <ax-tab-item [text]=\"('widget.notification.new' | translate | async) ?? 'New'\" class=\"ax-font-medium\">\n      <ax-suffix>\n        @if (getNewMessageCount() > 0) {\n        <ax-badge color=\"primary\" [text]=\"getNewMessageCount().toString()\" size=\"sm\" class=\"ax-ml-1\"></ax-badge>\n        }\n      </ax-suffix>\n    </ax-tab-item>\n    <ax-tab-item [text]=\"('widget.notification.all' | translate | async) ?? 'All'\" class=\"ax-font-medium\"></ax-tab-item>\n  </ax-tabs>\n  <div class=\"ax-space-y-4 ax-mt-4 ax-px-2\">\n    @for (item of notificationItems(); track item.id) {\n    <ng-container [ngTemplateOutlet]=\"chatItemTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: item }\">\n    </ng-container>\n    } @empty {\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-12 ax-px-4 ax-text-gray-400\">\n      <ax-icon class=\"ax-text-4xl ax-mb-3 ax-text-gray-300\">\n        <i class=\"fa-light fa-bell-slash\"></i>\n      </ax-icon>\n      <p class=\"ax-text-center\">{{ 'widget.notification.noNotifications' | translate | async }}</p>\n    </div>\n    }\n  </div>\n</div>\n\n<ng-template #chatItemTemplateRef let-data>\n  <div class=\"ax-flex ax-gap-3\">\n    @if(showAvatar()){\n    <div class=\"ax-rounded-full ax-size-10\">\n      <ax-avatar shape=\"rounded\" class=\"ax-shrink-0\" [size]=\"40\">\n        @if(data.user?.image){\n        <ax-image\n          [src]=\"data.user.image\"\n          [alt]=\"data.user?.name || ('widget.notification.user' | translate | async)\"\n        ></ax-image>\n        } @else {\n        <ax-icon>\n          <i class=\"fa-light fa-user\"></i>\n        </ax-icon>\n        }\n      </ax-avatar>\n    </div>\n    }\n    <div class=\"ax-overflow-hidden ax-grow ax-text-start\">\n      <h6 class=\"ax-pb-2 ax-font-semibold ax-truncate\">{{ data.user?.name || data.title }}</h6>\n      <p class=\"ax-text-xs ax-truncate\">{{ data.body }}</p>\n    </div>\n    @if(showDate()){\n    <div class=\"ax-text-xs ax-shrink-0\">\n      <span>\n        {{ formatTime(data.createdAt) }}\n      </span>\n    </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
+        }] });
+
+var notificationWidget_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPNotificationWidgetViewComponent: AXPNotificationWidgetViewComponent
+});
+
+/**
+ * Configuration for the Notification Widget
+ */
+const AXPNotificationWidget = {
+    name: 'notification',
+    title: 'Notification Widget',
+    categories: [AXP_WIDGETS_UTILITY_CATEGORY],
+    groups: [AXPWidgetGroupEnum.DashboardWidget],
+    type: 'dashboard',
+    description: 'Displays notifications in a widget format',
+    icon: 'fa-regular fa-bell',
+    properties: [
+        cloneProperty(AXP_DATA_PATH_PROPERTY, { visible: false }),
+        {
+            name: 'maxItems',
+            title: 'Max Items',
+            description: 'Maximum number of notification items to display',
+            group: AXP_STYLING_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 10,
+                dataType: 'number',
+                interface: {
+                    name: 'maxItems',
+                    path: 'options.maxItems',
+                    type: AXPWidgetsCatalog.number,
+                    options: {
+                        minValue: 1,
+                        maxValue: 100,
+                    },
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'showAvatar',
+            title: 'Show Avatar',
+            description: 'Whether to show avatars in notifications',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: true,
+                dataType: 'boolean',
+                interface: {
+                    name: 'showAvatar',
+                    path: 'options.showAvatar',
+                    type: AXPWidgetsCatalog.toggle,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'showDate',
+            title: 'Show Date',
+            description: 'Whether to show date in notifications',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: true,
+                dataType: 'boolean',
+                interface: {
+                    name: 'showDate',
+                    path: 'options.showDate',
+                    type: AXPWidgetsCatalog.toggle,
+                },
+            },
+            visible: true,
+        },
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return notificationWidget_component; }).then((c) => c.AXPNotificationWidgetViewComponent),
+        },
+    },
+    meta: {
+        dimensions: {
+            width: 3,
+            height: 5,
+            minWidth: 2,
+            minHeight: 4,
+            maxWidth: 4,
+            maxHeight: 7,
+        },
+    },
+};
+
 class AXPStickyNoteWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         this.isEditing = signal(false);
         this.wysiwyg = viewChild('wysiwyg');
-        this.date = new Date();
-        this.value = linkedSignal(() => this.getValue());
-        this.bgColor = linkedSignal(() => this.options()?.backgroundColor ?? '#FFF8B8');
+        this.value = computed(() => this.getValue());
+        this.date = computed(() => this.options()?.date ?? new Date());
+        this.bgColor = computed(() => this.options()?.backgroundColor ?? '#FFF8B8');
         this.color = signal('#333333');
         this.el = inject(ElementRef);
         // Modern color palette with pastel and vibrant options
@@ -14186,7 +14425,6 @@ class AXPStickyNoteWidgetViewComponent extends AXPValueWidgetComponent {
     }
     valueChange(event) {
         if (event.isUserInteraction) {
-            this.value.set(event.value);
             this.setValue(event.value);
         }
     }
@@ -14196,7 +14434,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-cursor-pointer 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 ax-p-1'\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{cursor:default;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}: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]=\"\n        isEditing()\n          ? 'ax-pointer-events-auto ax-cursor-text ax-ring-2 ax-ring-black/5 ax-rounded-md'\n          : 'ax-pointer-events-none !ax-cursor-pointer'\n      \"\n      class=\"ax-h-full\"\n      placeHolder=\"start writing with double click...\"\n      look=\"none\"\n      (onValueChanged)=\"valueChange($event)\"\n      [ngModel]=\"value()\"\n    >\n      <ax-wysiwyg-view class=\"!ax-size-full ax-border-b-0\"></ax-wysiwyg-view>\n    </ax-wysiwyg-container>\n  </div>\n\n  <!-- Footer with color selector and save button -->\n  @if (isEditing()) {\n  <div class=\"ax-absolute ax-bottom-2 ax-left-2 ax-right-2 ax-flex ax-flex-wrap ax-gap-1 ax-text-xs\">\n    <!-- Color selection bar when in edit mode -->\n    <div class=\"ax-flex ax-w-full ax-mt-2 ax-border ax-border-gray-200 ax-overflow-hidden ax-rounded-md\">\n      @for (preset of colorPresets; track preset) {\n      <div\n        class=\"ax-h-6 ax-flex-1 ax-cursor-pointer ax-transition-all ax-duration-200 ax-border-r ax-border-gray-200 last:ax-border-r-0 hover:ax-brightness-95\"\n        [style.background-color]=\"preset\"\n        [class.ax-ring-inset]=\"bgColor() === preset\"\n        [class.ax-ring-2]=\"bgColor() === preset\"\n        [class.ax-ring-primary]=\"bgColor() === preset\"\n        (click)=\"setColor(preset)\"\n      ></div>\n      }\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host .sticky-note-container{transition:all .2s ease-in-out}:host :host ::ng-deep ax-wysiwyg-view{color:inherit!important}:host :host ::ng-deep ax-wysiwyg-view .ql-editor{padding:0!important;font-size:.95rem;line-height:1.5;color:#2e2e2e}:host :host ::ng-deep ax-wysiwyg-view .ql-editor:before{color:inherit!important;opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i2$3.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i2$3.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i2$9.AXFormatPipe, name: "format" }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXColorBoxModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPStickyNoteWidgetViewComponent, decorators: [{
             type: Component,
@@ -14216,7 +14454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                             provide: AXGridLayoutWidgetComponent,
                             useExisting: AXPStickyNoteWidgetViewComponent,
                         },
-                    ], template: "<div\n  class=\"sticky-note-container ax-cursor-pointer 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 ax-p-1'\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{cursor:default;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}: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]=\"\n        isEditing()\n          ? 'ax-pointer-events-auto ax-cursor-text ax-ring-2 ax-ring-black/5 ax-rounded-md'\n          : 'ax-pointer-events-none !ax-cursor-pointer'\n      \"\n      class=\"ax-h-full\"\n      placeHolder=\"start writing with double click...\"\n      look=\"none\"\n      (onValueChanged)=\"valueChange($event)\"\n      [ngModel]=\"value()\"\n    >\n      <ax-wysiwyg-view class=\"!ax-size-full ax-border-b-0\"></ax-wysiwyg-view>\n    </ax-wysiwyg-container>\n  </div>\n\n  <!-- Footer with color selector and save button -->\n  @if (isEditing()) {\n  <div class=\"ax-absolute ax-bottom-2 ax-left-2 ax-right-2 ax-flex ax-flex-wrap ax-gap-1 ax-text-xs\">\n    <!-- Color selection bar when in edit mode -->\n    <div class=\"ax-flex ax-w-full ax-mt-2 ax-border ax-border-gray-200 ax-overflow-hidden ax-rounded-md\">\n      @for (preset of colorPresets; track preset) {\n      <div\n        class=\"ax-h-6 ax-flex-1 ax-cursor-pointer ax-transition-all ax-duration-200 ax-border-r ax-border-gray-200 last:ax-border-r-0 hover:ax-brightness-95\"\n        [style.background-color]=\"preset\"\n        [class.ax-ring-inset]=\"bgColor() === preset\"\n        [class.ax-ring-2]=\"bgColor() === preset\"\n        [class.ax-ring-primary]=\"bgColor() === preset\"\n        (click)=\"setColor(preset)\"\n      ></div>\n      }\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host .sticky-note-container{transition:all .2s ease-in-out}:host :host ::ng-deep ax-wysiwyg-view{color:inherit!important}:host :host ::ng-deep ax-wysiwyg-view .ql-editor{padding:0!important;font-size:.95rem;line-height:1.5;color:#2e2e2e}:host :host ::ng-deep ax-wysiwyg-view .ql-editor:before{color:inherit!important;opacity:.7}\n"] }]
         }], propDecorators: { handleClickOutside: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -14252,6 +14490,274 @@ const AXPStickyNoteWidget = {
     },
 };
 
+/**
+ * Task List Widget Component
+ * Displays a list of tasks with checkboxes and filtering options
+ */
+class AXPTaskListWidgetViewComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        // Outputs
+        this.taskClick = output();
+        this.taskCompleted = output();
+        // Dependencies
+        this.cdr = inject(ChangeDetectorRef);
+        this.datePipe = inject(DatePipe);
+        // Configuration options
+        this.maxItems = computed(() => this.options()?.maxItems ?? 10);
+        this.showDate = computed(() => this.options()?.showDate ?? true);
+        this.showAssignee = computed(() => this.options()?.showAssignee ?? true);
+        this.showPriority = computed(() => this.options()?.showPriority ?? true);
+        this.allowMarkComplete = computed(() => this.options()?.allowMarkComplete ?? true);
+        this.showCategories = computed(() => this.options()?.groupByCategory ?? true);
+        // Data computed properties
+        this.taskItems = computed(() => {
+            const value = this.getValue();
+            if (!value?.data?.length)
+                return [];
+            return value.data.slice(0, this.maxItems());
+        });
+    }
+    // Task counting methods
+    getPendingTaskCount() {
+        return this.getFilteredTasks((task) => !task.completed).length;
+    }
+    getCompletedTaskCount() {
+        return this.getFilteredTasks((task) => task.completed).length;
+    }
+    // Category-related methods
+    hasCategories() {
+        return this.taskItems().some((task) => !!task.category);
+    }
+    getCategories() {
+        const tasks = this.taskItems();
+        const categories = new Set();
+        let hasUncategorized = false;
+        tasks.forEach((task) => {
+            if (task.category) {
+                categories.add(task.category);
+            }
+            else {
+                hasUncategorized = true;
+            }
+        });
+        const result = Array.from(categories);
+        if (hasUncategorized) {
+            result.push('Uncategorized');
+        }
+        return result;
+    }
+    getTasksByCategory(category) {
+        const tasks = this.taskItems();
+        if (category === 'Uncategorized') {
+            return tasks.filter((task) => !task.category);
+        }
+        return tasks.filter((task) => task.category === category);
+    }
+    getCategoryTaskCount(category) {
+        return this.getTasksByCategory(category).filter((task) => !task.completed).length;
+    }
+    // Event handlers
+    onTaskClick(task) {
+        this.taskClick.emit(task);
+    }
+    onTaskCompletionChange(task, isCompleted) {
+        const updatedTask = { ...task, completed: isCompleted };
+        const value = this.getValue();
+        if (!value?.data)
+            return;
+        const updatedTasks = value.data.map((t) => (t.id === task.id ? updatedTask : t));
+        this.setValue({ ...value, data: updatedTasks });
+        this.taskCompleted.emit(updatedTask);
+        this.cdr.detectChanges();
+    }
+    // Formatting and utility methods
+    formatDueDate(date) {
+        if (!date)
+            return '';
+        const dateObj = typeof date === 'string' ? new Date(date) : date;
+        const diffDays = this.getDaysDifference(dateObj);
+        if (diffDays < 0)
+            return 'Overdue!';
+        if (diffDays === 0)
+            return 'Today';
+        if (diffDays === 1)
+            return 'Tomorrow';
+        if (diffDays < 7)
+            return this.datePipe.transform(dateObj, 'EEE') || '';
+        return this.datePipe.transform(dateObj, 'MM/dd/yyyy') || '';
+    }
+    getPriorityColor(priority) {
+        if (!priority)
+            return '';
+        const priorityColors = {
+            high: 'danger',
+            medium: 'warning',
+            low: 'success',
+        };
+        return priorityColors[priority] || '';
+    }
+    // Helper methods
+    getFilteredTasks(filterFn) {
+        const value = this.getValue();
+        if (!value?.data?.length)
+            return [];
+        return value.data.filter(filterFn);
+    }
+    getDaysDifference(date) {
+        const now = new Date();
+        now.setHours(0, 0, 0, 0);
+        const targetDate = new Date(date);
+        targetDate.setHours(0, 0, 0, 0);
+        const diffMs = targetDate.getTime() - now.getTime();
+        return Math.floor(diffMs / (1000 * 60 * 60 * 24));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTaskListWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPTaskListWidgetViewComponent, isStandalone: true, selector: "ng-component", outputs: { taskClick: "taskClick", taskCompleted: "taskCompleted" }, providers: [DatePipe], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-size-full ax-p-4\">\n  <!-- Header -->\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3\">\n    <h3 class=\"ax-text-lg ax-font-semibold\">{{ 'widget.tasklist.title' | translate | async }}</h3>\n    <div class=\"ax-flex ax-gap-2\">\n      @if(getPendingTaskCount() > 0){\n      <ax-badge\n        [text]=\"getPendingTaskCount() + ' ' + ('widget.tasklist.pending' | translate | async)\"\n        [color]=\"'warning'\"\n        size=\"sm\"\n        class=\"ax-ml-1\"\n      >\n      </ax-badge>\n      } @if(getCompletedTaskCount() > 0){\n      <ax-badge\n        [text]=\"getCompletedTaskCount() + ' ' + ('widget.tasklist.completed' | translate | async)\"\n        [color]=\"'success'\"\n        size=\"sm\"\n        class=\"ax-ml-1\"\n      >\n      </ax-badge>\n      }\n    </div>\n  </div>\n\n  <!-- Task List -->\n  <div class=\"ax-space-y-4 ax-my-4 ax-px-2\">\n    @if (showCategories() && hasCategories()) {\n    <!-- Categorized Tasks -->\n    @for (category of getCategories(); track category) {\n    <div class=\"ax-mb-3\">\n      <!-- Category Header -->\n      <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-2 ax-h-5\">\n        <h4 class=\"ax-font-medium ax-text-gray-700\">{{ category }}</h4>\n        @if(getCategoryTaskCount(category)){\n        <ax-badge [text]=\"getCategoryTaskCount(category).toString()\" [color]=\"'primary'\" size=\"sm\"></ax-badge>\n        }\n      </div>\n      <!-- Tasks in Category -->\n      @for (task of getTasksByCategory(category); track task.id) {\n      <ng-container\n        [ngTemplateOutlet]=\"taskItemTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: task }\"\n      ></ng-container>\n      }\n    </div>\n    } } @else {\n    <!-- Uncategorized Tasks -->\n    @for (task of taskItems(); track task.id) {\n    <ng-container\n      [ngTemplateOutlet]=\"taskItemTemplateRef\"\n      [ngTemplateOutletContext]=\"{ $implicit: task }\"\n    ></ng-container>\n    } @empty {\n    <!-- Empty State -->\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-12 ax-px-4 ax-text-gray-400\">\n      <ax-icon class=\"ax-text-4xl ax-mb-3 ax-text-gray-300\">\n        <i class=\"fa-light fa-clipboard-list-check\"></i>\n      </ax-icon>\n      <p class=\"ax-text-center\">{{ 'widget.tasklist.noTasks' | translate | async }}</p>\n    </div>\n    } }\n  </div>\n</div>\n\n<!-- Task Item Template -->\n<ng-template #taskItemTemplateRef let-task>\n  <div class=\"ax-flex ax-gap-3 ax-items-center ax-py-2 ax-border-b ax-border-gray-100 last:ax-border-0\">\n    <!-- Checkbox -->\n    <ax-check-box\n      class=\"ax-flex-shrink-0\"\n      [value]=\"task.completed\"\n      [disabled]=\"!allowMarkComplete()\"\n      (valueChange)=\"onTaskCompletionChange(task, $event)\"\n    >\n    </ax-check-box>\n\n    <!-- Task Details -->\n    <div class=\"ax-overflow-hidden ax-grow ax-text-start\" (click)=\"onTaskClick(task)\">\n      <!-- Title and Priority -->\n      <div class=\"ax-flex ax-items-center ax-gap-2\">\n        <h6\n          class=\"ax-font-semibold ax-truncate ax-pb-1\"\n          [class.ax-line-through]=\"task.completed\"\n          [class.ax-text-gray-400]=\"task.completed\"\n        >\n          {{ task.title }}\n        </h6>\n        @if(showPriority() && task.priority) {\n        <ax-badge [color]=\"getPriorityColor(task.priority)\" [text]=\"task.priority\" size=\"sm\" class=\"ax-ml-1\"></ax-badge>\n        }\n      </div>\n\n      <!-- Metadata -->\n      <div class=\"ax-flex ax-flex-wrap ax-gap-x-3 ax-gap-y-1 ax-mt-1 ax-text-xs ax-text-gray-500\">\n        @if(showDate() && task.dueDate) {\n        <span class=\"ax-flex ax-items-center ax-gap-1\" [class.ax-text-danger-500]=\"getDaysDifference(task.dueDate) < 0\">\n          <ax-icon><i class=\"fa-light fa-calendar\"></i></ax-icon>\n          {{ formatDueDate(task.dueDate) }}\n        </span>\n        } @if(showAssignee() && task.assignedTo) {\n        <span class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-icon><i class=\"fa-light fa-user\"></i></ax-icon>\n          {{ task.assignedTo.name }}\n        </span>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;height:100%;width:100%}.task-completed{text-decoration:line-through;color:var(--ax-text-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTaskListWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        CommonModule,
+                        AXTabsModule,
+                        AXDecoratorModule,
+                        AXButtonModule,
+                        AXBadgeModule,
+                        AXAvatarModule,
+                        AXImageModule,
+                        AXCheckBoxModule,
+                        AXLabelModule,
+                        AXTranslationModule,
+                    ], providers: [DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-size-full ax-p-4\">\n  <!-- Header -->\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-3\">\n    <h3 class=\"ax-text-lg ax-font-semibold\">{{ 'widget.tasklist.title' | translate | async }}</h3>\n    <div class=\"ax-flex ax-gap-2\">\n      @if(getPendingTaskCount() > 0){\n      <ax-badge\n        [text]=\"getPendingTaskCount() + ' ' + ('widget.tasklist.pending' | translate | async)\"\n        [color]=\"'warning'\"\n        size=\"sm\"\n        class=\"ax-ml-1\"\n      >\n      </ax-badge>\n      } @if(getCompletedTaskCount() > 0){\n      <ax-badge\n        [text]=\"getCompletedTaskCount() + ' ' + ('widget.tasklist.completed' | translate | async)\"\n        [color]=\"'success'\"\n        size=\"sm\"\n        class=\"ax-ml-1\"\n      >\n      </ax-badge>\n      }\n    </div>\n  </div>\n\n  <!-- Task List -->\n  <div class=\"ax-space-y-4 ax-my-4 ax-px-2\">\n    @if (showCategories() && hasCategories()) {\n    <!-- Categorized Tasks -->\n    @for (category of getCategories(); track category) {\n    <div class=\"ax-mb-3\">\n      <!-- Category Header -->\n      <div class=\"ax-flex ax-justify-between ax-items-center ax-mb-2 ax-h-5\">\n        <h4 class=\"ax-font-medium ax-text-gray-700\">{{ category }}</h4>\n        @if(getCategoryTaskCount(category)){\n        <ax-badge [text]=\"getCategoryTaskCount(category).toString()\" [color]=\"'primary'\" size=\"sm\"></ax-badge>\n        }\n      </div>\n      <!-- Tasks in Category -->\n      @for (task of getTasksByCategory(category); track task.id) {\n      <ng-container\n        [ngTemplateOutlet]=\"taskItemTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: task }\"\n      ></ng-container>\n      }\n    </div>\n    } } @else {\n    <!-- Uncategorized Tasks -->\n    @for (task of taskItems(); track task.id) {\n    <ng-container\n      [ngTemplateOutlet]=\"taskItemTemplateRef\"\n      [ngTemplateOutletContext]=\"{ $implicit: task }\"\n    ></ng-container>\n    } @empty {\n    <!-- Empty State -->\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-12 ax-px-4 ax-text-gray-400\">\n      <ax-icon class=\"ax-text-4xl ax-mb-3 ax-text-gray-300\">\n        <i class=\"fa-light fa-clipboard-list-check\"></i>\n      </ax-icon>\n      <p class=\"ax-text-center\">{{ 'widget.tasklist.noTasks' | translate | async }}</p>\n    </div>\n    } }\n  </div>\n</div>\n\n<!-- Task Item Template -->\n<ng-template #taskItemTemplateRef let-task>\n  <div class=\"ax-flex ax-gap-3 ax-items-center ax-py-2 ax-border-b ax-border-gray-100 last:ax-border-0\">\n    <!-- Checkbox -->\n    <ax-check-box\n      class=\"ax-flex-shrink-0\"\n      [value]=\"task.completed\"\n      [disabled]=\"!allowMarkComplete()\"\n      (valueChange)=\"onTaskCompletionChange(task, $event)\"\n    >\n    </ax-check-box>\n\n    <!-- Task Details -->\n    <div class=\"ax-overflow-hidden ax-grow ax-text-start\" (click)=\"onTaskClick(task)\">\n      <!-- Title and Priority -->\n      <div class=\"ax-flex ax-items-center ax-gap-2\">\n        <h6\n          class=\"ax-font-semibold ax-truncate ax-pb-1\"\n          [class.ax-line-through]=\"task.completed\"\n          [class.ax-text-gray-400]=\"task.completed\"\n        >\n          {{ task.title }}\n        </h6>\n        @if(showPriority() && task.priority) {\n        <ax-badge [color]=\"getPriorityColor(task.priority)\" [text]=\"task.priority\" size=\"sm\" class=\"ax-ml-1\"></ax-badge>\n        }\n      </div>\n\n      <!-- Metadata -->\n      <div class=\"ax-flex ax-flex-wrap ax-gap-x-3 ax-gap-y-1 ax-mt-1 ax-text-xs ax-text-gray-500\">\n        @if(showDate() && task.dueDate) {\n        <span class=\"ax-flex ax-items-center ax-gap-1\" [class.ax-text-danger-500]=\"getDaysDifference(task.dueDate) < 0\">\n          <ax-icon><i class=\"fa-light fa-calendar\"></i></ax-icon>\n          {{ formatDueDate(task.dueDate) }}\n        </span>\n        } @if(showAssignee() && task.assignedTo) {\n        <span class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-icon><i class=\"fa-light fa-user\"></i></ax-icon>\n          {{ task.assignedTo.name }}\n        </span>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;height:100%;width:100%}.task-completed{text-decoration:line-through;color:var(--ax-text-secondary)}\n"] }]
+        }] });
+
+var tasklistWidget_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPTaskListWidgetViewComponent: AXPTaskListWidgetViewComponent
+});
+
+const AXPTaskListWidget = {
+    name: 'task-list',
+    title: 'Task List Widget',
+    categories: [AXP_WIDGETS_CHART_CATEGORY],
+    groups: [AXPWidgetGroupEnum.DashboardWidget],
+    type: 'dashboard',
+    icon: 'fa-light fa-clipboard-list-check',
+    properties: [
+        cloneProperty(AXP_DATA_PATH_PROPERTY, { visible: false }),
+        // Display options
+        {
+            name: 'maxItems',
+            title: 'Max Items',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 10,
+                dataType: 'number',
+                interface: {
+                    name: 'maxItems',
+                    path: 'options.maxItems',
+                    type: AXPWidgetsCatalog.number,
+                    options: {
+                        minValue: 1,
+                        maxValue: 50,
+                    },
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'showDate',
+            title: 'Show Date',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: true,
+                dataType: 'boolean',
+                interface: {
+                    name: 'showDate',
+                    path: 'options.showDate',
+                    type: AXPWidgetsCatalog.toggle,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'showAssignee',
+            title: 'Show Assignee',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: true,
+                dataType: 'boolean',
+                interface: {
+                    name: 'showAssignee',
+                    path: 'options.showAssignee',
+                    type: AXPWidgetsCatalog.toggle,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'groupByCategory',
+            title: 'Group by Category',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: true,
+                dataType: 'boolean',
+                interface: {
+                    name: 'groupByCategory',
+                    path: 'options.groupByCategory',
+                    type: AXPWidgetsCatalog.toggle,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'showPriority',
+            title: 'Show Priority',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: true,
+                dataType: 'boolean',
+                interface: {
+                    name: 'showPriority',
+                    path: 'options.showPriority',
+                    type: AXPWidgetsCatalog.toggle,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'allowMarkComplete',
+            title: 'Allow Complete',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: true,
+                dataType: 'boolean',
+                interface: {
+                    name: 'allowMarkComplete',
+                    path: 'options.allowMarkComplete',
+                    type: AXPWidgetsCatalog.toggle,
+                },
+            },
+            visible: true,
+        },
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return tasklistWidget_component; }).then((c) => c.AXPTaskListWidgetViewComponent),
+        },
+    },
+    meta: {
+        dimensions: {
+            width: 5,
+            height: 7,
+            minWidth: 3,
+            minHeight: 4,
+            maxWidth: 6,
+            maxHeight: 8,
+        },
+    },
+};
+
 /**
  * Abstract Weather API Service
  * Base class that defines the interface and common functionality
@@ -15332,6 +15838,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 }]
         }] });
 
+// export interface AXPWidgetOptions {
+// }
+// export interface AXPWidgetConfig<T extends AXPWidgetOptions> {
+//     name: string;
+//     options: T;
+// }
+// export interface AXpTextBoxWidget {
+// }
+// export interface AXPTextBoxWidgetOptions {
+//     disabled?: boolean;
+//     readonly?: boolean;
+//     hasClearButton?: boolean;
+//     placeholder?: string;
+// }
+
 class AXPCronJobWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
@@ -18109,7 +18630,7 @@ class AXPPanelWidgetDesignerComponent extends AXPLayoutWidgetComponent {
         super(...arguments);
         this.caption = computed(() => this.options()['caption'] || 'Panel');
         this.icon = computed(() => this.options()['icon'] || '');
-        this.look = computed(() => this.options()['look'].id || 'solid');
+        this.look = computed(() => this.options()['look'] || 'solid');
         this.disabled = computed(() => this.options()['disabled'] || false);
         this.showHeader = computed(() => this.options()['showHeader'] ?? true);
         this.collapsed = computed(() => this.options()['collapsed'] || false);
@@ -18132,57 +18653,59 @@ class AXPPanelWidgetDesignerComponent extends AXPLayoutWidgetComponent {
                 useExisting: AXPPanelWidgetDesignerComponent,
             },
         ], usesInheritance: true, ngImport: i0, template: `
+  <ax-collapse-group [look]="look()">
     <ax-collapse
       [caption]="caption()"
       [icon]="icon()"
-      [look]="look()"
       [showHeader]="showHeader()"
       [isCollapsed]="collapsed()"
       (isCollapsedChange)="handleCollapsedChange($event)"
     >
       @for (node of children(); track $index) {
-      <ng-container
-        axp-widget-designer-renderer
-        [node]="node"
-        [parentNode]="this"
-        [mode]="this.mode"
-        [locked]="this.locked"
-      ></ng-container>
-      } @empty {
-      <axp-designer-add-widget-mini-button
-        class="ax-flex-1 ax-self-center ax-place-self-end"
-      ></axp-designer-add-widget-mini-button>
+        <ng-container
+          axp-widget-designer-renderer
+          [node]="node"
+          [parentNode]="this"
+          [mode]="this.mode"
+          [locked]="this.locked"
+        ></ng-container>
+        } @empty {
+        <axp-designer-add-widget-mini-button
+          class="ax-flex-1 ax-self-center ax-place-self-end"
+        ></axp-designer-add-widget-mini-button>
       }
     </ax-collapse>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXCollapseModule }, { kind: "component", type: i1$c.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    </ax-collapse-group>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXCollapseModule }, { kind: "component", type: i1$c.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "component", type: i1$c.AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: ["look", "accordion", "activeIndex"], outputs: ["accordionChange", "activeIndexChange"] }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPPanelWidgetDesignerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-panel-widget',
                     template: `
+  <ax-collapse-group [look]="look()">
     <ax-collapse
       [caption]="caption()"
       [icon]="icon()"
-      [look]="look()"
       [showHeader]="showHeader()"
       [isCollapsed]="collapsed()"
       (isCollapsedChange)="handleCollapsedChange($event)"
     >
       @for (node of children(); track $index) {
-      <ng-container
-        axp-widget-designer-renderer
-        [node]="node"
-        [parentNode]="this"
-        [mode]="this.mode"
-        [locked]="this.locked"
-      ></ng-container>
-      } @empty {
-      <axp-designer-add-widget-mini-button
-        class="ax-flex-1 ax-self-center ax-place-self-end"
-      ></axp-designer-add-widget-mini-button>
+        <ng-container
+          axp-widget-designer-renderer
+          [node]="node"
+          [parentNode]="this"
+          [mode]="this.mode"
+          [locked]="this.locked"
+        ></ng-container>
+        } @empty {
+        <axp-designer-add-widget-mini-button
+          class="ax-flex-1 ax-self-center ax-place-self-end"
+        ></axp-designer-add-widget-mini-button>
       }
     </ax-collapse>
+    </ax-collapse-group>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [
@@ -18215,7 +18738,7 @@ class AXPPanelWidgetViewComponent extends AXPLayoutWidgetComponent {
         super(...arguments);
         this.caption = computed(() => this.options()['caption'] || 'Panel');
         this.icon = computed(() => this.options()['icon'] || '');
-        this.look = computed(() => this.options()['look'].id || 'solid');
+        this.look = computed(() => this.options()['look'] || 'solid');
         this.disabled = computed(() => this.options()['disabled'] || false);
         this.showHeader = computed(() => this.options()['showHeader'] ?? true);
         this.collapsed = computed(() => this.options()['collapsed'] || false);
@@ -18235,10 +18758,10 @@ class AXPPanelWidgetViewComponent extends AXPLayoutWidgetComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPPanelWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPPanelWidgetViewComponent, isStandalone: true, selector: "axp-panel-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
+  <ax-collapse-group [look]="look()">
     <ax-collapse
       [caption]="caption()"
       [icon]="icon()"
-      [look]="look()"
       [showHeader]="showHeader()"
       [isCollapsed]="collapsed()"
       (isCollapsedChange)="handleCollapsedChange($event)"
@@ -18253,17 +18776,18 @@ class AXPPanelWidgetViewComponent extends AXPLayoutWidgetComponent {
       ></ng-container>
       }
     </ax-collapse>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXCollapseModule }, { kind: "component", type: i1$c.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </ax-collapse-group>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXCollapseModule }, { kind: "component", type: i1$c.AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "component", type: i1$c.AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: ["look", "accordion", "activeIndex"], outputs: ["accordionChange", "activeIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPPanelWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-panel-widget',
                     template: `
+  <ax-collapse-group [look]="look()">
     <ax-collapse
       [caption]="caption()"
       [icon]="icon()"
-      [look]="look()"
       [showHeader]="showHeader()"
       [isCollapsed]="collapsed()"
       (isCollapsedChange)="handleCollapsedChange($event)"
@@ -18278,6 +18802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
       ></ng-container>
       }
     </ax-collapse>
+  </ax-collapse-group>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, AXPLayoutBuilderModule, AXCollapseModule],
@@ -18344,6 +18869,7 @@ const AXPPanelWidget = {
                     name: 'look',
                     path: 'options.look',
                     type: AXPWidgetsCatalog.select,
+                    valueTransforms: objectKeyValueTransforms('id'),
                     options: {
                         dataSource: [
                             { id: 'solid', title: 'Solid' },
@@ -18552,6 +19078,8 @@ class AXPWidgetsModule {
                     //Custom Widgets
                     AXPNumberUnitBoxWidget,
                     AXPPanelWidget,
+                    AXPNotificationWidget,
+                    AXPTaskListWidget,
                 ],
             })] }); }
 }
@@ -18630,6 +19158,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                                 //Custom Widgets
                                 AXPNumberUnitBoxWidget,
                                 AXPPanelWidget,
+                                AXPNotificationWidget,
+                                AXPTaskListWidget,
                             ],
                         }),
                     ],
@@ -18646,5 +19176,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, 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, 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_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, 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 };
 //# sourceMappingURL=acorex-platform-widgets.mjs.map