@acorex/components 5.0.28 → 5.0.35

package/fesm2020/acorex-components.mjs

@@ -1303,12 +1303,12 @@ class AXIconComponent extends AXSizableComponentMixin {
     }
 }
 AXIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", 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.1.1", type: AXIconComponent, selector: "ax-icon", inputs: { icon: "icon" }, host: { properties: { "class": "this.__iconClass" } }, usesInheritance: true, ngImport: i0, template: '<ng-content select="ax-content"></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXIconComponent, selector: "ax-icon", inputs: { icon: "icon" }, host: { properties: { "class": "this.__iconClass" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-icon',
-                    template: '<ng-content select="ax-content"></ng-content>',
+                    template: '<ng-content></ng-content>',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                 }]
@@ -2675,12 +2675,12 @@ class AXFormFieldComponent extends AXBaseComponentMixin {
     }
 }
 AXFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXFormFieldComponent, selector: "ax-form-field", usesInheritance: true, ngImport: i0, template: '<div class="ax-form-field"><ng-content></ng-content></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXFormFieldComponent, selector: "ax-form-field", usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-form-field',
-                    template: '<div class="ax-form-field"><ng-content></ng-content></div>',
+                    template: '<ng-content></ng-content>',
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
@@ -3075,17 +3075,28 @@ class AXPopoverComponent extends AXBaseComponent {
         if (!targetRef)
             return;
         if (!this._overlayRef) {
-            const positionStrategy = this._overlay.position()
-                .flexibleConnectedTo(targetRef)
-                .withPositions(Array.isArray(this.position) ? this.position : [this.position])
-                .withPush(false);
+            let positionStrategy;
+            let scrollStrategy;
+            debugger;
+            if (this._platform.is('Mobile')) {
+                positionStrategy = this._overlay.position().global().centerHorizontally().bottom();
+                scrollStrategy = this._overlay.scrollStrategies.noop();
+            }
+            else {
+                positionStrategy = this._overlay.position()
+                    .flexibleConnectedTo(targetRef)
+                    .withPositions(Array.isArray(this.position) ? this.position : [this.position])
+                    .withPush(false);
+                scrollStrategy = this._overlay.scrollStrategies.close();
+            }
             this._overlayRef = this._overlay.create({
                 positionStrategy,
-                scrollStrategy: this._overlay.scrollStrategies.close(),
+                scrollStrategy,
                 panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
-                hasBackdrop: this.hasBackdrop,
+                hasBackdrop: true,
                 backdropClass: [this.backdropClass || 'cdk-overlay-transparent-backdrop']
             });
+            this._updateOverlay();
             if (this.closeTrigger == 'clickout') {
                 this._addSub(this._overlayRef._outsidePointerEvents.subscribe(c => {
                     const target = c.target;
@@ -3095,15 +3106,15 @@ class AXPopoverComponent extends AXBaseComponent {
                     }
                 }));
             }
-            this._addSub(this._overlayRef.attachments().subscribe(() => {
-                if (!this._isScrollAttached) {
-                    this._addSub(this._platform.scroll.subscribe(c => {
-                        // if (!(c.nativeEvent.target as HTMLElement).closest('.ax-overlay-pane'))
-                        this.close();
-                    }));
-                    this._isScrollAttached = true;
-                }
-            }));
+            // this._addSub(this._overlayRef.attachments().subscribe(() => {
+            //   if (!this._isScrollAttached) {
+            //     this._addSub(this._platform.scroll.subscribe(c => {
+            //       // if (!(c.nativeEvent.target as HTMLElement).closest('.ax-overlay-pane'))
+            //       this.close();
+            //     }));
+            //     this._isScrollAttached = true;
+            //   }
+            // }));
         }
         if (!this._templatePortal) {
             this._templatePortal = new TemplatePortal(this._baseTemplate, this._viewContainerRef);
@@ -3115,6 +3126,24 @@ class AXPopoverComponent extends AXBaseComponent {
     _addSub(sub) {
         this._subs.push(sub);
     }
+    _updateOverlay() {
+        const targetRef = this._target;
+        let positionStrategy;
+        let scrollStrategy;
+        if (this._platform.is('Mobile')) {
+            positionStrategy = this._overlay.position().global().centerHorizontally().bottom();
+            scrollStrategy = this._overlay.scrollStrategies.noop();
+        }
+        else {
+            positionStrategy = this._overlay.position()
+                .flexibleConnectedTo(targetRef)
+                .withPositions(Array.isArray(this.position) ? this.position : [this.position])
+                .withPush(false);
+            scrollStrategy = this._overlay.scrollStrategies.close();
+        }
+        this._overlayRef.updatePositionStrategy(positionStrategy);
+        this._overlayRef.updateScrollStrategy(scrollStrategy);
+    }
 }
 AXPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$2.Overlay }, { token: i2.AXPlatform }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
 AXPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXPopoverComponent, selector: "ax-popover", inputs: { target: "target", position: "position", openTrigger: "openTrigger", closeTrigger: "closeTrigger", hasBackdrop: "hasBackdrop", backdropClass: "backdropClass" }, outputs: { onOpened: "onOpened", onClosed: "onClosed" }, host: { listeners: { "document:keydown": "_handleKeydownHandler($event)" } }, viewQueries: [{ propertyName: "_baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #baseTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -3268,10 +3297,10 @@ class AXDatePickerComponent extends AXBaseDatePickerMixin {
     }
 }
 AXDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", format: "format" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange", formatChange: "formatChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [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\"\r\n    (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" >\r\n    <div class=\"ax-overlay-pane\" [style.min-width.px]=\"dropdownWidth\">\r\n        <ax-calendar \r\n            [disabled]=\"disabled\" \r\n            [readonly]=\"readonly\" \r\n            [(value)]=\"value\"\r\n            [min]=\"min\"\r\n            [min]=\"max\"\r\n            [disabledDates]=\"disabledDates\"\r\n            [holidayDates]=\"holidayDates\"\r\n            [depth]=\"depth\"\r\n            >\r\n\r\n        </ax-calendar>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"], outputs: ["onOpened", "onClosed"] }, { type: AXCalendarComponent, selector: "ax-calendar", inputs: ["readonly", "allowNull", "value", "debounceTime", "name", "checked", "disabled", "tabIndex", "depth", "activeView", "min", "max", "disabledDates", "holidayDates"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange"] }], directives: [{ type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", format: "format" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange", formatChange: "formatChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [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\"\r\n    (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" >\r\n    <div class=\"ax-overlay-pane\" [style.min-width.px]=\"dropdownWidth\">\r\n        <ax-calendar \r\n            [disabled]=\"disabled\" \r\n            [readonly]=\"readonly\" \r\n            [(value)]=\"value\"\r\n            [min]=\"min\"\r\n            [min]=\"max\"\r\n            [disabledDates]=\"disabledDates\"\r\n            [holidayDates]=\"holidayDates\"\r\n            [depth]=\"depth\"\r\n            >\r\n        </ax-calendar>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"], outputs: ["onOpened", "onClosed"] }, { type: AXCalendarComponent, selector: "ax-calendar", inputs: ["readonly", "allowNull", "value", "debounceTime", "name", "checked", "disabled", "tabIndex", "depth", "activeView", "min", "max", "disabledDates", "holidayDates"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange"] }], directives: [{ type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-date-picker', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...CALENDAR_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...CALENDAR_OUTPUTS], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [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\"\r\n    (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" >\r\n    <div class=\"ax-overlay-pane\" [style.min-width.px]=\"dropdownWidth\">\r\n        <ax-calendar \r\n            [disabled]=\"disabled\" \r\n            [readonly]=\"readonly\" \r\n            [(value)]=\"value\"\r\n            [min]=\"min\"\r\n            [min]=\"max\"\r\n            [disabledDates]=\"disabledDates\"\r\n            [holidayDates]=\"holidayDates\"\r\n            [depth]=\"depth\"\r\n            >\r\n\r\n        </ax-calendar>\r\n    </div>\r\n</ax-popover>" }]
+            args: [{ selector: 'ax-date-picker', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...CALENDAR_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...CALENDAR_OUTPUTS], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [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\"\r\n    (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" >\r\n    <div class=\"ax-overlay-pane\" [style.min-width.px]=\"dropdownWidth\">\r\n        <ax-calendar \r\n            [disabled]=\"disabled\" \r\n            [readonly]=\"readonly\" \r\n            [(value)]=\"value\"\r\n            [min]=\"min\"\r\n            [min]=\"max\"\r\n            [disabledDates]=\"disabledDates\"\r\n            [holidayDates]=\"holidayDates\"\r\n            [depth]=\"depth\"\r\n            >\r\n        </ax-calendar>\r\n    </div>\r\n</ax-popover>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { popover: [{
                 type: ViewChild,
                 args: [AXPopoverComponent]
@@ -4968,19 +4997,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
         }] });
 
 class AXPopupComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr, _zone, _viewContainerRef, loadingService) {
+    constructor(elementRef, cdr, _zone, _viewContainerRef, loadingService, _platform) {
         super(elementRef, cdr);
         this._zone = _zone;
         this._viewContainerRef = _viewContainerRef;
         this.loadingService = loadingService;
+        this._platform = _platform;
         this.isLoading = true;
         this.onClosed = new EventEmitter();
         this.size = 'sm';
+        this.draggable = true;
         this.data = {};
         this.showCloseButton = true;
         this.showHeader = true;
     }
     onViewInit() {
+        debugger;
+        if (this._platform.is('Mobile')) {
+            this.draggable = false;
+        }
         this._loadingId = this.loadingService.show(this._getHostElement().querySelector('.ax-popup-body-container'));
         //
         if (typeof this.content === 'string') {
@@ -5047,12 +5082,12 @@ class AXPopupComponent extends AXBaseComponentMixin {
     }
     onFullScreen() { }
 }
-AXPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: AXLoadingService }], target: i0.ɵɵFactoryTarget.Component });
-AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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>\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag>\r\n        <ng-container *ngIf=\"showHeader\">\r\n            <header cdkDragHandle class=\"ax-cursor-move\">\r\n                <div>\r\n                    <div class=\"ax-text-lg ax-font-medium\">\r\n                        <span>\r\n                            {{title}}\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"showCloseButton\">\r\n                    <i class=\"ax-ic ax-ic-close ax-text-gray ax-cursor-pointer\" (click)=\"_handleCloseClick()\"\r\n                        tabindex=\"1\"></i>\r\n                </div>\r\n            </header>\r\n        </ng-container>\r\n        <main>\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </main>\r\n    </div>\r\n</div>", directives: [{ type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: AXLoadingService }, { token: i2.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
+AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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>\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <ng-container *ngIf=\"showHeader\">\r\n            <header cdkDragHandle class=\"ax-cursor-move\">\r\n                <div>\r\n                    <div class=\"ax-text-lg ax-font-medium\">\r\n                        <span>\r\n                            {{title}}\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"showCloseButton\">\r\n                    <i class=\"ax-ic ax-ic-close ax-text-gray ax-cursor-pointer\" (click)=\"_handleCloseClick()\"\r\n                        tabindex=\"1\"></i>\r\n                </div>\r\n            </header>\r\n        </ng-container>\r\n        <main>\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </main>\r\n    </div>\r\n</div>", directives: [{ type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$4.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.1.1", 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>\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag>\r\n        <ng-container *ngIf=\"showHeader\">\r\n            <header cdkDragHandle class=\"ax-cursor-move\">\r\n                <div>\r\n                    <div class=\"ax-text-lg ax-font-medium\">\r\n                        <span>\r\n                            {{title}}\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"showCloseButton\">\r\n                    <i class=\"ax-ic ax-ic-close ax-text-gray ax-cursor-pointer\" (click)=\"_handleCloseClick()\"\r\n                        tabindex=\"1\"></i>\r\n                </div>\r\n            </header>\r\n        </ng-container>\r\n        <main>\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </main>\r\n    </div>\r\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: AXLoadingService }]; }, propDecorators: { onKeydownHandler: [{
+            args: [{ selector: 'ax-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <ng-container *ngIf=\"showHeader\">\r\n            <header cdkDragHandle class=\"ax-cursor-move\">\r\n                <div>\r\n                    <div class=\"ax-text-lg ax-font-medium\">\r\n                        <span>\r\n                            {{title}}\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"showCloseButton\">\r\n                    <i class=\"ax-ic ax-ic-close ax-text-gray ax-cursor-pointer\" (click)=\"_handleCloseClick()\"\r\n                        tabindex=\"1\"></i>\r\n                </div>\r\n            </header>\r\n        </ng-container>\r\n        <main>\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </main>\r\n    </div>\r\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: AXLoadingService }, { type: i2.AXPlatform }]; }, propDecorators: { onKeydownHandler: [{
                 type: HostListener,
                 args: ['keydown.escape', ['$event']]
             }] } });
@@ -5078,7 +5113,8 @@ class AXPopupService {
             showCloseButton: true,
             showHeader: true,
             size: 'md',
-            maximizable: false
+            maximizable: false,
+            draggable: true
         };
         if (typeof arg2 === 'string') {
             options.title = arg2;
@@ -5234,26 +5270,22 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         super(elementRef, cdr);
         this.zone = zone;
         this._currentfocusedIndex = -1;
+        this._target = this._getHostElement();
     }
-    open() {
-        this.dropdown.open();
-    }
-    close() {
-        this.dropdown.close();
-    }
-    toggle() {
-        this.dropdown.toggle();
+    _handleArrowClickEvent(e) {
+        this.toggle();
     }
     onViewInit() {
-        this.dropdown.onOpened.subscribe(() => {
+        debugger;
+        super.onViewInit();
+        this.dropdownWidth = this._target._getHostElement().offsetWidth;
+        this.onOpened.subscribe(() => {
             this._focusSelectedItem();
         });
     }
-    get isOpen() {
-        return this.dropdown.isOpen;
-    }
     _handleOnItemClick(e, item) {
-        this.close();
+        if (!this.multiple)
+            this.close();
         this.toggleSelect(item);
     }
     _handleListScroll(e) {
@@ -5397,13 +5429,13 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
     }
 }
 AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", fitParent: "fitParent", value: "value", items: "items", multiple: "multiple", allowNull: "allowNull", valueField: "valueField", textField: "textField" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { listeners: { "document:keydown": "_handleKeydown($event)" }, classAttribute: "ax-select-box" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: AXDropdownComponent, descendants: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down (onOpened)=\"_emitOnOpenedEvent()\" (onClosed)=\"_emitOnClosedEvent()\">\r\n    <ng-container input>\r\n        <ng-content select=\"ax-prefix\">\r\n        </ng-content>\r\n        <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-1\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close\" (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n            <!-- <div class=\"ax-selectbox-input\">\r\n                <input type=\"text\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleKeydown($event)\">\r\n            </div> -->\r\n            <ng-content select=\"ax-suffix\">\r\n            </ng-content>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"ax-list ax-list-container\" panel>\r\n        <div class=\"ax-list-items-container ax-vertical ax-default\" (scroll)=\"_handleListScroll($event)\" #listContainer>\r\n            <ng-container *ngFor=\"let item of displayItems;let i = index;trackBy : _trackByFunction\">\r\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                    <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                        </ng-container>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-template #defualtTemplate>\r\n                    <ng-container *ngIf=\"!multiple; then singleTemplate; else multipleTemplate\"></ng-container>\r\n                    <ng-template #singleTemplate>\r\n                        <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\" [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n                            {{ _getItemDisplayTextTemplte(item) }}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #multipleTemplate>\r\n                        <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\" [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n                            <ax-check-box [value]=\"isItemSelected(item)\">\r\n                            </ax-check-box>\r\n                            {{ _getItemDisplayTextTemplte(item) }}\r\n\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n                <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                    <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template #elseTemplate>\r\n                    Empty!\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"isLoading\">\r\n                <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                    <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template #elseLoadingTemplate>\r\n                    <div class=\"ax-list-loading-container\">\r\n                        <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n                    </div>\r\n                </ng-template>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "disabled", "tabIndex"], outputs: ["onOpened", "onClosed", "onBlur", "onFocus"] }, { type: AXBadgeComponent, selector: "ax-badge", inputs: ["text", "color"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", items: "items", multiple: "multiple", valueField: "valueField", textField: "textField" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange" }, host: { listeners: { "document:keydown": "_handleKeydown($event)" }, classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n        <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n        <ng-template #singleSelectedTemplate>\r\n            <ng-container *ngFor=\"let item of selectedItems\">\r\n                <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template #multipleSelectedTemplate>\r\n            <div class=\"ax-flex ax-mx-2\">\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                        <ax-suffix>\r\n                            <ax-icon icon=\"ax-ic ax-ic-close\" (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                        </ax-suffix>\r\n                    </ax-badge>\r\n                </ng-container>\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\"  color=\"light\" look=\"blank\"\r\n    (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" >\r\n    <div class=\"ax-overlay-pane\" [style.min-width.px]=\"dropdownWidth\">\r\n        <div class=\"ax-list ax-list-container\" panel>\r\n            <div class=\"ax-list-items-container ax-vertical ax-default\" (scroll)=\"_handleListScroll($event)\" #listContainer>\r\n                <ng-container *ngFor=\"let item of displayItems;let i = index;trackBy : _trackByFunction\">\r\n                    <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                        <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                            </ng-container>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-template #defualtTemplate>\r\n                        <ng-container *ngIf=\"!multiple; then singleTemplate; else multipleTemplate\"></ng-container>\r\n                        <ng-template #singleTemplate>\r\n                            <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\" [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n                                {{ _getItemDisplayTextTemplte(item) }}\r\n                            </div>\r\n                        </ng-template>\r\n                        <ng-template #multipleTemplate>\r\n                            <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\" [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n                                <ax-check-box [value]=\"isItemSelected(item)\">\r\n                                </ax-check-box>\r\n                                {{ _getItemDisplayTextTemplte(item) }}\r\n    \r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n                    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseTemplate>\r\n                        Empty!\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseLoadingTemplate>\r\n                        <div class=\"ax-list-loading-container\">\r\n                            <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXBadgeComponent, selector: "ax-badge", inputs: ["text", "color"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"], outputs: ["onOpened", "onClosed"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-select-box', inputs: ['disabled', 'readonly', 'tabIndex', 'size', 'fitParent', 'value', 'items', 'multiple', 'allowNull', 'valueField', 'textField'], outputs: ['onOpened', 'onClosed', 'valueChange', 'onValueChanged', 'onBlur', 'onFocus'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { 'class': 'ax-select-box' }, template: "<ax-drop-down (onOpened)=\"_emitOnOpenedEvent()\" (onClosed)=\"_emitOnClosedEvent()\">\r\n    <ng-container input>\r\n        <ng-content select=\"ax-prefix\">\r\n        </ng-content>\r\n        <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-1\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close\" (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n            <!-- <div class=\"ax-selectbox-input\">\r\n                <input type=\"text\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleKeydown($event)\">\r\n            </div> -->\r\n            <ng-content select=\"ax-suffix\">\r\n            </ng-content>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"ax-list ax-list-container\" panel>\r\n        <div class=\"ax-list-items-container ax-vertical ax-default\" (scroll)=\"_handleListScroll($event)\" #listContainer>\r\n            <ng-container *ngFor=\"let item of displayItems;let i = index;trackBy : _trackByFunction\">\r\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                    <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                        </ng-container>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-template #defualtTemplate>\r\n                    <ng-container *ngIf=\"!multiple; then singleTemplate; else multipleTemplate\"></ng-container>\r\n                    <ng-template #singleTemplate>\r\n                        <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\" [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n                            {{ _getItemDisplayTextTemplte(item) }}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #multipleTemplate>\r\n                        <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\" [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n                            <ax-check-box [value]=\"isItemSelected(item)\">\r\n                            </ax-check-box>\r\n                            {{ _getItemDisplayTextTemplte(item) }}\r\n\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n                <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                    <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template #elseTemplate>\r\n                    Empty!\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"isLoading\">\r\n                <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                    <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template #elseLoadingTemplate>\r\n                    <div class=\"ax-list-loading-container\">\r\n                        <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n                    </div>\r\n                </ng-template>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</ax-drop-down>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { dropdown: [{
+            args: [{ selector: 'ax-select-box', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...CALENDAR_INPUTS, 'items', 'multiple', 'allowNull', 'valueField', 'textField'], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...CALENDAR_OUTPUTS], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n        <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n        <ng-template #singleSelectedTemplate>\r\n            <ng-container *ngFor=\"let item of selectedItems\">\r\n                <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template #multipleSelectedTemplate>\r\n            <div class=\"ax-flex ax-mx-2\">\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                        <ax-suffix>\r\n                            <ax-icon icon=\"ax-ic ax-ic-close\" (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                        </ax-suffix>\r\n                    </ax-badge>\r\n                </ng-container>\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\"  color=\"light\" look=\"blank\"\r\n    (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" >\r\n    <div class=\"ax-overlay-pane\" [style.min-width.px]=\"dropdownWidth\">\r\n        <div class=\"ax-list ax-list-container\" panel>\r\n            <div class=\"ax-list-items-container ax-vertical ax-default\" (scroll)=\"_handleListScroll($event)\" #listContainer>\r\n                <ng-container *ngFor=\"let item of displayItems;let i = index;trackBy : _trackByFunction\">\r\n                    <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                        <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                            </ng-container>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-template #defualtTemplate>\r\n                        <ng-container *ngIf=\"!multiple; then singleTemplate; else multipleTemplate\"></ng-container>\r\n                        <ng-template #singleTemplate>\r\n                            <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\" [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n                                {{ _getItemDisplayTextTemplte(item) }}\r\n                            </div>\r\n                        </ng-template>\r\n                        <ng-template #multipleTemplate>\r\n                            <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\" [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n                                <ax-check-box [value]=\"isItemSelected(item)\">\r\n                                </ax-check-box>\r\n                                {{ _getItemDisplayTextTemplte(item) }}\r\n    \r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n                    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseTemplate>\r\n                        Empty!\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseLoadingTemplate>\r\n                        <div class=\"ax-list-loading-container\">\r\n                            <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ax-popover>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { popover: [{
                 type: ViewChild,
-                args: [AXDropdownComponent]
+                args: [AXPopoverComponent]
             }], listContainer: [{
                 type: ViewChild,
                 args: ['listContainer', { static: true }]
@@ -5415,12 +5447,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 class AXSelectBoxModule {
 }
 AXSelectBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSelectBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [CommonModule, AXDropdownModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXIconModule], exports: [AXSelectBoxComponent] });
-AXSelectBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxModule, providers: [], imports: [[CommonModule, AXDropdownModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXIconModule]] });
+AXSelectBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [CommonModule, AXDropdownModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXIconModule, AXPopoverModule, AXButtonModule], exports: [AXSelectBoxComponent] });
+AXSelectBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxModule, providers: [], imports: [[CommonModule, AXDropdownModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXIconModule, AXPopoverModule, AXButtonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, AXDropdownModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXIconModule],
+                    imports: [CommonModule, AXDropdownModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXIconModule, AXPopoverModule, AXButtonModule],
                     exports: [AXSelectBoxComponent],
                     declarations: [AXSelectBoxComponent],
                     providers: [],
@@ -5517,13 +5549,19 @@ class AXSwitchComponent extends AXBaseValueComponentMixin {
             e.stopPropagation();
         }
     }
