@acorex/components 5.2.2 → 5.3.0

package/fesm2020/acorex-components.mjs

@@ -1,6 +1,6 @@
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i0 from '@angular/core';
-import { Injectable, Inject, EventEmitter, Directive, Input, TemplateRef, NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, HostListener, HostBinding, Output, ContentChildren, ViewChild, ContentChild, Optional, ElementRef, ViewChildren } from '@angular/core';
+import { Injectable, Inject, EventEmitter, Directive, Input, TemplateRef, NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, HostListener, HostBinding, Output, ContentChildren, Optional, ContentChild, ViewChildren, ViewChild, ElementRef } from '@angular/core';
 import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import _ from 'lodash';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
@@ -90,17 +90,17 @@ class AXBaseComponent {
         const oldValue = this[option.name];
         const newValue = this._onOptionChanging({ name: option.name, value: option.value });
         //TODO : check real changes
+        if (option.beforeCallback)
+            option.beforeCallback(oldValue, newValue);
         if (oldValue != newValue) {
-            if (option.beforeCallback)
-                option.beforeCallback();
             this[`_${option.name}`] = option.value;
             this._onOptionChanged({ name: option.name, newValue, oldValue });
             const emitter = this[`${option.name}Change`];
             if (emitter)
                 emitter.emit(newValue);
-            if (option.afterCallback)
-                option.afterCallback();
         }
+        if (option.afterCallback)
+            option.afterCallback(oldValue, newValue);
     }
 }
 _AXBaseComponent_elementRef = new WeakMap();
