@acorex/components 5.0.54 → 5.0.55

package/fesm2020/acorex-components.mjs

@@ -4290,20 +4290,41 @@ class AXPageComponent extends AXBaseComponentMixin {
     constructor(elementRef, cdr, _loadingService) {
         super(elementRef, cdr);
         this._loadingService = _loadingService;
+        // private _isLoading: boolean = false;
+        // public get isLoading(): boolean {
+        //     return this._isLoading;
+        // }
+        // public set isLoading(v: boolean) {
+        //     this._isLoading = v;
+        //     if (this._loadingId && !v) {
+        //         this._loadingService.hide(this._loadingId);
+        //         this._loadingId = null;
+        //     }
+        //     if (v) {
+        //         this._loadingId = this._loadingService.show(this._getHostElement());
+        //     }
+        // }
+        this.isLoadingChange = new EventEmitter();
         this._isLoading = false;
     }
     get isLoading() {
         return this._isLoading;
     }
     set isLoading(v) {
-        this._isLoading = v;
-        if (this._loadingId && !v) {
-            this._loadingService.hide(this._loadingId);
-            this._loadingId = null;
-        }
-        if (v) {
-            this._loadingId = this._loadingService.show(this._getHostElement());
-        }
+        this._setOption({
+            name: 'isLoading',
+            value: v,
+            afterCallback: () => {
+                if (this._loadingId && !v) {
+                    this._loadingService.hide(this._loadingId);
+                    this._loadingId = null;
+                }
+                if (v) {
+                    this._loadingId = this._loadingService.show(this._getHostElement());
+                }
+                this._cdr.markForCheck();
+            }
+        });
     }
 }
 AXPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXLoadingService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -4313,7 +4334,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [AXLoadingService]
-                }] }]; } });
+                }] }]; }, propDecorators: { isLoadingChange: [{
+                type: Output
+            }], isLoading: [{
+                type: Input
+            }] } });
 
 class AXPageFooterComponent {
 }
@@ -4364,8 +4389,13 @@ class AXPageClosedPromise extends Promise {
         }
     }
 }
-class AXBasePageComponent {
-    constructor() {
+class AXBasePageComponent extends AXBaseComponentMixin {
+    /**
+    *  @ignore
+    */
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.isLoadingChange = new EventEmitter();
         this._isLoading = false;
         this._isPopup = false;
         this.onClosed = new EventEmitter();
@@ -4374,11 +4404,16 @@ class AXBasePageComponent {
         return this._isLoading;
     }
     set isLoading(v) {
-        ;
-        this._isLoading = v;
-        if (this.pageContainer) {
-            this.pageContainer.isLoading = this.isLoading;
-        }
+        this._setOption({
+            name: 'isLoading',
+            value: v,
+            afterCallback: () => {
+                if (this.pageContainer) {
+                    this.pageContainer.isLoading = this.isLoading;
+                }
+                this._cdr.markForCheck();
+            }
+        });
     }
     get isPopup() {
         return this._isPopup;
@@ -4395,16 +4430,20 @@ class AXBasePageComponent {
         this.onClosed.unsubscribe();
     }
 }
-AXBasePageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBasePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AXBasePageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBasePageComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable });
 AXBasePageComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBasePageComponent });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBasePageComponent, decorators: [{
             type: Injectable
-        }], propDecorators: { pageContainer: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { pageContainer: [{
                 type: ViewChild,
                 args: [AXPageComponent, { static: true }]
             }], footer: [{
                 type: ViewChild,
                 args: [AXPageFooterComponent, { static: true }]
+            }], isLoadingChange: [{
+                type: Output
+            }], isLoading: [{
+                type: Input
             }] } });
 
 class AXPageHeaderComponent {
@@ -4486,9 +4525,30 @@ class AXDrawerComponent extends AXBaseComponentMixin {
         }
     }
     onInit() {
-        this._getHostElement().classList.add(this.location == 'start' ? 'ax-drawer-start' : 'ax-drawer-end');
+        // 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;
+        }
+    }
     _updateClass() {
         this.zone.runOutsideAngular(() => {
             const elm = this._getHostElement();
@@ -4530,7 +4590,7 @@ class AXDrawerComponent extends AXBaseComponentMixin {
         //TODO detect break size
         const bound = this._getHostElement().parentElement.getBoundingClientRect();
         if (bound.width == 0) {
-            console.log('Drawe invalid size', bound);
+            console.log('Drawer invalid size', bound);
             setTimeout(() => {
                 this._detectSize();
             }, 1);
@@ -4584,7 +4644,7 @@ class AXDrawerComponent extends AXBaseComponentMixin {
     }
 }
 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" }, usesInheritance: true, ngImport: i0, template: `
+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>
         </ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -4598,7 +4658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-drawer' }
+                    host: { class: 'ax-drawer ax-transition-all' }
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { onChanged: [{
                 type: Output
@@ -4621,11 +4681,11 @@ class AXDrawerContainerComponent extends AXBaseComponentMixin {
     onViewInit() {
         this._updateWidth();
         // add animation
-        setTimeout(() => {
-            this._getHostElement().querySelectorAll('ax-drawer').forEach(c => {
-                c.classList.add('ax-animated');
-            });
-        }, 100);
+        // setTimeout(() => {
+        //     this._getHostElement().querySelectorAll('ax-drawer').forEach(c => {
+        //         c.classList.add('ax-animated');
+        //     });
+        // }, 100);
         this.drawers.forEach(c => {
             c.onChanged.subscribe(c => {
                 this._updateWidth();
@@ -4640,10 +4700,12 @@ class AXDrawerContainerComponent extends AXBaseComponentMixin {
             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`);
             });
@@ -4653,24 +4715,32 @@ class AXDrawerContainerComponent extends AXBaseComponentMixin {
 }
 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']">
+        </ng-content>
         <ng-content select="ax-drawer[location='start']">
         </ng-content>
         <ng-content select="ax-drawer-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>
         <ng-content select="ax-drawer[location='start']">
         </ng-content>
         <ng-content select="ax-drawer-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,
@@ -6212,7 +6282,7 @@ class AXSelectionListComponent extends AXBaseSelectionValueMixin {
     }
 }
 AXSelectionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXSelectionListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXSelectionListComponent, selector: "ax-selection-list", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", valueField: "valueField", textField: "textField", multiple: "multiple", items: "items", selectionMode: "selectionMode", direction: "direction" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container\" [class.ax-state-selected]=\"isItemSelected(item)\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5 ax-check-box\">\r\n                    <input [id]=\"id+'-'+i\" class=\"ax-checkbox\" type=\"checkbox\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700 dark:ax-text-light-100\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container\" [class.ax-state-selected]=\"isItemSelected(item)\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5 ax-radio\">\r\n                    <input [id]=\"id+'-'+i\" class=\"ax-radio\" type=\"radio\" [attr.name]=\"id\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700 dark:ax-text-light-100\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>\r\n\r\n<!-- <div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <ax-check-box [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                       \r\n                        <ax-label> {{item[textField]}} |  {{isItemSelected(item)}}</ax-label>\r\n                        <ax-form-hint *ngIf=\"item[hintField]\"> {{item[hintField]}} </ax-form-hint>\r\n                    </ax-check-box>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <ax-radio [id]=\"id+'-'+i\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                        <ax-label>{{item[textField]}} |  {{isItemSelected(item)}}</ax-label>\r\n                        <ax-form-hint *ngIf=\"item[hintField]\"> {{item[hintField]}} </ax-form-hint>\r\n                    </ax-radio>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>  -->", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSelectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXSelectionListComponent, selector: "ax-selection-list", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", valueField: "valueField", textField: "textField", multiple: "multiple", items: "items", selectionMode: "selectionMode", direction: "direction" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container\" [class.ax-state-selected]=\"isItemSelected(item)\" (click)=\"ic.click()\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5 ax-check-box\">\r\n                    <input #ic [id]=\"id+'-'+i\" class=\"ax-checkbox\" type=\"checkbox\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700 dark:ax-text-light-100\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container\" [class.ax-state-selected]=\"isItemSelected(item)\" (click)=\"ir.click()\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5 ax-radio\">\r\n                    <input #ir [id]=\"id+'-'+i\" class=\"ax-radio\" type=\"radio\" [attr.name]=\"id\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700 dark:ax-text-light-100\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>\r\n\r\n<!-- <div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <ax-check-box [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                       \r\n                        <ax-label> {{item[textField]}} |  {{isItemSelected(item)}}</ax-label>\r\n                        <ax-form-hint *ngIf=\"item[hintField]\"> {{item[hintField]}} </ax-form-hint>\r\n                    </ax-check-box>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <ax-radio [id]=\"id+'-'+i\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                        <ax-label>{{item[textField]}} |  {{isItemSelected(item)}}</ax-label>\r\n                        <ax-form-hint *ngIf=\"item[hintField]\"> {{item[hintField]}} </ax-form-hint>\r\n                    </ax-radio>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>  -->", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.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: AXSelectionListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-selection-list', inputs: [
@@ -6226,7 +6296,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                         'multiple',
                         'items',
                         'selectionMode',
-                    ], outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container\" [class.ax-state-selected]=\"isItemSelected(item)\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5 ax-check-box\">\r\n                    <input [id]=\"id+'-'+i\" class=\"ax-checkbox\" type=\"checkbox\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700 dark:ax-text-light-100\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container\" [class.ax-state-selected]=\"isItemSelected(item)\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5 ax-radio\">\r\n                    <input [id]=\"id+'-'+i\" class=\"ax-radio\" type=\"radio\" [attr.name]=\"id\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700 dark:ax-text-light-100\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>\r\n\r\n<!-- <div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <ax-check-box [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                       \r\n                        <ax-label> {{item[textField]}} |  {{isItemSelected(item)}}</ax-label>\r\n                        <ax-form-hint *ngIf=\"item[hintField]\"> {{item[hintField]}} </ax-form-hint>\r\n                    </ax-check-box>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <ax-radio [id]=\"id+'-'+i\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                        <ax-label>{{item[textField]}} |  {{isItemSelected(item)}}</ax-label>\r\n                        <ax-form-hint *ngIf=\"item[hintField]\"> {{item[hintField]}} </ax-form-hint>\r\n                    </ax-radio>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>  -->" }]
+                    ], outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container\" [class.ax-state-selected]=\"isItemSelected(item)\" (click)=\"ic.click()\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5 ax-check-box\">\r\n                    <input #ic [id]=\"id+'-'+i\" class=\"ax-checkbox\" type=\"checkbox\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700 dark:ax-text-light-100\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container\" [class.ax-state-selected]=\"isItemSelected(item)\" (click)=\"ir.click()\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5 ax-radio\">\r\n                    <input #ir [id]=\"id+'-'+i\" class=\"ax-radio\" type=\"radio\" [attr.name]=\"id\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700 dark:ax-text-light-100\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>\r\n\r\n<!-- <div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <ax-check-box [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                       \r\n                        <ax-label> {{item[textField]}} |  {{isItemSelected(item)}}</ax-label>\r\n                        <ax-form-hint *ngIf=\"item[hintField]\"> {{item[hintField]}} </ax-form-hint>\r\n                    </ax-check-box>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <ax-radio [id]=\"id+'-'+i\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                        <ax-label>{{item[textField]}} |  {{isItemSelected(item)}}</ax-label>\r\n                        <ax-form-hint *ngIf=\"item[hintField]\"> {{item[hintField]}} </ax-form-hint>\r\n                    </ax-radio>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>  -->" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { direction: [{
                 type: Input
             }] } });