@acorex/components 16.18.0 → 16.18.1

package/esm2022/lib/calendar/scheduler/views/month/scheduler-month-view.component.mjs

@@ -201,10 +201,10 @@ export class AXSchedulerMonthViewComponent extends AXSchedulerBaseViewComponent
             this.onEventChanged.emit(r);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXSchedulerMonthViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: AXSchedulerMonthViewComponent, selector: "ng-component", host: { listeners: { "wheel": "onKeydownHandler($event)" } }, providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerMonthViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"view ax-sheduler-month-view\">\n    <table class=\"header\">\n        <thead>\n            <th *ngFor=\"let d of weekDays\" class=\"header-cell\">\n                <span [class.same-week-day]=\"d.index==today.dayInWeek\"> {{d.title}}</span>\n            </th>\n        </thead>\n    </table>\n    <table class=\"body\" cdkDropListGroup>\n        <tbody>\n            <tr *ngFor=\"let r of matrixSlots\">\n                <td *ngFor=\"let d of r\" class=\"cell-slot\" cdkDropList [cdkDropListData]=\"d\"\n                    (cdkDropListDropped)=\"onDragDropOnDay($event)\" \n                    [attr.data-uid]=\"d.uid\">\n                    <div class=\"day-num\" [class.first-day-month]=\"d.range.startTime.dayInMonth==1\"\n                        [class.today]=\"d.range.startTime.equal(today)\">\n                        <ng-container *ngIf=\"d.range.startTime.dayInMonth==1\">\n                            {{d.range.startTime | dt: 'MMM'}}\n                        </ng-container>\n                        {{d.range.startTime | dt: 'DD'}}\n                    </div>\n                    <div class=\"event-wrapper\">\n                        <ng-container *ngFor=\"let e of d.events\">\n                            <div class=\"event ax-scheduler-event\" cdkDrag [cdkDragData]=\"e\" [attr.data-uid]=\"e.uid\"\n                                [style.background-color]=\"e.color\"\n                                (cdkDragStarted)=\"onDragStarted($event)\"\n                                (cdkDragEnded)=\"onDragEnded($event)\"\n                                (cdkDragEntered)=\"onDragEntered($event)\">\n                                <span class=\"ax-sch-str\">{{e.range.startTime | dt: 'HH:mm'}}</span><span\n                                    class=\"event-title\">{{e.title}}</span><span>{{e.range.endTime | dt: 'HH:mm'}}</span>\n                            </div>\n                        </ng-container>\n                    </div>\n                    <div class=\"view-more\"></div>\n                </td>\n            </tr>\n        </tbody>\n    </table>\n</div>", styles: [".ax-sheduler-month-view .day-num{position:absolute;left:5px;top:5px;font-size:smaller;padding:1px 5px;display:flex;border-radius:10%;align-items:center;justify-content:center}.ax-sheduler-month-view .day-num.first-day-month{color:var(--primary-color);font-weight:700}.ax-sheduler-month-view .day-num:hover{text-decoration:underline;cursor:pointer}.ax-sheduler-month-view .day-num.today{background-color:var(--primary-light-color);color:var(--danger-fore-color)}.ax-sheduler-month-view .view-more{position:absolute;bottom:0;font-size:x-small;right:0;padding:0 5px;width:100%;cursor:pointer;text-align:center;background-color:var(--gray-dark-color)}.ax-sheduler-month-view .view-more:hover{box-shadow:0 6px 10px #00000024,0 1px 18px #0000001f,0 3px 5px -1px #0003}.ax-sheduler-month-view .event-wrapper{position:absolute;top:30px;left:0}.ax-sheduler-month-view .event-wrapper .event{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: i3.AXDateTimePipe, name: "dt" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXSchedulerMonthViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: AXSchedulerMonthViewComponent, selector: "ng-component", host: { listeners: { "wheel": "onKeydownHandler($event)" } }, providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerMonthViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"view ax-sheduler-month-view\">\n    <table class=\"header\">\n        <thead>\n            <th *ngFor=\"let d of weekDays\" class=\"header-cell\">\n                <span [class.same-week-day]=\"d.index==today.dayInWeek\"> {{d.title}}</span>\n            </th>\n        </thead>\n    </table>\n    <table class=\"body\" cdkDropListGroup>\n        <tbody>\n            <tr *ngFor=\"let r of matrixSlots\">\n                <td *ngFor=\"let d of r\" class=\"cell-slot\" cdkDropList [cdkDropListData]=\"d\"\n                    (cdkDropListDropped)=\"onDragDropOnDay($event)\" \n                    [attr.data-uid]=\"d.uid\">\n                    <div class=\"day-num\" [class.first-day-month]=\"d.range.startTime.dayInMonth==1\"\n                        [class.today]=\"d.range.startTime.equal(today)\">\n                        <ng-container *ngIf=\"d.range.startTime.dayInMonth==1\">\n                            {{d.range.startTime | dt: 'MMM'}}\n                        </ng-container>\n                        {{d.range.startTime | dt: 'DD'}}\n                    </div>\n                    <div class=\"event-wrapper\">\n                        <ng-container *ngFor=\"let e of d.events\">\n                            <div class=\"event ax-scheduler-event\" cdkDrag [cdkDragData]=\"e\" [attr.data-uid]=\"e.uid\"\n                                [style.background-color]=\"e.color\"\n                                (cdkDragStarted)=\"onDragStarted($event)\"\n                                (cdkDragEnded)=\"onDragEnded($event)\"\n                                (cdkDragEntered)=\"onDragEntered($event)\">\n                                <span class=\"ax-sch-str\">{{e.range.startTime | dt: 'HH:mm'}}</span><span\n                                    class=\"event-title\">{{e.title}}</span><span>{{e.range.endTime | dt: 'HH:mm'}}</span>\n                            </div>\n                        </ng-container>\n                    </div>\n                    <div class=\"view-more\"></div>\n                </td>\n            </tr>\n        </tbody>\n    </table>\n</div>", styles: [".ax-sheduler-month-view .day-num{position:absolute;left:5px;top:5px;font-size:smaller;padding:1px 5px;display:flex;border-radius:10%;align-items:center;justify-content:center}.ax-sheduler-month-view .day-num.first-day-month{color:var(--primary-color);font-weight:700}.ax-sheduler-month-view .day-num:hover{text-decoration:underline;cursor:pointer}.ax-sheduler-month-view .day-num.today{background-color:var(--primary-light-color);color:var(--danger-fore-color)}.ax-sheduler-month-view .view-more{position:absolute;bottom:0;font-size:x-small;right:0;padding:0 5px;width:100%;cursor:pointer;text-align:center;background-color:var(--gray-dark-color)}.ax-sheduler-month-view .view-more:hover{box-shadow:0 6px 10px #00000024,0 1px 18px #0000001f,0 3px 5px -1px #0003}.ax-sheduler-month-view .event-wrapper{position:absolute;top:30px;left:0}.ax-sheduler-month-view .event-wrapper .event{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: i3.AXDateTimePipe, name: "dt" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXSchedulerMonthViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXSchedulerMonthViewComponent, decorators: [{
             type: Component,
             args: [{ encapsulation: ViewEncapsulation.None, providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerMonthViewComponent }], template: "<div class=\"view ax-sheduler-month-view\">\n    <table class=\"header\">\n        <thead>\n            <th *ngFor=\"let d of weekDays\" class=\"header-cell\">\n                <span [class.same-week-day]=\"d.index==today.dayInWeek\"> {{d.title}}</span>\n            </th>\n        </thead>\n    </table>\n    <table class=\"body\" cdkDropListGroup>\n        <tbody>\n            <tr *ngFor=\"let r of matrixSlots\">\n                <td *ngFor=\"let d of r\" class=\"cell-slot\" cdkDropList [cdkDropListData]=\"d\"\n                    (cdkDropListDropped)=\"onDragDropOnDay($event)\" \n                    [attr.data-uid]=\"d.uid\">\n                    <div class=\"day-num\" [class.first-day-month]=\"d.range.startTime.dayInMonth==1\"\n                        [class.today]=\"d.range.startTime.equal(today)\">\n                        <ng-container *ngIf=\"d.range.startTime.dayInMonth==1\">\n                            {{d.range.startTime | dt: 'MMM'}}\n                        </ng-container>\n                        {{d.range.startTime | dt: 'DD'}}\n                    </div>\n                    <div class=\"event-wrapper\">\n                        <ng-container *ngFor=\"let e of d.events\">\n                            <div class=\"event ax-scheduler-event\" cdkDrag [cdkDragData]=\"e\" [attr.data-uid]=\"e.uid\"\n                                [style.background-color]=\"e.color\"\n                                (cdkDragStarted)=\"onDragStarted($event)\"\n                                (cdkDragEnded)=\"onDragEnded($event)\"\n                                (cdkDragEntered)=\"onDragEntered($event)\">\n                                <span class=\"ax-sch-str\">{{e.range.startTime | dt: 'HH:mm'}}</span><span\n                                    class=\"event-title\">{{e.title}}</span><span>{{e.range.endTime | dt: 'HH:mm'}}</span>\n                            </div>\n                        </ng-container>\n                    </div>\n                    <div class=\"view-more\"></div>\n                </td>\n            </tr>\n        </tbody>\n    </table>\n</div>", styles: [".ax-sheduler-month-view .day-num{position:absolute;left:5px;top:5px;font-size:smaller;padding:1px 5px;display:flex;border-radius:10%;align-items:center;justify-content:center}.ax-sheduler-month-view .day-num.first-day-month{color:var(--primary-color);font-weight:700}.ax-sheduler-month-view .day-num:hover{text-decoration:underline;cursor:pointer}.ax-sheduler-month-view .day-num.today{background-color:var(--primary-light-color);color:var(--danger-fore-color)}.ax-sheduler-month-view .view-more{position:absolute;bottom:0;font-size:x-small;right:0;padding:0 5px;width:100%;cursor:pointer;text-align:center;background-color:var(--gray-dark-color)}.ax-sheduler-month-view .view-more:hover{box-shadow:0 6px 10px #00000024,0 1px 18px #0000001f,0 3px 5px -1px #0003}.ax-sheduler-month-view .event-wrapper{position:absolute;top:30px;left:0}.ax-sheduler-month-view .event-wrapper .event{position:absolute}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { onKeydownHandler: [{

package/esm2022/lib/calendar/scheduler/views/scheduler-view.component.mjs

@@ -86,10 +86,10 @@ export class AXSchedulerBaseViewComponent {
             this.onEventChanged.emit(r);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXSchedulerBaseViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.3", type: AXSchedulerBaseViewComponent, outputs: { onNavigatorDateChanged: "onNavigatorDateChanged", onEventChanged: "onEventChanged" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXSchedulerBaseViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: AXSchedulerBaseViewComponent, outputs: { onNavigatorDateChanged: "onNavigatorDateChanged", onEventChanged: "onEventChanged" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXSchedulerBaseViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXSchedulerBaseViewComponent, decorators: [{
             type: Directive
         }], propDecorators: { onNavigatorDateChanged: [{
                 type: Output

package/esm2022/lib/calendar/scheduler/views/timeline/scheduler-timeline-view.component.mjs

@@ -75,10 +75,10 @@ export class AXSchedulerTimelineViewComponent extends AXSchedulerBaseViewCompone
     }
     arrangeEvents() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXSchedulerTimelineViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: AXSchedulerTimelineViewComponent, selector: "ng-component", providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerTimelineViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"view ax-scheduler-timeline-view\">\n    <table class=\"header\">\n        <colgroup>\n            <col *ngFor=\"let t of times\" class=\"time-column\"/>\n        </colgroup>\n        <tbody>\n            <ng-container *ngFor=\"let d of slots\">\n                <tr>\n                    <td class=\"header-cell\" [attr.colspan]=\"times.length\">\n                        <div [class.same-week-day]=\"d.range.startTime.equal(today)\">\n                            {{d.range.startTime | dt: 'MMM DD, dddd'}}\n                        </div>\n                    </td>\n                </tr>\n                <tr>\n                    <td *ngFor=\"let t of times\">\n                        <div>\n                            {{t.display}}\n                        </div>\n                    </td>\n                </tr>\n            </ng-container>\n        </tbody>\n    </table>\n    <!-- <div class=\"v-scroll\">\n        <table class=\"body\">\n            <tbody>\n                <tr *ngFor=\"let t of times\">\n                    <td>\n                        {{t.display}}\n                    </td>\n                    <td *ngFor=\"let d of slots\" class=\"slot-cell\">\n                        <div class=\"event-wrapper\">\n                            <ng-container *ngFor=\"let e of d.events\">\n                                <div *ngIf=\"e.range.startTime.date.getHours()==t.value\" class=\"event\"\n                                    [attr.data-uid]=\"e.uid\" [style.background-color]=\"e.color\">\n                                    <div class=\"event-title\">{{e.title}}</div>\n                                    <div>\n                                        <span>{{e.range.startTime | dt: 'HH:mm'}}</span> -\n                                        <span>{{e.range.endTime | dt: 'HH:mm'}}</span>\n                                    </div>\n                                </div>\n                            </ng-container>\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </div> -->\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2.AXDateTimePipe, name: "dt" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXSchedulerTimelineViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: AXSchedulerTimelineViewComponent, selector: "ng-component", providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerTimelineViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"view ax-scheduler-timeline-view\">\n    <table class=\"header\">\n        <colgroup>\n            <col *ngFor=\"let t of times\" class=\"time-column\"/>\n        </colgroup>\n        <tbody>\n            <ng-container *ngFor=\"let d of slots\">\n                <tr>\n                    <td class=\"header-cell\" [attr.colspan]=\"times.length\">\n                        <div [class.same-week-day]=\"d.range.startTime.equal(today)\">\n                            {{d.range.startTime | dt: 'MMM DD, dddd'}}\n                        </div>\n                    </td>\n                </tr>\n                <tr>\n                    <td *ngFor=\"let t of times\">\n                        <div>\n                            {{t.display}}\n                        </div>\n                    </td>\n                </tr>\n            </ng-container>\n        </tbody>\n    </table>\n    <!-- <div class=\"v-scroll\">\n        <table class=\"body\">\n            <tbody>\n                <tr *ngFor=\"let t of times\">\n                    <td>\n                        {{t.display}}\n                    </td>\n                    <td *ngFor=\"let d of slots\" class=\"slot-cell\">\n                        <div class=\"event-wrapper\">\n                            <ng-container *ngFor=\"let e of d.events\">\n                                <div *ngIf=\"e.range.startTime.date.getHours()==t.value\" class=\"event\"\n                                    [attr.data-uid]=\"e.uid\" [style.background-color]=\"e.color\">\n                                    <div class=\"event-title\">{{e.title}}</div>\n                                    <div>\n                                        <span>{{e.range.startTime | dt: 'HH:mm'}}</span> -\n                                        <span>{{e.range.endTime | dt: 'HH:mm'}}</span>\n                                    </div>\n                                </div>\n                            </ng-container>\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </div> -->\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2.AXDateTimePipe, name: "dt" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXSchedulerTimelineViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXSchedulerTimelineViewComponent, decorators: [{
             type: Component,
             args: [{ encapsulation: ViewEncapsulation.None, providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerTimelineViewComponent }], template: "<div class=\"view ax-scheduler-timeline-view\">\n    <table class=\"header\">\n        <colgroup>\n            <col *ngFor=\"let t of times\" class=\"time-column\"/>\n        </colgroup>\n        <tbody>\n            <ng-container *ngFor=\"let d of slots\">\n                <tr>\n                    <td class=\"header-cell\" [attr.colspan]=\"times.length\">\n                        <div [class.same-week-day]=\"d.range.startTime.equal(today)\">\n                            {{d.range.startTime | dt: 'MMM DD, dddd'}}\n                        </div>\n                    </td>\n                </tr>\n                <tr>\n                    <td *ngFor=\"let t of times\">\n                        <div>\n                            {{t.display}}\n                        </div>\n                    </td>\n                </tr>\n            </ng-container>\n        </tbody>\n    </table>\n    <!-- <div class=\"v-scroll\">\n        <table class=\"body\">\n            <tbody>\n                <tr *ngFor=\"let t of times\">\n                    <td>\n                        {{t.display}}\n                    </td>\n                    <td *ngFor=\"let d of slots\" class=\"slot-cell\">\n                        <div class=\"event-wrapper\">\n                            <ng-container *ngFor=\"let e of d.events\">\n                                <div *ngIf=\"e.range.startTime.date.getHours()==t.value\" class=\"event\"\n                                    [attr.data-uid]=\"e.uid\" [style.background-color]=\"e.color\">\n                                    <div class=\"event-title\">{{e.title}}</div>\n                                    <div>\n                                        <span>{{e.range.startTime | dt: 'HH:mm'}}</span> -\n                                        <span>{{e.range.endTime | dt: 'HH:mm'}}</span>\n                                    </div>\n                                </div>\n                            </ng-container>\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </div> -->\n</div>" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }] });