@@ -175,15 +175,16 @@ function _BaseMenuComponentMixin(Base) {
                         return o;
                     else {
                         const no = {};
+                        no[this.valueField] = o;
                         no[Array.isArray(this.textField) ? this.textField[0] : this.textField] = o;
                         return no;
                     }
-                }));
+                }), this.valueField);
             }
             _findNode(parentId, _children, source) {
                 if (source.length > 0) {
                     source.forEach((element) => {
-                        if (element.id == parentId) {
+                        if (element[this.valueField] == parentId) {
                             element.children = _children;
                         }
                         else {
@@ -536,6 +537,7 @@ function _DatalistComponenetMixin(Base) {
             }
             empty() {
                 __classPrivateFieldSet(this, _isLoading, false, "f");
+                __classPrivateFieldSet(this, _currentPage, 0, "f");
                 if (__classPrivateFieldGet(this, _loadedItems, "f")) {
                     __classPrivateFieldGet(this, _loadedItems, "f").length = 0;
                 }
@@ -1190,6 +1192,21 @@ const AXBaseDropdownMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(
 const AXBaseMenuMixin = _InteractiveComponenetMixin(_BaseMenuComponentMixin(AXBaseComponent));
 const AXAvatarMixin = _ColorLookComponentMixin(AXBaseComponent);
 
+class AXClosbaleComponent {
+}
+AXClosbaleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXClosbaleComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AXClosbaleComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXClosbaleComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXClosbaleComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXSearchableComponent {
+}
+AXSearchableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXSearchableComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AXSearchableComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXSearchableComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXSearchableComponent, decorators: [{
+            type: Injectable
+        }] });
+
 /**
 *  Contains native event
 * @category Events
@@ -1658,74 +1675,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
             }] } });
 
 class AXDrawerComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr, zone) {
-        super(elementRef, cdr);
-        this.elementRef = elementRef;
-        this.zone = zone;
-        this.onChanged = new EventEmitter();
-        this.mode = 'push';
-        this.location = 'start';
-        this._collapsed = false;
+    constructor(_elementRef, _cdr, _zone) {
+        super(_elementRef, _cdr);
+        this._elementRef = _elementRef;
+        this._zone = _zone;
+        this.locationChange = new EventEmitter();
+        this.modeChange = new EventEmitter();
+        this._mode = 'overlay';
+        this.collapsedChange = new EventEmitter();
+        this._collapsed = true;
+        this._loaded = false;
+    }
+    get location() {
+        return this._location;
+    }
+    set location(v) {
+        this._setOption({
+            name: 'location',
+            value: v
+        });
+    }
+    get mode() {
+        return this._mode;
+    }
+    set mode(v) {
+        this._setOption({
+            name: 'mode',
+            value: v
+        });
     }
     get collapsed() {
         return this._collapsed;
     }
     set collapsed(v) {
-        if (v != this._collapsed) {
-            this._collapsed = v;
-            this._updateClass();
-            this._emitChange();
-        }
+        this._setOption({
+            name: 'collapsed',
+            value: v
+        });
     }
-    onInit() {
-        // this._getHostElement().classList.add(this.location == 'start' ? 'ax-drawer-start' : 'ax-drawer-end');
-        this._setLocation();
-        this._currentMode = this.mode;
-    }
-    _setLocation() {
-        const hostElementClassList = this._getHostElement().classList;
-        switch (this.location) {
-            case 'start':
-                hostElementClassList.add('ax-drawer-start');
-                break;
-            case 'end':
-                hostElementClassList.add('ax-drawer-end');
-                break;
-            case 'top':
-                hostElementClassList.add('ax-drawer-top');
-                break;
-            case 'bottom':
-                hostElementClassList.add('ax-drawer-bottom');
-                break;
-            default:
-                hostElementClassList.add('ax-drawer-start');
-                break;
-        }
+    onViewInit() {
+        setTimeout(() => {
+            this._loaded = true;
+            this._checkProps();
+        }, 1000);
+        this._detectBoundingSize();
     }
-    _updateClass() {
-        this.zone.runOutsideAngular(() => {
-            const elm = this._getHostElement();
-            //           
-            this._currentMode == 'overlay' ? this._setOverlayMode() : this._setPushMode();
-            //
-            if (this.collapsed) {
-                elm.classList.remove('ax-expanded');
-                elm.classList.add('ax-collapsed');
-                if (this._currentMode == 'overlay') {
-                    this._removeBackdrop();
-                }
-            }
-            else {
-                elm.classList.add('ax-expanded');
-                elm.classList.remove('ax-collapsed');
-                if (this._currentMode == 'overlay') {
-                    this._addBackdrop();
-                }
-            }
+    _onOptionChanged(option) {
+        this._checkProps();
+    }
+    ngDoCheck() {
+        this._detectBoundingSize();
+    }
+    _detectBoundingSize() {
+        this._zone.runOutsideAngular(() => {
+            const host = this._getHostElement();
+            if (host.clientWidth)
+                host.style.setProperty('--ax-el-width', `${host.clientWidth}px`);
         });
     }
-    onViewInit() {
-        this._detectSize();
+    _checkProps() {
+        this._detectBoundingSize();
+        this._removeBackdrop();
+        if (this.mode == 'overlay') {
+            if (!this.collapsed) {
+                this._addBackdrop();
+            }
+        }
     }
     toggle() {
         this.collapsed = !this.collapsed;
@@ -1736,69 +1751,35 @@ class AXDrawerComponent extends AXBaseComponentMixin {
     open() {
         this.collapsed = false;
     }
-    _handleWindowsResize(e) {
-        this._detectSize();
-    }
-    _detectSize() {
-        //TODO detect break size
-        const bound = this._getHostElement().parentElement.getBoundingClientRect();
-        if (bound.width == 0) {
-            console.log('Drawer invalid size', bound);
-            setTimeout(() => {
-                this._detectSize();
-            }, 1);
-            return;
-        }
-        if (bound.width < 400) {
-            this._currentMode = 'overlay';
-            this.collapsed = true;
-        }
-        else {
-            this._currentMode = this.mode;
-        }
-        this._updateClass();
-        this._emitChange();
-    }
-    _emitChange() {
-        this.onChanged.emit({
-            component: this,
-            htmlElement: this.elementRef.nativeElement
-        });
-    }
-    _setOverlayMode() {
-        this._currentMode = 'overlay';
-        this._getHostElement().classList.remove('ax-drawer-push');
-        this._getHostElement().classList.add('ax-drawer-overlay');
-    }
-    _setPushMode() {
-        this._currentMode = 'push';
-        this._getHostElement().classList.remove('ax-drawer-overlay');
-        this._getHostElement().classList.add('ax-drawer-push');
-        this._removeBackdrop();
+    get __hostClass() {
+        return `ax-drawer-${this.mode} ax-drawer-${this.location} ${this.collapsed ? 'ax-collapsed' : 'ax-expanded'} ${!this._loaded ? 'ax-preload' : ''}`;
     }
     _addBackdrop() {
-        if (!this._backdrop) {
-            this._backdrop = document.createElement('div');
-            this._backdrop.classList.add('ax-drawer-backdrop');
-            this._getHostElement().parentElement.prepend(this._backdrop);
-            this._backdrop.addEventListener('click', this._handleBackfropClick.bind(this));
-        }
+        this._zone.runOutsideAngular(() => {
+            this._backdropElement = document.createElement('div');
+            this._backdropElement.classList.add('ax-backdrop');
+            this._backdropElement.onclick = () => {
+                this._zone.run(() => {
+                    this.close();
+                });
+            };
+            this._getHostElement().parentElement?.appendChild(this._backdropElement);
+        });
     }
     _removeBackdrop() {
-        if (this._backdrop) {
-            this._backdrop.removeEventListener('click', this._handleBackfropClick.bind(this));
-            this._getHostElement().parentElement.removeChild(this._backdrop);
-            this._backdrop = null;
-        }
-    }
-    _handleBackfropClick(e) {
-        this._removeBackdrop();
-        this.collapsed = true;
+        this._zone.runOutsideAngular(() => {
+            if (this._backdropElement) {
+                this._getHostElement().parentElement?.removeChild(this._backdropElement);
+                this._backdropElement = null;
+            }
+        });
     }
 }
 AXDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AXDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDrawerComponent, selector: "ax-drawer", inputs: { mode: "mode", location: "location", collapsed: "collapsed" }, outputs: { onChanged: "onChanged" }, host: { listeners: { "window:resize": "_handleWindowsResize($event)" }, classAttribute: "ax-drawer ax-transition-all" }, usesInheritance: true, ngImport: i0, template: `
-        <ng-content>
+AXDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDrawerComponent, selector: "ax-drawer", inputs: { location: "location", mode: "mode", collapsed: "collapsed" }, outputs: { locationChange: "locationChange", modeChange: "modeChange", collapsedChange: "collapsedChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXDrawerComponent }], usesInheritance: true, ngImport: i0, template: `
+        <ng-content select='ax-header'>
+        </ng-content>
+        <ng-content select='ax-content'>
         </ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerComponent, decorators: [{
@@ -1806,135 +1787,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
             args: [{
                     selector: 'ax-drawer',
                     template: `
-        <ng-content>
+        <ng-content select='ax-header'>
+        </ng-content>
+        <ng-content select='ax-content'>
         </ng-content>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-drawer ax-transition-all' }
+                    providers: [{ provide: AXClosbaleComponent, useExisting: AXDrawerComponent }]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { onChanged: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { locationChange: [{
                 type: Output
-            }], mode: [{
-                type: Input
             }], location: [{
                 type: Input
+            }], modeChange: [{
+                type: Output
+            }], mode: [{
+                type: Input
+            }], collapsedChange: [{
+                type: Output
             }], collapsed: [{
                 type: Input
-            }], _handleWindowsResize: [{
-                type: HostListener,
-                args: ['window:resize', ['$event']]
+            }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 class AXDrawerContainerComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr, zone) {
+    constructor(elementRef, cdr, _zone) {
         super(elementRef, cdr);
-        this.zone = zone;
-    }
-    onViewInit() {
-        this._updateWidth();
-        // add animation
-        // setTimeout(() => {
-        //     this._getHostElement().querySelectorAll('ax-drawer').forEach(c => {
-        //         c.classList.add('ax-animated');
-        //     });
-        // }, 100);
-        this.drawers.forEach(c => {
-            c.onChanged.subscribe(c => {
-                this._updateWidth();
-            });
-        });
+        this._zone = _zone;
     }
-    _updateWidth() {
-        this.zone.runOutsideAngular(() => {
-            const container = this._getHostElement().closest('ax-drawer-container');
-            const parentWidth = this._getHostElement().getBoundingClientRect().width;
-            let w = 0;
-            this._getHostElement().querySelectorAll('ax-drawer').forEach(c => {
-                const elm = c;
-                const width = elm.getBoundingClientRect().width;
-                const height = elm.getBoundingClientRect().height;
-                const overflow = parentWidth < width;
-                const diff = width - parentWidth;
-                w += ['ax-expanded', 'ax-drawer-push'].every(c => elm.classList.contains(c)) ? width : 0;
-                elm.style.setProperty('--attr-width', `${width}px`);
-                elm.style.setProperty('--attr-height', `${height}px`);
-                //TODO check overflow
-                elm.style.setProperty('--attr-diff', `${overflow ? diff : 0}px`);
-            });
-            container.style.setProperty('--attr-content-width', `${parentWidth - w}px`);
-        });
+    ngDoCheck() {
+        const host = this._getHostElement();
+        Array.from(host.querySelectorAll('ax-drawer'))
+            .map(c => c['__axContext__'])
+            .some(c => !c?.collapsed) ? host.classList.add('ax-visible') : host.classList.remove('ax-visible');
     }
 }
 AXDrawerContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerContainerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AXDrawerContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDrawerContainerComponent, selector: "ax-drawer-container", inputs: { rtl: "rtl" }, host: { classAttribute: "ax-drawer-container" }, queries: [{ propertyName: "drawers", predicate: AXDrawerComponent }], usesInheritance: true, ngImport: i0, template: `
-        <ng-content select="ax-drawer[location='top']">
+AXDrawerContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDrawerContainerComponent, selector: "ax-drawer-container", usesInheritance: true, ngImport: i0, template: `
+        <ng-content select="ax-drawer[location='start']" >
         </ng-content>
-        <ng-content select="ax-drawer[location='start']">
-        </ng-content>
-        <ng-content select="ax-drawer-content">
+        <ng-content select="ax-content">
         </ng-content>
         <ng-content select="ax-drawer[location='end']">
         </ng-content>
-        <ng-content select="ax-drawer[location='bottom']">
-        </ng-content>
+
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-drawer-container',
                     template: `
-        <ng-content select="ax-drawer[location='top']">
+        <ng-content select="ax-drawer[location='start']" >
         </ng-content>
-        <ng-content select="ax-drawer[location='start']">
-        </ng-content>
-        <ng-content select="ax-drawer-content">
+        <ng-content select="ax-content">
         </ng-content>
         <ng-content select="ax-drawer[location='end']">
         </ng-content>
-        <ng-content select="ax-drawer[location='bottom']">
-        </ng-content>
+
     `,
-                    inputs: ['rtl'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-drawer-container' }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { drawers: [{
-                type: ContentChildren,
-                args: [AXDrawerComponent]
-            }] } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; } });
 
-class AXDrawerContentComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-}
-AXDrawerContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDrawerContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDrawerContentComponent, selector: "ax-drawer-content", host: { classAttribute: "ax-drawer-content" }, 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.3.2", ngImport: i0, type: AXDrawerContentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-drawer-content',
-                    template: `
-        <ng-content>
-        </ng-content>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-drawer-content' }
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
-
-const COMPONENT$o = [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent];
+const COMPONENT$o = [AXDrawerComponent, AXDrawerContainerComponent];
 const MODULES$o = [CommonModule];
 class AXDrawerModule {
 }
 AXDrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerModule, declarations: [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent], imports: [CommonModule], exports: [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent] });
+AXDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerModule, declarations: [AXDrawerComponent, AXDrawerContainerComponent], imports: [CommonModule], exports: [AXDrawerComponent, AXDrawerContainerComponent] });
 AXDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerModule, providers: [], imports: [[...MODULES$o]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerModule, decorators: [{
             type: NgModule,
@@ -2187,16 +2111,14 @@ class AXDecoratorHeaderComponent extends AXBaseComponentMixin {
 }
 AXDecoratorHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorHeaderComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 AXDecoratorHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDecoratorHeaderComponent, selector: "ax-header", usesInheritance: true, ngImport: i0, template: `
-        <ng-content>
-        </ng-content>
+        <ng-content select="ax-suffix,ax-prefix,ax-button,ax-icon,ax-title,ax-close-button,ng-container,ng-content"></ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-header',
                     template: `
-        <ng-content>
-        </ng-content>
+        <ng-content select="ax-suffix,ax-prefix,ax-button,ax-icon,ax-title,ax-close-button,ng-container,ng-content"></ng-content>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
@@ -2210,7 +2132,7 @@ class AXDecoratorPrefixComponent extends AXBaseComponentMixin {
 }
 AXDecoratorPrefixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorPrefixComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 AXDecoratorPrefixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDecoratorPrefixComponent, selector: "ax-prefix", usesInheritance: true, ngImport: i0, template: `
-        <ng-content select="ax-button,ax-loading,ax-icon,ax-content,ax-badge,ax-addon">
+        <ng-content select="ax-button,ax-loading,ax-icon,ax-content,ax-badge,ax-addon,ax-title,ng-container">
         </ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorPrefixComponent, decorators: [{
@@ -2218,7 +2140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
             args: [{
                     selector: 'ax-prefix',
                     template: `
-        <ng-content select="ax-button,ax-loading,ax-icon,ax-content,ax-badge,ax-addon">
+        <ng-content select="ax-button,ax-loading,ax-icon,ax-content,ax-badge,ax-addon,ax-title,ng-container">
         </ng-content>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -2233,7 +2155,7 @@ class AXDecoratorSuffixComponent extends AXBaseComponentMixin {
 }
 AXDecoratorSuffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorSuffixComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 AXDecoratorSuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDecoratorSuffixComponent, selector: "ax-suffix", usesInheritance: true, ngImport: i0, template: `
-        <ng-content select="ax-button,ax-loading,ax-icon,ax-content,ax-badge,ax-addon">
+        <ng-content select="ax-button,ax-loading,ax-icon,ax-content,ax-badge,ax-addon,ax-title,ax-alert-button,ng-container">
         </ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorSuffixComponent, decorators: [{
@@ -2241,7 +2163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
             args: [{
                     selector: 'ax-suffix',
                     template: `
-        <ng-content select="ax-button,ax-loading,ax-icon,ax-content,ax-badge,ax-addon">
+        <ng-content select="ax-button,ax-loading,ax-icon,ax-content,ax-badge,ax-addon,ax-title,ax-alert-button,ng-container">
         </ng-content>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -2249,24 +2171,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-const COMPONENT$n = [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorAddOnComponent];
-const MODULES$n = [CommonModule];
-class AXEditorDecoratorModule {
+class AXDecoratorFooterComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+    }
 }
-AXEditorDecoratorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXEditorDecoratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXEditorDecoratorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXEditorDecoratorModule, declarations: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorAddOnComponent], imports: [CommonModule], exports: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorAddOnComponent] });
-AXEditorDecoratorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXEditorDecoratorModule, providers: [], imports: [[...MODULES$n]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXEditorDecoratorModule, decorators: [{
-            type: NgModule,
+AXDecoratorFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorFooterComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDecoratorFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDecoratorFooterComponent, selector: "ax-footer", usesInheritance: true, ngImport: i0, template: `
+        <ng-content select="ax-suffix,ax-prefix,ax-button,ax-title,ax-close-button,ng-container"></ng-content>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorFooterComponent, decorators: [{
+            type: Component,
             args: [{
-                    declarations: [...COMPONENT$n],
-                    imports: [...MODULES$n],
-                    exports: [...COMPONENT$n],
-                    providers: [],
+                    selector: 'ax-footer',
+                    template: `
+        <ng-content select="ax-suffix,ax-prefix,ax-button,ax-title,ax-close-button,ng-container"></ng-content>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-class AXIconComponent extends AXSizableComponentMixin {
+class AXDecoratorIconComponent extends AXSizableComponentMixin {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
     }
@@ -2274,9 +2200,9 @@ class AXIconComponent extends AXSizableComponentMixin {
         return `ax-ic ${this.icon}`;
     }
 }
-AXIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXIconComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXIconComponent, selector: "ax-icon", inputs: { icon: "icon" }, host: { properties: { "class": "this.__iconClass" } }, usesInheritance: true, ngImport: i0, template: '<ng-content select="i,svg,img"></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXIconComponent, decorators: [{
+AXDecoratorIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorIconComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDecoratorIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: { icon: "icon" }, host: { properties: { "class": "this.__iconClass" } }, usesInheritance: true, ngImport: i0, template: '<ng-content select="i,svg,img"></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-icon',
@@ -2291,44 +2217,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 args: ['class']
             }] } });
 
-const COMPONENT$m = [AXIconComponent];
-const MODULES$m = [CommonModule];
-class AXIconModule {
+class AXDecoratorTitleComponent extends AXBaseComponentMixin {
+    constructor(_elementRef, _cdr) {
+        super(_elementRef, _cdr);
+        this.text = null;
+    }
+}
+AXDecoratorTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorTitleComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDecoratorTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDecoratorTitleComponent, selector: "ax-title", inputs: { text: "text" }, usesInheritance: true, ngImport: i0, template: ` <h4 *ngIf="text">{{text}}</h4><ng-container><ng-content *ngIf="!text"></ng-content></ng-container>`, isInline: true, directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-title',
+                    template: ` <h4 *ngIf="text">{{text}}</h4><ng-container><ng-content *ngIf="!text"></ng-content></ng-container>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
+                type: Input
+            }] } });
+
+class AXDecoratorCloseButtonComponent extends AXBaseComponentMixin {
+    constructor(_elementRef, _cdr, _parent) {
+        super(_elementRef, _cdr);
+        this._parent = _parent;
+        this._icon = 'ax-ic-close';
+    }
+    get icon() {
+        return this._icon || 'ax-ic-close';
+    }
+    set icon(v) {
+        this._icon = v;
+    }
+    _handleOnClick(e) {
+        this._parent?.close();
+    }
 }
-AXIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXIconModule, declarations: [AXIconComponent], imports: [CommonModule], exports: [AXIconComponent] });
-AXIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXIconModule, providers: [], imports: [[...MODULES$m]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXIconModule, decorators: [{
+AXDecoratorCloseButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorCloseButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXClosbaleComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AXDecoratorCloseButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: { icon: "icon" }, usesInheritance: true, ngImport: i0, template: `<ax-icon [icon]="icon" (click)="_handleOnClick($event)" tabindex="1"></ax-icon>`, isInline: true, components: [{ type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorCloseButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-close-button',
+                    template: `<ax-icon [icon]="icon" (click)="_handleOnClick($event)" tabindex="1"></ax-icon>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXClosbaleComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [AXClosbaleComponent]
+                }] }]; }, propDecorators: { icon: [{
+                type: Input
+            }] } });
+
+const COMPONENT$n = [
+    AXDecoratorPrefixComponent,
+    AXDecoratorSuffixComponent,
+    AXDecoratorContentComponent,
+    AXDecoratorHeaderComponent,
+    AXDecoratorFooterComponent,
+    AXDecoratorAddOnComponent,
+    AXDecoratorIconComponent,
+    AXDecoratorTitleComponent,
+    AXDecoratorCloseButtonComponent
+];
+const MODULES$n = [CommonModule];
+class AXDecoratorModule {
+}
+AXDecoratorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXDecoratorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorModule, declarations: [AXDecoratorPrefixComponent,
+        AXDecoratorSuffixComponent,
+        AXDecoratorContentComponent,
+        AXDecoratorHeaderComponent,
+        AXDecoratorFooterComponent,
+        AXDecoratorAddOnComponent,
+        AXDecoratorIconComponent,
+        AXDecoratorTitleComponent,
+        AXDecoratorCloseButtonComponent], imports: [CommonModule], exports: [AXDecoratorPrefixComponent,
+        AXDecoratorSuffixComponent,
+        AXDecoratorContentComponent,
+        AXDecoratorHeaderComponent,
+        AXDecoratorFooterComponent,
+        AXDecoratorAddOnComponent,
+        AXDecoratorIconComponent,
+        AXDecoratorTitleComponent,
+        AXDecoratorCloseButtonComponent] });
+AXDecoratorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorModule, providers: [], imports: [[...MODULES$n]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$m],
-                    imports: [...MODULES$m],
-                    exports: [...COMPONENT$m],
+                    declarations: [...COMPONENT$n],
+                    imports: [...MODULES$n],
+                    exports: [...COMPONENT$n],
                     providers: [],
                 }]
         }] });
 
-const COMPONENT$l = [
+const COMPONENT$m = [
     AXButtonComponent,
     AXButtonItemComponent,
     AXButtonGroupComponent,
 ];
-const MODULES$l = [CommonModule, AXIconModule, AXEditorDecoratorModule];
+const MODULES$m = [CommonModule, AXDecoratorModule];
 class AXButtonModule {
 }
 AXButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonModule, declarations: [AXButtonComponent,
         AXButtonItemComponent,
-        AXButtonGroupComponent], imports: [CommonModule, AXIconModule, AXEditorDecoratorModule], exports: [AXButtonComponent,
+        AXButtonGroupComponent], imports: [CommonModule, AXDecoratorModule], exports: [AXButtonComponent,
         AXButtonItemComponent,
         AXButtonGroupComponent] });
-AXButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonModule, providers: [], imports: [[MODULES$l]] });
+AXButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonModule, providers: [], imports: [[MODULES$m]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [MODULES$l],
-                    exports: [COMPONENT$l],
-                    declarations: [COMPONENT$l],
+                    imports: [MODULES$m],
+                    exports: [COMPONENT$m],
+                    declarations: [COMPONENT$m],
                     providers: [],
                 }]
         }] });
@@ -2361,25 +2368,32 @@ class AXAlertComponent extends AXBaseAlertMixin {
     */
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
-        this.showIcon = true;
         _AXAlertComponent_visible.set(this, void 0);
     }
     _onOptionChanged(option) {
         if (option.name == 'color') {
-            switch (this.color) {
-                case 'success':
-                    this.icon = 'ax-ic ax-ic-check-filled';
-                    break;
-                case 'warning':
-                    this.icon = 'ax-ic-warning-filled';
-                    break;
-                case 'danger':
-                    this.icon = 'ax-ic-error-filled';
-                    break;
-                default:
-                    this.icon = 'ax-ic ax-ic-info-filled';
-                    break;
-            }
+            this._setIcon();
+        }
+    }
+    ngDoCheck() {
+        this._setIcon();
+    }
+    _setIcon() {
+        if (!this._icon || this._icon.icon)
+            return;
+        switch (this.color) {
+            case 'success':
+                this._icon.icon = 'ax-ic ax-ic-check-filled';
+                break;
+            case 'warning':
+                this._icon.icon = 'ax-ic-warning-filled';
+                break;
+            case 'danger':
+                this._icon.icon = 'ax-ic-error-filled';
+                break;
+            default:
+                this._icon.icon = 'ax-ic ax-ic-info-filled';
+                break;
         }
     }
     /**
@@ -2421,6 +2435,9 @@ class AXAlertComponent extends AXBaseAlertMixin {
         if (this.visible == undefined) {
             this.visible = true;
         }
+        if (this._getHostElement().querySelector('ax-header')) {
+            this._getHostElement().querySelector('.ax-alert-body').classList.add('ax-bg-black/10');
+        }
     }
     /**
     *  Remove the alert from the container
@@ -2448,14 +2465,13 @@ class AXAlertComponent extends AXBaseAlertMixin {
 }
 _AXAlertComponent_visible = new WeakMap();
 AXAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAlertComponent, selector: "ax-alert", inputs: { color: "color", look: "look", icon: "icon", showIcon: "showIcon", timeOut: "timeOut", visible: "visible" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-alert-icon\" *ngIf=\"icon && showIcon\">\r\n    <i class=\"{{icon}} fa-lg\"></i>\r\n</div>\r\n<div class=\"ax-alert-body\">\r\n    <ng-content select=\"ax-alert-title\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-content\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-footer\">\r\n    </ng-content>\r\n</div>\r\n<ng-content select=\"ax-alert-suffix\">\r\n</ng-content>", directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAlertComponent, selector: "ax-alert", inputs: { color: "color", look: "look", timeOut: "timeOut", visible: "visible" }, host: { properties: { "class": "this.__hostClass" } }, queries: [{ propertyName: "_icon", first: true, predicate: AXDecoratorIconComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\">\r\n</ng-content>\r\n<div class=\"ax-alert-body\">\r\n    <div class=\"ax-flex ax-items-center ax-justify-between\">\r\n        <div class=\"ax-flex\">\r\n            <ng-content select=\"ax-icon\">\r\n            </ng-content>\r\n            <div class=\"ax-flex ax-flex-col ax-justify-center\">\r\n                <ng-content select=\"ax-content\">\r\n                </ng-content>\r\n                <ng-content select=\"ax-footer\">\r\n                </ng-content>\r\n            </div>\r\n        </div>\r\n        <ng-content select=\"ax-suffix\">\r\n        </ng-content>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"ax-alert-progress\" [style.animation-duration.ms]=\"timeOut\" *ngIf=\"timeOut\">\r\n</div>", directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-alert', changeDetection: ChangeDetectionStrategy.OnPush, inputs: [...COLOR_LOOK_INPUTS], encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-alert-icon\" *ngIf=\"icon && showIcon\">\r\n    <i class=\"{{icon}} fa-lg\"></i>\r\n</div>\r\n<div class=\"ax-alert-body\">\r\n    <ng-content select=\"ax-alert-title\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-content\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-footer\">\r\n    </ng-content>\r\n</div>\r\n<ng-content select=\"ax-alert-suffix\">\r\n</ng-content>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { icon: [{
-                type: Input
-            }], showIcon: [{
-                type: Input
+            args: [{ selector: 'ax-alert', changeDetection: ChangeDetectionStrategy.OnPush, inputs: [...COLOR_LOOK_INPUTS], encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"ax-header\">\r\n</ng-content>\r\n<div class=\"ax-alert-body\">\r\n    <div class=\"ax-flex ax-items-center ax-justify-between\">\r\n        <div class=\"ax-flex\">\r\n            <ng-content select=\"ax-icon\">\r\n            </ng-content>\r\n            <div class=\"ax-flex ax-flex-col ax-justify-center\">\r\n                <ng-content select=\"ax-content\">\r\n                </ng-content>\r\n                <ng-content select=\"ax-footer\">\r\n                </ng-content>\r\n            </div>\r\n        </div>\r\n        <ng-content select=\"ax-suffix\">\r\n        </ng-content>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"ax-alert-progress\" [style.animation-duration.ms]=\"timeOut\" *ngIf=\"timeOut\">\r\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _icon: [{
+                type: ContentChild,
+                args: [AXDecoratorIconComponent]
             }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -2465,27 +2481,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 type: Input
             }] } });
 
-class AXAlertTitleComponent {
-}
-AXAlertTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXAlertTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAlertTitleComponent, selector: "ax-alert-title", host: { classAttribute: "ax-alert-title" }, 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.3.2", ngImport: i0, type: AXAlertTitleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-alert-title',
-                    template: `
-        <ng-content>
-        </ng-content>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-alert-title' }
-                }]
-        }] });
-
 class AXAlertButtonComponent extends AXBaseClickableMixin {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
@@ -2501,7 +2496,7 @@ class AXAlertButtonComponent extends AXBaseClickableMixin {
     }
 }
 AXAlertButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXAlertButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAlertButtonComponent, selector: "ax-alert-button", inputs: { text: "text", icon: "icon" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange" }, host: { listeners: { "click": "_handleOnClick($event)", "focus": "_handleOnFocus($event)", "blur": "_handleOnBlur($event)" }, classAttribute: "ax-alert-button" }, usesInheritance: true, ngImport: i0, template: `
+AXAlertButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAlertButtonComponent, selector: "ax-alert-button", inputs: { text: "text", icon: "icon" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange" }, host: { listeners: { "click": "_handleOnClick($event)", "focus": "_handleOnFocus($event)", "blur": "_handleOnBlur($event)" } }, usesInheritance: true, ngImport: i0, template: `
        {{text}}
        <ng-content select="ax-icon"></ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -2516,7 +2511,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     outputs: [...BUTTON_OUTPUT],
-                    host: { class: 'ax-alert-button' }
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
                 type: Input
@@ -2533,105 +2527,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 args: ['blur', ['$event']]
             }] } });
 
-class AXAlertContentComponent {
-}
-AXAlertContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXAlertContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAlertContentComponent, selector: "ax-alert-content", host: { classAttribute: "ax-alert-content" }, 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.3.2", ngImport: i0, type: AXAlertContentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-alert-content',
-                    template: `<ng-content>
-        </ng-content>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-alert-content' }
-                }]
-        }] });
-
-class AXAlertSuffixComponent {
-}
-AXAlertSuffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXAlertSuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAlertSuffixComponent, selector: "ax-alert-suffix", host: { classAttribute: "ax-alert-suffix" }, ngImport: i0, template: `
-        <div class="ax-alert-buttons">
-            <ng-content select="ax-alert-button">
-            </ng-content>
-        </div>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertSuffixComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-alert-suffix',
-                    template: `
-        <div class="ax-alert-buttons">
-            <ng-content select="ax-alert-button">
-            </ng-content>
-        </div>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-alert-suffix' }
-                }]
-        }] });
-
-class AXAlertFooterComponent {
-}
-AXAlertFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXAlertFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAlertFooterComponent, selector: "ax-alert-footer", host: { classAttribute: "ax-alert-footer" }, ngImport: i0, template: `
-        <div class="ax-alert-buttons">
-            <ng-content select="ax-alert-button">
-            </ng-content>
-        </div>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertFooterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-alert-footer',
-                    template: `
-        <div class="ax-alert-buttons">
-            <ng-content select="ax-alert-button">
-            </ng-content>
-        </div>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-alert-footer' }
-                }]
-        }] });
-
-const COMPONENT$k = [
+const COMPONENT$l = [
     AXAlertComponent,
-    AXAlertContentComponent,
-    AXAlertTitleComponent,
-    AXAlertButtonComponent,
-    AXAlertFooterComponent,
-    AXAlertSuffixComponent
+    AXAlertButtonComponent
 ];
-const MODULES$k = [CommonModule, AXIconModule];
+const MODULES$l = [CommonModule, AXDecoratorModule];
 class AXAlertModule {
 }
 AXAlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertModule, declarations: [AXAlertComponent,
-        AXAlertContentComponent,
-        AXAlertTitleComponent,
-        AXAlertButtonComponent,
-        AXAlertFooterComponent,
-        AXAlertSuffixComponent], imports: [CommonModule, AXIconModule], exports: [AXAlertComponent,
-        AXAlertContentComponent,
-        AXAlertTitleComponent,
-        AXAlertButtonComponent,
-        AXAlertFooterComponent,
-        AXAlertSuffixComponent] });
-AXAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertModule, providers: [], imports: [[...MODULES$k]] });
+        AXAlertButtonComponent], imports: [CommonModule, AXDecoratorModule], exports: [AXAlertComponent,
+        AXAlertButtonComponent] });
+AXAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertModule, providers: [], imports: [[...MODULES$l]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$k],
-                    imports: [...MODULES$k],
-                    exports: [...COMPONENT$k],
+                    declarations: [...COMPONENT$l],
+                    imports: [...MODULES$l],
+                    exports: [...COMPONENT$l],
                     providers: [],
                 }]
         }] });
@@ -2688,19 +2601,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 args: ['class']
             }] } });
 
-const COMPONENT$j = [AXAvatarComponent, AXAvatarGroup];
-const MODULES$j = [CommonModule];
+const COMPONENT$k = [AXAvatarComponent, AXAvatarGroup];
+const MODULES$k = [CommonModule];
 class AXAvatarModule {
 }
 AXAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAvatarModule, declarations: [AXAvatarComponent, AXAvatarGroup], imports: [CommonModule], exports: [AXAvatarComponent, AXAvatarGroup] });
-AXAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAvatarModule, providers: [], imports: [[...MODULES$j]] });
+AXAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAvatarModule, providers: [], imports: [[...MODULES$k]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAvatarModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$j],
-                    imports: [...MODULES$j],
-                    exports: [...COMPONENT$j],
+                    declarations: [...COMPONENT$k],
+                    imports: [...MODULES$k],
+                    exports: [...COMPONENT$k],
                     providers: [],
                 }]
         }] });
@@ -2729,19 +2642,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 args: ['class']
             }] } });
 
-const COMPONENT$i = [AXBadgeComponent];
-const MODULES$i = [CommonModule];
+const COMPONENT$j = [AXBadgeComponent];
+const MODULES$j = [CommonModule];
 class AXBadgeModule {
 }
 AXBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBadgeModule, declarations: [AXBadgeComponent], imports: [CommonModule], exports: [AXBadgeComponent] });
-AXBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBadgeModule, providers: [], imports: [[...MODULES$i]] });
+AXBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBadgeModule, providers: [], imports: [[...MODULES$j]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBadgeModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$i],
-                    imports: [...MODULES$i],
-                    exports: [...COMPONENT$i],
+                    declarations: [...COMPONENT$j],
+                    imports: [...MODULES$j],
+                    exports: [...COMPONENT$j],
                     providers: [],
                 }]
         }] });
@@ -2916,47 +2829,281 @@ const CALENDAR_INPUTS = [
 const CALENDAR_OUTPUTS = ['depthChange', 'typeChange', 'disabledDatesChange', 'holidayDatesChange', 'onNavigate'];
 
 class AXPickerComponent extends AXBaseValueComponentMixin {
-    /**
-    *  @ignore
-    */
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
-        this.rows = 3;
+        this.cdr = cdr;
         this.items = [];
-        //   require.ensure(['path/to/your/module'], require => {
-        //     let yourModule = require('path/to/your/module');
-        //     yourModule.someFunction();
-        //  }); 
+        this.OnChange = new EventEmitter();
+        this.touchOrMouse = {
+            isTouchable: 'ontouchstart' in window,
+            isMouseDown: false
+        };
+        this.draggingInfo = {
+            isDragging: false,
+            groupIndex: null,
+            startPageY: null
+        };
+        this.itemPerDegree = 23;
+        this.safeDoTimeoutId = null;
+    }
+    ngOnInit() {
+        this.currentIndexList = this.getInitialCurrentIndexList();
+        this.lastCurrentIndexList = [].concat(this.currentIndexList);
+        this.groupsRectList = new Array(this.items.length);
+        this.eventsRegister();
+        window.addEventListener('resize', this.safeGetRectsBindEvents.bind(this));
+    }
+    ngAfterViewInit() {
+        this.getGroupsRectList();
+    }
+    ngOnDestroy() {
+        window.removeEventListener('resize', this.safeGetRectsBindEvents.bind(this));
+    }
+    setGroupData(gIndex, groupData) {
+        if (!this.currentIndexList) {
+            this.currentIndexList = this.getInitialCurrentIndexList();
+        }
+        this.items[gIndex] = groupData;
+        const iCI = groupData.currentIndex;
+        let movedIndex = 0;
+        if (typeof iCI === 'number' && iCI >= 0 && groupData.list && groupData.list.length && iCI <= groupData.list.length - 1) {
+            movedIndex = Math.round(iCI);
+        }
+        this.currentIndexList[gIndex] = movedIndex;
+        this.lastCurrentIndexList = [].concat(this.currentIndexList);
+    }
+    getInitialCurrentIndexList() {
+        return this.items.map((item, index) => {
+            const iCI = item.currentIndex;
+            if (typeof iCI === 'number' && iCI >= 0 && item.list && item.list.length && iCI <= item.list.length - 1) {
+                return Math.round(iCI);
+            }
+            return 0;
+        });
     }
-    ngAfterViewInit() {
+    safeGetRectsBindEvents() {
+        if (this.safeDoTimeoutId) {
+            clearTimeout(this.safeDoTimeoutId);
+        }
+        this.safeDoTimeoutId = setTimeout(() => {
+            this.getGroupsRectList();
+        }, 200);
     }
-    _handleMoveChange(e) {
-        this.value = this.items[e.value];
+    getGroupsRectList() {
+        if (this.pickerGroupLayer) {
+            this.pickerGroupLayer.toArray().forEach((item, index) => {
+                this.groupsRectList[index] = item.nativeElement.getBoundingClientRect();
+            });
+        }
     }
-    open() {
+    eventsRegister() {
+        const handleEventLayer = this.pickerHandleLayer.nativeElement;
+        if (handleEventLayer) {
+            this.addEventsForElement(handleEventLayer);
+        }
+    }
+    addEventsForElement(el) {
+        const _ = this.touchOrMouse.isTouchable;
+        const eventHandlerList = [
+            { name: _ ? 'touchstart' : 'mousedown', handler: this.handleStart },
+            { name: _ ? 'touchmove' : 'mousemove', handler: this.handleMove },
+            { name: _ ? 'touchend' : 'mouseup', handler: this.handleEnd },
+            { name: _ ? 'touchcancel' : 'mouseleave', handler: this.handleCancel }
+        ];
+        eventHandlerList.forEach((item, index) => {
+            el.removeEventListener(item.name, item.handler, false);
+            el.addEventListener(item.name, item.handler.bind(this), false);
+        });
+    }
+    triggerMiddleLayerGroupClick(gIndex) {
+        const data = this.items;
+        if (typeof gIndex === 'number' && typeof data[gIndex].onClick === 'function') {
+            data[gIndex].onClick(gIndex, this.currentIndexList[gIndex]);
+        }
+    }
+    triggerAboveLayerClick(ev, gIndex) {
+        const movedIndex = this.currentIndexList[gIndex] + 1;
+        this.currentIndexList[gIndex] = movedIndex;
+        this.correctionCurrentIndex(ev, gIndex);
+    }
+    triggerMiddleLayerClick(ev, gIndex) {
+        this.triggerMiddleLayerGroupClick(gIndex);
+    }
+    triggerBelowLayerClick(ev, gIndex) {
+        const movedIndex = this.currentIndexList[gIndex] - 1;
+        this.currentIndexList[gIndex] = movedIndex;
+        this.correctionCurrentIndex(ev, gIndex);
+    }
+    getTouchInfo(ev) {
+        return this.touchOrMouse.isTouchable ? ev.changedTouches[0] || ev.touches[0] : ev;
+    }
+    getGroupIndexBelongsEvent(ev) {
+        const touchInfo = this.getTouchInfo(ev);
+        for (let i = 0; i < this.groupsRectList.length; i++) {
+            const item = this.groupsRectList[i];
+            if (item.left < touchInfo.pageX && touchInfo.pageX < item.right) {
+                return i;
+            }
+        }
+        return null;
+    }
+    handleEventClick(ev) {
+        const gIndex = this.getGroupIndexBelongsEvent(ev);
+        switch (ev.target.dataset.type) {
+            case 'top':
+                this.triggerAboveLayerClick(ev, gIndex);
+                break;
+            case 'middle':
+                this.triggerMiddleLayerClick(ev, gIndex);
+                break;
+            case 'bottom':
+                this.triggerBelowLayerClick(ev, gIndex);
+                break;
+            default:
+        }
+    }
+    handleStart(ev) {
+        if (ev.cancelable) {
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
+        const touchInfo = this.getTouchInfo(ev);
+        this.draggingInfo.startPageY = touchInfo.pageY;
+        if (!this.touchOrMouse.isTouchable) {
+            this.touchOrMouse.isMouseDown = true;
+        }
+    }
+    handleMove(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        if (this.touchOrMouse.isTouchable || this.touchOrMouse.isMouseDown) {
+            this.draggingInfo.isDragging = true;
+            this.setCurrentIndexOnMove(ev);
+        }
+    }
+    handleEnd(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        if (!this.draggingInfo.isDragging) {
+            this.handleEventClick(ev);
+        }
+        this.draggingInfo.isDragging = false;
+        this.touchOrMouse.isMouseDown = false;
+        this.correctionAfterDragging(ev);
+    }
+    handleCancel(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        if (this.touchOrMouse.isTouchable || this.touchOrMouse.isMouseDown) {
+            this.correctionAfterDragging(ev);
+            this.touchOrMouse.isMouseDown = false;
+            this.draggingInfo.isDragging = false;
+        }
+    }
+    setCurrentIndexOnMove(ev) {
+        const touchInfo = this.getTouchInfo(ev);
+        if (this.draggingInfo.groupIndex === null) {
+            this.draggingInfo.groupIndex = this.getGroupIndexBelongsEvent(ev);
+        }
+        const gIndex = this.draggingInfo.groupIndex;
+        if (typeof gIndex === 'number' && (this.items[gIndex].divider || !this.items[gIndex].list)) {
+            return;
+        }
+        const moveCount = (this.draggingInfo.startPageY - touchInfo.pageY) / 32;
+        const movedIndex = this.currentIndexList[gIndex] + moveCount;
+        this.currentIndexList[gIndex] = movedIndex;
+        this.draggingInfo.startPageY = touchInfo.pageY;
+    }
+    correctionAfterDragging(ev) {
+        const gIndex = this.draggingInfo.groupIndex;
+        this.correctionCurrentIndex(ev, gIndex);
+        this.draggingInfo.groupIndex = null;
+        this.draggingInfo.startPageY = null;
+    }
+    correctionCurrentIndex(ev, gIndex) {
+        setTimeout(() => {
+            if (typeof gIndex === 'number' && this.items[gIndex].divider !== true && this.items[gIndex].list.length > 0) {
+                const unsafeGroupIndex = this.currentIndexList[gIndex];
+                let movedIndex = unsafeGroupIndex;
+                if (unsafeGroupIndex > this.items[gIndex].list.length - 1) {
+                    movedIndex = this.items[gIndex].list.length - 1;
+                }
+                else if (unsafeGroupIndex < 0) {
+                    movedIndex = 0;
+                }
+                movedIndex = Math.round(movedIndex);
+                this.currentIndexList[gIndex] = movedIndex;
+                if (movedIndex !== this.lastCurrentIndexList[gIndex]) {
+                    this.OnChange.emit({ gIndex, iIndex: movedIndex });
+                }
+                this.lastCurrentIndexList = [].concat(this.currentIndexList);
+            }
+        }, 100);
+    }
+    isCurrentItem(gIndex, iIndex) {
+        return this.currentIndexList[gIndex] === iIndex;
+    }
+    getCurrentIndexList() {
+        return this.currentIndexList;
+    }
+    getGroupClass(gIndex) {
+        const group = this.items[gIndex];
+        const defaultWeightClass = 'weight-' + (group.weight || 1);
+        const groupClass = [defaultWeightClass];
+        if (group.className) {
+            groupClass.push(group.className);
+        }
+        return groupClass;
+    }
+    getItemClass(gIndex, iIndex, isDivider = false) {
+        const group = this.items[gIndex];
+        const itemClass = [];
+        if (!isDivider && this.isCurrentItem(gIndex, iIndex)) {
+            itemClass.push('smooth-item-selected');
+        }
+        if (group.textAlign) {
+            itemClass.push('text-' + group.textAlign);
+        }
+        return itemClass;
+    }
+    getItemStyle(gIndex, iIndex) {
+        const gapCount = this.currentIndexList[gIndex] - iIndex;
+        if (Math.abs(gapCount) < (90 / this.itemPerDegree)) {
+            const rotateStyle = {
+                transform: 'rotateX(' + gapCount * this.itemPerDegree + 'deg) translate3d(0, 0, 5.625em)',
+                opacity: (1 - Math.abs(gapCount) / (90 / this.itemPerDegree)).toString()
+            };
+            if (!this.draggingInfo.isDragging) {
+                rotateStyle['transition'] = 'transform 150ms ease-out';
+            }
+            return rotateStyle;
+        }
+        if (gapCount > 0) {
+            return { transform: 'rotateX(90deg) translate3d(0, 0, 5.625em)' };
+        }
+        else {
+            return { transform: 'rotateX(-90deg) translate3d(0, 0, 5.625em)' };
+        }
     }
 }
 AXPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXPickerComponent, selector: "ax-picker", inputs: { readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", rows: "rows", width: "width", height: "height", itemHeight: "itemHeight", items: "items" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "ax-picker" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- <ax-carousel [width]=\"width\" [height]=\"height\" [fixedWidth]=\"width\" [fixedHeight]=\"itemHeight\"  [centered]=\"true\" [vertical]=\"true\" [loop]=\"false\" [wheel]=\"true\" (onSlideChanged)=\"_handleMoveChange($event)\">\r\n    <ax-carousel-item class=\"ax-picker-item\" *ngFor=\"let item of items\">\r\n        <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </ax-carousel-item>\r\n</ax-carousel> -->\r\n<!-- <ul class=\"scroller\">\r\n    <li *ngFor=\"let item of items\">\r\n        <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </li>\r\n\r\n</ul> -->\r\n\r\n<button id=\"picker\" #picker>open picker</button>" });
+AXPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXPickerComponent, selector: "ax-picker", inputs: { readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", items: "items" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", OnChange: "OnChange" }, host: { classAttribute: "ax-picker" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "pickerHandleLayer", first: true, predicate: ["pickerHandleLayer"], descendants: true, static: true }, { propertyName: "pickerGroupLayer", predicate: ["pickerGroupLayer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- <ax-carousel [width]=\"width\" [height]=\"height\" [fixedWidth]=\"width\" [fixedHeight]=\"itemHeight\"  [centered]=\"true\" [vertical]=\"true\" [loop]=\"false\" [wheel]=\"true\" (onSlideChanged)=\"_handleMoveChange($event)\">\r\n    <ax-carousel-item class=\"ax-picker-item\" *ngFor=\"let item of items\">\r\n        <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </ax-carousel-item>\r\n</ax-carousel> -->\r\n<div class=\"ng-data-picker flex-box\">\r\n\r\n  <!-- picker-group-layer -->\r\n  <div #pickerGroupLayer *ngFor=\"let group of items; let gI = index\" class=\"picker-group\" [ngClass]=\"getGroupClass(gI)\">\r\n\r\n    <div class=\"picker-list\">\r\n      <div *ngIf=\"group.divider else ngIfElse\" class=\"picker-item divider\" [ngClass]=\"getItemClass(gI, i, true)\">\r\n        {{ group.text }}\r\n      </div>\r\n\r\n      <div #ngIfElse *ngFor=\"let item of group.list; let i = index\" class=\"picker-item\" [ngClass]=\"getItemClass(gI, i)\"\r\n        [ngStyle]=\"getItemStyle(gI, i)\">\r\n        {{ item.value || item }}\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div #pickerHandleLayer class=\"picker-handle-layer flex-box dir-column\">\r\n    <div data-type=\"top\" class=\"picker-top weight-1\"></div>\r\n    <div data-type=\"middle\" class=\"picker-middle\"></div>\r\n    <div data-type=\"bottom\" class=\"picker-bottom weight-1\"></div>\r\n  </div>\r\n\r\n</div>", directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-picker', host: { class: 'ax-picker' }, inputs: [...VALUE_INPUTS], outputs: [...VALUE_OUTPUT], template: "<!-- <ax-carousel [width]=\"width\" [height]=\"height\" [fixedWidth]=\"width\" [fixedHeight]=\"itemHeight\"  [centered]=\"true\" [vertical]=\"true\" [loop]=\"false\" [wheel]=\"true\" (onSlideChanged)=\"_handleMoveChange($event)\">\r\n    <ax-carousel-item class=\"ax-picker-item\" *ngFor=\"let item of items\">\r\n        <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </ax-carousel-item>\r\n</ax-carousel> -->\r\n<!-- <ul class=\"scroller\">\r\n    <li *ngFor=\"let item of items\">\r\n        <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </li>\r\n\r\n</ul> -->\r\n\r\n<button id=\"picker\" #picker>open picker</button>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { picker: [{
+            args: [{ selector: 'ax-picker', host: { class: 'ax-picker' }, inputs: [...VALUE_INPUTS], outputs: [...VALUE_OUTPUT], template: "<!-- <ax-carousel [width]=\"width\" [height]=\"height\" [fixedWidth]=\"width\" [fixedHeight]=\"itemHeight\"  [centered]=\"true\" [vertical]=\"true\" [loop]=\"false\" [wheel]=\"true\" (onSlideChanged)=\"_handleMoveChange($event)\">\r\n    <ax-carousel-item class=\"ax-picker-item\" *ngFor=\"let item of items\">\r\n        <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </ax-carousel-item>\r\n</ax-carousel> -->\r\n<div class=\"ng-data-picker flex-box\">\r\n\r\n  <!-- picker-group-layer -->\r\n  <div #pickerGroupLayer *ngFor=\"let group of items; let gI = index\" class=\"picker-group\" [ngClass]=\"getGroupClass(gI)\">\r\n\r\n    <div class=\"picker-list\">\r\n      <div *ngIf=\"group.divider else ngIfElse\" class=\"picker-item divider\" [ngClass]=\"getItemClass(gI, i, true)\">\r\n        {{ group.text }}\r\n      </div>\r\n\r\n      <div #ngIfElse *ngFor=\"let item of group.list; let i = index\" class=\"picker-item\" [ngClass]=\"getItemClass(gI, i)\"\r\n        [ngStyle]=\"getItemStyle(gI, i)\">\r\n        {{ item.value || item }}\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div #pickerHandleLayer class=\"picker-handle-layer flex-box dir-column\">\r\n    <div data-type=\"top\" class=\"picker-top weight-1\"></div>\r\n    <div data-type=\"middle\" class=\"picker-middle\"></div>\r\n    <div data-type=\"bottom\" class=\"picker-bottom weight-1\"></div>\r\n  </div>\r\n\r\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { pickerGroupLayer: [{
+                type: ViewChildren,
+                args: ['pickerGroupLayer']
+            }], pickerHandleLayer: [{
                 type: ViewChild,
-                args: ['picker']
+                args: ['pickerHandleLayer', { static: true }]
             }], itemTemplate: [{
                 type: ContentChild,
                 args: [TemplateRef]
-            }], rows: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], itemHeight: [{
-                type: Input
             }], items: [{
                 type: Input
+            }], OnChange: [{
+                type: Output
             }] } });
 
 const AXCalendarComponentMixin = _ClickableComponenetMixin(_InteractiveComponenetMixin(_ValueComponenetMixin(AXCalendarBaseComponent)));
@@ -3267,10 +3414,10 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
     }
 }
 AXCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXCalendarComponent, selector: "ax-calendar", inputs: { readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", disabled: "disabled", tabIndex: "tabIndex", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", type: "type", holidayDates: "holidayDates", interface: "interface" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\r\n    <div class=\"ax-calendar-header\">\r\n        <div>\r\n            <ng-container *ngIf=\"activeView=='days'; else elseTemplate\">\r\n                <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[1]\" color=\"light\" look=\"blank\"\r\n                    (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n                </ax-button>\r\n                <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[0]\" color=\"light\" look=\"blank\"\r\n                    (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n                </ax-button>\r\n            </ng-container>\r\n            <ng-template #elseTemplate>\r\n                <ax-button class=\"ax-nav-button\" [text]=\"_navText\" color=\"light\" look=\"blank\"\r\n                    (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n                </ax-button>\r\n            </ng-template>\r\n        </div>\r\n        <div class=\"ax-flex\">\r\n            <ax-button class=\"ax-prev-button\" color=\"light\" look=\"blank\" (onClick)=\"_handlePrevClick($event)\"\r\n                [disabled]=\"disabled\">\r\n                <ax-prefix>\r\n                    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n                </ax-prefix>\r\n            </ax-button>\r\n            <ax-button class=\"ax-next-button\" color=\"light\" look=\"blank\" (onClick)=\"_handleNextClick($event)\"\r\n                [disabled]=\"disabled\">\r\n                <ax-prefix>\r\n                    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax-rotate-90\"></ax-icon>\r\n\r\n                </ax-prefix>\r\n            </ax-button>\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-body\">\r\n        <div [ngSwitch]=\"activeView\">\r\n            <ng-container *ngSwitchCase=\"'years'\">\r\n                <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n                    <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [ngClass]=\"slot.cssClass\"\r\n                        (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'months'\">\r\n                <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n                    <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                        (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <div class=\"ax-calendar-week\">\r\n                    <div *ngFor=\"let d of _dayNames\">{{d}}</div>\r\n                </div>\r\n                <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n                    <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                        (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-footer\">\r\n        <ax-button class=\"dark:ax-text-danger\" [text]=\"_todayText\" color=\"dark\" look=\"blank\" size=\"sm\"\r\n            (onClick)=\"_handleGoToday()\" [disabled]=\"disabled\"></ax-button>\r\n    </div>\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n    <div class=\"ax-calendar-picker\">\r\n        <ax-picker width=\"100%%\" height=\"300px\" itemHeight=\"48px\" [items]=\"_pickerYears\"\r\n            (onValueChanged)=\"_handlePickerChange($event,'year')\">\r\n            <ng-template let-item>\r\n                {{item}}\r\n            </ng-template>\r\n        </ax-picker>\r\n        <ax-picker width=\"100%\" height=\"300px\" itemHeight=\"48px\" [items]=\"_pickerMonths\"\r\n            (onValueChanged)=\"_handlePickerChange($event,'month')\">\r\n            <ng-template let-item>\r\n                {{item.text}}\r\n            </ng-template>\r\n        </ax-picker>\r\n        <ax-picker width=\"100%\" height=\"300px\" itemHeight=\"48px\" [items]=\"_pickerDays\"\r\n            (onValueChanged)=\"_handlePickerChange($event,'day')\">\r\n            <ng-template let-item>\r\n                {{item}}\r\n            </ng-template>\r\n        </ax-picker>\r\n    </div>\r\n</ng-template>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPickerComponent, selector: "ax-picker", inputs: ["readonly", "allowNull", "value", "debounceTime", "name", "checked", "rows", "width", "height", "itemHeight", "items"], outputs: ["valueChange", "onValueChanged"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXCalendarComponent, selector: "ax-calendar", inputs: { readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", disabled: "disabled", tabIndex: "tabIndex", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", type: "type", holidayDates: "holidayDates", interface: "interface" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\r\n    <div class=\"ax-calendar-header\">\r\n        <div>\r\n            <ng-container *ngIf=\"activeView=='days'; else elseTemplate\">\r\n                <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[1]\" color=\"light\" look=\"blank\"\r\n                    (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n                </ax-button>\r\n                <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[0]\" color=\"light\" look=\"blank\"\r\n                    (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n                </ax-button>\r\n            </ng-container>\r\n            <ng-template #elseTemplate>\r\n                <ax-button class=\"ax-nav-button\" [text]=\"_navText\" color=\"light\" look=\"blank\"\r\n                    (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n                </ax-button>\r\n            </ng-template>\r\n        </div>\r\n        <div class=\"ax-flex\">\r\n            <ax-button class=\"ax-prev-button\" color=\"light\" look=\"blank\" (onClick)=\"_handlePrevClick($event)\"\r\n                [disabled]=\"disabled\">\r\n                <ax-prefix>\r\n                    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n                </ax-prefix>\r\n            </ax-button>\r\n            <ax-button class=\"ax-next-button\" color=\"light\" look=\"blank\" (onClick)=\"_handleNextClick($event)\"\r\n                [disabled]=\"disabled\">\r\n                <ax-prefix>\r\n                    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax-rotate-90\"></ax-icon>\r\n\r\n                </ax-prefix>\r\n            </ax-button>\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-body\">\r\n        <div [ngSwitch]=\"activeView\">\r\n            <ng-container *ngSwitchCase=\"'years'\">\r\n                <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n                    <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [ngClass]=\"slot.cssClass\"\r\n                        (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'months'\">\r\n                <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n                    <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                        (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <div class=\"ax-calendar-week\">\r\n                    <div *ngFor=\"let d of _dayNames\">{{d}}</div>\r\n                </div>\r\n                <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n                    <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                        (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-footer\">\r\n        <ax-button class=\"dark:ax-text-danger\" [text]=\"_todayText\" color=\"dark\" look=\"blank\" size=\"sm\"\r\n            (onClick)=\"_handleGoToday()\" [disabled]=\"disabled\"></ax-button>\r\n    </div>\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n    <div class=\"ax-calendar-picker\">\r\n        <ax-picker></ax-picker>\r\n        <!-- <ax-picker width=\"100%%\" height=\"300px\" itemHeight=\"48px\" [items]=\"_pickerYears\"\r\n            (onValueChanged)=\"_handlePickerChange($event,'year')\">\r\n            <ng-template let-item>\r\n                {{item}}\r\n            </ng-template>\r\n        </ax-picker>\r\n        <ax-picker width=\"100%\" height=\"300px\" itemHeight=\"48px\" [items]=\"_pickerMonths\"\r\n            (onValueChanged)=\"_handlePickerChange($event,'month')\">\r\n            <ng-template let-item>\r\n                {{item.text}}\r\n            </ng-template>\r\n        </ax-picker>\r\n        <ax-picker width=\"100%\" height=\"300px\" itemHeight=\"48px\" [items]=\"_pickerDays\"\r\n            (onValueChanged)=\"_handlePickerChange($event,'day')\">\r\n            <ng-template let-item>\r\n                {{item}}\r\n            </ng-template> \r\n        </ax-picker>-->\r\n    </div>\r\n</ng-template>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPickerComponent, selector: "ax-picker", inputs: ["readonly", "allowNull", "value", "debounceTime", "name", "checked", "items"], outputs: ["valueChange", "onValueChanged", "OnChange"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-calendar', changeDetection: ChangeDetectionStrategy.OnPush, inputs: [...VALUE_INPUTS, ...INTERACTIVE_INPUTS, ...CALENDAR_INPUTS], outputs: [...VALUE_OUTPUT, ...INTERACTIVE_OUTPUT, ...CALENDAR_OUTPUTS], encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\r\n    <div class=\"ax-calendar-header\">\r\n        <div>\r\n            <ng-container *ngIf=\"activeView=='days'; else elseTemplate\">\r\n                <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[1]\" color=\"light\" look=\"blank\"\r\n                    (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n                </ax-button>\r\n                <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[0]\" color=\"light\" look=\"blank\"\r\n                    (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n                </ax-button>\r\n            </ng-container>\r\n            <ng-template #elseTemplate>\r\n                <ax-button class=\"ax-nav-button\" [text]=\"_navText\" color=\"light\" look=\"blank\"\r\n                    (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n                </ax-button>\r\n            </ng-template>\r\n        </div>\r\n        <div class=\"ax-flex\">\r\n            <ax-button class=\"ax-prev-button\" color=\"light\" look=\"blank\" (onClick)=\"_handlePrevClick($event)\"\r\n                [disabled]=\"disabled\">\r\n                <ax-prefix>\r\n                    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n                </ax-prefix>\r\n            </ax-button>\r\n            <ax-button class=\"ax-next-button\" color=\"light\" look=\"blank\" (onClick)=\"_handleNextClick($event)\"\r\n                [disabled]=\"disabled\">\r\n                <ax-prefix>\r\n                    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax-rotate-90\"></ax-icon>\r\n\r\n                </ax-prefix>\r\n            </ax-button>\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-body\">\r\n        <div [ngSwitch]=\"activeView\">\r\n            <ng-container *ngSwitchCase=\"'years'\">\r\n                <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n                    <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [ngClass]=\"slot.cssClass\"\r\n                        (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'months'\">\r\n                <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n                    <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                        (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <div class=\"ax-calendar-week\">\r\n                    <div *ngFor=\"let d of _dayNames\">{{d}}</div>\r\n                </div>\r\n                <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n                    <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                        (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-footer\">\r\n        <ax-button class=\"dark:ax-text-danger\" [text]=\"_todayText\" color=\"dark\" look=\"blank\" size=\"sm\"\r\n            (onClick)=\"_handleGoToday()\" [disabled]=\"disabled\"></ax-button>\r\n    </div>\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n    <div class=\"ax-calendar-picker\">\r\n        <ax-picker width=\"100%%\" height=\"300px\" itemHeight=\"48px\" [items]=\"_pickerYears\"\r\n            (onValueChanged)=\"_handlePickerChange($event,'year')\">\r\n            <ng-template let-item>\r\n                {{item}}\r\n            </ng-template>\r\n        </ax-picker>\r\n        <ax-picker width=\"100%\" height=\"300px\" itemHeight=\"48px\" [items]=\"_pickerMonths\"\r\n            (onValueChanged)=\"_handlePickerChange($event,'month')\">\r\n            <ng-template let-item>\r\n                {{item.text}}\r\n            </ng-template>\r\n        </ax-picker>\r\n        <ax-picker width=\"100%\" height=\"300px\" itemHeight=\"48px\" [items]=\"_pickerDays\"\r\n            (onValueChanged)=\"_handlePickerChange($event,'day')\">\r\n            <ng-template let-item>\r\n                {{item}}\r\n            </ng-template>\r\n        </ax-picker>\r\n    </div>\r\n</ng-template>" }]
+            args: [{ selector: 'ax-calendar', changeDetection: ChangeDetectionStrategy.OnPush, inputs: [...VALUE_INPUTS, ...INTERACTIVE_INPUTS, ...CALENDAR_INPUTS], outputs: [...VALUE_OUTPUT, ...INTERACTIVE_OUTPUT, ...CALENDAR_OUTPUTS], encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\r\n    <div class=\"ax-calendar-header\">\r\n        <div>\r\n            <ng-container *ngIf=\"activeView=='days'; else elseTemplate\">\r\n                <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[1]\" color=\"light\" look=\"blank\"\r\n                    (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n                </ax-button>\r\n                <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[0]\" color=\"light\" look=\"blank\"\r\n                    (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n                </ax-button>\r\n            </ng-container>\r\n            <ng-template #elseTemplate>\r\n                <ax-button class=\"ax-nav-button\" [text]=\"_navText\" color=\"light\" look=\"blank\"\r\n                    (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n                </ax-button>\r\n            </ng-template>\r\n        </div>\r\n        <div class=\"ax-flex\">\r\n            <ax-button class=\"ax-prev-button\" color=\"light\" look=\"blank\" (onClick)=\"_handlePrevClick($event)\"\r\n                [disabled]=\"disabled\">\r\n                <ax-prefix>\r\n                    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n                </ax-prefix>\r\n            </ax-button>\r\n            <ax-button class=\"ax-next-button\" color=\"light\" look=\"blank\" (onClick)=\"_handleNextClick($event)\"\r\n                [disabled]=\"disabled\">\r\n                <ax-prefix>\r\n                    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax-rotate-90\"></ax-icon>\r\n\r\n                </ax-prefix>\r\n            </ax-button>\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-body\">\r\n        <div [ngSwitch]=\"activeView\">\r\n            <ng-container *ngSwitchCase=\"'years'\">\r\n                <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n                    <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [ngClass]=\"slot.cssClass\"\r\n                        (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'months'\">\r\n                <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n                    <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                        (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <div class=\"ax-calendar-week\">\r\n                    <div *ngFor=\"let d of _dayNames\">{{d}}</div>\r\n                </div>\r\n                <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n                    <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                        (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-footer\">\r\n        <ax-button class=\"dark:ax-text-danger\" [text]=\"_todayText\" color=\"dark\" look=\"blank\" size=\"sm\"\r\n            (onClick)=\"_handleGoToday()\" [disabled]=\"disabled\"></ax-button>\r\n    </div>\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n    <div class=\"ax-calendar-picker\">\r\n        <ax-picker></ax-picker>\r\n        <!-- <ax-picker width=\"100%%\" height=\"300px\" itemHeight=\"48px\" [items]=\"_pickerYears\"\r\n            (onValueChanged)=\"_handlePickerChange($event,'year')\">\r\n            <ng-template let-item>\r\n                {{item}}\r\n            </ng-template>\r\n        </ax-picker>\r\n        <ax-picker width=\"100%\" height=\"300px\" itemHeight=\"48px\" [items]=\"_pickerMonths\"\r\n            (onValueChanged)=\"_handlePickerChange($event,'month')\">\r\n            <ng-template let-item>\r\n                {{item.text}}\r\n            </ng-template>\r\n        </ax-picker>\r\n        <ax-picker width=\"100%\" height=\"300px\" itemHeight=\"48px\" [items]=\"_pickerDays\"\r\n            (onValueChanged)=\"_handlePickerChange($event,'day')\">\r\n            <ng-template let-item>\r\n                {{item}}\r\n            </ng-template> \r\n        </ax-picker>-->\r\n    </div>\r\n</ng-template>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { interface: [{
                 type: Input
             }], __hostClass: [{
@@ -3946,19 +4093,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXCarouselComponent }]; } });
 
