@acorex/components 5.0.36 → 5.0.37

package/fesm2015/acorex-components.mjs

@@ -1,9 +1,10 @@
 import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import * as i0 from '@angular/core';
-import { Injectable, Inject, EventEmitter, Directive, NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, HostBinding, HostListener, ContentChildren, Optional, ContentChild, ViewChild, ElementRef, TemplateRef, ViewChildren } from '@angular/core';
+import { Injectable, Inject, EventEmitter, Directive, NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, HostBinding, HostListener, ContentChildren, Optional, ViewChild, ContentChild, ElementRef, TemplateRef, ViewChildren } from '@angular/core';
+import _ from 'lodash';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i2 from '@acorex/core';
-import { AXObjectUtil, AXDateTime, AXDateTimeRange, AXDateTimeModule, AXDrawingUtil, AXStringUtil, AXTranslator, AXConfig } from '@acorex/core';
+import { AXObjectUtil, AXDateTime, AXDateTimeRange, AXDateTimeModule, AXDrawingUtil, AXTranslator, AXStringUtil, AXConfig } from '@acorex/core';
 import { Subscription, Subject, fromEvent, merge, asyncScheduler, BehaviorSubject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, throttleTime, observeOn, finalize } from 'rxjs/operators';
 import * as i1 from '@angular/common';