package/esm2022/lib/checkbox/checkbox.component.mjs

@@ -73,12 +73,12 @@ export class AXCheckBoxComponent extends AXValidatableComponent {
         }
         //  }, 100);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXCheckBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: { readonly: "readonly", disabled: "disabled", size: "size", label: "label", tabIndex: "tabIndex", indeterminate: "indeterminate", useTreeView: "useTreeView", value: "value" }, outputs: { onValueChanged: "onValueChanged", valueChange: "valueChange", onClick: "onClick" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXCheckBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: { readonly: "readonly", disabled: "disabled", size: "size", label: "label", tabIndex: "tabIndex", indeterminate: "indeterminate", useTreeView: "useTreeView", value: "value" }, outputs: { onValueChanged: "onValueChanged", valueChange: "valueChange", onClick: "onClick" }, providers: [
             { provide: AXValidatableComponent, useExisting: AXCheckBoxComponent },
         ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- <label class=\"ax checkbox {{size}}\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\"\n  (click)=\"handleClick($event)\">\n  {{ label }}\n  <input #input type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [checked]=\"value\"\n    [disabled]=\"disabled || readonly\" />\n  <span class=\"checkmark\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\"></span>\n\n</label> -->\n\n\n<!-- [(ngModel)]=\"value\" -->\n<!-- (click)=\"handleClick($event)\"  -->\n\n<label class=\"ax-checkbox-container\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\">\n\n  <input #input class=\"ax-checkbox\" type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [class.checked]=\"value\"\n    [checked]=\"value\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\" (click)=\"handleClick($event)\"\n    [disabled]=\"disabled || readonly\" />\n\n\n  <span>{{ label ? label : '&nbsp;' }}</span>\n</label>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXCheckBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXCheckBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-check-box', encapsulation: ViewEncapsulation.None, providers: [
                         { provide: AXValidatableComponent, useExisting: AXCheckBoxComponent },