-const COMPONENT$h = [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent];
-const MODULES$h = [CommonModule];
+const COMPONENT$i = [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent];
+const MODULES$i = [CommonModule];
 class AXCarouselModule {
 }
 AXCarouselModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXCarouselModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCarouselModule, declarations: [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent], imports: [CommonModule], exports: [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent] });
-AXCarouselModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCarouselModule, providers: [], imports: [[...MODULES$h]] });
+AXCarouselModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCarouselModule, providers: [], imports: [[...MODULES$i]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCarouselModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$h],
-                    imports: [...MODULES$h],
-                    exports: [...COMPONENT$h],
+                    declarations: [...COMPONENT$i],
+                    imports: [...MODULES$i],
+                    exports: [...COMPONENT$i],
                     providers: [],
                 }]
         }] });
@@ -3978,19 +4125,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }] });
 
-const COMPONENT$g = [AXCalendarComponent];
-const MODULES$g = [CommonModule, AXButtonModule, AXIconModule, AXEditorDecoratorModule, AXDateTimeModule, AXPickerModule];
+const COMPONENT$h = [AXCalendarComponent];
+const MODULES$h = [CommonModule, AXButtonModule, AXDecoratorModule, AXDateTimeModule, AXPickerModule];
 class AXCalendarModule {
 }
 AXCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent], imports: [CommonModule, AXButtonModule, AXIconModule, AXEditorDecoratorModule, AXDateTimeModule, AXPickerModule], exports: [AXCalendarComponent] });
-AXCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarModule, providers: [], imports: [[...MODULES$g]] });
+AXCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent], imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXDateTimeModule, AXPickerModule], exports: [AXCalendarComponent] });
+AXCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarModule, providers: [], imports: [[...MODULES$h]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$g],
-                    imports: [...MODULES$g],
-                    exports: [...COMPONENT$g],
+                    declarations: [...COMPONENT$h],
+                    imports: [...MODULES$h],
+                    exports: [...COMPONENT$h],
                     providers: [],
                 }]
         }] });
@@ -4033,13 +4180,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 class AXCheckBoxModule {
 }
 AXCheckBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXCheckBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCheckBoxModule, declarations: [AXCheckBoxComponent], imports: [CommonModule, FormsModule, AXEditorDecoratorModule], exports: [AXCheckBoxComponent] });
-AXCheckBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCheckBoxModule, providers: [], imports: [[CommonModule, FormsModule, AXEditorDecoratorModule]] });
+AXCheckBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCheckBoxModule, declarations: [AXCheckBoxComponent], imports: [CommonModule, FormsModule, AXDecoratorModule], exports: [AXCheckBoxComponent] });
+AXCheckBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCheckBoxModule, providers: [], imports: [[CommonModule, FormsModule, AXDecoratorModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCheckBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXCheckBoxComponent],
-                    imports: [CommonModule, FormsModule, AXEditorDecoratorModule],
+                    imports: [CommonModule, FormsModule, AXDecoratorModule],
                     exports: [AXCheckBoxComponent],
                     providers: [],
                 }]
@@ -4365,8 +4512,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 args: ['axIsLoading']
             }] } });
 
-const COMPONENT$f = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
-const MODULES$f = [CommonModule, OverlayModule, PortalModule];
+const COMPONENT$g = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
+const MODULES$g = [CommonModule, OverlayModule, PortalModule];
 class AXLoadingModule {
     constructor() {
         AXConfig.set({
@@ -4380,13 +4527,13 @@ class AXLoadingModule {
 }
 AXLoadingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXLoadingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", 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.3.2", ngImport: i0, type: AXLoadingModule, providers: [], imports: [[...MODULES$f]] });
+AXLoadingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXLoadingModule, providers: [], imports: [[...MODULES$g]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXLoadingModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$f],
-                    imports: [...MODULES$f],
-                    exports: [...COMPONENT$f],
+                    declarations: [...COMPONENT$g],
+                    imports: [...MODULES$g],
+                    exports: [...COMPONENT$g],
                     providers: [],
                 }]
         }], ctorParameters: function () { return []; } });
@@ -4539,19 +4686,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: AXOverlayService }]; } });
 
-const COMPONENT$e = [AXDataListComponent];
-const MODULES$e = [CommonModule, AXButtonModule, AXLoadingModule, AXTranslationModule];
+const COMPONENT$f = [AXDataListComponent];
+const MODULES$f = [CommonModule, AXButtonModule, AXLoadingModule, AXTranslationModule];
 class AXDataListModule {
 }
 AXDataListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDataListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXDataListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDataListModule, declarations: [AXDataListComponent], imports: [CommonModule, AXButtonModule, AXLoadingModule, AXTranslationModule], exports: [AXDataListComponent] });
-AXDataListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDataListModule, providers: [], imports: [[...MODULES$e]] });
+AXDataListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDataListModule, providers: [], imports: [[...MODULES$f]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDataListModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$e],
-                    imports: [...MODULES$e],
-                    exports: [...COMPONENT$e],
+                    declarations: [...COMPONENT$f],
+                    imports: [...MODULES$f],
+                    exports: [...COMPONENT$f],
                     providers: [],
                 }]
         }] });
@@ -4586,6 +4733,7 @@ class AXPopoverComponent extends AXInteractiveComponenetMixin {
         this.closeTrigger = 'clickout';
         //
         this.hasBackdrop = false;
+        this.adaptivityEnabled = false;
         //
         this._mousePos = { x: 0, y: 0 };
         this._isScrollAttached = false;
@@ -4698,7 +4846,7 @@ class AXPopoverComponent extends AXInteractiveComponenetMixin {
         if (!targetRef)
             return;
         if (!this._overlayRef) {
-            if (this._platform.is('Mobile')) {
+            if (this._platform.is('Mobile') && this.adaptivityEnabled) {
                 this._openAsActionsheet();
             }
             else {
@@ -4768,7 +4916,7 @@ class AXPopoverComponent extends AXInteractiveComponenetMixin {
     }
 }
 AXPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPopoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.Overlay }, { token: i1$4.AXPlatform }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-AXPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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: { "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 });
+AXPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXPopoverComponent, selector: "ax-popover", inputs: { target: "target", position: "position", openTrigger: "openTrigger", closeTrigger: "closeTrigger", hasBackdrop: "hasBackdrop", backdropClass: "backdropClass", adaptivityEnabled: "adaptivityEnabled" }, outputs: { onOpened: "onOpened", onClosed: "onClosed" }, host: { listeners: { "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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #baseTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>" }]
@@ -4787,6 +4935,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 type: Input
             }], backdropClass: [{
                 type: Input
+            }], adaptivityEnabled: [{
+                type: Input
             }], onOpened: [{
                 type: Output
             }], onClosed: [{
@@ -4944,10 +5094,10 @@ class AXDatePickerComponent extends AXBaseDatePickerMixin {
     }
 }
 AXDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$4.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", format: "format", interface: "interface" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange", typeChange: "typeChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", formatChange: "formatChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "_calendar", first: true, predicate: AXCalendarComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\" [class.ax-state-disabled]=\"disabled\"\r\n        [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [attr.tabindex]=\"_isMobile ? -1 : tabIndex\"\r\n        [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\" (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-calendar-options\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" (onOpened)=\"_handlePopoverOpened($event)\">\r\n    <div class=\"ax-overlay-pane\" [class.ax-w-full]=\"_isMobile\">\r\n        <div *ngIf=\"_isMobile\" class=\"ax-header\">\r\n            <span >{{placeholder || 'Choose a date'}}</span>\r\n            <i class=\"ax-ic ax-ic-close \"\r\n                (click)=\"close()\" tabindex=\"1\"></i>\r\n        </div>\r\n        <ng-container *ngIf=\"interface === 'calendar'; then calendarTemplate; else pickerTemplate\"></ng-container>\r\n        <ng-template #calendarTemplate>\r\n            <ax-calendar #calendar [disabled]=\"disabled\" [readonly]=\"readonly\" \r\n            [(value)]=\"value\" \r\n            [min]=\"min\" \r\n            [max]=\"max\"\r\n            [disabledDates]=\"disabledDates\" \r\n            [holidayDates]=\"holidayDates\" \r\n            [depth]=\"depth\" \r\n            (onNavigate)=\"_handleOnNavigate($event)\"\r\n            [type]=\"type\">\r\n        </ax-calendar>\r\n        </ng-template>\r\n        <ng-template #pickerTemplate>\r\n        </ng-template>\r\n        \r\n    </div>\r\n</ax-popover>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"], outputs: ["onOpened", "onClosed"] }, { type: AXCalendarComponent, selector: "ax-calendar", inputs: ["readonly", "allowNull", "value", "debounceTime", "name", "checked", "disabled", "tabIndex", "depth", "activeView", "min", "max", "disabledDates", "type", "holidayDates", "interface"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange", "typeChange", "disabledDatesChange", "holidayDatesChange", "onNavigate"] }], directives: [{ type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", format: "format", interface: "interface" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange", typeChange: "typeChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", formatChange: "formatChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, providers: [{ provide: AXClosbaleComponent, useExisting: AXDatePickerComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "_calendar", first: true, predicate: AXCalendarComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\" [class.ax-state-disabled]=\"disabled\"\r\n        [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n        [attr.tabindex]=\"_isMobile ? -1 : tabIndex\" [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (mouseup)=\"_handleOnInputClickEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\"\r\n        (keydown)=\"_handleOnKeydownEvent($event)\">\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-calendar-options\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"true\"\r\n    (onOpened)=\"_handlePopoverOpened($event)\">\r\n    <div class=\"ax-overlay-pane\" [class.ax-w-full]=\"_isMobile\">\r\n        <ax-header *ngIf=\"_isMobile\" >\r\n            <ax-title text=\"{{placeholder || 'Choose a date'}}\"></ax-title>\r\n            <ax-close-button></ax-close-button>\r\n        </ax-header>\r\n        <ng-container *ngIf=\"interface === 'calendar'; then calendarTemplate; else pickerTemplate\"></ng-container>\r\n        <ng-template #calendarTemplate>\r\n            <ax-calendar #calendar [disabled]=\"disabled\" [readonly]=\"readonly\" [(value)]=\"value\" [min]=\"min\" [max]=\"max\"\r\n                [disabledDates]=\"disabledDates\" [holidayDates]=\"holidayDates\" [depth]=\"depth\"\r\n                (onNavigate)=\"_handleOnNavigate($event)\" [type]=\"type\">\r\n            </ax-calendar>\r\n        </ng-template>\r\n        <ng-template #pickerTemplate>\r\n        </ng-template>\r\n\r\n    </div>\r\n</ax-popover>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { type: AXDecoratorHeaderComponent, selector: "ax-header" }, { type: AXDecoratorTitleComponent, selector: "ax-title", inputs: ["text"] }, { type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { type: AXCalendarComponent, selector: "ax-calendar", inputs: ["readonly", "allowNull", "value", "debounceTime", "name", "checked", "disabled", "tabIndex", "depth", "activeView", "min", "max", "disabledDates", "type", "holidayDates", "interface"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange", "typeChange", "disabledDatesChange", "holidayDatesChange", "onNavigate"] }], directives: [{ type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-date-picker', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...CALENDAR_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...CALENDAR_OUTPUTS], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\" [class.ax-state-disabled]=\"disabled\"\r\n        [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [attr.tabindex]=\"_isMobile ? -1 : tabIndex\"\r\n        [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\" (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-calendar-options\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" (onOpened)=\"_handlePopoverOpened($event)\">\r\n    <div class=\"ax-overlay-pane\" [class.ax-w-full]=\"_isMobile\">\r\n        <div *ngIf=\"_isMobile\" class=\"ax-header\">\r\n            <span >{{placeholder || 'Choose a date'}}</span>\r\n            <i class=\"ax-ic ax-ic-close \"\r\n                (click)=\"close()\" tabindex=\"1\"></i>\r\n        </div>\r\n        <ng-container *ngIf=\"interface === 'calendar'; then calendarTemplate; else pickerTemplate\"></ng-container>\r\n        <ng-template #calendarTemplate>\r\n            <ax-calendar #calendar [disabled]=\"disabled\" [readonly]=\"readonly\" \r\n            [(value)]=\"value\" \r\n            [min]=\"min\" \r\n            [max]=\"max\"\r\n            [disabledDates]=\"disabledDates\" \r\n            [holidayDates]=\"holidayDates\" \r\n            [depth]=\"depth\" \r\n            (onNavigate)=\"_handleOnNavigate($event)\"\r\n            [type]=\"type\">\r\n        </ax-calendar>\r\n        </ng-template>\r\n        <ng-template #pickerTemplate>\r\n        </ng-template>\r\n        \r\n    </div>\r\n</ax-popover>" }]
+            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, providers: [{ provide: AXClosbaleComponent, useExisting: AXDatePickerComponent }], 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\"\r\n        [attr.tabindex]=\"_isMobile ? -1 : tabIndex\" [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (mouseup)=\"_handleOnInputClickEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\"\r\n        (keydown)=\"_handleOnKeydownEvent($event)\">\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-calendar-options\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"true\"\r\n    (onOpened)=\"_handlePopoverOpened($event)\">\r\n    <div class=\"ax-overlay-pane\" [class.ax-w-full]=\"_isMobile\">\r\n        <ax-header *ngIf=\"_isMobile\" >\r\n            <ax-title text=\"{{placeholder || 'Choose a date'}}\"></ax-title>\r\n            <ax-close-button></ax-close-button>\r\n        </ax-header>\r\n        <ng-container *ngIf=\"interface === 'calendar'; then calendarTemplate; else pickerTemplate\"></ng-container>\r\n        <ng-template #calendarTemplate>\r\n            <ax-calendar #calendar [disabled]=\"disabled\" [readonly]=\"readonly\" [(value)]=\"value\" [min]=\"min\" [max]=\"max\"\r\n                [disabledDates]=\"disabledDates\" [holidayDates]=\"holidayDates\" [depth]=\"depth\"\r\n                (onNavigate)=\"_handleOnNavigate($event)\" [type]=\"type\">\r\n            </ax-calendar>\r\n        </ng-template>\r\n        <ng-template #pickerTemplate>\r\n        </ng-template>\r\n\r\n    </div>\r\n</ax-popover>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$4.AXPlatform }]; }, propDecorators: { popover: [{
                 type: ViewChild,
                 args: [AXPopoverComponent, { static: true }]
@@ -5005,14 +5155,12 @@ AXTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version:
 AXTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXTextBoxModule, declarations: [AXTextBoxComponent], imports: [CommonModule,
         FormsModule,
         AXButtonModule,
-        AXEditorDecoratorModule,
-        AXIconModule, i1$5.NgxMaskModule], exports: [AXTextBoxComponent] });
+        AXDecoratorModule, i1$5.NgxMaskModule], exports: [AXTextBoxComponent] });
 AXTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXTextBoxModule, providers: [], imports: [[
             CommonModule,
             FormsModule,
             AXButtonModule,
-            AXEditorDecoratorModule,
-            AXIconModule,
+            AXDecoratorModule,
             NgxMaskModule.forChild()
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXTextBoxModule, decorators: [{
@@ -5022,8 +5170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                         CommonModule,
                         FormsModule,
                         AXButtonModule,
-                        AXEditorDecoratorModule,
-                        AXIconModule,
+                        AXDecoratorModule,
                         NgxMaskModule.forChild()
                     ],
                     exports: [AXTextBoxComponent],
@@ -5032,15 +5179,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }] });
 