@@ -12,7 +13,6 @@ import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1$4 from '@angular/cdk/portal';
 import { TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
-import _ from 'lodash';
 import * as i1$2 from '@angular/cdk/overlay';
 import { OverlayModule, OverlayContainer, Overlay } from '@angular/cdk/overlay';
 import * as i1$3 from 'ngx-mask';
@@ -291,7 +291,18 @@ function _DatalistComponenetMixin(Base) {
             return __classPrivateFieldGet(this, _items, "f");
         }
         set items(v) {
-            __classPrivateFieldSet(this, _items, v, "f");
+            if (Array.isArray(v)) {
+                __classPrivateFieldSet(this, _items, this._formatData(v), "f");
+                this._onDataLoaded();
+            }
+            else if (typeof v === 'function') {
+                __classPrivateFieldSet(this, _isLazy, true, "f");
+                __classPrivateFieldSet(this, _items, v, "f");
+            }
+            else {
+                __classPrivateFieldSet(this, _items, [], "f");
+                this._onDataLoaded();
+            }
         }
         get displayItems() {
             if (Array.isArray(this.items)) {
@@ -305,6 +316,18 @@ function _DatalistComponenetMixin(Base) {
         get isLoading() {
             return __classPrivateFieldGet(this, _isLoading, "f");
         }
+        _formatData(v) {
+            return _.unionBy(v.map((o, i) => {
+                if (typeof o == 'object')
+                    return o;
+                else {
+                    const no = {};
+                    no[this.valueField] = o;
+                    no[Array.isArray(this.textField) ? this.textField[0] : this.textField] = o;
+                    return no;
+                }
+            }), this.valueField);
+        }
         _fetchData() {
             if ((this.loadedCount >= this.totalCount && this.totalCount != 0) || __classPrivateFieldGet(this, _isLoading, "f") || !__classPrivateFieldGet(this, _isLazy, "f")) {
                 return;
@@ -330,13 +353,13 @@ function _DatalistComponenetMixin(Base) {
                 });
             }
         }
-        _onInternalInit() {
-            if (typeof __classPrivateFieldGet(this, _items, "f") == 'function') {
-                __classPrivateFieldSet(this, _isLazy, true, "f");
-                this._fetchData();
-            }
-            super._onInternalInit();
-        }
+        // _onInternalInit() {
+        //     if (typeof this.#items == 'function') {
+        //         this.#isLazy = true;
+        //         this._fetchData();
+        //     }
+        //     super._onInternalInit();
+        // }
         _onDataLoaded() {
         }
         _getItemDisplayTextTemplte(item) {
@@ -358,13 +381,19 @@ function _DatalistComponenetMixin(Base) {
         _isLazy = new WeakMap(),
         _items = new WeakMap(),
         _a;
-}
+}
+const DATALIST_INPUTS = [
+    'pageSize',
+    'valueField',
+    'textField',
+    'items'
+];
+const DATALIST_OUTPUT = [];
 
 function _DropdownComponenetMixin(Base) {
     class Mixin extends Base {
         constructor(...args) {
             super(...args);
-            this.fitParent = true;
             this.readonly = false;
             this.onOpened = new EventEmitter();
             this.onClosed = new EventEmitter();
@@ -385,12 +414,12 @@ function _DropdownComponenetMixin(Base) {
                 htmlElement: this._getHostElement()
             });
         }
+        onInit() {
+            super.onInit();
+            this.popover.onOpened.subscribe(this.onOpened);
+            this.popover.onClosed.subscribe(this.onClosed);
+        }
         onViewInit() {
-            if (this.dropdownWidth == null) {
-                if (this.fitParent === true) {
-                    this.dropdownWidth = this._getInnerElement().offsetWidth;
-                }
-            }
             // wait for documentElement
             setTimeout(() => {
                 if (this.position.length == 0) {
@@ -409,7 +438,21 @@ function _DropdownComponenetMixin(Base) {
                             overlayX: 'start',
                             overlayY: 'bottom',
                             offsetY: -offset
-                        }
+                        },
+                        {
+                            originX: 'end',
+                            originY: 'bottom',
+                            overlayX: 'end',
+                            overlayY: 'top',
+                            offsetY: offset
+                        },
+                        {
+                            originX: 'end',
+                            originY: 'top',
+                            overlayX: 'end',
+                            overlayY: 'bottom',
+                            offsetY: -offset
+                        },
                     ];
                     this.position.push(...list);
                 }
@@ -425,14 +468,12 @@ function _DropdownComponenetMixin(Base) {
                 return;
             }
             this.popover.close();
-            this._emitOnClosedEvent();
         }
         open() {
             if (this.isOpen || this['disabled']) {
                 return;
             }
             this.popover.open();
-            this._emitOnOpenedEvent();
         }
         get isOpen() {
             var _a;
@@ -529,6 +570,7 @@ function _SelectionComponenetMixin(Base) {
             super(...args);
             this.valueField = 'id';
             this.textField = 'text';
+            this.disabledField = 'disabled';
             this.multiple = false;
             this.selectionMode = 'value';
             this.valueChange = new EventEmitter();
@@ -567,7 +609,7 @@ function _SelectionComponenetMixin(Base) {
                     selectedItems: this.selectedItems.slice()
                 });
                 if (v == null || v == undefined || v == "") {
-                    this._setErrorState('clear');
+                    this._setState('clear');
                 }
                 else {
                     if (this._isInited) {
@@ -676,8 +718,20 @@ function _SelectionComponenetMixin(Base) {
         isItemSelected(item) {
             return this.selectedItems.some(c => c[this.valueField] === item[this.valueField]);
         }
+        isItemDisabled(item) {
+            return coerceBooleanProperty(item[this.disabledField]) === true || (this.disabledCallback ? this.disabledCallback({ item, index: -1 }) : false);
+        }
     };
-}
+}
+const SELECTION_INPUTS = [
+    'valueField',
+    'textField',
+    'disabledField',
+    'disabledCallback',
+    'multiple',
+    'selectionMode'
+];
+const SELECTION_OUTPUT = ['onValueChanged', 'valueChanged'];
 
 function _SizableComponenetMixin(Base) {
     return class extends Base {
@@ -799,7 +853,7 @@ function _ValueComponenetMixin(Base) {
                 this._emitOnValueChangedEvent(old, __classPrivateFieldGet(this, _value, "f"));
                 this._cdr.markForCheck();
                 if (v == null || v == undefined || v == '') {
-                    this._setErrorState('clear');
+                    this._setState('clear');
                 }
                 else {
                     if (this._isInited) {
@@ -815,7 +869,7 @@ function _ValueComponenetMixin(Base) {
             const rules = Array.from(this._getHostElement().querySelectorAll('ax-validation-rule')).filter((c) => c.__axContext__.enabled);
             //
             if (!rules || rules.length === 0) {
-                this._setErrorState('clear');
+                this._setState('clear');
                 return Promise.resolve({ result: true, value: this.value });
             }
             return new Promise((resolve) => {
@@ -826,17 +880,17 @@ function _ValueComponenetMixin(Base) {
                 })).then((d) => {
                     const error = d.find((c) => c.result === false);
                     if (error) {
-                        this._setErrorState('error', error.message);
+                        this._setState('error', error.message);
                         resolve({ result: false, value: this.value });
                     }
                     else {
-                        this._setErrorState('success');
+                        this._setState('success');
                         resolve({ result: true, value: this.value });
                     }
                 });
             });
         }
-        _setErrorState(state, ...args) {
+        _setState(state, ...args) {
             const container = this._getHostElement().classList.contains('ax-editor-container') ?
                 this._getHostElement() :
                 this._getHostElement().querySelector('.ax-editor-container');
@@ -853,11 +907,11 @@ function _ValueComponenetMixin(Base) {
                     target.classList.remove('ax-state-error', 'ax-state-success');
                     break;
                 case 'success':
-                    this._setErrorState('clear');
+                    this._setState('clear');
                     target.classList.add('ax-state-success');
                     break;
                 case 'error':
-                    this._setErrorState('clear');
+                    this._setState('clear');
                     if (args[0]) {
                         const span = document.createElement('span');
                         span.innerText = args[0];
@@ -2675,154 +2729,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }] });
 
-class AXFormFieldComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-}
-AXFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXFormFieldComponent, selector: "ax-form-field", usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormFieldComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-form-field',
-                    template: '<ng-content></ng-content>',
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
-
-class AXFormHintComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-}
-AXFormHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormHintComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXFormHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXFormHintComponent, selector: "ax-form-hint", usesInheritance: true, ngImport: i0, template: ' <p class="ax-text-light-400 ax-text-xs ax-py-1 dark:ax-text-light-300"><ng-content></ng-content></p>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormHintComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-form-hint',
-                    template: ' <p class="ax-text-light-400 ax-text-xs ax-py-1 dark:ax-text-light-300"><ng-content></ng-content></p>',
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
-
-class AXFormComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-        this.cdr = cdr;
-    }
-    _getComponenets() {
-        return Array.from(this._getHostElement().querySelectorAll('[ax-form-input="true"]'));
-    }
-    validate() {
-        const widgets = this._getComponenets();
-        //
-        return new Promise((resolve, reject) => {
-            if (widgets.length === 0) {
-                return Promise.resolve({ result: true });
-            }
-            Promise.all(widgets.map((c) => c.__axContext__.validate())).then((rules) => {
-                const failed = rules.filter((c) => !c.result);
-                if (failed.length) {
-                    reject({
-                        result: false,
-                        items: failed
-                    });
-                }
-                else {
-                    resolve({ result: true });
-                }
-            });
-        });
-    }
-    clear() {
-        const widgets = this._getComponenets();
-        widgets.forEach(w => {
-            w.__axContext__.clear();
-        });
-    }
-}
-AXFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXFormComponent, selector: "ax-form", usesInheritance: true, ngImport: i0, template: '<div class="ax-form"><ng-content></ng-content></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-form',
-                    template: '<div class="ax-form"><ng-content></ng-content></div>',
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
-
-class AXFormModule {
-}
-AXFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormModule, declarations: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent], imports: [CommonModule], exports: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent] });
-AXFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    exports: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent],
-                    declarations: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent],
-                    providers: [],
-                }]
-        }] });
-
-class AXLabelComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-    get target() {
-        return this._target;
-    }
-    set target(v) {
-        this._target = v;
-        this._cdr.markForCheck();
-    }
-}
-AXLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXLabelComponent, selector: "ax-label", usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"target\">\r\n    <ng-content></ng-content>\r\n</label>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLabelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<label [attr.for]=\"target\">\r\n    <ng-content></ng-content>\r\n</label>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
-
-const COMPONENT$g = [AXLabelComponent];
-const MODULES$g = [CommonModule];
-class AXLabelModule {
-}
-AXLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLabelModule, declarations: [AXLabelComponent], imports: [CommonModule], exports: [AXLabelComponent] });
-AXLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLabelModule, providers: [], imports: [[...MODULES$g]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLabelModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...COMPONENT$g],
-                    imports: [...MODULES$g],
-                    exports: [...COMPONENT$g],
-                    providers: [],
-                }]
-        }] });
-
 class AXCheckBoxComponent extends AXBaseValueComponentMixin {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
     }
     onInit() {
         super.onInit();
-        ;
         if (!this.allowNull && this.value == null) {
             this.value = false;
         }
     }
