@acorex/components 16.18.14 → 16.18.16

package/fesm2022/acorex-components.mjs

@@ -260,15 +260,21 @@ class AXEvent {
 
 class AXBaseComponent {
     cssClass;
+    axId;
+    axClass;
     uid = AXHtmlUtil.getUID();
     constructor() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.7", type: AXBaseComponent, inputs: { cssClass: "cssClass" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.7", type: AXBaseComponent, inputs: { cssClass: "cssClass", axId: "axId", axClass: "axClass" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXBaseComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [], propDecorators: { cssClass: [{
                 type: Input
+            }], axId: [{
+                type: Input
+            }], axClass: [{
+                type: Input
             }] } });
 class AXBaseInputChangeEvent extends AXValueEvent {
     isUserChange;
@@ -694,14 +700,20 @@ class AXLoadingIndicatorComponent {
         this.size = 80;
     }
     size;
+    axId;
+    axClass;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXLoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXLoadingIndicatorComponent, selector: "ax-loading-indicator", inputs: { size: "size" }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" style=\"margin:auto;display:block;\"\n    [style.width.px]=\"size\" [style.height.px]=\"size\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\">\n    <rect fill=\"var(--ax-gray-trans-light-color)\" x=\"55\" y=\"55\" width=\"30\" height=\"30\" rx=\"3\" ry=\"3\">\n        <animate attributeName=\"x\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\n            begin=\"-1.8333333333333333s\"></animate>\n        <animate attributeName=\"y\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\n            begin=\"-1.3333333333333333s\"></animate>\n    </rect>\n    <rect fill=\"var(--ax-primary-light-color)\" x=\"55\" y=\"15\" width=\"30\" height=\"30\" rx=\"3\" ry=\"3\">\n        <animate attributeName=\"x\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\n            begin=\"-1.1666666666666667s\"></animate>\n        <animate attributeName=\"y\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\n            begin=\"-0.6666666666666666s\"></animate>\n    </rect>\n    <rect fill=\"var(--ax-primary-dark-color)\" x=\"15\" y=\"34.6776\" width=\"30\" height=\"30\" rx=\"3\" ry=\"3\">\n        <animate attributeName=\"x\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\" begin=\"-0.5s\">\n        </animate>\n        <animate attributeName=\"y\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\" begin=\"0s\">\n        </animate>\n    </rect>\n</svg>" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXLoadingIndicatorComponent, selector: "ax-loading-indicator", inputs: { size: "size", axId: "axId", axClass: "axClass" }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" style=\"margin:auto;display:block;\"\n    [style.width.px]=\"size\" [attr.id]=\"axId\" [attr.class]=\"axClass\" [style.height.px]=\"size\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\">\n    <rect fill=\"var(--ax-gray-trans-light-color)\" x=\"55\" y=\"55\" width=\"30\" height=\"30\" rx=\"3\" ry=\"3\">\n        <animate attributeName=\"x\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\n            begin=\"-1.8333333333333333s\"></animate>\n        <animate attributeName=\"y\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\n            begin=\"-1.3333333333333333s\"></animate>\n    </rect>\n    <rect fill=\"var(--ax-primary-light-color)\" x=\"55\" y=\"15\" width=\"30\" height=\"30\" rx=\"3\" ry=\"3\">\n        <animate attributeName=\"x\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\n            begin=\"-1.1666666666666667s\"></animate>\n        <animate attributeName=\"y\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\n            begin=\"-0.6666666666666666s\"></animate>\n    </rect>\n    <rect fill=\"var(--ax-primary-dark-color)\" x=\"15\" y=\"34.6776\" width=\"30\" height=\"30\" rx=\"3\" ry=\"3\">\n        <animate attributeName=\"x\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\" begin=\"-0.5s\">\n        </animate>\n        <animate attributeName=\"y\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\" begin=\"0s\">\n        </animate>\n    </rect>\n</svg>" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXLoadingIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-loading-indicator', template: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" style=\"margin:auto;display:block;\"\n    [style.width.px]=\"size\" [style.height.px]=\"size\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\">\n    <rect fill=\"var(--ax-gray-trans-light-color)\" x=\"55\" y=\"55\" width=\"30\" height=\"30\" rx=\"3\" ry=\"3\">\n        <animate attributeName=\"x\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\n            begin=\"-1.8333333333333333s\"></animate>\n        <animate attributeName=\"y\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\n            begin=\"-1.3333333333333333s\"></animate>\n    </rect>\n    <rect fill=\"var(--ax-primary-light-color)\" x=\"55\" y=\"15\" width=\"30\" height=\"30\" rx=\"3\" ry=\"3\">\n        <animate attributeName=\"x\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\n            begin=\"-1.1666666666666667s\"></animate>\n        <animate attributeName=\"y\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\n            begin=\"-0.6666666666666666s\"></animate>\n    </rect>\n    <rect fill=\"var(--ax-primary-dark-color)\" x=\"15\" y=\"34.6776\" width=\"30\" height=\"30\" rx=\"3\" ry=\"3\">\n        <animate attributeName=\"x\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\" begin=\"-0.5s\">\n        </animate>\n        <animate attributeName=\"y\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\" begin=\"0s\">\n        </animate>\n    </rect>\n</svg>" }]
+            args: [{ selector: 'ax-loading-indicator', template: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" style=\"margin:auto;display:block;\"\n    [style.width.px]=\"size\" [attr.id]=\"axId\" [attr.class]=\"axClass\" [style.height.px]=\"size\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\">\n    <rect fill=\"var(--ax-gray-trans-light-color)\" x=\"55\" y=\"55\" width=\"30\" height=\"30\" rx=\"3\" ry=\"3\">\n        <animate attributeName=\"x\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\n            begin=\"-1.8333333333333333s\"></animate>\n        <animate attributeName=\"y\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\n            begin=\"-1.3333333333333333s\"></animate>\n    </rect>\n    <rect fill=\"var(--ax-primary-light-color)\" x=\"55\" y=\"15\" width=\"30\" height=\"30\" rx=\"3\" ry=\"3\">\n        <animate attributeName=\"x\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\n            begin=\"-1.1666666666666667s\"></animate>\n        <animate attributeName=\"y\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\n            begin=\"-0.6666666666666666s\"></animate>\n    </rect>\n    <rect fill=\"var(--ax-primary-dark-color)\" x=\"15\" y=\"34.6776\" width=\"30\" height=\"30\" rx=\"3\" ry=\"3\">\n        <animate attributeName=\"x\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\" begin=\"-0.5s\">\n        </animate>\n        <animate attributeName=\"y\" dur=\"2s\" repeatCount=\"indefinite\"\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\" begin=\"0s\">\n        </animate>\n    </rect>\n</svg>" }]
         }], ctorParameters: () => [], propDecorators: { size: [{
                 type: Input
+            }], axId: [{
+                type: Input
+            }], axClass: [{
+                type: Input
             }] } });
 
 class AXLoadingService {
@@ -932,11 +944,11 @@ class AXButtonComponent extends AXBaseButtonComponent {
         this.container.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXButtonComponent, selector: "ax-button", inputs: { type: "type", icon: "icon", submitBehavior: "submitBehavior", cancelBehavior: "cancelBehavior", block: "block", loading: "loading", selected: "selected" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<button #container class=\"ax button form-control {{type}} {{size}} {{cssClass}}\" [class.ax-button-icon]=\"refContent.innerText.length==0 && refContent.children.length == 0\" [class.selected]=\"selected\" [class.icon]=\"icon\"\n    [class.icon]=\"loading\" [class.disabled]=\"disabled || loading\" (click)=\"handleClick($event)\" [disabled]=\"disabled\"\n    [ngStyle]=\"{'width.%': block ? 100 : 'auto'}\" [attr.tabindex]=\"tabIndex\">\n    <div class=\"button-inner-content\">\n        <ng-container *ngIf=\"icon && !loading\">\n            <i class=\"{{icon}} icon\"></i>\n            <ng-container *ngIf=\"refContent.innerText.length==0 && refContent.children.length == 0\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"loading\">\n            <i class=\"far fa-circle-notch fa-spin icon\"></i>\n            <ng-container *ngIf=\"refContent.innerText.length==0 && refContent.children.length == 0\"></ng-container>\n        </ng-container>\n        <div class=\"ax-wrapper\" #refContent>\n            <ng-content></ng-content>\n        </div>\n    </div>\n</button>", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXButtonComponent, selector: "ax-button", inputs: { type: "type", icon: "icon", submitBehavior: "submitBehavior", cancelBehavior: "cancelBehavior", block: "block", loading: "loading", selected: "selected" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<button #container class=\"ax button form-control {{type}} {{size}} {{cssClass}}\"\n    [class.ax-button-icon]=\"refContent.innerText.length == 0 && refContent.children.length == 0\"\n    [class.selected]=\"selected\" [class.icon]=\"icon\" [class.icon]=\"loading\" [class.disabled]=\"disabled || loading\"\n    (click)=\"handleClick($event)\" [disabled]=\"disabled\" [ngStyle]=\"{'width.%': block ? 100 : 'auto'}\"\n    [attr.tabindex]=\"tabIndex\" [attr.id]=\"axId\" [ngClass]=\"axClass\">\n\n    <div class=\"button-inner-content\">\n        <ng-container *ngIf=\"icon && !loading\">\n            <i class=\"{{icon}} icon\"></i>\n            <ng-container *ngIf=\"refContent.innerText.length == 0 && refContent.children.length == 0\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"loading\">\n            <i class=\"far fa-circle-notch fa-spin icon\"></i>\n            <ng-container *ngIf=\"refContent.innerText.length == 0 && refContent.children.length == 0\"></ng-container>\n        </ng-container>\n        <div class=\"ax-wrapper\" #refContent>\n            <ng-content></ng-content>\n        </div>\n    </div>\n</button>", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-button', encapsulation: ViewEncapsulation.None, template: "<button #container class=\"ax button form-control {{type}} {{size}} {{cssClass}}\" [class.ax-button-icon]=\"refContent.innerText.length==0 && refContent.children.length == 0\" [class.selected]=\"selected\" [class.icon]=\"icon\"\n    [class.icon]=\"loading\" [class.disabled]=\"disabled || loading\" (click)=\"handleClick($event)\" [disabled]=\"disabled\"\n    [ngStyle]=\"{'width.%': block ? 100 : 'auto'}\" [attr.tabindex]=\"tabIndex\">\n    <div class=\"button-inner-content\">\n        <ng-container *ngIf=\"icon && !loading\">\n            <i class=\"{{icon}} icon\"></i>\n            <ng-container *ngIf=\"refContent.innerText.length==0 && refContent.children.length == 0\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"loading\">\n            <i class=\"far fa-circle-notch fa-spin icon\"></i>\n            <ng-container *ngIf=\"refContent.innerText.length==0 && refContent.children.length == 0\"></ng-container>\n        </ng-container>\n        <div class=\"ax-wrapper\" #refContent>\n            <ng-content></ng-content>\n        </div>\n    </div>\n</button>" }]
+            args: [{ selector: 'ax-button', encapsulation: ViewEncapsulation.None, template: "<button #container class=\"ax button form-control {{type}} {{size}} {{cssClass}}\"\n    [class.ax-button-icon]=\"refContent.innerText.length == 0 && refContent.children.length == 0\"\n    [class.selected]=\"selected\" [class.icon]=\"icon\" [class.icon]=\"loading\" [class.disabled]=\"disabled || loading\"\n    (click)=\"handleClick($event)\" [disabled]=\"disabled\" [ngStyle]=\"{'width.%': block ? 100 : 'auto'}\"\n    [attr.tabindex]=\"tabIndex\" [attr.id]=\"axId\" [ngClass]=\"axClass\">\n\n    <div class=\"button-inner-content\">\n        <ng-container *ngIf=\"icon && !loading\">\n            <i class=\"{{icon}} icon\"></i>\n            <ng-container *ngIf=\"refContent.innerText.length == 0 && refContent.children.length == 0\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"loading\">\n            <i class=\"far fa-circle-notch fa-spin icon\"></i>\n            <ng-container *ngIf=\"refContent.innerText.length == 0 && refContent.children.length == 0\"></ng-container>\n        </ng-container>\n        <div class=\"ax-wrapper\" #refContent>\n            <ng-content></ng-content>\n        </div>\n    </div>\n</button>" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container', { static: true }]
@@ -997,6 +1009,8 @@ class AXCalendarBoxComponent {
     type;
     locale;
     dir;
+    axId;
+    axClass;
     _min;
     set min(v) {
         if (v) {
@@ -1399,11 +1413,11 @@ class AXCalendarBoxComponent {
         return item.date.date.getTime();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXCalendarBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: { size: "size", type: "type", locale: "locale", dir: "dir", min: "min", max: "max", selectableHoliday: "selectableHoliday", dayStyle: "dayStyle", dayMinMaxResoan: "dayMinMaxResoan", showTodayButton: "showTodayButton", view: "view", depth: "depth", value: "value" }, outputs: { onValueChanged: "onValueChanged", onClick: "onClick", valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"ax-calendar-container {{size}}\" [ngClass]=\"type\">\n    <div class=\"ax-calendar-header\">\n        <div class=\"ax-controll-button\">\n            <ax-button type=\"light blank\" (click)=\"next()\">\n                {{'common.next' | trans}}\n            </ax-button>\n        </div>\n        <div class=\"ax-nav-button\" [ngSwitch]=\"view\">\n            <ax-button type=\"light blank\" (click)=\"changeView()\">\n                <ng-container *ngSwitchCase=\"'day'\">\n                    {{viewRange.startTime.add('day',10) | dt:\"MMM YYYY\"}}\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'month'\">\n                    {{viewRange.startTime | dt:\"YYYY\"}}\n                </ng-container>\n                <ng-container *ngSwitchDefault>\n                    {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\n                </ng-container>\n            </ax-button>\n        </div>\n        <div class=\"ax-controll-button\">\n            <ax-button type=\"light blank\" (click)=\"prev()\">\n                {{'common.prev' | trans}}\n            </ax-button>\n        </div>\n    </div>\n    <div class=\"ax-calendar-body\">\n        <ng-container [ngSwitch]=\"view\">\n            <ng-container *ngSwitchCase=\"'day'\">\n                <div class=\"ax-month-items\">\n                    <ng-container *ngFor='let w of weekdays'>\n                        <div class=\"ax-month-item\">{{w}}</div>\n                    </ng-container>\n                </div>\n                <div class=\"ax-day-items\">\n                    <ng-container *ngFor=\"let r of matrix\">\n                        <div class=\"ax-day-item ax-state-event\" *ngFor=\"let d of r;trackBy:trackByFn\" [title]=\"getTitle(d.date)\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today,'next-month':d.nextMonth , 'holiday':d.holiday , 'unselect':d.unselect}\" [ngStyle]=\"(findDay(d.date)) ? getStyle(d.date):''\"\n                            (click)=\"setDayClick($event,d)\">\n                            {{d.date.dayInMonth}}</div>\n                    </ng-container>\n\n                </div>\n            </ng-container>\n            <div class=\"ax-month-container\" *ngSwitchCase=\"'month'\">\n                <ng-container *ngFor=\"let r of matrix\">\n                    <div class=\"ax-month-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setMonthClick($event,d.date)\">\n                        <strong>\n                            {{d.date| dt:\"MMM\"}}\n                        </strong>\n                    </div>\n                </ng-container>\n            </div>\n            <div class=\"ax-year-container\" *ngSwitchCase=\"'year'\">\n                <ng-container class=\"calendar-row\" *ngFor=\"let r of matrix\">\n                    <div class=\"ax-year-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setYearClick($event,d.date)\">\n                        <strong>{{d.date | dt:\"YYYY\"}}</strong>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n\n    </div>\n    <div class=\"ax-calendar-footer\">\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" type=\"dark\">\n            {{getTodayName()}}\n        </ax-button>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "pipe", type: i1$2.AXDateTimePipe, name: "dt" }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: { size: "size", type: "type", locale: "locale", dir: "dir", axId: "axId", axClass: "axClass", min: "min", max: "max", selectableHoliday: "selectableHoliday", dayStyle: "dayStyle", dayMinMaxResoan: "dayMinMaxResoan", showTodayButton: "showTodayButton", view: "view", depth: "depth", value: "value" }, outputs: { onValueChanged: "onValueChanged", onClick: "onClick", valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"ax-calendar-container {{size}}\" \n    [ngClass]=\"[type, axClass]\" \n    [attr.id]=\"axId\">\n    \n    <div class=\"ax-calendar-header\">\n        <div class=\"ax-controll-button\">\n            <ax-button type=\"light blank\" (click)=\"next()\">\n                {{'common.next' | trans}}\n            </ax-button>\n        </div>\n        <div class=\"ax-nav-button\" [ngSwitch]=\"view\">\n            <ax-button type=\"light blank\" (click)=\"changeView()\">\n                <ng-container *ngSwitchCase=\"'day'\">\n                    {{viewRange.startTime.add('day', 10) | dt:\"MMM YYYY\"}}\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'month'\">\n                    {{viewRange.startTime | dt:\"YYYY\"}}\n                </ng-container>\n                <ng-container *ngSwitchDefault>\n                    {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\n                </ng-container>\n            </ax-button>\n        </div>\n        <div class=\"ax-controll-button\">\n            <ax-button type=\"light blank\" (click)=\"prev()\">\n                {{'common.prev' | trans}}\n            </ax-button>\n        </div>\n    </div>\n    \n    <div class=\"ax-calendar-body\">\n        <ng-container [ngSwitch]=\"view\">\n            <ng-container *ngSwitchCase=\"'day'\">\n                <div class=\"ax-month-items\">\n                    <ng-container *ngFor=\"let w of weekdays\">\n                        <div class=\"ax-month-item\">{{w}}</div>\n                    </ng-container>\n                </div>\n                <div class=\"ax-day-items\">\n                    <ng-container *ngFor=\"let r of matrix\">\n                        <div class=\"ax-day-item ax-state-event\" *ngFor=\"let d of r; trackBy:trackByFn\" \n                            [title]=\"getTitle(d.date)\" \n                            [ngClass]=\"{'selected': d.selected, 'focused': d.focused, 'today': d.today, 'next-month': d.nextMonth, 'holiday': d.holiday, 'unselect': d.unselect}\" \n                            [ngStyle]=\"(findDay(d.date)) ? getStyle(d.date) : ''\" \n                            (click)=\"setDayClick($event, d)\">\n                            {{d.date.dayInMonth}}\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            \n            <div class=\"ax-month-container\" *ngSwitchCase=\"'month'\">\n                <ng-container *ngFor=\"let r of matrix\">\n                    <div class=\"ax-month-item\" *ngFor=\"let d of r; trackBy:trackByFn\" \n                        [ngClass]=\"{'selected': d.selected, 'focused': d.focused, 'today': d.today}\" \n                        (click)=\"setMonthClick($event, d.date)\">\n                        <strong>{{d.date | dt:\"MMM\"}}</strong>\n                    </div>\n                </ng-container>\n            </div>\n            \n            <div class=\"ax-year-container\" *ngSwitchCase=\"'year'\">\n                <ng-container class=\"calendar-row\" *ngFor=\"let r of matrix\">\n                    <div class=\"ax-year-item\" *ngFor=\"let d of r; trackBy:trackByFn\" \n                        [ngClass]=\"{'selected': d.selected, 'focused': d.focused, 'today': d.today}\" \n                        (click)=\"setYearClick($event, d.date)\">\n                        <strong>{{d.date | dt:\"YYYY\"}}</strong>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n    </div>\n    \n    <div class=\"ax-calendar-footer\">\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" type=\"dark\">\n            {{getTodayName()}}\n        </ax-button>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "pipe", type: i1$2.AXDateTimePipe, name: "dt" }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXCalendarBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-calendar-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-calendar-container {{size}}\" [ngClass]=\"type\">\n    <div class=\"ax-calendar-header\">\n        <div class=\"ax-controll-button\">\n            <ax-button type=\"light blank\" (click)=\"next()\">\n                {{'common.next' | trans}}\n            </ax-button>\n        </div>\n        <div class=\"ax-nav-button\" [ngSwitch]=\"view\">\n            <ax-button type=\"light blank\" (click)=\"changeView()\">\n                <ng-container *ngSwitchCase=\"'day'\">\n                    {{viewRange.startTime.add('day',10) | dt:\"MMM YYYY\"}}\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'month'\">\n                    {{viewRange.startTime | dt:\"YYYY\"}}\n                </ng-container>\n                <ng-container *ngSwitchDefault>\n                    {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\n                </ng-container>\n            </ax-button>\n        </div>\n        <div class=\"ax-controll-button\">\n            <ax-button type=\"light blank\" (click)=\"prev()\">\n                {{'common.prev' | trans}}\n            </ax-button>\n        </div>\n    </div>\n    <div class=\"ax-calendar-body\">\n        <ng-container [ngSwitch]=\"view\">\n            <ng-container *ngSwitchCase=\"'day'\">\n                <div class=\"ax-month-items\">\n                    <ng-container *ngFor='let w of weekdays'>\n                        <div class=\"ax-month-item\">{{w}}</div>\n                    </ng-container>\n                </div>\n                <div class=\"ax-day-items\">\n                    <ng-container *ngFor=\"let r of matrix\">\n                        <div class=\"ax-day-item ax-state-event\" *ngFor=\"let d of r;trackBy:trackByFn\" [title]=\"getTitle(d.date)\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today,'next-month':d.nextMonth , 'holiday':d.holiday , 'unselect':d.unselect}\" [ngStyle]=\"(findDay(d.date)) ? getStyle(d.date):''\"\n                            (click)=\"setDayClick($event,d)\">\n                            {{d.date.dayInMonth}}</div>\n                    </ng-container>\n\n                </div>\n            </ng-container>\n            <div class=\"ax-month-container\" *ngSwitchCase=\"'month'\">\n                <ng-container *ngFor=\"let r of matrix\">\n                    <div class=\"ax-month-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setMonthClick($event,d.date)\">\n                        <strong>\n                            {{d.date| dt:\"MMM\"}}\n                        </strong>\n                    </div>\n                </ng-container>\n            </div>\n            <div class=\"ax-year-container\" *ngSwitchCase=\"'year'\">\n                <ng-container class=\"calendar-row\" *ngFor=\"let r of matrix\">\n                    <div class=\"ax-year-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setYearClick($event,d.date)\">\n                        <strong>{{d.date | dt:\"YYYY\"}}</strong>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n\n    </div>\n    <div class=\"ax-calendar-footer\">\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" type=\"dark\">\n            {{getTodayName()}}\n        </ax-button>\n    </div>\n</div>" }]
+            args: [{ selector: 'ax-calendar-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-calendar-container {{size}}\" \n    [ngClass]=\"[type, axClass]\" \n    [attr.id]=\"axId\">\n    \n    <div class=\"ax-calendar-header\">\n        <div class=\"ax-controll-button\">\n            <ax-button type=\"light blank\" (click)=\"next()\">\n                {{'common.next' | trans}}\n            </ax-button>\n        </div>\n        <div class=\"ax-nav-button\" [ngSwitch]=\"view\">\n            <ax-button type=\"light blank\" (click)=\"changeView()\">\n                <ng-container *ngSwitchCase=\"'day'\">\n                    {{viewRange.startTime.add('day', 10) | dt:\"MMM YYYY\"}}\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'month'\">\n                    {{viewRange.startTime | dt:\"YYYY\"}}\n                </ng-container>\n                <ng-container *ngSwitchDefault>\n                    {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\n                </ng-container>\n            </ax-button>\n        </div>\n        <div class=\"ax-controll-button\">\n            <ax-button type=\"light blank\" (click)=\"prev()\">\n                {{'common.prev' | trans}}\n            </ax-button>\n        </div>\n    </div>\n    \n    <div class=\"ax-calendar-body\">\n        <ng-container [ngSwitch]=\"view\">\n            <ng-container *ngSwitchCase=\"'day'\">\n                <div class=\"ax-month-items\">\n                    <ng-container *ngFor=\"let w of weekdays\">\n                        <div class=\"ax-month-item\">{{w}}</div>\n                    </ng-container>\n                </div>\n                <div class=\"ax-day-items\">\n                    <ng-container *ngFor=\"let r of matrix\">\n                        <div class=\"ax-day-item ax-state-event\" *ngFor=\"let d of r; trackBy:trackByFn\" \n                            [title]=\"getTitle(d.date)\" \n                            [ngClass]=\"{'selected': d.selected, 'focused': d.focused, 'today': d.today, 'next-month': d.nextMonth, 'holiday': d.holiday, 'unselect': d.unselect}\" \n                            [ngStyle]=\"(findDay(d.date)) ? getStyle(d.date) : ''\" \n                            (click)=\"setDayClick($event, d)\">\n                            {{d.date.dayInMonth}}\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            \n            <div class=\"ax-month-container\" *ngSwitchCase=\"'month'\">\n                <ng-container *ngFor=\"let r of matrix\">\n                    <div class=\"ax-month-item\" *ngFor=\"let d of r; trackBy:trackByFn\" \n                        [ngClass]=\"{'selected': d.selected, 'focused': d.focused, 'today': d.today}\" \n                        (click)=\"setMonthClick($event, d.date)\">\n                        <strong>{{d.date | dt:\"MMM\"}}</strong>\n                    </div>\n                </ng-container>\n            </div>\n            \n            <div class=\"ax-year-container\" *ngSwitchCase=\"'year'\">\n                <ng-container class=\"calendar-row\" *ngFor=\"let r of matrix\">\n                    <div class=\"ax-year-item\" *ngFor=\"let d of r; trackBy:trackByFn\" \n                        [ngClass]=\"{'selected': d.selected, 'focused': d.focused, 'today': d.today}\" \n                        (click)=\"setYearClick($event, d.date)\">\n                        <strong>{{d.date | dt:\"YYYY\"}}</strong>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n    </div>\n    \n    <div class=\"ax-calendar-footer\">\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" type=\"dark\">\n            {{getTodayName()}}\n        </ax-button>\n    </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { size: [{
                 type: Input
             }], type: [{
@@ -1412,6 +1426,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                 type: Input
             }], dir: [{
                 type: Input
+            }], axId: [{
+                type: Input
+            }], axClass: [{
+                type: Input
             }], min: [{
                 type: Input
             }], max: [{
@@ -1464,6 +1482,8 @@ class AXPopoverComponent {
     closeMode = 'clickout';
     //
     rtl = AXConfig.get('layout.rtl');
+    axId;
+    axClass;
     _visible = false;
     get visible() {
         return this._visible;
@@ -1550,11 +1570,11 @@ class AXPopoverComponent {
         return this.visible;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXPopoverComponent, deps: [{ token: AXOverlayService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXPopoverComponent, selector: "ax-popover", inputs: { target: "target", position: "position", openMode: "openMode", closeMode: "closeMode", rtl: "rtl", visible: "visible" }, outputs: { onOutSideClick: "onOutSideClick" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["tpl"], descendants: true }], ngImport: i0, template: "<ng-template #tpl>\n  <div class=\"ax-popover-container animate__animated animate__fadeIn\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>", styles: [".ax-popover-container .ax-popover-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXPopoverComponent, selector: "ax-popover", inputs: { target: "target", position: "position", openMode: "openMode", closeMode: "closeMode", rtl: "rtl", axId: "axId", axClass: "axClass", visible: "visible" }, outputs: { onOutSideClick: "onOutSideClick" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["tpl"], descendants: true }], ngImport: i0, template: "<ng-template #tpl>\n  <div [attr.id]=\"axId\" [ngClass]=\"['ax-popover-container', 'animate__animated', 'animate__fadeIn', axClass]\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".ax-popover-container .ax-popover-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #tpl>\n  <div class=\"ax-popover-container animate__animated animate__fadeIn\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>", styles: [".ax-popover-container .ax-popover-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}\n"] }]
+            args: [{ selector: 'ax-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #tpl>\n  <div [attr.id]=\"axId\" [ngClass]=\"['ax-popover-container', 'animate__animated', 'animate__fadeIn', axClass]\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".ax-popover-container .ax-popover-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}\n"] }]
         }], ctorParameters: () => [{ type: AXOverlayService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { template: [{
                 type: ViewChild,
                 args: ['tpl']
@@ -1572,6 +1592,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                 args: ['closeMode']
             }], rtl: [{
                 type: Input
+            }], axId: [{
+                type: Input
+            }], axClass: [{
+                type: Input
             }], visible: [{
                 type: Input
             }], onOutSideClick: [{
@@ -1844,6 +1868,8 @@ class AXMenuComponent {
     set items(v) {
         this._items = v;
     }
+    axId;
+    axClass;
     ngOnInit() {
         if (this.rtl == null) {
             this.rtl =
@@ -1874,11 +1900,11 @@ class AXMenuComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: AXMenuComponent, selector: "ax-menu", inputs: { menuTemplate: "menuTemplate", rtl: "rtl", size: "size", selection: "selection", mode: "mode", target: "target", floatAlignment: "floatAlignment", floatPlacemnet: "floatPlacemnet", direction: "direction", items: "items" }, outputs: { onItemClick: "onItemClick" }, queries: [{ propertyName: "_contentMenuTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<!-- <div class=\"ax menu-container {{size}}\" #container>\n  <ul class=\"root\" [class.horizontal]=\"direction=='horizontal'\" [class.vertical]=\"direction=='vertical'\" #root>\n    <ng-template #recursiveList let-list>\n      <ng-container *ngFor=\"let item of list;trackBy:trackByItem\">\n        <li class=\"ax-toolbar-menu-item ax {{item.type || 'ax primary'}} {{item.style || 'ax primary'}}\" [class.disabled]='item.disable'  [class.subIcon]='item.items' [class.startIcon]='item.startIcon' [class.startIcon]='item.icon' [class.endIcon]='item.endIcon' *ngIf=\"item.visible!=false\" (click)=\"handleItemClick($event, item)\"\n          [class.selected]=\"item.selected\" [class.divider]=\"item.divider\" [attr.title]=\"item.tooltip ? item.tooltip : null\"\n          [attr.data-uid]=\"item.uid\"\n          [class.split]=\"item.split\">\n          <div class=\"content-side\">\n            <ng-container *ngIf=\"menuTemplate; else menuBody\">\n              <ng-container *ngTemplateOutlet=\"menuTemplate; context: { $implicit: item }\">\n              </ng-container>\n            </ng-container>\n            <ng-template #menuBody>\n              <span class=\"ax-toolbar-menu-item-text\">\n                <i class=\"{{ item.startIcon }} start-icon ax-menu-item-icon\" *ngIf=\"item.startIcon\"></i>\n                <i class=\"{{ item.icon }} start-icon ax-menu-item-icon\" *ngIf=\"item.icon\"></i>\n                <span *ngIf=\"item.text\">{{ item.text }}</span>\n                <i class=\"{{ item.endIcon }} end-icon ax-menu-item-icon\" *ngIf=\"item.endIcon\"></i>\n              </span>\n            </ng-template>\n          </div>\n          <div class=\"sub-icon-side\" *ngIf=\"item.hasChildren\">\n            <i class=\"far fa-angle-down ax-menu-item-drop-icon\"></i>\n          </div>\n          <ul *ngIf=\"item.hasChildren\" class=\"collapsed sub-menu\">\n            <ng-container *ngTemplateOutlet=\"\n              recursiveList;\n              context: { $implicit: item.items }\n            \"></ng-container>\n          </ul>\n        </li>\n      </ng-container>\n    </ng-template>\n    <ng-container *ngTemplateOutlet=\"recursiveList; context: { $implicit: items }\"></ng-container>\n    <li class=\"more\" #moreLI (click)=\"handleItemClick($event)\">\n      <i class=\"far fa-bars\"></i>\n      <ul #moreUL class=\"collapsed sub-menu\"></ul>\n    </li>\n  </ul>\n</div> -->\n\n<nav>\n  <ul\n    class=\"ax nav-menu\"\n    [class.rtl]=\"rtl\"\n    [class.nav-center]=\"direction == 'horizontal'\"\n    [class.nav-vertical]=\"direction == 'vertical'\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"recursiveMenu; context: { $implicit: items }\"\n    ></ng-container>\n  </ul>\n</nav>\n\n<ng-template #recursiveMenu let-items>\n  <ng-container *ngFor=\"let item of items\">\n    @if (item?.visible != false) {\n    <li\n      class=\"ax {{ item.style }}\"\n      [ngClass]=\"{ disabled: item.disable }\"\n      (click)=\"handleItemClick($event, item)\"\n      axTooltip\n      [placement]=\"item.tooltipPlacement ? item.tooltipPlacement : 'bottom'\"\n      [tooltip]=\"item.tooltip ? item.tooltip : ''\"\n    >\n      <div class=\"ax-menu-item\">\n        <span class=\"menu-item-start-side\">\n          <i class=\"{{ item.startIcon }}\" *ngIf=\"item.startIcon\"></i>\n          <i class=\"{{ item.icon }}\" *ngIf=\"item.icon\"></i>\n          <span class=\"ax-menu-item-text\" *ngIf=\"item.text\">{{\n            item.text\n          }}</span>\n        </span>\n        <span class=\"menu-item-end-side\">\n          <i\n            class=\"far fa-angle-down drop-icon\"\n            *ngIf=\"item.items && item.text\"\n          ></i>\n          <i class=\"{{ item.endIcon }}\" *ngIf=\"item.endIcon\"></i>\n        </span>\n      </div>\n      <ul *ngIf=\"item.items\" class=\"ax-sub-menu {{ placementClass }}\">\n        <ng-container\n          *ngTemplateOutlet=\"recursiveMenu; context: { $implicit: item.items }\"\n        >\n        </ng-container>\n      </ul>\n    </li>\n    }\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["tooltip", "placement", "delay"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: AXMenuComponent, selector: "ax-menu", inputs: { menuTemplate: "menuTemplate", rtl: "rtl", size: "size", selection: "selection", mode: "mode", target: "target", floatAlignment: "floatAlignment", floatPlacemnet: "floatPlacemnet", direction: "direction", items: "items", axId: "axId", axClass: "axClass" }, outputs: { onItemClick: "onItemClick" }, queries: [{ propertyName: "_contentMenuTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<!-- <div class=\"ax menu-container {{size}}\" #container>\n  <ul class=\"root\" [class.horizontal]=\"direction=='horizontal'\" [class.vertical]=\"direction=='vertical'\" #root>\n    <ng-template #recursiveList let-list>\n      <ng-container *ngFor=\"let item of list;trackBy:trackByItem\">\n        <li class=\"ax-toolbar-menu-item ax {{item.type || 'ax primary'}} {{item.style || 'ax primary'}}\" [class.disabled]='item.disable'  [class.subIcon]='item.items' [class.startIcon]='item.startIcon' [class.startIcon]='item.icon' [class.endIcon]='item.endIcon' *ngIf=\"item.visible!=false\" (click)=\"handleItemClick($event, item)\"\n          [class.selected]=\"item.selected\" [class.divider]=\"item.divider\" [attr.title]=\"item.tooltip ? item.tooltip : null\"\n          [attr.data-uid]=\"item.uid\"\n          [class.split]=\"item.split\">\n          <div class=\"content-side\">\n            <ng-container *ngIf=\"menuTemplate; else menuBody\">\n              <ng-container *ngTemplateOutlet=\"menuTemplate; context: { $implicit: item }\">\n              </ng-container>\n            </ng-container>\n            <ng-template #menuBody>\n              <span class=\"ax-toolbar-menu-item-text\">\n                <i class=\"{{ item.startIcon }} start-icon ax-menu-item-icon\" *ngIf=\"item.startIcon\"></i>\n                <i class=\"{{ item.icon }} start-icon ax-menu-item-icon\" *ngIf=\"item.icon\"></i>\n                <span *ngIf=\"item.text\">{{ item.text }}</span>\n                <i class=\"{{ item.endIcon }} end-icon ax-menu-item-icon\" *ngIf=\"item.endIcon\"></i>\n              </span>\n            </ng-template>\n          </div>\n          <div class=\"sub-icon-side\" *ngIf=\"item.hasChildren\">\n            <i class=\"far fa-angle-down ax-menu-item-drop-icon\"></i>\n          </div>\n          <ul *ngIf=\"item.hasChildren\" class=\"collapsed sub-menu\">\n            <ng-container *ngTemplateOutlet=\"\n              recursiveList;\n              context: { $implicit: item.items }\n            \"></ng-container>\n          </ul>\n        </li>\n      </ng-container>\n    </ng-template>\n    <ng-container *ngTemplateOutlet=\"recursiveList; context: { $implicit: items }\"></ng-container>\n    <li class=\"more\" #moreLI (click)=\"handleItemClick($event)\">\n      <i class=\"far fa-bars\"></i>\n      <ul #moreUL class=\"collapsed sub-menu\"></ul>\n    </li>\n  </ul>\n</div> -->\n\n<nav [attr.id]=\"axId\" [ngClass]=\"axClass\">\n  <ul\n    class=\"ax nav-menu\"\n    [class.rtl]=\"rtl\"\n    [class.nav-center]=\"direction == 'horizontal'\"\n    [class.nav-vertical]=\"direction == 'vertical'\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"recursiveMenu; context: { $implicit: items }\"\n    ></ng-container>\n  </ul>\n</nav>\n\n<ng-template #recursiveMenu let-items>\n  <ng-container *ngFor=\"let item of items\">\n    @if (item?.visible != false) {\n    <li\n      class=\"ax {{ item.style }}\"\n      [ngClass]=\"{ disabled: item.disable }\"\n      (click)=\"handleItemClick($event, item)\"\n      axTooltip\n      [placement]=\"item.tooltipPlacement ? item.tooltipPlacement : 'bottom'\"\n      [tooltip]=\"item.tooltip ? item.tooltip : ''\"\n    >\n      <div class=\"ax-menu-item\">\n        <span class=\"menu-item-start-side\">\n          <i class=\"{{ item.startIcon }}\" *ngIf=\"item.startIcon\"></i>\n          <i class=\"{{ item.icon }}\" *ngIf=\"item.icon\"></i>\n          <span class=\"ax-menu-item-text\" *ngIf=\"item.text\">{{\n            item.text\n          }}</span>\n        </span>\n        <span class=\"menu-item-end-side\">\n          <i\n            class=\"far fa-angle-down drop-icon\"\n            *ngIf=\"item.items && item.text\"\n          ></i>\n          <i class=\"{{ item.endIcon }}\" *ngIf=\"item.endIcon\"></i>\n        </span>\n      </div>\n      <ul *ngIf=\"item.items\" class=\"ax-sub-menu {{ placementClass }}\">\n        <ng-container\n          *ngTemplateOutlet=\"recursiveMenu; context: { $implicit: item.items }\"\n        >\n        </ng-container>\n      </ul>\n    </li>\n    }\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["tooltip", "placement", "delay"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-menu', encapsulation: ViewEncapsulation.None, template: "<!-- <div class=\"ax menu-container {{size}}\" #container>\n  <ul class=\"root\" [class.horizontal]=\"direction=='horizontal'\" [class.vertical]=\"direction=='vertical'\" #root>\n    <ng-template #recursiveList let-list>\n      <ng-container *ngFor=\"let item of list;trackBy:trackByItem\">\n        <li class=\"ax-toolbar-menu-item ax {{item.type || 'ax primary'}} {{item.style || 'ax primary'}}\" [class.disabled]='item.disable'  [class.subIcon]='item.items' [class.startIcon]='item.startIcon' [class.startIcon]='item.icon' [class.endIcon]='item.endIcon' *ngIf=\"item.visible!=false\" (click)=\"handleItemClick($event, item)\"\n          [class.selected]=\"item.selected\" [class.divider]=\"item.divider\" [attr.title]=\"item.tooltip ? item.tooltip : null\"\n          [attr.data-uid]=\"item.uid\"\n          [class.split]=\"item.split\">\n          <div class=\"content-side\">\n            <ng-container *ngIf=\"menuTemplate; else menuBody\">\n              <ng-container *ngTemplateOutlet=\"menuTemplate; context: { $implicit: item }\">\n              </ng-container>\n            </ng-container>\n            <ng-template #menuBody>\n              <span class=\"ax-toolbar-menu-item-text\">\n                <i class=\"{{ item.startIcon }} start-icon ax-menu-item-icon\" *ngIf=\"item.startIcon\"></i>\n                <i class=\"{{ item.icon }} start-icon ax-menu-item-icon\" *ngIf=\"item.icon\"></i>\n                <span *ngIf=\"item.text\">{{ item.text }}</span>\n                <i class=\"{{ item.endIcon }} end-icon ax-menu-item-icon\" *ngIf=\"item.endIcon\"></i>\n              </span>\n            </ng-template>\n          </div>\n          <div class=\"sub-icon-side\" *ngIf=\"item.hasChildren\">\n            <i class=\"far fa-angle-down ax-menu-item-drop-icon\"></i>\n          </div>\n          <ul *ngIf=\"item.hasChildren\" class=\"collapsed sub-menu\">\n            <ng-container *ngTemplateOutlet=\"\n              recursiveList;\n              context: { $implicit: item.items }\n            \"></ng-container>\n          </ul>\n        </li>\n      </ng-container>\n    </ng-template>\n    <ng-container *ngTemplateOutlet=\"recursiveList; context: { $implicit: items }\"></ng-container>\n    <li class=\"more\" #moreLI (click)=\"handleItemClick($event)\">\n      <i class=\"far fa-bars\"></i>\n      <ul #moreUL class=\"collapsed sub-menu\"></ul>\n    </li>\n  </ul>\n</div> -->\n\n<nav>\n  <ul\n    class=\"ax nav-menu\"\n    [class.rtl]=\"rtl\"\n    [class.nav-center]=\"direction == 'horizontal'\"\n    [class.nav-vertical]=\"direction == 'vertical'\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"recursiveMenu; context: { $implicit: items }\"\n    ></ng-container>\n  </ul>\n</nav>\n\n<ng-template #recursiveMenu let-items>\n  <ng-container *ngFor=\"let item of items\">\n    @if (item?.visible != false) {\n    <li\n      class=\"ax {{ item.style }}\"\n      [ngClass]=\"{ disabled: item.disable }\"\n      (click)=\"handleItemClick($event, item)\"\n      axTooltip\n      [placement]=\"item.tooltipPlacement ? item.tooltipPlacement : 'bottom'\"\n      [tooltip]=\"item.tooltip ? item.tooltip : ''\"\n    >\n      <div class=\"ax-menu-item\">\n        <span class=\"menu-item-start-side\">\n          <i class=\"{{ item.startIcon }}\" *ngIf=\"item.startIcon\"></i>\n          <i class=\"{{ item.icon }}\" *ngIf=\"item.icon\"></i>\n          <span class=\"ax-menu-item-text\" *ngIf=\"item.text\">{{\n            item.text\n          }}</span>\n        </span>\n        <span class=\"menu-item-end-side\">\n          <i\n            class=\"far fa-angle-down drop-icon\"\n            *ngIf=\"item.items && item.text\"\n          ></i>\n          <i class=\"{{ item.endIcon }}\" *ngIf=\"item.endIcon\"></i>\n        </span>\n      </div>\n      <ul *ngIf=\"item.items\" class=\"ax-sub-menu {{ placementClass }}\">\n        <ng-container\n          *ngTemplateOutlet=\"recursiveMenu; context: { $implicit: item.items }\"\n        >\n        </ng-container>\n      </ul>\n    </li>\n    }\n  </ng-container>\n</ng-template>\n" }]
+            args: [{ selector: 'ax-menu', encapsulation: ViewEncapsulation.None, template: "<!-- <div class=\"ax menu-container {{size}}\" #container>\n  <ul class=\"root\" [class.horizontal]=\"direction=='horizontal'\" [class.vertical]=\"direction=='vertical'\" #root>\n    <ng-template #recursiveList let-list>\n      <ng-container *ngFor=\"let item of list;trackBy:trackByItem\">\n        <li class=\"ax-toolbar-menu-item ax {{item.type || 'ax primary'}} {{item.style || 'ax primary'}}\" [class.disabled]='item.disable'  [class.subIcon]='item.items' [class.startIcon]='item.startIcon' [class.startIcon]='item.icon' [class.endIcon]='item.endIcon' *ngIf=\"item.visible!=false\" (click)=\"handleItemClick($event, item)\"\n          [class.selected]=\"item.selected\" [class.divider]=\"item.divider\" [attr.title]=\"item.tooltip ? item.tooltip : null\"\n          [attr.data-uid]=\"item.uid\"\n          [class.split]=\"item.split\">\n          <div class=\"content-side\">\n            <ng-container *ngIf=\"menuTemplate; else menuBody\">\n              <ng-container *ngTemplateOutlet=\"menuTemplate; context: { $implicit: item }\">\n              </ng-container>\n            </ng-container>\n            <ng-template #menuBody>\n              <span class=\"ax-toolbar-menu-item-text\">\n                <i class=\"{{ item.startIcon }} start-icon ax-menu-item-icon\" *ngIf=\"item.startIcon\"></i>\n                <i class=\"{{ item.icon }} start-icon ax-menu-item-icon\" *ngIf=\"item.icon\"></i>\n                <span *ngIf=\"item.text\">{{ item.text }}</span>\n                <i class=\"{{ item.endIcon }} end-icon ax-menu-item-icon\" *ngIf=\"item.endIcon\"></i>\n              </span>\n            </ng-template>\n          </div>\n          <div class=\"sub-icon-side\" *ngIf=\"item.hasChildren\">\n            <i class=\"far fa-angle-down ax-menu-item-drop-icon\"></i>\n          </div>\n          <ul *ngIf=\"item.hasChildren\" class=\"collapsed sub-menu\">\n            <ng-container *ngTemplateOutlet=\"\n              recursiveList;\n              context: { $implicit: item.items }\n            \"></ng-container>\n          </ul>\n        </li>\n      </ng-container>\n    </ng-template>\n    <ng-container *ngTemplateOutlet=\"recursiveList; context: { $implicit: items }\"></ng-container>\n    <li class=\"more\" #moreLI (click)=\"handleItemClick($event)\">\n      <i class=\"far fa-bars\"></i>\n      <ul #moreUL class=\"collapsed sub-menu\"></ul>\n    </li>\n  </ul>\n</div> -->\n\n<nav [attr.id]=\"axId\" [ngClass]=\"axClass\">\n  <ul\n    class=\"ax nav-menu\"\n    [class.rtl]=\"rtl\"\n    [class.nav-center]=\"direction == 'horizontal'\"\n    [class.nav-vertical]=\"direction == 'vertical'\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"recursiveMenu; context: { $implicit: items }\"\n    ></ng-container>\n  </ul>\n</nav>\n\n<ng-template #recursiveMenu let-items>\n  <ng-container *ngFor=\"let item of items\">\n    @if (item?.visible != false) {\n    <li\n      class=\"ax {{ item.style }}\"\n      [ngClass]=\"{ disabled: item.disable }\"\n      (click)=\"handleItemClick($event, item)\"\n      axTooltip\n      [placement]=\"item.tooltipPlacement ? item.tooltipPlacement : 'bottom'\"\n      [tooltip]=\"item.tooltip ? item.tooltip : ''\"\n    >\n      <div class=\"ax-menu-item\">\n        <span class=\"menu-item-start-side\">\n          <i class=\"{{ item.startIcon }}\" *ngIf=\"item.startIcon\"></i>\n          <i class=\"{{ item.icon }}\" *ngIf=\"item.icon\"></i>\n          <span class=\"ax-menu-item-text\" *ngIf=\"item.text\">{{\n            item.text\n          }}</span>\n        </span>\n        <span class=\"menu-item-end-side\">\n          <i\n            class=\"far fa-angle-down drop-icon\"\n            *ngIf=\"item.items && item.text\"\n          ></i>\n          <i class=\"{{ item.endIcon }}\" *ngIf=\"item.endIcon\"></i>\n        </span>\n      </div>\n      <ul *ngIf=\"item.items\" class=\"ax-sub-menu {{ placementClass }}\">\n        <ng-container\n          *ngTemplateOutlet=\"recursiveMenu; context: { $implicit: item.items }\"\n        >\n        </ng-container>\n      </ul>\n    </li>\n    }\n  </ng-container>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { _contentMenuTemplate: [{
                 type: ContentChild,
                 args: [TemplateRef, { static: true }]
@@ -1904,6 +1930,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                 type: Input
             }], items: [{
                 type: Input
+            }], axId: [{
+                type: Input
+            }], axClass: [{
+                type: Input
             }] } });
 
 class AXToolbarMenuComponent extends AXToolbarItem {
@@ -1932,6 +1962,8 @@ class AXToolbarMenuComponent extends AXToolbarItem {
         this._items = v;
         this.update();
     }
+    axId;
+    axClass;
     handleItemClick(item) {
         this.onItemClick.emit(item);
     }
@@ -1943,11 +1975,11 @@ class AXToolbarMenuComponent extends AXToolbarItem {
         this.cdr.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXToolbarMenuComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: { menuTemplate: "menuTemplate", floatPlacemnet: "floatPlacemnet", selection: "selection", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarMenuComponent }], queries: [{ propertyName: "_contentMenuTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-toolbar-menu-container\">\n  <ax-menu\n    #menu\n    [items]=\"items\"\n    [selection]=\"selection\"\n    (onItemClick)=\"handleItemClick($event)\"\n    [menuTemplate]=\"menuTemplate\"\n    [floatPlacemnet]=\"floatPlacemnet\"\n  >\n  </ax-menu>\n</div>\n", dependencies: [{ kind: "component", type: AXMenuComponent, selector: "ax-menu", inputs: ["menuTemplate", "rtl", "size", "selection", "mode", "target", "floatAlignment", "floatPlacemnet", "direction", "items"], outputs: ["onItemClick"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: { menuTemplate: "menuTemplate", floatPlacemnet: "floatPlacemnet", selection: "selection", items: "items", axId: "axId", axClass: "axClass" }, outputs: { onItemClick: "onItemClick" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarMenuComponent }], queries: [{ propertyName: "_contentMenuTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div \n  class=\"ax-toolbar-menu-container {{axClass}}\" \n  [attr.id]=\"axId\"\n>\n  <ax-menu\n    #menu\n    [items]=\"items\"\n    [selection]=\"selection\"\n    (onItemClick)=\"handleItemClick($event)\"\n    [menuTemplate]=\"menuTemplate\"\n    [floatPlacemnet]=\"floatPlacemnet\"\n    [attr.id]=\"axId ? axId + '-menu' : null\"\n    [attr.class]=\"axClass\"\n  >\n  </ax-menu>\n</div>\n", dependencies: [{ kind: "component", type: AXMenuComponent, selector: "ax-menu", inputs: ["menuTemplate", "rtl", "size", "selection", "mode", "target", "floatAlignment", "floatPlacemnet", "direction", "items", "axId", "axClass"], outputs: ["onItemClick"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXToolbarMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-toolbar-menu', providers: [{ provide: AXToolbarItem, useExisting: AXToolbarMenuComponent }], encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-toolbar-menu-container\">\n  <ax-menu\n    #menu\n    [items]=\"items\"\n    [selection]=\"selection\"\n    (onItemClick)=\"handleItemClick($event)\"\n    [menuTemplate]=\"menuTemplate\"\n    [floatPlacemnet]=\"floatPlacemnet\"\n  >\n  </ax-menu>\n</div>\n" }]
+            args: [{ selector: 'ax-toolbar-menu', providers: [{ provide: AXToolbarItem, useExisting: AXToolbarMenuComponent }], encapsulation: ViewEncapsulation.None, template: "<div \n  class=\"ax-toolbar-menu-container {{axClass}}\" \n  [attr.id]=\"axId\"\n>\n  <ax-menu\n    #menu\n    [items]=\"items\"\n    [selection]=\"selection\"\n    (onItemClick)=\"handleItemClick($event)\"\n    [menuTemplate]=\"menuTemplate\"\n    [floatPlacemnet]=\"floatPlacemnet\"\n    [attr.id]=\"axId ? axId + '-menu' : null\"\n    [attr.class]=\"axClass\"\n  >\n  </ax-menu>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { menu: [{
                 type: ViewChild,
                 args: ['menu', { static: true }]
@@ -1964,6 +1996,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                 type: Input
             }], items: [{
                 type: Input
+            }], axId: [{
+                type: Input
+            }], axClass: [{
+                type: Input
             }] } });
 
 class AXToolbarSchedulerViewsComponent {
@@ -1980,7 +2016,7 @@ class AXToolbarSchedulerViewsComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXToolbarSchedulerViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXToolbarSchedulerViewsComponent, selector: "ax-toolbar-scheduler-view", outputs: { onViewChanged: "onViewChanged" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarSchedulerViewsComponent }], viewQueries: [{ propertyName: "menu", first: true, predicate: AXToolbarMenuComponent, descendants: true, static: true }], ngImport: i0, template: `
         <ax-toolbar-menu [items]="items" selection="single" (onItemClick)="onItemClick($event)"></ax-toolbar-menu>
-    `, isInline: true, dependencies: [{ kind: "component", type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "floatPlacemnet", "selection", "items"], outputs: ["onItemClick"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "floatPlacemnet", "selection", "items", "axId", "axClass"], outputs: ["onItemClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXToolbarSchedulerViewsComponent, decorators: [{
             type: Component,
@@ -2490,7 +2526,7 @@ class AXToolbarSchedulerNavigatorComponent {
     <ax-popover target="#nav" placement="bottom-end" alignment="top-end" #pop>
         <ax-calendar-box (onValueChanged)="onDateChange($event)" [depth]="viewDepth" #cal></ax-calendar-box>
     </ax-popover>
-</div>`, isInline: true, dependencies: [{ kind: "component", type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: ["size", "type", "locale", "dir", "min", "max", "selectableHoliday", "dayStyle", "dayMinMaxResoan", "showTodayButton", "view", "depth", "value"], outputs: ["onValueChanged", "onClick", "valueChange"] }, { kind: "component", type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "floatPlacemnet", "selection", "items"], outputs: ["onItemClick"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "rtl", "visible"], outputs: ["onOutSideClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+</div>`, isInline: true, dependencies: [{ kind: "component", type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: ["size", "type", "locale", "dir", "axId", "axClass", "min", "max", "selectableHoliday", "dayStyle", "dayMinMaxResoan", "showTodayButton", "view", "depth", "value"], outputs: ["onValueChanged", "onClick", "valueChange"] }, { kind: "component", type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "floatPlacemnet", "selection", "items", "axId", "axClass"], outputs: ["onItemClick"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "rtl", "axId", "axClass", "visible"], outputs: ["onOutSideClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXToolbarSchedulerNavigatorComponent, decorators: [{
             type: Component,
@@ -2660,6 +2696,8 @@ class AXToolbarSearchComponent {
             });
         }
     }
+    axId;
+    axClass;
     focus() {
         this.inputSearch.nativeElement.focus();
     }
@@ -2677,11 +2715,11 @@ class AXToolbarSearchComponent {
         this.searchChangeObserver.next(text);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXToolbarSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXToolbarSearchComponent, selector: "ax-toolbar-search", inputs: { text: "text" }, outputs: { onValueChanged: "onValueChanged" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarSearchComponent }], viewQueries: [{ propertyName: "inputSearch", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"search-bar\">\n  <input #input type=\"text\" placeholder=\"\u062C\u0633\u062A\u062C\u0648 ...\" (input)=\"onSearchChanged($event.target.value)\" />\n  <i class=\"far fa-search text-secondary\"></i>\n</div>", styles: [".search-bar{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--ax-border-color);border-radius:var(--ax-size-border-radius);padding:.3em .6em;background:var(--ax-white-color)}.search-bar input{border:none!important;background-color:transparent;outline-color:transparent!important;flex:1;font-family:inherit;font-size:inherit}.search-bar input::placeholder{color:var(--ax-gray-color)}.search-bar i{color:var(--ax-gray-color)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXToolbarSearchComponent, selector: "ax-toolbar-search", inputs: { text: "text", axId: "axId", axClass: "axClass" }, outputs: { onValueChanged: "onValueChanged" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarSearchComponent }], viewQueries: [{ propertyName: "inputSearch", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<div \n  class=\"search-bar {{axClass}}\" \n  [attr.id]=\"axId\"\n>\n  <input \n    #input \n    type=\"text\" \n    placeholder=\"\u062C\u0633\u062A\u062C\u0648 ...\" \n    (input)=\"onSearchChanged($event.target.value)\" \n    [attr.id]=\"axId ? axId + '-input' : null\"\n    [attr.class]=\"axClass ? axClass + '-input' : null\"\n  />\n  <i \n    class=\"far fa-search text-secondary\"\n    [attr.id]=\"axId ? axId + '-icon' : null\"\n    [attr.class]=\"axClass ? axClass + '-icon' : null\"\n  ></i>\n</div>\n", styles: [".search-bar{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--ax-border-color);border-radius:var(--ax-size-border-radius);padding:.3em .6em;background:var(--ax-white-color)}.search-bar input{border:none!important;background-color:transparent;outline-color:transparent!important;flex:1;font-family:inherit;font-size:inherit}.search-bar input::placeholder{color:var(--ax-gray-color)}.search-bar i{color:var(--ax-gray-color)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXToolbarSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-toolbar-search', providers: [{ provide: AXToolbarItem, useExisting: AXToolbarSearchComponent }], template: "<div class=\"search-bar\">\n  <input #input type=\"text\" placeholder=\"\u062C\u0633\u062A\u062C\u0648 ...\" (input)=\"onSearchChanged($event.target.value)\" />\n  <i class=\"far fa-search text-secondary\"></i>\n</div>", styles: [".search-bar{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--ax-border-color);border-radius:var(--ax-size-border-radius);padding:.3em .6em;background:var(--ax-white-color)}.search-bar input{border:none!important;background-color:transparent;outline-color:transparent!important;flex:1;font-family:inherit;font-size:inherit}.search-bar input::placeholder{color:var(--ax-gray-color)}.search-bar i{color:var(--ax-gray-color)}\n"] }]
+            args: [{ selector: 'ax-toolbar-search', providers: [{ provide: AXToolbarItem, useExisting: AXToolbarSearchComponent }], template: "<div \n  class=\"search-bar {{axClass}}\" \n  [attr.id]=\"axId\"\n>\n  <input \n    #input \n    type=\"text\" \n    placeholder=\"\u062C\u0633\u062A\u062C\u0648 ...\" \n    (input)=\"onSearchChanged($event.target.value)\" \n    [attr.id]=\"axId ? axId + '-input' : null\"\n    [attr.class]=\"axClass ? axClass + '-input' : null\"\n  />\n  <i \n    class=\"far fa-search text-secondary\"\n    [attr.id]=\"axId ? axId + '-icon' : null\"\n    [attr.class]=\"axClass ? axClass + '-icon' : null\"\n  ></i>\n</div>\n", styles: [".search-bar{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--ax-border-color);border-radius:var(--ax-size-border-radius);padding:.3em .6em;background:var(--ax-white-color)}.search-bar input{border:none!important;background-color:transparent;outline-color:transparent!important;flex:1;font-family:inherit;font-size:inherit}.search-bar input::placeholder{color:var(--ax-gray-color)}.search-bar i{color:var(--ax-gray-color)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputSearch: [{
                 type: ViewChild,
                 args: ['input', { static: true }]
@@ -2689,6 +2727,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                 type: Output
             }], text: [{
                 type: Input
+            }], axId: [{
+                type: Input
+            }], axClass: [{
+                type: Input
             }] } });
 
 class AXDataSourceReceivedResult {
@@ -2956,16 +2998,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
 class AXToolbarComponent {
     constructor() { }
     ngOnInit() { }
+    axId;
+    axClass;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXToolbarComponent, selector: "ax-toolbar", ngImport: i0, template: "<div class=\"ax-toolbar\">\n    <ng-content>\n    </ng-content>\n</div>", styles: ["ax-toolbar{width:100%}ax-toolbar .ax-toolbar{display:flex;width:100%;justify-content:space-between;align-items:center}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXToolbarComponent, selector: "ax-toolbar", inputs: { axId: "axId", axClass: "axClass" }, ngImport: i0, template: "<div \n  class=\"ax-toolbar {{axClass}}\" \n  [attr.id]=\"axId\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: ["ax-toolbar{width:100%}ax-toolbar .ax-toolbar{display:flex;width:100%;justify-content:space-between;align-items:center}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-toolbar', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-toolbar\">\n    <ng-content>\n    </ng-content>\n</div>", styles: ["ax-toolbar{width:100%}ax-toolbar .ax-toolbar{display:flex;width:100%;justify-content:space-between;align-items:center}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'ax-toolbar', encapsulation: ViewEncapsulation.None, template: "<div \n  class=\"ax-toolbar {{axClass}}\" \n  [attr.id]=\"axId\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: ["ax-toolbar{width:100%}ax-toolbar .ax-toolbar{display:flex;width:100%;justify-content:space-between;align-items:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { axId: [{
+                type: Input
+            }], axClass: [{
+                type: Input
+            }] } });
 
 class AXToolbarTitleComponent {
-    constructor() { }
+    axId;
+    axClass;
     _text;
     get text() {
         return this._text;
@@ -2976,34 +3025,50 @@ class AXToolbarTitleComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXToolbarTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXToolbarTitleComponent, selector: "ax-toolbar-title", inputs: { text: "text" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarTitleComponent }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXToolbarTitleComponent, selector: "ax-toolbar-title", inputs: { axId: "axId", axClass: "axClass", text: "text" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarTitleComponent }], ngImport: i0, template: `
         <ng-container *ngIf="text; else elseTemplate">
-        <div class="title">{{text}}</div>
+            <div 
+                class="title {{axClass}}" 
+                [attr.id]="axId">
+                {{text}}
+            </div>
         </ng-container>
         <ng-template #elseTemplate>
             <ng-content></ng-content>
-        </ng-template>`, isInline: true, styles: [".title{height:100%;display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        </ng-template>
+    `, isInline: true, styles: [".title{height:100%;display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXToolbarTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-toolbar-title', template: `
         <ng-container *ngIf="text; else elseTemplate">
-        <div class="title">{{text}}</div>
+            <div 
+                class="title {{axClass}}" 
+                [attr.id]="axId">
+                {{text}}
+            </div>
         </ng-container>
         <ng-template #elseTemplate>
             <ng-content></ng-content>
-        </ng-template>`, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarTitleComponent }], styles: [".title{height:100%;display:flex;align-items:center}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { text: [{
+        </ng-template>
+    `, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarTitleComponent }], styles: [".title{height:100%;display:flex;align-items:center}\n"] }]
+        }], propDecorators: { axId: [{
+                type: Input
+            }], axClass: [{
+                type: Input
+            }], text: [{
                 type: Input
             }] } });
 
 class AXToolbarButtonGroupComponent {
-    constructor() { }
+    axId;
+    axClass;
     items = [];
     itemClick = new EventEmitter();
-    mode = "single";
+    mode = 'single';
+    constructor() { }
     onClick(item) {
-        if (this.mode == "single") {
+        if (this.mode === 'single') {
             this.items.forEach(c => {
                 c.selected = false;
             });
@@ -3011,20 +3076,19 @@ class AXToolbarButtonGroupComponent {
             this.itemClick.emit(item);
         }
         else {
-            if (item.selected) {
-                item.selected = false;
-            }
-            else {
-                item.selected = true;
-                this.itemClick.emit(item);
-            }
+            item.selected = !item.selected;
+            this.itemClick.emit(item);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXToolbarButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXToolbarButtonGroupComponent, selector: "ax-toolbar-group-button", inputs: { items: "items", mode: "mode" }, outputs: { itemClick: "itemClick" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXToolbarButtonGroupComponent, selector: "ax-toolbar-group-button", inputs: { axId: "axId", axClass: "axClass", items: "items", mode: "mode" }, outputs: { itemClick: "itemClick" }, providers: [
             { provide: AXToolbarItem, useExisting: AXToolbarButtonGroupComponent }
         ], ngImport: i0, template: `
-    <div class="btn-group" role="group">
+    <div 
+      class="btn-group {{axClass}}" 
+      role="group" 
+      [attr.id]="axId"
+    >
       <button
         type="button"
         *ngFor="let item of items"
@@ -3042,9 +3106,13 @@ class AXToolbarButtonGroupComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXToolbarButtonGroupComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "ax-toolbar-group-button",
+                    selector: 'ax-toolbar-group-button',
                     template: `
-    <div class="btn-group" role="group">
+    <div 
+      class="btn-group {{axClass}}" 
+      role="group" 
+      [attr.id]="axId"
+    >
       <button
         type="button"
         *ngFor="let item of items"
@@ -3062,7 +3130,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                         { provide: AXToolbarItem, useExisting: AXToolbarButtonGroupComponent }
                     ]
                 }]
-        }], ctorParameters: () => [], propDecorators: { items: [{
+        }], ctorParameters: () => [], propDecorators: { axId: [{
+                type: Input
+            }], axClass: [{
+                type: Input
+            }], items: [{
                 type: Input
             }], itemClick: [{
                 type: Output
@@ -3393,13 +3465,13 @@ class AXCheckBoxComponent extends AXValidatableComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", 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.7", 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], 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\" [ngClass]=\"[{'disabled': disabled, 'readonly': readonly}, axClass]\"\n  [attr.for]=\"uid\" [attr.id]=\"axId\">\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  <span>{{ label ? label : '&nbsp;' }}</span>\n</label>", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXCheckBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-check-box', encapsulation: ViewEncapsulation.None, providers: [
                         { provide: AXValidatableComponent, useExisting: AXCheckBoxComponent },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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>" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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\" [ngClass]=\"[{'disabled': disabled, 'readonly': readonly}, axClass]\"\n  [attr.for]=\"uid\" [attr.id]=\"axId\">\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  <span>{{ label ? label : '&nbsp;' }}</span>\n</label>" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input', { static: true }]
@@ -3450,6 +3522,8 @@ class AXContextMenuComponent {
     onItemClick = new EventEmitter();
     onClosed = new EventEmitter();
     contex;
+    axId;
+    axClass;
     show = false;
     constructor(container) {
         this.container = container;
@@ -3487,11 +3561,11 @@ class AXContextMenuComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXContextMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: { size: "size", width: "width", items: "items", axId: "axId", axClass: "axClass" }, 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, axClass}\" [attr.id]=\"axId\">\n\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 }\"></ng-container>\n        </ul>\n    </li>\n</ng-template>", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", 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>" }]
+            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, axClass}\" [attr.id]=\"axId\">\n\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 }\"></ng-container>\n        </ul>\n    </li>\n</ng-template>" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { size: [{
                 type: Input
             }], width: [{
@@ -3505,6 +3579,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
             }], contex: [{
                 type: ViewChild,
                 args: ['contex']
+            }], axId: [{
+                type: Input
+            }], axClass: [{
+                type: Input
             }] } });
 
 class AXContextMenuItemClickEvent extends AXBaseEvent {
@@ -3788,11 +3866,11 @@ class AXSelectionListComponent extends AXValidatableComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSelectionListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXSelectionListComponent, selector: "ax-selection-list", inputs: { readonly: "readonly", value: "value", disabled: "disabled", size: "size", direction: "direction", items: "items", mode: "mode", textField: "textField", valueField: "valueField", selectedItems: "selectedItems", selectedValues: "selectedValues" }, outputs: { selectionChanged: "selectionChanged", selectedItemsChange: "selectedItemsChange", selectedValuesChange: "selectedValuesChange" }, usesInheritance: true, ngImport: i0, template: "<ng-container\n  *ngIf=\"mode == 'multiple'; then checkboxList; else radioButtonList\"\n></ng-container>\n<ng-template #checkboxList>\n  <div\n    class=\"ax selection-list {{ size }}\"\n    style=\"flex-wrap: wrap; gap: 4px\"\n    [ngClass]=\"direction\"\n  >\n    <ax-check-box\n      label=\"{{ item[textField] }}\"\n      *ngFor=\"let item of items\"\n      [disabled]=\"item.disable || disabled\"\n      [readonly]=\"item.readonly || readonly\"\n      [value]=\"selectedValues.indexOf(item[valueField]) > -1\"\n      (onValueChanged)=\"onCheckValueChange(item, $event.value)\"\n      (onClick)=\"checkBoxClick($event, item)\"\n    >\n    </ax-check-box>\n  </div>\n</ng-template>\n<ng-template #radioButtonList>\n  <div\n    style=\"flex-wrap: wrap; gap: 4px\"\n    class=\"ax selection-list {{ size }}\"\n    [ngClass]=\"direction\"\n  >\n    <label\n      class=\"ax radio\"\n      for=\"{{ uid }}\"\n      [class.disabled]=\"disabled\"\n      [class.readonly]=\"readonly\"\n      *ngFor=\"let item of items\"\n      (click)=\"onvalueChanged(item)\"\n    >\n      {{ item[textField] }}\n      <input\n        type=\"radio\"\n        (change)=\"onCheckValueChange(item[valueField], true)\"\n        [value]=\"item[valueField]\"\n        [checked]=\"selectedValues == item[valueField]\"\n        [name]=\"uid\"\n        [disabled]=\"item.disable || disabled\"\n        [readonly]=\"item.readonly || readonly\"\n      />\n      <span class=\"checkmark\"></span>\n    </label>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXSelectionListComponent, selector: "ax-selection-list", inputs: { readonly: "readonly", value: "value", disabled: "disabled", size: "size", direction: "direction", items: "items", mode: "mode", textField: "textField", valueField: "valueField", selectedItems: "selectedItems", selectedValues: "selectedValues" }, outputs: { selectionChanged: "selectionChanged", selectedItemsChange: "selectedItemsChange", selectedValuesChange: "selectedValuesChange" }, usesInheritance: true, ngImport: i0, template: "<ng-container\n  *ngIf=\"mode == 'multiple'; then checkboxList; else radioButtonList\"\n></ng-container>\n\n<ng-template #checkboxList>\n  <div\n    class=\"ax selection-list {{ size }}\"\n    style=\"flex-wrap: wrap; gap: 4px\"\n    [ngClass]=\"direction\"\n    [attr.id]=\"axId\"\n    [ngClass]=\"axClass\"\n  >\n    <ax-check-box\n      label=\"{{ item[textField] }}\"\n      *ngFor=\"let item of items\"\n      [disabled]=\"item.disable || disabled\"\n      [readonly]=\"item.readonly || readonly\"\n      [value]=\"selectedValues.indexOf(item[valueField]) > -1\"\n      (onValueChanged)=\"onCheckValueChange(item, $event.value)\"\n      (onClick)=\"checkBoxClick($event, item)\"\n      [attr.id]=\"axId + '-checkbox-' + item[valueField]\"\n    >\n    </ax-check-box>\n  </div>\n</ng-template>\n\n<ng-template #radioButtonList>\n  <div\n    style=\"flex-wrap: wrap; gap: 4px\"\n    class=\"ax selection-list {{ size }}\"\n    [ngClass]=\"direction\"\n    [attr.id]=\"axId\"\n    [ngClass]=\"axClass\"\n  >\n    <label\n      class=\"ax radio\"\n      for=\"{{ uid }}\"\n      [class.disabled]=\"disabled\"\n      [class.readonly]=\"readonly\"\n      *ngFor=\"let item of items\"\n      (click)=\"onvalueChanged(item)\"\n      [attr.id]=\"axId + '-label-' + item[valueField]\"\n    >\n      {{ item[textField] }}\n      <input\n        type=\"radio\"\n        (change)=\"onCheckValueChange(item[valueField], true)\"\n        [value]=\"item[valueField]\"\n        [checked]=\"selectedValues == item[valueField]\"\u062F\n        [name]=\"uid\"\n        [disabled]=\"item.disable || disabled\"\n        [readonly]=\"item.readonly || readonly\"\n        [attr.id]=\"axId + '-radio-' + item[valueField]\"\n      />\n      <span class=\"checkmark\"></span>\n    </label>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSelectionListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-selection-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n  *ngIf=\"mode == 'multiple'; then checkboxList; else radioButtonList\"\n></ng-container>\n<ng-template #checkboxList>\n  <div\n    class=\"ax selection-list {{ size }}\"\n    style=\"flex-wrap: wrap; gap: 4px\"\n    [ngClass]=\"direction\"\n  >\n    <ax-check-box\n      label=\"{{ item[textField] }}\"\n      *ngFor=\"let item of items\"\n      [disabled]=\"item.disable || disabled\"\n      [readonly]=\"item.readonly || readonly\"\n      [value]=\"selectedValues.indexOf(item[valueField]) > -1\"\n      (onValueChanged)=\"onCheckValueChange(item, $event.value)\"\n      (onClick)=\"checkBoxClick($event, item)\"\n    >\n    </ax-check-box>\n  </div>\n</ng-template>\n<ng-template #radioButtonList>\n  <div\n    style=\"flex-wrap: wrap; gap: 4px\"\n    class=\"ax selection-list {{ size }}\"\n    [ngClass]=\"direction\"\n  >\n    <label\n      class=\"ax radio\"\n      for=\"{{ uid }}\"\n      [class.disabled]=\"disabled\"\n      [class.readonly]=\"readonly\"\n      *ngFor=\"let item of items\"\n      (click)=\"onvalueChanged(item)\"\n    >\n      {{ item[textField] }}\n      <input\n        type=\"radio\"\n        (change)=\"onCheckValueChange(item[valueField], true)\"\n        [value]=\"item[valueField]\"\n        [checked]=\"selectedValues == item[valueField]\"\n        [name]=\"uid\"\n        [disabled]=\"item.disable || disabled\"\n        [readonly]=\"item.readonly || readonly\"\n      />\n      <span class=\"checkmark\"></span>\n    </label>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'ax-selection-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n  *ngIf=\"mode == 'multiple'; then checkboxList; else radioButtonList\"\n></ng-container>\n\n<ng-template #checkboxList>\n  <div\n    class=\"ax selection-list {{ size }}\"\n    style=\"flex-wrap: wrap; gap: 4px\"\n    [ngClass]=\"direction\"\n    [attr.id]=\"axId\"\n    [ngClass]=\"axClass\"\n  >\n    <ax-check-box\n      label=\"{{ item[textField] }}\"\n      *ngFor=\"let item of items\"\n      [disabled]=\"item.disable || disabled\"\n      [readonly]=\"item.readonly || readonly\"\n      [value]=\"selectedValues.indexOf(item[valueField]) > -1\"\n      (onValueChanged)=\"onCheckValueChange(item, $event.value)\"\n      (onClick)=\"checkBoxClick($event, item)\"\n      [attr.id]=\"axId + '-checkbox-' + item[valueField]\"\n    >\n    </ax-check-box>\n  </div>\n</ng-template>\n\n<ng-template #radioButtonList>\n  <div\n    style=\"flex-wrap: wrap; gap: 4px\"\n    class=\"ax selection-list {{ size }}\"\n    [ngClass]=\"direction\"\n    [attr.id]=\"axId\"\n    [ngClass]=\"axClass\"\n  >\n    <label\n      class=\"ax radio\"\n      for=\"{{ uid }}\"\n      [class.disabled]=\"disabled\"\n      [class.readonly]=\"readonly\"\n      *ngFor=\"let item of items\"\n      (click)=\"onvalueChanged(item)\"\n      [attr.id]=\"axId + '-label-' + item[valueField]\"\n    >\n      {{ item[textField] }}\n      <input\n        type=\"radio\"\n        (change)=\"onCheckValueChange(item[valueField], true)\"\n        [value]=\"item[valueField]\"\n        [checked]=\"selectedValues == item[valueField]\"\u062F\n        [name]=\"uid\"\n        [disabled]=\"item.disable || disabled\"\n        [readonly]=\"item.readonly || readonly\"\n        [attr.id]=\"axId + '-radio-' + item[valueField]\"\n      />\n      <span class=\"checkmark\"></span>\n    </label>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { readonly: [{
                 type: Input
             }], value: [{
@@ -3966,11 +4044,11 @@ class AXDropdownComponent extends AXBaseDropdownComponent {
     }
     focus() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXDropdownComponent, selector: "ax-drop-down", inputs: { rtl: "rtl", readonly: "readonly", loading: "loading", dropdownWidth: "dropdownWidth" }, outputs: { dropdownToggle: "dropdownToggle", onButtonClick: "onButtonClick" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, styleAttribute: "display:contents;" }, viewQueries: [{ propertyName: "baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "endButtons", first: true, predicate: ["endButtons"], descendants: true }, { propertyName: "dropdownEL", first: true, predicate: ["el"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item {{size}}\" [class.readonly]=\"readonly\" [attr.id]=\"uid\" [class.disabled]=\"disabled\" #el>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n    </div>\n    <div class=\"content\">\n        <ng-content select=\"ng-container[header]\">\n        </ng-content>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"showDropDownButton\" [disabled]=\"disabled || readonly\" [loading]=\"loading\"\n            icon=\"far fa-angle-down icon\" type=\"light blank\" [size]=\"size\" (click)=\"handleArrowClick($event)\"\n            [tabIndex]=\"-1\">\n        </ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>\n\n<ng-template #baseTemplate>\n    <!-- [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth + 'px' : 'unset'}\" -->\n    <div class=\"ax-dropdown-container-bordered\" [ngStyle]=\"{'width': dropdownWidth !== '0px' ? dropdownWidth : 'unset'}\">\n        <ng-content select=\"ng-container[panel]\">\n        </ng-content>\n    </div>\n</ng-template>", styles: [".ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-size-border-radius);box-shadow:0 0 3px #0003;margin:.2rem 0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXDropdownComponent, selector: "ax-drop-down", inputs: { rtl: "rtl", readonly: "readonly", loading: "loading", dropdownWidth: "dropdownWidth" }, outputs: { dropdownToggle: "dropdownToggle", onButtonClick: "onButtonClick" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, styleAttribute: "display:contents;" }, viewQueries: [{ propertyName: "baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "endButtons", first: true, predicate: ["endButtons"], descendants: true }, { propertyName: "dropdownEL", first: true, predicate: ["el"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item {{size}}\" [class.readonly]=\"readonly\" [attr.id]=\"axId || uid\" [class.disabled]=\"disabled\" [ngClass]=\"axClass\" #el>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\"></ng-content>\n    </div>\n    <div class=\"content\">\n        <ng-content select=\"ng-container[header]\"></ng-content>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"showDropDownButton\" \n                   [disabled]=\"disabled || readonly\" \n                   [loading]=\"loading\"\n                   icon=\"far fa-angle-down icon\" \n                   type=\"light blank\" \n                   [size]=\"size\" \n                   (click)=\"handleArrowClick($event)\"\n                   [tabIndex]=\"-1\">\n        </ax-button>\n        <ng-content select=\"[end]\"></ng-content>\n    </div>\n</div>\n\n<ng-template #baseTemplate>\n    <div class=\"ax-dropdown-container-bordered\" [ngStyle]=\"{'width': dropdownWidth !== '0px' ? dropdownWidth : 'unset'}\">\n        <ng-content select=\"ng-container[panel]\"></ng-content>\n    </div>\n</ng-template>\n", styles: [".ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-size-border-radius);box-shadow:0 0 3px #0003;margin:.2rem 0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-drop-down', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'display:contents;' }, template: "<div class=\"ax form-item {{size}}\" [class.readonly]=\"readonly\" [attr.id]=\"uid\" [class.disabled]=\"disabled\" #el>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n    </div>\n    <div class=\"content\">\n        <ng-content select=\"ng-container[header]\">\n        </ng-content>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"showDropDownButton\" [disabled]=\"disabled || readonly\" [loading]=\"loading\"\n            icon=\"far fa-angle-down icon\" type=\"light blank\" [size]=\"size\" (click)=\"handleArrowClick($event)\"\n            [tabIndex]=\"-1\">\n        </ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>\n\n<ng-template #baseTemplate>\n    <!-- [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth + 'px' : 'unset'}\" -->\n    <div class=\"ax-dropdown-container-bordered\" [ngStyle]=\"{'width': dropdownWidth !== '0px' ? dropdownWidth : 'unset'}\">\n        <ng-content select=\"ng-container[panel]\">\n        </ng-content>\n    </div>\n</ng-template>", styles: [".ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-size-border-radius);box-shadow:0 0 3px #0003;margin:.2rem 0}\n"] }]
+            args: [{ selector: 'ax-drop-down', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'display:contents;' }, template: "<div class=\"ax form-item {{size}}\" [class.readonly]=\"readonly\" [attr.id]=\"axId || uid\" [class.disabled]=\"disabled\" [ngClass]=\"axClass\" #el>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\"></ng-content>\n    </div>\n    <div class=\"content\">\n        <ng-content select=\"ng-container[header]\"></ng-content>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"showDropDownButton\" \n                   [disabled]=\"disabled || readonly\" \n                   [loading]=\"loading\"\n                   icon=\"far fa-angle-down icon\" \n                   type=\"light blank\" \n                   [size]=\"size\" \n                   (click)=\"handleArrowClick($event)\"\n                   [tabIndex]=\"-1\">\n        </ax-button>\n        <ng-content select=\"[end]\"></ng-content>\n    </div>\n</div>\n\n<ng-template #baseTemplate>\n    <div class=\"ax-dropdown-container-bordered\" [ngStyle]=\"{'width': dropdownWidth !== '0px' ? dropdownWidth : 'unset'}\">\n        <ng-content select=\"ng-container[panel]\"></ng-content>\n    </div>\n</ng-template>\n", styles: [".ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-size-border-radius);box-shadow:0 0 3px #0003;margin:.2rem 0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { baseTemplate: [{
                 type: ViewChild,
                 args: ['baseTemplate']
@@ -4014,11 +4092,15 @@ class AXTextBoxComponent extends AXBaseTextComponent {
         this.cdr = cdr;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTextBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { mask: "mask", showMask: "showMask", type: "type", maxLength: "maxLength", maskGuid: "maskGuid", maskPlaceholder: "maskPlaceholder", maskKeepCharPositions: "maskKeepCharPositions" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXTextBoxComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n  <div class=\"ax items-wrapper\">\n    <ng-content select=\"[start]\"> </ng-content>\n    <i class=\"form-item-icon {{ icon }}\" *ngIf=\"icon\"></i>\n  </div>\n  <div class=\"content\" #content>\n    <div class=\"ax form-control input {{ size }}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n      [class.icon]=\"icon\">\n      <input #input [autocomplete]=\"autocomplete\" [name]=\"name\" class=\"ax {{ size }}\" [attr.type]=\"type\"\n        [attr.maxlength]=\"maxLength\" [mask]=\"mask\" [showMaskTyped]=\"showMask\" [(ngModel)]=\"value\"\n        placeholder=\"{{ placeholder }}\" [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\n        [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" />\n    </div>\n  </div>\n  <div class=\"ax items-wrapper\">\n    <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"></ax-button>\n    <ng-content select=\"[end]\"> </ng-content>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i3.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { mask: "mask", showMask: "showMask", type: "type", maxLength: "maxLength", maskGuid: "maskGuid", maskPlaceholder: "maskPlaceholder", maskKeepCharPositions: "maskKeepCharPositions" }, host: { styleAttribute: "width: 100%" }, providers: [
+            { provide: AXValidatableComponent, useExisting: AXTextBoxComponent },
+        ], usesInheritance: true, ngImport: i0, template: "<div \n  class=\"ax form-item {{ axClass }}\" \n  [class.disabled]=\"disabled\" \n  [attr.id]=\"axId ? axId : null\" \n  #fc\n>\n  <div class=\"ax items-wrapper\">\n    <ng-content select=\"[start]\"></ng-content>\n    <i \n      class=\"form-item-icon {{ icon }}\" \n      *ngIf=\"icon\"\n      [attr.id]=\"axId ? axId + '-icon' : null\"\n      [attr.class]=\"axClass ? axClass + '-icon' : null\"\n    ></i>\n  </div>\n  <div \n    class=\"content\" \n    #content\n    [attr.id]=\"axId ? axId + '-content' : null\"\n    [attr.class]=\"axClass ? axClass + '-content' : null\"\n  >\n    <div \n      class=\"ax form-control input {{ size }}\" \n      [class.disabled]=\"disabled\" \n      [class.readonly]=\"readonly\" \n      [class.icon]=\"icon\"\n      [attr.id]=\"axId ? axId + '-form-control' : null\"\n      [attr.class]=\"axClass ? axClass + '-form-control' : null\"\n    >\n      <input \n        #input \n        [autocomplete]=\"autocomplete\" \n        [name]=\"name\" \n        class=\"ax {{ size }} {{ axClass ? axClass + '-input' : '' }}\" \n        [attr.type]=\"type\"\n        [attr.maxlength]=\"maxLength\" \n        [mask]=\"mask\" \n        [showMaskTyped]=\"showMask\" \n        [(ngModel)]=\"value\"\n        placeholder=\"{{ placeholder }}\" \n        [readonly]=\"readonly\" \n        [disabled]=\"disabled\" \n        [ngClass]=\"setTextAlign()\"\n        [class.clear]=\"value && allowClear\" \n        [attr.id]=\"axId ? axId + '-input' : null\"\n        (focus)=\"handleInputFocus($event)\" \n        (blur)=\"handleInputBlur($event)\"\n      />\n    </div>\n  </div>\n  <div class=\"ax items-wrapper\">\n    <ax-button \n      *ngIf=\"value && allowClear\" \n      icon=\"far fa-times\" \n      type=\"danger blank\" \n      (click)=\"clear()\"\n      [attr.id]=\"axId ? axId + '-clear-button' : null\"\n      [attr.class]=\"axClass ? axClass + '-clear-button' : null\"\n    ></ax-button>\n    <ng-content select=\"[end]\"></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i3.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTextBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-text-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXTextBoxComponent }], template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n  <div class=\"ax items-wrapper\">\n    <ng-content select=\"[start]\"> </ng-content>\n    <i class=\"form-item-icon {{ icon }}\" *ngIf=\"icon\"></i>\n  </div>\n  <div class=\"content\" #content>\n    <div class=\"ax form-control input {{ size }}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n      [class.icon]=\"icon\">\n      <input #input [autocomplete]=\"autocomplete\" [name]=\"name\" class=\"ax {{ size }}\" [attr.type]=\"type\"\n        [attr.maxlength]=\"maxLength\" [mask]=\"mask\" [showMaskTyped]=\"showMask\" [(ngModel)]=\"value\"\n        placeholder=\"{{ placeholder }}\" [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\n        [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" />\n    </div>\n  </div>\n  <div class=\"ax items-wrapper\">\n    <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"></ax-button>\n    <ng-content select=\"[end]\"> </ng-content>\n  </div>\n</div>" }]
+            args: [{ selector: 'ax-text-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [
+                        { provide: AXValidatableComponent, useExisting: AXTextBoxComponent },
+                    ], template: "<div \n  class=\"ax form-item {{ axClass }}\" \n  [class.disabled]=\"disabled\" \n  [attr.id]=\"axId ? axId : null\" \n  #fc\n>\n  <div class=\"ax items-wrapper\">\n    <ng-content select=\"[start]\"></ng-content>\n    <i \n      class=\"form-item-icon {{ icon }}\" \n      *ngIf=\"icon\"\n      [attr.id]=\"axId ? axId + '-icon' : null\"\n      [attr.class]=\"axClass ? axClass + '-icon' : null\"\n    ></i>\n  </div>\n  <div \n    class=\"content\" \n    #content\n    [attr.id]=\"axId ? axId + '-content' : null\"\n    [attr.class]=\"axClass ? axClass + '-content' : null\"\n  >\n    <div \n      class=\"ax form-control input {{ size }}\" \n      [class.disabled]=\"disabled\" \n      [class.readonly]=\"readonly\" \n      [class.icon]=\"icon\"\n      [attr.id]=\"axId ? axId + '-form-control' : null\"\n      [attr.class]=\"axClass ? axClass + '-form-control' : null\"\n    >\n      <input \n        #input \n        [autocomplete]=\"autocomplete\" \n        [name]=\"name\" \n        class=\"ax {{ size }} {{ axClass ? axClass + '-input' : '' }}\" \n        [attr.type]=\"type\"\n        [attr.maxlength]=\"maxLength\" \n        [mask]=\"mask\" \n        [showMaskTyped]=\"showMask\" \n        [(ngModel)]=\"value\"\n        placeholder=\"{{ placeholder }}\" \n        [readonly]=\"readonly\" \n        [disabled]=\"disabled\" \n        [ngClass]=\"setTextAlign()\"\n        [class.clear]=\"value && allowClear\" \n        [attr.id]=\"axId ? axId + '-input' : null\"\n        (focus)=\"handleInputFocus($event)\" \n        (blur)=\"handleInputBlur($event)\"\n      />\n    </div>\n  </div>\n  <div class=\"ax items-wrapper\">\n    <ax-button \n      *ngIf=\"value && allowClear\" \n      icon=\"far fa-times\" \n      type=\"danger blank\" \n      (click)=\"clear()\"\n      [attr.id]=\"axId ? axId + '-clear-button' : null\"\n      [attr.class]=\"axClass ? axClass + '-clear-button' : null\"\n    ></ax-button>\n    <ng-content select=\"[end]\"></ng-content>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { mask: [{
                 type: Input
             }], showMask: [{
@@ -5060,13 +5142,13 @@ class AXDatePickerComponent extends AXValidatableComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: { dayStyle: "dayStyle", dayMinMaxResoan: "dayMinMaxResoan", validation: "validation", placeholder: "placeholder", min: "min", max: "max", readonly: "readonly", disabled: "disabled", allowClear: "allowClear", textAlign: "textAlign", showToday: "showToday", selectableHoliday: "selectableHoliday", dateType: "dateType", showTodayButton: "showTodayButton", openByClick: "openByClick", size: "size", type: "type", value: "value" }, outputs: { typeChange: "typeChange", onValueChanged: "onValueChanged", valueChange: "valueChange" }, host: { styleAttribute: "width: 100%" }, providers: [
             { provide: AXValidatableComponent, useExisting: AXDatePickerComponent },
-        ], queries: [{ propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down\n  [readonly]=\"readonly\"\n  [fitParent]=\"false\"\n  [size]=\"size\"\n  [showDropDownButton]=\"false\"\n  icon=\"far fa-calendar-alt\"\n  #dropdown\n  maxHeight=\"unset\"\n>\n  <ng-container start>\n    <ng-content select=\"[start]\"> </ng-content>\n  </ng-container>\n  <ng-container header>\n    <ax-text-box\n      #input\n      [textAlign]=\"textAlign\"\n      [(value)]=\"text\"\n      [mask]=\"dateType\"\n      [readonly]=\"false\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [size]=\"size\"\n      (onkey)=\"handleKeyPress($event)\"\n      (onFocus)=\"handleInputFocus()\"\n      (click)=\"handleClick()\"\n      (onBlur)=\"handleInputBlur()\"\n      (onValueChanged)=\"textChange($event)\"\n    ></ax-text-box>\n  </ng-container>\n  <ng-container panel>\n    <ax-calendar-box\n      #calendarRef\n      *ngIf=\"_renderPicker\"\n      [showTodayButton]=\"showTodayButton\"\n      [selectableHoliday]=\"selectableHoliday\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [size]=\"size\"\n      (onClick)=\"onClick($event)\"\n      (onValueChanged)=\"onDateChange($event)\"\n      [type]=\"type\"\n      [(value)]=\"value\"\n      [dayStyle]=\"dayStyle\"\n      [dayMinMaxResoan]=\"dayMinMaxResoan\"\n    >\n    </ax-calendar-box>\n  </ng-container>\n  <ng-container end>\n    <ax-button\n      end\n      *ngIf=\"allowClear && value\"\n      [disabled]=\"disabled\"\n      icon=\"far fa-times icon\"\n      type=\"blank danger\"\n      (click)=\"clear()\"\n      [size]=\"size\"\n      [tabIndex]=\"-1\"\n    >\n    </ax-button>\n    <ax-button\n      end\n      icon=\"far fa-calendar-alt icon\"\n      type=\"light blank\"\n      (click)=\"handleButtonClick()\"\n      [disabled]=\"disabled\"\n      [size]=\"size\"\n      [tabIndex]=\"-1\"\n    ></ax-button>\n    <ng-content select=\"[end]\"> </ng-content>\n  </ng-container>\n</ax-drop-down>\n", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: ["size", "type", "locale", "dir", "min", "max", "selectableHoliday", "dayStyle", "dayMinMaxResoan", "showTodayButton", "view", "depth", "value"], outputs: ["onValueChanged", "onClick", "valueChange"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }], encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down\n  [readonly]=\"readonly\"\n  [fitParent]=\"false\"\n  [size]=\"size\"\n  [showDropDownButton]=\"false\"\n  icon=\"far fa-calendar-alt\"\n  #dropdown\n  maxHeight=\"unset\"\n  [attr.id]=\"axId\"\n  [ngClass]=\"axClass\"\n>\n  <ng-container start>\n    <ng-content select=\"[start]\"></ng-content>\n  </ng-container>\n  \n  <ng-container header>\n    <ax-text-box\n      #input\n      [textAlign]=\"textAlign\"\n      [(value)]=\"text\"\n      [mask]=\"dateType\"\n      [readonly]=\"false\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [size]=\"size\"\n      (onkey)=\"handleKeyPress($event)\"\n      (onFocus)=\"handleInputFocus()\"\n      (click)=\"handleClick()\"\n      (onBlur)=\"handleInputBlur()\"\n      (onValueChanged)=\"textChange($event)\"\n    ></ax-text-box>\n  </ng-container>\n  \n  <ng-container panel>\n    <ax-calendar-box\n      #calendarRef\n      *ngIf=\"_renderPicker\"\n      [showTodayButton]=\"showTodayButton\"\n      [selectableHoliday]=\"selectableHoliday\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [size]=\"size\"\n      (onClick)=\"onClick($event)\"\n      (onValueChanged)=\"onDateChange($event)\"\n      [type]=\"type\"\n      [(value)]=\"value\"\n      [dayStyle]=\"dayStyle\"\n      [dayMinMaxResoan]=\"dayMinMaxResoan\"\n    >\n    </ax-calendar-box>\n  </ng-container>\n  \n  <ng-container end>\n    <ax-button\n      end\n      *ngIf=\"allowClear && value\"\n      [disabled]=\"disabled\"\n      icon=\"far fa-times icon\"\n      type=\"blank danger\"\n      (click)=\"clear()\"\n      [size]=\"size\"\n      [tabIndex]=\"-1\"\n    ></ax-button>\n    <ax-button\n      end\n      icon=\"far fa-calendar-alt icon\"\n      type=\"light blank\"\n      (click)=\"handleButtonClick()\"\n      [disabled]=\"disabled\"\n      [size]=\"size\"\n      [tabIndex]=\"-1\"\n    ></ax-button>\n    <ng-content select=\"[end]\"></ng-content>\n  </ng-container>\n</ax-drop-down>\n", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: ["size", "type", "locale", "dir", "axId", "axClass", "min", "max", "selectableHoliday", "dayStyle", "dayMinMaxResoan", "showTodayButton", "view", "depth", "value"], outputs: ["onValueChanged", "onClick", "valueChange"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXDatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-date-picker', encapsulation: ViewEncapsulation.None, providers: [
                         { provide: AXValidatableComponent, useExisting: AXDatePickerComponent },
-                    ], host: { style: 'width: 100%' }, template: "<ax-drop-down\n  [readonly]=\"readonly\"\n  [fitParent]=\"false\"\n  [size]=\"size\"\n  [showDropDownButton]=\"false\"\n  icon=\"far fa-calendar-alt\"\n  #dropdown\n  maxHeight=\"unset\"\n>\n  <ng-container start>\n    <ng-content select=\"[start]\"> </ng-content>\n  </ng-container>\n  <ng-container header>\n    <ax-text-box\n      #input\n      [textAlign]=\"textAlign\"\n      [(value)]=\"text\"\n      [mask]=\"dateType\"\n      [readonly]=\"false\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [size]=\"size\"\n      (onkey)=\"handleKeyPress($event)\"\n      (onFocus)=\"handleInputFocus()\"\n      (click)=\"handleClick()\"\n      (onBlur)=\"handleInputBlur()\"\n      (onValueChanged)=\"textChange($event)\"\n    ></ax-text-box>\n  </ng-container>\n  <ng-container panel>\n    <ax-calendar-box\n      #calendarRef\n      *ngIf=\"_renderPicker\"\n      [showTodayButton]=\"showTodayButton\"\n      [selectableHoliday]=\"selectableHoliday\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [size]=\"size\"\n      (onClick)=\"onClick($event)\"\n      (onValueChanged)=\"onDateChange($event)\"\n      [type]=\"type\"\n      [(value)]=\"value\"\n      [dayStyle]=\"dayStyle\"\n      [dayMinMaxResoan]=\"dayMinMaxResoan\"\n    >\n    </ax-calendar-box>\n  </ng-container>\n  <ng-container end>\n    <ax-button\n      end\n      *ngIf=\"allowClear && value\"\n      [disabled]=\"disabled\"\n      icon=\"far fa-times icon\"\n      type=\"blank danger\"\n      (click)=\"clear()\"\n      [size]=\"size\"\n      [tabIndex]=\"-1\"\n    >\n    </ax-button>\n    <ax-button\n      end\n      icon=\"far fa-calendar-alt icon\"\n      type=\"light blank\"\n      (click)=\"handleButtonClick()\"\n      [disabled]=\"disabled\"\n      [size]=\"size\"\n      [tabIndex]=\"-1\"\n    ></ax-button>\n    <ng-content select=\"[end]\"> </ng-content>\n  </ng-container>\n</ax-drop-down>\n", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"] }]
+                    ], host: { style: 'width: 100%' }, template: "<ax-drop-down\n  [readonly]=\"readonly\"\n  [fitParent]=\"false\"\n  [size]=\"size\"\n  [showDropDownButton]=\"false\"\n  icon=\"far fa-calendar-alt\"\n  #dropdown\n  maxHeight=\"unset\"\n  [attr.id]=\"axId\"\n  [ngClass]=\"axClass\"\n>\n  <ng-container start>\n    <ng-content select=\"[start]\"></ng-content>\n  </ng-container>\n  \n  <ng-container header>\n    <ax-text-box\n      #input\n      [textAlign]=\"textAlign\"\n      [(value)]=\"text\"\n      [mask]=\"dateType\"\n      [readonly]=\"false\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [size]=\"size\"\n      (onkey)=\"handleKeyPress($event)\"\n      (onFocus)=\"handleInputFocus()\"\n      (click)=\"handleClick()\"\n      (onBlur)=\"handleInputBlur()\"\n      (onValueChanged)=\"textChange($event)\"\n    ></ax-text-box>\n  </ng-container>\n  \n  <ng-container panel>\n    <ax-calendar-box\n      #calendarRef\n      *ngIf=\"_renderPicker\"\n      [showTodayButton]=\"showTodayButton\"\n      [selectableHoliday]=\"selectableHoliday\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [size]=\"size\"\n      (onClick)=\"onClick($event)\"\n      (onValueChanged)=\"onDateChange($event)\"\n      [type]=\"type\"\n      [(value)]=\"value\"\n      [dayStyle]=\"dayStyle\"\n      [dayMinMaxResoan]=\"dayMinMaxResoan\"\n    >\n    </ax-calendar-box>\n  </ng-container>\n  \n  <ng-container end>\n    <ax-button\n      end\n      *ngIf=\"allowClear && value\"\n      [disabled]=\"disabled\"\n      icon=\"far fa-times icon\"\n      type=\"blank danger\"\n      (click)=\"clear()\"\n      [size]=\"size\"\n      [tabIndex]=\"-1\"\n    ></ax-button>\n    <ax-button\n      end\n      icon=\"far fa-calendar-alt icon\"\n      type=\"light blank\"\n      (click)=\"handleButtonClick()\"\n      [disabled]=\"disabled\"\n      [size]=\"size\"\n      [tabIndex]=\"-1\"\n    ></ax-button>\n    <ng-content select=\"[end]\"></ng-content>\n  </ng-container>\n</ax-drop-down>\n", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { dropdown: [{
                 type: ViewChild,
                 args: ['dropdown', { static: true }]
@@ -5570,6 +5652,8 @@ class AXToastMessageComponent {
     timeOut = 6000;
     closeable = false;
     type = 'info';
+    axId;
+    axClass;
     style = 'info';
     icon = '';
     toastWidth = 100;
@@ -5616,11 +5700,11 @@ class AXToastMessageComponent {
         this.elRef.nativeElement.parentElement.removeChild(this.elRef.nativeElement);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXToastMessageComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXToastMessageComponent, selector: "ng-component", inputs: { title: "title", message: "message", timeOut: "timeOut", closeable: "closeable", type: "type" }, ngImport: i0, template: "<div class=\"toast-container\">\n    <header *ngIf=\"title\" class=\"ax toast {{ style }}\">\n        <div>\n            <i class=\"{{icon}}\"></i>&nbsp; {{ title }}\n        </div>\n        <div *ngIf=\"closeable\" (click)=\"close()\" class=\"toast-close\">\n            <i class=\"far fa-times\"></i>\n        </div>\n    </header>\n    <div class=\"content ax toast {{ style }}\">\n        {{ message }}\n        <div *ngIf=\"!title && closeable\" (click)=\"close()\" class=\"toast-close\">\n            <i class=\"far fa-times\"></i>\n        </div>\n        <div class=\"toast-progress\" [style.animation-duration.ms]=\"timeOut\"></div>\n    </div>\n</div>", styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8rem 0;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;-webkit-animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;border-radius:var(--ax-size-border-radius)}.toast-container header{display:flex;justify-content:space-between;align-items:center;padding:.5rem .8rem;font-weight:500}.toast-container .content{padding:1rem;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer;font-size:1rem}.toast-container .toast-progress{position:absolute;background:#00000080;width:100%;bottom:0;left:0;height:6px;animation-duration:4s;animation-timing-function:linear;animation-name:progressBar}@keyframes progressBar{0%{width:100%}to{width:0%}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXToastMessageComponent, selector: "ng-component", inputs: { title: "title", message: "message", timeOut: "timeOut", closeable: "closeable", type: "type", axId: "axId", axClass: "axClass" }, ngImport: i0, template: "<div \n  class=\"toast-container {{axClass}}\" \n  [attr.id]=\"axId\"\n>\n    <header \n      *ngIf=\"title\" \n      class=\"ax toast {{ style }} {{axClass ? axClass + '-header' : ''}}\" \n      [attr.id]=\"axId ? axId + '-header' : null\"\n    >\n        <div>\n            <i class=\"{{icon}}\"></i>&nbsp; {{ title }}\n        </div>\n        <div \n          *ngIf=\"closeable\" \n          (click)=\"close()\" \n          class=\"toast-close {{axClass ? axClass + '-close' : ''}}\" \n          [attr.id]=\"axId ? axId + '-close' : null\"\n        >\n            <i class=\"far fa-times\"></i>\n        </div>\n    </header>\n    <div \n      class=\"content ax toast {{ style }} {{axClass ? axClass + '-content' : ''}}\" \n      [attr.id]=\"axId ? axId + '-content' : null\"\n    >\n        {{ message }}\n        <div \n          *ngIf=\"!title && closeable\" \n          (click)=\"close()\" \n          class=\"toast-close {{axClass ? axClass + '-close' : ''}}\" \n          [attr.id]=\"axId ? axId + '-close' : null\"\n        >\n            <i class=\"far fa-times\"></i>\n        </div>\n        <div \n          class=\"toast-progress\" \n          [style.animation-duration.ms]=\"timeOut\"\n          [attr.id]=\"axId ? axId + '-progress' : null\"\n        ></div>\n    </div>\n</div>\n", styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8rem 0;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;-webkit-animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;border-radius:var(--ax-size-border-radius)}.toast-container header{display:flex;justify-content:space-between;align-items:center;padding:.5rem .8rem;font-weight:500}.toast-container .content{padding:1rem;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer;font-size:1rem}.toast-container .toast-progress{position:absolute;background:#00000080;width:100%;bottom:0;left:0;height:6px;animation-duration:4s;animation-timing-function:linear;animation-name:progressBar}@keyframes progressBar{0%{width:100%}to{width:0%}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXToastMessageComponent, decorators: [{
             type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, template: "<div class=\"toast-container\">\n    <header *ngIf=\"title\" class=\"ax toast {{ style }}\">\n        <div>\n            <i class=\"{{icon}}\"></i>&nbsp; {{ title }}\n        </div>\n        <div *ngIf=\"closeable\" (click)=\"close()\" class=\"toast-close\">\n            <i class=\"far fa-times\"></i>\n        </div>\n    </header>\n    <div class=\"content ax toast {{ style }}\">\n        {{ message }}\n        <div *ngIf=\"!title && closeable\" (click)=\"close()\" class=\"toast-close\">\n            <i class=\"far fa-times\"></i>\n        </div>\n        <div class=\"toast-progress\" [style.animation-duration.ms]=\"timeOut\"></div>\n    </div>\n</div>", styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8rem 0;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;-webkit-animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;border-radius:var(--ax-size-border-radius)}.toast-container header{display:flex;justify-content:space-between;align-items:center;padding:.5rem .8rem;font-weight:500}.toast-container .content{padding:1rem;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer;font-size:1rem}.toast-container .toast-progress{position:absolute;background:#00000080;width:100%;bottom:0;left:0;height:6px;animation-duration:4s;animation-timing-function:linear;animation-name:progressBar}@keyframes progressBar{0%{width:100%}to{width:0%}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
+            args: [{ encapsulation: ViewEncapsulation.None, template: "<div \n  class=\"toast-container {{axClass}}\" \n  [attr.id]=\"axId\"\n>\n    <header \n      *ngIf=\"title\" \n      class=\"ax toast {{ style }} {{axClass ? axClass + '-header' : ''}}\" \n      [attr.id]=\"axId ? axId + '-header' : null\"\n    >\n        <div>\n            <i class=\"{{icon}}\"></i>&nbsp; {{ title }}\n        </div>\n        <div \n          *ngIf=\"closeable\" \n          (click)=\"close()\" \n          class=\"toast-close {{axClass ? axClass + '-close' : ''}}\" \n          [attr.id]=\"axId ? axId + '-close' : null\"\n        >\n            <i class=\"far fa-times\"></i>\n        </div>\n    </header>\n    <div \n      class=\"content ax toast {{ style }} {{axClass ? axClass + '-content' : ''}}\" \n      [attr.id]=\"axId ? axId + '-content' : null\"\n    >\n        {{ message }}\n        <div \n          *ngIf=\"!title && closeable\" \n          (click)=\"close()\" \n          class=\"toast-close {{axClass ? axClass + '-close' : ''}}\" \n          [attr.id]=\"axId ? axId + '-close' : null\"\n        >\n            <i class=\"far fa-times\"></i>\n        </div>\n        <div \n          class=\"toast-progress\" \n          [style.animation-duration.ms]=\"timeOut\"\n          [attr.id]=\"axId ? axId + '-progress' : null\"\n        ></div>\n    </div>\n</div>\n", styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8rem 0;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;-webkit-animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;border-radius:var(--ax-size-border-radius)}.toast-container header{display:flex;justify-content:space-between;align-items:center;padding:.5rem .8rem;font-weight:500}.toast-container .content{padding:1rem;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer;font-size:1rem}.toast-container .toast-progress{position:absolute;background:#00000080;width:100%;bottom:0;left:0;height:6px;animation-duration:4s;animation-timing-function:linear;animation-name:progressBar}@keyframes progressBar{0%{width:100%}to{width:0%}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { title: [{
                 type: Input
             }], message: [{
@@ -5631,6 +5715,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                 type: Input
             }], type: [{
                 type: Input
+            }], axId: [{
+                type: Input
+            }], axClass: [{
+                type: Input
             }] } });
 
 class AXToastService {
@@ -5676,6 +5764,8 @@ class AXPanelBoxComponent {
     headerTemplate;
     size = "md";
     type = "";
+    axId;
+    axClass;
     // @Input()
     // caption: string = 'Caption';
     _caption = "caption";
@@ -5703,7 +5793,7 @@ class AXPanelBoxComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXPanelBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXPanelBoxComponent, selector: "ax-panel-box", inputs: { size: "size", type: "type", caption: "caption", collapsed: "collapsed", allowCollapse: "allowCollapse" }, outputs: { collapsedChange: "collapsedChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ax-panel-box ax {{size}}\">\n  <ng-container *ngIf=\"headerTemplate; else elseTemplate\">\n    <header [class.toggle]=\"allowCollapse\">\n      <ng-container *ngTemplateOutlet=\"headerTemplate\">\n      </ng-container>\n    </header>\n  </ng-container>\n  <ng-template #elseTemplate>\n    <header class=\"ax panel {{type}}\" [class.toggle]=\"allowCollapse\" (click)=\"toggle()\">\n      <div [innerHTML]=\"caption\"></div>\n      <div *ngIf=\"allowCollapse\">\n        <i [ngClass]=\"{ 'far fa-minus-square' : !collapsed ,'fas fa-plus-square' : collapsed }\"></i>\n      </div>\n    </header>\n  </ng-template>\n  <div class=\"content\" [@visibilityChanged]=\"collapsed ? 'hidden' : 'shown'\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".ax-panel-box{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;border-radius:var(--ax-size-border-radius);overflow:hidden;font-family:inherit;font-size:inherit;position:relative}.ax-panel-box header{display:flex;flex:1;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ax-border-color);padding:.8em}.ax-panel-box .content{padding:.8em;overflow:hidden}.ax-panel-box .toggle{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXPanelBoxComponent, selector: "ax-panel-box", inputs: { size: "size", type: "type", axId: "axId", axClass: "axClass", caption: "caption", collapsed: "collapsed", allowCollapse: "allowCollapse" }, outputs: { collapsedChange: "collapsedChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, static: true }], ngImport: i0, template: "<div \n  [attr.id]=\"axId ? axId : ''\" \n  class=\"ax-panel-box ax {{size}}\" \n  [ngClass]=\"axClass\"\n>\n  <ng-container *ngIf=\"headerTemplate; else elseTemplate\">\n    <header [class.toggle]=\"allowCollapse\">\n      <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n    </header>\n  </ng-container>\n  <ng-template #elseTemplate>\n    <header class=\"ax panel {{type}}\" [class.toggle]=\"allowCollapse\" (click)=\"toggle()\">\n      <div [innerHTML]=\"caption\"></div>\n      <div *ngIf=\"allowCollapse\">\n        <i [ngClass]=\"{ 'far fa-minus-square' : !collapsed ,'fas fa-plus-square' : collapsed }\"></i>\n      </div>\n    </header>\n  </ng-template>\n  <div class=\"content\" [@visibilityChanged]=\"collapsed ? 'hidden' : 'shown'\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".ax-panel-box{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;border-radius:var(--ax-size-border-radius);overflow:hidden;font-family:inherit;font-size:inherit;position:relative}.ax-panel-box header{display:flex;flex:1;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ax-border-color);padding:.8em}.ax-panel-box .content{padding:.8em;overflow:hidden}.ax-panel-box .toggle{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
             trigger("visibilityChanged", [
                 state("shown", style({
                     height: "*",
@@ -5737,7 +5827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                             transition("shown => hidden", animate("200ms")),
                             transition("hidden => shown", animate("200ms")),
                         ]),
-                    ], template: "<div class=\"ax-panel-box ax {{size}}\">\n  <ng-container *ngIf=\"headerTemplate; else elseTemplate\">\n    <header [class.toggle]=\"allowCollapse\">\n      <ng-container *ngTemplateOutlet=\"headerTemplate\">\n      </ng-container>\n    </header>\n  </ng-container>\n  <ng-template #elseTemplate>\n    <header class=\"ax panel {{type}}\" [class.toggle]=\"allowCollapse\" (click)=\"toggle()\">\n      <div [innerHTML]=\"caption\"></div>\n      <div *ngIf=\"allowCollapse\">\n        <i [ngClass]=\"{ 'far fa-minus-square' : !collapsed ,'fas fa-plus-square' : collapsed }\"></i>\n      </div>\n    </header>\n  </ng-template>\n  <div class=\"content\" [@visibilityChanged]=\"collapsed ? 'hidden' : 'shown'\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".ax-panel-box{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;border-radius:var(--ax-size-border-radius);overflow:hidden;font-family:inherit;font-size:inherit;position:relative}.ax-panel-box header{display:flex;flex:1;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ax-border-color);padding:.8em}.ax-panel-box .content{padding:.8em;overflow:hidden}.ax-panel-box .toggle{cursor:pointer}\n"] }]
+                    ], template: "<div \n  [attr.id]=\"axId ? axId : ''\" \n  class=\"ax-panel-box ax {{size}}\" \n  [ngClass]=\"axClass\"\n>\n  <ng-container *ngIf=\"headerTemplate; else elseTemplate\">\n    <header [class.toggle]=\"allowCollapse\">\n      <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n    </header>\n  </ng-container>\n  <ng-template #elseTemplate>\n    <header class=\"ax panel {{type}}\" [class.toggle]=\"allowCollapse\" (click)=\"toggle()\">\n      <div [innerHTML]=\"caption\"></div>\n      <div *ngIf=\"allowCollapse\">\n        <i [ngClass]=\"{ 'far fa-minus-square' : !collapsed ,'fas fa-plus-square' : collapsed }\"></i>\n      </div>\n    </header>\n  </ng-template>\n  <div class=\"content\" [@visibilityChanged]=\"collapsed ? 'hidden' : 'shown'\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".ax-panel-box{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;border-radius:var(--ax-size-border-radius);overflow:hidden;font-family:inherit;font-size:inherit;position:relative}.ax-panel-box header{display:flex;flex:1;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ax-border-color);padding:.8em}.ax-panel-box .content{padding:.8em;overflow:hidden}.ax-panel-box .toggle{cursor:pointer}\n"] }]
         }], propDecorators: { headerTemplate: [{
                 type: ContentChild,
                 args: ["header", { static: true }]
@@ -5745,6 +5835,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                 type: Input
             }], type: [{
                 type: Input
+            }], axId: [{
+                type: Input
+            }], axClass: [{
+                type: Input
             }], caption: [{
                 type: Input
             }], collapsedChange: [{
@@ -5768,6 +5862,8 @@ class AXFilterPanelComponent {
     groups = [];
     predefinedFilters = [];
     mode = 'click';
+    axId;
+    axClass;
     saveItems = [
         {
             name: 'saveAs',
@@ -5964,11 +6060,11 @@ class AXFilterPanelComponent {
         }, 50);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXFilterPanelComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", 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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AXPanelBoxComponent, selector: "ax-panel-box", inputs: ["size", "type", "caption", "collapsed", "allowCollapse"], outputs: ["collapsedChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "component", type: AXToolbarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "floatPlacemnet", "selection", "items"], outputs: ["onItemClick"] }, { kind: "component", type: AXToolbarTitleComponent, selector: "ax-toolbar-title", inputs: ["text"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXFilterColumnStringComponent, selector: "ax-filter-column-string" }, { kind: "component", type: AXFilterColumnSelectionComponent, selector: "ax-filter-column-selection", inputs: ["items", "mode", "dataType"] }, { kind: "component", type: AXFilterColumnDateComponent, selector: "ax-filter-column-date" }, { kind: "component", type: AXFilterColumnNumberComponent, selector: "ax-filter-column-number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXFilterPanelComponent, selector: "ax-filter-panel", inputs: { groups: "groups", predefinedFilters: "predefinedFilters", mode: "mode", axId: "axId", axClass: "axClass" }, 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 {{axClass}}\" #panel [attr.id]=\"axId\">\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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AXPanelBoxComponent, selector: "ax-panel-box", inputs: ["size", "type", "axId", "axClass", "caption", "collapsed", "allowCollapse"], outputs: ["collapsedChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "component", type: AXToolbarComponent, selector: "ax-toolbar", inputs: ["axId", "axClass"] }, { kind: "component", type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "floatPlacemnet", "selection", "items", "axId", "axClass"], outputs: ["onItemClick"] }, { kind: "component", type: AXToolbarTitleComponent, selector: "ax-toolbar-title", inputs: ["axId", "axClass", "text"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXFilterColumnStringComponent, selector: "ax-filter-column-string" }, { kind: "component", type: AXFilterColumnSelectionComponent, selector: "ax-filter-column-selection", inputs: ["items", "mode", "dataType"] }, { kind: "component", type: AXFilterColumnDateComponent, selector: "ax-filter-column-date" }, { kind: "component", type: AXFilterColumnNumberComponent, selector: "ax-filter-column-number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", 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"] }]
+            args: [{ selector: 'ax-filter-panel', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-filter-panel {{axClass}}\" #panel [attr.id]=\"axId\">\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: AXToastService }], propDecorators: { panel: [{
                 type: ViewChild,
                 args: ['panel', { static: true }]
@@ -5996,6 +6092,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                 type: Input
             }], mode: [{
                 type: Input
+            }], axId: [{
+                type: Input
+            }], axClass: [{
+                type: Input
             }], filterChange: [{
                 type: Output
             }] } });
@@ -6144,7 +6244,7 @@ class AXToolbarFilterViewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXToolbarFilterViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", 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: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "floatPlacemnet", "selection", "items"], outputs: ["onItemClick"] }, { kind: "component", type: AXMenuComponent, selector: "ax-menu", inputs: ["menuTemplate", "rtl", "size", "selection", "mode", "target", "floatAlignment", "floatPlacemnet", "direction", "items"], outputs: ["onItemClick"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", 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: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "floatPlacemnet", "selection", "items", "axId", "axClass"], outputs: ["onItemClick"] }, { kind: "component", type: AXMenuComponent, selector: "ax-menu", inputs: ["menuTemplate", "rtl", "size", "selection", "mode", "target", "floatAlignment", "floatPlacemnet", "direction", "items", "axId", "axClass"], outputs: ["onItemClick"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXToolbarFilterViewComponent, decorators: [{
             type: Component,
@@ -6192,11 +6292,11 @@ class AXFormGroupComponent extends AXBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXFormGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXFormGroupComponent, selector: "ax-form-group", inputs: { size: "size" }, host: { styleAttribute: "width: 100%; display:contents;" }, queries: [{ propertyName: "component", first: true, predicate: AXValidatableComponent, descendants: true }], viewQueries: [{ propertyName: "div", first: true, predicate: ["div"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-group {{size}}\">\n    <ng-content select=\"ax-label\"></ng-content>\n    <div #div class=\"ax form-item {{size}}\" [ngClass]=\"{'required-state': required}\">\n        <div class=\"ax buttons start-buttons\" #startButtons>\n            <ng-content select=\"ax-button[start]\"></ng-content>\n        </div>\n        <div class=\"content\" #content>\n            <ng-content></ng-content>\n        </div>\n        <div class=\"ax buttons end-buttons\" #endButtons>\n            <ng-content select=\"ax-button[end]\"></ng-content>\n            <ng-content select=\"ax-button\"></ng-content>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXFormGroupComponent, selector: "ax-form-group", inputs: { size: "size" }, host: { styleAttribute: "width: 100%; display:contents;" }, queries: [{ propertyName: "component", first: true, predicate: AXValidatableComponent, descendants: true }], viewQueries: [{ propertyName: "div", first: true, predicate: ["div"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-group {{size}}\"\n     [attr.id]=\"axId\"\n     [ngClass]=\"axClass\">\n    <ng-content select=\"ax-label\"></ng-content>\n    <div #div class=\"ax form-item {{size}}\" [ngClass]=\"{'required-state': required}\">\n        <div class=\"ax buttons start-buttons\" #startButtons>\n            <ng-content select=\"ax-button[start]\"></ng-content>\n        </div>\n        <div class=\"content\" #content>\n            <ng-content></ng-content>\n        </div>\n        <div class=\"ax buttons end-buttons\" #endButtons>\n            <ng-content select=\"ax-button[end]\"></ng-content>\n            <ng-content select=\"ax-button\"></ng-content>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXFormGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-form-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%; display:contents;' }, template: "<div class=\"ax form-group {{size}}\">\n    <ng-content select=\"ax-label\"></ng-content>\n    <div #div class=\"ax form-item {{size}}\" [ngClass]=\"{'required-state': required}\">\n        <div class=\"ax buttons start-buttons\" #startButtons>\n            <ng-content select=\"ax-button[start]\"></ng-content>\n        </div>\n        <div class=\"content\" #content>\n            <ng-content></ng-content>\n        </div>\n        <div class=\"ax buttons end-buttons\" #endButtons>\n            <ng-content select=\"ax-button[end]\"></ng-content>\n            <ng-content select=\"ax-button\"></ng-content>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: 'ax-form-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%; display:contents;' }, template: "<div class=\"ax form-group {{size}}\"\n     [attr.id]=\"axId\"\n     [ngClass]=\"axClass\">\n    <ng-content select=\"ax-label\"></ng-content>\n    <div #div class=\"ax form-item {{size}}\" [ngClass]=\"{'required-state': required}\">\n        <div class=\"ax buttons start-buttons\" #startButtons>\n            <ng-content select=\"ax-button[start]\"></ng-content>\n        </div>\n        <div class=\"content\" #content>\n            <ng-content></ng-content>\n        </div>\n        <div class=\"ax buttons end-buttons\" #endButtons>\n            <ng-content select=\"ax-button[end]\"></ng-content>\n            <ng-content select=\"ax-button\"></ng-content>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { size: [{
                 type: Input
             }], div: [{
@@ -6691,11 +6791,11 @@ class AXListComponent extends AXDataListComponent {
     dragDrop(event) {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXListComponent, selector: "ax-list", inputs: { width: "width", height: "height", dropId: "dropId", connectedList: "connectedList", allowMoveItem: "allowMoveItem", dataSource: "dataSource", itemTemplate: "itemTemplate", emptyTemplate: "emptyTemplate", direction: "direction" }, outputs: { onDirectionChanged: "onDirectionChanged" }, queries: [{ propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentItemTemplate", first: true, predicate: ["itemTemplate"], descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true, static: true }, { propertyName: "searchToolbar", first: true, predicate: AXToolbarSearchComponent, descendants: true, static: true }, { propertyName: "viewToolbar", first: true, predicate: AXToolbarListViewComponent, descendants: true, static: true }, { propertyName: "toolbar", first: true, predicate: AXToolbarComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div [style.height]=\"height\" [style.width]=\"width\">\n  <div class=\"ax-list-toolbar\" *ngIf=\"toolbar\">\n    <ng-content select=\"ax-toolbar\"></ng-content>\n  </div>\n  <div class=\"ax-list-container\" cdkDropList [id]=\"dropId\" [cdkDropListConnectedTo]=\"connectedList\"\n    (cdkDropListDropped)=\"dragDrop($event)\" [cdkDropListData]=\"items\"\n    [ngClass]=\"{'overflow-y': direction=='vertical' || direction=='horizontal-wrap','overflow-x': direction=='horizontal' || direction=='vertical-wrap'}\">\n    <div class=\"item-wrapper\" [ngClass]=\"direction\">\n      <!-- <ng-container *ngIf=\"items && items.length; else emptyTemplate\"> -->\n      <ng-container *ngIf=\"allowMoveItem; else elseTemplate\">\n        <div class=\"ax-list-item\" *ngFor=\"let item of items\" cdkDrag [cdkDragData]=\"item\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\n          </ng-container>\n          <div class=\"drop-placeholder\" *cdkDragPlaceholder></div>\n        </div>\n      </ng-container>\n      <ng-template #elseTemplate>\n        <div class=\"ax-list-item\" *ngFor=\"let item of items\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction }\">\n          </ng-container>\n        </div>\n      </ng-template>\n      <!-- </ng-container> -->\n\n    </div>\n    <ng-container *ngIf=\"items==null || items.length==0\">\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\n      </ng-container>\n    </ng-container>\n\n  </div>\n</div>", styles: [".ax-list-container{height:calc(100% - 45px);min-height:50px}.ax-list-container.overflow-x{overflow-x:auto;overflow-y:hidden}.ax-list-container.overflow-y{overflow-y:auto;overflow-x:hidden}.ax-list-container .item-wrapper{height:auto;display:flex}.ax-list-container .cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-list-container .cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.ax-list-container .drop-placeholder{background:var(--gray-light-color);border:dotted 2px var(--border-color);min-height:60px;margin-bottom:5px;transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-list-container .vertical{flex-direction:column}.ax-list-container .vertical-wrap{flex-direction:column;flex-wrap:wrap}.ax-list-container .horizontal-wrap{flex-direction:row;flex-wrap:wrap}.ax-list-container .horizontal{flex-direction:row}.ax-list-toolbar{padding:4px 5px;background:#fff;border:1px solid var(--border-color);border-radius:4px;margin-bottom:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXListComponent, selector: "ax-list", inputs: { width: "width", height: "height", dropId: "dropId", connectedList: "connectedList", allowMoveItem: "allowMoveItem", dataSource: "dataSource", itemTemplate: "itemTemplate", emptyTemplate: "emptyTemplate", direction: "direction" }, outputs: { onDirectionChanged: "onDirectionChanged" }, queries: [{ propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentItemTemplate", first: true, predicate: ["itemTemplate"], descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true, static: true }, { propertyName: "searchToolbar", first: true, predicate: AXToolbarSearchComponent, descendants: true, static: true }, { propertyName: "viewToolbar", first: true, predicate: AXToolbarListViewComponent, descendants: true, static: true }, { propertyName: "toolbar", first: true, predicate: AXToolbarComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div [style.height]=\"height\" [style.width]=\"width\" [attr.id]=\"axId\" [ngClass]=\"axClass\">\n  <div class=\"ax-list-toolbar\" *ngIf=\"toolbar\">\n    <ng-content select=\"ax-toolbar\"></ng-content>\n  </div>\n  <div class=\"ax-list-container\" cdkDropList [id]=\"dropId\" [cdkDropListConnectedTo]=\"connectedList\"\n    (cdkDropListDropped)=\"dragDrop($event)\" [cdkDropListData]=\"items\"\n    [ngClass]=\"{'overflow-y': direction=='vertical' || direction=='horizontal-wrap','overflow-x': direction=='horizontal' || direction=='vertical-wrap'}\">\n    <div class=\"item-wrapper\" [ngClass]=\"direction\">\n      <!-- <ng-container *ngIf=\"items && items.length; else emptyTemplate\"> -->\n      <ng-container *ngIf=\"allowMoveItem; else elseTemplate\">\n        <div class=\"ax-list-item\" *ngFor=\"let item of items\" cdkDrag [cdkDragData]=\"item\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\n          </ng-container>\n          <div class=\"drop-placeholder\" *cdkDragPlaceholder></div>\n        </div>\n      </ng-container>\n      <ng-template #elseTemplate>\n        <div class=\"ax-list-item\" *ngFor=\"let item of items\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction }\">\n          </ng-container>\n        </div>\n      </ng-template>\n      <!-- </ng-container> -->\n\n    </div>\n    <ng-container *ngIf=\"items==null || items.length==0\">\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\n      </ng-container>\n    </ng-container>\n\n  </div>\n</div>\n", styles: [".ax-list-container{height:calc(100% - 45px);min-height:50px}.ax-list-container.overflow-x{overflow-x:auto;overflow-y:hidden}.ax-list-container.overflow-y{overflow-y:auto;overflow-x:hidden}.ax-list-container .item-wrapper{height:auto;display:flex}.ax-list-container .cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-list-container .cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.ax-list-container .drop-placeholder{background:var(--gray-light-color);border:dotted 2px var(--border-color);min-height:60px;margin-bottom:5px;transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-list-container .vertical{flex-direction:column}.ax-list-container .vertical-wrap{flex-direction:column;flex-wrap:wrap}.ax-list-container .horizontal-wrap{flex-direction:row;flex-wrap:wrap}.ax-list-container .horizontal{flex-direction:row}.ax-list-toolbar{padding:4px 5px;background:#fff;border:1px solid var(--border-color);border-radius:4px;margin-bottom:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXListComponent, decorators: [{
             type: Component,
-            args: [{ selector: "ax-list", encapsulation: ViewEncapsulation.None, template: "<div [style.height]=\"height\" [style.width]=\"width\">\n  <div class=\"ax-list-toolbar\" *ngIf=\"toolbar\">\n    <ng-content select=\"ax-toolbar\"></ng-content>\n  </div>\n  <div class=\"ax-list-container\" cdkDropList [id]=\"dropId\" [cdkDropListConnectedTo]=\"connectedList\"\n    (cdkDropListDropped)=\"dragDrop($event)\" [cdkDropListData]=\"items\"\n    [ngClass]=\"{'overflow-y': direction=='vertical' || direction=='horizontal-wrap','overflow-x': direction=='horizontal' || direction=='vertical-wrap'}\">\n    <div class=\"item-wrapper\" [ngClass]=\"direction\">\n      <!-- <ng-container *ngIf=\"items && items.length; else emptyTemplate\"> -->\n      <ng-container *ngIf=\"allowMoveItem; else elseTemplate\">\n        <div class=\"ax-list-item\" *ngFor=\"let item of items\" cdkDrag [cdkDragData]=\"item\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\n          </ng-container>\n          <div class=\"drop-placeholder\" *cdkDragPlaceholder></div>\n        </div>\n      </ng-container>\n      <ng-template #elseTemplate>\n        <div class=\"ax-list-item\" *ngFor=\"let item of items\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction }\">\n          </ng-container>\n        </div>\n      </ng-template>\n      <!-- </ng-container> -->\n\n    </div>\n    <ng-container *ngIf=\"items==null || items.length==0\">\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\n      </ng-container>\n    </ng-container>\n\n  </div>\n</div>", styles: [".ax-list-container{height:calc(100% - 45px);min-height:50px}.ax-list-container.overflow-x{overflow-x:auto;overflow-y:hidden}.ax-list-container.overflow-y{overflow-y:auto;overflow-x:hidden}.ax-list-container .item-wrapper{height:auto;display:flex}.ax-list-container .cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-list-container .cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.ax-list-container .drop-placeholder{background:var(--gray-light-color);border:dotted 2px var(--border-color);min-height:60px;margin-bottom:5px;transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-list-container .vertical{flex-direction:column}.ax-list-container .vertical-wrap{flex-direction:column;flex-wrap:wrap}.ax-list-container .horizontal-wrap{flex-direction:row;flex-wrap:wrap}.ax-list-container .horizontal{flex-direction:row}.ax-list-toolbar{padding:4px 5px;background:#fff;border:1px solid var(--border-color);border-radius:4px;margin-bottom:10px}\n"] }]
+            args: [{ selector: "ax-list", encapsulation: ViewEncapsulation.None, template: "<div [style.height]=\"height\" [style.width]=\"width\" [attr.id]=\"axId\" [ngClass]=\"axClass\">\n  <div class=\"ax-list-toolbar\" *ngIf=\"toolbar\">\n    <ng-content select=\"ax-toolbar\"></ng-content>\n  </div>\n  <div class=\"ax-list-container\" cdkDropList [id]=\"dropId\" [cdkDropListConnectedTo]=\"connectedList\"\n    (cdkDropListDropped)=\"dragDrop($event)\" [cdkDropListData]=\"items\"\n    [ngClass]=\"{'overflow-y': direction=='vertical' || direction=='horizontal-wrap','overflow-x': direction=='horizontal' || direction=='vertical-wrap'}\">\n    <div class=\"item-wrapper\" [ngClass]=\"direction\">\n      <!-- <ng-container *ngIf=\"items && items.length; else emptyTemplate\"> -->\n      <ng-container *ngIf=\"allowMoveItem; else elseTemplate\">\n        <div class=\"ax-list-item\" *ngFor=\"let item of items\" cdkDrag [cdkDragData]=\"item\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\n          </ng-container>\n          <div class=\"drop-placeholder\" *cdkDragPlaceholder></div>\n        </div>\n      </ng-container>\n      <ng-template #elseTemplate>\n        <div class=\"ax-list-item\" *ngFor=\"let item of items\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction }\">\n          </ng-container>\n        </div>\n      </ng-template>\n      <!-- </ng-container> -->\n\n    </div>\n    <ng-container *ngIf=\"items==null || items.length==0\">\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\n      </ng-container>\n    </ng-container>\n\n  </div>\n</div>\n", styles: [".ax-list-container{height:calc(100% - 45px);min-height:50px}.ax-list-container.overflow-x{overflow-x:auto;overflow-y:hidden}.ax-list-container.overflow-y{overflow-y:auto;overflow-x:hidden}.ax-list-container .item-wrapper{height:auto;display:flex}.ax-list-container .cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-list-container .cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.ax-list-container .drop-placeholder{background:var(--gray-light-color);border:dotted 2px var(--border-color);min-height:60px;margin-bottom:5px;transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-list-container .vertical{flex-direction:column}.ax-list-container .vertical-wrap{flex-direction:column;flex-wrap:wrap}.ax-list-container .horizontal-wrap{flex-direction:row;flex-wrap:wrap}.ax-list-container .horizontal{flex-direction:row}.ax-list-toolbar{padding:4px 5px;background:#fff;border:1px solid var(--border-color);border-radius:4px;margin-bottom:10px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { width: [{
                 type: Input
             }], height: [{
@@ -6828,7 +6928,9 @@ class AXPopupComponent extends AXBaseComponent {
     ngAfterViewInit() {
         this._loadingId = this.loadingService.show(this.ref.nativeElement.querySelector('.ax-popup-body-container'));
         if (typeof this.content === 'string') {
-            this.rendererService.findLoadedComponentByRoute(this.content, 20).then(route => {
+            this.rendererService
+                .findLoadedComponentByRoute(this.content, 20)
+                .then((route) => {
                 setTimeout(() => {
                     this.loadComponent(route?.component);
                 }, 300);
@@ -6869,8 +6971,8 @@ class AXPopupComponent extends AXBaseComponent {
                 this.footerButtons = com.getFooterButtons();
             }
             if (com.onFooterButtonsChanged) {
-                this.onFooterButtonsSubscription = com.onFooterButtonsChanged.subscribe(c => {
-                    console.log("onFooterButtonsChanged", c);
+                this.onFooterButtonsSubscription = com.onFooterButtonsChanged.subscribe((c) => {
+                    console.log('onFooterButtonsChanged', c);
                     this.footerButtons = c;
                     this.cdr.detectChanges();
                 });
@@ -6941,11 +7043,11 @@ class AXPopupComponent extends AXBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i1$2.AXRenderService }, { token: AXLoadingService }, { token: i0.ChangeDetectorRef }, { token: i1$2.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXPopupComponent, selector: "ng-component", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "popupBody", first: true, predicate: ["popupBody"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"popup-wrapper\" role=\"dialog\" [attr.aria-labelledby]=\"'dialog'+uid+'_label'\" aria-modal=\"true\" cdkTrapFocus>\n  <div class=\"popup-container {{size}}\" tabindex=\"0\" cdkDrag [class.has-border]=\"!modal\">\n    <div class=\"ax-popup-header\" cdkDragHandle [attr.id]=\"'dialog'+uid+'_label'\">\n      <span>\n        {{title}}\n      </span>\n      <span class=\"ax-buttons-containers\">\n        <i class=\"far fa-expand ax-popup-header-button\" (click)=\"onFullScreen()\" *ngIf=\"maximizable\" tabindex=\"2\"\n          title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"></i>\n        <i class=\"far fa-times ax-popup-header-button\" (click)=\"onCloseClick()\" *ngIf=\"closable\" tabindex=\"1\"\n          title=\"\u0628\u0633\u062A\u0646\"></i>\n      </span>\n    </div>\n    <div class=\"ax-popup-body ax-loading-host\">\n      <div class=\"ax-popup-body-container\">\n        <div [hidden]=\"isLoading\">\n          <ng-template #popupBody></ng-template>\n        </div>\n      </div>\n      <div class=\"ax-popup-footer\" *ngIf=\"!isLoading && footerButtons.length > 0\">\n        <div class=\"ax-buttons-containers\">\n          <ng-container *ngFor=\"let button of footerButtons\">\n            <ax-button [type]=\"button.style\" [icon]=\"button.icon\" [submitBehavior]=\"button.submitBehavior\"\n              [disabled]=\"button.disable\" [cancelBehavior]=\"button.cancelBehavior\"\n              (click)=\"handleFooterButtonClick(button)\">\n              {{button.text}}\n            </ax-button>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".popup-wrapper .popup-container{opacity:1;background:var(--ax-white-color);display:flex;flex-direction:column;border-radius:var(--ax-size-border-radius);-webkit-border-radius:var(--ax-size-border-radius);-moz-border-radius:var(--ax-size-border-radius);overflow:hidden;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));min-height:fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}.popup-wrapper .popup-container:focus{box-shadow:0 0 0 .2rem rgba(var(--outline-color),.8);outline-color:transparent}.popup-wrapper .popup-container.full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh))}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-light-color);color:var(--ax-gray-fore-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1rem;font-weight:500;padding:.5rem .7rem}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers{display:flex;flex-direction:row}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers .ax-popup-header-button{border-radius:50%;font-size:1.1rem;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;cursor:pointer;margin-inline-start:.5em}.popup-wrapper .popup-container .ax-popup-body{position:relative;overflow:hidden;display:flex;flex-direction:column}.popup-wrapper .popup-container .ax-popup-body .ax-popup-body-container{overflow:auto}.popup-wrapper .popup-container .ax-popup-body .ax-footer{background:var(--ax-white-color);border-top:1px solid;border-color:var(--ax-border-color);margin-block-start:.5em;padding:.4em .5em;display:flex;align-items:center}.popup-wrapper .popup-container .ax-popup-body .ax-footer .button{min-width:100px;margin-inline-end:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer{background-color:var(--ax-white-color);display:flex;flex-direction:row;align-items:center;padding:.5em;border-top:1px solid var(--ax-border-color);margin-block-start:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers{flex:1;max-width:fit-content;max-width:-moz-fit-content}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers .button{margin-inline-end:.5em;min-width:80px}@media all and (min-width: 1280px){.popup-wrapper .popup-container.sm{width:420px!important}.popup-wrapper .popup-container.md{width:680px!important}.popup-wrapper .popup-container.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:700px!important}}@media (max-width: 599px){.popup-wrapper .popup-container.sm,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:93vw!important;height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXPopupComponent, selector: "ng-component", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "popupBody", first: true, predicate: ["popupBody"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"popup-wrapper\" role=\"dialog\" [attr.aria-labelledby]=\"'dialog'+uid+'_label'\" aria-modal=\"true\" cdkTrapFocus\n  [attr.id]=\"axId + '-popup-wrapper'\" [ngClass]=\"axClass\">\n\n  <div class=\"popup-container {{size}}\" tabindex=\"0\" cdkDrag [class.has-border]=\"!modal\"\n    [attr.id]=\"axId + '-popup-container'\">\n\n    <div class=\"ax-popup-header\" cdkDragHandle [attr.id]=\"'dialog'+uid+'_label'\">\n\n      <span>\n        {{title}}\n      </span>\n\n      <span class=\"ax-buttons-containers\">\n        <i class=\"far fa-expand ax-popup-header-button\" (click)=\"onFullScreen()\" *ngIf=\"maximizable\" tabindex=\"2\"\n          title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\" [attr.id]=\"axId + '-fullscreen-button'\"></i>\n\n        <i class=\"far fa-times ax-popup-header-button\" (click)=\"onCloseClick()\" *ngIf=\"closable\" tabindex=\"1\"\n          title=\"\u0628\u0633\u062A\u0646\" [attr.id]=\"axId + '-close-button'\"></i>\n      </span>\n    </div>\n\n    <div class=\"ax-popup-body ax-loading-host\" [attr.id]=\"axId + '-popup-body'\">\n      <div class=\"ax-popup-body-container\">\n        <div [hidden]=\"isLoading\">\n          <ng-template #popupBody></ng-template>\n        </div>\n      </div>\n\n      <div class=\"ax-popup-footer\" *ngIf=\"!isLoading && footerButtons.length > 0\" [attr.id]=\"axId + '-popup-footer'\">\n        <div class=\"ax-buttons-containers\">\n          <ng-container *ngFor=\"let button of footerButtons\">\n            <ax-button [type]=\"button.style\" [icon]=\"button.icon\" [submitBehavior]=\"button.submitBehavior\"\n              [disabled]=\"button.disable\" [cancelBehavior]=\"button.cancelBehavior\"\n              (click)=\"handleFooterButtonClick(button)\" [attr.id]=\"axId + '-footer-button-' + button.text\">\n              {{button.text}}\n            </ax-button>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".popup-wrapper .popup-container{opacity:1;background:var(--ax-white-color);display:flex;flex-direction:column;border-radius:var(--ax-size-border-radius);-webkit-border-radius:var(--ax-size-border-radius);-moz-border-radius:var(--ax-size-border-radius);overflow:hidden;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));min-height:fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}.popup-wrapper .popup-container:focus{box-shadow:0 0 0 .2rem rgba(var(--outline-color),.8);outline-color:transparent}.popup-wrapper .popup-container.full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh))}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-light-color);color:var(--ax-gray-fore-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1rem;font-weight:500;padding:.5rem .7rem}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers{display:flex;flex-direction:row}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers .ax-popup-header-button{border-radius:50%;font-size:1.1rem;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;cursor:pointer;margin-inline-start:.5em}.popup-wrapper .popup-container .ax-popup-body{position:relative;overflow:hidden;display:flex;flex-direction:column}.popup-wrapper .popup-container .ax-popup-body .ax-popup-body-container{overflow:auto}.popup-wrapper .popup-container .ax-popup-body .ax-footer{background:var(--ax-white-color);border-top:1px solid;border-color:var(--ax-border-color);margin-block-start:.5em;padding:.4em .5em;display:flex;align-items:center}.popup-wrapper .popup-container .ax-popup-body .ax-footer .button{min-width:100px;margin-inline-end:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer{background-color:var(--ax-white-color);display:flex;flex-direction:row;align-items:center;padding:.5em;border-top:1px solid var(--ax-border-color);margin-block-start:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers{flex:1;max-width:fit-content;max-width:-moz-fit-content}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers .button{margin-inline-end:.5em;min-width:80px}@media all and (min-width: 1280px){.popup-wrapper .popup-container.sm{width:420px!important}.popup-wrapper .popup-container.md{width:680px!important}.popup-wrapper .popup-container.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:700px!important}}@media (max-width: 599px){.popup-wrapper .popup-container.sm,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:93vw!important;height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, template: "<div class=\"popup-wrapper\" role=\"dialog\" [attr.aria-labelledby]=\"'dialog'+uid+'_label'\" aria-modal=\"true\" cdkTrapFocus>\n  <div class=\"popup-container {{size}}\" tabindex=\"0\" cdkDrag [class.has-border]=\"!modal\">\n    <div class=\"ax-popup-header\" cdkDragHandle [attr.id]=\"'dialog'+uid+'_label'\">\n      <span>\n        {{title}}\n      </span>\n      <span class=\"ax-buttons-containers\">\n        <i class=\"far fa-expand ax-popup-header-button\" (click)=\"onFullScreen()\" *ngIf=\"maximizable\" tabindex=\"2\"\n          title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"></i>\n        <i class=\"far fa-times ax-popup-header-button\" (click)=\"onCloseClick()\" *ngIf=\"closable\" tabindex=\"1\"\n          title=\"\u0628\u0633\u062A\u0646\"></i>\n      </span>\n    </div>\n    <div class=\"ax-popup-body ax-loading-host\">\n      <div class=\"ax-popup-body-container\">\n        <div [hidden]=\"isLoading\">\n          <ng-template #popupBody></ng-template>\n        </div>\n      </div>\n      <div class=\"ax-popup-footer\" *ngIf=\"!isLoading && footerButtons.length > 0\">\n        <div class=\"ax-buttons-containers\">\n          <ng-container *ngFor=\"let button of footerButtons\">\n            <ax-button [type]=\"button.style\" [icon]=\"button.icon\" [submitBehavior]=\"button.submitBehavior\"\n              [disabled]=\"button.disable\" [cancelBehavior]=\"button.cancelBehavior\"\n              (click)=\"handleFooterButtonClick(button)\">\n              {{button.text}}\n            </ax-button>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".popup-wrapper .popup-container{opacity:1;background:var(--ax-white-color);display:flex;flex-direction:column;border-radius:var(--ax-size-border-radius);-webkit-border-radius:var(--ax-size-border-radius);-moz-border-radius:var(--ax-size-border-radius);overflow:hidden;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));min-height:fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}.popup-wrapper .popup-container:focus{box-shadow:0 0 0 .2rem rgba(var(--outline-color),.8);outline-color:transparent}.popup-wrapper .popup-container.full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh))}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-light-color);color:var(--ax-gray-fore-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1rem;font-weight:500;padding:.5rem .7rem}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers{display:flex;flex-direction:row}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers .ax-popup-header-button{border-radius:50%;font-size:1.1rem;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;cursor:pointer;margin-inline-start:.5em}.popup-wrapper .popup-container .ax-popup-body{position:relative;overflow:hidden;display:flex;flex-direction:column}.popup-wrapper .popup-container .ax-popup-body .ax-popup-body-container{overflow:auto}.popup-wrapper .popup-container .ax-popup-body .ax-footer{background:var(--ax-white-color);border-top:1px solid;border-color:var(--ax-border-color);margin-block-start:.5em;padding:.4em .5em;display:flex;align-items:center}.popup-wrapper .popup-container .ax-popup-body .ax-footer .button{min-width:100px;margin-inline-end:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer{background-color:var(--ax-white-color);display:flex;flex-direction:row;align-items:center;padding:.5em;border-top:1px solid var(--ax-border-color);margin-block-start:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers{flex:1;max-width:fit-content;max-width:-moz-fit-content}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers .button{margin-inline-end:.5em;min-width:80px}@media all and (min-width: 1280px){.popup-wrapper .popup-container.sm{width:420px!important}.popup-wrapper .popup-container.md{width:680px!important}.popup-wrapper .popup-container.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:700px!important}}@media (max-width: 599px){.popup-wrapper .popup-container.sm,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:93vw!important;height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}}\n"] }]
+            args: [{ encapsulation: ViewEncapsulation.None, template: "<div class=\"popup-wrapper\" role=\"dialog\" [attr.aria-labelledby]=\"'dialog'+uid+'_label'\" aria-modal=\"true\" cdkTrapFocus\n  [attr.id]=\"axId + '-popup-wrapper'\" [ngClass]=\"axClass\">\n\n  <div class=\"popup-container {{size}}\" tabindex=\"0\" cdkDrag [class.has-border]=\"!modal\"\n    [attr.id]=\"axId + '-popup-container'\">\n\n    <div class=\"ax-popup-header\" cdkDragHandle [attr.id]=\"'dialog'+uid+'_label'\">\n\n      <span>\n        {{title}}\n      </span>\n\n      <span class=\"ax-buttons-containers\">\n        <i class=\"far fa-expand ax-popup-header-button\" (click)=\"onFullScreen()\" *ngIf=\"maximizable\" tabindex=\"2\"\n          title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\" [attr.id]=\"axId + '-fullscreen-button'\"></i>\n\n        <i class=\"far fa-times ax-popup-header-button\" (click)=\"onCloseClick()\" *ngIf=\"closable\" tabindex=\"1\"\n          title=\"\u0628\u0633\u062A\u0646\" [attr.id]=\"axId + '-close-button'\"></i>\n      </span>\n    </div>\n\n    <div class=\"ax-popup-body ax-loading-host\" [attr.id]=\"axId + '-popup-body'\">\n      <div class=\"ax-popup-body-container\">\n        <div [hidden]=\"isLoading\">\n          <ng-template #popupBody></ng-template>\n        </div>\n      </div>\n\n      <div class=\"ax-popup-footer\" *ngIf=\"!isLoading && footerButtons.length > 0\" [attr.id]=\"axId + '-popup-footer'\">\n        <div class=\"ax-buttons-containers\">\n          <ng-container *ngFor=\"let button of footerButtons\">\n            <ax-button [type]=\"button.style\" [icon]=\"button.icon\" [submitBehavior]=\"button.submitBehavior\"\n              [disabled]=\"button.disable\" [cancelBehavior]=\"button.cancelBehavior\"\n              (click)=\"handleFooterButtonClick(button)\" [attr.id]=\"axId + '-footer-button-' + button.text\">\n              {{button.text}}\n            </ax-button>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".popup-wrapper .popup-container{opacity:1;background:var(--ax-white-color);display:flex;flex-direction:column;border-radius:var(--ax-size-border-radius);-webkit-border-radius:var(--ax-size-border-radius);-moz-border-radius:var(--ax-size-border-radius);overflow:hidden;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));min-height:fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}.popup-wrapper .popup-container:focus{box-shadow:0 0 0 .2rem rgba(var(--outline-color),.8);outline-color:transparent}.popup-wrapper .popup-container.full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh))}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-light-color);color:var(--ax-gray-fore-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1rem;font-weight:500;padding:.5rem .7rem}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers{display:flex;flex-direction:row}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers .ax-popup-header-button{border-radius:50%;font-size:1.1rem;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;cursor:pointer;margin-inline-start:.5em}.popup-wrapper .popup-container .ax-popup-body{position:relative;overflow:hidden;display:flex;flex-direction:column}.popup-wrapper .popup-container .ax-popup-body .ax-popup-body-container{overflow:auto}.popup-wrapper .popup-container .ax-popup-body .ax-footer{background:var(--ax-white-color);border-top:1px solid;border-color:var(--ax-border-color);margin-block-start:.5em;padding:.4em .5em;display:flex;align-items:center}.popup-wrapper .popup-container .ax-popup-body .ax-footer .button{min-width:100px;margin-inline-end:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer{background-color:var(--ax-white-color);display:flex;flex-direction:row;align-items:center;padding:.5em;border-top:1px solid var(--ax-border-color);margin-block-start:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers{flex:1;max-width:fit-content;max-width:-moz-fit-content}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers .button{margin-inline-end:.5em;min-width:80px}@media all and (min-width: 1280px){.popup-wrapper .popup-container.sm{width:420px!important}.popup-wrapper .popup-container.md{width:680px!important}.popup-wrapper .popup-container.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:700px!important}}@media (max-width: 599px){.popup-wrapper .popup-container.sm,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:93vw!important;height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.ElementRef }, { type: i1$2.AXRenderService }, { type: AXLoadingService }, { type: i0.ChangeDetectorRef }, { type: i1$2.AXPlatform }], propDecorators: { popupBody: [{
                 type: ViewChild,
                 args: ['popupBody', { read: ViewContainerRef, static: true }]
@@ -6960,13 +7062,15 @@ class AXPopupService {
     constructor(overlayService) {
         this.overlayService = overlayService;
     }
-    open(arg1, arg2) {
+    open(arg1, arg2, axId, axClass) {
         const options = {
             closable: true,
             size: 'md',
             maximizable: false,
             footerButtons: [],
             modal: true,
+            axId: axId || null,
+            axClass: axClass || null
         };
         if (typeof arg2 === 'string') {
             options.title = arg2;
@@ -6982,6 +7086,8 @@ class AXPopupService {
         });
         const popup = com.instance;
         popup.content = arg1;
+        popup.axId = options.axId;
+        popup.axClass = options.axClass;
         popup[TAB_META_KEY] = {};
         if (options.size) {
             popup.size = options.size;
@@ -7427,6 +7533,8 @@ class AXFieldsetComponent {
     size = "md";
     caption = '';
     allowCollapse = false;
+    axId;
+    axClass;
     collapsed = false;
     toggle() {
         if (this.allowCollapse) {
@@ -7434,7 +7542,7 @@ class AXFieldsetComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXFieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXFieldsetComponent, selector: "ax-fieldset", inputs: { size: "size", caption: "caption", allowCollapse: "allowCollapse" }, ngImport: i0, template: "<fieldset class=\"ax fieldset {{size}}\">\n    <legend (click)=\"toggle()\"> {{ caption }} </legend>\n    <div class=\"fieldset-content\" [@visibilityChanged]=\"collapsed ? 'hidden' : 'shown'\">\n        <ng-content></ng-content>\n    </div>\n</fieldset>", animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXFieldsetComponent, selector: "ax-fieldset", inputs: { size: "size", caption: "caption", allowCollapse: "allowCollapse", axId: "axId", axClass: "axClass" }, ngImport: i0, template: "<fieldset class=\"ax fieldset {{size}}\"\n          [attr.id]=\"axId\"\n          [ngClass]=\"axClass\">\n    <legend (click)=\"toggle()\"> {{ caption }} </legend>\n    <div class=\"fieldset-content\" [@visibilityChanged]=\"collapsed ? 'hidden' : 'shown'\">\n        <ng-content></ng-content>\n    </div>\n</fieldset>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
             trigger('visibilityChanged', [
                 state('shown', style({
                     height: '*',
@@ -7468,13 +7576,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                             transition('shown => hidden', animate('200ms')),
                             transition('hidden => shown', animate('200ms'))
                         ])
-                    ], template: "<fieldset class=\"ax fieldset {{size}}\">\n    <legend (click)=\"toggle()\"> {{ caption }} </legend>\n    <div class=\"fieldset-content\" [@visibilityChanged]=\"collapsed ? 'hidden' : 'shown'\">\n        <ng-content></ng-content>\n    </div>\n</fieldset>" }]
+                    ], template: "<fieldset class=\"ax fieldset {{size}}\"\n          [attr.id]=\"axId\"\n          [ngClass]=\"axClass\">\n    <legend (click)=\"toggle()\"> {{ caption }} </legend>\n    <div class=\"fieldset-content\" [@visibilityChanged]=\"collapsed ? 'hidden' : 'shown'\">\n        <ng-content></ng-content>\n    </div>\n</fieldset>\n" }]
         }], propDecorators: { size: [{
                 type: Input
             }], caption: [{
                 type: Input
             }], allowCollapse: [{
                 type: Input
+            }], axId: [{
+                type: Input
+            }], axClass: [{
+                type: Input
             }] } });
 
 class AXFieldsetModule {
@@ -7499,11 +7611,11 @@ class AXLabelComponent extends AXBaseComponent {
     size = 'md';
     ngOnInit() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXLabelComponent, selector: "ax-label", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-group-label {{size}}\">\n    <label>\n        <ng-content></ng-content>\n    </label>\n</div>", encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXLabelComponent, selector: "ax-label", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-group-label {{size}}\" [attr.id]=\"axId\" [ngClass]=\"axClass\">\n    <label>\n        <ng-content></ng-content>\n    </label>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-label', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax form-group-label {{size}}\">\n    <label>\n        <ng-content></ng-content>\n    </label>\n</div>" }]
+            args: [{ selector: 'ax-label', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax form-group-label {{size}}\" [attr.id]=\"axId\" [ngClass]=\"axClass\">\n    <label>\n        <ng-content></ng-content>\n    </label>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { size: [{
                 type: Input
             }] } });
@@ -7531,6 +7643,8 @@ class AXLoadingPanelComponent {
         this.ref = ref;
     }
     visible = false;
+    axId;
+    axClass;
     ngOnInit() {
     }
     ngAfterViewInit() {
@@ -7543,12 +7657,12 @@ class AXLoadingPanelComponent {
         this.visible = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXLoadingPanelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXLoadingPanelComponent, selector: "ax-loading-panel", inputs: { visible: "visible" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXLoadingPanelComponent, selector: "ax-loading-panel", inputs: { visible: "visible", axId: "axId", axClass: "axClass" }, ngImport: i0, template: `
     <div onclick="return false;" class="ax ax-loading-panel ax-overlay-wrapper ax-overlay-modal ax-loading-overlay" *ngIf="visible" >
         <ax-loading-indicator tabindex="0" cdkTrapFocus>
         </ax-loading-indicator>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: AXLoadingIndicatorComponent, selector: "ax-loading-indicator", inputs: ["size"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: AXLoadingIndicatorComponent, selector: "ax-loading-indicator", inputs: ["size", "axId", "axClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXLoadingPanelComponent, decorators: [{
             type: Component,
@@ -7563,6 +7677,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { visible: [{
                 type: Input
+            }], axId: [{
+                type: Input
+            }], axClass: [{
+                type: Input
             }] } });
 
 class AXLoadingModule {
@@ -8258,13 +8376,13 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.7", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, showSeparator: { classPropertyName: "showSeparator", publicName: "showSeparator", isSignal: true, isRequired: false, transformFunction: null }, showCurrency: { classPropertyName: "showCurrency", publicName: "showCurrency", isSignal: false, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: false, isRequired: false, transformFunction: null }, scrollWeel: { classPropertyName: "scrollWeel", publicName: "scrollWeel", isSignal: false, isRequired: false, transformFunction: null }, showDoubleCounter: { classPropertyName: "showDoubleCounter", publicName: "showDoubleCounter", isSignal: false, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: false, isRequired: false, transformFunction: null }, intStep: { classPropertyName: "intStep", publicName: "intStep", isSignal: false, isRequired: false, transformFunction: null }, decimalNumber: { classPropertyName: "decimalNumber", publicName: "decimalNumber", isSignal: false, isRequired: false, transformFunction: null }, customStep: { classPropertyName: "customStep", publicName: "customStep", isSignal: false, isRequired: false, transformFunction: null } }, host: { styleAttribute: "width: 100%" }, providers: [
             { provide: AXValidatableComponent, useExisting: AXNumberBoxComponent },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n            [class.icon]=\"icon\">\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input type=\"text\" class=\"ax {{size}}\" [maxlength]=\"calcSeparator(maxLength)\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\"\n                [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\n                [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\"\n                (keypress)=\"handleKeyPress($event)\" (ngModelChange)=\"this.userQuestionUpdate.next($event)\"\n                (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick()\" (keyup)=\"handleKeyUp($event)\">\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\"\n            (click)=\"clear()\"></ax-button>\n            <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n        <div class=\"arrow-number\" *ngIf=\"showCounter && !showDoubleCounter && !readonly\" >\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\"\n                (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\"\n                (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n        </div>\n    </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"axId ? axId : uid\" [ngClass]=\"axClass\" #fc>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\"></ng-content>\n        <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input type=\"text\" class=\"ax {{size}}\" [maxlength]=\"calcSeparator(maxLength)\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\"\n                [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\n                [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\"\n                (keypress)=\"handleKeyPress($event)\" (ngModelChange)=\"this.userQuestionUpdate.next($event)\"\n                (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick()\" (keyup)=\"handleKeyUp($event)\">\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"></ax-button>\n        <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n        <ng-content select=\"[end]\"></ng-content>\n        <div class=\"arrow-number\" *ngIf=\"showCounter && !showDoubleCounter && !readonly\">\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\" (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\" (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-number-box', changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [
                         { provide: AXValidatableComponent, useExisting: AXNumberBoxComponent },
-                    ], template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n            [class.icon]=\"icon\">\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input type=\"text\" class=\"ax {{size}}\" [maxlength]=\"calcSeparator(maxLength)\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\"\n                [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\n                [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\"\n                (keypress)=\"handleKeyPress($event)\" (ngModelChange)=\"this.userQuestionUpdate.next($event)\"\n                (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick()\" (keyup)=\"handleKeyUp($event)\">\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\"\n            (click)=\"clear()\"></ax-button>\n            <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n        <div class=\"arrow-number\" *ngIf=\"showCounter && !showDoubleCounter && !readonly\" >\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\"\n                (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\"\n                (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n        </div>\n    </div>\n\n</div>\n" }]
+                    ], template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"axId ? axId : uid\" [ngClass]=\"axClass\" #fc>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\"></ng-content>\n        <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input type=\"text\" class=\"ax {{size}}\" [maxlength]=\"calcSeparator(maxLength)\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\"\n                [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\n                [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\"\n                (keypress)=\"handleKeyPress($event)\" (ngModelChange)=\"this.userQuestionUpdate.next($event)\"\n                (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick()\" (keyup)=\"handleKeyUp($event)\">\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"></ax-button>\n        <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n        <ng-content select=\"[end]\"></ng-content>\n        <div class=\"arrow-number\" *ngIf=\"showCounter && !showDoubleCounter && !readonly\">\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\" (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\" (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { min: [{
                 type: Input
             }], max: [{
@@ -8379,11 +8497,11 @@ class AXPasswordBoxComponent extends AXBaseTextComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXPasswordBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXPasswordBoxComponent, selector: "ax-password-box", host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXPasswordBoxComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <i class=\"form-item-icon {{icon}}\" *ngIf=\"icon\"></i>\n\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input [type]=\"type\" class=\"ax {{size}}\" value=\"{{value}}\" placeholder=\"{{placeholder}}\"\n                [readonly]=\"readonly\" [disabled]=\"disabled\"\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\">\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" icon=\"fas fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\"></ax-button>\n        <ax-button [disabled]=\"disabled\" [icon]=\"eyeIcon\" type=\"light blank\" size=\"{{size}}\" (click)=\"handleShowPassword()\"  [tabIndex]=\"-1\">\n            <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\n        </ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXPasswordBoxComponent, selector: "ax-password-box", host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXPasswordBoxComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"axId ? axId : uid\" [ngClass]=\"axClass\">\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\"></ng-content>\n        <i class=\"form-item-icon {{icon}}\" *ngIf=\"icon\"></i>\n    </div>\n\n    <div class=\"content\" #content>\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input [type]=\"type\" class=\"ax {{size}}\" \n                [value]=\"value\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" [disabled]=\"disabled\"\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\">\n        </div>\n    </div>\n\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" icon=\"fas fa-times\" type=\"danger blank\" (click)=\"clear()\" [tabIndex]=\"-1\"></ax-button>\n        <ax-button [disabled]=\"disabled\" [icon]=\"eyeIcon\" type=\"light blank\" size=\"{{size}}\" \n            (click)=\"handleShowPassword()\" [tabIndex]=\"-1\">\n        </ax-button>\n        <ng-content select=\"[end]\"></ng-content>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXPasswordBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-password-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXPasswordBoxComponent }], template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <i class=\"form-item-icon {{icon}}\" *ngIf=\"icon\"></i>\n\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input [type]=\"type\" class=\"ax {{size}}\" value=\"{{value}}\" placeholder=\"{{placeholder}}\"\n                [readonly]=\"readonly\" [disabled]=\"disabled\"\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\">\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" icon=\"fas fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\"></ax-button>\n        <ax-button [disabled]=\"disabled\" [icon]=\"eyeIcon\" type=\"light blank\" size=\"{{size}}\" (click)=\"handleShowPassword()\"  [tabIndex]=\"-1\">\n            <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\n        </ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'ax-password-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXPasswordBoxComponent }], template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"axId ? axId : uid\" [ngClass]=\"axClass\">\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\"></ng-content>\n        <i class=\"form-item-icon {{icon}}\" *ngIf=\"icon\"></i>\n    </div>\n\n    <div class=\"content\" #content>\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input [type]=\"type\" class=\"ax {{size}}\" \n                [value]=\"value\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" [disabled]=\"disabled\"\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\">\n        </div>\n    </div>\n\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" icon=\"fas fa-times\" type=\"danger blank\" (click)=\"clear()\" [tabIndex]=\"-1\"></ax-button>\n        <ax-button [disabled]=\"disabled\" [icon]=\"eyeIcon\" type=\"light blank\" size=\"{{size}}\" \n            (click)=\"handleShowPassword()\" [tabIndex]=\"-1\">\n        </ax-button>\n        <ng-content select=\"[end]\"></ng-content>\n    </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }] });
 
 const COMPONENT$2 = [AXPasswordBoxComponent];
@@ -8421,11 +8539,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
 class AXProgressBarComponent extends AXBaseComponent {
     progress = 0;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXProgressBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXProgressBarComponent, selector: "ax-progress-bar", inputs: { progress: "progress" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax progress\">\n  <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"75\" aria-valuemin=\"0\"\n    aria-valuemax=\"100\" [ngStyle]=\"{'width.%': progress}\">\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXProgressBarComponent, selector: "ax-progress-bar", inputs: { progress: "progress" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax progress\" [attr.id]=\"axId + '-progress'\" [ngClass]=\"axClass\">\n  <div\n    class=\"progress-bar\"\n    role=\"progressbar\"\n    aria-valuenow=\"75\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [ngStyle]=\"{ 'width.%': progress }\"\n    [attr.id]=\"axId + '-progress-bar'\"\n  ></div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-progress-bar', template: "<div class=\"ax progress\">\n  <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"75\" aria-valuemin=\"0\"\n    aria-valuemax=\"100\" [ngStyle]=\"{'width.%': progress}\">\n  </div>\n</div>" }]
+            args: [{ selector: 'ax-progress-bar', template: "<div class=\"ax progress\" [attr.id]=\"axId + '-progress'\" [ngClass]=\"axClass\">\n  <div\n    class=\"progress-bar\"\n    role=\"progressbar\"\n    aria-valuenow=\"75\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [ngStyle]=\"{ 'width.%': progress }\"\n    [attr.id]=\"axId + '-progress-bar'\"\n  ></div>\n</div>\n" }]
         }], propDecorators: { progress: [{
                 type: Input
             }] } });
@@ -8596,11 +8714,11 @@ class AXSearchBoxComponent extends AXBaseTextComponent {
         // this.searchChangeObserver.next(this.text);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSearchBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: { placeholder: "placeholder", onDemandTranslate: "onDemandTranslate", text: "text", delay: "delay" }, outputs: { textChanged: "textChanged", onButtonClick: "onButtonClick" }, host: { styleAttribute: "width: 100%" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <i class=\"form-item-icon {{icon}}\" *ngIf=\"icon\"></i>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n            [class.icon]=\"icon\">\n            <input #input type=\"text\" class=\"ax {{size}}\" [(ngModel)]=\"value\"\n                (input)=\"onSearchChanged($event.target.value)\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\n                [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\"\n                (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" (keyup)=\"handleKeyEvent($event)\"\n                (keydown)=\"handleKeyEvent($event)\">\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button [size]=\"size\" *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\">\n        </ax-button>\n        <ax-button [size]=\"size\" type=\"light blank\" icon=\"far fa-search\" end (click)=\"click($event)\"  [tabIndex]=\"-1\">\n        </ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: { placeholder: "placeholder", onDemandTranslate: "onDemandTranslate", text: "text", delay: "delay" }, outputs: { textChanged: "textChanged", onButtonClick: "onButtonClick" }, host: { styleAttribute: "width: 100%" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ax form-item\"\n  [class.disabled]=\"disabled\"\n  [attr.id]=\"axId ? axId : uid\"\n  [ngClass]=\"axClass\"\n>\n  <div class=\"ax items-wrapper\" [attr.id]=\"axId + '-wrapper-start'\">\n    <ng-content select=\"[start]\"></ng-content>\n    <i\n      class=\"form-item-icon {{icon}}\"\n      *ngIf=\"icon\"\n      [attr.id]=\"axId + '-icon'\"\n    ></i>\n  </div>\n\n  <div class=\"content\" #content [attr.id]=\"axId + '-content'\">\n    <div\n      class=\"ax input form-control {{size}}\"\n      [class.disabled]=\"disabled\"\n      [class.readonly]=\"readonly\"\n      [class.icon]=\"icon\"\n      [attr.id]=\"axId + '-input-container'\"\n    >\n      <input\n        #input\n        type=\"text\"\n        class=\"ax {{size}}\"\n        [(ngModel)]=\"value\"\n        (input)=\"onSearchChanged($event.target.value)\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [ngClass]=\"setTextAlign()\"\n        [class.clear]=\"value && allowClear\"\n        (focus)=\"handleInputFocus($event)\"\n        (blur)=\"handleInputBlur($event)\"\n        (keyup)=\"handleKeyEvent($event)\"\n        (keydown)=\"handleKeyEvent($event)\"\n        [attr.id]=\"axId + '-input'\"\n      />\n    </div>\n  </div>\n\n  <div class=\"ax items-wrapper\" [attr.id]=\"axId + '-wrapper-end'\">\n    <ax-button\n      [size]=\"size\"\n      *ngIf=\"value && allowClear\"\n      icon=\"far fa-times\"\n      type=\"danger blank\"\n      (click)=\"clear()\"\n      [tabIndex]=\"-1\"\n      [attr.id]=\"axId + '-clear-button'\"\n    >\n    </ax-button>\n    <ax-button\n      [size]=\"size\"\n      type=\"light blank\"\n      icon=\"far fa-search\"\n      end\n      (click)=\"click($event)\"\n      [tabIndex]=\"-1\"\n      [attr.id]=\"axId + '-search-button'\"\n    >\n    </ax-button>\n    <ng-content select=\"[end]\"></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSearchBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-search-box', host: { style: 'width: 100%' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <i class=\"form-item-icon {{icon}}\" *ngIf=\"icon\"></i>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n            [class.icon]=\"icon\">\n            <input #input type=\"text\" class=\"ax {{size}}\" [(ngModel)]=\"value\"\n                (input)=\"onSearchChanged($event.target.value)\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\n                [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\"\n                (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" (keyup)=\"handleKeyEvent($event)\"\n                (keydown)=\"handleKeyEvent($event)\">\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button [size]=\"size\" *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\">\n        </ax-button>\n        <ax-button [size]=\"size\" type=\"light blank\" icon=\"far fa-search\" end (click)=\"click($event)\"  [tabIndex]=\"-1\">\n        </ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>" }]
+            args: [{ selector: 'ax-search-box', host: { style: 'width: 100%' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ax form-item\"\n  [class.disabled]=\"disabled\"\n  [attr.id]=\"axId ? axId : uid\"\n  [ngClass]=\"axClass\"\n>\n  <div class=\"ax items-wrapper\" [attr.id]=\"axId + '-wrapper-start'\">\n    <ng-content select=\"[start]\"></ng-content>\n    <i\n      class=\"form-item-icon {{icon}}\"\n      *ngIf=\"icon\"\n      [attr.id]=\"axId + '-icon'\"\n    ></i>\n  </div>\n\n  <div class=\"content\" #content [attr.id]=\"axId + '-content'\">\n    <div\n      class=\"ax input form-control {{size}}\"\n      [class.disabled]=\"disabled\"\n      [class.readonly]=\"readonly\"\n      [class.icon]=\"icon\"\n      [attr.id]=\"axId + '-input-container'\"\n    >\n      <input\n        #input\n        type=\"text\"\n        class=\"ax {{size}}\"\n        [(ngModel)]=\"value\"\n        (input)=\"onSearchChanged($event.target.value)\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [ngClass]=\"setTextAlign()\"\n        [class.clear]=\"value && allowClear\"\n        (focus)=\"handleInputFocus($event)\"\n        (blur)=\"handleInputBlur($event)\"\n        (keyup)=\"handleKeyEvent($event)\"\n        (keydown)=\"handleKeyEvent($event)\"\n        [attr.id]=\"axId + '-input'\"\n      />\n    </div>\n  </div>\n\n  <div class=\"ax items-wrapper\" [attr.id]=\"axId + '-wrapper-end'\">\n    <ax-button\n      [size]=\"size\"\n      *ngIf=\"value && allowClear\"\n      icon=\"far fa-times\"\n      type=\"danger blank\"\n      (click)=\"clear()\"\n      [tabIndex]=\"-1\"\n      [attr.id]=\"axId + '-clear-button'\"\n    >\n    </ax-button>\n    <ax-button\n      [size]=\"size\"\n      type=\"light blank\"\n      icon=\"far fa-search\"\n      end\n      (click)=\"click($event)\"\n      [tabIndex]=\"-1\"\n      [attr.id]=\"axId + '-search-button'\"\n    >\n    </ax-button>\n    <ng-content select=\"[end]\"></ng-content>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { textChanged: [{
                 type: Output
             }], onButtonClick: [{
@@ -9628,13 +9746,13 @@ class AXSelectBoxComponent extends AXValidatableComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { showDropDownButton: "showDropDownButton", rowInputTemplate: "rowInputTemplate", showCheckBox: "showCheckBox", readonly: "readonly", rtl: "rtl", disabled: "disabled", placeholder: "placeholder", size: "size", allowNull: "allowNull", textAlign: "textAlign", bufferSize: "bufferSize", remoteOperation: "remoteOperation", fitParent: "fitParent", dropdownWidth: "dropdownWidth", multiLine: "multiLine", onDemandTranslate: "onDemandTranslate", dataSource: "dataSource", validation: "validation", disabledCallback: "disabledCallback", allowSearch: "allowSearch", textField: "textField", valueField: "valueField", disabledField: "disabledField", mode: "mode", items: "items", selectedItems: "selectedItems", selectedValues: "selectedValues" }, outputs: { dropdownToggle: "dropdownToggle", itemsChange: "itemsChange", onBlur: "onBlur", onFocus: "onFocus", selectionChanged: "selectionChanged", selectedItemsChange: "selectedItemsChange", selectedValuesChange: "selectedValuesChange" }, host: { styleAttribute: "width: 100%" }, providers: [
             { provide: AXValidatableComponent, useExisting: AXSelectBoxComponent },
-        ], queries: [{ propertyName: "rowTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "span", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }, { propertyName: "serchBox", first: true, predicate: ["serchBox"], descendants: true }, { propertyName: "textBoxSelectBox", first: true, predicate: ["textBoxSelectBox"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["d"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down\n  #d\n  [size]=\"size\"\n  [fitParent]=\"fitParent\"\n  [dropdownWidth]=\"dropdownWidth\"\n  [rtl]=\"rtl\"\n  [showDropDownButton]=\"showDropDownButton\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  (dropdownToggle)=\"dropdownToggleSelecBox($event)\"\n>\n  <ng-container start>\n    <ng-content select=\"[start]\"> </ng-content>\n  </ng-container>\n  <ng-container header>\n    <div\n      class=\"ax chips-container\"\n      [class.multiline]=\"multiLine\"\n      [style.padding]=\"selectedItems.length && multiLine ? '0.25rem' : ''\"\n    >\n      <div\n        class=\"chips\"\n        [class.chips-blank]=\"mode === 'single'\"\n        [title]=\"item[textField]\"\n        *ngFor=\"let item of selectedItems\"\n      >\n        <span\n          class=\"chips-text\"\n          [ngStyle]=\"{\n            width:\n              item[textField].length > 15 &&\n              this.mode === 'multiple' &&\n              !multiLine\n                ? '110px'\n                : 'auto'\n          }\"\n        >\n          {{ item[textField] }}\n        </span>\n        <span\n          class=\"close-icon\"\n          (click)=\"handleItemRemoveClick(item)\"\n          *ngIf=\"\n            (readonly != true || itemRemove == true) &&\n            disabled != true &&\n            (allowNull == true || selectedItems.length > 1)\n          \"\n        >\n          <i class=\"far fa-times close\"></i>\n        </span>\n      </div>\n      <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\n        <ax-text-box\n          #textBoxSelectBox\n          [textAlign]=\"textAlign\"\n          [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          (onkey)=\"handleKeyEvent($event)\"\n          [size]=\"size\"\n          (onFocus)=\"onFocusTextBox($event)\"\n        >\n        </ax-text-box>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container end>\n    <ng-content select=\"[end]\"> </ng-content>\n  </ng-container>\n\n  <ng-container panel>\n    <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em\">\n      <ax-search-box\n        #serchBox\n        [onDemandTranslate]=\"onDemandTranslate\"\n        [(value)]=\"text\"\n        (onkey)=\"handleKeyEventSearch($event)\"\n        (textChanged)=\"textChanged($event)\"\n        (onButtonClick)=\"textChanged($event)\"\n      >\n      </ax-search-box>\n    </div>\n    <div class=\"ax list-container\">\n      <div\n        #listContainer\n        class=\"list-container-items\"\n        (scroll)=\"scrolled($event)\"\n      >\n        <ng-container\n          *ngIf=\"getItems().length > 0; then thenTemplate; else elseTemplate\"\n        ></ng-container>\n        <ng-template #thenTemplate>\n          <div\n            [class.ax-state-disabled]=\"isItemDisabled(item)\"\n            class=\"list-item\"\n            *ngFor=\"let item of getItems(); let i = index\"\n            [class.focused]=\"i == currentfocusedIndex\"\n            [class.selected]=\"isItemSelected(item)\"\n            (click)=\"handleItemClick($event, item)\"\n          >\n            <div style=\"display: flex\">\n              <ax-check-box\n                *ngIf=\"showCheckBox\"\n                [size]=\"size\"\n                [value]=\"isItemSelected(item)\"\n                [disabled]=\"\n                  (!allowNull &&\n                    selectedItems.length === 1 &&\n                    isItemSelected(item)) ||\n                  isItemDisabled(item)\n                \"\n                (onClick)=\"handleItemClick($event, item)\"\n              >\n              </ax-check-box>\n              <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\n                <div\n                  style=\"\n                    white-space: nowrap;\n                    text-overflow: ellipsis;\n                    overflow: hidden;\n                    flex: 1;\n                  \"\n                  [title]=\"item[textField]\"\n                  [ngStyle]=\"\n                    showCheckBox ? { 'padding-inline-start': '0.5rem' } : ''\n                  \"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      rowTemplate;\n                      context: { $implicit: item }\n                    \"\n                  >\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #elseTemplate>\n                <div\n                  style=\"\n                    white-space: nowrap;\n                    text-overflow: ellipsis;\n                    overflow: hidden;\n                    flex: 1;\n                  \"\n                  [title]=\"item[textField]\"\n                  [ngStyle]=\"\n                    showCheckBox ? { 'padding-inline-start': '0.5rem' } : ''\n                  \"\n                >\n                  {{ item[textField] }}\n                </div>\n              </ng-template>\n            </div>\n          </div>\n        </ng-template>\n        <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center\">\n          <i\n            class=\"far fa-spinner-third fa-pulse fa-2x\"\n            style=\"color: var(--ax-primary-color)\"\n          ></i>\n        </div>\n        <!-- <ax-loading-indicator ></ax-loading-indicator> -->\n        <ng-template #elseTemplate>\n          <ng-container\n            *ngIf=\"\n              showLoading == true;\n              then searchTemplate;\n              else noDataTemplate\n            \"\n          ></ng-container>\n          <ng-template #searchTemplate>\n            <div class=\"list-item\">\n              {{ 'common.search' | trans }}\n            </div>\n          </ng-template>\n          <ng-template #noDataTemplate>\n            <div class=\"list-item\">\n              {{ 'common.noDataFound' | trans }}\n            </div>\n          </ng-template>\n        </ng-template>\n      </div>\n    </div>\n  </ng-container>\n</ax-drop-down>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "onDemandTranslate", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "rowTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "span", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }, { propertyName: "serchBox", first: true, predicate: ["serchBox"], descendants: true }, { propertyName: "textBoxSelectBox", first: true, predicate: ["textBoxSelectBox"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["d"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down\n  #d\n  [size]=\"size\"\n  [fitParent]=\"fitParent\"\n  [dropdownWidth]=\"dropdownWidth\"\n  [rtl]=\"rtl\"\n  [showDropDownButton]=\"showDropDownButton\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  (dropdownToggle)=\"dropdownToggleSelecBox($event)\"\n  [attr.id]=\"axId\"\n  [ngClass]=\"axClass\"\n>\n  <ng-container start>\n    <ng-content select=\"[start]\"> </ng-content>\n  </ng-container>\n\n  <ng-container header>\n    <div\n      class=\"ax chips-container\"\n      [class.multiline]=\"multiLine\"\n      [style.padding]=\"selectedItems.length && multiLine ? '0.25rem' : ''\"\n      [attr.id]=\"axId + '-header'\"\n    >\n      <div\n        class=\"chips\"\n        [class.chips-blank]=\"mode === 'single'\"\n        [title]=\"item[textField]\"\n        *ngFor=\"let item of selectedItems\"\n        [attr.id]=\"axId + '-chip-' + item[valueField]\"\n      >\n        <span\n          class=\"chips-text\"\n          [ngStyle]=\"{\n            width:\n              item[textField].length > 15 &&\n              this.mode === 'multiple' &&\n              !multiLine\n                ? '110px'\n                : 'auto'\n          }\"\n        >\n          {{ item[textField] }}\n        </span>\n        <span\n          class=\"close-icon\"\n          (click)=\"handleItemRemoveClick(item)\"\n          *ngIf=\"\n            (readonly != true || itemRemove == true) &&\n            disabled != true &&\n            (allowNull == true || selectedItems.length > 1)\n          \"\n        >\n          <i class=\"far fa-times close\"></i>\n        </span>\n      </div>\n      <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\n        <ax-text-box\n          #textBoxSelectBox\n          [textAlign]=\"textAlign\"\n          [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          (onkey)=\"handleKeyEvent($event)\"\n          [size]=\"size\"\n          (onFocus)=\"onFocusTextBox($event)\"\n          [attr.id]=\"axId + '-text-box'\"\n        >\n        </ax-text-box>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container end>\n    <ng-content select=\"[end]\"> </ng-content>\n  </ng-container>\n\n  <ng-container panel>\n    <div\n      *ngIf=\"allowSearch\"\n      class=\"search-wrapper\"\n      style=\"padding: 0.7em\"\n      [attr.id]=\"axId + '-search-wrapper'\"\n    >\n      <ax-search-box\n        #serchBox\n        [onDemandTranslate]=\"onDemandTranslate\"\n        [(value)]=\"text\"\n        (onkey)=\"handleKeyEventSearch($event)\"\n        (textChanged)=\"textChanged($event)\"\n        (onButtonClick)=\"textChanged($event)\"\n        [attr.id]=\"axId + '-search-box'\"\n      >\n      </ax-search-box>\n    </div>\n    <div class=\"ax list-container\" [attr.id]=\"axId + '-list-container'\">\n      <div\n        #listContainer\n        class=\"list-container-items\"\n        (scroll)=\"scrolled($event)\"\n        [attr.id]=\"axId + '-list'\"\n      >\n        <ng-container\n          *ngIf=\"getItems().length > 0; then thenTemplate; else elseTemplate\"\n        ></ng-container>\n        <ng-template #thenTemplate>\n          <div\n            [class.ax-state-disabled]=\"isItemDisabled(item)\"\n            class=\"list-item\"\n            *ngFor=\"let item of getItems(); let i = index\"\n            [class.focused]=\"i == currentfocusedIndex\"\n            [class.selected]=\"isItemSelected(item)\"\n            (click)=\"handleItemClick($event, item)\"\n            [attr.id]=\"axId + '-list-item-' + i\"\n          >\n            <div style=\"display: flex\">\n              <ax-check-box\n                *ngIf=\"showCheckBox\"\n                [size]=\"size\"\n                [value]=\"isItemSelected(item)\"\n                [disabled]=\"\n                  (!allowNull &&\n                    selectedItems.length === 1 &&\n                    isItemSelected(item)) ||\n                  isItemDisabled(item)\n                \"\n                (onClick)=\"handleItemClick($event, item)\"\n                [attr.id]=\"axId + '-check-box-' + i\"\n              >\n              </ax-check-box>\n              <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\n                <div\n                  style=\"\n                    white-space: nowrap;\n                    text-overflow: ellipsis;\n                    overflow: hidden;\n                    flex: 1;\n                  \"\n                  [title]=\"item[textField]\"\n                  [ngStyle]=\"\n                    showCheckBox ? { 'padding-inline-start': '0.5rem' } : ''\n                  \"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      rowTemplate;\n                      context: { $implicit: item }\n                    \"\n                  >\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #elseTemplate>\n                <div\n                  style=\"\n                    white-space: nowrap;\n                    text-overflow: ellipsis;\n                    overflow: hidden;\n                    flex: 1;\n                  \"\n                  [title]=\"item[textField]\"\n                  [ngStyle]=\"\n                    showCheckBox ? { 'padding-inline-start': '0.5rem' } : ''\n                  \"\n                >\n                  {{ item[textField] }}\n                </div>\n              </ng-template>\n            </div>\n          </div>\n        </ng-template>\n        <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center\">\n          <i\n            class=\"far fa-spinner-third fa-pulse fa-2x\"\n            style=\"color: var(--ax-primary-color)\"\n          ></i>\n        </div>\n        <!-- <ax-loading-indicator ></ax-loading-indicator> -->\n        <ng-template #elseTemplate>\n          <ng-container\n            *ngIf=\"\n              showLoading == true;\n              then searchTemplate;\n              else noDataTemplate\n            \"\n          ></ng-container>\n          <ng-template #searchTemplate>\n            <div class=\"list-item\">\n              {{ 'common.search' | trans }}\n            </div>\n          </ng-template>\n          <ng-template #noDataTemplate>\n            <div class=\"list-item\">\n              {{ 'common.noDataFound' | trans }}\n            </div>\n          </ng-template>\n        </ng-template>\n      </div>\n    </div>\n  </ng-container>\n</ax-drop-down>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "onDemandTranslate", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-select-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [
                         { provide: AXValidatableComponent, useExisting: AXSelectBoxComponent },
-                    ], template: "<ax-drop-down\n  #d\n  [size]=\"size\"\n  [fitParent]=\"fitParent\"\n  [dropdownWidth]=\"dropdownWidth\"\n  [rtl]=\"rtl\"\n  [showDropDownButton]=\"showDropDownButton\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  (dropdownToggle)=\"dropdownToggleSelecBox($event)\"\n>\n  <ng-container start>\n    <ng-content select=\"[start]\"> </ng-content>\n  </ng-container>\n  <ng-container header>\n    <div\n      class=\"ax chips-container\"\n      [class.multiline]=\"multiLine\"\n      [style.padding]=\"selectedItems.length && multiLine ? '0.25rem' : ''\"\n    >\n      <div\n        class=\"chips\"\n        [class.chips-blank]=\"mode === 'single'\"\n        [title]=\"item[textField]\"\n        *ngFor=\"let item of selectedItems\"\n      >\n        <span\n          class=\"chips-text\"\n          [ngStyle]=\"{\n            width:\n              item[textField].length > 15 &&\n              this.mode === 'multiple' &&\n              !multiLine\n                ? '110px'\n                : 'auto'\n          }\"\n        >\n          {{ item[textField] }}\n        </span>\n        <span\n          class=\"close-icon\"\n          (click)=\"handleItemRemoveClick(item)\"\n          *ngIf=\"\n            (readonly != true || itemRemove == true) &&\n            disabled != true &&\n            (allowNull == true || selectedItems.length > 1)\n          \"\n        >\n          <i class=\"far fa-times close\"></i>\n        </span>\n      </div>\n      <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\n        <ax-text-box\n          #textBoxSelectBox\n          [textAlign]=\"textAlign\"\n          [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          (onkey)=\"handleKeyEvent($event)\"\n          [size]=\"size\"\n          (onFocus)=\"onFocusTextBox($event)\"\n        >\n        </ax-text-box>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container end>\n    <ng-content select=\"[end]\"> </ng-content>\n  </ng-container>\n\n  <ng-container panel>\n    <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em\">\n      <ax-search-box\n        #serchBox\n        [onDemandTranslate]=\"onDemandTranslate\"\n        [(value)]=\"text\"\n        (onkey)=\"handleKeyEventSearch($event)\"\n        (textChanged)=\"textChanged($event)\"\n        (onButtonClick)=\"textChanged($event)\"\n      >\n      </ax-search-box>\n    </div>\n    <div class=\"ax list-container\">\n      <div\n        #listContainer\n        class=\"list-container-items\"\n        (scroll)=\"scrolled($event)\"\n      >\n        <ng-container\n          *ngIf=\"getItems().length > 0; then thenTemplate; else elseTemplate\"\n        ></ng-container>\n        <ng-template #thenTemplate>\n          <div\n            [class.ax-state-disabled]=\"isItemDisabled(item)\"\n            class=\"list-item\"\n            *ngFor=\"let item of getItems(); let i = index\"\n            [class.focused]=\"i == currentfocusedIndex\"\n            [class.selected]=\"isItemSelected(item)\"\n            (click)=\"handleItemClick($event, item)\"\n          >\n            <div style=\"display: flex\">\n              <ax-check-box\n                *ngIf=\"showCheckBox\"\n                [size]=\"size\"\n                [value]=\"isItemSelected(item)\"\n                [disabled]=\"\n                  (!allowNull &&\n                    selectedItems.length === 1 &&\n                    isItemSelected(item)) ||\n                  isItemDisabled(item)\n                \"\n                (onClick)=\"handleItemClick($event, item)\"\n              >\n              </ax-check-box>\n              <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\n                <div\n                  style=\"\n                    white-space: nowrap;\n                    text-overflow: ellipsis;\n                    overflow: hidden;\n                    flex: 1;\n                  \"\n                  [title]=\"item[textField]\"\n                  [ngStyle]=\"\n                    showCheckBox ? { 'padding-inline-start': '0.5rem' } : ''\n                  \"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      rowTemplate;\n                      context: { $implicit: item }\n                    \"\n                  >\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #elseTemplate>\n                <div\n                  style=\"\n                    white-space: nowrap;\n                    text-overflow: ellipsis;\n                    overflow: hidden;\n                    flex: 1;\n                  \"\n                  [title]=\"item[textField]\"\n                  [ngStyle]=\"\n                    showCheckBox ? { 'padding-inline-start': '0.5rem' } : ''\n                  \"\n                >\n                  {{ item[textField] }}\n                </div>\n              </ng-template>\n            </div>\n          </div>\n        </ng-template>\n        <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center\">\n          <i\n            class=\"far fa-spinner-third fa-pulse fa-2x\"\n            style=\"color: var(--ax-primary-color)\"\n          ></i>\n        </div>\n        <!-- <ax-loading-indicator ></ax-loading-indicator> -->\n        <ng-template #elseTemplate>\n          <ng-container\n            *ngIf=\"\n              showLoading == true;\n              then searchTemplate;\n              else noDataTemplate\n            \"\n          ></ng-container>\n          <ng-template #searchTemplate>\n            <div class=\"list-item\">\n              {{ 'common.search' | trans }}\n            </div>\n          </ng-template>\n          <ng-template #noDataTemplate>\n            <div class=\"list-item\">\n              {{ 'common.noDataFound' | trans }}\n            </div>\n          </ng-template>\n        </ng-template>\n      </div>\n    </div>\n  </ng-container>\n</ax-drop-down>\n" }]
+                    ], template: "<ax-drop-down\n  #d\n  [size]=\"size\"\n  [fitParent]=\"fitParent\"\n  [dropdownWidth]=\"dropdownWidth\"\n  [rtl]=\"rtl\"\n  [showDropDownButton]=\"showDropDownButton\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  (dropdownToggle)=\"dropdownToggleSelecBox($event)\"\n  [attr.id]=\"axId\"\n  [ngClass]=\"axClass\"\n>\n  <ng-container start>\n    <ng-content select=\"[start]\"> </ng-content>\n  </ng-container>\n\n  <ng-container header>\n    <div\n      class=\"ax chips-container\"\n      [class.multiline]=\"multiLine\"\n      [style.padding]=\"selectedItems.length && multiLine ? '0.25rem' : ''\"\n      [attr.id]=\"axId + '-header'\"\n    >\n      <div\n        class=\"chips\"\n        [class.chips-blank]=\"mode === 'single'\"\n        [title]=\"item[textField]\"\n        *ngFor=\"let item of selectedItems\"\n        [attr.id]=\"axId + '-chip-' + item[valueField]\"\n      >\n        <span\n          class=\"chips-text\"\n          [ngStyle]=\"{\n            width:\n              item[textField].length > 15 &&\n              this.mode === 'multiple' &&\n              !multiLine\n                ? '110px'\n                : 'auto'\n          }\"\n        >\n          {{ item[textField] }}\n        </span>\n        <span\n          class=\"close-icon\"\n          (click)=\"handleItemRemoveClick(item)\"\n          *ngIf=\"\n            (readonly != true || itemRemove == true) &&\n            disabled != true &&\n            (allowNull == true || selectedItems.length > 1)\n          \"\n        >\n          <i class=\"far fa-times close\"></i>\n        </span>\n      </div>\n      <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\n        <ax-text-box\n          #textBoxSelectBox\n          [textAlign]=\"textAlign\"\n          [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          (onkey)=\"handleKeyEvent($event)\"\n          [size]=\"size\"\n          (onFocus)=\"onFocusTextBox($event)\"\n          [attr.id]=\"axId + '-text-box'\"\n        >\n        </ax-text-box>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container end>\n    <ng-content select=\"[end]\"> </ng-content>\n  </ng-container>\n\n  <ng-container panel>\n    <div\n      *ngIf=\"allowSearch\"\n      class=\"search-wrapper\"\n      style=\"padding: 0.7em\"\n      [attr.id]=\"axId + '-search-wrapper'\"\n    >\n      <ax-search-box\n        #serchBox\n        [onDemandTranslate]=\"onDemandTranslate\"\n        [(value)]=\"text\"\n        (onkey)=\"handleKeyEventSearch($event)\"\n        (textChanged)=\"textChanged($event)\"\n        (onButtonClick)=\"textChanged($event)\"\n        [attr.id]=\"axId + '-search-box'\"\n      >\n      </ax-search-box>\n    </div>\n    <div class=\"ax list-container\" [attr.id]=\"axId + '-list-container'\">\n      <div\n        #listContainer\n        class=\"list-container-items\"\n        (scroll)=\"scrolled($event)\"\n        [attr.id]=\"axId + '-list'\"\n      >\n        <ng-container\n          *ngIf=\"getItems().length > 0; then thenTemplate; else elseTemplate\"\n        ></ng-container>\n        <ng-template #thenTemplate>\n          <div\n            [class.ax-state-disabled]=\"isItemDisabled(item)\"\n            class=\"list-item\"\n            *ngFor=\"let item of getItems(); let i = index\"\n            [class.focused]=\"i == currentfocusedIndex\"\n            [class.selected]=\"isItemSelected(item)\"\n            (click)=\"handleItemClick($event, item)\"\n            [attr.id]=\"axId + '-list-item-' + i\"\n          >\n            <div style=\"display: flex\">\n              <ax-check-box\n                *ngIf=\"showCheckBox\"\n                [size]=\"size\"\n                [value]=\"isItemSelected(item)\"\n                [disabled]=\"\n                  (!allowNull &&\n                    selectedItems.length === 1 &&\n                    isItemSelected(item)) ||\n                  isItemDisabled(item)\n                \"\n                (onClick)=\"handleItemClick($event, item)\"\n                [attr.id]=\"axId + '-check-box-' + i\"\n              >\n              </ax-check-box>\n              <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\n                <div\n                  style=\"\n                    white-space: nowrap;\n                    text-overflow: ellipsis;\n                    overflow: hidden;\n                    flex: 1;\n                  \"\n                  [title]=\"item[textField]\"\n                  [ngStyle]=\"\n                    showCheckBox ? { 'padding-inline-start': '0.5rem' } : ''\n                  \"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      rowTemplate;\n                      context: { $implicit: item }\n                    \"\n                  >\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #elseTemplate>\n                <div\n                  style=\"\n                    white-space: nowrap;\n                    text-overflow: ellipsis;\n                    overflow: hidden;\n                    flex: 1;\n                  \"\n                  [title]=\"item[textField]\"\n                  [ngStyle]=\"\n                    showCheckBox ? { 'padding-inline-start': '0.5rem' } : ''\n                  \"\n                >\n                  {{ item[textField] }}\n                </div>\n              </ng-template>\n            </div>\n          </div>\n        </ng-template>\n        <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center\">\n          <i\n            class=\"far fa-spinner-third fa-pulse fa-2x\"\n            style=\"color: var(--ax-primary-color)\"\n          ></i>\n        </div>\n        <!-- <ax-loading-indicator ></ax-loading-indicator> -->\n        <ng-template #elseTemplate>\n          <ng-container\n            *ngIf=\"\n              showLoading == true;\n              then searchTemplate;\n              else noDataTemplate\n            \"\n          ></ng-container>\n          <ng-template #searchTemplate>\n            <div class=\"list-item\">\n              {{ 'common.search' | trans }}\n            </div>\n          </ng-template>\n          <ng-template #noDataTemplate>\n            <div class=\"list-item\">\n              {{ 'common.noDataFound' | trans }}\n            </div>\n          </ng-template>\n        </ng-template>\n      </div>\n    </div>\n  </ng-container>\n</ax-drop-down>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { showDropDownButton: [{
                 type: Input
             }], rowTemplate: [{
@@ -11589,6 +11707,8 @@ class AXSearchBarComponent {
             .map((value, key) => ({ row: key, items: value }))
             .value();
     }
+    axId;
+    axClass;
     onValueChange = new EventEmitter();
     onSearchValue = new EventEmitter();
     _items = [];
@@ -11790,11 +11910,11 @@ class AXSearchBarComponent {
         this.searchPopover.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSearchBarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXSearchBarComponent, selector: "ax-search-bar", inputs: { sizeButton: "sizeButton", size: "size", disabled: "disabled", fitParent: "fitParent", popoverWidth: "popoverWidth", rtl: "rtl", loadOnInit: "loadOnInit", caption: "caption", block: "block", items: "items" }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue" }, viewQueries: [{ propertyName: "searchPopover", first: true, predicate: ["searchPop"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "<ax-button [block]=\"block\" end icon=\"far fa-sliders-h icon\" [selected]=\"_searchCount? true:false\"\n    [type]=\" _searchCount ? 'primary':'primary outline'\" [disabled]=\"disabled\" [size]=\"sizeButton\" [tabIndex]=\"-1\"\n    (click)=\"handleButtonClick()\"> {{caption? caption:'common.search' | trans}}\n    <span *ngIf=\"_searchCount\" class=\"search-count\">{{_searchCount}}</span></ax-button>\n\n\n<ax-popover #searchPop [target]=\"ref\" [rtl]=\"rtl\"\n    [position]=\"{originX:'end',originY:'bottom',overlayX:'end',overlayY:'top',offsetY:10}\">\n    <div class=\"panel-box ax-dropdown-container-bordered {{size}}\">\n        <ax-validation-form #form>\n            <ng-container *ngFor=\"let item of _items\">\n                <div class=\"row\">\n                    <ng-container *ngFor=\"let prop of item.items\">\n                        <div *ngIf=\"prop.property.visible != false\" class=\"{{renderCol(prop.property.col)}}\">\n                            <div>\n                                <ax-label>{{prop.property.title}}</ax-label>\n                                <ng-container ax-property-editor-renderer [validationForm]=\"form\" [property]=\"prop\"\n                                    [context]=\"_context\" (onValueChange)=\"handleValueChange($event)\"></ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <div class=\"footer-button\">\n                <ax-button (click)=\"search()\">{{'common.search' | trans}}</ax-button>\n                <ax-button type=\"blank danger\" (click)=\"clear()\">{{'common.reset' | trans}}</ax-button>\n            </div>\n        </ax-validation-form>\n    </div>\n</ax-popover>", styles: [".panel-box{padding:1rem}.panel-box.ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.search-count{background:#fff3;border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "rtl", "visible"], outputs: ["onOutSideClick"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXSearchBarComponent, selector: "ax-search-bar", inputs: { sizeButton: "sizeButton", size: "size", disabled: "disabled", fitParent: "fitParent", popoverWidth: "popoverWidth", rtl: "rtl", loadOnInit: "loadOnInit", caption: "caption", block: "block", items: "items", axId: "axId", axClass: "axClass" }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue" }, viewQueries: [{ propertyName: "searchPopover", first: true, predicate: ["searchPop"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "<ax-button [block]=\"block\" end icon=\"far fa-sliders-h icon\" [selected]=\"_searchCount ? true : false\"\n    [type]=\"_searchCount ? 'primary' : 'primary outline'\" [disabled]=\"disabled\" [size]=\"sizeButton\" [tabIndex]=\"-1\"\n    (click)=\"handleButtonClick()\" [attr.id]=\"axId + '-search-button'\" [ngClass]=\"axClass\">\n    {{ caption ? caption : 'common.search' | trans }}\n    <span *ngIf=\"_searchCount\" class=\"search-count\" [attr.id]=\"axId + '-search-count'\">\n        {{ _searchCount }}\n    </span>\n</ax-button>\n\n<ax-popover #searchPop [target]=\"ref\" [rtl]=\"rtl\"\n    [position]=\"{ originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 10 }\"\n    [attr.id]=\"axId + '-popover'\" [ngClass]=\"axClass\">\n    <div class=\"panel-box ax-dropdown-container-bordered {{ size }}\" [attr.id]=\"axId + '-panel-box'\">\n        <ax-validation-form #form [attr.id]=\"axId + '-validation-form'\">\n            <ng-container *ngFor=\"let item of _items\" [attr.id]=\"axId + '-item-' + item.property.id\">\n                <div class=\"row\" [attr.id]=\"axId + '-row-' + item.property.id\">\n                    <ng-container *ngFor=\"let prop of item.items\">\n                        <div *ngIf=\"prop.property.visible != false\" class=\"{{ renderCol(prop.property.col) }}\"\n                            [attr.id]=\"axId + '-col-' + prop.property.id\">\n                            <div [attr.id]=\"axId + '-label-container-' + prop.property.id\">\n                                <ax-label [attr.id]=\"axId + '-label-' + prop.property.id\">\n                                    {{ prop.property.title }}\n                                </ax-label>\n                                <ng-container ax-property-editor-renderer [validationForm]=\"form\" [property]=\"prop\"\n                                    [context]=\"_context\" (onValueChange)=\"handleValueChange($event)\"\n                                    [attr.id]=\"axId + '-editor-' + prop.property.id\"></ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <div class=\"footer-button\" [attr.id]=\"axId + '-footer-button'\">\n                <ax-button (click)=\"search()\" [attr.id]=\"axId + '-search-footer-button'\">\n                    {{ 'common.search' | trans }}\n                </ax-button>\n                <ax-button type=\"blank danger\" (click)=\"clear()\" [attr.id]=\"axId + '-reset-footer-button'\">\n                    {{ 'common.reset' | trans }}\n                </ax-button>\n            </div>\n        </ax-validation-form>\n    </div>\n</ax-popover>", styles: [".panel-box{padding:1rem}.panel-box.ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.search-count{background:#fff3;border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "rtl", "axId", "axClass", "visible"], outputs: ["onOutSideClick"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSearchBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-search-bar', template: "<ax-button [block]=\"block\" end icon=\"far fa-sliders-h icon\" [selected]=\"_searchCount? true:false\"\n    [type]=\" _searchCount ? 'primary':'primary outline'\" [disabled]=\"disabled\" [size]=\"sizeButton\" [tabIndex]=\"-1\"\n    (click)=\"handleButtonClick()\"> {{caption? caption:'common.search' | trans}}\n    <span *ngIf=\"_searchCount\" class=\"search-count\">{{_searchCount}}</span></ax-button>\n\n\n<ax-popover #searchPop [target]=\"ref\" [rtl]=\"rtl\"\n    [position]=\"{originX:'end',originY:'bottom',overlayX:'end',overlayY:'top',offsetY:10}\">\n    <div class=\"panel-box ax-dropdown-container-bordered {{size}}\">\n        <ax-validation-form #form>\n            <ng-container *ngFor=\"let item of _items\">\n                <div class=\"row\">\n                    <ng-container *ngFor=\"let prop of item.items\">\n                        <div *ngIf=\"prop.property.visible != false\" class=\"{{renderCol(prop.property.col)}}\">\n                            <div>\n                                <ax-label>{{prop.property.title}}</ax-label>\n                                <ng-container ax-property-editor-renderer [validationForm]=\"form\" [property]=\"prop\"\n                                    [context]=\"_context\" (onValueChange)=\"handleValueChange($event)\"></ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <div class=\"footer-button\">\n                <ax-button (click)=\"search()\">{{'common.search' | trans}}</ax-button>\n                <ax-button type=\"blank danger\" (click)=\"clear()\">{{'common.reset' | trans}}</ax-button>\n            </div>\n        </ax-validation-form>\n    </div>\n</ax-popover>", styles: [".panel-box{padding:1rem}.panel-box.ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.search-count{background:#fff3;border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}\n"] }]
+            args: [{ selector: 'ax-search-bar', template: "<ax-button [block]=\"block\" end icon=\"far fa-sliders-h icon\" [selected]=\"_searchCount ? true : false\"\n    [type]=\"_searchCount ? 'primary' : 'primary outline'\" [disabled]=\"disabled\" [size]=\"sizeButton\" [tabIndex]=\"-1\"\n    (click)=\"handleButtonClick()\" [attr.id]=\"axId + '-search-button'\" [ngClass]=\"axClass\">\n    {{ caption ? caption : 'common.search' | trans }}\n    <span *ngIf=\"_searchCount\" class=\"search-count\" [attr.id]=\"axId + '-search-count'\">\n        {{ _searchCount }}\n    </span>\n</ax-button>\n\n<ax-popover #searchPop [target]=\"ref\" [rtl]=\"rtl\"\n    [position]=\"{ originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 10 }\"\n    [attr.id]=\"axId + '-popover'\" [ngClass]=\"axClass\">\n    <div class=\"panel-box ax-dropdown-container-bordered {{ size }}\" [attr.id]=\"axId + '-panel-box'\">\n        <ax-validation-form #form [attr.id]=\"axId + '-validation-form'\">\n            <ng-container *ngFor=\"let item of _items\" [attr.id]=\"axId + '-item-' + item.property.id\">\n                <div class=\"row\" [attr.id]=\"axId + '-row-' + item.property.id\">\n                    <ng-container *ngFor=\"let prop of item.items\">\n                        <div *ngIf=\"prop.property.visible != false\" class=\"{{ renderCol(prop.property.col) }}\"\n                            [attr.id]=\"axId + '-col-' + prop.property.id\">\n                            <div [attr.id]=\"axId + '-label-container-' + prop.property.id\">\n                                <ax-label [attr.id]=\"axId + '-label-' + prop.property.id\">\n                                    {{ prop.property.title }}\n                                </ax-label>\n                                <ng-container ax-property-editor-renderer [validationForm]=\"form\" [property]=\"prop\"\n                                    [context]=\"_context\" (onValueChange)=\"handleValueChange($event)\"\n                                    [attr.id]=\"axId + '-editor-' + prop.property.id\"></ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <div class=\"footer-button\" [attr.id]=\"axId + '-footer-button'\">\n                <ax-button (click)=\"search()\" [attr.id]=\"axId + '-search-footer-button'\">\n                    {{ 'common.search' | trans }}\n                </ax-button>\n                <ax-button type=\"blank danger\" (click)=\"clear()\" [attr.id]=\"axId + '-reset-footer-button'\">\n                    {{ 'common.reset' | trans }}\n                </ax-button>\n            </div>\n        </ax-validation-form>\n    </div>\n</ax-popover>", styles: [".panel-box{padding:1rem}.panel-box.ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.search-count{background:#fff3;border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { searchPopover: [{
                 type: ViewChild,
                 args: ['searchPop']
@@ -11824,6 +11944,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                 type: Input
             }], items: [{
                 type: Input
+            }], axId: [{
+                type: Input
+            }], axClass: [{
+                type: Input
             }], onValueChange: [{
                 type: Output
             }], onSearchValue: [{
@@ -12474,13 +12598,13 @@ class AXColorPickerComponent extends AXColorBoxComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXColorPickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["value"], outputs: ["onColorSelect", "valueChange"] }] });
+        ], 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\" [attr.id]=\"axId\"\n    [ngClass]=\"axClass\">\n\n    <ng-container start>\n        <ng-content select=\"[start]\"></ng-content>\n    </ng-container>\n\n    <ng-container header>\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;\n                        </div>\n                    </ng-container>\n                    <ng-template #elseTemplate>\n                        {{placeholder}}&nbsp;\n                    </ng-template>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container end>\n        <ng-content select=\"[end]\"></ng-content>\n    </ng-container>\n\n    <ng-container panel>\n        <ax-color-box [(value)]=\"value\" (onColorSelect)=\"handleItemClick($event)\"></ax-color-box>\n    </ng-container>\n</ax-drop-down>", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["value"], outputs: ["onColorSelect", "valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXColorPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-picker', providers: [
                         { provide: AXValidatableComponent, useExisting: AXColorPickerComponent },
-                    ], host: { style: 'width: 100%' }, 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>" }]
+                    ], host: { style: 'width: 100%' }, template: "<ax-drop-down #dropdown [fitParent]=\"false\" [size]=\"size\" [disabled]=\"disabled\" [rtl]=\"rtl\" [attr.id]=\"axId\"\n    [ngClass]=\"axClass\">\n\n    <ng-container start>\n        <ng-content select=\"[start]\"></ng-content>\n    </ng-container>\n\n    <ng-container header>\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;\n                        </div>\n                    </ng-container>\n                    <ng-template #elseTemplate>\n                        {{placeholder}}&nbsp;\n                    </ng-template>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container end>\n        <ng-content select=\"[end]\"></ng-content>\n    </ng-container>\n\n    <ng-container panel>\n        <ax-color-box [(value)]=\"value\" (onColorSelect)=\"handleItemClick($event)\"></ax-color-box>\n    </ng-container>\n</ax-drop-down>" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { dropdown: [{
                 type: ViewChild,
                 args: ['dropdown', { static: true }]
@@ -13556,7 +13680,7 @@ class AXSwitchComponent extends AXBaseComponent {
             this.onValueChanged.emit({
                 component: this,
                 oldValue,
-                value: v
+                value: v,
             });
         }
     }
@@ -13569,11 +13693,11 @@ class AXSwitchComponent extends AXBaseComponent {
     }
     focus() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSwitchComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXSwitchComponent, selector: "ax-switch", inputs: { tabIndex: "tabIndex", value: "value", readonly: "readonly", disabled: "disabled", size: "size" }, outputs: { onValueChanged: "onValueChanged", valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<label class=\"ax ax-switch\" >\n    <input type=\"checkbox\" [(ngModel)]=\"value\"  [ngModelOptions]=\"{standalone: true}\" [attr.tabindex]=\"tabIndex\">\n    <span class=\"slider round\"></span>\n</label>", styles: [".ax.ax-switch{position:relative;display:inline-block;width:46px;height:25px;margin:5px}.ax.ax-switch>input{opacity:0;width:0;height:0}.ax.ax-switch>input:checked+.slider{background-color:var(--ax-primary-color)}.ax.ax-switch>input:checked+.slider:before{-webkit-transform:translateX(21px);-ms-transform:translateX(21px);transform:translate(21px)}.ax.ax-switch:focus-within .slider{outline:1px solid var(--ax-primary-color)}.ax.ax-switch .slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;-webkit-transition:.2s;transition:.2s}.ax.ax-switch .slider:before{content:\"\";position:absolute;height:21px;width:21px;left:2px;bottom:2px;background-color:#fff;-webkit-transition:.2s;transition:.2s}.ax.ax-switch .slider.round{border-radius:25px}.ax.ax-switch .slider.round:before{border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXSwitchComponent, selector: "ax-switch", inputs: { tabIndex: "tabIndex", value: "value", readonly: "readonly", disabled: "disabled", size: "size" }, outputs: { onValueChanged: "onValueChanged", valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<label class=\"ax ax-switch\" [attr.id]=\"axId\" [ngClass]=\"axClass\">\n    <input type=\"checkbox\" [(ngModel)]=\"value\" [ngModelOptions]=\"{standalone: true}\" [attr.tabindex]=\"tabIndex\">\n    <span class=\"slider round\"></span>\n</label>\n", styles: [".ax.ax-switch{position:relative;display:inline-block;width:46px;height:25px;margin:5px}.ax.ax-switch>input{opacity:0;width:0;height:0}.ax.ax-switch>input:checked+.slider{background-color:var(--ax-primary-color)}.ax.ax-switch>input:checked+.slider:before{-webkit-transform:translateX(21px);-ms-transform:translateX(21px);transform:translate(21px)}.ax.ax-switch:focus-within .slider{outline:1px solid var(--ax-primary-color)}.ax.ax-switch .slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;-webkit-transition:.2s;transition:.2s}.ax.ax-switch .slider:before{content:\"\";position:absolute;height:21px;width:21px;left:2px;bottom:2px;background-color:#fff;-webkit-transition:.2s;transition:.2s}.ax.ax-switch .slider.round{border-radius:25px}.ax.ax-switch .slider.round:before{border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-switch', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"ax ax-switch\" >\n    <input type=\"checkbox\" [(ngModel)]=\"value\"  [ngModelOptions]=\"{standalone: true}\" [attr.tabindex]=\"tabIndex\">\n    <span class=\"slider round\"></span>\n</label>", styles: [".ax.ax-switch{position:relative;display:inline-block;width:46px;height:25px;margin:5px}.ax.ax-switch>input{opacity:0;width:0;height:0}.ax.ax-switch>input:checked+.slider{background-color:var(--ax-primary-color)}.ax.ax-switch>input:checked+.slider:before{-webkit-transform:translateX(21px);-ms-transform:translateX(21px);transform:translate(21px)}.ax.ax-switch:focus-within .slider{outline:1px solid var(--ax-primary-color)}.ax.ax-switch .slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;-webkit-transition:.2s;transition:.2s}.ax.ax-switch .slider:before{content:\"\";position:absolute;height:21px;width:21px;left:2px;bottom:2px;background-color:#fff;-webkit-transition:.2s;transition:.2s}.ax.ax-switch .slider.round{border-radius:25px}.ax.ax-switch .slider.round:before{border-radius:50%}\n"] }]
+            args: [{ selector: 'ax-switch', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"ax ax-switch\" [attr.id]=\"axId\" [ngClass]=\"axClass\">\n    <input type=\"checkbox\" [(ngModel)]=\"value\" [ngModelOptions]=\"{standalone: true}\" [attr.tabindex]=\"tabIndex\">\n    <span class=\"slider round\"></span>\n</label>\n", styles: [".ax.ax-switch{position:relative;display:inline-block;width:46px;height:25px;margin:5px}.ax.ax-switch>input{opacity:0;width:0;height:0}.ax.ax-switch>input:checked+.slider{background-color:var(--ax-primary-color)}.ax.ax-switch>input:checked+.slider:before{-webkit-transform:translateX(21px);-ms-transform:translateX(21px);transform:translate(21px)}.ax.ax-switch:focus-within .slider{outline:1px solid var(--ax-primary-color)}.ax.ax-switch .slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;-webkit-transition:.2s;transition:.2s}.ax.ax-switch .slider:before{content:\"\";position:absolute;height:21px;width:21px;left:2px;bottom:2px;background-color:#fff;-webkit-transition:.2s;transition:.2s}.ax.ax-switch .slider.round{border-radius:25px}.ax.ax-switch .slider.round:before{border-radius:50%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { onValueChanged: [{
                 type: Output
             }], valueChange: [{
@@ -13705,11 +13829,15 @@ class AXTextAreaComponent extends AXBaseTextComponent {
     cols = 0;
     maxLength = null;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTextAreaComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXTextAreaComponent, selector: "ax-text-area", inputs: { rows: "rows", cols: "cols", maxLength: "maxLength" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXTextAreaComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item {{size}}\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n    <div class=\"content\">\n        <div class=\"ax input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\n            <textarea [name]=\"name\" [attr.maxlength]=\"maxLength\" rows=\"{{rows}}\" cols=\"{{cols}}\" #input type=\"text\"\n                class=\"ax icon {{size}}\" [ngClass]=\"setTextAlign()\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\"\n                [disabled]=\"disabled\" value=\"{{value}}\"></textarea>\n        </div>\n    </div>\n    <div class=\"ax buttons\">\n        <ng-content select=\"ax-button\">\n        </ng-content>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXTextAreaComponent, selector: "ax-text-area", inputs: { rows: "rows", cols: "cols", maxLength: "maxLength" }, host: { styleAttribute: "width: 100%" }, providers: [
+            { provide: AXValidatableComponent, useExisting: AXTextAreaComponent },
+        ], usesInheritance: true, ngImport: i0, template: "<div \n  class=\"ax form-item {{size}} {{ axClass ? axClass : '' }}\" \n  [class.disabled]=\"disabled\" \n  [attr.id]=\"axId ? axId : uid\"\n>\n  <div class=\"content\">\n    <div \n      class=\"ax input {{size}} {{ axClass ? axClass + '-input' : '' }}\" \n      [class.disabled]=\"disabled\" \n      [class.readonly]=\"readonly\"\n      [attr.id]=\"axId ? axId + '-input' : null\"\n    >\n      <textarea \n        [name]=\"name\" \n        [attr.maxlength]=\"maxLength\" \n        rows=\"{{rows}}\" \n        cols=\"{{cols}}\" \n        #input \n        type=\"text\"\n        class=\"ax icon {{size}} {{ axClass ? axClass + '-textarea' : '' }}\" \n        [ngClass]=\"setTextAlign()\" \n        placeholder=\"{{placeholder}}\" \n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\" \n        [attr.id]=\"axId ? axId + '-textarea' : null\"\n        [attr.class]=\"axClass ? axClass + '-textarea' : ''\"\n        value=\"{{value}}\"\n      ></textarea>\n    </div>\n  </div>\n  <div \n    class=\"ax buttons {{ axClass ? axClass + '-buttons' : '' }}\" \n    [attr.id]=\"axId ? axId + '-buttons' : null\"\n  >\n    <ng-content select=\"ax-button\"></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTextAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-text-area', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXTextAreaComponent }], template: "<div class=\"ax form-item {{size}}\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n    <div class=\"content\">\n        <div class=\"ax input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\n            <textarea [name]=\"name\" [attr.maxlength]=\"maxLength\" rows=\"{{rows}}\" cols=\"{{cols}}\" #input type=\"text\"\n                class=\"ax icon {{size}}\" [ngClass]=\"setTextAlign()\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\"\n                [disabled]=\"disabled\" value=\"{{value}}\"></textarea>\n        </div>\n    </div>\n    <div class=\"ax buttons\">\n        <ng-content select=\"ax-button\">\n        </ng-content>\n    </div>\n</div>" }]
+            args: [{ selector: 'ax-text-area', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [
+                        { provide: AXValidatableComponent, useExisting: AXTextAreaComponent },
+                    ], template: "<div \n  class=\"ax form-item {{size}} {{ axClass ? axClass : '' }}\" \n  [class.disabled]=\"disabled\" \n  [attr.id]=\"axId ? axId : uid\"\n>\n  <div class=\"content\">\n    <div \n      class=\"ax input {{size}} {{ axClass ? axClass + '-input' : '' }}\" \n      [class.disabled]=\"disabled\" \n      [class.readonly]=\"readonly\"\n      [attr.id]=\"axId ? axId + '-input' : null\"\n    >\n      <textarea \n        [name]=\"name\" \n        [attr.maxlength]=\"maxLength\" \n        rows=\"{{rows}}\" \n        cols=\"{{cols}}\" \n        #input \n        type=\"text\"\n        class=\"ax icon {{size}} {{ axClass ? axClass + '-textarea' : '' }}\" \n        [ngClass]=\"setTextAlign()\" \n        placeholder=\"{{placeholder}}\" \n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\" \n        [attr.id]=\"axId ? axId + '-textarea' : null\"\n        [attr.class]=\"axClass ? axClass + '-textarea' : ''\"\n        value=\"{{value}}\"\n      ></textarea>\n    </div>\n  </div>\n  <div \n    class=\"ax buttons {{ axClass ? axClass + '-buttons' : '' }}\" \n    [attr.id]=\"axId ? axId + '-buttons' : null\"\n  >\n    <ng-content select=\"ax-button\"></ng-content>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { rows: [{
                 type: Input
             }], cols: [{
@@ -14862,13 +14990,13 @@ class AXTimePickerComponent extends AXBaseTextComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTimePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXTimePickerComponent, selector: "ax-time-picker", inputs: { timeType: "timeType", showMask: "showMask", showCurentTime: "showCurentTime" }, outputs: { onValueChanged: "onValueChanged" }, host: { styleAttribute: "width: 100%" }, providers: [
             { provide: AXValidatableComponent, useExisting: AXTimePickerComponent },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n  <div class=\"ax items-wrapper\">\n    <ng-content select=\"[start]\"> </ng-content>\n    <i class=\"form-item-icon {{ icon }}\" *ngIf=\"icon\"></i>\n  </div>\n  <div class=\"content\" #content>\n    <div\n      class=\"ax form-control input {{ size }}\"\n      [class.disabled]=\"disabled\"\n      [class.readonly]=\"readonly\"\n      [class.icon]=\"icon\"\n    >\n      <input\n        #input\n        type=\"text\"\n        class=\"ax {{ size }}\"\n        [mask]=\"timeType\"\n        [showMaskTyped]=\"showMask\"\n        [(ngModel)]=\"textValue\"\n        placeholder=\"{{ placeholder }}\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [ngClass]=\"setTextAlign()\"\n        [class.clear]=\"value && allowClear\"\n        (focus)=\"handleInputFocus()\"\n        (blur)=\"handleInputBlur($event)\"\n        (keyup)=\"handleKeyUp($event)\"\n        (keydown)=\"handleKeyDown($event)\"\n        (click)=\"handleClick($event)\"\n      />\n    </div>\n  </div>\n  <div class=\"ax items-wrapper\">\n    <ax-button\n      *ngIf=\"value && allowClear\"\n      icon=\"far fa-times\"\n      type=\"danger blank\"\n      (click)=\"clear()\"\n      [disabled]=\"disabled\"\n      [tabIndex]=\"-1\"\n    ></ax-button>\n    <ng-content select=\"[end]\"> </ng-content>\n  </div>\n</div>\n<!-- [textMask]=\"{mask: mask , showMask:showMask , guid: maskGuid , keepCharPositions: maskKeepCharPositions}\" -->\n<!-- <input #input id=\"timePickerValue\" [textMask]=\"timeType\" type=\"text\" [(ngModel)]=\"value\" (keypress)='handleKeyPress($event)'\n    (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\"> -->\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i3.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0, template: "<div \n  class=\"ax form-item {{axClass}}\" \n  [class.disabled]=\"disabled\" \n  [attr.id]=\"axId ? axId : null\" \n  #fc\n>\n  <div class=\"ax items-wrapper\">\n    <ng-content select=\"[start]\"></ng-content>\n    <i \n      class=\"form-item-icon {{icon}}\" \n      *ngIf=\"icon\"\n      [attr.id]=\"axId ? axId + '-icon' : null\"\n      [attr.class]=\"axClass ? axClass + '-icon' : null\"\n    ></i>\n  </div>\n  <div \n    class=\"content\" \n    #content\n    [attr.id]=\"axId ? axId + '-content' : null\"\n    [attr.class]=\"axClass ? axClass + '-content' : null\"\n  >\n    <div \n      class=\"ax form-control input {{size}}\" \n      [class.disabled]=\"disabled\" \n      [class.readonly]=\"readonly\" \n      [class.icon]=\"icon\"\n      [attr.id]=\"axId ? axId + '-form-control' : null\"\n      [attr.class]=\"axClass ? axClass + '-form-control' : null\"\n    >\n      <input\n        #input\n        type=\"text\"\n        class=\"ax {{size}} {{axClass ? axClass + '-input' : ''}}\"\n        [mask]=\"timeType\"\n        [showMaskTyped]=\"showMask\"\n        [(ngModel)]=\"textValue\"\n        placeholder=\"{{placeholder}}\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [ngClass]=\"setTextAlign()\"\n        [class.clear]=\"value && allowClear\"\n        [attr.id]=\"axId ? axId + '-input' : null\"\n        (focus)=\"handleInputFocus()\"\n        (blur)=\"handleInputBlur($event)\"\n        (keyup)=\"handleKeyUp($event)\"\n        (keydown)=\"handleKeyDown($event)\"\n        (click)=\"handleClick($event)\"\n      />\n    </div>\n  </div>\n  <div class=\"ax items-wrapper\">\n    <ax-button\n      *ngIf=\"value && allowClear\"\n      icon=\"far fa-times\"\n      type=\"danger blank\"\n      (click)=\"clear()\"\n      [disabled]=\"disabled\"\n      [tabIndex]=\"-1\"\n      [attr.id]=\"axId ? axId + '-clear-button' : null\"\n      [attr.class]=\"axClass ? axClass + '-clear-button' : null\"\n    ></ax-button>\n    <ng-content select=\"[end]\"></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i3.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [
                         { provide: AXValidatableComponent, useExisting: AXTimePickerComponent },
-                    ], template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n  <div class=\"ax items-wrapper\">\n    <ng-content select=\"[start]\"> </ng-content>\n    <i class=\"form-item-icon {{ icon }}\" *ngIf=\"icon\"></i>\n  </div>\n  <div class=\"content\" #content>\n    <div\n      class=\"ax form-control input {{ size }}\"\n      [class.disabled]=\"disabled\"\n      [class.readonly]=\"readonly\"\n      [class.icon]=\"icon\"\n    >\n      <input\n        #input\n        type=\"text\"\n        class=\"ax {{ size }}\"\n        [mask]=\"timeType\"\n        [showMaskTyped]=\"showMask\"\n        [(ngModel)]=\"textValue\"\n        placeholder=\"{{ placeholder }}\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [ngClass]=\"setTextAlign()\"\n        [class.clear]=\"value && allowClear\"\n        (focus)=\"handleInputFocus()\"\n        (blur)=\"handleInputBlur($event)\"\n        (keyup)=\"handleKeyUp($event)\"\n        (keydown)=\"handleKeyDown($event)\"\n        (click)=\"handleClick($event)\"\n      />\n    </div>\n  </div>\n  <div class=\"ax items-wrapper\">\n    <ax-button\n      *ngIf=\"value && allowClear\"\n      icon=\"far fa-times\"\n      type=\"danger blank\"\n      (click)=\"clear()\"\n      [disabled]=\"disabled\"\n      [tabIndex]=\"-1\"\n    ></ax-button>\n    <ng-content select=\"[end]\"> </ng-content>\n  </div>\n</div>\n<!-- [textMask]=\"{mask: mask , showMask:showMask , guid: maskGuid , keepCharPositions: maskKeepCharPositions}\" -->\n<!-- <input #input id=\"timePickerValue\" [textMask]=\"timeType\" type=\"text\" [(ngModel)]=\"value\" (keypress)='handleKeyPress($event)'\n    (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\"> -->\n" }]
+                    ], template: "<div \n  class=\"ax form-item {{axClass}}\" \n  [class.disabled]=\"disabled\" \n  [attr.id]=\"axId ? axId : null\" \n  #fc\n>\n  <div class=\"ax items-wrapper\">\n    <ng-content select=\"[start]\"></ng-content>\n    <i \n      class=\"form-item-icon {{icon}}\" \n      *ngIf=\"icon\"\n      [attr.id]=\"axId ? axId + '-icon' : null\"\n      [attr.class]=\"axClass ? axClass + '-icon' : null\"\n    ></i>\n  </div>\n  <div \n    class=\"content\" \n    #content\n    [attr.id]=\"axId ? axId + '-content' : null\"\n    [attr.class]=\"axClass ? axClass + '-content' : null\"\n  >\n    <div \n      class=\"ax form-control input {{size}}\" \n      [class.disabled]=\"disabled\" \n      [class.readonly]=\"readonly\" \n      [class.icon]=\"icon\"\n      [attr.id]=\"axId ? axId + '-form-control' : null\"\n      [attr.class]=\"axClass ? axClass + '-form-control' : null\"\n    >\n      <input\n        #input\n        type=\"text\"\n        class=\"ax {{size}} {{axClass ? axClass + '-input' : ''}}\"\n        [mask]=\"timeType\"\n        [showMaskTyped]=\"showMask\"\n        [(ngModel)]=\"textValue\"\n        placeholder=\"{{placeholder}}\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [ngClass]=\"setTextAlign()\"\n        [class.clear]=\"value && allowClear\"\n        [attr.id]=\"axId ? axId + '-input' : null\"\n        (focus)=\"handleInputFocus()\"\n        (blur)=\"handleInputBlur($event)\"\n        (keyup)=\"handleKeyUp($event)\"\n        (keydown)=\"handleKeyDown($event)\"\n        (click)=\"handleClick($event)\"\n      />\n    </div>\n  </div>\n  <div class=\"ax items-wrapper\">\n    <ax-button\n      *ngIf=\"value && allowClear\"\n      icon=\"far fa-times\"\n      type=\"danger blank\"\n      (click)=\"clear()\"\n      [disabled]=\"disabled\"\n      [tabIndex]=\"-1\"\n      [attr.id]=\"axId ? axId + '-clear-button' : null\"\n      [attr.class]=\"axClass ? axClass + '-clear-button' : null\"\n    ></ax-button>\n    <ng-content select=\"[end]\"></ng-content>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { onValueChanged: [{
                 type: Output
             }], timeType: [{
@@ -15188,7 +15316,7 @@ class AXTabPageService {
     closed = new Subject();
     changed = new Subject();
     constructor() { }
-    open(arg1, arg2, arg3) {
+    open(arg1, arg2, arg3, axId, axClass) {
         let newTab;
         if (typeof arg1 === 'object') {
             const options = Object.assign({ closable: true }, arg1);
@@ -15197,7 +15325,9 @@ class AXTabPageService {
                 closable: options.closable,
                 content: options.content,
                 data: options.data,
-                pinned: options.pinned
+                pinned: options.pinned,
+                axId: axId,
+                axClass: axClass
             };
         }
         else {
@@ -15206,6 +15336,8 @@ class AXTabPageService {
                 closable: true,
                 content: arg1,
                 data: arg3,
+                axId: axId,
+                axClass: axClass
             };
         }
         newTab[TAB_META_KEY] = {};
@@ -15421,22 +15553,22 @@ class AXTabPageHostComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTabPageHostComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.AXRenderService }, { token: AXTabPageService }, { token: AXLoadingService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXTabPageHostComponent, selector: "ax-tab-page-host", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
-        <div class='ax-loading-host'>
-            <div class='ax-tab-page-host' >
+      <div class='ax-loading-host'>
+            <div class='ax-tab-page-host' [ngClass]="tab.axClass" [attr.id]="tab.axId">
                 <div [hidden]="isLoading" style="height:100%" class='ax-tab-page-host-container'>
                     <ng-template #container></ng-template>
                 </div>
             </div>
         </div>
-    `, isInline: true });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTabPageHostComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-tab-page-host',
                     template: `
-        <div class='ax-loading-host'>
-            <div class='ax-tab-page-host' >
+      <div class='ax-loading-host'>
+            <div class='ax-tab-page-host' [ngClass]="tab.axClass" [attr.id]="tab.axId">
                 <div [hidden]="isLoading" style="height:100%" class='ax-tab-page-host-container'>
                     <ng-template #container></ng-template>
                 </div>
@@ -15478,6 +15610,8 @@ class AXTabPageRendererComponent {
                     componentRef.uid = tab[TAB_META_KEY].uid;
                     const host = componentRef.instance;
                     host.tab = tab;
+                    componentRef.instance.axId = tab.axId;
+                    componentRef.instance.axClass = tab.axClass;
                     this.childs.push(componentRef);
                     setTimeout(() => {
                         componentRef.changeDetectorRef.detectChanges();
@@ -15544,6 +15678,8 @@ class AXTabStripComponent {
     ngOnInit() { }
     items = [];
     onTabChanged = new EventEmitter();
+    axId;
+    axClass;
     handleClick(i) {
         if (!i.disable) {
             this.items.forEach((c) => (c.active = false));
@@ -15556,15 +15692,19 @@ class AXTabStripComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTabStripComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXTabStripComponent, selector: "ax-tab-strip", inputs: { items: "items" }, outputs: { onTabChanged: "onTabChanged" }, ngImport: i0, template: "<ul class=\"tab-strip-container\">\n    <ng-container *ngFor=\"let item of items\">\n        <li *ngIf=\"!!item.visible || item.visible == undefined\" [class.active]=\"item.active\"\n            [class.disabled]=\"item.disable\" (click)=\"handleClick(item)\">{{item.text}}</li>\n    </ng-container>\n</ul>", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXTabStripComponent, selector: "ax-tab-strip", inputs: { items: "items", axId: "axId", axClass: "axClass" }, outputs: { onTabChanged: "onTabChanged" }, ngImport: i0, template: "<ul \n  class=\"tab-strip-container {{ axClass ? axClass : '' }}\" \n  [attr.id]=\"axId ? axId : null\"\n>\n    <ng-container *ngFor=\"let item of items\">\n        <li \n          *ngIf=\"!!item.visible || item.visible == undefined\" \n          [class.active]=\"item.active\"\n          [class.disabled]=\"item.disable\" \n          (click)=\"handleClick(item)\"\n          [attr.id]=\"item.id ? axId + '-' + item.id : null\"\n          [class]=\"item.customClass ? item.customClass : ''\"\n        >\n          {{ item.text }}\n        </li>\n    </ng-container>\n</ul>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTabStripComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-tab-strip', template: "<ul class=\"tab-strip-container\">\n    <ng-container *ngFor=\"let item of items\">\n        <li *ngIf=\"!!item.visible || item.visible == undefined\" [class.active]=\"item.active\"\n            [class.disabled]=\"item.disable\" (click)=\"handleClick(item)\">{{item.text}}</li>\n    </ng-container>\n</ul>" }]
+            args: [{ selector: 'ax-tab-strip', template: "<ul \n  class=\"tab-strip-container {{ axClass ? axClass : '' }}\" \n  [attr.id]=\"axId ? axId : null\"\n>\n    <ng-container *ngFor=\"let item of items\">\n        <li \n          *ngIf=\"!!item.visible || item.visible == undefined\" \n          [class.active]=\"item.active\"\n          [class.disabled]=\"item.disable\" \n          (click)=\"handleClick(item)\"\n          [attr.id]=\"item.id ? axId + '-' + item.id : null\"\n          [class]=\"item.customClass ? item.customClass : ''\"\n        >\n          {{ item.text }}\n        </li>\n    </ng-container>\n</ul>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{
                 type: Input
             }], onTabChanged: [{
                 type: Output
+            }], axId: [{
+                type: Input
+            }], axClass: [{
+                type: Input
             }] } });
 
 class AXTabStripModule {
@@ -15613,12 +15753,14 @@ class AXTabComponent {
     template;
     dataContext;
     icon;
+    axId;
+    axClass;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXTabComponent, selector: "ax-tab", inputs: { caption: "caption", name: "name", active: "active", isCloseable: "isCloseable", template: "template", dataContext: "dataContext", icon: "icon" }, ngImport: i0, template: "<div [hidden]=\"!active\" class=\"ax tab-pane\">\n    <ng-content></ng-content>\n    <ng-container *ngIf=\"template\"\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"dataContext\"\n    >\n    </ng-container>\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXTabComponent, selector: "ax-tab", inputs: { caption: "caption", name: "name", active: "active", isCloseable: "isCloseable", template: "template", dataContext: "dataContext", icon: "icon", axId: "axId", axClass: "axClass" }, ngImport: i0, template: "<div \n  [hidden]=\"!active\" \n  class=\"ax tab-pane {{ axClass ? axClass : '' }}\" \n  [attr.id]=\"axId ? axId : null\"\n>\n    <ng-content></ng-content>\n    <ng-container *ngIf=\"template\"\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"dataContext\"\n    >\n    </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-tab', encapsulation: ViewEncapsulation.None, template: "<div [hidden]=\"!active\" class=\"ax tab-pane\">\n    <ng-content></ng-content>\n    <ng-container *ngIf=\"template\"\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"dataContext\"\n    >\n    </ng-container>\n</div>" }]
+            args: [{ selector: 'ax-tab', encapsulation: ViewEncapsulation.None, template: "<div \n  [hidden]=\"!active\" \n  class=\"ax tab-pane {{ axClass ? axClass : '' }}\" \n  [attr.id]=\"axId ? axId : null\"\n>\n    <ng-content></ng-content>\n    <ng-container *ngIf=\"template\"\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"dataContext\"\n    >\n    </ng-container>\n</div>\n" }]
         }], propDecorators: { caption: [{
                 type: Input
             }], name: [{
@@ -15633,6 +15775,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                 type: Input
             }], icon: [{
                 type: Input
+            }], axId: [{
+                type: Input
+            }], axClass: [{
+                type: Input
             }] } });
 
 /**
@@ -15653,6 +15799,8 @@ class AXTabViewComponent {
       as follows
     */
     // @ViewChild('container', {read: ViewContainerRef}) dynamicTabPlaceholder;
+    axId;
+    axClass;
     constructor(ref, _componentFactoryResolver, fullWidth = false) {
         this.ref = ref;
         this._componentFactoryResolver = _componentFactoryResolver;
@@ -15721,11 +15869,11 @@ class AXTabViewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTabViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: 'fullWidth', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXTabViewComponent, selector: "ax-tab-view", outputs: { onActiveTab: "onActiveTab" }, queries: [{ propertyName: "tabs", predicate: AXTabComponent }], viewQueries: [{ propertyName: "dynamicTabPlaceholder", first: true, predicate: DynamicTabsDirective, descendants: true }], ngImport: i0, template: "<ul class=\"ax nav-tabs\">\n  <li\n    *ngFor=\"let tab of tabs\"\n    (click)=\"selectTab(tab)\"\n    [class.active]=\"tab.active\"\n    [class.flex-sm-fill]=\"fullWidth\"\n  >\n    <i class=\"{{ tab.icon }}\"></i>\n    <span>{{ tab.caption }}</span>\n  </li>\n  <!-- dynamic tabs -->\n  <li\n    *ngFor=\"let tab of dynamicTabs\"\n    (click)=\"selectTab(tab)\"\n    [class.active]=\"tab.active\"\n    [class.flex-sm-fill]=\"fullWidth\"\n  >\n    <i class=\"{{ tab.icon }}\"></i>\n    <span>\n      {{ tab.caption }}\n      <i\n        *ngIf=\"tab.isCloseable\"\n        (click)=\"closeTab(tab)\"\n        class=\"far fa-times\"\n      >\n      </i>\n    </span>\n  </li>\n</ul>\n<div class=\"ax-tab-container\">\n  <ng-content></ng-content>\n<ng-template dynamic-tabs #container></ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DynamicTabsDirective, selector: "[dynamic-tabs]" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXTabViewComponent, selector: "ax-tab-view", inputs: { axId: "axId", axClass: "axClass" }, outputs: { onActiveTab: "onActiveTab" }, queries: [{ propertyName: "tabs", predicate: AXTabComponent }], viewQueries: [{ propertyName: "dynamicTabPlaceholder", first: true, predicate: DynamicTabsDirective, descendants: true }], ngImport: i0, template: "<ul \n  class=\"ax nav-tabs {{ axClass ? axClass : '' }}\" \n  [attr.id]=\"axId ? axId : null\"\n>\n  <li\n    *ngFor=\"let tab of tabs\"\n    (click)=\"selectTab(tab)\"\n    [class.active]=\"tab.active\"\n    [class.flex-sm-fill]=\"fullWidth\"\n    [attr.id]=\"axId ? axId + '-tab-' + tab.id : null\"\n    [attr.class]=\"axClass ? axClass + ' ' + (tab.active ? 'active' : '') : (tab.active ? 'active' : '')\"\n  >\n    <i class=\"{{ tab.icon }}\"></i>\n    <span>{{ tab.caption }}</span>\n  </li>\n  <!-- dynamic tabs -->\n  <li\n    *ngFor=\"let tab of dynamicTabs\"\n    (click)=\"selectTab(tab)\"\n    [class.active]=\"tab.active\"\n    [class.flex-sm-fill]=\"fullWidth\"\n    [attr.id]=\"axId ? axId + '-dynamic-tab-' + tab.id : null\"\n    [attr.class]=\"axClass ? axClass + ' ' + (tab.active ? 'active' : '') : (tab.active ? 'active' : '')\"\n  >\n    <i class=\"{{ tab.icon }}\"></i>\n    <span>\n      {{ tab.caption }}\n      <i\n        *ngIf=\"tab.isCloseable\"\n        (click)=\"closeTab(tab); $event.stopPropagation();\"\n        class=\"far fa-times\"\n        [attr.id]=\"axId ? axId + '-close-' + tab.id : null\"\n        [attr.class]=\"axClass ? axClass + '-close' : ''\"\n      >\n      </i>\n    </span>\n  </li>\n</ul>\n<div \n  class=\"ax-tab-container {{ axClass ? axClass + '-container' : '' }}\" \n  [attr.id]=\"axId ? axId + '-container' : null\"\n>\n  <ng-content></ng-content>\n  <ng-template dynamic-tabs #container></ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DynamicTabsDirective, selector: "[dynamic-tabs]" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTabViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-tab-view', encapsulation: ViewEncapsulation.None, template: "<ul class=\"ax nav-tabs\">\n  <li\n    *ngFor=\"let tab of tabs\"\n    (click)=\"selectTab(tab)\"\n    [class.active]=\"tab.active\"\n    [class.flex-sm-fill]=\"fullWidth\"\n  >\n    <i class=\"{{ tab.icon }}\"></i>\n    <span>{{ tab.caption }}</span>\n  </li>\n  <!-- dynamic tabs -->\n  <li\n    *ngFor=\"let tab of dynamicTabs\"\n    (click)=\"selectTab(tab)\"\n    [class.active]=\"tab.active\"\n    [class.flex-sm-fill]=\"fullWidth\"\n  >\n    <i class=\"{{ tab.icon }}\"></i>\n    <span>\n      {{ tab.caption }}\n      <i\n        *ngIf=\"tab.isCloseable\"\n        (click)=\"closeTab(tab)\"\n        class=\"far fa-times\"\n      >\n      </i>\n    </span>\n  </li>\n</ul>\n<div class=\"ax-tab-container\">\n  <ng-content></ng-content>\n<ng-template dynamic-tabs #container></ng-template>\n</div>\n" }]
+            args: [{ selector: 'ax-tab-view', encapsulation: ViewEncapsulation.None, template: "<ul \n  class=\"ax nav-tabs {{ axClass ? axClass : '' }}\" \n  [attr.id]=\"axId ? axId : null\"\n>\n  <li\n    *ngFor=\"let tab of tabs\"\n    (click)=\"selectTab(tab)\"\n    [class.active]=\"tab.active\"\n    [class.flex-sm-fill]=\"fullWidth\"\n    [attr.id]=\"axId ? axId + '-tab-' + tab.id : null\"\n    [attr.class]=\"axClass ? axClass + ' ' + (tab.active ? 'active' : '') : (tab.active ? 'active' : '')\"\n  >\n    <i class=\"{{ tab.icon }}\"></i>\n    <span>{{ tab.caption }}</span>\n  </li>\n  <!-- dynamic tabs -->\n  <li\n    *ngFor=\"let tab of dynamicTabs\"\n    (click)=\"selectTab(tab)\"\n    [class.active]=\"tab.active\"\n    [class.flex-sm-fill]=\"fullWidth\"\n    [attr.id]=\"axId ? axId + '-dynamic-tab-' + tab.id : null\"\n    [attr.class]=\"axClass ? axClass + ' ' + (tab.active ? 'active' : '') : (tab.active ? 'active' : '')\"\n  >\n    <i class=\"{{ tab.icon }}\"></i>\n    <span>\n      {{ tab.caption }}\n      <i\n        *ngIf=\"tab.isCloseable\"\n        (click)=\"closeTab(tab); $event.stopPropagation();\"\n        class=\"far fa-times\"\n        [attr.id]=\"axId ? axId + '-close-' + tab.id : null\"\n        [attr.class]=\"axClass ? axClass + '-close' : ''\"\n      >\n      </i>\n    </span>\n  </li>\n</ul>\n<div \n  class=\"ax-tab-container {{ axClass ? axClass + '-container' : '' }}\" \n  [attr.id]=\"axId ? axId + '-container' : null\"\n>\n  <ng-content></ng-content>\n  <ng-template dynamic-tabs #container></ng-template>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: undefined, decorators: [{
                     type: Attribute,
                     args: ['fullWidth']
@@ -15737,6 +15885,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                 args: [DynamicTabsDirective]
             }], onActiveTab: [{
                 type: Output
+            }], axId: [{
+                type: Input
+            }], axClass: [{
+                type: Input
             }] } });
 
 class AXTabViewModule {
@@ -16384,11 +16536,11 @@ class AXTreeSideMenuComponent extends AXBaseComponent {
         return keyFields;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTreeSideMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXTreeSideMenuComponent, selector: "ax-tree-side-menu", inputs: { cssClass: "cssClass", selectionMode: "selectionMode", selectionLevel: "selectionLevel", selectedFieldName: "selectedFieldName", selectNodesRecursive: "selectNodesRecursive", seletedKeyFields: "seletedKeyFields", keyField: "keyField", textField: "textField", hasChildField: "hasChildField", bordered: "bordered", lazyLoading: "lazyLoading", allowDrag: "allowDrag", size: "size", iconStart: "iconStart", closeIconName: "closeIconName", openIconName: "openIconName", contextMenuItems: "contextMenuItems" }, outputs: { selectionChanged: "selectionChanged", onItemOpening: "onItemOpening", onItemClick: "onItemClick", onItemClosing: "onItemClosing", onItemDrag: "onItemDrag", onItemMoved: "onItemMoved", onContextMenuItemClick: "onContextMenuItemClick" }, queries: [{ propertyName: "nodeTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"ax-tree-side-menu {{size}} {{cssClass}}\">\n  <ng-template #recursiveList let-list>\n    <ng-container *ngFor=\"let item of list\">\n      <li (click)=\"handleOnNodeClick($event,item,true)\"\n        class=\"{{item[hasChildField] ? '':'node'}} {{!!item.toggle  ? 'active':''}}\" style=\"display: flex;\"\n        [class.selected]=\"item.select\">\n        <div class=\"ax-tree-side-menu-item\" (click)=\"handleOnNodeClick($event,item,true)\">\n\n        \n\n          <div (click)=\"handleOnNodeClick($event,item,true)\" (dblclick)=\"itemdbClick($event,item)\">\n            <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\n              <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\n            </ng-container>\n            <ng-template #elseTemplate>\n              {{item[textField]}}\n            </ng-template>\n          </div>\n\n          <div class=\"start-side\" *ngIf=\"iconStart\">\n            <div *ngIf=\"item[hasChildField]\">\n              <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\n            </div>\n          </div>\n\n          <div class=\"start-side\" *ngIf=\"!iconStart\">\n            <div *ngIf=\"item[hasChildField]\" (click)=\"handleOnNodeClick($event,item,true)\">\n              <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\n            </div>\n          </div>\n        </div>\n        <ul class=\"ax-tree-side-menu-child\" *ngIf=\"item.toggle\">\n          <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\"></ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ng-template>\n  <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\n</ul>", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXTreeSideMenuComponent, selector: "ax-tree-side-menu", inputs: { cssClass: "cssClass", selectionMode: "selectionMode", selectionLevel: "selectionLevel", selectedFieldName: "selectedFieldName", selectNodesRecursive: "selectNodesRecursive", seletedKeyFields: "seletedKeyFields", keyField: "keyField", textField: "textField", hasChildField: "hasChildField", bordered: "bordered", lazyLoading: "lazyLoading", allowDrag: "allowDrag", size: "size", iconStart: "iconStart", closeIconName: "closeIconName", openIconName: "openIconName", contextMenuItems: "contextMenuItems" }, outputs: { selectionChanged: "selectionChanged", onItemOpening: "onItemOpening", onItemClick: "onItemClick", onItemClosing: "onItemClosing", onItemDrag: "onItemDrag", onItemMoved: "onItemMoved", onContextMenuItemClick: "onContextMenuItemClick" }, queries: [{ propertyName: "nodeTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"ax-tree-side-menu {{size}} {{cssClass}}\" [attr.id]=\"axId\" [attr.class]=\"axClass\">\n  <ng-template #recursiveList let-list>\n    <ng-container *ngFor=\"let item of list\">\n      <li \n        (click)=\"handleOnNodeClick($event, item, true)\"\n        class=\"{{item[hasChildField] ? '' : 'node'}} {{!!item.toggle ? 'active' : ''}}\"\n        style=\"display: flex;\"\n        [class.selected]=\"item.select\"\n        [attr.id]=\"axId ? axId + '-node-' + item[keyField] : null\"\n        [attr.data-id]=\"item[keyField]\"\n      >\n        <div class=\"ax-tree-side-menu-item\" (click)=\"handleOnNodeClick($event, item, true)\">\n          <div (click)=\"handleOnNodeClick($event, item, true)\" (dblclick)=\"itemdbClick($event, item)\">\n            <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\n              <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\n            </ng-container>\n            <ng-template #elseTemplate>\n              {{item[textField]}}\n            </ng-template>\n          </div>\n\n          <div class=\"start-side\" *ngIf=\"iconStart\">\n            <div *ngIf=\"item[hasChildField]\">\n              <i class=\"{{openIconName}}\" *ngIf=\"!!item.toggle && !item.loading\"></i>\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\n            </div>\n          </div>\n\n          <div class=\"start-side\" *ngIf=\"!iconStart\">\n            <div *ngIf=\"item[hasChildField]\" (click)=\"handleOnNodeClick($event, item, true)\">\n              <i class=\"{{openIconName}}\" *ngIf=\"!!item.toggle && !item.loading\"></i>\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\n            </div>\n          </div>\n        </div>\n        <ul class=\"ax-tree-side-menu-child\" *ngIf=\"item.toggle\">\n          <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\"></ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ng-template>\n  <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\n</ul>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTreeSideMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-tree-side-menu', encapsulation: ViewEncapsulation.None, template: "<ul class=\"ax-tree-side-menu {{size}} {{cssClass}}\">\n  <ng-template #recursiveList let-list>\n    <ng-container *ngFor=\"let item of list\">\n      <li (click)=\"handleOnNodeClick($event,item,true)\"\n        class=\"{{item[hasChildField] ? '':'node'}} {{!!item.toggle  ? 'active':''}}\" style=\"display: flex;\"\n        [class.selected]=\"item.select\">\n        <div class=\"ax-tree-side-menu-item\" (click)=\"handleOnNodeClick($event,item,true)\">\n\n        \n\n          <div (click)=\"handleOnNodeClick($event,item,true)\" (dblclick)=\"itemdbClick($event,item)\">\n            <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\n              <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\n            </ng-container>\n            <ng-template #elseTemplate>\n              {{item[textField]}}\n            </ng-template>\n          </div>\n\n          <div class=\"start-side\" *ngIf=\"iconStart\">\n            <div *ngIf=\"item[hasChildField]\">\n              <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\n            </div>\n          </div>\n\n          <div class=\"start-side\" *ngIf=\"!iconStart\">\n            <div *ngIf=\"item[hasChildField]\" (click)=\"handleOnNodeClick($event,item,true)\">\n              <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\n            </div>\n          </div>\n        </div>\n        <ul class=\"ax-tree-side-menu-child\" *ngIf=\"item.toggle\">\n          <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\"></ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ng-template>\n  <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\n</ul>" }]
+            args: [{ selector: 'ax-tree-side-menu', encapsulation: ViewEncapsulation.None, template: "<ul class=\"ax-tree-side-menu {{size}} {{cssClass}}\" [attr.id]=\"axId\" [attr.class]=\"axClass\">\n  <ng-template #recursiveList let-list>\n    <ng-container *ngFor=\"let item of list\">\n      <li \n        (click)=\"handleOnNodeClick($event, item, true)\"\n        class=\"{{item[hasChildField] ? '' : 'node'}} {{!!item.toggle ? 'active' : ''}}\"\n        style=\"display: flex;\"\n        [class.selected]=\"item.select\"\n        [attr.id]=\"axId ? axId + '-node-' + item[keyField] : null\"\n        [attr.data-id]=\"item[keyField]\"\n      >\n        <div class=\"ax-tree-side-menu-item\" (click)=\"handleOnNodeClick($event, item, true)\">\n          <div (click)=\"handleOnNodeClick($event, item, true)\" (dblclick)=\"itemdbClick($event, item)\">\n            <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\n              <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\n            </ng-container>\n            <ng-template #elseTemplate>\n              {{item[textField]}}\n            </ng-template>\n          </div>\n\n          <div class=\"start-side\" *ngIf=\"iconStart\">\n            <div *ngIf=\"item[hasChildField]\">\n              <i class=\"{{openIconName}}\" *ngIf=\"!!item.toggle && !item.loading\"></i>\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\n            </div>\n          </div>\n\n          <div class=\"start-side\" *ngIf=\"!iconStart\">\n            <div *ngIf=\"item[hasChildField]\" (click)=\"handleOnNodeClick($event, item, true)\">\n              <i class=\"{{openIconName}}\" *ngIf=\"!!item.toggle && !item.loading\"></i>\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\n            </div>\n          </div>\n        </div>\n        <ul class=\"ax-tree-side-menu-child\" *ngIf=\"item.toggle\">\n          <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\"></ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ng-template>\n  <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\n</ul>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { nodeTemplate: [{
                 type: ContentChild,
                 args: [TemplateRef, { static: true }]
@@ -17257,11 +17409,11 @@ class AXTreeViewComponent extends AXBaseComponent {
         return keyFields;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTreeViewComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: { selectionMode: "selectionMode", selectionLevel: "selectionLevel", selectedFieldName: "selectedFieldName", checkParents: "checkParents", checkChilds: "checkChilds", seletedKeyFields: "seletedKeyFields", keyField: "keyField", hasChildField: "hasChildField", bordered: "bordered", lazyLoading: "lazyLoading", allowDrag: "allowDrag", size: "size", disabled: "disabled", selectableField: "selectableField", contextMenuItems: "contextMenuItems" }, outputs: { selectionChanged: "selectionChanged", seletedKeyFieldsChanged: "seletedKeyFieldsChanged", onItemOpening: "onItemOpening", onItemClick: "onItemClick", onItemClosing: "onItemClosing", onItemDrag: "onItemDrag", onItemMoved: "onItemMoved", onContextMenuItemClick: "onContextMenuItemClick" }, queries: [{ propertyName: "nodeTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"ax treeview {{ size }}\">\n  <ng-template #recursiveList let-list>\n    <ng-container *ngFor=\"let item of list\">\n      <li\n        class=\"active {{ item[hasChildField] ? '' : 'node' }}\"\n        [class.bordered]=\"bordered\"\n        [class.selected]=\"item.select\"\n        [draggable]=\"allowDrag\"\n        (dragstart)=\"onDragStart($event, item)\"\n        [attr.data-id]=\"item[keyField]\"\n        (dragleave)=\"onDragEnd($event, item)\"\n        (dragend)=\"drop($event)\"\n      >\n        <div\n          [class.disabled]=\"disabled\"\n          axContextMenu\n          [contextDataItem]=\"item\"\n          [contextMenuItems]=\"contextMenuItems\"\n          [contextMenu]=\"menu\"\n          (onContextMenuItemClick)=\"handleOnContextMenuItem($event)\"\n          style=\"display: flex; cursor: pointer; align-items: center\"\n        >\n          <div class=\"start-side\">\n            <div\n              *ngIf=\"item[hasChildField]\"\n              class=\"collapse-icon\"\n              (click)=\"handleOnNodeClick($event, item, true)\"\n            >\n              <i\n                class=\"fal\"\n                [ngClass]=\"{\n                  'fa-minus': !!item.toggle,\n                  'fa-plus': !item.toggle,\n                  'fa-spinner fa-spin': item.loading\n                }\"\n              ></i>\n            </div>\n\n            <ax-check-box\n              *ngIf=\"showSelectBox\"\n              [disabled]=\"item.disabledCheckBox || disabled\"\n              [size]=\"size\"\n              [useTreeView]=\"true\"\n              [value]=\"item.select\"\n              (onClick)=\"internalSelectItem(item)\"\n            >\n            </ax-check-box>\n          </div>\n          <div\n            class=\"text-list\"\n            (click)=\"nodeClick(item)\"\n            (dblclick)=\"itemdbClick($event, item)\"\n          >\n            <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\n              <ng-container\n                *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item }\"\n              ></ng-container>\n            </ng-container>\n            <ng-template #elseTemplate>\n              {{ item.title }}\n            </ng-template>\n          </div>\n        </div>\n        <ul *ngIf=\"item.loading\">\n          <i class=\"far\"></i>\n        </ul>\n        <ul\n          class=\"child\"\n          *ngIf=\"item.toggle\"\n          style=\"background-color: white !important\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              recursiveList;\n              context: { $implicit: item.childeren }\n            \"\n          >\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"recursiveList; context: { $implicit: list }\"\n  ></ng-container>\n</ul>\n\n<ax-context-menu #menu></ax-context-menu>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["size", "width", "items"], outputs: ["onItemClick", "onClosed"] }, { kind: "directive", type: AXContextMenuDirective, selector: "[axContextMenu]", inputs: ["contextMenu", "contextDataItem", "contextMenuItems", "rtl"], outputs: ["onContextMenuItemClick"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: { selectionMode: "selectionMode", selectionLevel: "selectionLevel", selectedFieldName: "selectedFieldName", checkParents: "checkParents", checkChilds: "checkChilds", seletedKeyFields: "seletedKeyFields", keyField: "keyField", hasChildField: "hasChildField", bordered: "bordered", lazyLoading: "lazyLoading", allowDrag: "allowDrag", size: "size", disabled: "disabled", selectableField: "selectableField", contextMenuItems: "contextMenuItems" }, outputs: { selectionChanged: "selectionChanged", seletedKeyFieldsChanged: "seletedKeyFieldsChanged", onItemOpening: "onItemOpening", onItemClick: "onItemClick", onItemClosing: "onItemClosing", onItemDrag: "onItemDrag", onItemMoved: "onItemMoved", onContextMenuItemClick: "onContextMenuItemClick" }, queries: [{ propertyName: "nodeTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ul \n  class=\"ax treeview {{ size }} {{ axClass }}\"\n  [attr.id]=\"axId\"\n>\n  <ng-template #recursiveList let-list>\n    <ng-container *ngFor=\"let item of list\">\n      <li\n        class=\"active {{ item[hasChildField] ? '' : 'node' }}\"\n        [class.bordered]=\"bordered\"\n        [class.selected]=\"item.select\"\n        [draggable]=\"allowDrag\"\n        (dragstart)=\"onDragStart($event, item)\"\n        [attr.data-id]=\"item[keyField]\"\n        [attr.id]=\"axId ? axId + '-item-' + item[keyField] : null\"\n        (dragleave)=\"onDragEnd($event, item)\"\n        (dragend)=\"drop($event)\"\n      >\n        <div\n          [class.disabled]=\"disabled\"\n          axContextMenu\n          [contextDataItem]=\"item\"\n          [contextMenuItems]=\"contextMenuItems\"\n          [contextMenu]=\"menu\"\n          (onContextMenuItemClick)=\"handleOnContextMenuItem($event)\"\n          style=\"display: flex; cursor: pointer; align-items: center\"\n          [attr.id]=\"axId ? axId + '-div-' + item[keyField] : null\"\n          [attr.class]=\"axClass\"\n        >\n          <div class=\"start-side\">\n            <div\n              *ngIf=\"item[hasChildField]\"\n              class=\"collapse-icon\"\n              (click)=\"handleOnNodeClick($event, item, true)\"\n              [attr.id]=\"axId ? axId + '-collapse-' + item[keyField] : null\"\n            >\n              <i\n                class=\"fal\"\n                [ngClass]=\"{\n                  'fa-minus': !!item.toggle,\n                  'fa-plus': !item.toggle,\n                  'fa-spinner fa-spin': item.loading\n                }\"\n              ></i>\n            </div>\n\n            <ax-check-box\n              *ngIf=\"showSelectBox\"\n              [disabled]=\"item.disabledCheckBox || disabled\"\n              [size]=\"size\"\n              [useTreeView]=\"true\"\n              [value]=\"item.select\"\n              (onClick)=\"internalSelectItem(item)\"\n              [attr.id]=\"axId ? axId + '-checkbox-' + item[keyField] : null\"\n            >\n            </ax-check-box>\n          </div>\n          <div\n            class=\"text-list\"\n            (click)=\"nodeClick(item)\"\n            (dblclick)=\"itemdbClick($event, item)\"\n            [attr.id]=\"axId ? axId + '-text-' + item[keyField] : null\"\n          >\n            <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\n              <ng-container\n                *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item }\"\n              ></ng-container>\n            </ng-container>\n            <ng-template #elseTemplate>\n              {{ item.title }}\n            </ng-template>\n          </div>\n        </div>\n        <ul *ngIf=\"item.loading\">\n          <i class=\"far\"></i>\n        </ul>\n        <ul\n          class=\"child\"\n          *ngIf=\"item.toggle\"\n          style=\"background-color: white !important\"\n          [attr.id]=\"axId ? axId + '-child-' + item[keyField] : null\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              recursiveList;\n              context: { $implicit: item.childeren }\n            \"\n          >\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"recursiveList; context: { $implicit: list }\"\n  ></ng-container>\n</ul>\n\n<ax-context-menu #menu></ax-context-menu>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["size", "width", "items", "axId", "axClass"], outputs: ["onItemClick", "onClosed"] }, { kind: "directive", type: AXContextMenuDirective, selector: "[axContextMenu]", inputs: ["contextMenu", "contextDataItem", "contextMenuItems", "rtl"], outputs: ["onContextMenuItemClick"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXTreeViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-tree-view', encapsulation: ViewEncapsulation.None, template: "<ul class=\"ax treeview {{ size }}\">\n  <ng-template #recursiveList let-list>\n    <ng-container *ngFor=\"let item of list\">\n      <li\n        class=\"active {{ item[hasChildField] ? '' : 'node' }}\"\n        [class.bordered]=\"bordered\"\n        [class.selected]=\"item.select\"\n        [draggable]=\"allowDrag\"\n        (dragstart)=\"onDragStart($event, item)\"\n        [attr.data-id]=\"item[keyField]\"\n        (dragleave)=\"onDragEnd($event, item)\"\n        (dragend)=\"drop($event)\"\n      >\n        <div\n          [class.disabled]=\"disabled\"\n          axContextMenu\n          [contextDataItem]=\"item\"\n          [contextMenuItems]=\"contextMenuItems\"\n          [contextMenu]=\"menu\"\n          (onContextMenuItemClick)=\"handleOnContextMenuItem($event)\"\n          style=\"display: flex; cursor: pointer; align-items: center\"\n        >\n          <div class=\"start-side\">\n            <div\n              *ngIf=\"item[hasChildField]\"\n              class=\"collapse-icon\"\n              (click)=\"handleOnNodeClick($event, item, true)\"\n            >\n              <i\n                class=\"fal\"\n                [ngClass]=\"{\n                  'fa-minus': !!item.toggle,\n                  'fa-plus': !item.toggle,\n                  'fa-spinner fa-spin': item.loading\n                }\"\n              ></i>\n            </div>\n\n            <ax-check-box\n              *ngIf=\"showSelectBox\"\n              [disabled]=\"item.disabledCheckBox || disabled\"\n              [size]=\"size\"\n              [useTreeView]=\"true\"\n              [value]=\"item.select\"\n              (onClick)=\"internalSelectItem(item)\"\n            >\n            </ax-check-box>\n          </div>\n          <div\n            class=\"text-list\"\n            (click)=\"nodeClick(item)\"\n            (dblclick)=\"itemdbClick($event, item)\"\n          >\n            <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\n              <ng-container\n                *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item }\"\n              ></ng-container>\n            </ng-container>\n            <ng-template #elseTemplate>\n              {{ item.title }}\n            </ng-template>\n          </div>\n        </div>\n        <ul *ngIf=\"item.loading\">\n          <i class=\"far\"></i>\n        </ul>\n        <ul\n          class=\"child\"\n          *ngIf=\"item.toggle\"\n          style=\"background-color: white !important\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              recursiveList;\n              context: { $implicit: item.childeren }\n            \"\n          >\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"recursiveList; context: { $implicit: list }\"\n  ></ng-container>\n</ul>\n\n<ax-context-menu #menu></ax-context-menu>\n" }]
+            args: [{ selector: 'ax-tree-view', encapsulation: ViewEncapsulation.None, template: "<ul \n  class=\"ax treeview {{ size }} {{ axClass }}\"\n  [attr.id]=\"axId\"\n>\n  <ng-template #recursiveList let-list>\n    <ng-container *ngFor=\"let item of list\">\n      <li\n        class=\"active {{ item[hasChildField] ? '' : 'node' }}\"\n        [class.bordered]=\"bordered\"\n        [class.selected]=\"item.select\"\n        [draggable]=\"allowDrag\"\n        (dragstart)=\"onDragStart($event, item)\"\n        [attr.data-id]=\"item[keyField]\"\n        [attr.id]=\"axId ? axId + '-item-' + item[keyField] : null\"\n        (dragleave)=\"onDragEnd($event, item)\"\n        (dragend)=\"drop($event)\"\n      >\n        <div\n          [class.disabled]=\"disabled\"\n          axContextMenu\n          [contextDataItem]=\"item\"\n          [contextMenuItems]=\"contextMenuItems\"\n          [contextMenu]=\"menu\"\n          (onContextMenuItemClick)=\"handleOnContextMenuItem($event)\"\n          style=\"display: flex; cursor: pointer; align-items: center\"\n          [attr.id]=\"axId ? axId + '-div-' + item[keyField] : null\"\n          [attr.class]=\"axClass\"\n        >\n          <div class=\"start-side\">\n            <div\n              *ngIf=\"item[hasChildField]\"\n              class=\"collapse-icon\"\n              (click)=\"handleOnNodeClick($event, item, true)\"\n              [attr.id]=\"axId ? axId + '-collapse-' + item[keyField] : null\"\n            >\n              <i\n                class=\"fal\"\n                [ngClass]=\"{\n                  'fa-minus': !!item.toggle,\n                  'fa-plus': !item.toggle,\n                  'fa-spinner fa-spin': item.loading\n                }\"\n              ></i>\n            </div>\n\n            <ax-check-box\n              *ngIf=\"showSelectBox\"\n              [disabled]=\"item.disabledCheckBox || disabled\"\n              [size]=\"size\"\n              [useTreeView]=\"true\"\n              [value]=\"item.select\"\n              (onClick)=\"internalSelectItem(item)\"\n              [attr.id]=\"axId ? axId + '-checkbox-' + item[keyField] : null\"\n            >\n            </ax-check-box>\n          </div>\n          <div\n            class=\"text-list\"\n            (click)=\"nodeClick(item)\"\n            (dblclick)=\"itemdbClick($event, item)\"\n            [attr.id]=\"axId ? axId + '-text-' + item[keyField] : null\"\n          >\n            <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\n              <ng-container\n                *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item }\"\n              ></ng-container>\n            </ng-container>\n            <ng-template #elseTemplate>\n              {{ item.title }}\n            </ng-template>\n          </div>\n        </div>\n        <ul *ngIf=\"item.loading\">\n          <i class=\"far\"></i>\n        </ul>\n        <ul\n          class=\"child\"\n          *ngIf=\"item.toggle\"\n          style=\"background-color: white !important\"\n          [attr.id]=\"axId ? axId + '-child-' + item[keyField] : null\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              recursiveList;\n              context: { $implicit: item.childeren }\n            \"\n          >\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"recursiveList; context: { $implicit: list }\"\n  ></ng-container>\n</ul>\n\n<ax-context-menu #menu></ax-context-menu>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { nodeTemplate: [{
                 type: ContentChild,
                 args: [TemplateRef, { static: true }]
@@ -17586,11 +17738,11 @@ class AXUploadFileComponent extends AXBaseComponent {
         this.dropRef.classList.add('ax-upload-drop-over');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXUploadFileComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.AXRenderService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: AXToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXUploadFileComponent, selector: "ax-upload-file", inputs: { contentType: "contentType", dropRef: "dropRef", progressRef: "progressRef", label: "label", size: "size", type: "type", template: "template", disabled: "disabled" }, outputs: { onLoad: "onLoad", onProgress: "onProgress", onRemove: "onRemove" }, host: { styleAttribute: "display: block; width:100%; position: relative" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input\n  #fileInput\n  type=\"file\"\n  [accept]=\"accessTypes.join(',')\"\n  style=\"display: none\"\n  (change)=\"onFileChange($event)\"\n/>\n\n<ng-container *ngIf=\"type == 'inline'; else elseTemplate\">\n  <ax-form-group size=\"{{ size }}\">\n    <ax-text-box\n      [value]=\"fileName\"\n      readonly=\"true\"\n      [disabled]=\"disabled\"\n    ></ax-text-box>\n    <ax-button\n      type=\"blank light\"\n      icon=\"far fa-times\"\n      (click)=\"remove()\"\n      *ngIf=\"fileName\"\n      [tabIndex]=\"-1\"\n    >\n    </ax-button>\n    <ax-button\n      type=\"primary blank\"\n      icon=\"far fa-upload\"\n      (click)=\"open()\"\n      [disabled]=\"disabled\"\n      [tabIndex]=\"-1\"\n    >\n    </ax-button>\n  </ax-form-group>\n</ng-container>\n\n<ng-template #elseTemplate>\n  <div class=\"ax upload-file-box\" (click)=\"open()\" #dropRef></div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXUploadFileComponent, selector: "ax-upload-file", inputs: { contentType: "contentType", dropRef: "dropRef", progressRef: "progressRef", label: "label", size: "size", type: "type", template: "template", disabled: "disabled" }, outputs: { onLoad: "onLoad", onProgress: "onProgress", onRemove: "onRemove" }, host: { styleAttribute: "display: block; width:100%; position: relative" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input\n  #fileInput\n  type=\"file\"\n  [accept]=\"accessTypes.join(',')\"\n  [attr.id]=\"axId\"\n  [attr.class]=\"axClass\"\n  style=\"display: none\"\n  (change)=\"onFileChange($event)\"\n/>\n\n<ng-container *ngIf=\"type == 'inline'; else elseTemplate\">\n  <ax-form-group size=\"{{ size }}\">\n    <ax-text-box\n      [value]=\"fileName\"\n      readonly=\"true\"\n      [disabled]=\"disabled\"\n      [attr.id]=\"axId ? axId + '-textbox' : null\"\n      [attr.class]=\"axClass\"\n    ></ax-text-box>\n    <ax-button\n      type=\"blank light\"\n      icon=\"far fa-times\"\n      (click)=\"remove()\"\n      *ngIf=\"fileName\"\n      [tabIndex]=\"-1\"\n      [attr.id]=\"axId ? axId + '-remove-button' : null\"\n      [attr.class]=\"axClass\"\n    >\n    </ax-button>\n    <ax-button\n      type=\"primary blank\"\n      icon=\"far fa-upload\"\n      (click)=\"open()\"\n      [disabled]=\"disabled\"\n      [tabIndex]=\"-1\"\n      [attr.id]=\"axId ? axId + '-upload-button' : null\"\n      [attr.class]=\"axClass\"\n    >\n    </ax-button>\n  </ax-form-group>\n</ng-container>\n\n<ng-template #elseTemplate>\n  <div\n    class=\"ax upload-file-box\"\n    (click)=\"open()\"\n    #dropRef\n    [attr.id]=\"axId ? axId + '-drop-area' : null\"\n    [attr.class]=\"axClass\"\n  ></div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXUploadFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-upload-file', encapsulation: ViewEncapsulation.None, host: { style: 'display: block; width:100%; position: relative' }, template: "<input\n  #fileInput\n  type=\"file\"\n  [accept]=\"accessTypes.join(',')\"\n  style=\"display: none\"\n  (change)=\"onFileChange($event)\"\n/>\n\n<ng-container *ngIf=\"type == 'inline'; else elseTemplate\">\n  <ax-form-group size=\"{{ size }}\">\n    <ax-text-box\n      [value]=\"fileName\"\n      readonly=\"true\"\n      [disabled]=\"disabled\"\n    ></ax-text-box>\n    <ax-button\n      type=\"blank light\"\n      icon=\"far fa-times\"\n      (click)=\"remove()\"\n      *ngIf=\"fileName\"\n      [tabIndex]=\"-1\"\n    >\n    </ax-button>\n    <ax-button\n      type=\"primary blank\"\n      icon=\"far fa-upload\"\n      (click)=\"open()\"\n      [disabled]=\"disabled\"\n      [tabIndex]=\"-1\"\n    >\n    </ax-button>\n  </ax-form-group>\n</ng-container>\n\n<ng-template #elseTemplate>\n  <div class=\"ax upload-file-box\" (click)=\"open()\" #dropRef></div>\n</ng-template>\n" }]
+            args: [{ selector: 'ax-upload-file', encapsulation: ViewEncapsulation.None, host: { style: 'display: block; width:100%; position: relative' }, template: "<input\n  #fileInput\n  type=\"file\"\n  [accept]=\"accessTypes.join(',')\"\n  [attr.id]=\"axId\"\n  [attr.class]=\"axClass\"\n  style=\"display: none\"\n  (change)=\"onFileChange($event)\"\n/>\n\n<ng-container *ngIf=\"type == 'inline'; else elseTemplate\">\n  <ax-form-group size=\"{{ size }}\">\n    <ax-text-box\n      [value]=\"fileName\"\n      readonly=\"true\"\n      [disabled]=\"disabled\"\n      [attr.id]=\"axId ? axId + '-textbox' : null\"\n      [attr.class]=\"axClass\"\n    ></ax-text-box>\n    <ax-button\n      type=\"blank light\"\n      icon=\"far fa-times\"\n      (click)=\"remove()\"\n      *ngIf=\"fileName\"\n      [tabIndex]=\"-1\"\n      [attr.id]=\"axId ? axId + '-remove-button' : null\"\n      [attr.class]=\"axClass\"\n    >\n    </ax-button>\n    <ax-button\n      type=\"primary blank\"\n      icon=\"far fa-upload\"\n      (click)=\"open()\"\n      [disabled]=\"disabled\"\n      [tabIndex]=\"-1\"\n      [attr.id]=\"axId ? axId + '-upload-button' : null\"\n      [attr.class]=\"axClass\"\n    >\n    </ax-button>\n  </ax-form-group>\n</ng-container>\n\n<ng-template #elseTemplate>\n  <div\n    class=\"ax upload-file-box\"\n    (click)=\"open()\"\n    #dropRef\n    [attr.id]=\"axId ? axId + '-drop-area' : null\"\n    [attr.class]=\"axClass\"\n  ></div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.AXRenderService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: AXToastService }], propDecorators: { contentType: [{
                 type: Input
             }], dropRef: [{