-const COMPONENT$d = [AXDatePickerComponent];
-const MODULES$d = [
+const COMPONENT$e = [AXDatePickerComponent];
+const MODULES$e = [
     CommonModule,
     AXCalendarModule,
     AXTextBoxModule,
     AXButtonModule,
     AXPopoverModule,
-    AXEditorDecoratorModule,
-    AXIconModule,
+    AXDecoratorModule,
     AXDateTimeModule,
     FormsModule
 ];
@@ -5052,17 +5198,16 @@ AXDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         AXTextBoxModule,
         AXButtonModule,
         AXPopoverModule,
-        AXEditorDecoratorModule,
-        AXIconModule,
+        AXDecoratorModule,
         AXDateTimeModule,
         FormsModule], exports: [AXDatePickerComponent] });
-AXDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDatepickerModule, providers: [], imports: [[...MODULES$d]] });
+AXDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDatepickerModule, providers: [], imports: [[...MODULES$e]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", 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: [],
                 }]
         }] });
@@ -5292,32 +5437,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 type: Input
             }] } });
 
-class AXPageFooterComponent {
-}
-AXPageFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXPageFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXPageFooterComponent, selector: "ax-page-footer", viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
-           <ng-content select="ax-prefix">
-            </ng-content>
-            <ng-content select="ax-suffix">
-            </ng-content>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageFooterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-page-footer',
-                    template: `
-           <ng-content select="ax-prefix">
-            </ng-content>
-            <ng-content select="ax-suffix">
-            </ng-content>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], propDecorators: { template: [{
-                type: ViewChild,
-                args: [TemplateRef, { static: true }]
-            }] } });
-
 const TAB_META_KEY = '__meta__';
 class AXPageCloseEvent extends AXEvent {
 }
@@ -5391,67 +5510,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 args: [AXPageComponent, { static: true }]
             }], footer: [{
                 type: ViewChild,
-                args: [AXPageFooterComponent, { static: true }]
+                args: [AXDecoratorFooterComponent, { static: true }]
             }], isLoadingChange: [{
                 type: Output
             }], isLoading: [{
                 type: Input
             }] } });
 
-class AXPageHeaderComponent {
-}
-AXPageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXPageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXPageHeaderComponent, selector: "ax-page-header", viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
-           <ng-content select="ax-prefix">
-            </ng-content>
-            <ng-content select="ax-suffix">
-            </ng-content>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageHeaderComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-page-header',
-                    template: `
-           <ng-content select="ax-prefix">
-            </ng-content>
-            <ng-content select="ax-suffix">
-            </ng-content>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], propDecorators: { template: [{
-                type: ViewChild,
-                args: [TemplateRef, { static: true }]
-            }] } });
-
 class AXPageModule {
 }
 AXPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageModule, declarations: [AXPageFooterComponent, AXPageHeaderComponent], exports: [AXPageFooterComponent, AXPageHeaderComponent] });
+AXPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageModule });
 AXPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageModule, providers: [], imports: [[]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
-                    exports: [AXPageFooterComponent, AXPageHeaderComponent],
-                    declarations: [AXPageFooterComponent, AXPageHeaderComponent],
+                    exports: [],
+                    declarations: [],
                     providers: [],
                 }]
         }] });
 
-const COMPONENT$c = [AXDialogComponent];
-const MODULES$c = [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule];
+const COMPONENT$d = [AXDialogComponent];
+const MODULES$d = [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXDecoratorModule];
 class AXDialogModule {
 }
 AXDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", 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.3.2", ngImport: i0, type: AXDialogModule, providers: [], imports: [[...MODULES$c]] });
+AXDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDialogModule, declarations: [AXDialogComponent], imports: [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXDecoratorModule], exports: [AXDialogComponent] });
+AXDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDialogModule, providers: [], imports: [[...MODULES$d]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDialogModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$c],
-                    imports: [...MODULES$c],
-                    exports: [...COMPONENT$c],
+                    declarations: [...COMPONENT$d],
+                    imports: [...MODULES$d],
+                    exports: [...COMPONENT$d],
                     providers: [],
                 }]
         }] });
@@ -5503,10 +5596,10 @@ class AXDropdownPanelComponent extends AXBaseDropdownMixin {
     }
 }
 AXDropdownPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDropdownPanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXButtonComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AXDropdownPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", items: "items" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onItemClick: "onItemClick" }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonItemComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "_viewButtons", predicate: AXButtonItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'toggle'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane\" [class.ax-dropdown-list]=\"_needBorder\" >\r\n        <ng-container *ngIf=\"items && items.length;else panelTpl\">\r\n            <ax-button-item [text]=\"item.text\" [color]=\"item.color\" *ngFor=\"let item of items\">\r\n                <ax-prefix *ngIf=\"item.iconClass\">\r\n                    <ax-icon [icon]=\"item.iconClass\"></ax-icon>\r\n                </ax-prefix>\r\n            </ax-button-item>\r\n        </ng-container>\r\n        <ng-template #panelTpl>\r\n            <ng-content select=\"[panel],ax-button-item\">\r\n            </ng-content>\r\n        </ng-template>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"], outputs: ["onOpened", "onClosed"] }, { type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["text", "tooltip", "selected", "seperated", "name", "data", "color"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXDropdownPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", items: "items" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onItemClick: "onItemClick" }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonItemComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "_viewButtons", predicate: AXButtonItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'toggle'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"false\">\r\n    <div class=\"ax-overlay-pane\" [class.ax-dropdown-list]=\"_needBorder\" >\r\n        <ng-container *ngIf=\"items && items.length;else panelTpl\">\r\n            <ax-button-item [text]=\"item.text\" [color]=\"item.color\" *ngFor=\"let item of items\">\r\n                <ax-prefix *ngIf=\"item.iconClass\">\r\n                    <ax-icon [icon]=\"item.iconClass\"></ax-icon>\r\n                </ax-prefix>\r\n            </ax-button-item>\r\n        </ng-container>\r\n        <ng-template #panelTpl>\r\n            <ng-content select=\"[panel],ax-button-item\">\r\n            </ng-content>\r\n        </ng-template>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["text", "tooltip", "selected", "seperated", "name", "data", "color"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDropdownPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-dropdown-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: [...DROPDOWN_INPUTS], outputs: [...DROPDOWN_OUTPUT], template: "<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'toggle'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane\" [class.ax-dropdown-list]=\"_needBorder\" >\r\n        <ng-container *ngIf=\"items && items.length;else panelTpl\">\r\n            <ax-button-item [text]=\"item.text\" [color]=\"item.color\" *ngFor=\"let item of items\">\r\n                <ax-prefix *ngIf=\"item.iconClass\">\r\n                    <ax-icon [icon]=\"item.iconClass\"></ax-icon>\r\n                </ax-prefix>\r\n            </ax-button-item>\r\n        </ng-container>\r\n        <ng-template #panelTpl>\r\n            <ng-content select=\"[panel],ax-button-item\">\r\n            </ng-content>\r\n        </ng-template>\r\n    </div>\r\n</ax-popover>" }]
+            args: [{ selector: 'ax-dropdown-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: [...DROPDOWN_INPUTS], outputs: [...DROPDOWN_OUTPUT], template: "<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'toggle'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"false\">\r\n    <div class=\"ax-overlay-pane\" [class.ax-dropdown-list]=\"_needBorder\" >\r\n        <ng-container *ngIf=\"items && items.length;else panelTpl\">\r\n            <ax-button-item [text]=\"item.text\" [color]=\"item.color\" *ngFor=\"let item of items\">\r\n                <ax-prefix *ngIf=\"item.iconClass\">\r\n                    <ax-icon [icon]=\"item.iconClass\"></ax-icon>\r\n                </ax-prefix>\r\n            </ax-button-item>\r\n        </ng-container>\r\n        <ng-template #panelTpl>\r\n            <ng-content select=\"[panel],ax-button-item\">\r\n            </ng-content>\r\n        </ng-template>\r\n    </div>\r\n</ax-popover>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXButtonComponent, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { _contentButtons: [{
@@ -5527,12 +5620,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 class AXDropdownModule {
 }
 AXDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", 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.3.2", ngImport: i0, type: AXDropdownModule, providers: [], imports: [[CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule]] });
+AXDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDropdownModule, declarations: [AXDropdownPanelComponent], imports: [CommonModule, AXButtonModule, OverlayModule, AXDecoratorModule, AXPopoverModule], exports: [AXDropdownPanelComponent] });
+AXDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDropdownModule, providers: [], imports: [[CommonModule, AXButtonModule, OverlayModule, AXDecoratorModule, AXPopoverModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDropdownModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule],
+                    imports: [CommonModule, AXButtonModule, OverlayModule, AXDecoratorModule, AXPopoverModule],
                     exports: [AXDropdownPanelComponent],
                     declarations: [AXDropdownPanelComponent],
                     providers: [],
@@ -5695,19 +5788,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 type: Input
             }] } });
 
-const COMPONENT$b = [AXInputMaskComponent];
-const MODULES$b = [CommonModule, NgxMaskModule.forRoot(), IMaskModule];
+const COMPONENT$c = [AXInputMaskComponent];
+const MODULES$c = [CommonModule, NgxMaskModule.forRoot(), IMaskModule];
 class AXInputMaskModule {
 }
 AXInputMaskModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXInputMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXInputMaskModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXInputMaskModule, declarations: [AXInputMaskComponent], imports: [CommonModule, i1$5.NgxMaskModule, IMaskModule], exports: [AXInputMaskComponent] });
-AXInputMaskModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXInputMaskModule, providers: [], imports: [[...MODULES$b]] });
+AXInputMaskModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXInputMaskModule, providers: [], imports: [[...MODULES$c]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXInputMaskModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$b],
-                    imports: [...MODULES$b],
-                    exports: [...COMPONENT$b],
+                    declarations: [...COMPONENT$c],
+                    imports: [...MODULES$c],
+                    exports: [...COMPONENT$c],
                     providers: [],
                 }]
         }] });
@@ -5733,19 +5826,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 type: Input
             }] } });
 
-const COMPONENT$a = [AXLabelComponent];
-const MODULES$a = [CommonModule];
+const COMPONENT$b = [AXLabelComponent];
+const MODULES$b = [CommonModule];
 class AXLabelModule {
 }
 AXLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXLabelModule, declarations: [AXLabelComponent], imports: [CommonModule], exports: [AXLabelComponent] });
-AXLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXLabelModule, providers: [], imports: [[...MODULES$a]] });
+AXLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXLabelModule, providers: [], imports: [[...MODULES$b]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXLabelModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$a],
-                    imports: [...MODULES$a],
-                    exports: [...COMPONENT$a],
+                    declarations: [...COMPONENT$b],
+                    imports: [...MODULES$b],
+                    exports: [...COMPONENT$b],
                     providers: [],
                 }]
         }] });
@@ -5775,12 +5868,23 @@ class AXMenuComponent extends AXBaseMenuMixin {
     }
     _onMenuClick(e, item) {
         if (!item[this.disableField] && this.openMode === 'click') {
+            if (this.openMode === 'click' && this.direction === 'horizontal') {
+                this.displayItems.forEach((element) => {
+                    if (element[this.valueField] != item[this.valueField] &&
+                        !item.parentId) {
+                        element.isOpen = false;
+                    }
+                });
+            }
             this._notActive(this.displayItems);
             if (item.children?.length > 0 || item[this.hasChildField]) {
                 if (item.children?.length > 0 && item[this.hasChildField]) {
                     item.children = [];
                 }
                 if (item.children?.length > 0) {
+                    if (this.openMode === 'click' && this.direction === 'horizontal') {
+                        this._setParentNode(item.children, item[this.valueField]);
+                    }
                     this._closeChild(item.children);
                 }
                 item.isOpen = !item.isOpen;
@@ -5792,7 +5896,7 @@ class AXMenuComponent extends AXBaseMenuMixin {
                 nativeEvent: e,
             });
             if (item.isOpen && item[this.hasChildField]) {
-                this._fetchData(item.id);
+                this._fetchData(item[this.valueField]);
             }
         }
         e.stopPropagation();
@@ -5851,12 +5955,14 @@ class AXMenuComponent extends AXBaseMenuMixin {
                     }
                     item.isOpen = false;
                 }
-                if (item.isOpen && item[this.hasChildField]) {
-                    this._fetchData(item.id);
-                }
             }
         }
     }
+    _setParentNode(item, parentId) {
+        item.forEach((element) => {
+            element.parentId = parentId;
+        });
+    }
     _getDirection() {
         if (this.direction === 'horizontal') {
             return 'horizontal-mode';
@@ -5867,7 +5973,7 @@ class AXMenuComponent extends AXBaseMenuMixin {
     }
 }
 AXMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXMenuComponent, selector: "ax-menu", inputs: { disabled: "disabled", tabIndex: "tabIndex", textField: "textField", valueField: "valueField", items: "items", id: "id", parentId: "parentId", icon: "icon", tooltip: "tooltip", isOpen: "isOpen", isActive: "isActive", visibleField: "visibleField", disableField: "disableField", hasChildField: "hasChildField", openMode: "openMode", direction: "direction" }, outputs: { onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-menu" }, queries: [{ propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ul [ngClass]=\"_getDirection()\">\r\n  <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: displayItems }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #recursiveListTmpl let-list=\"list\">\r\n  <ng-container *ngFor=\"let item of list;  trackBy: _trackLoaded\">\r\n    <li *ngIf=\"item[visibleField] !=false\" [class.ax-state-disabled]=\"item[disableField]\"\r\n      (click)=\"_onMenuClick($event,item)\" (mouseenter)=\"_onMouseEnter($event,item)\"\r\n      (mouseleave)=\"_onMouseLeave($event,item)\">\r\n      <a [ngClass]=\"{'active': item.isActive}\">\r\n        <div class=\"ax-menu-start-side\">\r\n          <ax-icon [class]=\"item.icon || item[icon]\" *ngIf=\"item.icon || item[icon]\"></ax-icon>\r\n          <span>{{_getItemDisplayTextTemplte(item)}}</span>\r\n        </div>\r\n        <div class=\"ax-menu-end-side\">\r\n          <ax-icon [ngClass]=\"{'active-icon': item.isOpen}\"\r\n            *ngIf=\"item?.children?.length > 0 && !isLoading || item[hasChildField] && !isLoading\" class=\"ax-ic-chevron\">\r\n          </ax-icon>\r\n        </div>\r\n        <ax-loading *ngIf=\"isLoading && item.isActive && item.isOpen\">\r\n        </ax-loading>\r\n      </a>\r\n      <ul [class.ax-state-disabled]=\"item[disableField]\" *ngIf=\"item?.children?.length > 0 && item.isOpen\">\r\n        <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-container *ngIf=\"isLoading\">\r\n  <ng-template>\r\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n      <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n<ng-template #tmpEmpty>\r\n  <ng-container *ngIf=\"!isLoading\">\r\n    <!--------------- check for custom template  --------------->\r\n    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-template #elseEmptyTemplate>\r\n      <div class=\"ax-list-item\">\r\n        {{ 'common.no-result-found' | trans }}\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>", components: [{ type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "trans": i1$4.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXMenuComponent, selector: "ax-menu", inputs: { disabled: "disabled", tabIndex: "tabIndex", textField: "textField", valueField: "valueField", items: "items", id: "id", parentId: "parentId", icon: "icon", tooltip: "tooltip", isOpen: "isOpen", isActive: "isActive", visibleField: "visibleField", disableField: "disableField", hasChildField: "hasChildField", openMode: "openMode", direction: "direction" }, outputs: { onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-menu" }, queries: [{ propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ul [ngClass]=\"_getDirection()\">\r\n  <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: displayItems }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #recursiveListTmpl let-list=\"list\">\r\n  <ng-container *ngFor=\"let item of list;  trackBy: _trackLoaded\">\r\n    <li *ngIf=\"item[visibleField] !=false\" [class.ax-state-disabled]=\"item[disableField]\"\r\n      (click)=\"_onMenuClick($event,item)\" (mouseenter)=\"_onMouseEnter($event,item)\"\r\n      (mouseleave)=\"_onMouseLeave($event,item)\">\r\n      <a [ngClass]=\"{'active': item.isActive}\">\r\n        <div class=\"ax-menu-start-side\">\r\n          <ax-icon [class]=\"item.icon || item[icon]\" *ngIf=\"item.icon || item[icon]\"></ax-icon>\r\n          <span>{{_getItemDisplayTextTemplte(item)}}</span>\r\n        </div>\r\n        <div class=\"ax-menu-end-side\">\r\n          <ax-icon [ngClass]=\"{'active-icon': item.isOpen}\"\r\n            *ngIf=\"item?.children?.length > 0 && !isLoading || item[hasChildField] && !isLoading\" class=\"ax-ic-chevron\">\r\n          </ax-icon>\r\n        </div>\r\n        <ax-loading *ngIf=\"isLoading && item.isActive && item.isOpen\">\r\n        </ax-loading>\r\n      </a>\r\n      <ul [class.ax-state-disabled]=\"item[disableField]\" *ngIf=\"item?.children?.length > 0 && item.isOpen\">\r\n        <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-container *ngIf=\"isLoading\">\r\n  <ng-template>\r\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n      <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n<ng-template #tmpEmpty>\r\n  <ng-container *ngIf=\"!isLoading\">\r\n    <!--------------- check for custom template  --------------->\r\n    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-template #elseEmptyTemplate>\r\n      <div class=\"ax-list-item\">\r\n        {{ 'common.no-result-found' | trans }}\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>", components: [{ type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "trans": i1$4.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-menu', inputs: [...INTERACTIVE_INPUTS, ...BASEMENU_INPUTS], outputs: [...INTERACTIVE_OUTPUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-menu' }, template: "<ul [ngClass]=\"_getDirection()\">\r\n  <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: displayItems }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #recursiveListTmpl let-list=\"list\">\r\n  <ng-container *ngFor=\"let item of list;  trackBy: _trackLoaded\">\r\n    <li *ngIf=\"item[visibleField] !=false\" [class.ax-state-disabled]=\"item[disableField]\"\r\n      (click)=\"_onMenuClick($event,item)\" (mouseenter)=\"_onMouseEnter($event,item)\"\r\n      (mouseleave)=\"_onMouseLeave($event,item)\">\r\n      <a [ngClass]=\"{'active': item.isActive}\">\r\n        <div class=\"ax-menu-start-side\">\r\n          <ax-icon [class]=\"item.icon || item[icon]\" *ngIf=\"item.icon || item[icon]\"></ax-icon>\r\n          <span>{{_getItemDisplayTextTemplte(item)}}</span>\r\n        </div>\r\n        <div class=\"ax-menu-end-side\">\r\n          <ax-icon [ngClass]=\"{'active-icon': item.isOpen}\"\r\n            *ngIf=\"item?.children?.length > 0 && !isLoading || item[hasChildField] && !isLoading\" class=\"ax-ic-chevron\">\r\n          </ax-icon>\r\n        </div>\r\n        <ax-loading *ngIf=\"isLoading && item.isActive && item.isOpen\">\r\n        </ax-loading>\r\n      </a>\r\n      <ul [class.ax-state-disabled]=\"item[disableField]\" *ngIf=\"item?.children?.length > 0 && item.isOpen\">\r\n        <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-container *ngIf=\"isLoading\">\r\n  <ng-template>\r\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n      <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n<ng-template #tmpEmpty>\r\n  <ng-container *ngIf=\"!isLoading\">\r\n    <!--------------- check for custom template  --------------->\r\n    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-template #elseEmptyTemplate>\r\n      <div class=\"ax-list-item\">\r\n        {{ 'common.no-result-found' | trans }}\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>" }]
@@ -5876,18 +5982,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 args: ['emptyTemplate']
             }] } });
 
-const COMPONENT$9 = [AXMenuComponent];
-const MODULES$9 = [CommonModule];
+const COMPONENT$a = [AXMenuComponent];
+const MODULES$a = [CommonModule, AXDecoratorModule];
 class AXMenuModule {
 }
 AXMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXMenuModule, declarations: [AXMenuComponent], imports: [CommonModule, AXIconModule,
-        AXLoadingModule,
+AXMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXMenuModule, declarations: [AXMenuComponent], imports: [CommonModule, AXDecoratorModule, AXLoadingModule,
         AXTranslationModule,
         AXPopoverModule], exports: [AXMenuComponent] });
 AXMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXMenuModule, providers: [], imports: [[
-            ...MODULES$9,
-            AXIconModule,
+            ...MODULES$a,
             AXLoadingModule,
             AXTranslationModule,
             AXPopoverModule,
@@ -5895,15 +5999,14 @@ AXMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXMenuModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$9],
+                    declarations: [...COMPONENT$a],
                     imports: [
-                        ...MODULES$9,
-                        AXIconModule,
+                        ...MODULES$a,
                         AXLoadingModule,
                         AXTranslationModule,
                         AXPopoverModule,
                     ],
-                    exports: [...COMPONENT$9],
+                    exports: [...COMPONENT$a],
                     providers: [],
                 }]
         }] });
@@ -6078,7 +6181,7 @@ class AXNumberBoxComponent extends AXBaseTextBoxMixin {
     }
 }
 AXNumberBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXNumberBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", type: "type", autoComplete: "autoComplete", name: "name", checked: "checked", thousandsSeparator: "thousandsSeparator", padDecimalZeros: "padDecimalZeros", step: "step", decimals: "decimals", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-editor-container" }, viewQueries: [{ propertyName: "_maskDirective", first: true, predicate: IMaskDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\"  \r\n    [attr.placeholder]=\"placeholder\" \r\n    [imask]=\"_maskObj\" \r\n    [unmask]=\"'typed'\"\r\n    [attr.min]=\"minValue\"\r\n    [attr.max]=\"maxValue\" \r\n    [class.ax-state-disabled]=\"disabled\" \r\n    [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" \r\n    [readonly]=\"readonly\" \r\n    [tabindex]=\"tabIndex\" \r\n    [(ngModel)]=\"value\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" \r\n    (blur)=\"_emitOnFocusEvent($event)\" \r\n    (keydown)=\"_handleOnKeydownEvent($event)\"\r\n    [attr.autocomplete]=\"autoComplete\">\r\n\r\n<div class=\"ax-number-box-arrows\" *ngIf=\"showSpinButtons && !(disabled || readonly)\">\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax-rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,-1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax--rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n</div>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXNumberBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", type: "type", autoComplete: "autoComplete", name: "name", checked: "checked", thousandsSeparator: "thousandsSeparator", padDecimalZeros: "padDecimalZeros", step: "step", decimals: "decimals", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-editor-container" }, viewQueries: [{ propertyName: "_maskDirective", first: true, predicate: IMaskDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\"  \r\n    [attr.placeholder]=\"placeholder\" \r\n    [imask]=\"_maskObj\" \r\n    [unmask]=\"'typed'\"\r\n    [attr.min]=\"minValue\"\r\n    [attr.max]=\"maxValue\" \r\n    [class.ax-state-disabled]=\"disabled\" \r\n    [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" \r\n    [readonly]=\"readonly\" \r\n    [tabindex]=\"tabIndex\" \r\n    [(ngModel)]=\"value\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" \r\n    (blur)=\"_emitOnFocusEvent($event)\" \r\n    (keydown)=\"_handleOnKeydownEvent($event)\"\r\n    [attr.autocomplete]=\"autoComplete\">\r\n\r\n<div class=\"ax-number-box-arrows\" *ngIf=\"showSpinButtons && !(disabled || readonly)\">\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax-rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,-1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax--rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n</div>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-number-box', inputs: [
@@ -6116,13 +6219,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 args: [IMaskDirective]
             }] } });
 
-const COMPONENT$8 = [AXNumberBoxComponent];
-const MODULES$8 = [
+const COMPONENT$9 = [AXNumberBoxComponent];
+const MODULES$9 = [
     CommonModule,
     FormsModule,
     AXButtonModule,
-    AXEditorDecoratorModule,
-    AXIconModule,
+    AXDecoratorModule,
     IMaskModule
 ];
 class AXNumberBoxModule {
@@ -6131,16 +6233,15 @@ AXNumberBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versio
 AXNumberBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXNumberBoxModule, declarations: [AXNumberBoxComponent], imports: [CommonModule,
         FormsModule,
         AXButtonModule,
-        AXEditorDecoratorModule,
-        AXIconModule,
+        AXDecoratorModule,
         IMaskModule], exports: [AXNumberBoxComponent] });
-AXNumberBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXNumberBoxModule, providers: [], imports: [[...MODULES$8]] });
+AXNumberBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXNumberBoxModule, providers: [], imports: [[...MODULES$9]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXNumberBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$8],
-                    imports: [...MODULES$8],
-                    exports: [...COMPONENT$8],
+                    declarations: [...COMPONENT$9],
+                    imports: [...MODULES$9],
+                    exports: [...COMPONENT$9],
                     providers: [],
                 }]
         }] });
@@ -6175,7 +6276,7 @@ class AXPasswordBoxComponent extends AXBaseTextBoxMixin {
     }
 }
 AXPasswordBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPasswordBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXPasswordBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXPasswordBoxComponent, selector: "ax-password-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", cssClass: "cssClass", size: "size", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", type: "type", autoComplete: "autoComplete", value: "value", name: "name", checked: "checked", showToggleButton: "showToggleButton" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-password-box ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [type]=\"_type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n    [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete\">\r\n\r\n<ng-content select=\"ax-suffix\">\r\n\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>\r\n<ax-button color=\"light\" look=\"blank\" [size]=\"size\" (onClick)=\"toggleType()\" [tabIndex]=\"-1\" *ngIf=\"showToggleButton\">\r\n    <ax-icon [icon]=\"_icon\"></ax-icon>\r\n</ax-button>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXPasswordBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXPasswordBoxComponent, selector: "ax-password-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", cssClass: "cssClass", size: "size", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", type: "type", autoComplete: "autoComplete", value: "value", name: "name", checked: "checked", showToggleButton: "showToggleButton" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-password-box ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [type]=\"_type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n    [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete\">\r\n\r\n<ng-content select=\"ax-suffix\">\r\n\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>\r\n<ax-button color=\"light\" look=\"blank\" [size]=\"size\" (onClick)=\"toggleType()\" [tabIndex]=\"-1\" *ngIf=\"showToggleButton\">\r\n    <ax-icon [icon]=\"_icon\"></ax-icon>\r\n</ax-button>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPasswordBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-password-box', inputs: [
@@ -6196,13 +6297,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 type: Input
             }] } });
 
-const COMPONENT$7 = [AXPasswordBoxComponent];
-const MODULES$7 = [
+const COMPONENT$8 = [AXPasswordBoxComponent];
+const MODULES$8 = [
     CommonModule,
     FormsModule,
     AXButtonModule,
-    AXEditorDecoratorModule,
-    AXIconModule
+    AXDecoratorModule,
 ];
 class AXPasswordBoxModule {
 }
@@ -6210,15 +6310,14 @@ AXPasswordBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", vers
 AXPasswordBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPasswordBoxModule, declarations: [AXPasswordBoxComponent], imports: [CommonModule,
         FormsModule,
         AXButtonModule,
-        AXEditorDecoratorModule,
-        AXIconModule], exports: [AXPasswordBoxComponent] });
-AXPasswordBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPasswordBoxModule, providers: [], imports: [[...MODULES$7]] });
+        AXDecoratorModule], exports: [AXPasswordBoxComponent] });
+AXPasswordBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPasswordBoxModule, providers: [], imports: [[...MODULES$8]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPasswordBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$7],
-                    imports: [...MODULES$7],
-                    exports: [...COMPONENT$7],
+                    declarations: [...COMPONENT$8],
+                    imports: [...MODULES$8],
+                    exports: [...COMPONENT$8],
                     providers: [],
                 }]
         }] });
@@ -6286,8 +6385,8 @@ class AXPopupComponent extends AXBaseComponentMixin {
                 const main = this._getHostElement().querySelector('.ax-popup-main-container');
                 const popHeader = this._getHostElement().querySelector('.ax-popup-header-container');
                 const popFooter = this._getHostElement().querySelector('.ax-popup-footer-container');
-                const footer = main.querySelector('ax-page-footer');
-                const header = main.querySelector('ax-page-header');
+                const footer = main.querySelector('ax-footer');
+                const header = main.querySelector('ax-header');
                 if (footer) {
                     popFooter.append(footer);
                 }
@@ -6325,10 +6424,10 @@ class AXPopupComponent extends AXBaseComponentMixin {
     onFullScreen() { }
 }
 AXPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: AXLoadingService }, { token: i1$4.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXPopupComponent, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\"  [cdkTrapFocus]=\"true\">\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <div cdkDragHandle class=\"ax-popup-header-container\">\r\n            <ng-container *ngIf=\"showHeader\">\r\n                <div class=\"ax-popup-header\">\r\n                    <span>{{title}}</span>\r\n                    <i class=\"ax-ic ax-ic-close\" *ngIf=\"showCloseButton\" (click)=\"_handleCloseClick()\" tabindex=\"1\"></i>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"ax-popup-main-container\">\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </div>\r\n        <div class=\"ax-popup-footer-container\"></div>\r\n\r\n    </div>\r\n</div>", directives: [{ type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXPopupComponent, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXPopupComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <div cdkDragHandle class=\"ax-popup-header-container\">\r\n            <ax-header *ngIf=\"showHeader\">\r\n                <ax-title [text]=\"title\"></ax-title>\r\n                <ax-close-button *ngIf=\"showCloseButton\"></ax-close-button>\r\n            </ax-header>\r\n        </div>\r\n        <div class=\"ax-popup-main-container\">\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </div>\r\n        <div class=\"ax-popup-footer-container\"></div>\r\n    </div>\r\n</div>", components: [{ type: AXDecoratorHeaderComponent, selector: "ax-header" }, { type: AXDecoratorTitleComponent, selector: "ax-title", inputs: ["text"] }, { type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }], directives: [{ type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\"  [cdkTrapFocus]=\"true\">\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <div cdkDragHandle class=\"ax-popup-header-container\">\r\n            <ng-container *ngIf=\"showHeader\">\r\n                <div class=\"ax-popup-header\">\r\n                    <span>{{title}}</span>\r\n                    <i class=\"ax-ic ax-ic-close\" *ngIf=\"showCloseButton\" (click)=\"_handleCloseClick()\" tabindex=\"1\"></i>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"ax-popup-main-container\">\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </div>\r\n        <div class=\"ax-popup-footer-container\"></div>\r\n\r\n    </div>\r\n</div>" }]
+            args: [{ selector: 'ax-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXClosbaleComponent, useExisting: AXPopupComponent }], template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <div cdkDragHandle class=\"ax-popup-header-container\">\r\n            <ax-header *ngIf=\"showHeader\">\r\n                <ax-title [text]=\"title\"></ax-title>\r\n                <ax-close-button *ngIf=\"showCloseButton\"></ax-close-button>\r\n            </ax-header>\r\n        </div>\r\n        <div class=\"ax-popup-main-container\">\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </div>\r\n        <div class=\"ax-popup-footer-container\"></div>\r\n    </div>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: AXLoadingService }, { type: i1$4.AXPlatform }]; }, propDecorators: { onKeydownHandler: [{
                 type: HostListener,
                 args: ['keydown.escape', ['$event']]
@@ -6424,19 +6523,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: AXOverlayService }]; } });
 
-const COMPONENT$6 = [AXPopupComponent];
-const MODULES$6 = [CommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule];
+const COMPONENT$7 = [AXPopupComponent];
+const MODULES$7 = [CommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule, AXDecoratorModule];
 class AXPopupModule {
 }
 AXPopupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXPopupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPopupModule, declarations: [AXPopupComponent], imports: [CommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule], exports: [AXPopupComponent] });
-AXPopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPopupModule, providers: [], imports: [[...MODULES$6]] });
+AXPopupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPopupModule, declarations: [AXPopupComponent], imports: [CommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule, AXDecoratorModule], exports: [AXPopupComponent] });
+AXPopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPopupModule, providers: [], imports: [[...MODULES$7]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPopupModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$6],
-                    imports: [...MODULES$6],
-                    exports: [...COMPONENT$6],
+                    declarations: [...COMPONENT$7],
+                    imports: [...MODULES$7],
+                    exports: [...COMPONENT$7],
                     providers: [],
                 }]
         }] });
@@ -6508,25 +6607,25 @@ class AXRadioComponent extends AXBaseValueComponentMixin {
     }
 }
 AXRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXRadioComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXRadioComponent, selector: "ax-radio", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "ax-radio" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-items-start\">\r\n    <div class=\"ax-flex ax-items-center ax-h-5\">\r\n        <input [id]=\"id\" class=\"ax-radio\" type=\"radio\" [(ngModel)]=\"value\" [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n    </div>\r\n    <div class=\"ax-ms-3 ax-text-sm\">\r\n        <ng-content select=\"ax-label\"></ng-content>\r\n        <ng-content select=\"ax-form-hint\"></ng-content>\r\n    </div>\r\n</div>\r\n<ng-content select=\"ax-validation-rule\"></ng-content>", directives: [{ type: i1$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXRadioComponent, selector: "ax-radio", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "ax-radio" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-items-start\">\n    <div class=\"ax-flex ax-items-center ax-h-5\">\n        <input [id]=\"id\" class=\"ax-radio\" type=\"radio\" [(ngModel)]=\"value\" [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\"\n        (blur)=\"_emitOnBlurEvent($event)\">\n    </div>\n    <div class=\"ax-ms-3 ax-text-sm\">\n        <ng-content select=\"ax-label\"></ng-content>\n        <ng-content select=\"ax-form-hint\"></ng-content>\n    </div>\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>", directives: [{ type: i1$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXRadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-radio', inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-radio' }, template: "<div class=\"ax-flex ax-items-start\">\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>" }]
+            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>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-const COMPONENT$5 = [AXRadioComponent];
-const MODULES$5 = [CommonModule, FormsModule];
+const COMPONENT$6 = [AXRadioComponent];
+const MODULES$6 = [CommonModule, FormsModule];
 class AXRadioModule {
 }
 AXRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXRadioModule, declarations: [AXRadioComponent], imports: [CommonModule, FormsModule], exports: [AXRadioComponent] });
-AXRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXRadioModule, providers: [], imports: [[...MODULES$5]] });
+AXRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXRadioModule, providers: [], imports: [[...MODULES$6]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXRadioModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$5],
-                    imports: [...MODULES$5],
-                    exports: [...COMPONENT$5],
+                    declarations: [...COMPONENT$6],
+                    imports: [...MODULES$6],
+                    exports: [...COMPONENT$6],
                     providers: [],
                 }]
         }] });
@@ -6544,19 +6643,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
             args: [{ selector: 'ax-range-slider', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-range-slider' }, template: "<input type=\"range\" min=\"1\" max=\"100\" value=\"50\" class=\"ax-range-slider-input\">" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-const COMPONENT$4 = [AXRangeSliderComponent];
-const MODULES$4 = [CommonModule];
+const COMPONENT$5 = [AXRangeSliderComponent];
+const MODULES$5 = [CommonModule];
 class AXRangeSliderModule {
 }
 AXRangeSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXRangeSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXRangeSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXRangeSliderModule, declarations: [AXRangeSliderComponent], imports: [CommonModule], exports: [AXRangeSliderComponent] });
-AXRangeSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXRangeSliderModule, providers: [], imports: [[...MODULES$4]] });
+AXRangeSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXRangeSliderModule, providers: [], imports: [[...MODULES$5]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXRangeSliderModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$4],
-                    imports: [...MODULES$4],
-                    exports: [...COMPONENT$4],
+                    declarations: [...COMPONENT$5],
+                    imports: [...MODULES$5],
+                    exports: [...COMPONENT$5],
                     providers: [],
                 }]
         }] });
@@ -6648,6 +6747,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }] });
 
+class AXSearchBoxComponent extends AXBaseComponentMixin {
+    constructor(_elementRef, _cdr, _parent) {
+        super(_elementRef, _cdr);
+        this._parent = _parent;
+        this.placeholder = 'common.search';
+        this.debounceTime = 300;
+        this.searchExp = null;
+    }
+    _onSearchExprChanged(e) {
+        if (this._parent && this._parent.search) {
+            this._parent.search(e.value);
+        }
+    }
+    focus() {
+        this._textbox?.focus();
+    }
+}
+AXSearchBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXSearchBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXSearchableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AXSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: { placeholder: "placeholder", debounceTime: "debounceTime", searchExp: "searchExp" }, viewQueries: [{ propertyName: "_textbox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-box  placeholder=\"{{ placeholder | trans }}\" [debounceTime]=\"debounceTime\" \r\n    [(value)]=\"searchExp\" (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n    <ax-prefix>\r\n        <ax-icon class=\"ax-ic ax-ic-magnify\">\r\n        </ax-icon>\r\n    </ax-prefix>\r\n</ax-text-box>", components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked", "placeholder", "maxLength", "type", "autoComplete"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], pipes: { "trans": i1$4.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXSearchBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-search-box', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ax-text-box  placeholder=\"{{ placeholder | trans }}\" [debounceTime]=\"debounceTime\" \r\n    [(value)]=\"searchExp\" (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n    <ax-prefix>\r\n        <ax-icon class=\"ax-ic ax-ic-magnify\">\r\n        </ax-icon>\r\n    </ax-prefix>\r\n</ax-text-box>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXSearchableComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [AXSearchableComponent]
+                }] }]; }, propDecorators: { _textbox: [{
+                type: ViewChild,
+                args: [AXTextBoxComponent]
+            }], placeholder: [{
+                type: Input
+            }], debounceTime: [{
+                type: Input
+            }], searchExp: [{
+                type: Input
+            }] } });
+
+const COMPONENT$4 = [AXSearchBoxComponent];
+const MODULES$4 = [CommonModule, AXTranslationModule, AXDecoratorModule, AXTextBoxModule];
+class AXSearchBoxModule {
+}
+AXSearchBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXSearchBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSearchBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXSearchBoxModule, declarations: [AXSearchBoxComponent], imports: [CommonModule, AXTranslationModule, AXDecoratorModule, AXTextBoxModule], exports: [AXSearchBoxComponent] });
+AXSearchBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXSearchBoxModule, providers: [], imports: [[...MODULES$4]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXSearchBoxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT$4],
+                    imports: [...MODULES$4],
+                    exports: [...COMPONENT$4],
+                    providers: [],
+                }]
+        }] });
+
 /**
  * The Button is a component which detects user interaction and triggers a corresponding event
  *
@@ -6667,7 +6821,6 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
          *  Defines the clearButton.
          */
         this.clearButton = false;
-        this._searchSettings = { enabled: false, expr: null };
         /**
          *  Defines the checkbox.
          */
@@ -6681,15 +6834,6 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
             this._popoverWidth = this._isMobile ? null : this._target.offsetWidth;
         });
     }
-    /**
-     *  Defines the search.
-     */
-    get searchSettings() {
-        return this._searchSettings;
-    }
-    set searchSettings(v) {
-        this._searchSettings = v || { enabled: false, expr: null };
-    }
     get emptyTemplate() {
         return this._contentEmptyTemplate;
     }
@@ -6732,7 +6876,6 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
     }
     _checkForLoadData() {
         const list = this.listContainer.nativeElement;
-        //const headerSize = Array.from(list.parentElement.querySelectorAll<HTMLDivElement>('.ax-header')).reduce((v, s) => v + s.offsetHeight, 0);
         if (this.loadedCount < this.totalCount && list.scrollHeight < ((list.parentElement.clientHeight) * 1.5)) {
             this._fetchData();
         }
@@ -6795,6 +6938,8 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         }
     }
     _handlePopoverKeydown(e) {
+        if (e.target.tagName == "INPUT" && ['Space', 'Backspace'].includes(e.code))
+            return;
         if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && this.displayItems.length > 0) {
             this.isUserInput = true;
             this._focusItemByNav((e.key === 'ArrowDown' ? 1 : -1));
@@ -6808,8 +6953,9 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
             e.preventDefault();
         }
         else if ((e.code === 'Space' || e.code === 'Enter')) {
+            debugger;
             e.preventDefault();
-            const focusedItemId = this.listContainer.nativeElement.querySelector('.ax-state-focus').dataset.id;
+            const focusedItemId = this.listContainer.nativeElement.querySelector('.ax-state-focus')?.dataset?.id;
             const focusedItem = _.findLast(this.flatItems, [this.valueField, focusedItemId]);
             if (focusedItem) {
                 if (this.isItemDisabled(focusedItem)) {
@@ -6846,6 +6992,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         else {
             this._focusSelectedItem();
         }
+        debugger;
         if (this._searchBox && !this._isMobile) {
             this._searchBox.focus();
         }
@@ -6921,32 +7068,43 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
     }
     _onSearchExprChanged(e) {
         this.empty();
+        this._forceFocus = true;
+        this._fetchData();
+    }
+    search(exp) {
+        debugger;
+        this.empty();
+        this._forceFocus = true;
         this._fetchData();
     }
     _fetchData() {
-        super._fetchData({ searchQuery: this._searchBox?.value });
+        super._fetchData({ searchQuery: this._searchBox?.searchExp });
     }
 }
 AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$4.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete", pageSize: "pageSize", valueField: "valueField", textField: "textField", items: "items", disabledField: "disabledField", disabledCallback: "disabledCallback", multiple: "multiple", selectionMode: "selectionMode", clearButton: "clearButton", searchSettings: "searchSettings", checkbox: "checkbox" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", valueChanged: "valueChanged" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, classAttribute: "ax-editor-container ax-drop-down" }, queries: [{ propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }, { propertyName: "_searchBox", first: true, predicate: ["searchBox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n        <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close ax-cursor-pointer\"\r\n                                    (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template #showPlaceholder>\r\n            <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\"> {{placeholder}}</div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && clearButton &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-prefix *ngIf=\"(isLoading && !this.popover.isOpen);else icon\">\r\n        <ax-loading type=\"spinner\"></ax-loading>\r\n    </ax-prefix>\r\n    <ng-template #icon>\r\n        <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ng-template>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\"\r\n    (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane \" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\" [class.ax-full]=\"searchSettings.enabled || isLazy\"\r\n        [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list\">\r\n            <div *ngIf=\"_isMobile\" class=\"ax-header\">\r\n                <span>{{_popoverTitle}}</span>\r\n                <i class=\"ax-ic {{multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'}}\" (click)=\"close()\"\r\n                    tabindex=\"1\"></i>\r\n            </div>\r\n            <div *ngIf=\"searchSettings.enabled\" class=\"ax-p-2\" [cdkTrapFocus]=\"true\" class=\"ax-header\">\r\n                <ax-text-box #searchBox placeholder=\"{{ 'common.search' | trans }}\" [debounceTime]=\"500\" \r\n                    class=\"ax-w-full ax-sm\" [(value)]=\"searchSettings.expr\" (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n                    <ax-prefix>\r\n                        <ax-icon  class=\"ax-ic ax-ic-magnify\">\r\n                        </ax-icon>\r\n                    </ax-prefix>\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\"\r\n                #listContainer>\r\n                <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                    <ul>\r\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\">\r\n                        </ng-container>\r\n                        <ng-template #tmpTree let-list=\"list\">\r\n                            <ng-container *ngFor=\"let item of list;let i = index;trackBy : _trackByFunction\">\r\n                                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                                    <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                                        [attr.data-id]=\"item[this.valueField]\">\r\n                                        <ng-container\r\n                                            *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                                        </ng-container>\r\n                                    </li>\r\n                                </ng-container>\r\n                                <ng-template #defualtTemplate>\r\n                                    <ng-container *ngIf=\"item.children?.length > 0;else tmpItem\">\r\n                                        <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\r\n                                            <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            <ul *ngIf=\"item.children?.length > 0\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"tmpTree; context:{ list:  item.children }\">\r\n                                                </ng-container>\r\n                                            </ul>\r\n                                        </li>\r\n                                    </ng-container>\r\n                                    <ng-template #tmpItem>\r\n                                        <ng-container *ngIf=\"!multiple;  else multipleTemplate\">\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-container>\r\n                                        <ng-template #multipleTemplate>\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                    *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\"\r\n                                                    [disabled]=\"isItemDisabled(item)\">\r\n                                                <span class=\"ax-ms-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-template>\r\n                                    </ng-template>\r\n                                </ng-template>\r\n                            </ng-container>\r\n                        </ng-template>\r\n                    </ul>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseLoadingTemplate>\r\n                        <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n                            <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-template #tmpEmpty>\r\n                    <ng-container *ngIf=\"!isLoading\">\r\n                        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseEmptyTemplate>\r\n                            <div class=\"ax-list-item\">\r\n                                {{ 'common.no-result-found' | trans }}\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </ng-template>\r\n\r\n            </div>\r\n            <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n            <!-- <div class=\"ax-footer\">footer</div> -->\r\n        </div>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"], outputs: ["onOpened", "onClosed"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked", "placeholder", "maxLength", "type", "autoComplete"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i1$4.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete", pageSize: "pageSize", valueField: "valueField", textField: "textField", items: "items", disabledField: "disabledField", disabledCallback: "disabledCallback", multiple: "multiple", selectionMode: "selectionMode", clearButton: "clearButton", checkbox: "checkbox" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", valueChanged: "valueChanged" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, classAttribute: "ax-editor-container ax-drop-down" }, providers: [
+        { provide: AXClosbaleComponent, useExisting: AXSelectBoxComponent },
+        { provide: AXSearchableComponent, useExisting: AXSelectBoxComponent }
+    ], queries: [{ propertyName: "_searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n        <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close ax-cursor-pointer\"\r\n                                    (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template #showPlaceholder>\r\n            <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\"> {{placeholder}}</div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && clearButton &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-prefix *ngIf=\"(isLoading && !this.popover.isOpen);else icon\">\r\n        <ax-loading type=\"spinner\"></ax-loading>\r\n    </ax-prefix>\r\n    <ng-template #icon>\r\n        <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ng-template>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"true\"\r\n    (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane \" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\" [class.ax-full]=\"_searchBox ||  isLazy\"\r\n        [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list\" >\r\n            <ax-header *ngIf=\"_isMobile\" >\r\n                <ax-title [text]=\"_popoverTitle\"></ax-title>\r\n                <ax-close-button [icon]=\"multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'\"></ax-close-button>\r\n            </ax-header>\r\n            <div class=\"ax-p-2\" [class.ax-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox!=null\">\r\n                <ng-content select=\"ax-search-box\" ></ng-content>\r\n            </div>\r\n            <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\"\r\n                #listContainer>\r\n                <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                    <ul>\r\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\">\r\n                        </ng-container>\r\n                        <ng-template #tmpTree let-list=\"list\">\r\n                            <ng-container *ngFor=\"let item of list;let i = index;trackBy : _trackByFunction\">\r\n                                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                                    <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                                        [attr.data-id]=\"item[this.valueField]\">\r\n                                        <ng-container\r\n                                            *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                                        </ng-container>\r\n                                    </li>\r\n                                </ng-container>\r\n                                <ng-template #defualtTemplate>\r\n                                    <ng-container *ngIf=\"item.children?.length > 0;else tmpItem\">\r\n                                        <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\r\n                                            <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            <ul *ngIf=\"item.children?.length > 0\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"tmpTree; context:{ list:  item.children }\">\r\n                                                </ng-container>\r\n                                            </ul>\r\n                                        </li>\r\n                                    </ng-container>\r\n                                    <ng-template #tmpItem>\r\n                                        <ng-container *ngIf=\"!multiple;  else multipleTemplate\">\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-container>\r\n                                        <ng-template #multipleTemplate>\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                    *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\"\r\n                                                    [disabled]=\"isItemDisabled(item)\">\r\n                                                <span class=\"ax-ms-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-template>\r\n                                    </ng-template>\r\n                                </ng-template>\r\n                            </ng-container>\r\n                        </ng-template>\r\n                    </ul>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseLoadingTemplate>\r\n                        <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n                            <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-template #tmpEmpty>\r\n                    <ng-container *ngIf=\"!isLoading\">\r\n                        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseEmptyTemplate>\r\n                            <div class=\"ax-list-item\">\r\n                                {{ 'common.no-result-found' | trans }}\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </ng-template>\r\n\r\n            </div>\r\n            <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n            <!-- <div class=\"ax-footer\">footer</div> -->\r\n        </div>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { type: AXDecoratorHeaderComponent, selector: "ax-header" }, { type: AXDecoratorTitleComponent, selector: "ax-title", inputs: ["text"] }, { type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i1$4.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-select-box', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...DATALIST_INPUTS, ...SELECTION_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...SELECTION_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n        <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close ax-cursor-pointer\"\r\n                                    (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template #showPlaceholder>\r\n            <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\"> {{placeholder}}</div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && clearButton &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-prefix *ngIf=\"(isLoading && !this.popover.isOpen);else icon\">\r\n        <ax-loading type=\"spinner\"></ax-loading>\r\n    </ax-prefix>\r\n    <ng-template #icon>\r\n        <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ng-template>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\"\r\n    (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane \" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\" [class.ax-full]=\"searchSettings.enabled || isLazy\"\r\n        [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list\">\r\n            <div *ngIf=\"_isMobile\" class=\"ax-header\">\r\n                <span>{{_popoverTitle}}</span>\r\n                <i class=\"ax-ic {{multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'}}\" (click)=\"close()\"\r\n                    tabindex=\"1\"></i>\r\n            </div>\r\n            <div *ngIf=\"searchSettings.enabled\" class=\"ax-p-2\" [cdkTrapFocus]=\"true\" class=\"ax-header\">\r\n                <ax-text-box #searchBox placeholder=\"{{ 'common.search' | trans }}\" [debounceTime]=\"500\" \r\n                    class=\"ax-w-full ax-sm\" [(value)]=\"searchSettings.expr\" (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n                    <ax-prefix>\r\n                        <ax-icon  class=\"ax-ic ax-ic-magnify\">\r\n                        </ax-icon>\r\n                    </ax-prefix>\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\"\r\n                #listContainer>\r\n                <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                    <ul>\r\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\">\r\n                        </ng-container>\r\n                        <ng-template #tmpTree let-list=\"list\">\r\n                            <ng-container *ngFor=\"let item of list;let i = index;trackBy : _trackByFunction\">\r\n                                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                                    <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                                        [attr.data-id]=\"item[this.valueField]\">\r\n                                        <ng-container\r\n                                            *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                                        </ng-container>\r\n                                    </li>\r\n                                </ng-container>\r\n                                <ng-template #defualtTemplate>\r\n                                    <ng-container *ngIf=\"item.children?.length > 0;else tmpItem\">\r\n                                        <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\r\n                                            <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            <ul *ngIf=\"item.children?.length > 0\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"tmpTree; context:{ list:  item.children }\">\r\n                                                </ng-container>\r\n                                            </ul>\r\n                                        </li>\r\n                                    </ng-container>\r\n                                    <ng-template #tmpItem>\r\n                                        <ng-container *ngIf=\"!multiple;  else multipleTemplate\">\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-container>\r\n                                        <ng-template #multipleTemplate>\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                    *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\"\r\n                                                    [disabled]=\"isItemDisabled(item)\">\r\n                                                <span class=\"ax-ms-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-template>\r\n                                    </ng-template>\r\n                                </ng-template>\r\n                            </ng-container>\r\n                        </ng-template>\r\n                    </ul>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseLoadingTemplate>\r\n                        <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n                            <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-template #tmpEmpty>\r\n                    <ng-container *ngIf=\"!isLoading\">\r\n                        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseEmptyTemplate>\r\n                            <div class=\"ax-list-item\">\r\n                                {{ 'common.no-result-found' | trans }}\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </ng-template>\r\n\r\n            </div>\r\n            <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n            <!-- <div class=\"ax-footer\">footer</div> -->\r\n        </div>\r\n    </div>\r\n</ax-popover>" }]
+            args: [{ selector: 'ax-select-box', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...DATALIST_INPUTS, ...SELECTION_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...SELECTION_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: AXClosbaleComponent, useExisting: AXSelectBoxComponent },
+                        { provide: AXSearchableComponent, useExisting: AXSelectBoxComponent }
+                    ], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n        <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close ax-cursor-pointer\"\r\n                                    (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template #showPlaceholder>\r\n            <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\"> {{placeholder}}</div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && clearButton &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-prefix *ngIf=\"(isLoading && !this.popover.isOpen);else icon\">\r\n        <ax-loading type=\"spinner\"></ax-loading>\r\n    </ax-prefix>\r\n    <ng-template #icon>\r\n        <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ng-template>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"true\"\r\n    (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane \" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\" [class.ax-full]=\"_searchBox ||  isLazy\"\r\n        [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list\" >\r\n            <ax-header *ngIf=\"_isMobile\" >\r\n                <ax-title [text]=\"_popoverTitle\"></ax-title>\r\n                <ax-close-button [icon]=\"multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'\"></ax-close-button>\r\n            </ax-header>\r\n            <div class=\"ax-p-2\" [class.ax-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox!=null\">\r\n                <ng-content select=\"ax-search-box\" ></ng-content>\r\n            </div>\r\n            <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\"\r\n                #listContainer>\r\n                <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                    <ul>\r\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\">\r\n                        </ng-container>\r\n                        <ng-template #tmpTree let-list=\"list\">\r\n                            <ng-container *ngFor=\"let item of list;let i = index;trackBy : _trackByFunction\">\r\n                                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                                    <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                                        [attr.data-id]=\"item[this.valueField]\">\r\n                                        <ng-container\r\n                                            *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                                        </ng-container>\r\n                                    </li>\r\n                                </ng-container>\r\n                                <ng-template #defualtTemplate>\r\n                                    <ng-container *ngIf=\"item.children?.length > 0;else tmpItem\">\r\n                                        <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\r\n                                            <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            <ul *ngIf=\"item.children?.length > 0\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"tmpTree; context:{ list:  item.children }\">\r\n                                                </ng-container>\r\n                                            </ul>\r\n                                        </li>\r\n                                    </ng-container>\r\n                                    <ng-template #tmpItem>\r\n                                        <ng-container *ngIf=\"!multiple;  else multipleTemplate\">\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-container>\r\n                                        <ng-template #multipleTemplate>\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                    *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\"\r\n                                                    [disabled]=\"isItemDisabled(item)\">\r\n                                                <span class=\"ax-ms-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-template>\r\n                                    </ng-template>\r\n                                </ng-template>\r\n                            </ng-container>\r\n                        </ng-template>\r\n                    </ul>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseLoadingTemplate>\r\n                        <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n                            <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-template #tmpEmpty>\r\n                    <ng-container *ngIf=\"!isLoading\">\r\n                        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseEmptyTemplate>\r\n                            <div class=\"ax-list-item\">\r\n                                {{ 'common.no-result-found' | trans }}\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </ng-template>\r\n\r\n            </div>\r\n            <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n            <!-- <div class=\"ax-footer\">footer</div> -->\r\n        </div>\r\n    </div>\r\n</ax-popover>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$4.AXPlatform }]; }, propDecorators: { popover: [{
                 type: ViewChild,
                 args: [AXPopoverComponent, { static: true }]
+            }], _searchBox: [{
+                type: ContentChild,
+                args: [AXSearchBoxComponent, { static: true }]
             }], clearButton: [{
                 type: Input
-            }], searchSettings: [{
-                type: Input
             }], checkbox: [{
                 type: Input
             }], listContainer: [{
                 type: ViewChild,
                 args: ['listContainer', { static: true }]
-            }], _searchBox: [{
-                type: ViewChild,
-                args: ['searchBox']
             }], _contentEmptyTemplate: [{
                 type: ContentChild,
                 args: ['emptyTemplate']
@@ -6963,9 +7121,8 @@ AXSelectBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         FormsModule,
         AXCheckBoxModule,
         AXBadgeModule,
-        AXEditorDecoratorModule,
+        AXDecoratorModule,
         AXTranslationModule,
-        AXIconModule,
         AXPopoverModule,
         AXButtonModule,
         AXLoadingModule,
@@ -6976,9 +7133,8 @@ AXSelectBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versi
             FormsModule,
             AXCheckBoxModule,
             AXBadgeModule,
-            AXEditorDecoratorModule,
+            AXDecoratorModule,
             AXTranslationModule,
-            AXIconModule,
             AXPopoverModule,
             AXButtonModule,
             AXLoadingModule,
@@ -6993,9 +7149,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                         FormsModule,
                         AXCheckBoxModule,
                         AXBadgeModule,
-                        AXEditorDecoratorModule,
+                        AXDecoratorModule,
                         AXTranslationModule,
-                        AXIconModule,
                         AXPopoverModule,
                         AXButtonModule,
                         AXLoadingModule,
@@ -7349,11 +7504,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
 
 const COMPONENT$3 = [AXTabsComponent, AXTabItemComponent, AXTabContentDirective];
-const MODULES$3 = [CommonModule, PortalModule, AXEditorDecoratorModule];
+const MODULES$3 = [CommonModule, PortalModule, AXDecoratorModule];
 class AXTabsModule {
 }
 AXTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXTabsModule, declarations: [AXTabsComponent, AXTabItemComponent, AXTabContentDirective], imports: [CommonModule, PortalModule, AXEditorDecoratorModule], exports: [AXTabsComponent, AXTabItemComponent, AXTabContentDirective] });
+AXTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXTabsModule, declarations: [AXTabsComponent, AXTabItemComponent, AXTabContentDirective], imports: [CommonModule, PortalModule, AXDecoratorModule], exports: [AXTabsComponent, AXTabItemComponent, AXTabContentDirective] });
 AXTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXTabsModule, providers: [], imports: [[...MODULES$3]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXTabsModule, decorators: [{
             type: NgModule,
@@ -7696,13 +7851,13 @@ class AXToastComponent extends AXBaseComponentMixin {
         this._toastWidth = 100;
     }
     onInit() {
-        this._getHostElement().classList.add(`ax-${this.options.type}`);
+        this._getHostElement().classList.add(`ax-${this.options.color}`);
         if (this.options.timeOut) {
             setTimeout(() => {
                 this.close();
             }, this.options.timeOut);
         }
-        switch (this.options.type) {
+        switch (this.options.color) {
             case 'success':
                 this._icon = 'ax-ic ax-ic-check-filled';
                 break;
@@ -7717,25 +7872,20 @@ class AXToastComponent extends AXBaseComponentMixin {
                 break;
         }
     }
-    _handleButtonClick(button) {
-        if (button.onClick) {
-            button.onClick(this);
-        }
-    }
 }
 AXToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXToastComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXToastComponent, selector: "ax-toast", host: { classAttribute: "ax-toast" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-toast-icon-side\">\r\n    <i class=\"ax-toast-icon {{_icon}}\"></i>\r\n</div>\r\n<div class=\"ax-toast-content-side\">\r\n    <div class=\"ax-toast-title\">{{options.title}}</div>\r\n    <div class=\"ax-toast-content\" *ngIf=\"options.content\">{{options.content}}</div>\r\n</div>\r\n<div class=\"ax-toast-dismiss-icon\">\r\n    <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.closeable\" (click)=\"close()\"></i>\r\n</div>\r\n<div class=\"ax-toast-progress ax-{{options.type}}\" [style.animation-duration.ms]=\"options.timeOut\" *ngIf=\"options.timeOut\">\r\n</div>", directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXToastComponent, selector: "ax-toast", providers: [{ provide: AXClosbaleComponent, useExisting: AXToastComponent }], usesInheritance: true, ngImport: i0, template: "<!-- <div class=\"ax-toast-header\">\r\n    <div class=\"ax-toast-title\">\r\n        <i class=\"ax-toast-icon {{_icon}}\"></i>\r\n        <span>{{options.title}}</span>\r\n    </div>\r\n    <i class=\"ax-ic ax-ic-close ax-toast-dismiss-icon\" *ngIf=\"options.closeable\" (click)=\"close()\"></i>\r\n</div>\r\n<div class=\"ax-toast-content\" *ngIf=\"options.content\">{{options.content}}</div> -->\r\n\r\n<!-- <ax-header>\r\n    <ax-prefix>\r\n        <ax-icon *ngIf=\"_icon\" [icon]=\"_icon\"></ax-icon>\r\n        <ax-title [text]=\"options.title\"></ax-title>\r\n    </ax-prefix>\r\n    <ax-close-button *ngIf=\"options.closeable\"></ax-close-button>\r\n</ax-header>\r\n<ax-content *ngIf=\"options.content\">\r\n    {{options.content}}\r\n    <ax-footer *ngIf=\"options?.buttons?.length\">\r\n        <ng-container >\r\n            <ax-button *ngFor=\"let button of options.buttons\" [text]=\"button.text\" [text]=\"button.text\"\r\n                (onClick)=\"button.onClick\" [class]=\"button.cssClass\"></ax-button>\r\n        </ng-container>\r\n    </ax-footer>\r\n</ax-content>\r\n<div class=\"ax-toast-progress ax-{{options.type}}\" [style.animation-duration.ms]=\"options.timeOut\"\r\n    *ngIf=\"options.timeOut\">\r\n</div> -->\r\n<ax-alert [color]=\"options.color\" [look]=\"options.look\" [timeOut]=\"options.timeOut\">\r\n    <ax-header *ngIf=\"options.title\">\r\n        <ax-icon *ngIf=\"_icon\" [icon]=\"_icon\"></ax-icon>\r\n        <ax-title [text]=\"options.title\"></ax-title>\r\n    </ax-header>\r\n    <ax-content *ngIf=\"options.content\">\r\n        <ax-icon *ngIf=\"_icon && !options.title\" [icon]=\"_icon\"></ax-icon>\r\n        {{options.content}}\r\n    </ax-content>\r\n    <ax-footer *ngIf=\"options?.buttons?.length\">\r\n        <ng-container>\r\n            <ax-button *ngFor=\"let button of options.buttons\" [text]=\"button.text\" [text]=\"button.text\"\r\n                (onClick)=\"button.onClick\" [class]=\"button.cssClass\"></ax-button>\r\n        </ng-container>\r\n    </ax-footer>\r\n</ax-alert>", components: [{ type: AXAlertComponent, selector: "ax-alert", inputs: ["color", "look", "timeOut", "visible"] }, { type: AXDecoratorHeaderComponent, selector: "ax-header" }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXDecoratorTitleComponent, selector: "ax-title", inputs: ["text"] }, { type: AXDecoratorContentComponent, selector: "ax-content" }, { type: AXDecoratorFooterComponent, selector: "ax-footer" }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-toast', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-toast' }, template: "<div class=\"ax-toast-icon-side\">\r\n    <i class=\"ax-toast-icon {{_icon}}\"></i>\r\n</div>\r\n<div class=\"ax-toast-content-side\">\r\n    <div class=\"ax-toast-title\">{{options.title}}</div>\r\n    <div class=\"ax-toast-content\" *ngIf=\"options.content\">{{options.content}}</div>\r\n</div>\r\n<div class=\"ax-toast-dismiss-icon\">\r\n    <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.closeable\" (click)=\"close()\"></i>\r\n</div>\r\n<div class=\"ax-toast-progress ax-{{options.type}}\" [style.animation-duration.ms]=\"options.timeOut\" *ngIf=\"options.timeOut\">\r\n</div>" }]
+            args: [{ selector: 'ax-toast', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXClosbaleComponent, useExisting: AXToastComponent }], template: "<!-- <div class=\"ax-toast-header\">\r\n    <div class=\"ax-toast-title\">\r\n        <i class=\"ax-toast-icon {{_icon}}\"></i>\r\n        <span>{{options.title}}</span>\r\n    </div>\r\n    <i class=\"ax-ic ax-ic-close ax-toast-dismiss-icon\" *ngIf=\"options.closeable\" (click)=\"close()\"></i>\r\n</div>\r\n<div class=\"ax-toast-content\" *ngIf=\"options.content\">{{options.content}}</div> -->\r\n\r\n<!-- <ax-header>\r\n    <ax-prefix>\r\n        <ax-icon *ngIf=\"_icon\" [icon]=\"_icon\"></ax-icon>\r\n        <ax-title [text]=\"options.title\"></ax-title>\r\n    </ax-prefix>\r\n    <ax-close-button *ngIf=\"options.closeable\"></ax-close-button>\r\n</ax-header>\r\n<ax-content *ngIf=\"options.content\">\r\n    {{options.content}}\r\n    <ax-footer *ngIf=\"options?.buttons?.length\">\r\n        <ng-container >\r\n            <ax-button *ngFor=\"let button of options.buttons\" [text]=\"button.text\" [text]=\"button.text\"\r\n                (onClick)=\"button.onClick\" [class]=\"button.cssClass\"></ax-button>\r\n        </ng-container>\r\n    </ax-footer>\r\n</ax-content>\r\n<div class=\"ax-toast-progress ax-{{options.type}}\" [style.animation-duration.ms]=\"options.timeOut\"\r\n    *ngIf=\"options.timeOut\">\r\n</div> -->\r\n<ax-alert [color]=\"options.color\" [look]=\"options.look\" [timeOut]=\"options.timeOut\">\r\n    <ax-header *ngIf=\"options.title\">\r\n        <ax-icon *ngIf=\"_icon\" [icon]=\"_icon\"></ax-icon>\r\n        <ax-title [text]=\"options.title\"></ax-title>\r\n    </ax-header>\r\n    <ax-content *ngIf=\"options.content\">\r\n        <ax-icon *ngIf=\"_icon && !options.title\" [icon]=\"_icon\"></ax-icon>\r\n        {{options.content}}\r\n    </ax-content>\r\n    <ax-footer *ngIf=\"options?.buttons?.length\">\r\n        <ng-container>\r\n            <ax-button *ngFor=\"let button of options.buttons\" [text]=\"button.text\" [text]=\"button.text\"\r\n                (onClick)=\"button.onClick\" [class]=\"button.cssClass\"></ax-button>\r\n        </ng-container>\r\n    </ax-footer>\r\n</ax-alert>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
 const COMPONENT$1 = [AXToastComponent];
-const MODULES$1 = [CommonModule, AXButtonModule];
+const MODULES$1 = [CommonModule, AXButtonModule, AXDecoratorModule, AXAlertModule];
 class AXToastModule {
 }
 AXToastModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXToastModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXToastModule, declarations: [AXToastComponent], imports: [CommonModule, AXButtonModule], exports: [AXToastComponent] });
+AXToastModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXToastModule, declarations: [AXToastComponent], imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXAlertModule], exports: [AXToastComponent] });
 AXToastModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXToastModule, providers: [], imports: [[...MODULES$1]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXToastModule, decorators: [{
             type: NgModule,
@@ -7753,32 +7903,60 @@ class AXToastService {
         this.parentInjector = parentInjector;
         this._activeList = [];
     }
+    primary(content) {
+        this.show({
+            timeOut: 2500,
+            color: 'primary',
+            content: content
+        });
+    }
+    secondary(content) {
+        this.show({
+            timeOut: 2500,
+            color: 'secondary',
+            content: content
+        });
+    }
     info(content) {
         this.show({
             timeOut: 2500,
-            type: 'info',
-            title: content
+            color: 'info',
+            content: content
         });
     }
     success(content) {
         this.show({
             timeOut: 2500,
-            type: 'success',
-            title: content
+            color: 'success',
+            content: content
         });
     }
     warning(content) {
         this.show({
             timeOut: 2500,
-            type: 'warning',
-            title: content
+            color: 'warning',
+            content: content
         });
     }
     danger(content) {
         this.show({
             timeOut: 2500,
-            type: 'danger',
-            title: content
+            color: 'danger',
+            content: content
+        });
+    }
+    light(content) {
+        this.show({
+            timeOut: 2500,
+            color: 'light',
+            content: content
+        });
+    }
+    dark(content) {
+        this.show({
+            timeOut: 2500,
+            color: 'dark',
+            content: content
         });
     }
     show(options) {
@@ -8252,5 +8430,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXActionSheetComponent, AXActionSheetItemComponent, AXActionSheetModule, AXAlertButtonComponent, AXAlertComponent, AXAlertContentComponent, AXAlertFooterComponent, AXAlertModule, AXAlertSuffixComponent, AXAlertTitleComponent, AXAvatarComponent, AXAvatarGroup, AXAvatarMixin, AXAvatarModule, AXBadgeComponent, AXBadgeModule, AXBaseAlertMixin, AXBaseBadgeMixin, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseDatePickerMixin, AXBaseDropdownMixin, AXBaseItemButtonMixin, AXBaseMenuMixin, AXBasePageComponent, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTabItemMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXBreadCrumbsComponent, AXBreadCrumbsItemComponent, AXBreadcrumbsModule, AXButtonClickEvent, AXButtonComponent, AXButtonGroupComponent, AXButtonItemComponent, AXButtonModule, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCheckBoxComponent, AXCheckBoxModule, AXClickEvent, AXCollapseComponent, AXCollapseGroupComponent, AXCollapseModule, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatePickerComponent, AXDatepickerModule, AXDecoratorAddOnComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent, AXDrawerModule, AXDropdownModule, AXDropdownPanelComponent, AXEditorDecoratorModule, AXEvent, AXFocusEvent, AXFormComponent, AXFormFieldComponent, AXFormHintComponent, AXFormModule, AXHtmlEvent, AXIconComponent, AXIconModule, AXInfiniteScrollerDirective, AXInputMaskComponent, AXInputMaskModule, AXInteractiveComponenetMixin, AXItemClickEvent, AXLabelComponent, AXLabelModule, AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent, AXMenuComponent, AXMenuModule, AXNumberBoxComponent, AXNumberBoxModule, AXOverlayService, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageFooterComponent, AXPageHeaderComponent, AXPageModule, AXPageResult, AXPasswordBoxComponent, AXPasswordBoxModule, AXPickerComponent, AXPickerModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXProgressBarComponent, AXProgressBarModule, AXRadioComponent, AXRadioModule, AXRangeChangedEvent, AXRangeSliderComponent, AXRangeSliderModule, AXRatingComponent, AXRatingModule, AXResponsiveDirective, AXResultComponent, AXResultModule, AXSelectBoxComponent, AXSelectBoxModule, AXSelectionListComponent, AXSelectionListModule, AXSelectionValueChangedEvent, AXSizableComponentMixin, AXSwitchComponent, AXSwitchModule, AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule, AXTextBoxComponent, AXTextBoxModule, AXTextareaComponent, AXTextareaModule, AXTimeBoxComponent, AXTimeBoxModule, AXToastComponent, AXToastModule, AXToastService, AXTooltipComponent, AXTooltipDirective, AXTooltipModule, AXTreeViewComponent, AXTreeViewModule, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueChangedEvent, AX_DIRECTIONS, AX_LOCATIONS, AX_STYLE_TYPES, BASE_INPUTS, BASE_OUTPUT, TAB_META_KEY, _BaseComponenetMixin };
+export { AXActionSheetComponent, AXActionSheetItemComponent, AXActionSheetModule, AXAlertButtonComponent, AXAlertComponent, AXAlertModule, AXAvatarComponent, AXAvatarGroup, AXAvatarMixin, AXAvatarModule, AXBadgeComponent, AXBadgeModule, AXBaseAlertMixin, AXBaseBadgeMixin, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseDatePickerMixin, AXBaseDropdownMixin, AXBaseItemButtonMixin, AXBaseMenuMixin, AXBasePageComponent, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTabItemMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXBreadCrumbsComponent, AXBreadCrumbsItemComponent, AXBreadcrumbsModule, AXButtonClickEvent, AXButtonComponent, AXButtonGroupComponent, AXButtonItemComponent, AXButtonModule, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCheckBoxComponent, AXCheckBoxModule, AXClickEvent, AXClosbaleComponent, AXCollapseComponent, AXCollapseGroupComponent, AXCollapseModule, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatePickerComponent, AXDatepickerModule, AXDecoratorAddOnComponent, AXDecoratorCloseButtonComponent, AXDecoratorContentComponent, AXDecoratorFooterComponent, AXDecoratorHeaderComponent, AXDecoratorIconComponent, AXDecoratorModule, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorTitleComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerModule, AXDropdownModule, AXDropdownPanelComponent, AXEvent, AXFocusEvent, AXFormComponent, AXFormFieldComponent, AXFormHintComponent, AXFormModule, AXHtmlEvent, AXInfiniteScrollerDirective, AXInputMaskComponent, AXInputMaskModule, AXInteractiveComponenetMixin, AXItemClickEvent, AXLabelComponent, AXLabelModule, AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent, AXMenuComponent, AXMenuModule, AXNumberBoxComponent, AXNumberBoxModule, AXOverlayService, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageModule, AXPageResult, AXPasswordBoxComponent, AXPasswordBoxModule, AXPickerComponent, AXPickerModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXProgressBarComponent, AXProgressBarModule, AXRadioComponent, AXRadioModule, AXRangeChangedEvent, AXRangeSliderComponent, AXRangeSliderModule, AXRatingComponent, AXRatingModule, AXResponsiveDirective, AXResultComponent, AXResultModule, AXSearchBoxComponent, AXSearchBoxModule, AXSearchableComponent, AXSelectBoxComponent, AXSelectBoxModule, AXSelectionListComponent, AXSelectionListModule, AXSelectionValueChangedEvent, AXSizableComponentMixin, AXSwitchComponent, AXSwitchModule, AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule, AXTextBoxComponent, AXTextBoxModule, AXTextareaComponent, AXTextareaModule, AXTimeBoxComponent, AXTimeBoxModule, AXToastComponent, AXToastModule, AXToastService, AXTooltipComponent, AXTooltipDirective, AXTooltipModule, AXTreeViewComponent, AXTreeViewModule, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueChangedEvent, AX_DIRECTIONS, AX_LOCATIONS, AX_STYLE_TYPES, BASE_INPUTS, BASE_OUTPUT, TAB_META_KEY, _BaseComponenetMixin };
 //# sourceMappingURL=acorex-components.mjs.map