-    onViewInit() {
-        if (this._label)
-            this._label.target = this.id;
-    }
     _onValueChanging(value) {
         if (this.allowNull && value == null) {
             this._stateIndeterminate = true;
@@ -2842,28 +2758,22 @@ class AXCheckBoxComponent extends AXBaseValueComponentMixin {
     }
 }
 AXCheckBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCheckBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXCheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXCheckBoxComponent, selector: "ax-check-box", 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" }, queries: [{ propertyName: "_label", first: true, predicate: AXLabelComponent, descendants: true }, { propertyName: "_hint", predicate: AXFormHintComponent }], usesInheritance: true, ngImport: i0, template: "<!-- <div class=\"ax-wrapper ax-flex ax-flex-row \" [class.ax-items-center]=\"_hint.length==0\"\r\n    [class.ax-items-start]=\"_hint.length>=0\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"disabled\">\r\n    <input [id]=\"id\" type=\"checkbox\" [indeterminate]=\"_stateIndeterminate\" [(ngModel)]=\"value\" [checked]=\"value\"\r\n        [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\"\r\n        (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    <div class=\"ax-suffix ax-ms-3\" *ngIf=\"_label.length||_hint.length\">\r\n        <div *ngIf=\"_label.length\">\r\n            <ng-content select=\"ax-label\"></ng-content>\r\n        </div>\r\n        <div *ngIf=\"_hint.length\">\r\n            <ng-content select=\"ax-form-hint\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div> -->\r\n\r\n<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-h-4 ax-w-4\" type=\"checkbox\" [indeterminate]=\"_stateIndeterminate\" [(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\r\n<ng-content select=\"ax-validation-rule\"></ng-content>", directives: [{ type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXCheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXCheckBoxComponent, selector: "ax-check-box", 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" }, usesInheritance: true, ngImport: i0, template: "<label 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-h-4 ax-w-4\" type=\"checkbox\" [class.ax-state-readonly]=\"readonly\"\r\n            [class.ax-state-disabled]=\"disabled\" [indeterminate]=\"_stateIndeterminate\" [(ngModel)]=\"value\"\r\n            [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n            (click)=\"_handleOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    </div>\r\n    <div class=\"ax-ms-3 ax-text-sm\">\r\n        <ng-content select=\"ax-content\"></ng-content>\r\n        <ng-content select=\"ax-form-hint\"></ng-content>\r\n    </div>\r\n</label>\r\n<ng-content select=\"ax-validation-rule\"></ng-content>", directives: [{ type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.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.1.1", ngImport: i0, type: AXCheckBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-check-box', inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div class=\"ax-wrapper ax-flex ax-flex-row \" [class.ax-items-center]=\"_hint.length==0\"\r\n    [class.ax-items-start]=\"_hint.length>=0\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"disabled\">\r\n    <input [id]=\"id\" type=\"checkbox\" [indeterminate]=\"_stateIndeterminate\" [(ngModel)]=\"value\" [checked]=\"value\"\r\n        [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\"\r\n        (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    <div class=\"ax-suffix ax-ms-3\" *ngIf=\"_label.length||_hint.length\">\r\n        <div *ngIf=\"_label.length\">\r\n            <ng-content select=\"ax-label\"></ng-content>\r\n        </div>\r\n        <div *ngIf=\"_hint.length\">\r\n            <ng-content select=\"ax-form-hint\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div> -->\r\n\r\n<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-h-4 ax-w-4\" type=\"checkbox\" [indeterminate]=\"_stateIndeterminate\" [(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\r\n<ng-content select=\"ax-validation-rule\"></ng-content>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _hint: [{
-                type: ContentChildren,
-                args: [AXFormHintComponent]
-            }], _label: [{
-                type: ContentChild,
-                args: [AXLabelComponent]
-            }] } });
+            args: [{ selector: 'ax-check-box', inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label 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-h-4 ax-w-4\" type=\"checkbox\" [class.ax-state-readonly]=\"readonly\"\r\n            [class.ax-state-disabled]=\"disabled\" [indeterminate]=\"_stateIndeterminate\" [(ngModel)]=\"value\"\r\n            [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n            (click)=\"_handleOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    </div>\r\n    <div class=\"ax-ms-3 ax-text-sm\">\r\n        <ng-content select=\"ax-content\"></ng-content>\r\n        <ng-content select=\"ax-form-hint\"></ng-content>\r\n    </div>\r\n</label>\r\n<ng-content select=\"ax-validation-rule\"></ng-content>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
 class AXCheckBoxModule {
 }
 AXCheckBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXCheckBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCheckBoxModule, declarations: [AXCheckBoxComponent], imports: [CommonModule, FormsModule], exports: [AXCheckBoxComponent] });
-AXCheckBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCheckBoxModule, providers: [], imports: [[CommonModule, FormsModule]] });
+AXCheckBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCheckBoxModule, declarations: [AXCheckBoxComponent], imports: [CommonModule, FormsModule, AXEditorDecoratorModule], exports: [AXCheckBoxComponent] });
+AXCheckBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCheckBoxModule, providers: [], imports: [[CommonModule, FormsModule, AXEditorDecoratorModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCheckBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXCheckBoxComponent],
-                    imports: [CommonModule, FormsModule],
+                    imports: [CommonModule, FormsModule, AXEditorDecoratorModule],
                     exports: [AXCheckBoxComponent],
                     providers: [],
                 }]
@@ -2938,19 +2848,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 type: Input
             }] } });
 
-const COMPONENT$f = [AXDataListComponent];
-const MODULES$f = [CommonModule, AXButtonModule];
+const COMPONENT$g = [AXDataListComponent];
+const MODULES$g = [CommonModule, AXButtonModule];
 class AXDataListModule {
 }
 AXDataListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDataListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXDataListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDataListModule, declarations: [AXDataListComponent], imports: [CommonModule, AXButtonModule], exports: [AXDataListComponent] });
-AXDataListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDataListModule, providers: [], imports: [[...MODULES$f]] });
+AXDataListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDataListModule, providers: [], imports: [[...MODULES$g]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDataListModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$f],
-                    imports: [...MODULES$f],
-                    exports: [...COMPONENT$f],
+                    declarations: [...COMPONENT$g],
+                    imports: [...MODULES$g],
+                    exports: [...COMPONENT$g],
                     providers: [],
                 }]
         }] });
