npm - @acorex/components - Versions diffs - 7.20.0 → 7.21.0 - Mend

@acorex/components 7.20.0 → 7.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (309) hide show

package/fesm2022/acorex-components-scheduler.mjs CHANGED Viewed

@@ -49,10 +49,10 @@ class AXSchedulerMonthViewComponent extends MXBaseComponent {
             isToday: c.dayOfYear == this.date.dayOfYear,
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSchedulerMonthViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: { date: "date" }, usesInheritance: true, ngImport: i0, template: "<!-- <div class=\"ax-flex ax-flex-col ax-flex-auto ax-shadow-md\"> -->\n<div class=\"ax-grid ax-grid-cols-7 ax-gap-[1px] ax-w-full ax-bg-neutral-200 ax-border-b\">\n    <ng-container *ngFor=\"let item of dayNames\">\n        <div class=\"ax-flex ax-items-center ax-justify-center ax-py-2 ax-bg-white ax-font-medium\">\n            {{item}}\n        </div>\n    </ng-container>\n</div>\n<div class=\"ax-flex ax-flex-auto ax-bg-neutral-200\">\n    <div class=\"ax-grid ax-grid-cols-7 ax-gap-[1px] ax-w-full\">\n        <ng-container *ngFor=\"let item of _slots\">\n            <div class=\"ax-py-2 ax-px-3 ax-bg-white ax-cursor-pointer hover:ax-bg-neutral-100\n                ax-flex ax-flex-col ax-justify-between\" [ngClass]=\"item.cssClass\">\n                <time class=\"ax-text-sm ax-flex ax-items-center ax-justify-center ax-rounded-full ax-w-6 ax-h-6\"\n                    [class.ax-bg-primary-500]=\"item.isToday\" [class.ax-text-white]=\"item.isToday\"\n                    datetime=\"item.date.format('dd')\">{{item.date.format('d')}}</time>\n                <ol class=\"ax-mt-2 ax-hidden lg:ax-flex ax-flex-col ax-gap-1\">\n                    <li *ngIf=\"item.date.dayOfMonth % 6 === 0\">\n                        <a href=\"#\"\n                            class=\"ax-flex ax-justify-between ax-text-sm ax-bg-primary-500 ax-py-1 ax-px-2 ax-rounded ax-text-primary-fore\">\n                            <p class=\"ax-text-sm\">Launch Time</p>\n                            <time class=\"ax-ms-3\" datetime=\"item.date.format('HH A')\">\n                                {{item.date.format('hh A')}}\n                            </time>\n                        </a>\n                    </li>\n                    <li *ngIf=\"item.date.dayOfMonth % 5 === 0\">\n                        <a href=\"#\"\n                            class=\"ax-flex ax-justify-between ax-text-sm ax-bg-success-500 ax-py-1 ax-px-2 ax-rounded ax-text-success-fore\">\n                            <p class=\"ax-text-sm\">Daily meeting</p>\n                            <time class=\"ax-ms-3\" datetime=\"item.date.format('HH A')\">\n                                {{item.date.format('hh A')}}\n                            </time>\n                        </a>\n                    </li>\n                </ol>\n                <ol class=\"ax-flex ax-gap-1 ax-self-center md:ax-hidden\">\n                    <li *ngIf=\"item.date.dayOfMonth % 5 === 0\">\n                        <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-primary-500 lg:ax-hidden\"></span>\n                    </li>\n                    <li *ngIf=\"item.date.dayOfMonth % 6 === 0\">\n                        <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-danger-500 lg:ax-hidden\"></span>\n                    </li>\n                    <li *ngIf=\"item.date.dayOfMonth % 8 === 0\">\n                        <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-warning-500 lg:ax-hidden\"></span>\n                    </li>\n                    <li *ngIf=\"item.date.dayOfMonth % 3 === 0\">\n                        <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-success-500 lg:ax-hidden\"></span>\n                    </li>\n                </ol>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<!-- </div> -->\n<div class=\"ax-p-4 lg:ax-hidden\">\n    <ol\n        class=\"ax-flex ax-flex-col ax-rounded-lg ax-border ax-bg-surface ax-divide-y ax-overflow-hidden ax-cursor-pointer\">\n        <li class=\"ax-flex ax-items-start ax-justify-between ax-p-4 hover:ax-bg-neutral-100 mobile-task\">\n            <div class=\"ax-flex ax-flex-col ax-gap-2\">\n                <p class=\"ax-font-medium\">Daily Meeting at the Office</p>\n                <div class=\"ax-flex ax-gap-2 ax-items-center\">\n                    <ax-icon class=\"fa-solid fa-clock ax-text-neutral-400\"></ax-icon>\n                    <p class=\"ax-text-sm\">3 PM</p>\n                </div>\n            </div>\n            <ax-button text=\"Edit\" class=\"!ax-bg-surface ax-border ax-sm ax-opacity-0\"></ax-button>\n        </li>\n    </ol>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSchedulerMonthViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: { date: "date" }, usesInheritance: true, ngImport: i0, template: "<!-- <div class=\"ax-flex ax-flex-col ax-flex-auto ax-shadow-md\"> -->\n<div class=\"ax-grid ax-grid-cols-7 ax-gap-[1px] ax-w-full ax-bg-neutral-200 ax-border-b\">\n    <ng-container *ngFor=\"let item of dayNames\">\n        <div class=\"ax-flex ax-items-center ax-justify-center ax-py-2 ax-bg-white ax-font-medium\">\n            {{item}}\n        </div>\n    </ng-container>\n</div>\n<div class=\"ax-flex ax-flex-auto ax-bg-neutral-200\">\n    <div class=\"ax-grid ax-grid-cols-7 ax-gap-[1px] ax-w-full\">\n        <ng-container *ngFor=\"let item of _slots\">\n            <div class=\"ax-py-2 ax-px-3 ax-bg-white ax-cursor-pointer hover:ax-bg-neutral-100\n                ax-flex ax-flex-col ax-justify-between\" [ngClass]=\"item.cssClass\">\n                <time class=\"ax-text-sm ax-flex ax-items-center ax-justify-center ax-rounded-full ax-w-6 ax-h-6\"\n                    [class.ax-bg-primary-500]=\"item.isToday\" [class.ax-text-white]=\"item.isToday\"\n                    datetime=\"item.date.format('dd')\">{{item.date.format('d')}}</time>\n                <ol class=\"ax-mt-2 ax-hidden lg:ax-flex ax-flex-col ax-gap-1\">\n                    <li *ngIf=\"item.date.dayOfMonth % 6 === 0\">\n                        <a href=\"#\"\n                            class=\"ax-flex ax-justify-between ax-text-sm ax-bg-primary-500 ax-py-1 ax-px-2 ax-rounded ax-text-primary-fore\">\n                            <p class=\"ax-text-sm\">Launch Time</p>\n                            <time class=\"ax-ms-3\" datetime=\"item.date.format('HH A')\">\n                                {{item.date.format('hh A')}}\n                            </time>\n                        </a>\n                    </li>\n                    <li *ngIf=\"item.date.dayOfMonth % 5 === 0\">\n                        <a href=\"#\"\n                            class=\"ax-flex ax-justify-between ax-text-sm ax-bg-success-500 ax-py-1 ax-px-2 ax-rounded ax-text-success-fore\">\n                            <p class=\"ax-text-sm\">Daily meeting</p>\n                            <time class=\"ax-ms-3\" datetime=\"item.date.format('HH A')\">\n                                {{item.date.format('hh A')}}\n                            </time>\n                        </a>\n                    </li>\n                </ol>\n                <ol class=\"ax-flex ax-gap-1 ax-self-center md:ax-hidden\">\n                    <li *ngIf=\"item.date.dayOfMonth % 5 === 0\">\n                        <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-primary-500 lg:ax-hidden\"></span>\n                    </li>\n                    <li *ngIf=\"item.date.dayOfMonth % 6 === 0\">\n                        <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-danger-500 lg:ax-hidden\"></span>\n                    </li>\n                    <li *ngIf=\"item.date.dayOfMonth % 8 === 0\">\n                        <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-warning-500 lg:ax-hidden\"></span>\n                    </li>\n                    <li *ngIf=\"item.date.dayOfMonth % 3 === 0\">\n                        <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-success-500 lg:ax-hidden\"></span>\n                    </li>\n                </ol>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<!-- </div> -->\n<div class=\"ax-p-4 lg:ax-hidden\">\n    <ol\n        class=\"ax-flex ax-flex-col ax-rounded-lg ax-border ax-bg-surface ax-divide-y ax-overflow-hidden ax-cursor-pointer\">\n        <li class=\"ax-flex ax-items-start ax-justify-between ax-p-4 hover:ax-bg-neutral-100 mobile-task\">\n            <div class=\"ax-flex ax-flex-col ax-gap-2\">\n                <p class=\"ax-font-medium\">Daily Meeting at the Office</p>\n                <div class=\"ax-flex ax-gap-2 ax-items-center\">\n                    <ax-icon class=\"fa-solid fa-clock ax-text-neutral-400\"></ax-icon>\n                    <p class=\"ax-text-sm\">3 PM</p>\n                </div>\n            </div>\n            <ax-button text=\"Edit\" class=\"!ax-bg-surface ax-border ax-sm ax-opacity-0\"></ax-button>\n        </li>\n    </ol>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSchedulerMonthViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSchedulerMonthViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-scheduler-month-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- <div class=\"ax-flex ax-flex-col ax-flex-auto ax-shadow-md\"> -->\n<div class=\"ax-grid ax-grid-cols-7 ax-gap-[1px] ax-w-full ax-bg-neutral-200 ax-border-b\">\n    <ng-container *ngFor=\"let item of dayNames\">\n        <div class=\"ax-flex ax-items-center ax-justify-center ax-py-2 ax-bg-white ax-font-medium\">\n            {{item}}\n        </div>\n    </ng-container>\n</div>\n<div class=\"ax-flex ax-flex-auto ax-bg-neutral-200\">\n    <div class=\"ax-grid ax-grid-cols-7 ax-gap-[1px] ax-w-full\">\n        <ng-container *ngFor=\"let item of _slots\">\n            <div class=\"ax-py-2 ax-px-3 ax-bg-white ax-cursor-pointer hover:ax-bg-neutral-100\n                ax-flex ax-flex-col ax-justify-between\" [ngClass]=\"item.cssClass\">\n                <time class=\"ax-text-sm ax-flex ax-items-center ax-justify-center ax-rounded-full ax-w-6 ax-h-6\"\n                    [class.ax-bg-primary-500]=\"item.isToday\" [class.ax-text-white]=\"item.isToday\"\n                    datetime=\"item.date.format('dd')\">{{item.date.format('d')}}</time>\n                <ol class=\"ax-mt-2 ax-hidden lg:ax-flex ax-flex-col ax-gap-1\">\n                    <li *ngIf=\"item.date.dayOfMonth % 6 === 0\">\n                        <a href=\"#\"\n                            class=\"ax-flex ax-justify-between ax-text-sm ax-bg-primary-500 ax-py-1 ax-px-2 ax-rounded ax-text-primary-fore\">\n                            <p class=\"ax-text-sm\">Launch Time</p>\n                            <time class=\"ax-ms-3\" datetime=\"item.date.format('HH A')\">\n                                {{item.date.format('hh A')}}\n                            </time>\n                        </a>\n                    </li>\n                    <li *ngIf=\"item.date.dayOfMonth % 5 === 0\">\n                        <a href=\"#\"\n                            class=\"ax-flex ax-justify-between ax-text-sm ax-bg-success-500 ax-py-1 ax-px-2 ax-rounded ax-text-success-fore\">\n                            <p class=\"ax-text-sm\">Daily meeting</p>\n                            <time class=\"ax-ms-3\" datetime=\"item.date.format('HH A')\">\n                                {{item.date.format('hh A')}}\n                            </time>\n                        </a>\n                    </li>\n                </ol>\n                <ol class=\"ax-flex ax-gap-1 ax-self-center md:ax-hidden\">\n                    <li *ngIf=\"item.date.dayOfMonth % 5 === 0\">\n                        <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-primary-500 lg:ax-hidden\"></span>\n                    </li>\n                    <li *ngIf=\"item.date.dayOfMonth % 6 === 0\">\n                        <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-danger-500 lg:ax-hidden\"></span>\n                    </li>\n                    <li *ngIf=\"item.date.dayOfMonth % 8 === 0\">\n                        <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-warning-500 lg:ax-hidden\"></span>\n                    </li>\n                    <li *ngIf=\"item.date.dayOfMonth % 3 === 0\">\n                        <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-success-500 lg:ax-hidden\"></span>\n                    </li>\n                </ol>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<!-- </div> -->\n<div class=\"ax-p-4 lg:ax-hidden\">\n    <ol\n        class=\"ax-flex ax-flex-col ax-rounded-lg ax-border ax-bg-surface ax-divide-y ax-overflow-hidden ax-cursor-pointer\">\n        <li class=\"ax-flex ax-items-start ax-justify-between ax-p-4 hover:ax-bg-neutral-100 mobile-task\">\n            <div class=\"ax-flex ax-flex-col ax-gap-2\">\n                <p class=\"ax-font-medium\">Daily Meeting at the Office</p>\n                <div class=\"ax-flex ax-gap-2 ax-items-center\">\n                    <ax-icon class=\"fa-solid fa-clock ax-text-neutral-400\"></ax-icon>\n                    <p class=\"ax-text-sm\">3 PM</p>\n                </div>\n            </div>\n            <ax-button text=\"Edit\" class=\"!ax-bg-surface ax-border ax-sm ax-opacity-0\"></ax-button>\n        </li>\n    </ol>\n</div>" }]
         }], propDecorators: { date: [{
@@ -60,10 +60,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
             }] } });
 class AXSchedulerWeekViewComponent extends MXBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSchedulerWeekViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: AXSchedulerWeekViewComponent, selector: "ax-scheduler-week-view", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-flex-auto ax-isolate ax-overflow-auto ax-bg-white\">\n    <div class=\"ax-flex ax-flex-col ax-max-w-full\">\n        <div class=\"ax-shadow-md ax-pr-8 ax-z-30 ax-sticky ax-top-0\">\n            <div class=\"ax-grid ax-leading-6 ax-border-r ax-grid-cols-7\">\n                <div class=\"ax-w-14 ax-col-end-1\"></div>\n                <div\n                    class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-l ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium\">\n                    Mon 10\n                </div>\n            </div>\n        </div>\n        <div class=\"ax-flex ax-flex-auto\">\n            <div class=\"ax-w-14 ax-z-10 ax-sticky ax-left-0 ax-bg-white ax-shadow\"></div>\n            <div class=\"ax-grid ax-flex-auto ax-grid-cols-1 ax-grid-rows-1\">\n                <div class=\"ax-grid ax-col-start-1 ax-col-end-2 ax-row-start-1\"\n                    style=\"grid-template-rows: repeat(45, minmax(3.5rem, 1fr))\">\n                    <div class=\"ax-row-end-1 ax-h-7\"></div>\n                    <div class=\"ax-border-t ax-border-b\">\n                        <div class=\"ax-leading-5 ax-text-right ax-w-14 -ax-mt-[0.625rem] -ax-ml-14 ax-sticky ax-left-0\">\n                        </div>\n                    </div>\n                </div>\n                <div class=\"ax-grid ax-grid-rows-1 ax-grid-cols-7 ax-row-start-1 ax-col-end-2 ax-col-start-1\">\n                    <div class=\"ax-col-start-1 ax-row-start-1 ax-row-end-[-1]\"></div>\n                    <div class=\"ax-col-start-2 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-3 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-4 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-5 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-6 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-7 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-8 ax-row-start-1 ax-row-end-[-1] ax-border-l ax-w-8\"></div>\n                </div>\n                <ol class=\"ax-grid ax-pr-8 ax-grid-cols-7 ax-row-start-1 ax-col-end-2 ax-col-start-2\"\n                    style=\"grid-template-rows: 1.75rem repeat(288, minmax(0px, 1fr)) auto\"></ol>\n            </div>\n        </div>\n    </div>\n</div>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSchedulerWeekViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: AXSchedulerWeekViewComponent, selector: "ax-scheduler-week-view", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-flex-auto ax-isolate ax-overflow-auto ax-bg-white\">\n    <div class=\"ax-flex ax-flex-col ax-max-w-full\">\n        <div class=\"ax-shadow-md ax-pr-8 ax-z-30 ax-sticky ax-top-0\">\n            <div class=\"ax-grid ax-leading-6 ax-border-r ax-grid-cols-7\">\n                <div class=\"ax-w-14 ax-col-end-1\"></div>\n                <div\n                    class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-l ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium\">\n                    Mon 10\n                </div>\n            </div>\n        </div>\n        <div class=\"ax-flex ax-flex-auto\">\n            <div class=\"ax-w-14 ax-z-10 ax-sticky ax-left-0 ax-bg-white ax-shadow\"></div>\n            <div class=\"ax-grid ax-flex-auto ax-grid-cols-1 ax-grid-rows-1\">\n                <div class=\"ax-grid ax-col-start-1 ax-col-end-2 ax-row-start-1\"\n                    style=\"grid-template-rows: repeat(45, minmax(3.5rem, 1fr))\">\n                    <div class=\"ax-row-end-1 ax-h-7\"></div>\n                    <div class=\"ax-border-t ax-border-b\">\n                        <div class=\"ax-leading-5 ax-text-right ax-w-14 -ax-mt-[0.625rem] -ax-ml-14 ax-sticky ax-left-0\">\n                        </div>\n                    </div>\n                </div>\n                <div class=\"ax-grid ax-grid-rows-1 ax-grid-cols-7 ax-row-start-1 ax-col-end-2 ax-col-start-1\">\n                    <div class=\"ax-col-start-1 ax-row-start-1 ax-row-end-[-1]\"></div>\n                    <div class=\"ax-col-start-2 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-3 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-4 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-5 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-6 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-7 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-8 ax-row-start-1 ax-row-end-[-1] ax-border-l ax-w-8\"></div>\n                </div>\n                <ol class=\"ax-grid ax-pr-8 ax-grid-cols-7 ax-row-start-1 ax-col-end-2 ax-col-start-2\"\n                    style=\"grid-template-rows: 1.75rem repeat(288, minmax(0px, 1fr)) auto\"></ol>\n            </div>\n        </div>\n    </div>\n</div>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSchedulerWeekViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSchedulerWeekViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-scheduler-week-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-flex ax-flex-col ax-flex-auto ax-isolate ax-overflow-auto ax-bg-white\">\n    <div class=\"ax-flex ax-flex-col ax-max-w-full\">\n        <div class=\"ax-shadow-md ax-pr-8 ax-z-30 ax-sticky ax-top-0\">\n            <div class=\"ax-grid ax-leading-6 ax-border-r ax-grid-cols-7\">\n                <div class=\"ax-w-14 ax-col-end-1\"></div>\n                <div\n                    class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-l ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium\">\n                    Mon 10\n                </div>\n            </div>\n        </div>\n        <div class=\"ax-flex ax-flex-auto\">\n            <div class=\"ax-w-14 ax-z-10 ax-sticky ax-left-0 ax-bg-white ax-shadow\"></div>\n            <div class=\"ax-grid ax-flex-auto ax-grid-cols-1 ax-grid-rows-1\">\n                <div class=\"ax-grid ax-col-start-1 ax-col-end-2 ax-row-start-1\"\n                    style=\"grid-template-rows: repeat(45, minmax(3.5rem, 1fr))\">\n                    <div class=\"ax-row-end-1 ax-h-7\"></div>\n                    <div class=\"ax-border-t ax-border-b\">\n                        <div class=\"ax-leading-5 ax-text-right ax-w-14 -ax-mt-[0.625rem] -ax-ml-14 ax-sticky ax-left-0\">\n                        </div>\n                    </div>\n                </div>\n                <div class=\"ax-grid ax-grid-rows-1 ax-grid-cols-7 ax-row-start-1 ax-col-end-2 ax-col-start-1\">\n                    <div class=\"ax-col-start-1 ax-row-start-1 ax-row-end-[-1]\"></div>\n                    <div class=\"ax-col-start-2 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-3 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-4 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-5 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-6 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-7 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-8 ax-row-start-1 ax-row-end-[-1] ax-border-l ax-w-8\"></div>\n                </div>\n                <ol class=\"ax-grid ax-pr-8 ax-grid-cols-7 ax-row-start-1 ax-col-end-2 ax-col-start-2\"\n                    style=\"grid-template-rows: 1.75rem repeat(288, minmax(0px, 1fr)) auto\"></ol>\n            </div>\n        </div>\n    </div>\n</div>" }]
         }] });