+    get __hostClass() {
+        return this._classes;
+    }
 }
 AXSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSwitchComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXSwitchComponent, selector: "ax-switch", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", cssClass: "cssClass", cssStyle: "cssStyle", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, usesInheritance: true, ngImport: i0, template: "<label class=\"ax-switch {{cssClass}} ax-{{size}}\" [class.ax-state-disabled]=\"disabled\"\r\n    [class.ax-state-readonly]=\"readonly\" [attr.style]=\"cssStyle\" (click)=\"handleOnClickEvent($event)\">\r\n    <input type=\"checkbox\" [(ngModel)]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n        (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    <span class=\"ax-switch-slider\"></span>\r\n</label>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", directives: [{ type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXSwitchComponent, selector: "ax-switch", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", cssClass: "cssClass", cssStyle: "cssStyle", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<!-- <label class=\"ax-switch {{cssClass}} ax-{{size}}\" [class.ax-state-disabled]=\"disabled\"\r\n    [class.ax-state-readonly]=\"readonly\" [attr.style]=\"cssStyle\" (click)=\"handleOnClickEvent($event)\">\r\n    <input type=\"checkbox\" [(ngModel)]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n        (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    <span class=\"ax-switch-slider\"></span>\r\n</label>\r\n\r\n -->\r\n\r\n<!-- <label for=\"toggle-example\" class=\"ax-flex ax-items-center ax-cursor-pointer ax-relative ax-mb-4\">\r\n    <input type=\"checkbox\" id=\"toggle-example\" class=\"ax-sr-only\">\r\n    <div class=\"ax-switch ax-bg-gray-200 ax-border-2 ax-border-gray-200 ax-h-6 ax-rounded-full\"></div>\r\n    <span class=\"ax-ml-3 ax-text-gray-900 ax-text-sm ax-font-medium\">Toggle me</span>\r\n  </label> -->\r\n\r\n<label class=\"ax-switch\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\r\n    (click)=\"handleOnClickEvent($event)\">\r\n    <input type=\"checkbox\" [(ngModel)]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n        (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    <span class=\"ax-switch-slider\"></span>\r\n</label>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", directives: [{ type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-switch', inputs: ['disabled', 'readonly', 'tabIndex', 'size', 'cssClass', 'cssStyle', ...VALUE_INPUTS], outputs: ['onBlur', 'onFocus', ...VALUE_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"ax-switch {{cssClass}} ax-{{size}}\" [class.ax-state-disabled]=\"disabled\"\r\n    [class.ax-state-readonly]=\"readonly\" [attr.style]=\"cssStyle\" (click)=\"handleOnClickEvent($event)\">\r\n    <input type=\"checkbox\" [(ngModel)]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n        (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    <span class=\"ax-switch-slider\"></span>\r\n</label>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+            args: [{ selector: 'ax-switch', inputs: ['disabled', 'readonly', 'tabIndex', 'size', 'cssClass', 'cssStyle', ...VALUE_INPUTS], outputs: ['onBlur', 'onFocus', ...VALUE_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <label class=\"ax-switch {{cssClass}} ax-{{size}}\" [class.ax-state-disabled]=\"disabled\"\r\n    [class.ax-state-readonly]=\"readonly\" [attr.style]=\"cssStyle\" (click)=\"handleOnClickEvent($event)\">\r\n    <input type=\"checkbox\" [(ngModel)]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n        (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    <span class=\"ax-switch-slider\"></span>\r\n</label>\r\n\r\n -->\r\n\r\n<!-- <label for=\"toggle-example\" class=\"ax-flex ax-items-center ax-cursor-pointer ax-relative ax-mb-4\">\r\n    <input type=\"checkbox\" id=\"toggle-example\" class=\"ax-sr-only\">\r\n    <div class=\"ax-switch ax-bg-gray-200 ax-border-2 ax-border-gray-200 ax-h-6 ax-rounded-full\"></div>\r\n    <span class=\"ax-ml-3 ax-text-gray-900 ax-text-sm ax-font-medium\">Toggle me</span>\r\n  </label> -->\r\n\r\n<label class=\"ax-switch\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\r\n    (click)=\"handleOnClickEvent($event)\">\r\n    <input type=\"checkbox\" [(ngModel)]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n        (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    <span class=\"ax-switch-slider\"></span>\r\n</label>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 class AXSwitchModule {
 }