@@ -2958,6 +2868,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 class AXPopoverComponent extends AXBaseComponent {
     constructor(_elementRef, _cdr, _zone, _overlay, _platform, _viewContainerRef) {
         super(_elementRef, _cdr);
+        this._elementRef = _elementRef;
         this._cdr = _cdr;
         this._zone = _zone;
         this._overlay = _overlay;
@@ -3094,11 +3005,10 @@ class AXPopoverComponent extends AXBaseComponent {
         if (!targetRef)
             return;
         if (!this._overlayRef) {
-            debugger;
             if (this._platform.is('Mobile')) {
                 this._overlayRef = this._overlay.create({
                     positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
-                    scrollStrategy: this._overlay.scrollStrategies.noop(),
+                    disposeOnNavigation: true,
                     panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
                     hasBackdrop: true
                 });
@@ -3109,7 +3019,7 @@ class AXPopoverComponent extends AXBaseComponent {
                         .flexibleConnectedTo(targetRef)
                         .withPositions(Array.isArray(this.position) ? this.position : [this.position])
                         .withPush(false),
-                    scrollStrategy: this._overlay.scrollStrategies.close(),
+                    disposeOnNavigation: true,
                     panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
                     hasBackdrop: this.hasBackdrop,
                     backdropClass: [this.backdropClass || 'cdk-overlay-transparent-backdrop']
@@ -3124,15 +3034,15 @@ class AXPopoverComponent extends AXBaseComponent {
                     }
                 }));
             }
-            // this._addSub(this._overlayRef.attachments().subscribe(() => {
-            //   if (!this._isScrollAttached) {
-            //     this._addSub(this._platform.scroll.subscribe(c => {
-            //       // if (!(c.nativeEvent.target as HTMLElement).closest('.ax-overlay-pane'))
-            //       this.close();
-            //     }));
-            //     this._isScrollAttached = true;
-            //   }
-            // }));
+            this._addSub(this._overlayRef.attachments().subscribe(() => {
+                if (!this._isScrollAttached) {
+                    this._addSub(this._platform.scroll.subscribe(c => {
+                        if (!c.nativeEvent.target.closest('.ax-overlay-pane'))
+                            this.updatePosition();
+                    }));
+                    this._isScrollAttached = true;
+                }
+            }));
         }
         if (!this._templatePortal) {
             this._templatePortal = new TemplatePortal(this._baseTemplate, this._viewContainerRef);
@@ -3144,6 +3054,10 @@ class AXPopoverComponent extends AXBaseComponent {
     _addSub(sub) {
         this._subs.push(sub);
     }
+    updatePosition() {
+        var _a;
+        (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.updatePosition();
+    }
 }
 AXPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$2.Overlay }, { token: i2.AXPlatform }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
 AXPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXPopoverComponent, selector: "ax-popover", inputs: { target: "target", position: "position", openTrigger: "openTrigger", closeTrigger: "closeTrigger", hasBackdrop: "hasBackdrop", backdropClass: "backdropClass" }, outputs: { onOpened: "onOpened", onClosed: "onClosed" }, host: { listeners: { "document:keydown": "_handleKeydownHandler($event)" } }, viewQueries: [{ propertyName: "_baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #baseTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -3195,6 +3109,10 @@ class AXDatePickerComponent extends AXBaseDatePickerMixin {
             value: v
         });
     }
+    onViewInit() {
+        super.onViewInit();
+        this._popoverTitle = this.placeholder || AXTranslator.get('datepicker.popover.title');
+    }
     _handleArrowClickEvent(e) {
         this.toggle();
     }
@@ -3228,7 +3146,6 @@ class AXDatePickerComponent extends AXBaseDatePickerMixin {
                 switch (part[0]) {
                     case 'dd':
                     case 'DD':
-                        debugger;
                         const newVal = Math.max(1, Math.min(31, Number(word + e.key)));
                         this.value = dateVal.set('day', newVal).date;
                         break;
@@ -3301,10 +3218,10 @@ class AXDatePickerComponent extends AXBaseDatePickerMixin {
     }
 }
 AXDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", format: "format" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange", formatChange: "formatChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: 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\" [tabindex]=\"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<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane\" [style.min-width.px]=\"dropdownWidth\">\r\n        <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-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        <ax-calendar [disabled]=\"disabled\" [readonly]=\"readonly\" [(value)]=\"value\" [min]=\"min\" [min]=\"max\"\r\n            [disabledDates]=\"disabledDates\" [holidayDates]=\"holidayDates\" [depth]=\"depth\">\r\n        </ax-calendar>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "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", "holidayDates"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange"] }], directives: [{ type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.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.1.1", 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", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", format: "format" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange", formatChange: "formatChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: 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\" [tabindex]=\"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<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane\" >\r\n        <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-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        <ax-calendar [disabled]=\"disabled\" [readonly]=\"readonly\" [(value)]=\"value\" [min]=\"min\" [min]=\"max\"\r\n            [disabledDates]=\"disabledDates\" [holidayDates]=\"holidayDates\" [depth]=\"depth\">\r\n        </ax-calendar>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "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", "holidayDates"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange"] }], directives: [{ type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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\" [tabindex]=\"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<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane\" [style.min-width.px]=\"dropdownWidth\">\r\n        <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-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        <ax-calendar [disabled]=\"disabled\" [readonly]=\"readonly\" [(value)]=\"value\" [min]=\"min\" [min]=\"max\"\r\n            [disabledDates]=\"disabledDates\" [holidayDates]=\"holidayDates\" [depth]=\"depth\">\r\n        </ax-calendar>\r\n    </div>\r\n</ax-popover>" }]
+            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\" [tabindex]=\"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<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane\" >\r\n        <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-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        <ax-calendar [disabled]=\"disabled\" [readonly]=\"readonly\" [(value)]=\"value\" [min]=\"min\" [min]=\"max\"\r\n            [disabledDates]=\"disabledDates\" [holidayDates]=\"holidayDates\" [depth]=\"depth\">\r\n        </ax-calendar>\r\n    </div>\r\n</ax-popover>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2.AXPlatform }]; }, propDecorators: { popover: [{
                 type: ViewChild,
                 args: [AXPopoverComponent]
@@ -3369,19 +3286,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 type: Input
             }] } });
 
-const COMPONENT$e = [AXInputMaskComponent];
-const MODULES$e = [CommonModule, NgxMaskModule.forRoot()];
+const COMPONENT$f = [AXInputMaskComponent];
+const MODULES$f = [CommonModule, NgxMaskModule.forRoot()];
 class AXInputMaskModule {
 }
 AXInputMaskModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXInputMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXInputMaskModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXInputMaskModule, declarations: [AXInputMaskComponent], imports: [CommonModule, i1$3.NgxMaskModule], exports: [AXInputMaskComponent] });
-AXInputMaskModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXInputMaskModule, providers: [], imports: [[...MODULES$e]] });
+AXInputMaskModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXInputMaskModule, providers: [], imports: [[...MODULES$f]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXInputMaskModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$e],
-                    imports: [...MODULES$e],
-                    exports: [...COMPONENT$e],
+                    declarations: [...COMPONENT$f],
+                    imports: [...MODULES$f],
+                    exports: [...COMPONENT$f],
                     providers: [],
                 }]
         }] });
@@ -3399,6 +3316,7 @@ class AXTextBoxComponent extends AXBaseTextBoxMixin {
         super(elementRef, cdr);
     }
     //TODO: prefix suffix text
+    //TODO: HostBinding classes
     get hostClass() {
         return `${this.cssClass} ax-${this.size}`;
     }
@@ -3462,8 +3380,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }] });
 
-const COMPONENT$d = [AXDatePickerComponent];
-const MODULES$d = [
+const COMPONENT$e = [AXDatePickerComponent];
+const MODULES$e = [
     CommonModule,
     AXCalendarModule,
     AXTextBoxModule,
@@ -3486,13 +3404,13 @@ AXDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         AXIconModule,
         AXDateTimeModule,
         FormsModule], exports: [AXDatePickerComponent] });
-AXDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDatepickerModule, providers: [], imports: [[...MODULES$d]] });
+AXDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDatepickerModule, providers: [], imports: [[...MODULES$e]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$d],
-                    imports: [...MODULES$d],
-                    exports: [...COMPONENT$d],
+                    declarations: [...COMPONENT$e],
+                    imports: [...MODULES$e],
+                    exports: [...COMPONENT$e],
                     providers: [],
                 }]
         }] });
@@ -3812,8 +3730,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 args: ['axIsLoading']
             }] } });
 
-const COMPONENT$c = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
-const MODULES$c = [CommonModule, OverlayModule, PortalModule];
+const COMPONENT$d = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
+const MODULES$d = [CommonModule, OverlayModule, PortalModule];
 class AXLoadingModule {
     constructor() {
         AXConfig.set({
@@ -3827,13 +3745,13 @@ class AXLoadingModule {
 }
 AXLoadingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXLoadingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLoadingModule, declarations: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent], imports: [CommonModule, OverlayModule, PortalModule], exports: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent] });
-AXLoadingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLoadingModule, providers: [], imports: [[...MODULES$c]] });
+AXLoadingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLoadingModule, providers: [], imports: [[...MODULES$d]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLoadingModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$c],
-                    imports: [...MODULES$c],
-                    exports: [...COMPONENT$c],
+                    declarations: [...COMPONENT$d],
+                    imports: [...MODULES$d],
+                    exports: [...COMPONENT$d],
                     providers: [],
                 }]
         }], ctorParameters: function () { return []; } });
@@ -4248,19 +4166,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }] });
 
-const COMPONENT$b = [AXDialogComponent];
-const MODULES$b = [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule];
+const COMPONENT$c = [AXDialogComponent];
+const MODULES$c = [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule];
 class AXDialogModule {
 }
 AXDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDialogModule, declarations: [AXDialogComponent], imports: [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule], exports: [AXDialogComponent] });
-AXDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDialogModule, providers: [], imports: [[...MODULES$b]] });
+AXDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDialogModule, providers: [], imports: [[...MODULES$c]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDialogModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$b],
-                    imports: [...MODULES$b],
-                    exports: [...COMPONENT$b],
+                    declarations: [...COMPONENT$c],
+                    imports: [...MODULES$c],
+                    exports: [...COMPONENT$c],
                     providers: [],
                 }]
         }] });
@@ -4506,42 +4424,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-const COMPONENT$a = [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent];
-const MODULES$a = [CommonModule];
+const COMPONENT$b = [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent];
+const MODULES$b = [CommonModule];
 class AXDrawerModule {
 }
 AXDrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDrawerModule, declarations: [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent], imports: [CommonModule], exports: [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent] });
-AXDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDrawerModule, providers: [], imports: [[...MODULES$a]] });
+AXDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDrawerModule, providers: [], imports: [[...MODULES$b]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDrawerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$a],
-                    imports: [...MODULES$a],
-                    exports: [...COMPONENT$a],
+                    declarations: [...COMPONENT$b],
+                    imports: [...MODULES$b],
+                    exports: [...COMPONENT$b],
                     providers: [],
                 }]
         }] });
 
-class AXDropdownComponent extends AXBaseDropdownMixin {
-    constructor(_elementRef, _cdr) {
-        super(_elementRef, _cdr);
-        this._target = this;
-    }
-    _handleArrowClickEvent() {
-        this.toggle();
-    }
-}
-AXDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXDropdownComponent, selector: "ax-drop-down", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-editor-container\" [class.ax-state-disabled]=\"disabled\">\r\n    <ng-content select=\"ax-prefix\">\r\n    </ng-content>\r\n    <div class=\"ax-dropdown-content\" style=\"display: inline-flex;\" (click)=\"_handleArrowClickEvent()\">\r\n        <ng-content select=\"[input]\">\r\n        </ng-content>\r\n    </div>\r\n    <ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" [size]=\"size\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent()\">\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</div>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane\"  [style.min-width.px]=\"dropdownWidth\">\r\n        <ng-content select=\"[panel]\">\r\n        </ng-content>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDropdownComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-drop-down', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-editor-container\" [class.ax-state-disabled]=\"disabled\">\r\n    <ng-content select=\"ax-prefix\">\r\n    </ng-content>\r\n    <div class=\"ax-dropdown-content\" style=\"display: inline-flex;\" (click)=\"_handleArrowClickEvent()\">\r\n        <ng-content select=\"[input]\">\r\n        </ng-content>\r\n    </div>\r\n    <ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" [size]=\"size\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent()\">\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</div>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane\"  [style.min-width.px]=\"dropdownWidth\">\r\n        <ng-content select=\"[panel]\">\r\n        </ng-content>\r\n    </div>\r\n</ax-popover>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { popover: [{
-                type: ViewChild,
-                args: [AXPopoverComponent]
-            }] } });
-
 class AXDropdownPanelComponent extends AXBaseDropdownMixin {
     constructor(elementRef, cdr, _parent) {
         super(elementRef, cdr);
@@ -4615,14 +4514,147 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 class AXDropdownModule {
 }
 AXDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDropdownModule, declarations: [AXDropdownComponent, AXDropdownPanelComponent], imports: [CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule], exports: [AXDropdownComponent, AXDropdownPanelComponent] });
+AXDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDropdownModule, declarations: [AXDropdownPanelComponent], imports: [CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule], exports: [AXDropdownPanelComponent] });
 AXDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDropdownModule, providers: [], imports: [[CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule],
-                    exports: [AXDropdownComponent, AXDropdownPanelComponent],
-                    declarations: [AXDropdownComponent, AXDropdownPanelComponent],
+                    exports: [AXDropdownPanelComponent],
+                    declarations: [AXDropdownPanelComponent],
+                    providers: [],
+                }]
+        }] });
+
+class AXFormFieldComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+    }
+}
+AXFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXFormFieldComponent, selector: "ax-form-field", usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-form-field',
+                    template: '<ng-content></ng-content>',
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+
+class AXFormHintComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+    }
+}
+AXFormHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormHintComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXFormHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXFormHintComponent, selector: "ax-form-hint", usesInheritance: true, ngImport: i0, template: ' <p class="ax-text-light-400 ax-text-xs ax-py-1 dark:ax-text-light-300"><ng-content></ng-content></p>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormHintComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-form-hint',
+                    template: ' <p class="ax-text-light-400 ax-text-xs ax-py-1 dark:ax-text-light-300"><ng-content></ng-content></p>',
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+
+class AXFormComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.cdr = cdr;
+    }
+    _getComponenets() {
+        return Array.from(this._getHostElement().querySelectorAll('[ax-form-input="true"]'));
+    }
+    validate() {
+        const widgets = this._getComponenets();
+        //
+        return new Promise((resolve, reject) => {
+            if (widgets.length === 0) {
+                return Promise.resolve({ result: true });
+            }
+            Promise.all(widgets.map((c) => c.__axContext__.validate())).then((rules) => {
+                const failed = rules.filter((c) => !c.result);
+                if (failed.length) {
+                    reject({
+                        result: false,
+                        items: failed
+                    });
+                }
+                else {
+                    resolve({ result: true });
+                }
+            });
+        });
+    }
+    clear() {
+        const widgets = this._getComponenets();
+        widgets.forEach(w => {
+            w.__axContext__.clear();
+        });
+    }
+}
+AXFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXFormComponent, selector: "ax-form", usesInheritance: true, ngImport: i0, template: '<div class="ax-form"><ng-content></ng-content></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-form',
+                    template: '<div class="ax-form"><ng-content></ng-content></div>',
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+
+class AXFormModule {
+}
+AXFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormModule, declarations: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent], imports: [CommonModule], exports: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent] });
+AXFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    exports: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent],
+                    declarations: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent],
+                    providers: [],
+                }]
+        }] });
+
+class AXLabelComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+    }
+    get target() {
+        return this._target;
+    }
+    set target(v) {
+        this._target = v;
+        this._cdr.markForCheck();
+    }
+}
+AXLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXLabelComponent, selector: "ax-label", usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"target\">\r\n    <ng-content></ng-content>\r\n</label>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<label [attr.for]=\"target\">\r\n    <ng-content></ng-content>\r\n</label>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+
+const COMPONENT$a = [AXLabelComponent];
+const MODULES$a = [CommonModule];
+class AXLabelModule {
+}
+AXLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLabelModule, declarations: [AXLabelComponent], imports: [CommonModule], exports: [AXLabelComponent] });
+AXLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLabelModule, providers: [], imports: [[...MODULES$a]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLabelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT$a],
+                    imports: [...MODULES$a],
+                    exports: [...COMPONENT$a],
                     providers: [],
                 }]
         }] });
@@ -5023,8 +5055,8 @@ class AXPopupComponent extends AXBaseComponentMixin {
         this.showCloseButton = true;
         this.showHeader = true;
     }
-    onViewInit() {
-        debugger;
+    onInit() {
+        super.onInit();
         if (this._platform.is('Mobile')) {
             this.draggable = false;
         }
@@ -5189,9 +5221,10 @@ class AXPopupService {
     }
 }
 AXPopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopupService, deps: [{ token: AXOverlayService }], target: i0.ɵɵFactoryTarget.Injectable });
-AXPopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopupService });
+AXPopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopupService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopupService, decorators: [{
-            type: Injectable
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: AXOverlayService }]; } });
 
 const COMPONENT$7 = [AXPopupComponent];
@@ -5200,14 +5233,14 @@ class AXPopupModule {
 }
 AXPopupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXPopupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopupModule, declarations: [AXPopupComponent], imports: [CommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule], exports: [AXPopupComponent] });
-AXPopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopupModule, providers: [AXPopupService], imports: [[...MODULES$7]] });
+AXPopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopupModule, providers: [], imports: [[...MODULES$7]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopupModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$7],
                     imports: [...MODULES$7],
                     exports: [...COMPONENT$7],
-                    providers: [AXPopupService],
+                    providers: [],
                 }]
         }] });
 
@@ -5225,10 +5258,10 @@ class AXRadioComponent extends AXBaseValueComponentMixin {
     }
 }
 AXRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", 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.1.1", 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$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.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.1.1", 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$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.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.1.1", 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$6 = [AXRadioComponent];
@@ -5285,26 +5318,47 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         this._cdr = _cdr;
         this._zone = _zone;
         this._platform = _platform;
+        this.checkbox = false;
         this._currentfocusedIndex = -1;
         this._isMobile = false;
-        this._target = this._getHostElement();
-        this._isMobile = this._platform.is('Mobile');
     }
     _handleArrowClickEvent(e) {
+        e.nativeEvent.stopPropagation();
         this.toggle();
     }
-    onViewInit() {
-        super.onViewInit();
-        this.dropdownWidth = this._target.offsetWidth;
+    _handleInputClickEvent(e) {
+        e.stopPropagation();
+        this.toggle();
+    }
+    onInit() {
+        super.onInit();
+        this._target = this._elementRef.nativeElement;
+        this._isMobile = this._platform.is('Mobile');
+        this._popoverTitle = this.placeholder || AXTranslator.get('selectbox.popover.title');
         this.onOpened.subscribe(() => {
-            this._focusSelectedItem();
+            if (this.displayItems.length == 0) {
+                this._fetchData();
+            }
+            else {
+                this._focusSelectedItem();
+            }
         });
+        this.onClosed.subscribe(() => {
+            this.focus();
+        });
+    }
+    onViewInit() {
+        super.onViewInit();
+        this._popoverWidth = this._isMobile ? null : this._target.offsetWidth;
     }
     _handleOnItemClick(e, item) {
-        debugger;
+        if (this.isItemDisabled(item)) {
+            return;
+        }
         if (!this.multiple)
             this.close();
         this.toggleSelect(item);
+        this._cdr.detectChanges();
     }
     _handleListScroll(e) {
         const list = e.target;
@@ -5314,14 +5368,17 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         this._fetchData();
     }
     _checkForLoadData() {
+        var _a;
         const list = this.listContainer.nativeElement;
-        if (this.loadedCount < this.totalCount && list.clientHeight < list.parentElement.clientHeight) {
+        const headerSize = ((_a = list.parentElement.querySelector('.ax-overlay-pane-header')) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+        if (this.loadedCount < this.totalCount && list.scrollHeight < ((list.parentElement.clientHeight - headerSize) * 1.5)) {
             this._fetchData();
         }
     }
     _onDataLoaded() {
         setTimeout(() => {
             this._checkForLoadData();
+            this.popover.updatePosition();
         }, 100);
     }
     _handleOnRemoveItemClick(e, item) {
@@ -5331,6 +5388,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
     _handleBadgeRemove(e, item) {
         this.unselectItems(item);
         e.stopPropagation();
+        this.close();
     }
     _handleKeydown(e) {
         if (!(this._getHostElement() == document.activeElement ||
@@ -5352,7 +5410,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
             e.preventDefault();
             return;
         }
-        else if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && this.displayItems.length > 0 && !this.dropdown.isOpen && e.type === 'keydown') {
+        else if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && this.displayItems.length > 0 && !this.popover.isOpen && e.type === 'keydown') {
             if (this.multiple) {
                 this.open();
             }
@@ -5374,7 +5432,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
             e.preventDefault();
             return;
         }
-        if (this.dropdown.isOpen) {
+        if (this.popover.isOpen) {
             if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && this.displayItems.length > 0) {
                 this.isUserInput = true;
                 this._focusItemByNav((e.key === 'ArrowDown' ? 1 : -1));
@@ -5384,9 +5442,14 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
                 e.preventDefault();
                 return;
             }
-            if ((e.key === 'Enter' || e.code === 'Space')) {
+            //e.key === 'Enter' ||
+            if ((e.code === 'Space')) {
+                e.preventDefault();
                 const focusedItem = this.displayItems[this._currentfocusedIndex];
                 if (focusedItem) {
+                    if (this.isItemDisabled(focusedItem)) {
+                        return;
+                    }
                     if (this.multiple) {
                         this.isUserInput = true;
                         this.toggleSelect(focusedItem);
@@ -5397,7 +5460,6 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
                         this.close();
                     }
                 }
-                e.preventDefault();
                 return;
             }
         }
@@ -5447,13 +5509,15 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
     }
 }
 AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i2.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", items: "items", multiple: "multiple", valueField: "valueField", textField: "textField" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange" }, host: { listeners: { "document:keydown": "_handleKeydown($event)" }, classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], 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    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\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\" (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    </div>\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<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane \" [class.ax-overlay-center]=\"_isMobile\">\r\n        <div class=\"ax-list ax-list-container\" panel>\r\n            <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n                <span>{{placeholder || 'Choose an Item'}}</span>\r\n                <i class=\"ax-ic {{multiple?'ax-ic-check':'ax-ic-close'}}\" (click)=\"close()\" tabindex=\"1\"></i>\r\n            </div>\r\n            <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                (scroll)=\"_handleListScroll($event)\" #listContainer>\r\n                <ng-container *ngFor=\"let item of displayItems;let i = index;trackBy : _trackByFunction\">\r\n                    <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                        <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                            </ng-container>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-template #defualtTemplate>\r\n                        <ng-container *ngIf=\"!multiple; then singleTemplate; else multipleTemplate\"></ng-container>\r\n                        <ng-template #singleTemplate>\r\n                            <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n                                {{ _getItemDisplayTextTemplte(item) }}\r\n                            </div>\r\n                        </ng-template>\r\n                        <ng-template #multipleTemplate>\r\n                            <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n                                <ax-check-box [value]=\"isItemSelected(item)\">\r\n                                </ax-check-box>\r\n                                {{ _getItemDisplayTextTemplte(item) }}\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n                    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseTemplate>\r\n                        Empty!\r\n                    </ng-template>\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-list-loading-container\">\r\n                            <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXBadgeComponent, selector: "ax-badge", inputs: ["text", "color"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"], outputs: ["onOpened", "onClosed"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", pageSize: "pageSize", valueField: "valueField", textField: "textField", items: "items", disabledField: "disabledField", disabledCallback: "disabledCallback", multiple: "multiple", selectionMode: "selectionMode", checkbox: "checkbox" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange", valueChanged: "valueChanged" }, host: { listeners: { "document:keydown": "_handleKeydown($event)" }, classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], 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\" (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=\"!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\" (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    </div>\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-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    <div class=\"ax-overlay-pane \" [class.ax-overlay-center]=\"_isMobile\" [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list ax-list-container\" panel>\r\n            <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n                <span>{{_popoverTitle}}</span>\r\n                <i class=\"ax-ic {{multiple?'ax-ic-check':'ax-ic-close'}}\" (click)=\"close()\" tabindex=\"1\"></i>\r\n            </div>\r\n            <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                (scroll)=\"_handleListScroll($event)\" #listContainer>\r\n                <ng-container *ngFor=\"let item of displayItems;let i = index;trackBy : _trackByFunction\">\r\n                    <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                        <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                            [class.ax-state-disabled]=\"isItemDisabled(item)\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                            </ng-container>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-template #defualtTemplate>\r\n                        <ng-container *ngIf=\"!multiple; then singleTemplate; else multipleTemplate\"></ng-container>\r\n                        <ng-template #singleTemplate>\r\n                            <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                [attr.tabindex]=\"i\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                (click)=\"_handleOnItemClick($event,item)\">\r\n                                {{ _getItemDisplayTextTemplte(item) }}\r\n                            </div>\r\n                        </ng-template>\r\n                        <ng-template #multipleTemplate>\r\n                            <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\" [class.ax-check-box]=\"checkbox\"\r\n                                [attr.tabindex]=\"i\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                (click)=\"_handleOnItemClick($event,item)\">\r\n                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\" *ngIf=\"checkbox\"\r\n                                    [checked]=\"isItemSelected(item)\" [disabled]=\"isItemDisabled(item)\">\r\n                                &nbsp;\r\n                                {{ _getItemDisplayTextTemplte(item) }}\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n                    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseTemplate>\r\n                        Empty!\r\n                    </ng-template>\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-list-loading-container\">\r\n                            <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXBadgeComponent, selector: "ax-badge", inputs: ["text", "color"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"], outputs: ["onOpened", "onClosed"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-select-box', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...CALENDAR_INPUTS, 'items', 'multiple', 'allowNull', 'valueField', 'textField'], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...CALENDAR_OUTPUTS], 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\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\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\" (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    </div>\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<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane \" [class.ax-overlay-center]=\"_isMobile\">\r\n        <div class=\"ax-list ax-list-container\" panel>\r\n            <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n                <span>{{placeholder || 'Choose an Item'}}</span>\r\n                <i class=\"ax-ic {{multiple?'ax-ic-check':'ax-ic-close'}}\" (click)=\"close()\" tabindex=\"1\"></i>\r\n            </div>\r\n            <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                (scroll)=\"_handleListScroll($event)\" #listContainer>\r\n                <ng-container *ngFor=\"let item of displayItems;let i = index;trackBy : _trackByFunction\">\r\n                    <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                        <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                            </ng-container>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-template #defualtTemplate>\r\n                        <ng-container *ngIf=\"!multiple; then singleTemplate; else multipleTemplate\"></ng-container>\r\n                        <ng-template #singleTemplate>\r\n                            <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n                                {{ _getItemDisplayTextTemplte(item) }}\r\n                            </div>\r\n                        </ng-template>\r\n                        <ng-template #multipleTemplate>\r\n                            <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n                                <ax-check-box [value]=\"isItemSelected(item)\">\r\n                                </ax-check-box>\r\n                                {{ _getItemDisplayTextTemplte(item) }}\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n                    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseTemplate>\r\n                        Empty!\r\n                    </ng-template>\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-list-loading-container\">\r\n                            <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ax-popover>" }]
+            args: [{ selector: 'ax-select-box', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...CALENDAR_INPUTS, ...DATALIST_INPUTS, ...SELECTION_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...CALENDAR_OUTPUTS, ...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\" (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=\"!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\" (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    </div>\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-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    <div class=\"ax-overlay-pane \" [class.ax-overlay-center]=\"_isMobile\" [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list ax-list-container\" panel>\r\n            <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n                <span>{{_popoverTitle}}</span>\r\n                <i class=\"ax-ic {{multiple?'ax-ic-check':'ax-ic-close'}}\" (click)=\"close()\" tabindex=\"1\"></i>\r\n            </div>\r\n            <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                (scroll)=\"_handleListScroll($event)\" #listContainer>\r\n                <ng-container *ngFor=\"let item of displayItems;let i = index;trackBy : _trackByFunction\">\r\n                    <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                        <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                            [class.ax-state-disabled]=\"isItemDisabled(item)\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                            </ng-container>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-template #defualtTemplate>\r\n                        <ng-container *ngIf=\"!multiple; then singleTemplate; else multipleTemplate\"></ng-container>\r\n                        <ng-template #singleTemplate>\r\n                            <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                [attr.tabindex]=\"i\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                (click)=\"_handleOnItemClick($event,item)\">\r\n                                {{ _getItemDisplayTextTemplte(item) }}\r\n                            </div>\r\n                        </ng-template>\r\n                        <ng-template #multipleTemplate>\r\n                            <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\" [class.ax-check-box]=\"checkbox\"\r\n                                [attr.tabindex]=\"i\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                (click)=\"_handleOnItemClick($event,item)\">\r\n                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\" *ngIf=\"checkbox\"\r\n                                    [checked]=\"isItemSelected(item)\" [disabled]=\"isItemDisabled(item)\">\r\n                                &nbsp;\r\n                                {{ _getItemDisplayTextTemplte(item) }}\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n                    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseTemplate>\r\n                        Empty!\r\n                    </ng-template>\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-list-loading-container\">\r\n                            <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ax-popover>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i2.AXPlatform }]; }, propDecorators: { popover: [{
                 type: ViewChild,
-                args: [AXPopoverComponent]
+                args: [AXPopoverComponent, { static: true }]
+            }], checkbox: [{
+                type: Input
             }], listContainer: [{
                 type: ViewChild,
                 args: ['listContainer', { static: true }]
@@ -6394,5 +6458,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXAlertButtonComponent, AXAlertComponent, AXAlertContentComponent, AXAlertFooterComponent, AXAlertModule, AXAlertSuffixComponent, AXAlertTitleComponent, AXAvatarComponent, AXAvatarModule, AXBadgeComponent, AXBadgeModule, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseDatePickerMixin, AXBaseDropdownMixin, AXBaseItemButtonMixin, AXBasePageComponent, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXButtonClickEvent, AXButtonComponent, AXButtonGroupComponent, AXButtonItemComponent, AXButtonModule, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCheckBoxComponent, AXCheckBoxModule, AXClickEvent, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatePickerComponent, AXDatepickerModule, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent, AXDrawerModule, AXDropdownComponent, AXDropdownModule, AXDropdownPanelComponent, AXEditorDecoratorModule, AXEvent, AXFocusEvent, AXFormComponent, AXFormFieldComponent, AXFormHintComponent, AXFormModule, AXHtmlEvent, AXIconComponent, AXIconModule, AXInputMaskComponent, AXInputMaskModule, AXInteractiveComponenetMixin, AXItemClickEvent, AXLabelComponent, AXLabelModule, AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent, AXNumberBoxComponent, AXNumberBoxModule, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageFooterComponent, AXPageModule, AXPageResult, AXPasswordBoxComponent, AXPasswordBoxModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXRadioComponent, AXRadioModule, AXRangeSliderComponent, AXRangeSliderModule, AXResponsiveDirective, AXSelectBoxComponent, AXSelectBoxModule, AXSelectionListComponent, AXSelectionListModule, AXSelectionValueChangedEvent, AXSideMenuComponent, AXSideMenuModule, AXSizableComponentMixin, AXSwitchComponent, AXSwitchModule, AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule, AXTextBoxComponent, AXTextBoxModule, AXTimeBoxComponent, AXTimeBoxModule, AXToastComponent, AXToastModule, AXToastService, AXTooltipComponent, AXTooltipDirective, AXTooltipModule, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueChangedEvent, AX_DIRECTIONS, AX_LOCATIONS, AX_STYLE_TYPES, BASE_INPUTS, BASE_OUTPUT, TAB_META_KEY, _BaseComponenetMixin };
+export { AXAlertButtonComponent, AXAlertComponent, AXAlertContentComponent, AXAlertFooterComponent, AXAlertModule, AXAlertSuffixComponent, AXAlertTitleComponent, AXAvatarComponent, AXAvatarModule, AXBadgeComponent, AXBadgeModule, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseDatePickerMixin, AXBaseDropdownMixin, AXBaseItemButtonMixin, AXBasePageComponent, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXButtonClickEvent, AXButtonComponent, AXButtonGroupComponent, AXButtonItemComponent, AXButtonModule, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCheckBoxComponent, AXCheckBoxModule, AXClickEvent, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatePickerComponent, AXDatepickerModule, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent, AXDrawerModule, AXDropdownModule, AXDropdownPanelComponent, AXEditorDecoratorModule, AXEvent, AXFocusEvent, AXFormComponent, AXFormFieldComponent, AXFormHintComponent, AXFormModule, AXHtmlEvent, AXIconComponent, AXIconModule, AXInputMaskComponent, AXInputMaskModule, AXInteractiveComponenetMixin, AXItemClickEvent, AXLabelComponent, AXLabelModule, AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent, AXNumberBoxComponent, AXNumberBoxModule, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageFooterComponent, AXPageModule, AXPageResult, AXPasswordBoxComponent, AXPasswordBoxModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXRadioComponent, AXRadioModule, AXRangeSliderComponent, AXRangeSliderModule, AXResponsiveDirective, AXSelectBoxComponent, AXSelectBoxModule, AXSelectionListComponent, AXSelectionListModule, AXSelectionValueChangedEvent, AXSideMenuComponent, AXSideMenuModule, AXSizableComponentMixin, AXSwitchComponent, AXSwitchModule, AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule, AXTextBoxComponent, AXTextBoxModule, AXTimeBoxComponent, AXTimeBoxModule, AXToastComponent, AXToastModule, AXToastService, AXTooltipComponent, AXTooltipDirective, AXTooltipModule, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueChangedEvent, AX_DIRECTIONS, AX_LOCATIONS, AX_STYLE_TYPES, BASE_INPUTS, BASE_OUTPUT, TAB_META_KEY, _BaseComponenetMixin };
 //# sourceMappingURL=acorex-components.mjs.map