@@ -93,10 +93,10 @@ class AXSchedulerComponent extends MXBaseComponent {
     _handlePrevClick() {
         this.current = this.current.add('month', -1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSchedulerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: AXSchedulerComponent, selector: "ax-scheduler", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-h-full\">\n  <div class=\"scheduler-header\">\n    <p>\n      {{ current.format('MMMM yyyy') }}\n    </p>\n    <div class=\"scheduler-actions\">\n      <div class=\"ax-flex ax-border ax-rounded-md ax-items-center ax-px-1 ax-gap-0.5 ax-bg-surface\">\n        <button class=\"ax-w-8 ax-h-8 ax-rounded-md hover:ax-bg-neutral-100\" (click)=\"_handlePrevClick()\">\n          <ax-icon class=\"fa-solid fa-chevron-left\"> </ax-icon>\n        </button>\n        <ng-container *ngIf=\"_size === 'SM'; else elseTemplate\">\n          <span class=\"ax-text-neutral-200\">|</span>\n        </ng-container>\n        <ng-template #elseTemplate>\n          <ax-button look=\"blank\" class=\"ax-sm\" text=\"Today\"> </ax-button>\n        </ng-template>\n        <button class=\"ax-w-8 ax-h-8 ax-rounded-md hover:ax-bg-neutral-100\" (click)=\"_handleNextClick()\">\n          <ax-icon class=\"fa-solid fa-chevron-right\"> </ax-icon>\n        </button>\n      </div>\n      <ax-button [text]=\"_size === 'SM' ? '' : 'Week View'\" class=\"!ax-bg-surface ax-border\">\n        <ax-suffix>\n          <ax-icon [class]=\"\n              _size === 'SM'\n                ? 'fa-solid fa-ellipsis-vertical'\n                : 'fa-solid fa-chevron-down ax-text-neutral-400'\n            \">\n          </ax-icon>\n        </ax-suffix>\n        <ax-dropdown-panel (onItemClick)=\"handleOnItemClick()\" [adaptivityEnabled]=\"true\">\n          <ax-button-item *ngIf=\"_size === 'SM' || _size === 'MD'\" text=\"Add Event\" name=\"text\" [divided]=\"true\"\n            color=\"primary\">\n          </ax-button-item>\n          <ax-button-item *ngIf=\"_size === 'SM'\" text=\"Go to Today\" name=\"text\" [divided]=\"true\">\n          </ax-button-item>\n          <ax-button-item text=\"Day View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Week View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Month View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Year View\" name=\"text\"> </ax-button-item>\n        </ax-dropdown-panel>\n        <ax-suffix>\n          <ax-icon icon=\"\"></ax-icon>\n        </ax-suffix>\n      </ax-button>\n      <ax-button color=\"primary\" text=\"Add Event\" class=\"ax-hidden lg:ax-block\">\n        <ax-prefix>\n          <ax-icon class=\"fa-solid fa-plus\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n  <ax-scheduler-month-view [date]=\"current\"></ax-scheduler-month-view>\n  <!-- <ax-scheduler-week-view></ax-scheduler-week-view> -->\n</div>", styles: ["ax-scheduler{height:100%;display:block;border-width:1px;border-radius:.75rem;background-color:rgba(var(--ax-color-neutral-100));overflow:hidden}ax-scheduler .scheduler-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom-width:1px}ax-scheduler .scheduler-header p{margin:0;font-size:1rem;font-weight:500}ax-scheduler .scheduler-actions{display:flex;gap:.75rem}ax-scheduler ax-scheduler-month-view{display:flex;flex-direction:column;flex:1 1 auto}ax-scheduler ax-scheduler-month-view .mobile-task:hover ax-button{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { 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-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: ["date"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSchedulerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: AXSchedulerComponent, selector: "ax-scheduler", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-h-full\">\n  <div class=\"scheduler-header\">\n    <p>\n      {{ current.format('MMMM yyyy') }}\n    </p>\n    <div class=\"scheduler-actions\">\n      <div class=\"ax-flex ax-border ax-rounded-md ax-items-center ax-px-1 ax-gap-0.5 ax-bg-surface\">\n        <button class=\"ax-w-8 ax-h-8 ax-rounded-md hover:ax-bg-neutral-100\" (click)=\"_handlePrevClick()\">\n          <ax-icon class=\"fa-solid fa-chevron-left\"> </ax-icon>\n        </button>\n        <ng-container *ngIf=\"_size === 'SM'; else elseTemplate\">\n          <span class=\"ax-text-neutral-200\">|</span>\n        </ng-container>\n        <ng-template #elseTemplate>\n          <ax-button look=\"blank\" class=\"ax-sm\" text=\"Today\"> </ax-button>\n        </ng-template>\n        <button class=\"ax-w-8 ax-h-8 ax-rounded-md hover:ax-bg-neutral-100\" (click)=\"_handleNextClick()\">\n          <ax-icon class=\"fa-solid fa-chevron-right\"> </ax-icon>\n        </button>\n      </div>\n      <ax-button [text]=\"_size === 'SM' ? '' : 'Week View'\" class=\"!ax-bg-surface ax-border\">\n        <ax-suffix>\n          <ax-icon [class]=\"\n              _size === 'SM'\n                ? 'fa-solid fa-ellipsis-vertical'\n                : 'fa-solid fa-chevron-down ax-text-neutral-400'\n            \">\n          </ax-icon>\n        </ax-suffix>\n        <ax-dropdown-panel (onItemClick)=\"handleOnItemClick()\" [adaptivityEnabled]=\"true\">\n          <ax-button-item *ngIf=\"_size === 'SM' || _size === 'MD'\" text=\"Add Event\" name=\"text\" [divided]=\"true\"\n            color=\"primary\">\n          </ax-button-item>\n          <ax-button-item *ngIf=\"_size === 'SM'\" text=\"Go to Today\" name=\"text\" [divided]=\"true\">\n          </ax-button-item>\n          <ax-button-item text=\"Day View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Week View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Month View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Year View\" name=\"text\"> </ax-button-item>\n        </ax-dropdown-panel>\n        <ax-suffix>\n          <ax-icon icon=\"\"></ax-icon>\n        </ax-suffix>\n      </ax-button>\n      <ax-button color=\"primary\" text=\"Add Event\" class=\"ax-hidden lg:ax-block\">\n        <ax-prefix>\n          <ax-icon class=\"fa-solid fa-plus\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n  <ax-scheduler-month-view [date]=\"current\"></ax-scheduler-month-view>\n  <!-- <ax-scheduler-week-view></ax-scheduler-week-view> -->\n</div>", styles: ["ax-scheduler{height:100%;display:block;border-width:1px;border-radius:.75rem;background-color:rgba(var(--ax-color-neutral-100));overflow:hidden}ax-scheduler .scheduler-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom-width:1px}ax-scheduler .scheduler-header p{margin:0;font-size:1rem;font-weight:500}ax-scheduler .scheduler-actions{display:flex;gap:.75rem}ax-scheduler ax-scheduler-month-view{display:flex;flex-direction:column;flex:1 1 auto}ax-scheduler ax-scheduler-month-view .mobile-task:hover ax-button{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { 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-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: ["date"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSchedulerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSchedulerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-scheduler', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-flex ax-flex-col ax-h-full\">\n  <div class=\"scheduler-header\">\n    <p>\n      {{ current.format('MMMM yyyy') }}\n    </p>\n    <div class=\"scheduler-actions\">\n      <div class=\"ax-flex ax-border ax-rounded-md ax-items-center ax-px-1 ax-gap-0.5 ax-bg-surface\">\n        <button class=\"ax-w-8 ax-h-8 ax-rounded-md hover:ax-bg-neutral-100\" (click)=\"_handlePrevClick()\">\n          <ax-icon class=\"fa-solid fa-chevron-left\"> </ax-icon>\n        </button>\n        <ng-container *ngIf=\"_size === 'SM'; else elseTemplate\">\n          <span class=\"ax-text-neutral-200\">|</span>\n        </ng-container>\n        <ng-template #elseTemplate>\n          <ax-button look=\"blank\" class=\"ax-sm\" text=\"Today\"> </ax-button>\n        </ng-template>\n        <button class=\"ax-w-8 ax-h-8 ax-rounded-md hover:ax-bg-neutral-100\" (click)=\"_handleNextClick()\">\n          <ax-icon class=\"fa-solid fa-chevron-right\"> </ax-icon>\n        </button>\n      </div>\n      <ax-button [text]=\"_size === 'SM' ? '' : 'Week View'\" class=\"!ax-bg-surface ax-border\">\n        <ax-suffix>\n          <ax-icon [class]=\"\n              _size === 'SM'\n                ? 'fa-solid fa-ellipsis-vertical'\n                : 'fa-solid fa-chevron-down ax-text-neutral-400'\n            \">\n          </ax-icon>\n        </ax-suffix>\n        <ax-dropdown-panel (onItemClick)=\"handleOnItemClick()\" [adaptivityEnabled]=\"true\">\n          <ax-button-item *ngIf=\"_size === 'SM' || _size === 'MD'\" text=\"Add Event\" name=\"text\" [divided]=\"true\"\n            color=\"primary\">\n          </ax-button-item>\n          <ax-button-item *ngIf=\"_size === 'SM'\" text=\"Go to Today\" name=\"text\" [divided]=\"true\">\n          </ax-button-item>\n          <ax-button-item text=\"Day View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Week View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Month View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Year View\" name=\"text\"> </ax-button-item>\n        </ax-dropdown-panel>\n        <ax-suffix>\n          <ax-icon icon=\"\"></ax-icon>\n        </ax-suffix>\n      </ax-button>\n      <ax-button color=\"primary\" text=\"Add Event\" class=\"ax-hidden lg:ax-block\">\n        <ax-prefix>\n          <ax-icon class=\"fa-solid fa-plus\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n  <ax-scheduler-month-view [date]=\"current\"></ax-scheduler-month-view>\n  <!-- <ax-scheduler-week-view></ax-scheduler-week-view> -->\n</div>", styles: ["ax-scheduler{height:100%;display:block;border-width:1px;border-radius:.75rem;background-color:rgba(var(--ax-color-neutral-100));overflow:hidden}ax-scheduler .scheduler-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom-width:1px}ax-scheduler .scheduler-header p{margin:0;font-size:1rem;font-weight:500}ax-scheduler .scheduler-actions{display:flex;gap:.75rem}ax-scheduler ax-scheduler-month-view{display:flex;flex-direction:column;flex:1 1 auto}ax-scheduler ax-scheduler-month-view .mobile-task:hover ax-button{opacity:1}\n"] }]
         }] });