package/esm2022/lib/checkbox/checkbox.module.mjs

@@ -4,11 +4,11 @@ import { FormsModule } from '@angular/forms';
 import { AXCheckBoxComponent } from './checkbox.component';
 import * as i0 from "@angular/core";
 export class AXCheckBoxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXCheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.3", ngImport: i0, type: AXCheckBoxModule, declarations: [AXCheckBoxComponent], imports: [CommonModule, FormsModule], exports: [AXCheckBoxComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXCheckBoxModule, imports: [CommonModule, FormsModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXCheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: AXCheckBoxModule, declarations: [AXCheckBoxComponent], imports: [CommonModule, FormsModule], exports: [AXCheckBoxComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXCheckBoxModule, imports: [CommonModule, FormsModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXCheckBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXCheckBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXCheckBoxComponent],

package/esm2022/lib/color-picker/color-box/color-box.component.mjs

@@ -403,12 +403,12 @@ export class AXColorBoxComponent extends AXValidatableComponent {
             this.onColorSelect.emit(this.value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXColorBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: AXColorBoxComponent, selector: "ax-color-box", inputs: { value: "value" }, outputs: { onColorSelect: "onColorSelect", valueChange: "valueChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXColorBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: AXColorBoxComponent, selector: "ax-color-box", inputs: { value: "value" }, outputs: { onColorSelect: "onColorSelect", valueChange: "valueChange" }, providers: [
             { provide: AXValidatableComponent, useExisting: AXColorBoxComponent },
         ], usesInheritance: true, ngImport: i0, template: "<div class=\"color-box\">\n    <div class=\"color-box-pallet\">\n        <div class=\"color-item\" *ngFor=\"let item of colors\" [style.background-color]=\"item.code\" [title]=\"item.code\"\n            (click)=\"onColorClick(item)\">\n            <i class=\"fas fa-check-circle color-active\" *ngIf=\"item.active\"></i>\n        </div>\n    </div>\n    <div class=\"text-input\">\n        <ng-container *ngIf=\"inputFormat=='rgb';else hexTemplate\">\n            <div class=\"color-part\">\n                <ax-text-box [(value)]=\"rColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\n                </ax-text-box>\n            </div>\n            <div class=\"color-part\">\n                <ax-text-box [(value)]=\"gColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\n                </ax-text-box>\n            </div>\n            <div class=\"color-part\">\n                <ax-text-box [(value)]=\"bColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\n                </ax-text-box>\n            </div>\n            <div class=\"color-part switch\" (click)=\"inputFormat='hex'\">\n                <span>RGB</span>\n            </div>\n        </ng-container>\n        <ng-template #hexTemplate>\n            <div class=\"color-part\">\n                <ax-text-box [(value)]=\"value\" size=\"sm\" (onKey)=\"handleKeyEvent($event)\">\n                </ax-text-box>\n            </div>\n            <!-- <div class=\"color-part switch\" (click)=\"inputFormat='rgb'\">\n                <span>HEX</span>\n            </div> -->\n        </ng-template>\n\n    </div>\n</div>", styles: [".color-box{border:1px solid var(--ax-border-color);max-width:300px;padding:5px}.color-box .color-box-pallet{display:flex;width:100%;height:auto;flex-wrap:wrap;justify-content:space-between;align-items:center}.color-box .color-box-pallet div{width:18px;height:18px;cursor:pointer;display:flex;justify-content:center;align-items:center;border:1px solid var(--ax-border-color);margin:1px}.color-box .color-box-pallet .color-active{color:#fff;box-shadow:1px 1px 4px #5a5a5a;border-radius:50%;font-size:.875rem}.color-box .text-input{display:flex;justify-content:space-between}.color-box .text-input .color-part{padding:2px;display:flex;align-items:center;flex-direction:column;justify-content:center}.color-box .text-input .color-part.switch{cursor:pointer;font-weight:700}.color-box .text-input .color-part.switch:hover{text-decoration:underline}.color-box .text-input .color-part .ax-field-set .no-label input{margin-top:0!important;text-align:center;height:var(--ax-size-md)}\n"], dependencies: [{ 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.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXColorBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXColorBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-box', providers: [
                         { provide: AXValidatableComponent, useExisting: AXColorBoxComponent },

package/esm2022/lib/color-picker/color-picker.component.mjs

@@ -53,12 +53,12 @@ export class AXColorPickerComponent extends AXColorBoxComponent {
     handleItemClick(e) {
         this.dropdown.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXColorPickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: { placeholder: "placeholder", showClear: "showClear", label: "label", readonly: "readonly", disabled: "disabled", size: "size", rtl: "rtl", validation: "validation" }, host: { styleAttribute: "width: 100%" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXColorPickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: { placeholder: "placeholder", showClear: "showClear", label: "label", readonly: "readonly", disabled: "disabled", size: "size", rtl: "rtl", validation: "validation" }, host: { styleAttribute: "width: 100%" }, providers: [
             { provide: AXValidatableComponent, useExisting: AXColorPickerComponent },
         ], queries: [{ propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down #dropdown fitParent=\"false\" [size]=\"size\" [disabled]=\"disabled\"  [rtl]=\"rtl\">\n    <ng-container start>\n        <ng-content select=\"[start]\">\n        </ng-content>\n    </ng-container>\n    <ng-container header>\n\n        <div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n            <div class=\"content\" #content>\n                <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\n                    <ng-container *ngIf=\"value; else elseTemplate\">\n                        <div [style.background-color]=\"value\" [style.color]=\"findTextColor(value)\"\n                            style=\"padding:0px 5px;width: 100%;display: flex;align-items: center;\">\n                            {{value}}&nbsp;</div>\n                    </ng-container>\n                    <ng-template #elseTemplate>\n                        {{placeholder}}&nbsp;\n                    </ng-template>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <ng-container end>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </ng-container>\n    <ng-container panel>\n        <ax-color-box [(value)]=\"value\" \n            (onColorSelect)=\"handleItemClick($event)\"></ax-color-box>\n    </ng-container>\n</ax-drop-down>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: i3.AXColorBoxComponent, selector: "ax-color-box", inputs: ["value"], outputs: ["onColorSelect", "valueChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXColorPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-picker', providers: [
                         { provide: AXValidatableComponent, useExisting: AXColorPickerComponent },

package/esm2022/lib/color-picker/color-picker.module.mjs

@@ -8,11 +8,11 @@ import { AXTextBoxModule } from '../textbox/textbox.module';
 import { FormsModule } from '@angular/forms';
 import * as i0 from "@angular/core";
 export class AXColorPickerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.3", ngImport: i0, type: AXColorPickerModule, declarations: [AXColorPickerComponent, AXColorBoxComponent], imports: [CommonModule, FormsModule, AXDropdownModule, AXValidationModule, AXTextBoxModule], exports: [AXColorPickerComponent, AXColorBoxComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXColorPickerModule, imports: [CommonModule, FormsModule, AXDropdownModule, AXValidationModule, AXTextBoxModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: AXColorPickerModule, declarations: [AXColorPickerComponent, AXColorBoxComponent], imports: [CommonModule, FormsModule, AXDropdownModule, AXValidationModule, AXTextBoxModule], exports: [AXColorPickerComponent, AXColorBoxComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXColorPickerModule, imports: [CommonModule, FormsModule, AXDropdownModule, AXValidationModule, AXTextBoxModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXColorPickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXColorPickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXColorPickerComponent, AXColorBoxComponent],

package/esm2022/lib/context-menu/context-menu.component.mjs

@@ -45,10 +45,10 @@ export class AXContextMenuComponent {
             this.onItemClick.emit(item);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXContextMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: { size: "size", width: "width", items: "items" }, outputs: { onItemClick: "onItemClick", onClosed: "onClosed" }, host: { classAttribute: "ax context-menu-container" }, viewQueries: [{ propertyName: "contex", first: true, predicate: ["contex"], descendants: true }], ngImport: i0, template: "<!-- <ul class=\"ax context-menu {{size}}\" [style.width.px]=\"width\">\n    <ng-container *ngFor=\"let item of items\">\n        <li class=\"context-menu-item\" [class.divider]=\"item.divider\" [class.disabled]=\"item.disable\">\n            <div class=\"startIcon\">\n                <i class=\"{{item.icon}}\"></i>\n                <i class=\"{{item.startIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n            </div>\n            <span>{{item.text}}</span>\n\n            <div class=\"endIcon\">\n                <i class=\"{{item.endIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n                <i class=\"far fa-angle-left ax-menu-item-drop-icon\"></i>\n            </div>\n        </li>\n    </ng-container>\n\n</ul> -->\n\n<ul #contex class=\"ax context-menu {{size}}\" [style.width.px]=\"width\"\n    [ngClass]=\"{'animate__animated animate__faster animate__fadeIn': show}\">\n    <ng-container *ngTemplateOutlet=\"recursiveContextMenu; context:{ $implicit: items }\"></ng-container>\n</ul>\n\n<ng-template #recursiveContextMenu let-items>\n    <li *ngFor=\"let item of items\" class=\"context-menu-item\" [class.divider]=\"item.divider\"\n        [class.disabled]=\"item.disable\" (click)=\"handleClickItem(item)\">\n        <div class=\"startIcon\">\n            <i class=\"{{item.icon}}\"></i>\n            <i class=\"{{item.startIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n        </div>\n        <span>{{item.text}}</span>\n\n        <div class=\"endIcon\">\n            <i class=\"{{item.endIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n            <i class=\"far fa-angle-left ax-menu-item-drop-icon\" *ngIf=\"item.items?.length > 0\"></i>\n        </div>\n        <ul class=\"ax context-menu child\" *ngIf=\"item.items?.length > 0\">\n            <ng-container *ngTemplateOutlet=\"recursiveContextMenu; context:{ $implicit: item.items }\">\n            </ng-container>\n        </ul>\n    </li>\n</ng-template>", 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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXContextMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: { size: "size", width: "width", items: "items" }, outputs: { onItemClick: "onItemClick", onClosed: "onClosed" }, host: { classAttribute: "ax context-menu-container" }, viewQueries: [{ propertyName: "contex", first: true, predicate: ["contex"], descendants: true }], ngImport: i0, template: "<!-- <ul class=\"ax context-menu {{size}}\" [style.width.px]=\"width\">\n    <ng-container *ngFor=\"let item of items\">\n        <li class=\"context-menu-item\" [class.divider]=\"item.divider\" [class.disabled]=\"item.disable\">\n            <div class=\"startIcon\">\n                <i class=\"{{item.icon}}\"></i>\n                <i class=\"{{item.startIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n            </div>\n            <span>{{item.text}}</span>\n\n            <div class=\"endIcon\">\n                <i class=\"{{item.endIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n                <i class=\"far fa-angle-left ax-menu-item-drop-icon\"></i>\n            </div>\n        </li>\n    </ng-container>\n\n</ul> -->\n\n<ul #contex class=\"ax context-menu {{size}}\" [style.width.px]=\"width\"\n    [ngClass]=\"{'animate__animated animate__faster animate__fadeIn': show}\">\n    <ng-container *ngTemplateOutlet=\"recursiveContextMenu; context:{ $implicit: items }\"></ng-container>\n</ul>\n\n<ng-template #recursiveContextMenu let-items>\n    <li *ngFor=\"let item of items\" class=\"context-menu-item\" [class.divider]=\"item.divider\"\n        [class.disabled]=\"item.disable\" (click)=\"handleClickItem(item)\">\n        <div class=\"startIcon\">\n            <i class=\"{{item.icon}}\"></i>\n            <i class=\"{{item.startIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n        </div>\n        <span>{{item.text}}</span>\n\n        <div class=\"endIcon\">\n            <i class=\"{{item.endIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n            <i class=\"far fa-angle-left ax-menu-item-drop-icon\" *ngIf=\"item.items?.length > 0\"></i>\n        </div>\n        <ul class=\"ax context-menu child\" *ngIf=\"item.items?.length > 0\">\n            <ng-container *ngTemplateOutlet=\"recursiveContextMenu; context:{ $implicit: item.items }\">\n            </ng-container>\n        </ul>\n    </li>\n</ng-template>", 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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXContextMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXContextMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-context-menu', host: { class: 'ax context-menu-container' }, template: "<!-- <ul class=\"ax context-menu {{size}}\" [style.width.px]=\"width\">\n    <ng-container *ngFor=\"let item of items\">\n        <li class=\"context-menu-item\" [class.divider]=\"item.divider\" [class.disabled]=\"item.disable\">\n            <div class=\"startIcon\">\n                <i class=\"{{item.icon}}\"></i>\n                <i class=\"{{item.startIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n            </div>\n            <span>{{item.text}}</span>\n\n            <div class=\"endIcon\">\n                <i class=\"{{item.endIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n                <i class=\"far fa-angle-left ax-menu-item-drop-icon\"></i>\n            </div>\n        </li>\n    </ng-container>\n\n</ul> -->\n\n<ul #contex class=\"ax context-menu {{size}}\" [style.width.px]=\"width\"\n    [ngClass]=\"{'animate__animated animate__faster animate__fadeIn': show}\">\n    <ng-container *ngTemplateOutlet=\"recursiveContextMenu; context:{ $implicit: items }\"></ng-container>\n</ul>\n\n<ng-template #recursiveContextMenu let-items>\n    <li *ngFor=\"let item of items\" class=\"context-menu-item\" [class.divider]=\"item.divider\"\n        [class.disabled]=\"item.disable\" (click)=\"handleClickItem(item)\">\n        <div class=\"startIcon\">\n            <i class=\"{{item.icon}}\"></i>\n            <i class=\"{{item.startIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n        </div>\n        <span>{{item.text}}</span>\n\n        <div class=\"endIcon\">\n            <i class=\"{{item.endIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n            <i class=\"far fa-angle-left ax-menu-item-drop-icon\" *ngIf=\"item.items?.length > 0\"></i>\n        </div>\n        <ul class=\"ax context-menu child\" *ngIf=\"item.items?.length > 0\">\n            <ng-container *ngTemplateOutlet=\"recursiveContextMenu; context:{ $implicit: item.items }\">\n            </ng-container>\n        </ul>\n    </li>\n</ng-template>" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { size: [{

package/esm2022/lib/context-menu/context-menu.directive.mjs

@@ -121,10 +121,10 @@ export class AXContextMenuDirective {
     ngOnDestroy() {
         this.clearComponentSubscriptions();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXContextMenuDirective, deps: [{ token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.3", type: AXContextMenuDirective, selector: "[axContextMenu]", inputs: { contextMenu: "contextMenu", contextDataItem: "contextDataItem", contextMenuItems: "contextMenuItems", rtl: "rtl" }, outputs: { onContextMenuItemClick: "onContextMenuItemClick" }, host: { listeners: { "contextmenu": "onContextMenu($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXContextMenuDirective, deps: [{ token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: AXContextMenuDirective, selector: "[axContextMenu]", inputs: { contextMenu: "contextMenu", contextDataItem: "contextDataItem", contextMenuItems: "contextMenuItems", rtl: "rtl" }, outputs: { onContextMenuItemClick: "onContextMenuItemClick" }, host: { listeners: { "contextmenu": "onContextMenu($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXContextMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXContextMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axContextMenu]'

package/esm2022/lib/context-menu/context-menu.module.mjs

@@ -4,11 +4,11 @@ import { AXContextMenuComponent } from './context-menu.component';
 import { AXContextMenuDirective } from './context-menu.directive';
 import * as i0 from "@angular/core";
 export class AXContextMenuModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.3", ngImport: i0, type: AXContextMenuModule, declarations: [AXContextMenuComponent, AXContextMenuDirective], imports: [CommonModule], exports: [AXContextMenuComponent, AXContextMenuDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXContextMenuModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: AXContextMenuModule, declarations: [AXContextMenuComponent, AXContextMenuDirective], imports: [CommonModule], exports: [AXContextMenuComponent, AXContextMenuDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXContextMenuModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXContextMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXContextMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXContextMenuComponent, AXContextMenuDirective],

package/esm2022/lib/data-filter/columns/filter-column-date.component.mjs

@@ -94,8 +94,8 @@ export class AXFilterColumnDateComponent extends AXFilterColumnComponent {
             value: [this.fromDate.toISOString(), this.toDate.toISOString()]
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXFilterColumnDateComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: AXFilterColumnDateComponent, selector: "ax-filter-column-date", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXFilterColumnDateComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: AXFilterColumnDateComponent, selector: "ax-filter-column-date", providers: [
             { provide: AXFilterColumnComponent, useExisting: AXFilterColumnDateComponent }
         ], viewQueries: [{ propertyName: "selection", first: true, predicate: AXSelectionListComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
     <div class="ax-filter-section">
@@ -111,7 +111,7 @@ export class AXFilterColumnDateComponent extends AXFilterColumnComponent {
     </div>
     `, isInline: true, dependencies: [{ kind: "component", type: i1.AXDatePickerComponent, selector: "ax-date-picker", inputs: ["dayStyle", "dayMinMaxResoan", "validation", "placeholder", "min", "max", "readonly", "disabled", "allowClear", "textAlign", "showToday", "selectableHoliday", "dateType", "showTodayButton", "openByClick", "size", "type", "value"], outputs: ["typeChange", "onValueChanged", "valueChange"] }, { kind: "component", type: i2.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["readonly", "value", "disabled", "size", "direction", "items", "mode", "textField", "valueField", "selectedItems", "selectedValues"], outputs: ["selectionChanged", "selectedItemsChange", "selectedValuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXFilterColumnDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXFilterColumnDateComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-filter-column-date',

package/esm2022/lib/data-filter/columns/filter-column-number.component.mjs

@@ -73,8 +73,8 @@ export class AXFilterColumnNumberComponent extends AXFilterColumnComponent {
             value: this.value
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXFilterColumnNumberComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: AXFilterColumnNumberComponent, selector: "ax-filter-column-number", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXFilterColumnNumberComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: AXFilterColumnNumberComponent, selector: "ax-filter-column-number", providers: [
             { provide: AXFilterColumnComponent, useExisting: AXFilterColumnNumberComponent }
         ], usesInheritance: true, ngImport: i0, template: `
     <div class="ax-filter-section">
@@ -92,7 +92,7 @@ export class AXFilterColumnNumberComponent extends AXFilterColumnComponent {
 </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXFilterColumnNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXFilterColumnNumberComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-filter-column-number',

package/esm2022/lib/data-filter/columns/filter-column-selection.component.mjs

@@ -40,8 +40,8 @@ export class AXFilterColumnSelectionComponent extends AXFilterColumnComponent {
         }
         super.setFilter(value, operator);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXFilterColumnSelectionComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: AXFilterColumnSelectionComponent, selector: "ax-filter-column-selection", inputs: { items: "items", mode: "mode", dataType: "dataType" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXFilterColumnSelectionComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: AXFilterColumnSelectionComponent, selector: "ax-filter-column-selection", inputs: { items: "items", mode: "mode", dataType: "dataType" }, providers: [
             { provide: AXFilterColumnComponent, useExisting: AXFilterColumnSelectionComponent }
         ], usesInheritance: true, ngImport: i0, template: `
     <div class="ax-filter-section">
@@ -50,7 +50,7 @@ export class AXFilterColumnSelectionComponent extends AXFilterColumnComponent {
  </div>
     `, isInline: true, dependencies: [{ kind: "component", type: i1.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["readonly", "value", "disabled", "size", "direction", "items", "mode", "textField", "valueField", "selectedItems", "selectedValues"], outputs: ["selectionChanged", "selectedItemsChange", "selectedValuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXFilterColumnSelectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXFilterColumnSelectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-filter-column-selection',

package/esm2022/lib/data-filter/columns/filter-column-string.component.mjs

@@ -73,8 +73,8 @@ export class AXFilterColumnStringComponent extends AXFilterColumnComponent {
             value: this.value
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXFilterColumnStringComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: AXFilterColumnStringComponent, selector: "ax-filter-column-string", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXFilterColumnStringComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: AXFilterColumnStringComponent, selector: "ax-filter-column-string", providers: [
             { provide: AXFilterColumnComponent, useExisting: AXFilterColumnStringComponent }
         ], usesInheritance: true, ngImport: i0, template: `
     <div class="ax-filter-section">
@@ -92,7 +92,7 @@ export class AXFilterColumnStringComponent extends AXFilterColumnComponent {
 </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXFilterColumnStringComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXFilterColumnStringComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-filter-column-string',

package/esm2022/lib/data-filter/filter-panel/filter-panel.component.mjs

@@ -228,10 +228,10 @@ export class AXFilterPanelComponent {
             this.tbxName.focus();
         }, 50);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXFilterPanelComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AXToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: AXFilterPanelComponent, selector: "ax-filter-panel", inputs: { groups: "groups", predefinedFilters: "predefinedFilters", mode: "mode" }, outputs: { filterChange: "filterChange" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, static: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "savedList", first: true, predicate: ["savedList"], descendants: true, static: true }, { propertyName: "body", first: true, predicate: ["body"], descendants: true, static: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }, { propertyName: "tbxName", first: true, predicate: ["tbxName"], descendants: true, static: true }, { propertyName: "filters", predicate: AXFilterColumnComponent, descendants: true }], ngImport: i0, template: "<div class=\"ax-filter-panel\" #panel>\n    <div class=\"saved-list\" #savedList>\n        <ax-panel-box #fb>\n            <ng-template #header>\n                <div class=\"group-header\" (click)=\"fb.toggle()\">\n                    <ax-toolbar>\n                        <ax-toolbar-title>\n                            <div>\n                                <i class=\"far fa-filter\"></i>\n                                <span>SAVED FILTERS</span>\n                            </div>\n                        </ax-toolbar-title>\n                        <ax-toolbar-menu #menu [items]=\"saveItems\" (onItemClick)=\"onMenuItemClick($event)\">\n                        </ax-toolbar-menu>\n                    </ax-toolbar>\n                </div>\n            </ng-template>\n\n            <div class=\"list\">\n                <ng-container *ngIf=\"predefinedFilters && predefinedFilters.length; else emptyList\">\n                    <ul>\n                        <ng-container *ngFor=\"let f of predefinedFilters\">\n                            <ng-container *ngIf=\"!f.isInEdit; else editMode\">\n                                <li (click)=\"setFilterByName(f.name)\">\n                                    <div class=\"item-line\" [class.selected]=\"f.selected\">\n                                        <span class=\"title\"><i class=\"far fa-check\"></i> {{f.title}}</span>\n                                        <span class=\"tools\"><i class=\"far fa-pen text-primary\" title=\"Rename\"\n                                                (click)=\"handleRenameClick(f)\"></i>&nbsp;<i\n                                                class=\"far fa-times text-danger\" title=\"Remove\"\n                                                (click)=\"removeFilter(f)\"></i></span>\n                                    </div>\n                                </li>\n                            </ng-container>\n                            <ng-template #editMode>\n                                <li>\n                                    <ax-text-box #tbxName placeholder=\"Enter filter's title here\"\n                                        (onKey)=\"tbxNameOnKey($event)\">\n                                        <ax-button title=\"Save\" type=\"primary\" (onClick)=\"applySaveFilter()\">\n                                            <i class=\"far fa-check\"></i>\n                                        </ax-button>\n                                        <ax-button title=\"Cancel\" type=\"danger\" (onClick)=\"cancelSaveFilter()\">\n                                            <i class=\"far fa-times\"></i>\n                                        </ax-button>\n                                        <ax-validation>\n                                            <ax-validation-rule type=\"required\" message=\"this field is required\">\n                                            </ax-validation-rule>\n                                        </ax-validation>\n                                    </ax-text-box>\n                                </li>\n                            </ng-template>\n                        </ng-container>\n                    </ul>\n                </ng-container>\n                <ng-template #emptyList>\n                    <div class=\"empty-list\">\n                        Empty\n                    </div>\n                </ng-template>\n            </div>\n        </ax-panel-box>\n    </div>\n    <div class=\"body\" #body>\n        <ng-container *ngFor=\"let g of groups\">\n            <ax-panel-box #fb>\n                <ng-template #header>\n                    <div class=\"group-header\" *ngIf=\"g.caption\" (click)=\"fb.toggle()\">\n                        <i\n                            [ngClass]=\"{ 'far fa-minus-square' : !fb.collapsed ,'fas fa-plus-square' : fb.collapsed }\"></i>\n                        <span>{{g.caption}}</span>\n                    </div>\n                </ng-template>\n                <ng-container *ngFor=\"let c of g.columns\">\n                    <div class=\"ax-filter-item-header\" [style.margin-bottom.px]=\"c.active ? 0 : 2\">\n                        <ax-check-box (onValueChanged)=\"onCheckValueChange(c,$event)\" [label]=\"c.caption\"\n                            [(value)]=\"c.active\">\n                        </ax-check-box>\n                    </div>\n                    <div [hidden]=\"!c.active\">\n                        <ng-container [ngSwitch]=\"c.type\">\n                            <ng-container *ngSwitchCase=\"'selection'\">\n                                <ax-filter-column-selection (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n                                    [(active)]=\"c.active\" [mode]=\"c.options.mode\" [items]=\"c.options.items\"\n                                    [dataType]=\"c.options.dataType\">\n                                </ax-filter-column-selection>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'date'\">\n                                <ax-filter-column-date (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n                                    [(active)]=\"c.active\">\n                                </ax-filter-column-date>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'number'\">\n                                <ax-filter-column-number (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n                                    [(active)]=\"c.active\">\n                                </ax-filter-column-number>\n                            </ng-container>\n                            <ng-container *ngSwitchDefault>\n                                <ax-filter-column-string (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n                                    [(active)]=\"c.active\">\n                                </ax-filter-column-string>\n                            </ng-container>\n                        </ng-container>\n                    </div>\n                </ng-container>\n            </ax-panel-box>\n        </ng-container>\n    </div>\n\n    <div *ngIf=\"mode=='click'\" class=\"footer\" #footer>\n        <div class=\"filter-panel\">\n            <ax-button (onClick)=\"apply()\" type=\"success\" size=\"sm\">\n                <i class=\"far fa-filter\"></i>\n                Apply Filter\n            </ax-button>\n            <ax-button (onClick)=\"clear();\" type=\"light \" size=\"sm\">\n                <i class=\"far fa-eraser\"></i>\n                Clear\n            </ax-button>\n        </div>\n    </div>\n</div>", styles: [".ax-filter-panel{padding:2px;position:relative;height:100%;font-size:var(--font-md-size)}.ax-filter-panel .empty-list{text-align:center;padding:var(--sp-sm-size);color:var(--gray)}.ax-filter-panel .saved-list{border-bottom:1px solid var(--border-color)}.ax-filter-panel .saved-list .list ul{list-style-type:none;display:flex;flex-direction:column;padding:0;margin-bottom:var(--sp-md-size)}.ax-filter-panel .saved-list .list ul li .item-line{cursor:pointer;display:flex;flex-direction:row;justify-content:space-between}.ax-filter-panel .saved-list .list ul li .item-line .title i{opacity:.1}.ax-filter-panel .saved-list .list ul li .item-line .tools{display:inline}.ax-filter-panel .saved-list .list ul li .item-line .tools i{opacity:.2;cursor:pointer}.ax-filter-panel .saved-list .list ul li .item-line .tools i:hover{opacity:1}.ax-filter-panel .saved-list .list ul li .item-line.selected{font-weight:700}.ax-filter-panel .saved-list .list ul li .item-line.selected .title i{opacity:1}.ax-filter-panel .body{overflow-y:auto;overflow-x:hidden;height:calc(100% - 150px)}.ax-filter-panel .body .form-inline{justify-content:space-between}.ax-filter-panel .group-header{background:var(--white-color);display:flex;align-items:center;padding:var(--sp-sm-size) var(--sp-md-size);border-bottom:1px solid var(--border-color);background:var(--gray-dark-color);color:var(--gray-dark)}.ax-filter-panel .group-header i{margin-right:var(--sp-sm-size)}.ax-filter-panel .ax-filter-item-header{height:var(--el-md-size);display:flex;align-items:center}.ax-filter-panel .footer{width:100%;position:absolute;background-color:var(--white-color);bottom:0;padding:var(--sp-sm-size);border-top:1px solid var(--border-color)}.ax-filter-panel .footer .filter-panel{display:flex;align-items:center}.ax-filter-panel .footer .filter-panel ax-button{margin:0 2px}.ax-filter-panel .ax-filter-section{padding:var(--sp-md-size) var(--sp-lg-size);display:flex;justify-content:space-between;align-items:center}.ax-filter-panel .ax-filter-section>div{flex:1}.ax-filter-panel .ax-filter-section-value{padding:0px var(--sp-md-size) var(--sp-md-size) var(--sp-md-size);display:flex;justify-content:space-between;align-items:center}.ax-filter-panel .ax-filter-section-value>*{margin:0 3px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.AXPanelBoxComponent, selector: "ax-panel-box", inputs: ["size", "type", "caption", "collapsed", "allowCollapse"], outputs: ["collapsedChange"] }, { kind: "component", type: i4.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: i5.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: i6.AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: i7.AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { kind: "component", type: i8.AXToolbarComponent, selector: "ax-toolbar" }, { kind: "component", type: i9.AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "floatPlacemnet", "selection", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i10.AXToolbarTitleComponent, selector: "ax-toolbar-title", inputs: ["text"] }, { kind: "component", type: i11.AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: i12.AXFilterColumnStringComponent, selector: "ax-filter-column-string" }, { kind: "component", type: i13.AXFilterColumnSelectionComponent, selector: "ax-filter-column-selection", inputs: ["items", "mode", "dataType"] }, { kind: "component", type: i14.AXFilterColumnDateComponent, selector: "ax-filter-column-date" }, { kind: "component", type: i15.AXFilterColumnNumberComponent, selector: "ax-filter-column-number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXFilterPanelComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AXToastService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: AXFilterPanelComponent, selector: "ax-filter-panel", inputs: { groups: "groups", predefinedFilters: "predefinedFilters", mode: "mode" }, outputs: { filterChange: "filterChange" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, static: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "savedList", first: true, predicate: ["savedList"], descendants: true, static: true }, { propertyName: "body", first: true, predicate: ["body"], descendants: true, static: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }, { propertyName: "tbxName", first: true, predicate: ["tbxName"], descendants: true, static: true }, { propertyName: "filters", predicate: AXFilterColumnComponent, descendants: true }], ngImport: i0, template: "<div class=\"ax-filter-panel\" #panel>\n    <div class=\"saved-list\" #savedList>\n        <ax-panel-box #fb>\n            <ng-template #header>\n                <div class=\"group-header\" (click)=\"fb.toggle()\">\n                    <ax-toolbar>\n                        <ax-toolbar-title>\n                            <div>\n                                <i class=\"far fa-filter\"></i>\n                                <span>SAVED FILTERS</span>\n                            </div>\n                        </ax-toolbar-title>\n                        <ax-toolbar-menu #menu [items]=\"saveItems\" (onItemClick)=\"onMenuItemClick($event)\">\n                        </ax-toolbar-menu>\n                    </ax-toolbar>\n                </div>\n            </ng-template>\n\n            <div class=\"list\">\n                <ng-container *ngIf=\"predefinedFilters && predefinedFilters.length; else emptyList\">\n                    <ul>\n                        <ng-container *ngFor=\"let f of predefinedFilters\">\n                            <ng-container *ngIf=\"!f.isInEdit; else editMode\">\n                                <li (click)=\"setFilterByName(f.name)\">\n                                    <div class=\"item-line\" [class.selected]=\"f.selected\">\n                                        <span class=\"title\"><i class=\"far fa-check\"></i> {{f.title}}</span>\n                                        <span class=\"tools\"><i class=\"far fa-pen text-primary\" title=\"Rename\"\n                                                (click)=\"handleRenameClick(f)\"></i>&nbsp;<i\n                                                class=\"far fa-times text-danger\" title=\"Remove\"\n                                                (click)=\"removeFilter(f)\"></i></span>\n                                    </div>\n                                </li>\n                            </ng-container>\n                            <ng-template #editMode>\n                                <li>\n                                    <ax-text-box #tbxName placeholder=\"Enter filter's title here\"\n                                        (onKey)=\"tbxNameOnKey($event)\">\n                                        <ax-button title=\"Save\" type=\"primary\" (onClick)=\"applySaveFilter()\">\n                                            <i class=\"far fa-check\"></i>\n                                        </ax-button>\n                                        <ax-button title=\"Cancel\" type=\"danger\" (onClick)=\"cancelSaveFilter()\">\n                                            <i class=\"far fa-times\"></i>\n                                        </ax-button>\n                                        <ax-validation>\n                                            <ax-validation-rule type=\"required\" message=\"this field is required\">\n                                            </ax-validation-rule>\n                                        </ax-validation>\n                                    </ax-text-box>\n                                </li>\n                            </ng-template>\n                        </ng-container>\n                    </ul>\n                </ng-container>\n                <ng-template #emptyList>\n                    <div class=\"empty-list\">\n                        Empty\n                    </div>\n                </ng-template>\n            </div>\n        </ax-panel-box>\n    </div>\n    <div class=\"body\" #body>\n        <ng-container *ngFor=\"let g of groups\">\n            <ax-panel-box #fb>\n                <ng-template #header>\n                    <div class=\"group-header\" *ngIf=\"g.caption\" (click)=\"fb.toggle()\">\n                        <i\n                            [ngClass]=\"{ 'far fa-minus-square' : !fb.collapsed ,'fas fa-plus-square' : fb.collapsed }\"></i>\n                        <span>{{g.caption}}</span>\n                    </div>\n                </ng-template>\n                <ng-container *ngFor=\"let c of g.columns\">\n                    <div class=\"ax-filter-item-header\" [style.margin-bottom.px]=\"c.active ? 0 : 2\">\n                        <ax-check-box (onValueChanged)=\"onCheckValueChange(c,$event)\" [label]=\"c.caption\"\n                            [(value)]=\"c.active\">\n                        </ax-check-box>\n                    </div>\n                    <div [hidden]=\"!c.active\">\n                        <ng-container [ngSwitch]=\"c.type\">\n                            <ng-container *ngSwitchCase=\"'selection'\">\n                                <ax-filter-column-selection (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n                                    [(active)]=\"c.active\" [mode]=\"c.options.mode\" [items]=\"c.options.items\"\n                                    [dataType]=\"c.options.dataType\">\n                                </ax-filter-column-selection>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'date'\">\n                                <ax-filter-column-date (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n                                    [(active)]=\"c.active\">\n                                </ax-filter-column-date>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'number'\">\n                                <ax-filter-column-number (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n                                    [(active)]=\"c.active\">\n                                </ax-filter-column-number>\n                            </ng-container>\n                            <ng-container *ngSwitchDefault>\n                                <ax-filter-column-string (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n                                    [(active)]=\"c.active\">\n                                </ax-filter-column-string>\n                            </ng-container>\n                        </ng-container>\n                    </div>\n                </ng-container>\n            </ax-panel-box>\n        </ng-container>\n    </div>\n\n    <div *ngIf=\"mode=='click'\" class=\"footer\" #footer>\n        <div class=\"filter-panel\">\n            <ax-button (onClick)=\"apply()\" type=\"success\" size=\"sm\">\n                <i class=\"far fa-filter\"></i>\n                Apply Filter\n            </ax-button>\n            <ax-button (onClick)=\"clear();\" type=\"light \" size=\"sm\">\n                <i class=\"far fa-eraser\"></i>\n                Clear\n            </ax-button>\n        </div>\n    </div>\n</div>", styles: [".ax-filter-panel{padding:2px;position:relative;height:100%;font-size:var(--font-md-size)}.ax-filter-panel .empty-list{text-align:center;padding:var(--sp-sm-size);color:var(--gray)}.ax-filter-panel .saved-list{border-bottom:1px solid var(--border-color)}.ax-filter-panel .saved-list .list ul{list-style-type:none;display:flex;flex-direction:column;padding:0;margin-bottom:var(--sp-md-size)}.ax-filter-panel .saved-list .list ul li .item-line{cursor:pointer;display:flex;flex-direction:row;justify-content:space-between}.ax-filter-panel .saved-list .list ul li .item-line .title i{opacity:.1}.ax-filter-panel .saved-list .list ul li .item-line .tools{display:inline}.ax-filter-panel .saved-list .list ul li .item-line .tools i{opacity:.2;cursor:pointer}.ax-filter-panel .saved-list .list ul li .item-line .tools i:hover{opacity:1}.ax-filter-panel .saved-list .list ul li .item-line.selected{font-weight:700}.ax-filter-panel .saved-list .list ul li .item-line.selected .title i{opacity:1}.ax-filter-panel .body{overflow-y:auto;overflow-x:hidden;height:calc(100% - 150px)}.ax-filter-panel .body .form-inline{justify-content:space-between}.ax-filter-panel .group-header{background:var(--white-color);display:flex;align-items:center;padding:var(--sp-sm-size) var(--sp-md-size);border-bottom:1px solid var(--border-color);background:var(--gray-dark-color);color:var(--gray-dark)}.ax-filter-panel .group-header i{margin-right:var(--sp-sm-size)}.ax-filter-panel .ax-filter-item-header{height:var(--el-md-size);display:flex;align-items:center}.ax-filter-panel .footer{width:100%;position:absolute;background-color:var(--white-color);bottom:0;padding:var(--sp-sm-size);border-top:1px solid var(--border-color)}.ax-filter-panel .footer .filter-panel{display:flex;align-items:center}.ax-filter-panel .footer .filter-panel ax-button{margin:0 2px}.ax-filter-panel .ax-filter-section{padding:var(--sp-md-size) var(--sp-lg-size);display:flex;justify-content:space-between;align-items:center}.ax-filter-panel .ax-filter-section>div{flex:1}.ax-filter-panel .ax-filter-section-value{padding:0px var(--sp-md-size) var(--sp-md-size) var(--sp-md-size);display:flex;justify-content:space-between;align-items:center}.ax-filter-panel .ax-filter-section-value>*{margin:0 3px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.AXPanelBoxComponent, selector: "ax-panel-box", inputs: ["size", "type", "caption", "collapsed", "allowCollapse"], outputs: ["collapsedChange"] }, { kind: "component", type: i4.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: i5.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: i6.AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: i7.AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { kind: "component", type: i8.AXToolbarComponent, selector: "ax-toolbar" }, { kind: "component", type: i9.AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "floatPlacemnet", "selection", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i10.AXToolbarTitleComponent, selector: "ax-toolbar-title", inputs: ["text"] }, { kind: "component", type: i11.AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: i12.AXFilterColumnStringComponent, selector: "ax-filter-column-string" }, { kind: "component", type: i13.AXFilterColumnSelectionComponent, selector: "ax-filter-column-selection", inputs: ["items", "mode", "dataType"] }, { kind: "component", type: i14.AXFilterColumnDateComponent, selector: "ax-filter-column-date" }, { kind: "component", type: i15.AXFilterColumnNumberComponent, selector: "ax-filter-column-number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXFilterPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXFilterPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-filter-panel', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-filter-panel\" #panel>\n    <div class=\"saved-list\" #savedList>\n        <ax-panel-box #fb>\n            <ng-template #header>\n                <div class=\"group-header\" (click)=\"fb.toggle()\">\n                    <ax-toolbar>\n                        <ax-toolbar-title>\n                            <div>\n                                <i class=\"far fa-filter\"></i>\n                                <span>SAVED FILTERS</span>\n                            </div>\n                        </ax-toolbar-title>\n                        <ax-toolbar-menu #menu [items]=\"saveItems\" (onItemClick)=\"onMenuItemClick($event)\">\n                        </ax-toolbar-menu>\n                    </ax-toolbar>\n                </div>\n            </ng-template>\n\n            <div class=\"list\">\n                <ng-container *ngIf=\"predefinedFilters && predefinedFilters.length; else emptyList\">\n                    <ul>\n                        <ng-container *ngFor=\"let f of predefinedFilters\">\n                            <ng-container *ngIf=\"!f.isInEdit; else editMode\">\n                                <li (click)=\"setFilterByName(f.name)\">\n                                    <div class=\"item-line\" [class.selected]=\"f.selected\">\n                                        <span class=\"title\"><i class=\"far fa-check\"></i> {{f.title}}</span>\n                                        <span class=\"tools\"><i class=\"far fa-pen text-primary\" title=\"Rename\"\n                                                (click)=\"handleRenameClick(f)\"></i>&nbsp;<i\n                                                class=\"far fa-times text-danger\" title=\"Remove\"\n                                                (click)=\"removeFilter(f)\"></i></span>\n                                    </div>\n                                </li>\n                            </ng-container>\n                            <ng-template #editMode>\n                                <li>\n                                    <ax-text-box #tbxName placeholder=\"Enter filter's title here\"\n                                        (onKey)=\"tbxNameOnKey($event)\">\n                                        <ax-button title=\"Save\" type=\"primary\" (onClick)=\"applySaveFilter()\">\n                                            <i class=\"far fa-check\"></i>\n                                        </ax-button>\n                                        <ax-button title=\"Cancel\" type=\"danger\" (onClick)=\"cancelSaveFilter()\">\n                                            <i class=\"far fa-times\"></i>\n                                        </ax-button>\n                                        <ax-validation>\n                                            <ax-validation-rule type=\"required\" message=\"this field is required\">\n                                            </ax-validation-rule>\n                                        </ax-validation>\n                                    </ax-text-box>\n                                </li>\n                            </ng-template>\n                        </ng-container>\n                    </ul>\n                </ng-container>\n                <ng-template #emptyList>\n                    <div class=\"empty-list\">\n                        Empty\n                    </div>\n                </ng-template>\n            </div>\n        </ax-panel-box>\n    </div>\n    <div class=\"body\" #body>\n        <ng-container *ngFor=\"let g of groups\">\n            <ax-panel-box #fb>\n                <ng-template #header>\n                    <div class=\"group-header\" *ngIf=\"g.caption\" (click)=\"fb.toggle()\">\n                        <i\n                            [ngClass]=\"{ 'far fa-minus-square' : !fb.collapsed ,'fas fa-plus-square' : fb.collapsed }\"></i>\n                        <span>{{g.caption}}</span>\n                    </div>\n                </ng-template>\n                <ng-container *ngFor=\"let c of g.columns\">\n                    <div class=\"ax-filter-item-header\" [style.margin-bottom.px]=\"c.active ? 0 : 2\">\n                        <ax-check-box (onValueChanged)=\"onCheckValueChange(c,$event)\" [label]=\"c.caption\"\n                            [(value)]=\"c.active\">\n                        </ax-check-box>\n                    </div>\n                    <div [hidden]=\"!c.active\">\n                        <ng-container [ngSwitch]=\"c.type\">\n                            <ng-container *ngSwitchCase=\"'selection'\">\n                                <ax-filter-column-selection (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n                                    [(active)]=\"c.active\" [mode]=\"c.options.mode\" [items]=\"c.options.items\"\n                                    [dataType]=\"c.options.dataType\">\n                                </ax-filter-column-selection>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'date'\">\n                                <ax-filter-column-date (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n                                    [(active)]=\"c.active\">\n                                </ax-filter-column-date>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'number'\">\n                                <ax-filter-column-number (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n                                    [(active)]=\"c.active\">\n                                </ax-filter-column-number>\n                            </ng-container>\n                            <ng-container *ngSwitchDefault>\n                                <ax-filter-column-string (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n                                    [(active)]=\"c.active\">\n                                </ax-filter-column-string>\n                            </ng-container>\n                        </ng-container>\n                    </div>\n                </ng-container>\n            </ax-panel-box>\n        </ng-container>\n    </div>\n\n    <div *ngIf=\"mode=='click'\" class=\"footer\" #footer>\n        <div class=\"filter-panel\">\n            <ax-button (onClick)=\"apply()\" type=\"success\" size=\"sm\">\n                <i class=\"far fa-filter\"></i>\n                Apply Filter\n            </ax-button>\n            <ax-button (onClick)=\"clear();\" type=\"light \" size=\"sm\">\n                <i class=\"far fa-eraser\"></i>\n                Clear\n            </ax-button>\n        </div>\n    </div>\n</div>", styles: [".ax-filter-panel{padding:2px;position:relative;height:100%;font-size:var(--font-md-size)}.ax-filter-panel .empty-list{text-align:center;padding:var(--sp-sm-size);color:var(--gray)}.ax-filter-panel .saved-list{border-bottom:1px solid var(--border-color)}.ax-filter-panel .saved-list .list ul{list-style-type:none;display:flex;flex-direction:column;padding:0;margin-bottom:var(--sp-md-size)}.ax-filter-panel .saved-list .list ul li .item-line{cursor:pointer;display:flex;flex-direction:row;justify-content:space-between}.ax-filter-panel .saved-list .list ul li .item-line .title i{opacity:.1}.ax-filter-panel .saved-list .list ul li .item-line .tools{display:inline}.ax-filter-panel .saved-list .list ul li .item-line .tools i{opacity:.2;cursor:pointer}.ax-filter-panel .saved-list .list ul li .item-line .tools i:hover{opacity:1}.ax-filter-panel .saved-list .list ul li .item-line.selected{font-weight:700}.ax-filter-panel .saved-list .list ul li .item-line.selected .title i{opacity:1}.ax-filter-panel .body{overflow-y:auto;overflow-x:hidden;height:calc(100% - 150px)}.ax-filter-panel .body .form-inline{justify-content:space-between}.ax-filter-panel .group-header{background:var(--white-color);display:flex;align-items:center;padding:var(--sp-sm-size) var(--sp-md-size);border-bottom:1px solid var(--border-color);background:var(--gray-dark-color);color:var(--gray-dark)}.ax-filter-panel .group-header i{margin-right:var(--sp-sm-size)}.ax-filter-panel .ax-filter-item-header{height:var(--el-md-size);display:flex;align-items:center}.ax-filter-panel .footer{width:100%;position:absolute;background-color:var(--white-color);bottom:0;padding:var(--sp-sm-size);border-top:1px solid var(--border-color)}.ax-filter-panel .footer .filter-panel{display:flex;align-items:center}.ax-filter-panel .footer .filter-panel ax-button{margin:0 2px}.ax-filter-panel .ax-filter-section{padding:var(--sp-md-size) var(--sp-lg-size);display:flex;justify-content:space-between;align-items:center}.ax-filter-panel .ax-filter-section>div{flex:1}.ax-filter-panel .ax-filter-section-value{padding:0px var(--sp-md-size) var(--sp-md-size) var(--sp-md-size);display:flex;justify-content:space-between;align-items:center}.ax-filter-panel .ax-filter-section-value>*{margin:0 3px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.AXToastService }], propDecorators: { panel: [{

package/esm2022/lib/data-filter/filter.class.mjs

@@ -29,10 +29,10 @@ export class AXFilterColumnComponent {
         this.value = value;
         this.cdr.detectChanges();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXFilterColumnComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.3", type: AXFilterColumnComponent, inputs: { field: "field", active: "active" }, outputs: { valueChange: "valueChange", activeChange: "activeChange" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXFilterColumnComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: AXFilterColumnComponent, inputs: { field: "field", active: "active" }, outputs: { valueChange: "valueChange", activeChange: "activeChange" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXFilterColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXFilterColumnComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { field: [{
                 type: Input

package/esm2022/lib/data-filter/filter.module.mjs

@@ -27,8 +27,8 @@ const COMPONENTS = [
     AXToolbarFilterViewComponent,
 ];
 export class AXFilterModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.3", ngImport: i0, type: AXFilterModule, declarations: [AXFilterPanelComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: AXFilterModule, declarations: [AXFilterPanelComponent,
             AXFilterColumnStringComponent,
             AXFilterColumnSelectionComponent,
             AXFilterColumnDateComponent,
@@ -50,7 +50,7 @@ export class AXFilterModule {
             AXFilterColumnDateComponent,
             AXFilterColumnNumberComponent,
             AXToolbarFilterViewComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXFilterModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXFilterModule, imports: [CommonModule,
             FormsModule,
             AXPanelBoxModule,
             AXDatePickerModule,
@@ -63,7 +63,7 @@ export class AXFilterModule {
             AXSelectionListModule,
             AXButtonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXFilterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXFilterModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMPONENTS],

package/esm2022/lib/data-filter/toolbar/filter-toolbar.component.mjs

@@ -150,10 +150,10 @@ export class AXToolbarFilterViewComponent {
             this.selectAll();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXToolbarFilterViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: AXToolbarFilterViewComponent, selector: "ax-toolbar-filter-view", inputs: { filterPanel: "filterPanel" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarFilterViewComponent }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, static: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, static: true }], ngImport: i0, template: "<ax-toolbar-menu [items]=\"menuItems\" (onItemClick)=\"itemClick($event)\" #menu >\n   \n</ax-toolbar-menu>\n<ax-menu target=\".{{_uid}}\" [items]=\"contextMenuItems\"  direction=\"vertical\"  #contextMenu (onItemClick)=\"onCtxClick($event)\">\n</ax-menu>", styles: [".ax-toolbar-menu-item .icon-remove{visibility:hidden;color:var(--danger-color);margin-inline-start:25px;font-size:var(--font-sm-size)}.ax-toolbar-menu-item:hover>.icon-remove{visibility:unset}\n"], dependencies: [{ kind: "component", type: i1.AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "floatPlacemnet", "selection", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i2.AXMenuComponent, selector: "ax-menu", inputs: ["menuTemplate", "rtl", "size", "selection", "mode", "target", "floatAlignment", "floatPlacemnet", "direction", "items"], outputs: ["onItemClick"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXToolbarFilterViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: AXToolbarFilterViewComponent, selector: "ax-toolbar-filter-view", inputs: { filterPanel: "filterPanel" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarFilterViewComponent }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, static: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, static: true }], ngImport: i0, template: "<ax-toolbar-menu [items]=\"menuItems\" (onItemClick)=\"itemClick($event)\" #menu >\n   \n</ax-toolbar-menu>\n<ax-menu target=\".{{_uid}}\" [items]=\"contextMenuItems\"  direction=\"vertical\"  #contextMenu (onItemClick)=\"onCtxClick($event)\">\n</ax-menu>", styles: [".ax-toolbar-menu-item .icon-remove{visibility:hidden;color:var(--danger-color);margin-inline-start:25px;font-size:var(--font-sm-size)}.ax-toolbar-menu-item:hover>.icon-remove{visibility:unset}\n"], dependencies: [{ kind: "component", type: i1.AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "floatPlacemnet", "selection", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i2.AXMenuComponent, selector: "ax-menu", inputs: ["menuTemplate", "rtl", "size", "selection", "mode", "target", "floatAlignment", "floatPlacemnet", "direction", "items"], outputs: ["onItemClick"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXToolbarFilterViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXToolbarFilterViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-toolbar-filter-view', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarFilterViewComponent }], template: "<ax-toolbar-menu [items]=\"menuItems\" (onItemClick)=\"itemClick($event)\" #menu >\n   \n</ax-toolbar-menu>\n<ax-menu target=\".{{_uid}}\" [items]=\"contextMenuItems\"  direction=\"vertical\"  #contextMenu (onItemClick)=\"onCtxClick($event)\">\n</ax-menu>", styles: [".ax-toolbar-menu-item .icon-remove{visibility:hidden;color:var(--danger-color);margin-inline-start:25px;font-size:var(--font-sm-size)}.ax-toolbar-menu-item:hover>.icon-remove{visibility:unset}\n"] }]
         }], ctorParameters: () => [], propDecorators: { menu: [{

package/esm2022/lib/data-list/core/data-list.component.mjs

@@ -26,10 +26,10 @@ export class AXDataListComponent extends AXBaseComponent {
     refresh() {
         this.fetch(this.params);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXDataListComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.3", type: AXDataListComponent, inputs: { items: "items" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXDataListComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: AXDataListComponent, inputs: { items: "items" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AXDataListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: AXDataListComponent, decorators: [{
             type: Directive
         }], propDecorators: { items: [{
                 type: Input