@acorex/components 5.2.1 → 5.2.2

package/fesm2020/acorex-components.mjs

@@ -1,6 +1,6 @@
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i0 from '@angular/core';
-import { Injectable, Inject, EventEmitter, Directive, Input, TemplateRef, NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, HostListener, HostBinding, Output, ContentChildren, ContentChild, Optional, ViewChild, ElementRef, ViewChildren } from '@angular/core';
+import { Injectable, Inject, EventEmitter, Directive, Input, TemplateRef, NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, HostListener, HostBinding, Output, ContentChildren, ViewChild, ContentChild, Optional, ElementRef, ViewChildren } from '@angular/core';
 import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import _ from 'lodash';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
@@ -135,8 +135,8 @@ function _BaseMenuComponentMixin(Base) {
                 this.valueField = 'id';
                 _isLoading.set(this, false);
                 _loadedItems.set(this, []);
-                this.visible = 'visible';
                 this.openMode = 'click';
+                this.direction = 'vertical';
                 this.onMenuItemClick = new EventEmitter();
                 _items.set(this, []);
             }
@@ -251,10 +251,11 @@ const BASEMENU_INPUTS = [
     'tooltip',
     'isOpen',
     'isActive',
-    'visible',
+    'visibleField',
     'disableField',
     'hasChildField',
     'openMode',
+    'direction',
 ];
 const BASEMENU_OUTPUT = ['onMenuItemClick'];
 
@@ -1172,7 +1173,7 @@ function _TextboxComponenetMixin(Base) {
         }
     };
 }
-const TEXTBOX_INPUTS = ['placeholder', 'maxLength', 'allowNull', 'debounceTime', 'type', ...VALUE_INPUTS];
+const TEXTBOX_INPUTS = ['placeholder', 'maxLength', 'allowNull', 'debounceTime', 'type', 'autoComplete', ...VALUE_INPUTS];
 const TEXTBOX_OUTPUT = [...VALUE_OUTPUT];
 
 const AXBaseComponentMixin = _BaseComponenetMixin(AXBaseComponent);
@@ -2914,17 +2915,65 @@ const CALENDAR_INPUTS = [
 ];
 const CALENDAR_OUTPUTS = ['depthChange', 'typeChange', 'disabledDatesChange', 'holidayDatesChange', 'onNavigate'];
 
+class AXPickerComponent extends AXBaseValueComponentMixin {
+    /**
+    *  @ignore
+    */
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.rows = 3;
+        this.items = [];
+        //   require.ensure(['path/to/your/module'], require => {
+        //     let yourModule = require('path/to/your/module');
+        //     yourModule.someFunction();
+        //  }); 
+    }
+    ngAfterViewInit() {
+    }
+    _handleMoveChange(e) {
+        this.value = this.items[e.value];
+    }
+    open() {
+    }
+}
+AXPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXPickerComponent, selector: "ax-picker", inputs: { readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", rows: "rows", width: "width", height: "height", itemHeight: "itemHeight", items: "items" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "ax-picker" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- <ax-carousel [width]=\"width\" [height]=\"height\" [fixedWidth]=\"width\" [fixedHeight]=\"itemHeight\"  [centered]=\"true\" [vertical]=\"true\" [loop]=\"false\" [wheel]=\"true\" (onSlideChanged)=\"_handleMoveChange($event)\">\r\n    <ax-carousel-item class=\"ax-picker-item\" *ngFor=\"let item of items\">\r\n        <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </ax-carousel-item>\r\n</ax-carousel> -->\r\n<!-- <ul class=\"scroller\">\r\n    <li *ngFor=\"let item of items\">\r\n        <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </li>\r\n\r\n</ul> -->\r\n\r\n<button id=\"picker\" #picker>open picker</button>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-picker', host: { class: 'ax-picker' }, inputs: [...VALUE_INPUTS], outputs: [...VALUE_OUTPUT], template: "<!-- <ax-carousel [width]=\"width\" [height]=\"height\" [fixedWidth]=\"width\" [fixedHeight]=\"itemHeight\"  [centered]=\"true\" [vertical]=\"true\" [loop]=\"false\" [wheel]=\"true\" (onSlideChanged)=\"_handleMoveChange($event)\">\r\n    <ax-carousel-item class=\"ax-picker-item\" *ngFor=\"let item of items\">\r\n        <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </ax-carousel-item>\r\n</ax-carousel> -->\r\n<!-- <ul class=\"scroller\">\r\n    <li *ngFor=\"let item of items\">\r\n        <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </li>\r\n\r\n</ul> -->\r\n\r\n<button id=\"picker\" #picker>open picker</button>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { picker: [{
+                type: ViewChild,
+                args: ['picker']
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }], rows: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], itemHeight: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }] } });
+
 const AXCalendarComponentMixin = _ClickableComponenetMixin(_InteractiveComponenetMixin(_ValueComponenetMixin(AXCalendarBaseComponent)));
 class AXCalendarComponent extends AXCalendarComponentMixin {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
         this.cdr = cdr;
+        this.interface = 'calendar';
         this._today = new AXDateTime(new Date(), this.type);
         this._navText = '';
         this._todayText = '';
         this._slots = [];
         this._dayNames = [];
         this._isUserInteraction = false;
+        this._pickerDays = [];
+        this._pickerMonths = [];
+        this._pickerYears = [];
     }
     get _viewRange() {
         const current = this._viewStartDate || this._today;
@@ -3136,7 +3185,12 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
             end: vr.endTime?.date,
             htmlElement: this._getHostElement()
         });
-        this._genearteSlots();
+        if (this.interface == 'calendar')
+            this._genearteSlots();
+        else {
+            this._generatePickerItems('year');
+            this._generatePickerItems('month');
+        }
         setTimeout(() => {
             this.focus();
         }, 50);
@@ -3171,13 +3225,55 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
     isWeekend(date) {
         return date.dayOfWeek == 7 || date.dayOfWeek == 1;
     }
+    _generatePickerItems(view) {
+        debugger;
+        switch (view) {
+            case 'year':
+                this._pickerYears = _.range(2000, 2050, 1);
+                break;
+            case 'month':
+                this._pickerMonths = new AXDateTimeRange(this._viewRange.startTime.startOf('year'), this._viewRange.startTime.endOf('year'))
+                    .enumurate('month')
+                    .map(c => ({
+                    text: c.format('MMM'),
+                    value: c.monthOfYear
+                }));
+                break;
+            default:
+                this._pickerDays = new AXDateTimeRange(this._viewRange.startTime.startOf('month'), this._viewRange.startTime.endOf('month'))
+                    .enumurate('day')
+                    .map(c => c.dayOfMonth);
+                this.cdr.detectChanges();
+                break;
+        }
+    }
+    _handlePickerChange(item, view) {
+        debugger;
+        if (!item)
+            return;
+        const date = this._viewRange.startTime;
+        switch (view) {
+            case 'year':
+                this._setDate(date.set('year', item.value).date);
+                break;
+            case 'month':
+                this._setDate(date.set('month', item.value.value).date);
+                this._generatePickerItems('day');
+                break;
+            default:
+                this._setDate(date.set('day', item.value).date);
+                break;
+        }
+    }
 }
 AXCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXCalendarComponent, selector: "ax-calendar", inputs: { readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", disabled: "disabled", tabIndex: "tabIndex", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", type: "type", holidayDates: "holidayDates" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-header\">\r\n    <div>\r\n        <ng-container *ngIf=\"activeView=='days'; else elseTemplate\">\r\n            <ax-button class=\"ax-nav-button\"  [text]=\"_navText.split(' ')[1]\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[0]\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n        </ng-template>\r\n    </div>\r\n    <div class=\"ax-flex\">\r\n        <ax-button class=\"ax-prev-button\" color=\"light\" look=\"blank\" (onClick)=\"_handlePrevClick($event)\"\r\n            [disabled]=\"disabled\">\r\n            <ax-prefix>\r\n                <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n            </ax-prefix>\r\n        </ax-button>\r\n        <ax-button class=\"ax-next-button\" color=\"light\" look=\"blank\" (onClick)=\"_handleNextClick($event)\"\r\n            [disabled]=\"disabled\">\r\n            <ax-prefix>\r\n                <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax-rotate-90\"></ax-icon>\r\n               \r\n            </ax-prefix>\r\n        </ax-button>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-body\">\r\n    <div [ngSwitch]=\"activeView\">\r\n        <ng-container *ngSwitchCase=\"'years'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'months'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n            <div class=\"ax-calendar-week\">\r\n                <div *ngFor=\"let d of _dayNames\">{{d}}</div>\r\n            </div>\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-footer\">\r\n    <ax-button class=\"dark:ax-text-danger\" [text]=\"_todayText\" color=\"dark\" look=\"blank\" size=\"sm\"\r\n        (onClick)=\"_handleGoToday()\" [disabled]=\"disabled\"></ax-button>\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXCalendarComponent, selector: "ax-calendar", inputs: { readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", disabled: "disabled", tabIndex: "tabIndex", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", type: "type", holidayDates: "holidayDates", interface: "interface" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\r\n    <div class=\"ax-calendar-header\">\r\n        <div>\r\n            <ng-container *ngIf=\"activeView=='days'; else elseTemplate\">\r\n                <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[1]\" color=\"light\" look=\"blank\"\r\n                    (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n                </ax-button>\r\n                <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[0]\" color=\"light\" look=\"blank\"\r\n                    (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n                </ax-button>\r\n            </ng-container>\r\n            <ng-template #elseTemplate>\r\n                <ax-button class=\"ax-nav-button\" [text]=\"_navText\" color=\"light\" look=\"blank\"\r\n                    (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n                </ax-button>\r\n            </ng-template>\r\n        </div>\r\n        <div class=\"ax-flex\">\r\n            <ax-button class=\"ax-prev-button\" color=\"light\" look=\"blank\" (onClick)=\"_handlePrevClick($event)\"\r\n                [disabled]=\"disabled\">\r\n                <ax-prefix>\r\n                    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n                </ax-prefix>\r\n            </ax-button>\r\n            <ax-button class=\"ax-next-button\" color=\"light\" look=\"blank\" (onClick)=\"_handleNextClick($event)\"\r\n                [disabled]=\"disabled\">\r\n                <ax-prefix>\r\n                    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax-rotate-90\"></ax-icon>\r\n\r\n                </ax-prefix>\r\n            </ax-button>\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-body\">\r\n        <div [ngSwitch]=\"activeView\">\r\n            <ng-container *ngSwitchCase=\"'years'\">\r\n                <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n                    <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [ngClass]=\"slot.cssClass\"\r\n                        (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'months'\">\r\n                <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n                    <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                        (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <div class=\"ax-calendar-week\">\r\n                    <div *ngFor=\"let d of _dayNames\">{{d}}</div>\r\n                </div>\r\n                <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n                    <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                        (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-footer\">\r\n        <ax-button class=\"dark:ax-text-danger\" [text]=\"_todayText\" color=\"dark\" look=\"blank\" size=\"sm\"\r\n            (onClick)=\"_handleGoToday()\" [disabled]=\"disabled\"></ax-button>\r\n    </div>\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n    <div class=\"ax-calendar-picker\">\r\n        <ax-picker width=\"100%%\" height=\"300px\" itemHeight=\"48px\" [items]=\"_pickerYears\"\r\n            (onValueChanged)=\"_handlePickerChange($event,'year')\">\r\n            <ng-template let-item>\r\n                {{item}}\r\n            </ng-template>\r\n        </ax-picker>\r\n        <ax-picker width=\"100%\" height=\"300px\" itemHeight=\"48px\" [items]=\"_pickerMonths\"\r\n            (onValueChanged)=\"_handlePickerChange($event,'month')\">\r\n            <ng-template let-item>\r\n                {{item.text}}\r\n            </ng-template>\r\n        </ax-picker>\r\n        <ax-picker width=\"100%\" height=\"300px\" itemHeight=\"48px\" [items]=\"_pickerDays\"\r\n            (onValueChanged)=\"_handlePickerChange($event,'day')\">\r\n            <ng-template let-item>\r\n                {{item}}\r\n            </ng-template>\r\n        </ax-picker>\r\n    </div>\r\n</ng-template>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPickerComponent, selector: "ax-picker", inputs: ["readonly", "allowNull", "value", "debounceTime", "name", "checked", "rows", "width", "height", "itemHeight", "items"], outputs: ["valueChange", "onValueChanged"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-calendar', changeDetection: ChangeDetectionStrategy.OnPush, inputs: [...VALUE_INPUTS, ...INTERACTIVE_INPUTS, ...CALENDAR_INPUTS], outputs: [...VALUE_OUTPUT, ...INTERACTIVE_OUTPUT, ...CALENDAR_OUTPUTS], encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-calendar-header\">\r\n    <div>\r\n        <ng-container *ngIf=\"activeView=='days'; else elseTemplate\">\r\n            <ax-button class=\"ax-nav-button\"  [text]=\"_navText.split(' ')[1]\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[0]\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n        </ng-template>\r\n    </div>\r\n    <div class=\"ax-flex\">\r\n        <ax-button class=\"ax-prev-button\" color=\"light\" look=\"blank\" (onClick)=\"_handlePrevClick($event)\"\r\n            [disabled]=\"disabled\">\r\n            <ax-prefix>\r\n                <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n            </ax-prefix>\r\n        </ax-button>\r\n        <ax-button class=\"ax-next-button\" color=\"light\" look=\"blank\" (onClick)=\"_handleNextClick($event)\"\r\n            [disabled]=\"disabled\">\r\n            <ax-prefix>\r\n                <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax-rotate-90\"></ax-icon>\r\n               \r\n            </ax-prefix>\r\n        </ax-button>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-body\">\r\n    <div [ngSwitch]=\"activeView\">\r\n        <ng-container *ngSwitchCase=\"'years'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'months'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n            <div class=\"ax-calendar-week\">\r\n                <div *ngFor=\"let d of _dayNames\">{{d}}</div>\r\n            </div>\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-footer\">\r\n    <ax-button class=\"dark:ax-text-danger\" [text]=\"_todayText\" color=\"dark\" look=\"blank\" size=\"sm\"\r\n        (onClick)=\"_handleGoToday()\" [disabled]=\"disabled\"></ax-button>\r\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { __hostClass: [{
+            args: [{ selector: 'ax-calendar', changeDetection: ChangeDetectionStrategy.OnPush, inputs: [...VALUE_INPUTS, ...INTERACTIVE_INPUTS, ...CALENDAR_INPUTS], outputs: [...VALUE_OUTPUT, ...INTERACTIVE_OUTPUT, ...CALENDAR_OUTPUTS], encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\r\n    <div class=\"ax-calendar-header\">\r\n        <div>\r\n            <ng-container *ngIf=\"activeView=='days'; else elseTemplate\">\r\n                <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[1]\" color=\"light\" look=\"blank\"\r\n                    (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n                </ax-button>\r\n                <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[0]\" color=\"light\" look=\"blank\"\r\n                    (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n                </ax-button>\r\n            </ng-container>\r\n            <ng-template #elseTemplate>\r\n                <ax-button class=\"ax-nav-button\" [text]=\"_navText\" color=\"light\" look=\"blank\"\r\n                    (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n                </ax-button>\r\n            </ng-template>\r\n        </div>\r\n        <div class=\"ax-flex\">\r\n            <ax-button class=\"ax-prev-button\" color=\"light\" look=\"blank\" (onClick)=\"_handlePrevClick($event)\"\r\n                [disabled]=\"disabled\">\r\n                <ax-prefix>\r\n                    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n                </ax-prefix>\r\n            </ax-button>\r\n            <ax-button class=\"ax-next-button\" color=\"light\" look=\"blank\" (onClick)=\"_handleNextClick($event)\"\r\n                [disabled]=\"disabled\">\r\n                <ax-prefix>\r\n                    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax-rotate-90\"></ax-icon>\r\n\r\n                </ax-prefix>\r\n            </ax-button>\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-body\">\r\n        <div [ngSwitch]=\"activeView\">\r\n            <ng-container *ngSwitchCase=\"'years'\">\r\n                <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n                    <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [ngClass]=\"slot.cssClass\"\r\n                        (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'months'\">\r\n                <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n                    <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                        (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <div class=\"ax-calendar-week\">\r\n                    <div *ngFor=\"let d of _dayNames\">{{d}}</div>\r\n                </div>\r\n                <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n                    <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                        (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-footer\">\r\n        <ax-button class=\"dark:ax-text-danger\" [text]=\"_todayText\" color=\"dark\" look=\"blank\" size=\"sm\"\r\n            (onClick)=\"_handleGoToday()\" [disabled]=\"disabled\"></ax-button>\r\n    </div>\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n    <div class=\"ax-calendar-picker\">\r\n        <ax-picker width=\"100%%\" height=\"300px\" itemHeight=\"48px\" [items]=\"_pickerYears\"\r\n            (onValueChanged)=\"_handlePickerChange($event,'year')\">\r\n            <ng-template let-item>\r\n                {{item}}\r\n            </ng-template>\r\n        </ax-picker>\r\n        <ax-picker width=\"100%\" height=\"300px\" itemHeight=\"48px\" [items]=\"_pickerMonths\"\r\n            (onValueChanged)=\"_handlePickerChange($event,'month')\">\r\n            <ng-template let-item>\r\n                {{item.text}}\r\n            </ng-template>\r\n        </ax-picker>\r\n        <ax-picker width=\"100%\" height=\"300px\" itemHeight=\"48px\" [items]=\"_pickerDays\"\r\n            (onValueChanged)=\"_handlePickerChange($event,'day')\">\r\n            <ng-template let-item>\r\n                {{item}}\r\n            </ng-template>\r\n        </ax-picker>\r\n    </div>\r\n</ng-template>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { interface: [{
+                type: Input
+            }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -3730,80 +3826,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-class AXPickerComponent extends AXBaseComponent {
-    /**
-    *  @ignore
-    */
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-        this.items = [];
-        this.onItemChanged = new EventEmitter();
-    }
-    _emitOnSlideChanged(i) {
-        this.onItemChanged.emit({
-            component: this,
-            value: this.items[i],
-        });
-    }
-    handleMoveChange(e) {
-        this._emitOnSlideChanged(e.value);
-    }
-}
-AXPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXPickerComponent, selector: "ax-picker", inputs: { width: "width", height: "height", itemHeight: "itemHeight", items: "items" }, outputs: { onItemChanged: "onItemChanged" }, host: { classAttribute: "ax-picker" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-carousel [width]=\"width\" [height]=\"height\" [fixedWidth]=\"width\" [fixedHeight]=\"itemHeight\" [drag]=\"'free'\" [centered]=\"true\" [vertical]=\"true\" [loop]=\"true\" [wheel]=\"true\" (onSlideChanged)=\"handleMoveChange($event)\">\r\n    <ax-carousel-item class=\"ax-picker-item\" *ngFor=\"let item of items\">\r\n        <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </ax-carousel-item>\r\n</ax-carousel>\r\n", components: [{ type: AXCarouselComponent, selector: "ax-carousel", inputs: ["perMove", "focus", "breakpoints", "heightRatio", "height", "fixedHeight", "width", "fixedWidth", "perPage", "gap", "autoplay", "snap", "autoWidth", "drag", "wheel", "interval", "padding", "centered", "vertical", "loop", "rewind"], outputs: ["onOptionsChanged", "onSlideChanged", "perMoveChange", "focusChange", "breakpointsChange", "heightRatioChange", "heightChange", "fixedHeightChange", "widthChange", "fixedWidthChange", "perPageChange", "autoplayChange", "snapChange", "autoWidthChange", "dragChange", "wheelChange", "intervalChange", "paddingChange", "centeredChange", "verticalChange", "loopChange", "rewindChange", "onItemsChanged"] }, { type: AXCarouselItemComponent, selector: "ax-carousel-item" }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-picker', host: { class: 'ax-picker' }, template: "<ax-carousel [width]=\"width\" [height]=\"height\" [fixedWidth]=\"width\" [fixedHeight]=\"itemHeight\" [drag]=\"'free'\" [centered]=\"true\" [vertical]=\"true\" [loop]=\"true\" [wheel]=\"true\" (onSlideChanged)=\"handleMoveChange($event)\">\r\n    <ax-carousel-item class=\"ax-picker-item\" *ngFor=\"let item of items\">\r\n        <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </ax-carousel-item>\r\n</ax-carousel>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { itemTemplate: [{
-                type: ContentChild,
-                args: [TemplateRef]
-            }], width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], itemHeight: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], onItemChanged: [{
-                type: Output
-            }] } });
-
-class AXInlineCalendarComponent extends AXBaseComponent {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this._days = [];
-    }
-    ngOnInit() {
-        for (let i = 1; i < 31; i++) {
-            this._days.push({ text: i.toString(), id: i });
-        }
-    }
-    handleDayChange(e) {
-        console.log(e);
-    }
-}
-AXInlineCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXInlineCalendarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXInlineCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXInlineCalendarComponent, selector: "ax-inline-calendar", host: { classAttribute: "ax-inline-calendar" }, usesInheritance: true, ngImport: i0, template: `
-     <ax-picker width="100%%" height="300px" itemHeight="48px" [items]="_days" (onItemChanged)="handleDayChange($event)"></ax-picker>
-     <ax-picker width="100%" height="300px" itemHeight="48px" [items]="_days" (onItemChanged)="handleDayChange($event)"></ax-picker>
-     <ax-picker width="100%%" height="300px" itemHeight="48px" [items]="_days" (onItemChanged)="handleDayChange($event)"></ax-picker>`, isInline: true, styles: [""], components: [{ type: AXPickerComponent, selector: "ax-picker", inputs: ["width", "height", "itemHeight", "items"], outputs: ["onItemChanged"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXInlineCalendarComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-inline-calendar',
-                    template: `
-     <ax-picker width="100%%" height="300px" itemHeight="48px" [items]="_days" (onItemChanged)="handleDayChange($event)"></ax-picker>
-     <ax-picker width="100%" height="300px" itemHeight="48px" [items]="_days" (onItemChanged)="handleDayChange($event)"></ax-picker>
-     <ax-picker width="100%%" height="300px" itemHeight="48px" [items]="_days" (onItemChanged)="handleDayChange($event)"></ax-picker>`,
-                    styles: [``],
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-inline-calendar' }
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
-
 class AXCarouselArrowsComponent extends AXBaseComponentMixin {
     constructor(elementRef, cdr, parent) {
         super(elementRef, cdr);
@@ -3956,12 +3978,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }] });
 
-const COMPONENT$g = [AXCalendarComponent, AXInlineCalendarComponent];
+const COMPONENT$g = [AXCalendarComponent];
 const MODULES$g = [CommonModule, AXButtonModule, AXIconModule, AXEditorDecoratorModule, AXDateTimeModule, AXPickerModule];
 class AXCalendarModule {
 }
 AXCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent, AXInlineCalendarComponent], imports: [CommonModule, AXButtonModule, AXIconModule, AXEditorDecoratorModule, AXDateTimeModule, AXPickerModule], exports: [AXCalendarComponent, AXInlineCalendarComponent] });
+AXCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent], imports: [CommonModule, AXButtonModule, AXIconModule, AXEditorDecoratorModule, AXDateTimeModule, AXPickerModule], exports: [AXCalendarComponent] });
 AXCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarModule, providers: [], imports: [[...MODULES$g]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarModule, decorators: [{
             type: NgModule,
@@ -4922,7 +4944,7 @@ class AXDatePickerComponent extends AXBaseDatePickerMixin {
     }
 }
 AXDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$4.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", format: "format", interface: "interface" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange", typeChange: "typeChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", formatChange: "formatChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "_calendar", first: true, predicate: AXCalendarComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\" [class.ax-state-disabled]=\"disabled\"\r\n        [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [attr.tabindex]=\"_isMobile ? -1 : tabIndex\"\r\n        [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\" (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-calendar-options\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" (onOpened)=\"_handlePopoverOpened($event)\">\r\n    <div class=\"ax-overlay-pane\" [class.ax-w-full]=\"_isMobile\">\r\n        <div *ngIf=\"_isMobile\" class=\"ax-header\">\r\n            <span >{{placeholder || 'Choose a date'}}</span>\r\n            <i class=\"ax-ic ax-ic-close \"\r\n                (click)=\"close()\" tabindex=\"1\"></i>\r\n        </div>\r\n        <ng-container *ngIf=\"interface === 'calendar'; then calendarTemplate; else pickerTemplate\"></ng-container>\r\n        <ng-template #calendarTemplate>\r\n            <ax-calendar #calendar [disabled]=\"disabled\" [readonly]=\"readonly\" \r\n            [(value)]=\"value\" \r\n            [min]=\"min\" \r\n            [max]=\"max\"\r\n            [disabledDates]=\"disabledDates\" \r\n            [holidayDates]=\"holidayDates\" \r\n            [depth]=\"depth\" \r\n            (onNavigate)=\"_handleOnNavigate($event)\"\r\n            [type]=\"type\">\r\n        </ax-calendar>\r\n        </ng-template>\r\n        <ng-template #pickerTemplate>\r\n        </ng-template>\r\n        \r\n    </div>\r\n</ax-popover>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"], outputs: ["onOpened", "onClosed"] }, { type: AXCalendarComponent, selector: "ax-calendar", inputs: ["readonly", "allowNull", "value", "debounceTime", "name", "checked", "disabled", "tabIndex", "depth", "activeView", "min", "max", "disabledDates", "type", "holidayDates"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange", "typeChange", "disabledDatesChange", "holidayDatesChange", "onNavigate"] }], directives: [{ type: i1$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]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", format: "format", interface: "interface" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange", typeChange: "typeChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", formatChange: "formatChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "_calendar", first: true, predicate: AXCalendarComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\" [class.ax-state-disabled]=\"disabled\"\r\n        [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [attr.tabindex]=\"_isMobile ? -1 : tabIndex\"\r\n        [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\" (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-calendar-options\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" (onOpened)=\"_handlePopoverOpened($event)\">\r\n    <div class=\"ax-overlay-pane\" [class.ax-w-full]=\"_isMobile\">\r\n        <div *ngIf=\"_isMobile\" class=\"ax-header\">\r\n            <span >{{placeholder || 'Choose a date'}}</span>\r\n            <i class=\"ax-ic ax-ic-close \"\r\n                (click)=\"close()\" tabindex=\"1\"></i>\r\n        </div>\r\n        <ng-container *ngIf=\"interface === 'calendar'; then calendarTemplate; else pickerTemplate\"></ng-container>\r\n        <ng-template #calendarTemplate>\r\n            <ax-calendar #calendar [disabled]=\"disabled\" [readonly]=\"readonly\" \r\n            [(value)]=\"value\" \r\n            [min]=\"min\" \r\n            [max]=\"max\"\r\n            [disabledDates]=\"disabledDates\" \r\n            [holidayDates]=\"holidayDates\" \r\n            [depth]=\"depth\" \r\n            (onNavigate)=\"_handleOnNavigate($event)\"\r\n            [type]=\"type\">\r\n        </ax-calendar>\r\n        </ng-template>\r\n        <ng-template #pickerTemplate>\r\n        </ng-template>\r\n        \r\n    </div>\r\n</ax-popover>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"], outputs: ["onOpened", "onClosed"] }, { type: AXCalendarComponent, selector: "ax-calendar", inputs: ["readonly", "allowNull", "value", "debounceTime", "name", "checked", "disabled", "tabIndex", "depth", "activeView", "min", "max", "disabledDates", "type", "holidayDates", "interface"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange", "typeChange", "disabledDatesChange", "holidayDatesChange", "onNavigate"] }], directives: [{ type: i1$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]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-date-picker', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...CALENDAR_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...CALENDAR_OUTPUTS], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\" [class.ax-state-disabled]=\"disabled\"\r\n        [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [attr.tabindex]=\"_isMobile ? -1 : tabIndex\"\r\n        [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\" (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-calendar-options\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" (onOpened)=\"_handlePopoverOpened($event)\">\r\n    <div class=\"ax-overlay-pane\" [class.ax-w-full]=\"_isMobile\">\r\n        <div *ngIf=\"_isMobile\" class=\"ax-header\">\r\n            <span >{{placeholder || 'Choose a date'}}</span>\r\n            <i class=\"ax-ic ax-ic-close \"\r\n                (click)=\"close()\" tabindex=\"1\"></i>\r\n        </div>\r\n        <ng-container *ngIf=\"interface === 'calendar'; then calendarTemplate; else pickerTemplate\"></ng-container>\r\n        <ng-template #calendarTemplate>\r\n            <ax-calendar #calendar [disabled]=\"disabled\" [readonly]=\"readonly\" \r\n            [(value)]=\"value\" \r\n            [min]=\"min\" \r\n            [max]=\"max\"\r\n            [disabledDates]=\"disabledDates\" \r\n            [holidayDates]=\"holidayDates\" \r\n            [depth]=\"depth\" \r\n            (onNavigate)=\"_handleOnNavigate($event)\"\r\n            [type]=\"type\">\r\n        </ax-calendar>\r\n        </ng-template>\r\n        <ng-template #pickerTemplate>\r\n        </ng-template>\r\n        \r\n    </div>\r\n</ax-popover>" }]
@@ -4971,10 +4993,10 @@ class AXTextBoxComponent extends AXBaseTextBoxMixin {
     }
 }
 AXTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXTextBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [attr.type]=\"type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete\">\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>", directives: [{ type: i1$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]" }, { type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$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 });
+AXTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [attr.autocomplete]=\"autoComplete\" [attr.type]=\"type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\">\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>", directives: [{ type: i1$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]" }, { type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$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: "13.3.2", ngImport: i0, type: AXTextBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-text-box', inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-editor-container' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [attr.type]=\"type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete\">\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>" }]
+            args: [{ selector: 'ax-text-box', inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-editor-container' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [attr.autocomplete]=\"autoComplete\" [attr.type]=\"type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\">\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
 class AXTextBoxModule {
@@ -5751,15 +5773,15 @@ class AXMenuComponent extends AXBaseMenuMixin {
     ngAfterViewInit() {
         super.onViewInit();
     }
-    onMenuClick(e, item) {
-        if (!item[this.disableField]) {
-            this.notActive(this.displayItems);
+    _onMenuClick(e, item) {
+        if (!item[this.disableField] && this.openMode === 'click') {
+            this._notActive(this.displayItems);
             if (item.children?.length > 0 || item[this.hasChildField]) {
                 if (item.children?.length > 0 && item[this.hasChildField]) {
                     item.children = [];
                 }
                 if (item.children?.length > 0) {
-                    this.closeChild(item.children);
+                    this._closeChild(item.children);
                 }
                 item.isOpen = !item.isOpen;
             }
@@ -5776,28 +5798,79 @@ class AXMenuComponent extends AXBaseMenuMixin {
         e.stopPropagation();
         e.preventDefault();
     }
-    notActive(items) {
+    _notActive(items) {
         items.forEach((element) => {
             element.isActive = false;
             if (element.children?.length > 0) {
-                this.notActive(element.children);
+                this._notActive(element.children);
             }
         });
     }
-    closeChild(items) {
+    _closeChild(items) {
         items.forEach((element) => {
             element.isOpen = false;
             if (element.children?.length > 0) {
-                this.closeChild(element.children);
+                this._closeChild(element.children);
             }
         });
     }
+    _onMouseEnter(e, item) {
+        if (this.openMode === 'hover') {
+            if (!item[this.disableField]) {
+                if (item.children?.length > 0 || item[this.hasChildField]) {
+                    if (item.children?.length > 0 && item[this.hasChildField]) {
+                        item.children = [];
+                    }
+                    if (item.children?.length > 0) {
+                        this._closeChild(item.children);
+                    }
+                    item.isOpen = true;
+                }
+                this.onMenuItemClick.emit({
+                    component: this,
+                    item: item,
+                    nativeEvent: e,
+                });
+                if (item.isOpen && item[this.hasChildField]) {
+                    this._fetchData(item.id);
+                }
+            }
+        }
+        e.stopPropagation();
+        e.preventDefault();
+    }
+    _onMouseLeave(e, item) {
+        if (this.openMode === 'hover') {
+            if (!item[this.disableField]) {
+                if (item.children?.length > 0 || item[this.hasChildField]) {
+                    if (item.children?.length > 0 && item[this.hasChildField]) {
+                        item.children = [];
+                    }
+                    if (item.children?.length > 0) {
+                        this._closeChild(item.children);
+                    }
+                    item.isOpen = false;
+                }
+                if (item.isOpen && item[this.hasChildField]) {
+                    this._fetchData(item.id);
+                }
+            }
+        }
+    }
+    _getDirection() {
+        if (this.direction === 'horizontal') {
+            return 'horizontal-mode';
+        }
+        else {
+            return 'vertical-mode';
+        }
+    }
 }
 AXMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXMenuComponent, selector: "ax-menu", inputs: { disabled: "disabled", tabIndex: "tabIndex", textField: "textField", valueField: "valueField", items: "items", id: "id", parentId: "parentId", icon: "icon", tooltip: "tooltip", isOpen: "isOpen", isActive: "isActive", visible: "visible", disableField: "disableField", hasChildField: "hasChildField", openMode: "openMode" }, outputs: { onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-menu" }, queries: [{ propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ul>\r\n  <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: displayItems }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #recursiveListTmpl let-list=\"list\">\r\n  <ng-container *ngFor=\"let item of list;  trackBy: _trackLoaded\">\r\n    <li [class.ax-state-disabled]=\"item[disableField]\" *ngIf=\"item.visible !=false\" (click)=\"onMenuClick($event,item)\">\r\n      <a [ngClass]=\"{'active': item.isActive}\">\r\n        <div class=\"ax-menu-start-side\">\r\n          <ax-icon [class]=\"item.icon || item[icon]\" *ngIf=\"item.icon || item[icon]\"></ax-icon>\r\n          <span>{{_getItemDisplayTextTemplte(item)}}</span>\r\n        </div>\r\n        <div class=\"ax-menu-end-side\">\r\n          <ax-icon [ngClass]=\"{'active-icon': item.isOpen}\"\r\n            *ngIf=\"item?.children?.length > 0 && !isLoading || item[hasChildField] && !isLoading\" class=\"ax-ic-chevron\">\r\n          </ax-icon>\r\n        </div>\r\n        <ax-loading *ngIf=\"isLoading && item.isActive && item.isOpen\">\r\n        </ax-loading>\r\n      </a>\r\n      <ul [class.ax-state-disabled]=\"item[disableField]\" *ngIf=\"item?.children?.length > 0 && item.isOpen\">\r\n        <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-container *ngIf=\"isLoading\">\r\n  <ng-template>\r\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n      <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n<ng-template #tmpEmpty>\r\n  <ng-container *ngIf=\"!isLoading\">\r\n    <!--------------- check for custom template  --------------->\r\n    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-template #elseEmptyTemplate>\r\n      <div class=\"ax-list-item\">\r\n        {{ 'common.no-result-found' | trans }}\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>", components: [{ type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }], directives: [{ type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "trans": i1$4.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXMenuComponent, selector: "ax-menu", inputs: { disabled: "disabled", tabIndex: "tabIndex", textField: "textField", valueField: "valueField", items: "items", id: "id", parentId: "parentId", icon: "icon", tooltip: "tooltip", isOpen: "isOpen", isActive: "isActive", visibleField: "visibleField", disableField: "disableField", hasChildField: "hasChildField", openMode: "openMode", direction: "direction" }, outputs: { onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-menu" }, queries: [{ propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ul [ngClass]=\"_getDirection()\">\r\n  <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: displayItems }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #recursiveListTmpl let-list=\"list\">\r\n  <ng-container *ngFor=\"let item of list;  trackBy: _trackLoaded\">\r\n    <li *ngIf=\"item[visibleField] !=false\" [class.ax-state-disabled]=\"item[disableField]\"\r\n      (click)=\"_onMenuClick($event,item)\" (mouseenter)=\"_onMouseEnter($event,item)\"\r\n      (mouseleave)=\"_onMouseLeave($event,item)\">\r\n      <a [ngClass]=\"{'active': item.isActive}\">\r\n        <div class=\"ax-menu-start-side\">\r\n          <ax-icon [class]=\"item.icon || item[icon]\" *ngIf=\"item.icon || item[icon]\"></ax-icon>\r\n          <span>{{_getItemDisplayTextTemplte(item)}}</span>\r\n        </div>\r\n        <div class=\"ax-menu-end-side\">\r\n          <ax-icon [ngClass]=\"{'active-icon': item.isOpen}\"\r\n            *ngIf=\"item?.children?.length > 0 && !isLoading || item[hasChildField] && !isLoading\" class=\"ax-ic-chevron\">\r\n          </ax-icon>\r\n        </div>\r\n        <ax-loading *ngIf=\"isLoading && item.isActive && item.isOpen\">\r\n        </ax-loading>\r\n      </a>\r\n      <ul [class.ax-state-disabled]=\"item[disableField]\" *ngIf=\"item?.children?.length > 0 && item.isOpen\">\r\n        <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-container *ngIf=\"isLoading\">\r\n  <ng-template>\r\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n      <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n<ng-template #tmpEmpty>\r\n  <ng-container *ngIf=\"!isLoading\">\r\n    <!--------------- check for custom template  --------------->\r\n    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-template #elseEmptyTemplate>\r\n      <div class=\"ax-list-item\">\r\n        {{ 'common.no-result-found' | trans }}\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>", components: [{ type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "trans": i1$4.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-menu', inputs: [...INTERACTIVE_INPUTS, ...BASEMENU_INPUTS], outputs: [...INTERACTIVE_OUTPUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-menu' }, template: "<ul>\r\n  <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: displayItems }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #recursiveListTmpl let-list=\"list\">\r\n  <ng-container *ngFor=\"let item of list;  trackBy: _trackLoaded\">\r\n    <li [class.ax-state-disabled]=\"item[disableField]\" *ngIf=\"item.visible !=false\" (click)=\"onMenuClick($event,item)\">\r\n      <a [ngClass]=\"{'active': item.isActive}\">\r\n        <div class=\"ax-menu-start-side\">\r\n          <ax-icon [class]=\"item.icon || item[icon]\" *ngIf=\"item.icon || item[icon]\"></ax-icon>\r\n          <span>{{_getItemDisplayTextTemplte(item)}}</span>\r\n        </div>\r\n        <div class=\"ax-menu-end-side\">\r\n          <ax-icon [ngClass]=\"{'active-icon': item.isOpen}\"\r\n            *ngIf=\"item?.children?.length > 0 && !isLoading || item[hasChildField] && !isLoading\" class=\"ax-ic-chevron\">\r\n          </ax-icon>\r\n        </div>\r\n        <ax-loading *ngIf=\"isLoading && item.isActive && item.isOpen\">\r\n        </ax-loading>\r\n      </a>\r\n      <ul [class.ax-state-disabled]=\"item[disableField]\" *ngIf=\"item?.children?.length > 0 && item.isOpen\">\r\n        <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-container *ngIf=\"isLoading\">\r\n  <ng-template>\r\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n      <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n<ng-template #tmpEmpty>\r\n  <ng-container *ngIf=\"!isLoading\">\r\n    <!--------------- check for custom template  --------------->\r\n    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-template #elseEmptyTemplate>\r\n      <div class=\"ax-list-item\">\r\n        {{ 'common.no-result-found' | trans }}\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>" }]
+            args: [{ selector: 'ax-menu', inputs: [...INTERACTIVE_INPUTS, ...BASEMENU_INPUTS], outputs: [...INTERACTIVE_OUTPUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-menu' }, template: "<ul [ngClass]=\"_getDirection()\">\r\n  <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: displayItems }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #recursiveListTmpl let-list=\"list\">\r\n  <ng-container *ngFor=\"let item of list;  trackBy: _trackLoaded\">\r\n    <li *ngIf=\"item[visibleField] !=false\" [class.ax-state-disabled]=\"item[disableField]\"\r\n      (click)=\"_onMenuClick($event,item)\" (mouseenter)=\"_onMouseEnter($event,item)\"\r\n      (mouseleave)=\"_onMouseLeave($event,item)\">\r\n      <a [ngClass]=\"{'active': item.isActive}\">\r\n        <div class=\"ax-menu-start-side\">\r\n          <ax-icon [class]=\"item.icon || item[icon]\" *ngIf=\"item.icon || item[icon]\"></ax-icon>\r\n          <span>{{_getItemDisplayTextTemplte(item)}}</span>\r\n        </div>\r\n        <div class=\"ax-menu-end-side\">\r\n          <ax-icon [ngClass]=\"{'active-icon': item.isOpen}\"\r\n            *ngIf=\"item?.children?.length > 0 && !isLoading || item[hasChildField] && !isLoading\" class=\"ax-ic-chevron\">\r\n          </ax-icon>\r\n        </div>\r\n        <ax-loading *ngIf=\"isLoading && item.isActive && item.isOpen\">\r\n        </ax-loading>\r\n      </a>\r\n      <ul [class.ax-state-disabled]=\"item[disableField]\" *ngIf=\"item?.children?.length > 0 && item.isOpen\">\r\n        <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-container *ngIf=\"isLoading\">\r\n  <ng-template>\r\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n      <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n<ng-template #tmpEmpty>\r\n  <ng-container *ngIf=\"!isLoading\">\r\n    <!--------------- check for custom template  --------------->\r\n    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-template #elseEmptyTemplate>\r\n      <div class=\"ax-list-item\">\r\n        {{ 'common.no-result-found' | trans }}\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _contentEmptyTemplate: [{
                 type: ContentChild,
                 args: ['emptyTemplate']
@@ -6005,7 +6078,7 @@ class AXNumberBoxComponent extends AXBaseTextBoxMixin {
     }
 }
 AXNumberBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXNumberBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", type: "type", name: "name", checked: "checked", thousandsSeparator: "thousandsSeparator", padDecimalZeros: "padDecimalZeros", step: "step", decimals: "decimals", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-editor-container" }, viewQueries: [{ propertyName: "_maskDirective", first: true, predicate: IMaskDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\"  \r\n    [attr.placeholder]=\"placeholder\" \r\n    [imask]=\"_maskObj\" \r\n    [unmask]=\"'typed'\"\r\n    [attr.min]=\"minValue\"\r\n    [attr.max]=\"maxValue\" \r\n    [class.ax-state-disabled]=\"disabled\" \r\n    [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" \r\n    [readonly]=\"readonly\" \r\n    [tabindex]=\"tabIndex\" \r\n    [(ngModel)]=\"value\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" \r\n    (blur)=\"_emitOnFocusEvent($event)\" \r\n    (keydown)=\"_handleOnKeydownEvent($event)\"\r\n    [attr.autocomplete]=\"autoComplete\">\r\n\r\n<div class=\"ax-number-box-arrows\" *ngIf=\"showSpinButtons && !(disabled || readonly)\">\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax-rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,-1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax--rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n</div>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$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]" }, { type: i5.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXNumberBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", type: "type", autoComplete: "autoComplete", name: "name", checked: "checked", thousandsSeparator: "thousandsSeparator", padDecimalZeros: "padDecimalZeros", step: "step", decimals: "decimals", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-editor-container" }, viewQueries: [{ propertyName: "_maskDirective", first: true, predicate: IMaskDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\"  \r\n    [attr.placeholder]=\"placeholder\" \r\n    [imask]=\"_maskObj\" \r\n    [unmask]=\"'typed'\"\r\n    [attr.min]=\"minValue\"\r\n    [attr.max]=\"maxValue\" \r\n    [class.ax-state-disabled]=\"disabled\" \r\n    [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" \r\n    [readonly]=\"readonly\" \r\n    [tabindex]=\"tabIndex\" \r\n    [(ngModel)]=\"value\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" \r\n    (blur)=\"_emitOnFocusEvent($event)\" \r\n    (keydown)=\"_handleOnKeydownEvent($event)\"\r\n    [attr.autocomplete]=\"autoComplete\">\r\n\r\n<div class=\"ax-number-box-arrows\" *ngIf=\"showSpinButtons && !(disabled || readonly)\">\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax-rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,-1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax--rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n</div>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$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]" }, { type: i5.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-number-box', inputs: [
@@ -6102,7 +6175,7 @@ class AXPasswordBoxComponent extends AXBaseTextBoxMixin {
     }
 }
 AXPasswordBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPasswordBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXPasswordBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXPasswordBoxComponent, selector: "ax-password-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", cssClass: "cssClass", size: "size", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", type: "type", value: "value", name: "name", checked: "checked", showToggleButton: "showToggleButton" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-password-box ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [type]=\"_type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n    [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete\">\r\n\r\n<ng-content select=\"ax-suffix\">\r\n\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>\r\n<ax-button color=\"light\" look=\"blank\" [size]=\"size\" (onClick)=\"toggleType()\" [tabIndex]=\"-1\" *ngIf=\"showToggleButton\">\r\n    <ax-icon [icon]=\"_icon\"></ax-icon>\r\n</ax-button>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$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]" }, { type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXPasswordBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXPasswordBoxComponent, selector: "ax-password-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", cssClass: "cssClass", size: "size", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", type: "type", autoComplete: "autoComplete", value: "value", name: "name", checked: "checked", showToggleButton: "showToggleButton" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-password-box ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [type]=\"_type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n    [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete\">\r\n\r\n<ng-content select=\"ax-suffix\">\r\n\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>\r\n<ax-button color=\"light\" look=\"blank\" [size]=\"size\" (onClick)=\"toggleType()\" [tabIndex]=\"-1\" *ngIf=\"showToggleButton\">\r\n    <ax-icon [icon]=\"_icon\"></ax-icon>\r\n</ax-button>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$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]" }, { type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPasswordBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-password-box', inputs: [
@@ -6435,10 +6508,10 @@ class AXRadioComponent extends AXBaseValueComponentMixin {
     }
 }
 AXRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXRadioComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXRadioComponent, selector: "ax-radio", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "ax-radio" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-items-start\">\n    <div class=\"ax-flex ax-items-center ax-h-5\">\n        <input [id]=\"id\" class=\"ax-radio\" type=\"radio\" [(ngModel)]=\"value\" [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\"\n        (blur)=\"_emitOnBlurEvent($event)\">\n    </div>\n    <div class=\"ax-ms-3 ax-text-sm\">\n        <ng-content select=\"ax-label\"></ng-content>\n        <ng-content select=\"ax-form-hint\"></ng-content>\n    </div>\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>", directives: [{ type: i1$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i1$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]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$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 });
+AXRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXRadioComponent, selector: "ax-radio", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "ax-radio" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-items-start\">\r\n    <div class=\"ax-flex ax-items-center ax-h-5\">\r\n        <input [id]=\"id\" class=\"ax-radio\" type=\"radio\" [(ngModel)]=\"value\" [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n    </div>\r\n    <div class=\"ax-ms-3 ax-text-sm\">\r\n        <ng-content select=\"ax-label\"></ng-content>\r\n        <ng-content select=\"ax-form-hint\"></ng-content>\r\n    </div>\r\n</div>\r\n<ng-content select=\"ax-validation-rule\"></ng-content>", directives: [{ type: i1$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i1$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]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$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: "13.3.2", ngImport: i0, type: AXRadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-radio', inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-radio' }, template: "<div class=\"ax-flex ax-items-start\">\n    <div class=\"ax-flex ax-items-center ax-h-5\">\n        <input [id]=\"id\" class=\"ax-radio\" type=\"radio\" [(ngModel)]=\"value\" [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\"\n        (blur)=\"_emitOnBlurEvent($event)\">\n    </div>\n    <div class=\"ax-ms-3 ax-text-sm\">\n        <ng-content select=\"ax-label\"></ng-content>\n        <ng-content select=\"ax-form-hint\"></ng-content>\n    </div>\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>" }]
+            args: [{ selector: 'ax-radio', inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-radio' }, template: "<div class=\"ax-flex ax-items-start\">\r\n    <div class=\"ax-flex ax-items-center ax-h-5\">\r\n        <input [id]=\"id\" class=\"ax-radio\" type=\"radio\" [(ngModel)]=\"value\" [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n    </div>\r\n    <div class=\"ax-ms-3 ax-text-sm\">\r\n        <ng-content select=\"ax-label\"></ng-content>\r\n        <ng-content select=\"ax-form-hint\"></ng-content>\r\n    </div>\r\n</div>\r\n<ng-content select=\"ax-validation-rule\"></ng-content>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
 const COMPONENT$5 = [AXRadioComponent];
@@ -6855,7 +6928,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
     }
 }
 AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$4.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", pageSize: "pageSize", valueField: "valueField", textField: "textField", items: "items", disabledField: "disabledField", disabledCallback: "disabledCallback", multiple: "multiple", selectionMode: "selectionMode", clearButton: "clearButton", searchSettings: "searchSettings", checkbox: "checkbox" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", valueChanged: "valueChanged" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, classAttribute: "ax-editor-container ax-drop-down" }, queries: [{ propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }, { propertyName: "_searchBox", first: true, predicate: ["searchBox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n        <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close ax-cursor-pointer\"\r\n                                    (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template #showPlaceholder>\r\n            <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\"> {{placeholder}}</div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && clearButton &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-prefix *ngIf=\"(isLoading && !this.popover.isOpen);else icon\">\r\n        <ax-loading type=\"spinner\"></ax-loading>\r\n    </ax-prefix>\r\n    <ng-template #icon>\r\n        <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ng-template>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\"\r\n    (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane \" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\" [class.ax-full]=\"searchSettings.enabled || isLazy\"\r\n        [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list\">\r\n            <div *ngIf=\"_isMobile\" class=\"ax-header\">\r\n                <span>{{_popoverTitle}}</span>\r\n                <i class=\"ax-ic {{multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'}}\" (click)=\"close()\"\r\n                    tabindex=\"1\"></i>\r\n            </div>\r\n            <div *ngIf=\"searchSettings.enabled\" class=\"ax-p-2\" [cdkTrapFocus]=\"true\" class=\"ax-header\">\r\n                <ax-text-box #searchBox placeholder=\"{{ 'common.search' | trans }}\" [debounceTime]=\"500\" \r\n                    class=\"ax-w-full ax-sm\" [(value)]=\"searchSettings.expr\" (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n                    <ax-prefix>\r\n                        <ax-icon  class=\"ax-ic ax-ic-magnify\">\r\n                        </ax-icon>\r\n                    </ax-prefix>\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\"\r\n                #listContainer>\r\n                <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                    <ul>\r\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\">\r\n                        </ng-container>\r\n                        <ng-template #tmpTree let-list=\"list\">\r\n                            <ng-container *ngFor=\"let item of list;let i = index;trackBy : _trackByFunction\">\r\n                                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                                    <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                                        [attr.data-id]=\"item[this.valueField]\">\r\n                                        <ng-container\r\n                                            *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                                        </ng-container>\r\n                                    </li>\r\n                                </ng-container>\r\n                                <ng-template #defualtTemplate>\r\n                                    <ng-container *ngIf=\"item.children?.length > 0;else tmpItem\">\r\n                                        <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\r\n                                            <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            <ul *ngIf=\"item.children?.length > 0\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"tmpTree; context:{ list:  item.children }\">\r\n                                                </ng-container>\r\n                                            </ul>\r\n                                        </li>\r\n                                    </ng-container>\r\n                                    <ng-template #tmpItem>\r\n                                        <ng-container *ngIf=\"!multiple;  else multipleTemplate\">\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-container>\r\n                                        <ng-template #multipleTemplate>\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                    *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\"\r\n                                                    [disabled]=\"isItemDisabled(item)\">\r\n                                                <span class=\"ax-ms-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-template>\r\n                                    </ng-template>\r\n                                </ng-template>\r\n                            </ng-container>\r\n                        </ng-template>\r\n                    </ul>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseLoadingTemplate>\r\n                        <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n                            <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-template #tmpEmpty>\r\n                    <ng-container *ngIf=\"!isLoading\">\r\n                        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseEmptyTemplate>\r\n                            <div class=\"ax-list-item\">\r\n                                {{ 'common.no-result-found' | trans }}\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </ng-template>\r\n\r\n            </div>\r\n            <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n            <!-- <div class=\"ax-footer\">footer</div> -->\r\n        </div>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"], outputs: ["onOpened", "onClosed"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked", "placeholder", "maxLength", "type"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i1$4.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete", pageSize: "pageSize", valueField: "valueField", textField: "textField", items: "items", disabledField: "disabledField", disabledCallback: "disabledCallback", multiple: "multiple", selectionMode: "selectionMode", clearButton: "clearButton", searchSettings: "searchSettings", checkbox: "checkbox" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", valueChanged: "valueChanged" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, classAttribute: "ax-editor-container ax-drop-down" }, queries: [{ propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }, { propertyName: "_searchBox", first: true, predicate: ["searchBox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n        <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close ax-cursor-pointer\"\r\n                                    (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template #showPlaceholder>\r\n            <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\"> {{placeholder}}</div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && clearButton &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-prefix *ngIf=\"(isLoading && !this.popover.isOpen);else icon\">\r\n        <ax-loading type=\"spinner\"></ax-loading>\r\n    </ax-prefix>\r\n    <ng-template #icon>\r\n        <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ng-template>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\"\r\n    (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane \" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\" [class.ax-full]=\"searchSettings.enabled || isLazy\"\r\n        [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list\">\r\n            <div *ngIf=\"_isMobile\" class=\"ax-header\">\r\n                <span>{{_popoverTitle}}</span>\r\n                <i class=\"ax-ic {{multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'}}\" (click)=\"close()\"\r\n                    tabindex=\"1\"></i>\r\n            </div>\r\n            <div *ngIf=\"searchSettings.enabled\" class=\"ax-p-2\" [cdkTrapFocus]=\"true\" class=\"ax-header\">\r\n                <ax-text-box #searchBox placeholder=\"{{ 'common.search' | trans }}\" [debounceTime]=\"500\" \r\n                    class=\"ax-w-full ax-sm\" [(value)]=\"searchSettings.expr\" (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n                    <ax-prefix>\r\n                        <ax-icon  class=\"ax-ic ax-ic-magnify\">\r\n                        </ax-icon>\r\n                    </ax-prefix>\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\"\r\n                #listContainer>\r\n                <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                    <ul>\r\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\">\r\n                        </ng-container>\r\n                        <ng-template #tmpTree let-list=\"list\">\r\n                            <ng-container *ngFor=\"let item of list;let i = index;trackBy : _trackByFunction\">\r\n                                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                                    <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                                        [attr.data-id]=\"item[this.valueField]\">\r\n                                        <ng-container\r\n                                            *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                                        </ng-container>\r\n                                    </li>\r\n                                </ng-container>\r\n                                <ng-template #defualtTemplate>\r\n                                    <ng-container *ngIf=\"item.children?.length > 0;else tmpItem\">\r\n                                        <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\r\n                                            <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            <ul *ngIf=\"item.children?.length > 0\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"tmpTree; context:{ list:  item.children }\">\r\n                                                </ng-container>\r\n                                            </ul>\r\n                                        </li>\r\n                                    </ng-container>\r\n                                    <ng-template #tmpItem>\r\n                                        <ng-container *ngIf=\"!multiple;  else multipleTemplate\">\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-container>\r\n                                        <ng-template #multipleTemplate>\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                    *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\"\r\n                                                    [disabled]=\"isItemDisabled(item)\">\r\n                                                <span class=\"ax-ms-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-template>\r\n                                    </ng-template>\r\n                                </ng-template>\r\n                            </ng-container>\r\n                        </ng-template>\r\n                    </ul>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseLoadingTemplate>\r\n                        <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n                            <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-template #tmpEmpty>\r\n                    <ng-container *ngIf=\"!isLoading\">\r\n                        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseEmptyTemplate>\r\n                            <div class=\"ax-list-item\">\r\n                                {{ 'common.no-result-found' | trans }}\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </ng-template>\r\n\r\n            </div>\r\n            <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n            <!-- <div class=\"ax-footer\">footer</div> -->\r\n        </div>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"], outputs: ["onOpened", "onClosed"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked", "placeholder", "maxLength", "type", "autoComplete"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i1$4.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-select-box', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...DATALIST_INPUTS, ...SELECTION_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...SELECTION_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n        <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close ax-cursor-pointer\"\r\n                                    (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template #showPlaceholder>\r\n            <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\"> {{placeholder}}</div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && clearButton &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-prefix *ngIf=\"(isLoading && !this.popover.isOpen);else icon\">\r\n        <ax-loading type=\"spinner\"></ax-loading>\r\n    </ax-prefix>\r\n    <ng-template #icon>\r\n        <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ng-template>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\"\r\n    (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane \" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\" [class.ax-full]=\"searchSettings.enabled || isLazy\"\r\n        [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list\">\r\n            <div *ngIf=\"_isMobile\" class=\"ax-header\">\r\n                <span>{{_popoverTitle}}</span>\r\n                <i class=\"ax-ic {{multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'}}\" (click)=\"close()\"\r\n                    tabindex=\"1\"></i>\r\n            </div>\r\n            <div *ngIf=\"searchSettings.enabled\" class=\"ax-p-2\" [cdkTrapFocus]=\"true\" class=\"ax-header\">\r\n                <ax-text-box #searchBox placeholder=\"{{ 'common.search' | trans }}\" [debounceTime]=\"500\" \r\n                    class=\"ax-w-full ax-sm\" [(value)]=\"searchSettings.expr\" (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n                    <ax-prefix>\r\n                        <ax-icon  class=\"ax-ic ax-ic-magnify\">\r\n                        </ax-icon>\r\n                    </ax-prefix>\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\"\r\n                #listContainer>\r\n                <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                    <ul>\r\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\">\r\n                        </ng-container>\r\n                        <ng-template #tmpTree let-list=\"list\">\r\n                            <ng-container *ngFor=\"let item of list;let i = index;trackBy : _trackByFunction\">\r\n                                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                                    <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                                        [attr.data-id]=\"item[this.valueField]\">\r\n                                        <ng-container\r\n                                            *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                                        </ng-container>\r\n                                    </li>\r\n                                </ng-container>\r\n                                <ng-template #defualtTemplate>\r\n                                    <ng-container *ngIf=\"item.children?.length > 0;else tmpItem\">\r\n                                        <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\r\n                                            <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            <ul *ngIf=\"item.children?.length > 0\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"tmpTree; context:{ list:  item.children }\">\r\n                                                </ng-container>\r\n                                            </ul>\r\n                                        </li>\r\n                                    </ng-container>\r\n                                    <ng-template #tmpItem>\r\n                                        <ng-container *ngIf=\"!multiple;  else multipleTemplate\">\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-container>\r\n                                        <ng-template #multipleTemplate>\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                    *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\"\r\n                                                    [disabled]=\"isItemDisabled(item)\">\r\n                                                <span class=\"ax-ms-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-template>\r\n                                    </ng-template>\r\n                                </ng-template>\r\n                            </ng-container>\r\n                        </ng-template>\r\n                    </ul>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseLoadingTemplate>\r\n                        <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n                            <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-template #tmpEmpty>\r\n                    <ng-container *ngIf=\"!isLoading\">\r\n                        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseEmptyTemplate>\r\n                            <div class=\"ax-list-item\">\r\n                                {{ 'common.no-result-found' | trans }}\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </ng-template>\r\n\r\n            </div>\r\n            <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n            <!-- <div class=\"ax-footer\">footer</div> -->\r\n        </div>\r\n    </div>\r\n</ax-popover>" }]
@@ -7302,7 +7375,7 @@ class AXTextareaComponent extends AXBaseTextBoxMixin {
     }
 }
 AXTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXTextareaComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXTextareaComponent, selector: "ax-textarea", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", rows: "rows" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "ax-textarea-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<textarea [attr.name]=\"name\" type=\"text\" [rows]=\"rows\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete\"></textarea>\r\n<!-- <ng-content select=\"ax-suffix\"></ng-content> -->\r\n", directives: [{ type: i1$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]" }, { type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$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 });
+AXTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXTextareaComponent, selector: "ax-textarea", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete", rows: "rows" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "ax-textarea-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<textarea [attr.name]=\"name\" type=\"text\" [rows]=\"rows\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete\"></textarea>\r\n<!-- <ng-content select=\"ax-suffix\"></ng-content> -->\r\n", directives: [{ type: i1$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]" }, { type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$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: "13.3.2", ngImport: i0, type: AXTextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-textarea', inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-textarea-container' }, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<textarea [attr.name]=\"name\" type=\"text\" [rows]=\"rows\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete\"></textarea>\r\n<!-- <ng-content select=\"ax-suffix\"></ng-content> -->\r\n" }]
@@ -7563,7 +7636,7 @@ class AXTimeBoxComponent extends AXBaseTextBoxMixin {
     }
 }
 AXTimeBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXTimeBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTimeBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXTimeBoxComponent, selector: "ax-time-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", type: "type", name: "name", checked: "checked", minValue: "minValue", maxValue: "maxValue", format: "format", displayText: "displayText" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", formatChange: "formatChange", displayTextChange: "displayTextChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "_maskDirective", first: true, predicate: IMaskDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [imask]=\"_maskObj\" [unmask]=\"false\"  type=\"text\" [attr.placeholder]=\"placeholder\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"displayText\" \r\n    (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n    (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\"\r\n    (keyup)=\"_handleKeyUpEvent($event)\" \r\n    (keydown)=\"_handleOnKeydownEvent($event)\" \r\n    autocomplete=\"off\">\r\n\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", directives: [{ type: i1$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]" }, { type: i5.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$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 });
+AXTimeBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXTimeBoxComponent, selector: "ax-time-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", type: "type", autoComplete: "autoComplete", name: "name", checked: "checked", minValue: "minValue", maxValue: "maxValue", format: "format", displayText: "displayText" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", formatChange: "formatChange", displayTextChange: "displayTextChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "_maskDirective", first: true, predicate: IMaskDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [imask]=\"_maskObj\" [unmask]=\"false\"  type=\"text\" [attr.placeholder]=\"placeholder\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"displayText\" \r\n    (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n    (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\"\r\n    (keyup)=\"_handleKeyUpEvent($event)\" \r\n    (keydown)=\"_handleOnKeydownEvent($event)\" \r\n    autocomplete=\"off\">\r\n\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", directives: [{ type: i1$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]" }, { type: i5.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$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: "13.3.2", ngImport: i0, type: AXTimeBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-time-box', inputs: ['disabled', 'readonly', 'tabIndex', 'size', 'value', ...TEXTBOX_INPUTS], outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus', ...TEXTBOX_OUTPUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [imask]=\"_maskObj\" [unmask]=\"false\"  type=\"text\" [attr.placeholder]=\"placeholder\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"displayText\" \r\n    (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n    (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\"\r\n    (keyup)=\"_handleKeyUpEvent($event)\" \r\n    (keydown)=\"_handleOnKeydownEvent($event)\" \r\n    autocomplete=\"off\">\r\n\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>" }]
@@ -8179,5 +8252,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXActionSheetComponent, AXActionSheetItemComponent, AXActionSheetModule, AXAlertButtonComponent, AXAlertComponent, AXAlertContentComponent, AXAlertFooterComponent, AXAlertModule, AXAlertSuffixComponent, AXAlertTitleComponent, AXAvatarComponent, AXAvatarGroup, AXAvatarMixin, AXAvatarModule, AXBadgeComponent, AXBadgeModule, AXBaseAlertMixin, AXBaseBadgeMixin, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseDatePickerMixin, AXBaseDropdownMixin, AXBaseItemButtonMixin, AXBaseMenuMixin, AXBasePageComponent, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTabItemMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXBreadCrumbsComponent, AXBreadCrumbsItemComponent, AXBreadcrumbsModule, AXButtonClickEvent, AXButtonComponent, AXButtonGroupComponent, AXButtonItemComponent, AXButtonModule, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCheckBoxComponent, AXCheckBoxModule, AXClickEvent, AXCollapseComponent, AXCollapseGroupComponent, AXCollapseModule, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatePickerComponent, AXDatepickerModule, AXDecoratorAddOnComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent, AXDrawerModule, AXDropdownModule, AXDropdownPanelComponent, AXEditorDecoratorModule, AXEvent, AXFocusEvent, AXFormComponent, AXFormFieldComponent, AXFormHintComponent, AXFormModule, AXHtmlEvent, AXIconComponent, AXIconModule, AXInfiniteScrollerDirective, AXInlineCalendarComponent, AXInputMaskComponent, AXInputMaskModule, AXInteractiveComponenetMixin, AXItemClickEvent, AXLabelComponent, AXLabelModule, AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent, AXMenuComponent, AXMenuModule, AXNumberBoxComponent, AXNumberBoxModule, AXOverlayService, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageFooterComponent, AXPageHeaderComponent, AXPageModule, AXPageResult, AXPasswordBoxComponent, AXPasswordBoxModule, AXPickerComponent, AXPickerModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXProgressBarComponent, AXProgressBarModule, AXRadioComponent, AXRadioModule, AXRangeChangedEvent, AXRangeSliderComponent, AXRangeSliderModule, AXRatingComponent, AXRatingModule, AXResponsiveDirective, AXResultComponent, AXResultModule, AXSelectBoxComponent, AXSelectBoxModule, AXSelectionListComponent, AXSelectionListModule, AXSelectionValueChangedEvent, AXSizableComponentMixin, AXSwitchComponent, AXSwitchModule, AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule, AXTextBoxComponent, AXTextBoxModule, AXTextareaComponent, AXTextareaModule, AXTimeBoxComponent, AXTimeBoxModule, AXToastComponent, AXToastModule, AXToastService, AXTooltipComponent, AXTooltipDirective, AXTooltipModule, AXTreeViewComponent, AXTreeViewModule, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueChangedEvent, AX_DIRECTIONS, AX_LOCATIONS, AX_STYLE_TYPES, BASE_INPUTS, BASE_OUTPUT, TAB_META_KEY, _BaseComponenetMixin };
+export { AXActionSheetComponent, AXActionSheetItemComponent, AXActionSheetModule, AXAlertButtonComponent, AXAlertComponent, AXAlertContentComponent, AXAlertFooterComponent, AXAlertModule, AXAlertSuffixComponent, AXAlertTitleComponent, AXAvatarComponent, AXAvatarGroup, AXAvatarMixin, AXAvatarModule, AXBadgeComponent, AXBadgeModule, AXBaseAlertMixin, AXBaseBadgeMixin, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseDatePickerMixin, AXBaseDropdownMixin, AXBaseItemButtonMixin, AXBaseMenuMixin, AXBasePageComponent, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTabItemMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXBreadCrumbsComponent, AXBreadCrumbsItemComponent, AXBreadcrumbsModule, AXButtonClickEvent, AXButtonComponent, AXButtonGroupComponent, AXButtonItemComponent, AXButtonModule, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCheckBoxComponent, AXCheckBoxModule, AXClickEvent, AXCollapseComponent, AXCollapseGroupComponent, AXCollapseModule, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatePickerComponent, AXDatepickerModule, AXDecoratorAddOnComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent, AXDrawerModule, AXDropdownModule, AXDropdownPanelComponent, AXEditorDecoratorModule, AXEvent, AXFocusEvent, AXFormComponent, AXFormFieldComponent, AXFormHintComponent, AXFormModule, AXHtmlEvent, AXIconComponent, AXIconModule, AXInfiniteScrollerDirective, AXInputMaskComponent, AXInputMaskModule, AXInteractiveComponenetMixin, AXItemClickEvent, AXLabelComponent, AXLabelModule, AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent, AXMenuComponent, AXMenuModule, AXNumberBoxComponent, AXNumberBoxModule, AXOverlayService, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageFooterComponent, AXPageHeaderComponent, AXPageModule, AXPageResult, AXPasswordBoxComponent, AXPasswordBoxModule, AXPickerComponent, AXPickerModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXProgressBarComponent, AXProgressBarModule, AXRadioComponent, AXRadioModule, AXRangeChangedEvent, AXRangeSliderComponent, AXRangeSliderModule, AXRatingComponent, AXRatingModule, AXResponsiveDirective, AXResultComponent, AXResultModule, AXSelectBoxComponent, AXSelectBoxModule, AXSelectionListComponent, AXSelectionListModule, AXSelectionValueChangedEvent, AXSizableComponentMixin, AXSwitchComponent, AXSwitchModule, AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule, AXTextBoxComponent, AXTextBoxModule, AXTextareaComponent, AXTextareaModule, AXTimeBoxComponent, AXTimeBoxModule, AXToastComponent, AXToastModule, AXToastService, AXTooltipComponent, AXTooltipDirective, AXTooltipModule, AXTreeViewComponent, AXTreeViewModule, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueChangedEvent, AX_DIRECTIONS, AX_LOCATIONS, AX_STYLE_TYPES, BASE_INPUTS, BASE_OUTPUT, TAB_META_KEY, _BaseComponenetMixin };
 //# sourceMappingURL=acorex-components.mjs.map