@@ -104,11 +104,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
 const COMPONENT = [AXSchedulerComponent, AXSchedulerMonthViewComponent, AXSchedulerWeekViewComponent];
 const MODULES = [CommonModule, AXButtonModule, AXDecoratorModule, AXDropdownModule, AXDateTimeModule];
 class AXSchedulerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSchedulerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: AXSchedulerModule, declarations: [AXSchedulerComponent, AXSchedulerMonthViewComponent, AXSchedulerWeekViewComponent], imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXDropdownModule, AXDateTimeModule], exports: [AXSchedulerComponent, AXSchedulerMonthViewComponent, AXSchedulerWeekViewComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSchedulerModule, imports: [MODULES] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSchedulerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: AXSchedulerModule, declarations: [AXSchedulerComponent, AXSchedulerMonthViewComponent, AXSchedulerWeekViewComponent], imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXDropdownModule, AXDateTimeModule], exports: [AXSchedulerComponent, AXSchedulerMonthViewComponent, AXSchedulerWeekViewComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSchedulerModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSchedulerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSchedulerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],

package/fesm2022/acorex-components-scheduler.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"acorex-components-scheduler.mjs","sources":["../../../../libs/components/scheduler/src/lib/scheduler-month-view.component.ts","../../../../libs/components/scheduler/src/lib/scheduler-month-view.component.html","../../../../libs/components/scheduler/src/lib/scheduler-week-view.component.ts","../../../../libs/components/scheduler/src/lib/scheduler-week-view.component.html","../../../../libs/components/scheduler/src/lib/scheduler.component.ts","../../../../libs/components/scheduler/src/lib/scheduler.component.html","../../../../libs/components/scheduler/src/lib/scheduler.module.ts","../../../../libs/components/scheduler/src/acorex-components-scheduler.ts"],"sourcesContent":["import { MXBaseComponent } from '@acorex/components/common';\nimport { AXDateTime, AXDateTimeRange } from '@acorex/core/dateTime';\nimport { AXPlatform } from '@acorex/core/platform';\nimport { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, inject } from '@angular/core';\n\n@Component({\n selector: 'ax-scheduler-month-view',\n templateUrl: './scheduler-month-view.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AXSchedulerMonthViewComponent extends MXBaseComponent {\n private _platform = inject(AXPlatform);\n\n protected _slots: { date: AXDateTime; cssClass: { [key: string]: boolean }; isToday: boolean }[] = [];\n protected get dayNames(): string[] {\n return this._platform.is('SM')\n ? []\n : [];\n }\n\n private _date: AXDateTime;\n @Input()\n public get date(): AXDateTime {\n return this._date;\n }\n public set date(v: AXDateTime) {\n this._date = v;\n this.generateSlots();\n }\n\n ngOnInit() {\n super.ngOnInit();\n this.generateSlots();\n this._platform.resize.subscribe((c) => {\n this.cdr.markForCheck();\n });\n }\n\n generateSlots() {\n const startDate = this.date.startOf('month').startOf('week');\n const endDate = this.date.endOf('month').endOf('week');\n const range = new AXDateTimeRange(startDate, endDate).enumurate('day');\n this._slots = range.map((c: AXDateTime) => ({\n date: c,\n cssClass: {\n '!ax-bg-neutral-100': c.monthOfYear != this.date.monthOfYear,\n },\n isToday: c.dayOfYear == this.date.dayOfYear,\n }));\n }\n}\n","<!-- <div class=\"ax-flex ax-flex-col ax-flex-auto ax-shadow-md\"> -->\n<div class=\"ax-grid ax-grid-cols-7 ax-gap-[1px] ax-w-full ax-bg-neutral-200 ax-border-b\">\n <ng-container ngFor=\"let item of dayNames\">\n <div class=\"ax-flex ax-items-center ax-justify-center ax-py-2 ax-bg-white ax-font-medium\">\n {{item}}\n </div>\n </ng-container>\n</div>\n<div class=\"ax-flex ax-flex-auto ax-bg-neutral-200\">\n <div class=\"ax-grid ax-grid-cols-7 ax-gap-[1px] ax-w-full\">\n <ng-container ngFor=\"let item of _slots\">\n <div class=\"ax-py-2 ax-px-3 ax-bg-white ax-cursor-pointer hover:ax-bg-neutral-100\n ax-flex ax-flex-col ax-justify-between\" [ngClass]=\"item.cssClass\">\n <time class=\"ax-text-sm ax-flex ax-items-center ax-justify-center ax-rounded-full ax-w-6 ax-h-6\"\n [class.ax-bg-primary-500]=\"item.isToday\" [class.ax-text-white]=\"item.isToday\"\n datetime=\"item.date.format('dd')\">{{item.date.format('d')}}</time>\n <ol class=\"ax-mt-2 ax-hidden lg:ax-flex ax-flex-col ax-gap-1\">\n <li ngIf=\"item.date.dayOfMonth % 6 === 0\">\n <a href=\"#\"\n class=\"ax-flex ax-justify-between ax-text-sm ax-bg-primary-500 ax-py-1 ax-px-2 ax-rounded ax-text-primary-fore\">\n <p class=\"ax-text-sm\">Launch Time</p>\n <time class=\"ax-ms-3\" datetime=\"item.date.format('HH A')\">\n {{item.date.format('hh A')}}\n </time>\n </a>\n </li>\n <li ngIf=\"item.date.dayOfMonth % 5 === 0\">\n <a href=\"#\"\n class=\"ax-flex ax-justify-between ax-text-sm ax-bg-success-500 ax-py-1 ax-px-2 ax-rounded ax-text-success-fore\">\n <p class=\"ax-text-sm\">Daily meeting</p>\n <time class=\"ax-ms-3\" datetime=\"item.date.format('HH A')\">\n {{item.date.format('hh A')}}\n </time>\n </a>\n </li>\n </ol>\n <ol class=\"ax-flex ax-gap-1 ax-self-center md:ax-hidden\">\n <li ngIf=\"item.date.dayOfMonth % 5 === 0\">\n <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-primary-500 lg:ax-hidden\"></span>\n </li>\n <li ngIf=\"item.date.dayOfMonth % 6 === 0\">\n <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-danger-500 lg:ax-hidden\"></span>\n </li>\n <li ngIf=\"item.date.dayOfMonth % 8 === 0\">\n <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-warning-500 lg:ax-hidden\"></span>\n </li>\n <li ngIf=\"item.date.dayOfMonth % 3 === 0\">\n <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-success-500 lg:ax-hidden\"></span>\n </li>\n </ol>\n </div>\n </ng-container>\n </div>\n</div>\n<!-- </div> -->\n<div class=\"ax-p-4 lg:ax-hidden\">\n <ol\n class=\"ax-flex ax-flex-col ax-rounded-lg ax-border ax-bg-surface ax-divide-y ax-overflow-hidden ax-cursor-pointer\">\n <li class=\"ax-flex ax-items-start ax-justify-between ax-p-4 hover:ax-bg-neutral-100 mobile-task\">\n <div class=\"ax-flex ax-flex-col ax-gap-2\">\n <p class=\"ax-font-medium\">Daily Meeting at the Office</p>\n <div class=\"ax-flex ax-gap-2 ax-items-center\">\n <ax-icon class=\"fa-solid fa-clock ax-text-neutral-400\"></ax-icon>\n <p class=\"ax-text-sm\">3 PM</p>\n </div>\n </div>\n <ax-button text=\"Edit\" class=\"!ax-bg-surface ax-border ax-sm ax-opacity-0\"></ax-button>\n </li>\n </ol>\n</div>","import { MXBaseComponent } from '@acorex/components/common';\nimport { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'ax-scheduler-week-view',\n templateUrl: './scheduler-week-view.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AXSchedulerWeekViewComponent extends MXBaseComponent {}\n","<div class=\"ax-flex ax-flex-col ax-flex-auto ax-isolate ax-overflow-auto ax-bg-white\">\n <div class=\"ax-flex ax-flex-col ax-max-w-full\">\n <div class=\"ax-shadow-md ax-pr-8 ax-z-30 ax-sticky ax-top-0\">\n <div class=\"ax-grid ax-leading-6 ax-border-r ax-grid-cols-7\">\n <div class=\"ax-w-14 ax-col-end-1\"></div>\n <div\n class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-l ax-border-r\">\n Mon 10\n </div>\n <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n Mon 10\n </div>\n <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n Mon 10\n </div>\n <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n Mon 10\n </div>\n <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n Mon 10\n </div>\n <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n Mon 10\n </div>\n <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium\">\n Mon 10\n </div>\n </div>\n </div>\n <div class=\"ax-flex ax-flex-auto\">\n <div class=\"ax-w-14 ax-z-10 ax-sticky ax-left-0 ax-bg-white ax-shadow\"></div>\n <div class=\"ax-grid ax-flex-auto ax-grid-cols-1 ax-grid-rows-1\">\n <div class=\"ax-grid ax-col-start-1 ax-col-end-2 ax-row-start-1\"\n style=\"grid-template-rows: repeat(45, minmax(3.5rem, 1fr))\">\n <div class=\"ax-row-end-1 ax-h-7\"></div>\n <div class=\"ax-border-t ax-border-b\">\n <div class=\"ax-leading-5 ax-text-right ax-w-14 -ax-mt-[0.625rem] -ax-ml-14 ax-sticky ax-left-0\">\n </div>\n </div>\n </div>\n <div class=\"ax-grid ax-grid-rows-1 ax-grid-cols-7 ax-row-start-1 ax-col-end-2 ax-col-start-1\">\n <div class=\"ax-col-start-1 ax-row-start-1 ax-row-end-[-1]\"></div>\n <div class=\"ax-col-start-2 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n <div class=\"ax-col-start-3 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n <div class=\"ax-col-start-4 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n <div class=\"ax-col-start-5 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n <div class=\"ax-col-start-6 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n <div class=\"ax-col-start-7 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n <div class=\"ax-col-start-8 ax-row-start-1 ax-row-end-[-1] ax-border-l ax-w-8\"></div>\n </div>\n <ol class=\"ax-grid ax-pr-8 ax-grid-cols-7 ax-row-start-1 ax-col-end-2 ax-col-start-2\"\n style=\"grid-template-rows: 1.75rem repeat(288, minmax(0px, 1fr)) auto\"></ol>\n </div>\n </div>\n </div>\n</div>","import { MXBaseComponent } from '@acorex/components/common';\nimport { AXCalendarService, AXDateTime } from '@acorex/core/dateTime';\nimport { AXPlatform, AXScreenSizes } from '@acorex/core/platform';\nimport { ChangeDetectionStrategy, Component, ViewEncapsulation, inject } from '@angular/core';\n\n@Component({\n selector: 'ax-scheduler',\n templateUrl: './scheduler.component.html',\n styleUrls: ['./scheduler.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AXSchedulerComponent extends MXBaseComponent {\n private _calendarService: AXCalendarService = inject(AXCalendarService);\n protected _platform: AXPlatform = inject(AXPlatform);\n protected current: AXDateTime = this._calendarService.now();\n\n protected _size: AXScreenSizes;\n\n handleOnItemClick() {}\n\n ngOnInit(): void {\n super.ngOnInit();\n this.detectSize();\n this._platform.resize.subscribe(() => {\n this.detectSize();\n super.cdr.markForCheck();\n });\n }\n\n private detectSize() {\n this._size = this._platform.screenSize;\n }\n\n _handleNextClick() {\n this.current = this.current.add('month', 1);\n }\n\n _handlePrevClick() {\n this.current = this.current.add('month', -1);\n }\n}\n","<div class=\"ax-flex ax-flex-col ax-h-full\">\n <div class=\"scheduler-header\">\n <p>\n {{ current.format('MMMM yyyy') }}\n </p>\n <div class=\"scheduler-actions\">\n <div class=\"ax-flex ax-border ax-rounded-md ax-items-center ax-px-1 ax-gap-0.5 ax-bg-surface\">\n <button class=\"ax-w-8 ax-h-8 ax-rounded-md hover:ax-bg-neutral-100\" (click)=\"_handlePrevClick()\">\n <ax-icon class=\"fa-solid fa-chevron-left\"> </ax-icon>\n </button>\n <ng-container ngIf=\"_size === 'SM'; else elseTemplate\">\n <span class=\"ax-text-neutral-200\">\|</span>\n </ng-container>\n <ng-template #elseTemplate>\n <ax-button look=\"blank\" class=\"ax-sm\" text=\"Today\"> </ax-button>\n </ng-template>\n <button class=\"ax-w-8 ax-h-8 ax-rounded-md hover:ax-bg-neutral-100\" (click)=\"_handleNextClick()\">\n <ax-icon class=\"fa-solid fa-chevron-right\"> </ax-icon>\n </button>\n </div>\n <ax-button [text]=\"_size === 'SM' ? '' : 'Week View'\" class=\"!ax-bg-surface ax-border\">\n <ax-suffix>\n <ax-icon [class]=\"\n _size === 'SM'\n ? 'fa-solid fa-ellipsis-vertical'\n : 'fa-solid fa-chevron-down ax-text-neutral-400'\n \">\n </ax-icon>\n </ax-suffix>\n <ax-dropdown-panel (onItemClick)=\"handleOnItemClick()\" [adaptivityEnabled]=\"true\">\n <ax-button-item ngIf=\"_size === 'SM' \|\| _size === 'MD'\" text=\"Add Event\" name=\"text\" [divided]=\"true\"\n color=\"primary\">\n </ax-button-item>\n <ax-button-item ngIf=\"_size === 'SM'\" text=\"Go to Today\" name=\"text\" [divided]=\"true\">\n </ax-button-item>\n <ax-button-item text=\"Day View\" name=\"text\"> </ax-button-item>\n <ax-button-item text=\"Week View\" name=\"text\"> </ax-button-item>\n <ax-button-item text=\"Month View\" name=\"text\"> </ax-button-item>\n <ax-button-item text=\"Year View\" name=\"text\"> </ax-button-item>\n </ax-dropdown-panel>\n <ax-suffix>\n <ax-icon icon=\"\"></ax-icon>\n </ax-suffix>\n </ax-button>\n <ax-button color=\"primary\" text=\"Add Event\" class=\"ax-hidden lg:ax-block\">\n <ax-prefix>\n <ax-icon class=\"fa-solid fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n </div>\n </div>\n <ax-scheduler-month-view [date]=\"current\"></ax-scheduler-month-view>\n <!-- <ax-scheduler-week-view></ax-scheduler-week-view> -->\n</div>","import { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXDropdownModule } from '@acorex/components/dropdown';\nimport { AXDateTimeModule } from '@acorex/core/dateTime';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXSchedulerMonthViewComponent } from './scheduler-month-view.component';\nimport { AXSchedulerWeekViewComponent } from './scheduler-week-view.component';\nimport { AXSchedulerComponent } from './scheduler.component';\n\nconst COMPONENT = [AXSchedulerComponent, AXSchedulerMonthViewComponent, AXSchedulerWeekViewComponent];\nconst MODULES = [CommonModule, AXButtonModule, AXDecoratorModule, AXDropdownModule, AXDateTimeModule];\n\n@NgModule({\n declarations: [...COMPONENT],\n imports: [...MODULES],\n exports: [...COMPONENT],\n providers: [],\n})\nexport class AXSchedulerModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["i5.AXSchedulerMonthViewComponent"],"mappings":"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"}
1	+ {"version":3,"file":"acorex-components-scheduler.mjs","sources":["../../../../libs/components/scheduler/src/lib/scheduler-month-view.component.ts","../../../../libs/components/scheduler/src/lib/scheduler-month-view.component.html","../../../../libs/components/scheduler/src/lib/scheduler-week-view.component.ts","../../../../libs/components/scheduler/src/lib/scheduler-week-view.component.html","../../../../libs/components/scheduler/src/lib/scheduler.component.ts","../../../../libs/components/scheduler/src/lib/scheduler.component.html","../../../../libs/components/scheduler/src/lib/scheduler.module.ts","../../../../libs/components/scheduler/src/acorex-components-scheduler.ts"],"sourcesContent":["import { MXBaseComponent } from '@acorex/components/common';\nimport { AXDateTime, AXDateTimeRange } from '@acorex/core/dateTime';\nimport { AXPlatform } from '@acorex/core/platform';\nimport { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, inject } from '@angular/core';\n\n@Component({\n selector: 'ax-scheduler-month-view',\n templateUrl: './scheduler-month-view.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AXSchedulerMonthViewComponent extends MXBaseComponent {\n private _platform = inject(AXPlatform);\n\n protected _slots: { date: AXDateTime; cssClass: { [key: string]: boolean }; isToday: boolean }[] = [];\n protected get dayNames(): string[] {\n return this._platform.is('SM')\n ? []\n : [];\n }\n\n private _date: AXDateTime;\n @Input()\n public get date(): AXDateTime {\n return this._date;\n }\n public set date(v: AXDateTime) {\n this._date = v;\n this.generateSlots();\n }\n\n ngOnInit() {\n super.ngOnInit();\n this.generateSlots();\n this._platform.resize.subscribe((c) => {\n this.cdr.markForCheck();\n });\n }\n\n generateSlots() {\n const startDate = this.date.startOf('month').startOf('week');\n const endDate = this.date.endOf('month').endOf('week');\n const range = new AXDateTimeRange(startDate, endDate).enumurate('day');\n this._slots = range.map((c: AXDateTime) => ({\n date: c,\n cssClass: {\n '!ax-bg-neutral-100': c.monthOfYear != this.date.monthOfYear,\n },\n isToday: c.dayOfYear == this.date.dayOfYear,\n }));\n }\n}\n","<!-- <div class=\"ax-flex ax-flex-col ax-flex-auto ax-shadow-md\"> -->\n<div class=\"ax-grid ax-grid-cols-7 ax-gap-[1px] ax-w-full ax-bg-neutral-200 ax-border-b\">\n <ng-container ngFor=\"let item of dayNames\">\n <div class=\"ax-flex ax-items-center ax-justify-center ax-py-2 ax-bg-white ax-font-medium\">\n {{item}}\n </div>\n </ng-container>\n</div>\n<div class=\"ax-flex ax-flex-auto ax-bg-neutral-200\">\n <div class=\"ax-grid ax-grid-cols-7 ax-gap-[1px] ax-w-full\">\n <ng-container ngFor=\"let item of _slots\">\n <div class=\"ax-py-2 ax-px-3 ax-bg-white ax-cursor-pointer hover:ax-bg-neutral-100\n ax-flex ax-flex-col ax-justify-between\" [ngClass]=\"item.cssClass\">\n <time class=\"ax-text-sm ax-flex ax-items-center ax-justify-center ax-rounded-full ax-w-6 ax-h-6\"\n [class.ax-bg-primary-500]=\"item.isToday\" [class.ax-text-white]=\"item.isToday\"\n datetime=\"item.date.format('dd')\">{{item.date.format('d')}}</time>\n <ol class=\"ax-mt-2 ax-hidden lg:ax-flex ax-flex-col ax-gap-1\">\n <li ngIf=\"item.date.dayOfMonth % 6 === 0\">\n <a href=\"#\"\n class=\"ax-flex ax-justify-between ax-text-sm ax-bg-primary-500 ax-py-1 ax-px-2 ax-rounded ax-text-primary-fore\">\n <p class=\"ax-text-sm\">Launch Time</p>\n <time class=\"ax-ms-3\" datetime=\"item.date.format('HH A')\">\n {{item.date.format('hh A')}}\n </time>\n </a>\n </li>\n <li ngIf=\"item.date.dayOfMonth % 5 === 0\">\n <a href=\"#\"\n class=\"ax-flex ax-justify-between ax-text-sm ax-bg-success-500 ax-py-1 ax-px-2 ax-rounded ax-text-success-fore\">\n <p class=\"ax-text-sm\">Daily meeting</p>\n <time class=\"ax-ms-3\" datetime=\"item.date.format('HH A')\">\n {{item.date.format('hh A')}}\n </time>\n </a>\n </li>\n </ol>\n <ol class=\"ax-flex ax-gap-1 ax-self-center md:ax-hidden\">\n <li ngIf=\"item.date.dayOfMonth % 5 === 0\">\n <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-primary-500 lg:ax-hidden\"></span>\n </li>\n <li ngIf=\"item.date.dayOfMonth % 6 === 0\">\n <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-danger-500 lg:ax-hidden\"></span>\n </li>\n <li ngIf=\"item.date.dayOfMonth % 8 === 0\">\n <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-warning-500 lg:ax-hidden\"></span>\n </li>\n <li ngIf=\"item.date.dayOfMonth % 3 === 0\">\n <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-success-500 lg:ax-hidden\"></span>\n </li>\n </ol>\n </div>\n </ng-container>\n </div>\n</div>\n<!-- </div> -->\n<div class=\"ax-p-4 lg:ax-hidden\">\n <ol\n class=\"ax-flex ax-flex-col ax-rounded-lg ax-border ax-bg-surface ax-divide-y ax-overflow-hidden ax-cursor-pointer\">\n <li class=\"ax-flex ax-items-start ax-justify-between ax-p-4 hover:ax-bg-neutral-100 mobile-task\">\n <div class=\"ax-flex ax-flex-col ax-gap-2\">\n <p class=\"ax-font-medium\">Daily Meeting at the Office</p>\n <div class=\"ax-flex ax-gap-2 ax-items-center\">\n <ax-icon class=\"fa-solid fa-clock ax-text-neutral-400\"></ax-icon>\n <p class=\"ax-text-sm\">3 PM</p>\n </div>\n </div>\n <ax-button text=\"Edit\" class=\"!ax-bg-surface ax-border ax-sm ax-opacity-0\"></ax-button>\n </li>\n </ol>\n</div>","import { MXBaseComponent } from '@acorex/components/common';\nimport { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'ax-scheduler-week-view',\n templateUrl: './scheduler-week-view.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AXSchedulerWeekViewComponent extends MXBaseComponent {}\n","<div class=\"ax-flex ax-flex-col ax-flex-auto ax-isolate ax-overflow-auto ax-bg-white\">\n <div class=\"ax-flex ax-flex-col ax-max-w-full\">\n <div class=\"ax-shadow-md ax-pr-8 ax-z-30 ax-sticky ax-top-0\">\n <div class=\"ax-grid ax-leading-6 ax-border-r ax-grid-cols-7\">\n <div class=\"ax-w-14 ax-col-end-1\"></div>\n <div\n class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-l ax-border-r\">\n Mon 10\n </div>\n <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n Mon 10\n </div>\n <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n Mon 10\n </div>\n <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n Mon 10\n </div>\n <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n Mon 10\n </div>\n <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n Mon 10\n </div>\n <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium\">\n Mon 10\n </div>\n </div>\n </div>\n <div class=\"ax-flex ax-flex-auto\">\n <div class=\"ax-w-14 ax-z-10 ax-sticky ax-left-0 ax-bg-white ax-shadow\"></div>\n <div class=\"ax-grid ax-flex-auto ax-grid-cols-1 ax-grid-rows-1\">\n <div class=\"ax-grid ax-col-start-1 ax-col-end-2 ax-row-start-1\"\n style=\"grid-template-rows: repeat(45, minmax(3.5rem, 1fr))\">\n <div class=\"ax-row-end-1 ax-h-7\"></div>\n <div class=\"ax-border-t ax-border-b\">\n <div class=\"ax-leading-5 ax-text-right ax-w-14 -ax-mt-[0.625rem] -ax-ml-14 ax-sticky ax-left-0\">\n </div>\n </div>\n </div>\n <div class=\"ax-grid ax-grid-rows-1 ax-grid-cols-7 ax-row-start-1 ax-col-end-2 ax-col-start-1\">\n <div class=\"ax-col-start-1 ax-row-start-1 ax-row-end-[-1]\"></div>\n <div class=\"ax-col-start-2 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n <div class=\"ax-col-start-3 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n <div class=\"ax-col-start-4 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n <div class=\"ax-col-start-5 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n <div class=\"ax-col-start-6 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n <div class=\"ax-col-start-7 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n <div class=\"ax-col-start-8 ax-row-start-1 ax-row-end-[-1] ax-border-l ax-w-8\"></div>\n </div>\n <ol class=\"ax-grid ax-pr-8 ax-grid-cols-7 ax-row-start-1 ax-col-end-2 ax-col-start-2\"\n style=\"grid-template-rows: 1.75rem repeat(288, minmax(0px, 1fr)) auto\"></ol>\n </div>\n </div>\n </div>\n</div>","import { MXBaseComponent } from '@acorex/components/common';\nimport { AXCalendarService, AXDateTime } from '@acorex/core/dateTime';\nimport { AXPlatform, AXScreenSizes } from '@acorex/core/platform';\nimport { ChangeDetectionStrategy, Component, ViewEncapsulation, inject } from '@angular/core';\n\n@Component({\n selector: 'ax-scheduler',\n templateUrl: './scheduler.component.html',\n styleUrls: ['./scheduler.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AXSchedulerComponent extends MXBaseComponent {\n private _calendarService: AXCalendarService = inject(AXCalendarService);\n protected _platform: AXPlatform = inject(AXPlatform);\n protected current: AXDateTime = this._calendarService.now();\n\n protected _size: AXScreenSizes;\n\n handleOnItemClick() {}\n\n ngOnInit(): void {\n super.ngOnInit();\n this.detectSize();\n this._platform.resize.subscribe(() => {\n this.detectSize();\n super.cdr.markForCheck();\n });\n }\n\n private detectSize() {\n this._size = this._platform.screenSize;\n }\n\n _handleNextClick() {\n this.current = this.current.add('month', 1);\n }\n\n _handlePrevClick() {\n this.current = this.current.add('month', -1);\n }\n}\n","<div class=\"ax-flex ax-flex-col ax-h-full\">\n <div class=\"scheduler-header\">\n <p>\n {{ current.format('MMMM yyyy') }}\n </p>\n <div class=\"scheduler-actions\">\n <div class=\"ax-flex ax-border ax-rounded-md ax-items-center ax-px-1 ax-gap-0.5 ax-bg-surface\">\n <button class=\"ax-w-8 ax-h-8 ax-rounded-md hover:ax-bg-neutral-100\" (click)=\"_handlePrevClick()\">\n <ax-icon class=\"fa-solid fa-chevron-left\"> </ax-icon>\n </button>\n <ng-container ngIf=\"_size === 'SM'; else elseTemplate\">\n <span class=\"ax-text-neutral-200\">\|</span>\n </ng-container>\n <ng-template #elseTemplate>\n <ax-button look=\"blank\" class=\"ax-sm\" text=\"Today\"> </ax-button>\n </ng-template>\n <button class=\"ax-w-8 ax-h-8 ax-rounded-md hover:ax-bg-neutral-100\" (click)=\"_handleNextClick()\">\n <ax-icon class=\"fa-solid fa-chevron-right\"> </ax-icon>\n </button>\n </div>\n <ax-button [text]=\"_size === 'SM' ? '' : 'Week View'\" class=\"!ax-bg-surface ax-border\">\n <ax-suffix>\n <ax-icon [class]=\"\n _size === 'SM'\n ? 'fa-solid fa-ellipsis-vertical'\n : 'fa-solid fa-chevron-down ax-text-neutral-400'\n \">\n </ax-icon>\n </ax-suffix>\n <ax-dropdown-panel (onItemClick)=\"handleOnItemClick()\" [adaptivityEnabled]=\"true\">\n <ax-button-item ngIf=\"_size === 'SM' \|\| _size === 'MD'\" text=\"Add Event\" name=\"text\" [divided]=\"true\"\n color=\"primary\">\n </ax-button-item>\n <ax-button-item ngIf=\"_size === 'SM'\" text=\"Go to Today\" name=\"text\" [divided]=\"true\">\n </ax-button-item>\n <ax-button-item text=\"Day View\" name=\"text\"> </ax-button-item>\n <ax-button-item text=\"Week View\" name=\"text\"> </ax-button-item>\n <ax-button-item text=\"Month View\" name=\"text\"> </ax-button-item>\n <ax-button-item text=\"Year View\" name=\"text\"> </ax-button-item>\n </ax-dropdown-panel>\n <ax-suffix>\n <ax-icon icon=\"\"></ax-icon>\n </ax-suffix>\n </ax-button>\n <ax-button color=\"primary\" text=\"Add Event\" class=\"ax-hidden lg:ax-block\">\n <ax-prefix>\n <ax-icon class=\"fa-solid fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n </div>\n </div>\n <ax-scheduler-month-view [date]=\"current\"></ax-scheduler-month-view>\n <!-- <ax-scheduler-week-view></ax-scheduler-week-view> -->\n</div>","import { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXDropdownModule } from '@acorex/components/dropdown';\nimport { AXDateTimeModule } from '@acorex/core/dateTime';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXSchedulerMonthViewComponent } from './scheduler-month-view.component';\nimport { AXSchedulerWeekViewComponent } from './scheduler-week-view.component';\nimport { AXSchedulerComponent } from './scheduler.component';\n\nconst COMPONENT = [AXSchedulerComponent, AXSchedulerMonthViewComponent, AXSchedulerWeekViewComponent];\nconst MODULES = [CommonModule, AXButtonModule, AXDecoratorModule, AXDropdownModule, AXDateTimeModule];\n\n@NgModule({\n declarations: [...COMPONENT],\n imports: [...MODULES],\n exports: [...COMPONENT],\n providers: [],\n})\nexport class AXSchedulerModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["i5.AXSchedulerMonthViewComponent"],"mappings":"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"}

package/fesm2022/acorex-components-search-box.mjs CHANGED Viewed

@@ -28,8 +28,8 @@ class AXSearchBoxComponent extends classes((MXInputBaseValueComponent), MXLookCo
     get __hostClass() {
         return ['ax-editor-container', `ax-look-${this.look}`, `${this.disabled ? 'ax-state-disabled' : ''}`];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSearchBoxComponent, deps: [{ token: AXSearchableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", value: "value", state: "state", name: "name", id: "id", look: "look", delayTime: "delayTime" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onKeyPress: "onKeyPress" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSearchBoxComponent, deps: [{ token: AXSearchableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.1", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", value: "value", state: "state", name: "name", id: "id", look: "look", delayTime: "delayTime" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onKeyPress: "onKeyPress" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             { provide: AXComponent, useExisting: AXSearchBoxComponent },
             { provide: AXFocusableComponent, useExisting: AXSearchBoxComponent },
             { provide: AXClearableComponent, useExisting: AXSearchBoxComponent },
@@ -41,7 +41,7 @@ class AXSearchBoxComponent extends classes((MXInputBaseValueComponent), MXLookCo
             },
         ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"> </ng-content>\n<span class=\"ax-icon ax-icon-search ax-editor-control\"></span>\n<input #input class=\"ax-input\" [attr.name]=\"name\" [attr.placeholder]=\"(placeholder ?? 'search') | translate | async \"\n  [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n  [tabindex]=\"tabIndex\" [ngModel]=\"value\" [delayTime]=\"delayTime\" (axDelayedValueChanged)=\"_handleModelChange($event)\"\n  (keydown)=\"emitOnKeydownEvent($event)\" (keyup)=\"emitOnKeyupEvent($event)\" (keypress)=\"emitOnKeypressEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" />\n\n@if(input.value && !disabled && !readonly){\n<ng-content select=\"ax-clear-button\"></ng-content>\n}\n<ng-content select=\"ax-suffix\"> </ng-content>", dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.AXNgModelDelayedValueChangedDirective, selector: "[axDelayedValueChanged]", inputs: ["delayTime"], outputs: ["axDelayedValueChanged", "axDelayTimeChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSearchBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSearchBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-search-box', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id', 'look'], outputs: [
                         'valueChange',
@@ -88,22 +88,22 @@ const MODULES = [
     AXNgModelDelayedValueChangedDirective,
 ];
 class AXSearchBoxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSearchBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: AXSearchBoxModule, declarations: [AXSearchBoxComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSearchBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: AXSearchBoxModule, declarations: [AXSearchBoxComponent], imports: [CommonModule,
             FormsModule,
             AXTranslationModule,
             AXDecoratorModule,
             AXTextBoxModule,
             AXButtonModule,
             AXNgModelDelayedValueChangedDirective], exports: [AXSearchBoxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSearchBoxModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSearchBoxModule, imports: [CommonModule,
             FormsModule,
             AXTranslationModule,
             AXDecoratorModule,
             AXTextBoxModule,
             AXButtonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSearchBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSearchBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],

package/fesm2022/acorex-components-select-box.mjs CHANGED Viewed

@@ -6,7 +6,7 @@ import { AXListComponent, AXListModule } from '@acorex/components/list';
 import { AXSearchBoxComponent } from '@acorex/components/search-box';
 import { AXUnsubscriber } from '@acorex/core/utils';
 import * as i0 from '@angular/core';
-import { inject, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, ContentChild, HostListener, NgModule } from '@angular/core';
+import { inject, signal, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, ContentChild, HostListener, NgModule } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { last, findLastIndex, nth } from 'lodash-es';
@@ -34,7 +34,7 @@ class AXSelectBoxComponent extends classes(MXDropdownBoxBaseComponent, MXSelecti
     constructor() {
         super(...arguments);
         this.hotKeyService = inject(AXHotkeysService);
-        this.isLoading = false;
+        this.isLoading = signal(false);
         this.renderList = false;
         this.dropdownSizes = { width: '100%', height: 'auto' };
         this._listDataSource = convertArrayToDataSource([], {
@@ -59,6 +59,14 @@ class AXSelectBoxComponent extends classes(MXDropdownBoxBaseComponent, MXSelecti
         this._listDataSource.onChanged.subscribe((data) => {
             this.setDropdownSize(data.totalCount);
         });
+        this._listDataSource.onLoadingChanged.subscribe((loading) => {
+            this.isLoading.set(loading);
+        });
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        //
+        this.registerValidation();
     }
     ngAfterViewInit() {
         this.setDropdownSize();
@@ -201,8 +209,8 @@ class AXSelectBoxComponent extends classes(MXDropdownBoxBaseComponent, MXSelecti
         this.list?.refresh();
         this.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSelectBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", minValue: "minValue", maxValue: "maxValue", value: "value", state: "state", name: "name", id: "id", type: "type", look: "look", multiple: "multiple", valueField: "valueField", textField: "textField", dataSource: "dataSource", itemTemplate: "itemTemplate", emptyTemplate: "emptyTemplate", loadingTemplate: "loadingTemplate" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { listeners: { "keydown": "_handleKeydown($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSelectBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.1", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", minValue: "minValue", maxValue: "maxValue", value: "value", state: "state", name: "name", id: "id", type: "type", look: "look", multiple: "multiple", valueField: "valueField", textField: "textField", dataSource: "dataSource", itemTemplate: "itemTemplate", emptyTemplate: "emptyTemplate", loadingTemplate: "loadingTemplate" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { listeners: { "keydown": "_handleKeydown($event)" } }, providers: [
             { provide: AXComponent, useExisting: AXSelectBoxComponent },
             { provide: AXFocusableComponent, useExisting: AXSelectBoxComponent },
             { provide: AXValuableComponent, useExisting: AXSelectBoxComponent },
@@ -219,9 +227,9 @@ class AXSelectBoxComponent extends classes(MXDropdownBoxBaseComponent, MXSelecti
                 useClass: MXSelectionBridgeService,
             },
             AXUnsubscriber,
-        ], queries: [{ propertyName: "searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, static: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "list", first: true, predicate: AXListComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box [disabled]=\"disabled\" (onOpened)=\"_handleOnOpenedEvent()\" (onClosed)=\"_handleOnClosedEvent()\"\n  [look]=\"look\" [class.ax-auto-height]=\"autoHeight\">\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-select-box-selection\" [class.ax-multiple]=\"multiple\" [tabindex]=\"tabIndex\"\n      (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" (click)=\"toggle()\">\n\n      @if(selectedItems.length === 0){\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n        {{ placeholder }}\n      </div>\n      }\n      @for(item of selectedItems; track $index){\n      <div class=\"ax-selected-token\">\n        {{ getDisplayText(item) }}\n        @if(!disabled && !readonly && multiple)\n        {\n        <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\">\n        </span>\n        }\n      </div>\n      }\n\n    </div>\n    @if(selectedItems?.length && !disabled && !readonly)\n    {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button ax-button-icon\"\n      (click)=\"toggle()\">\n      @if(isLoading && !isOpen){\n      <ax-loading type=\"spinner\"></ax-loading>\n      }@else{\n      <span class=\"ax-icon ax-icon-chevron-left ax-arrow-button\" [ngClass]=\"{\n          '-rotation-90': !isOpen,\n          'rotation-90': isOpen\n        }\"></span>\n      }\n\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-template #search>\n      <ng-content select=\"ax-search-box\"> </ng-content>\n    </ng-template>\n  </ng-container>\n  <ng-container panel>\n    <div #panel class=\"ax-select-box-panel\" [style.min-width]=\"dropdownSizes.width\">\n\n      @if(dropdown.isActionsheetStyle){\n      <ax-header class=\"ax-solid\">\n        <ax-title>{{ placeholder || 'selectbox.popover.title' | translate | async }}</ax-title>\n        <ax-close-button\n          [icon]=\"multiple ? 'ax-icon ax-icon-done !ax-text-primary-500' : 'ax-icon ax-icon-close'\"></ax-close-button>\n      </ax-header>\n      }\n      @if(searchBox){\n      <div class=\"ax-search-container\">\n        <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n      </div>\n      }\n      @if(renderList){\n      <ax-list [dataSource]=\"_listDataSource\" [multiple]=\"multiple\" [style.height]=\"dropdownSizes.height\"\n        [valueField]=\"valueField\" [textField]=\"textField\" [emptyTemplate]=\"emptyTemplate ?? empty\"\n        [itemTemplate]=\"itemTemplate\" [loadingTemplate]=\"loadingTemplate\" [ngModel]=\"value\"\n        (onValueChanged)=\"_handleValueChanged($event)\" [selectionMode]=\"'item'\">\n        <ng-template #empty> No Items! </ng-template>\n      </ax-list>\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>", styles: ["ax-select-box{display:block;width:100%}ax-select-box ax-dropdown-box.ax-auto-height{height:auto!important}ax-select-box .ax-editor-container.ax-look-fill .ax-selected-token{background-color:rgba(var(--ax-color-surface))}ax-select-box .ax-selected-token{display:flex;align-items:center;border-radius:var(--ax-rounded-border-default);padding:.25rem .5rem;color:rgb(var(--ax-color-text-default))}ax-select-box .ax-selected-token .ax-icon-close{-webkit-margin-start:.5rem;margin-inline-start:.5rem;cursor:pointer}ax-select-box .ax-select-box-selection{display:flex;flex:1 1 0%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.25rem;padding:.25rem;outline:2px solid transparent;outline-offset:2px;height:100%}ax-select-box .ax-select-box-selection>span{white-space:nowrap;-webkit-padding-end:.75rem;padding-inline-end:.75rem;-webkit-padding-start:1rem;padding-inline-start:1rem}ax-select-box .ax-select-box-selection .ax-selectbox-input{width:0px;opacity:0}ax-select-box .ax-select-box-selection.ax-multiple .ax-selected-token{background-color:rgba(var(--ax-color-on-surface))}ax-select-box .ax-placeholder{-webkit-padding-end:.75rem;padding-inline-end:.75rem;-webkit-padding-start:1rem;padding-inline-start:1rem}ax-select-box .ax-general-button .ax-arrow-button{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-select-box .ax-general-button .ax-arrow-button.-rotation-90{transform:rotate(-90deg)}ax-select-box .ax-general-button .ax-arrow-button.rotation-90{transform:rotate(90deg)}.ax-select-box-panel{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.ax-select-box-panel>ax-header.ax-solid{border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default))}.ax-select-box-panel .ax-search-container{padding:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i5.AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "component", type: i6.AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "disabledField", "multiple", "selectionMode", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readOnlyChange", "onBlur", "onFocus", "onScrolledIndexChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, static: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "list", first: true, predicate: AXListComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box\n  [disabled]=\"disabled\"\n  (onOpened)=\"_handleOnOpenedEvent()\"\n  (onClosed)=\"_handleOnClosedEvent()\"\n  [look]=\"look\"\n  [class.ax-auto-height]=\"autoHeight\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div\n      class=\"ax-select-box-selection\"\n      [class.ax-multiple]=\"multiple\"\n      [tabindex]=\"tabIndex\"\n      (focus)=\"emitOnFocusEvent($event)\"\n      (blur)=\"emitOnBlurEvent($event)\"\n      (click)=\"toggle()\"\n    >\n      @if (selectedItems.length === 0) {\n        <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n          {{ placeholder }}\n        </div>\n      }\n      @for (item of selectedItems; track $index) {\n        <div class=\"ax-selected-token\">\n          {{ getDisplayText(item) }}\n          @if (!disabled && !readonly && multiple) {\n            <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"> </span>\n          }\n        </div>\n      }\n    </div>\n    @if (selectedItems?.length && !disabled && !readonly) {\n      <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button\n      type=\"button\"\n      [disabled]=\"disabled\"\n      [tabIndex]=\"-1\"\n      class=\"ax-general-button ax-button-icon\"\n      (click)=\"toggle()\"\n    >\n      <!-- @if (isLoading() && !isOpen) {\n        <ax-loading type=\"spinner\"></ax-loading>\n      } @else { -->\n      <span\n        class=\"ax-icon ax-icon-chevron-left ax-arrow-button\"\n        [ngClass]=\"{\n          '-rotation-90': !isOpen,\n          'rotation-90': isOpen\n        }\"\n      ></span>\n      <!-- } -->\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-template #search>\n      <ng-content select=\"ax-search-box\"> </ng-content>\n    </ng-template>\n  </ng-container>\n  <ng-container panel>\n    <div #panel class=\"ax-select-box-panel\" [style.min-width]=\"dropdownSizes.width\">\n      @if (dropdown.isActionsheetStyle) {\n        <ax-header class=\"ax-solid\">\n          <ax-title>{{ placeholder || 'selectbox.popover.title' | translate | async }}</ax-title>\n          <ax-close-button\n            [icon]=\"multiple ? 'ax-icon ax-icon-done !ax-text-primary-500' : 'ax-icon ax-icon-close'\"\n          ></ax-close-button>\n        </ax-header>\n      }\n      @if (searchBox) {\n        <div class=\"ax-search-container\">\n          <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n        </div>\n      }\n      @if (renderList) {\n        <ax-list\n          [dataSource]=\"_listDataSource\"\n          [multiple]=\"multiple\"\n          [style.height]=\"dropdownSizes.height\"\n          [valueField]=\"valueField\"\n          [textField]=\"textField\"\n          [emptyTemplate]=\"emptyTemplate ?? empty\"\n          [itemTemplate]=\"itemTemplate\"\n          [loadingTemplate]=\"loadingTemplate\"\n          [ngModel]=\"value\"\n          (onValueChanged)=\"_handleValueChanged($event)\"\n          [selectionMode]=\"'item'\"\n        >\n          <ng-template #empty> No Items! </ng-template>\n        </ax-list>\n      }\n\n      @if (isLoading()) {\n        @if (loadingTemplate) {\n          <ng-template *ngTemplateOutlet=\"loadingTemplate\"></ng-template>\n        } @else {\n          <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n            <ax-loading></ax-loading>\n          </div>\n        }\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["ax-select-box{display:block;width:100%}ax-select-box ax-dropdown-box.ax-auto-height{height:auto!important}ax-select-box .ax-editor-container.ax-look-fill .ax-selected-token{background-color:rgba(var(--ax-color-surface))}ax-select-box .ax-selected-token{display:flex;align-items:center;border-radius:var(--ax-rounded-border-default);padding:.25rem .5rem;color:rgb(var(--ax-color-text-default))}ax-select-box .ax-selected-token .ax-icon-close{-webkit-margin-start:.5rem;margin-inline-start:.5rem;cursor:pointer}ax-select-box .ax-select-box-selection{display:flex;flex:1 1 0%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.25rem;padding:.25rem;outline:2px solid transparent;outline-offset:2px;height:100%}ax-select-box .ax-select-box-selection>span{white-space:nowrap;-webkit-padding-end:.75rem;padding-inline-end:.75rem;-webkit-padding-start:1rem;padding-inline-start:1rem}ax-select-box .ax-select-box-selection .ax-selectbox-input{width:0px;opacity:0}ax-select-box .ax-select-box-selection.ax-multiple .ax-selected-token{background-color:rgba(var(--ax-color-on-surface))}ax-select-box .ax-placeholder{-webkit-padding-end:.75rem;padding-inline-end:.75rem;-webkit-padding-start:1rem;padding-inline-start:1rem}ax-select-box .ax-general-button .ax-arrow-button{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-select-box .ax-general-button .ax-arrow-button.-rotation-90{transform:rotate(-90deg)}ax-select-box .ax-general-button .ax-arrow-button.rotation-90{transform:rotate(90deg)}.ax-select-box-panel{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.ax-select-box-panel>ax-header.ax-solid{border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default))}.ax-select-box-panel .ax-search-container{padding:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i5.AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "component", type: i6.AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "disabledField", "multiple", "selectionMode", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readOnlyChange", "onBlur", "onFocus", "onScrolledIndexChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-select-box', inputs: [
                         'disabled',
@@ -264,7 +272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                             useClass: MXSelectionBridgeService,
                         },
                         AXUnsubscriber,
-                    ], template: "<ax-dropdown-box [disabled]=\"disabled\" (onOpened)=\"_handleOnOpenedEvent()\" (onClosed)=\"_handleOnClosedEvent()\"\n  [look]=\"look\" [class.ax-auto-height]=\"autoHeight\">\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-select-box-selection\" [class.ax-multiple]=\"multiple\" [tabindex]=\"tabIndex\"\n      (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" (click)=\"toggle()\">\n\n      @if(selectedItems.length === 0){\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n        {{ placeholder }}\n      </div>\n      }\n      @for(item of selectedItems; track $index){\n      <div class=\"ax-selected-token\">\n        {{ getDisplayText(item) }}\n        @if(!disabled && !readonly && multiple)\n        {\n        <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\">\n        </span>\n        }\n      </div>\n      }\n\n    </div>\n    @if(selectedItems?.length && !disabled && !readonly)\n    {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button ax-button-icon\"\n      (click)=\"toggle()\">\n      @if(isLoading && !isOpen){\n      <ax-loading type=\"spinner\"></ax-loading>\n      }@else{\n      <span class=\"ax-icon ax-icon-chevron-left ax-arrow-button\" [ngClass]=\"{\n          '-rotation-90': !isOpen,\n          'rotation-90': isOpen\n        }\"></span>\n      }\n\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-template #search>\n      <ng-content select=\"ax-search-box\"> </ng-content>\n    </ng-template>\n  </ng-container>\n  <ng-container panel>\n    <div #panel class=\"ax-select-box-panel\" [style.min-width]=\"dropdownSizes.width\">\n\n      @if(dropdown.isActionsheetStyle){\n      <ax-header class=\"ax-solid\">\n        <ax-title>{{ placeholder || 'selectbox.popover.title' | translate | async }}</ax-title>\n        <ax-close-button\n          [icon]=\"multiple ? 'ax-icon ax-icon-done !ax-text-primary-500' : 'ax-icon ax-icon-close'\"></ax-close-button>\n      </ax-header>\n      }\n      @if(searchBox){\n      <div class=\"ax-search-container\">\n        <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n      </div>\n      }\n      @if(renderList){\n      <ax-list [dataSource]=\"_listDataSource\" [multiple]=\"multiple\" [style.height]=\"dropdownSizes.height\"\n        [valueField]=\"valueField\" [textField]=\"textField\" [emptyTemplate]=\"emptyTemplate ?? empty\"\n        [itemTemplate]=\"itemTemplate\" [loadingTemplate]=\"loadingTemplate\" [ngModel]=\"value\"\n        (onValueChanged)=\"_handleValueChanged($event)\" [selectionMode]=\"'item'\">\n        <ng-template #empty> No Items! </ng-template>\n      </ax-list>\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>", styles: ["ax-select-box{display:block;width:100%}ax-select-box ax-dropdown-box.ax-auto-height{height:auto!important}ax-select-box .ax-editor-container.ax-look-fill .ax-selected-token{background-color:rgba(var(--ax-color-surface))}ax-select-box .ax-selected-token{display:flex;align-items:center;border-radius:var(--ax-rounded-border-default);padding:.25rem .5rem;color:rgb(var(--ax-color-text-default))}ax-select-box .ax-selected-token .ax-icon-close{-webkit-margin-start:.5rem;margin-inline-start:.5rem;cursor:pointer}ax-select-box .ax-select-box-selection{display:flex;flex:1 1 0%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.25rem;padding:.25rem;outline:2px solid transparent;outline-offset:2px;height:100%}ax-select-box .ax-select-box-selection>span{white-space:nowrap;-webkit-padding-end:.75rem;padding-inline-end:.75rem;-webkit-padding-start:1rem;padding-inline-start:1rem}ax-select-box .ax-select-box-selection .ax-selectbox-input{width:0px;opacity:0}ax-select-box .ax-select-box-selection.ax-multiple .ax-selected-token{background-color:rgba(var(--ax-color-on-surface))}ax-select-box .ax-placeholder{-webkit-padding-end:.75rem;padding-inline-end:.75rem;-webkit-padding-start:1rem;padding-inline-start:1rem}ax-select-box .ax-general-button .ax-arrow-button{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-select-box .ax-general-button .ax-arrow-button.-rotation-90{transform:rotate(-90deg)}ax-select-box .ax-general-button .ax-arrow-button.rotation-90{transform:rotate(90deg)}.ax-select-box-panel{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.ax-select-box-panel>ax-header.ax-solid{border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default))}.ax-select-box-panel .ax-search-container{padding:.5rem}\n"] }]
+                    ], template: "<ax-dropdown-box\n  [disabled]=\"disabled\"\n  (onOpened)=\"_handleOnOpenedEvent()\"\n  (onClosed)=\"_handleOnClosedEvent()\"\n  [look]=\"look\"\n  [class.ax-auto-height]=\"autoHeight\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div\n      class=\"ax-select-box-selection\"\n      [class.ax-multiple]=\"multiple\"\n      [tabindex]=\"tabIndex\"\n      (focus)=\"emitOnFocusEvent($event)\"\n      (blur)=\"emitOnBlurEvent($event)\"\n      (click)=\"toggle()\"\n    >\n      @if (selectedItems.length === 0) {\n        <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n          {{ placeholder }}\n        </div>\n      }\n      @for (item of selectedItems; track $index) {\n        <div class=\"ax-selected-token\">\n          {{ getDisplayText(item) }}\n          @if (!disabled && !readonly && multiple) {\n            <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"> </span>\n          }\n        </div>\n      }\n    </div>\n    @if (selectedItems?.length && !disabled && !readonly) {\n      <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button\n      type=\"button\"\n      [disabled]=\"disabled\"\n      [tabIndex]=\"-1\"\n      class=\"ax-general-button ax-button-icon\"\n      (click)=\"toggle()\"\n    >\n      <!-- @if (isLoading() && !isOpen) {\n        <ax-loading type=\"spinner\"></ax-loading>\n      } @else { -->\n      <span\n        class=\"ax-icon ax-icon-chevron-left ax-arrow-button\"\n        [ngClass]=\"{\n          '-rotation-90': !isOpen,\n          'rotation-90': isOpen\n        }\"\n      ></span>\n      <!-- } -->\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-template #search>\n      <ng-content select=\"ax-search-box\"> </ng-content>\n    </ng-template>\n  </ng-container>\n  <ng-container panel>\n    <div #panel class=\"ax-select-box-panel\" [style.min-width]=\"dropdownSizes.width\">\n      @if (dropdown.isActionsheetStyle) {\n        <ax-header class=\"ax-solid\">\n          <ax-title>{{ placeholder || 'selectbox.popover.title' | translate | async }}</ax-title>\n          <ax-close-button\n            [icon]=\"multiple ? 'ax-icon ax-icon-done !ax-text-primary-500' : 'ax-icon ax-icon-close'\"\n          ></ax-close-button>\n        </ax-header>\n      }\n      @if (searchBox) {\n        <div class=\"ax-search-container\">\n          <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n        </div>\n      }\n      @if (renderList) {\n        <ax-list\n          [dataSource]=\"_listDataSource\"\n          [multiple]=\"multiple\"\n          [style.height]=\"dropdownSizes.height\"\n          [valueField]=\"valueField\"\n          [textField]=\"textField\"\n          [emptyTemplate]=\"emptyTemplate ?? empty\"\n          [itemTemplate]=\"itemTemplate\"\n          [loadingTemplate]=\"loadingTemplate\"\n          [ngModel]=\"value\"\n          (onValueChanged)=\"_handleValueChanged($event)\"\n          [selectionMode]=\"'item'\"\n        >\n          <ng-template #empty> No Items! </ng-template>\n        </ax-list>\n      }\n\n      @if (isLoading()) {\n        @if (loadingTemplate) {\n          <ng-template *ngTemplateOutlet=\"loadingTemplate\"></ng-template>\n        } @else {\n          <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n            <ax-loading></ax-loading>\n          </div>\n        }\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["ax-select-box{display:block;width:100%}ax-select-box ax-dropdown-box.ax-auto-height{height:auto!important}ax-select-box .ax-editor-container.ax-look-fill .ax-selected-token{background-color:rgba(var(--ax-color-surface))}ax-select-box .ax-selected-token{display:flex;align-items:center;border-radius:var(--ax-rounded-border-default);padding:.25rem .5rem;color:rgb(var(--ax-color-text-default))}ax-select-box .ax-selected-token .ax-icon-close{-webkit-margin-start:.5rem;margin-inline-start:.5rem;cursor:pointer}ax-select-box .ax-select-box-selection{display:flex;flex:1 1 0%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.25rem;padding:.25rem;outline:2px solid transparent;outline-offset:2px;height:100%}ax-select-box .ax-select-box-selection>span{white-space:nowrap;-webkit-padding-end:.75rem;padding-inline-end:.75rem;-webkit-padding-start:1rem;padding-inline-start:1rem}ax-select-box .ax-select-box-selection .ax-selectbox-input{width:0px;opacity:0}ax-select-box .ax-select-box-selection.ax-multiple .ax-selected-token{background-color:rgba(var(--ax-color-on-surface))}ax-select-box .ax-placeholder{-webkit-padding-end:.75rem;padding-inline-end:.75rem;-webkit-padding-start:1rem;padding-inline-start:1rem}ax-select-box .ax-general-button .ax-arrow-button{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-select-box .ax-general-button .ax-arrow-button.-rotation-90{transform:rotate(-90deg)}ax-select-box .ax-general-button .ax-arrow-button.rotation-90{transform:rotate(90deg)}.ax-select-box-panel{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.ax-select-box-panel>ax-header.ax-solid{border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default))}.ax-select-box-panel .ax-search-container{padding:.5rem}\n"] }]
         }], propDecorators: { dataSource: [{
                 type: Input
             }], placeholder: [{
@@ -293,8 +301,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
             }] } });
 class AXSelectBoxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [CommonModule,
             AXCommonModule,
             FormsModule,
             AXCheckBoxModule,
@@ -307,7 +315,7 @@ class AXSelectBoxModule {
             AXTextBoxModule,
             AXDropdownModule,
             AXListModule], exports: [AXSelectBoxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSelectBoxModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSelectBoxModule, imports: [CommonModule,
             AXCommonModule,
             FormsModule,
             AXCheckBoxModule,
@@ -321,7 +329,7 @@ class AXSelectBoxModule {
             AXDropdownModule,
             AXListModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXSelectBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXSelectBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [