@acorex/components 4.2.2 → 4.2.3

package/fesm2020/acorex-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ElementRef, Component, Inject, Optional, Input, Injectable, EventEmitter, Output, Directive, ViewChild, ContentChild, TemplateRef, ViewEncapsulation, HostListener, NgModule, ChangeDetectionStrategy, Attribute, ContentChildren, ViewChildren, ViewContainerRef } from '@angular/core';
+import { ElementRef, Component, Inject, Optional, Input, Injectable, EventEmitter, Output, Directive, ViewChild, ContentChild, TemplateRef, ViewEncapsulation, HostListener, NgModule, ChangeDetectionStrategy, Attribute, ContentChildren, ViewChildren, ViewContainerRef, HostBinding } from '@angular/core';
 import * as i1$2 from '@acorex/core';
 import { AXTranslator, AXHtmlUtil, AXConfig, AXDateTime, AXDateTimeRange, AXCoreModule, AXTranslatorModule, AXObjectUtil, AXScrollModule, setPropByPath, AXColorUtil } from '@acorex/core';
 import * as i1 from '@angular/cdk/overlay';
@@ -20,7 +20,6 @@ import { TextMaskModule } from 'angular2-text-mask';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i4 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { differenceBy } from 'lodash';
 import * as i1$4 from '@angular/router';
 import { RouterModule } from '@angular/router';
@@ -894,19 +893,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['document:keydown.escape', ['$event']]
             }] } });
 
-const COMPONENT$7 = [AXButtonComponent];
-const MODULES$7 = [CommonModule];
+const COMPONENT$8 = [AXButtonComponent];
+const MODULES$8 = [CommonModule];
 class AXButtonModule {
 }
 AXButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXButtonModule, declarations: [AXButtonComponent], imports: [CommonModule], exports: [AXButtonComponent] });
-AXButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXButtonModule, providers: [], imports: [[...MODULES$7]] });
+AXButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXButtonModule, providers: [], imports: [[...MODULES$8]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXButtonModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$7],
-                    imports: [...MODULES$7],
-                    exports: [...COMPONENT$7],
+                    declarations: [...COMPONENT$8],
+                    imports: [...MODULES$8],
+                    exports: [...COMPONENT$8],
                     providers: [],
                 }]
         }] });
@@ -2941,7 +2940,7 @@ AXMenu2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             (showSubMenu)="showSubmenu($event)">
         </ax-menu-item>
      </div>
-    `, isInline: true, styles: [".ax.ax-menu{display:flex}.ax.ax-menu.ax-menu-vertical[data-level=\"0\"]{display:flex;flex-direction:row}.ax.ax-menu.ax-menu-vertical:not([data-level=\"0\"]){display:flex;transition:opacity .3s;min-width:12em;box-shadow:0 1px 7px 0 var(--ax-border-color);background:#fff;flex-direction:column}.ax.ax-menu.ax-menu-vertical .ax-menu-item{display:flex;white-space:nowrap;cursor:pointer;padding:0 10px;font-weight:400;font-size:1rem;line-height:40px;text-decoration:none;align-items:center}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:first-child{-webkit-margin-end:var(--ax-size-md);margin-inline-end:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:last-child{-webkit-margin-start:var(--ax-size-md);margin-inline-start:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item span{flex:1}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled{opacity:.6}\n"], components: [{ type: AXMenuItemComponent, selector: "ax-menu-item", inputs: ["item", "level"], outputs: ["showSubMenu"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, styles: [".ax.ax-menu{display:flex}.ax.ax-menu.ax-menu-vertical[data-level=\"0\"]{display:flex;flex-direction:row}.ax.ax-menu.ax-menu-vertical:not([data-level=\"0\"]){display:flex;transition:opacity .3s;min-width:12em;box-shadow:0 1px 7px 0 var(--ax-border-color);background:#fff;flex-direction:column}.ax.ax-menu.ax-menu-vertical .ax-menu-item{display:flex;white-space:nowrap;cursor:pointer;padding:0 10px;font-weight:400;font-size:.875rem;line-height:40px;text-decoration:none;align-items:center}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:first-child{-webkit-margin-end:var(--ax-size-md);margin-inline-end:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:last-child{-webkit-margin-start:var(--ax-size-md);margin-inline-start:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item span{flex:1}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled{opacity:.6}\n"], components: [{ type: AXMenuItemComponent, selector: "ax-menu-item", inputs: ["item", "level"], outputs: ["showSubMenu"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXMenu2Component, decorators: [{
             type: Component,
             args: [{ selector: 'ax-menu2', template: `
@@ -2953,7 +2952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             (showSubMenu)="showSubmenu($event)">
         </ax-menu-item>
      </div>
-    `, encapsulation: ViewEncapsulation.None, styles: [".ax.ax-menu{display:flex}.ax.ax-menu.ax-menu-vertical[data-level=\"0\"]{display:flex;flex-direction:row}.ax.ax-menu.ax-menu-vertical:not([data-level=\"0\"]){display:flex;transition:opacity .3s;min-width:12em;box-shadow:0 1px 7px 0 var(--ax-border-color);background:#fff;flex-direction:column}.ax.ax-menu.ax-menu-vertical .ax-menu-item{display:flex;white-space:nowrap;cursor:pointer;padding:0 10px;font-weight:400;font-size:1rem;line-height:40px;text-decoration:none;align-items:center}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:first-child{-webkit-margin-end:var(--ax-size-md);margin-inline-end:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:last-child{-webkit-margin-start:var(--ax-size-md);margin-inline-start:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item span{flex:1}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled{opacity:.6}\n"] }]
+    `, encapsulation: ViewEncapsulation.None, styles: [".ax.ax-menu{display:flex}.ax.ax-menu.ax-menu-vertical[data-level=\"0\"]{display:flex;flex-direction:row}.ax.ax-menu.ax-menu-vertical:not([data-level=\"0\"]){display:flex;transition:opacity .3s;min-width:12em;box-shadow:0 1px 7px 0 var(--ax-border-color);background:#fff;flex-direction:column}.ax.ax-menu.ax-menu-vertical .ax-menu-item{display:flex;white-space:nowrap;cursor:pointer;padding:0 10px;font-weight:400;font-size:.875rem;line-height:40px;text-decoration:none;align-items:center}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:first-child{-webkit-margin-end:var(--ax-size-md);margin-inline-end:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:last-child{-webkit-margin-start:var(--ax-size-md);margin-inline-start:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item span{flex:1}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled{opacity:.6}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }]; }, propDecorators: { items: [{
                 type: Input
             }], selected: [{
@@ -5478,53 +5477,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: [AXValidatableComponent]
             }] } });
 
-const COMPONENT$6 = [AXFormGroupComponent];
-const MODULES$6 = [CommonModule];
+const COMPONENT$7 = [AXFormGroupComponent];
+const MODULES$7 = [CommonModule];
 class AXFormGroupModule {
 }
 AXFormGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFormGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXFormGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFormGroupModule, declarations: [AXFormGroupComponent], imports: [CommonModule], exports: [AXFormGroupComponent] });
-AXFormGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFormGroupModule, providers: [], imports: [[...MODULES$6]] });
+AXFormGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFormGroupModule, providers: [], imports: [[...MODULES$7]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFormGroupModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$6],
-                    imports: [...MODULES$6],
-                    exports: [...COMPONENT$6],
+                    declarations: [...COMPONENT$7],
+                    imports: [...MODULES$7],
+                    exports: [...COMPONENT$7],
                     providers: [],
                 }]
         }] });
 
-const COMPONENT$5 = [AXTextBoxComponent];
-const MODULES$5 = [CommonModule, AXButtonModule, TextMaskModule, FormsModule];
+const COMPONENT$6 = [AXTextBoxComponent];
+const MODULES$6 = [CommonModule, AXButtonModule, TextMaskModule, FormsModule];
 class AXTextBoxModule {
 }
 AXTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextBoxModule, declarations: [AXTextBoxComponent], imports: [CommonModule, AXButtonModule, TextMaskModule, FormsModule], exports: [AXTextBoxComponent] });
-AXTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextBoxModule, providers: [], imports: [[...MODULES$5]] });
+AXTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextBoxModule, providers: [], imports: [[...MODULES$6]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$5],
-                    imports: [...MODULES$5],
-                    exports: [...COMPONENT$5],
+                    declarations: [...COMPONENT$6],
+                    imports: [...MODULES$6],
+                    exports: [...COMPONENT$6],
                     providers: []
                 }]
         }] });
 
-const COMPONENT$4 = [AXDropdownComponent];
-const MODULES$4 = [CommonModule, AXFormGroupModule, AXTextBoxModule, AXButtonModule, AXPopoverModule, OverlayModule];
+const COMPONENT$5 = [AXDropdownComponent];
+const MODULES$5 = [CommonModule, AXFormGroupModule, AXTextBoxModule, AXButtonModule, AXPopoverModule, OverlayModule];
 class AXDropdownModule {
 }
 AXDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDropdownModule, declarations: [AXDropdownComponent], imports: [CommonModule, AXFormGroupModule, AXTextBoxModule, AXButtonModule, AXPopoverModule, OverlayModule], exports: [AXDropdownComponent] });
-AXDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDropdownModule, providers: [], imports: [[...MODULES$4]] });
+AXDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDropdownModule, providers: [], imports: [[...MODULES$5]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDropdownModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$4],
-                    imports: [...MODULES$4],
-                    exports: [...COMPONENT$4],
+                    declarations: [...COMPONENT$5],
+                    imports: [...MODULES$5],
+                    exports: [...COMPONENT$5],
                     providers: [],
                 }]
         }] });
@@ -6395,69 +6394,225 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: AXPopupService }]; } });
 
+class AXComponent {
+}
+AXComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AXComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXClosbaleComponent extends AXComponent {
+}
+AXClosbaleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXClosbaleComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+AXClosbaleComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXClosbaleComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXClosbaleComponent, decorators: [{
+            type: Injectable
+        }] });
+
 class AXDrawerComponent {
-    constructor() {
-        this.width = 300;
-        this.drawerState = 'out';
+    constructor(_elementRef, _cdr, _zone) {
+        this._elementRef = _elementRef;
+        this._zone = _zone;
+        this.locationChange = new EventEmitter();
+        this.modeChange = new EventEmitter();
+        this._mode = 'overlay';
+        this.collapsedChange = new EventEmitter();
+        this._collapsed = true;
+        this._elementRef.nativeElement['__axContext__'] = this;
     }
-    ngOnDestroy() {
-        document.querySelector('body').classList.remove('ax-drawer-underlay');
+    get location() {
+        return this._location;
     }
-    toggle() {
-        const body = document.querySelector('body');
-        if (this.drawerState === 'out') {
-            this.drawerState = 'in';
-            body.classList.add('ax-drawer-underlay');
+    set location(v) {
+        if (v != this._location) {
+            this._location = v;
+            this.locationChange.emit(v);
+            this._checkProps();
         }
-        else {
-            this.drawerState = 'out';
-            body.classList.remove('ax-drawer-underlay');
+    }
+    get mode() {
+        return this._mode;
+    }
+    set mode(v) {
+        if (v != this._mode) {
+            this._mode = v;
+            this.modeChange.emit(v);
+            this._checkProps();
+        }
+    }
+    get collapsed() {
+        return this._collapsed;
+    }
+    set collapsed(v) {
+        if (v != this._collapsed) {
+            this._collapsed = v;
+            this.collapsedChange.emit(v);
+            this._checkProps();
         }
     }
+    ngAfterViewInit() {
+        this._detectBoundingSize();
+    }
+    ngDoCheck() {
+        this._detectBoundingSize();
+    }
+    _detectBoundingSize() {
+        this._zone.runOutsideAngular(() => {
+            const host = this._elementRef.nativeElement;
+            if (host.clientWidth)
+                host.style.setProperty('--ax-el-width', `${host.clientWidth}px`);
+        });
+    }
+    _checkProps() {
+        this._detectBoundingSize();
+        this._removeBackdrop();
+        if (this.mode == 'overlay') {
+            if (!this.collapsed) {
+                this._addBackdrop();
+            }
+        }
+    }
+    toggle() {
+        this.collapsed = !this.collapsed;
+    }
+    close() {
+        this.collapsed = true;
+    }
+    open() {
+        debugger;
+        this.collapsed = false;
+    }
+    get __hostClass() {
+        //return `ax-drawer-${this.mode} ax-drawer-${this.location} ${this.collapsed ? 'ax-collapsed' : 'ax-expanded'} ${!this._loaded ? 'ax-preload' : ''}`;
+        return `ax-drawer-${this.mode} ax-drawer-${this.location} ${this.collapsed ? 'ax-collapsed' : 'ax-expanded'}`;
+    }
+    // private _loaded: boolean = false;
+    _addBackdrop() {
+        this._zone.runOutsideAngular(() => {
+            this._backdropElement = document.createElement('div');
+            this._backdropElement.classList.add('ax-backdrop');
+            this._backdropElement.onclick = () => {
+                this._zone.run(() => {
+                    this.close();
+                });
+            };
+            this._elementRef.nativeElement.parentElement?.appendChild(this._backdropElement);
+        });
+    }
+    _removeBackdrop() {
+        this._zone.runOutsideAngular(() => {
+            if (this._backdropElement) {
+                this._elementRef.nativeElement.parentElement?.removeChild(this._backdropElement);
+                this._backdropElement = null;
+            }
+        });
+    }
 }
-AXDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDrawerComponent, selector: "ax-drawer", inputs: { width: "width" }, ngImport: i0, template: "<div class=\"ax-drawer-overlay\" [@slideInOut]=\"drawerState\" (click)=\"toggle()\" >\r\n  <div class=\"ax-drawer-container\" [style.width.px]=\"width\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", animations: [
-        trigger('slideInOut', [
-            state('in', style({
-                transform: 'translate3d(0,0,0)',
-            })),
-            state('out', style({
-                transform: 'translate3d(100%, 0, 0)',
-            })),
-            transition('in => out', animate('200ms ease-in-out')),
-            transition('out => in', animate('200ms ease-in-out')),
-        ]),
-    ] });
+AXDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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.11", type: AXDrawerComponent, selector: "ax-drawer", inputs: { location: "location", mode: "mode", collapsed: "collapsed" }, outputs: { locationChange: "locationChange", modeChange: "modeChange", collapsedChange: "collapsedChange" }, host: { properties: { "class": "this.__hostClass" }, classAttribute: "ax-drawer" }, providers: [
+        { provide: AXComponent, useExisting: AXDrawerComponent },
+        { provide: AXClosbaleComponent, useExisting: AXDrawerComponent }
+    ], ngImport: i0, template: `
+    <ng-content select=".header"> </ng-content>
+    <ng-content> </ng-content>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-drawer', animations: [
-                        trigger('slideInOut', [
-                            state('in', style({
-                                transform: 'translate3d(0,0,0)',
-                            })),
-                            state('out', style({
-                                transform: 'translate3d(100%, 0, 0)',
-                            })),
-                            transition('in => out', animate('200ms ease-in-out')),
-                            transition('out => in', animate('200ms ease-in-out')),
-                        ]),
-                    ], template: "<div class=\"ax-drawer-overlay\" [@slideInOut]=\"drawerState\" (click)=\"toggle()\" >\r\n  <div class=\"ax-drawer-container\" [style.width.px]=\"width\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
+            args: [{
+                    selector: 'ax-drawer',
+                    template: `
+    <ng-content select=".header"> </ng-content>
+    <ng-content> </ng-content>
+  `,
+                    host: { class: 'ax-drawer' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [
+                        { provide: AXComponent, useExisting: AXDrawerComponent },
+                        { provide: AXClosbaleComponent, useExisting: AXDrawerComponent }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { locationChange: [{
+                type: Output
+            }], location: [{
                 type: Input
+            }], modeChange: [{
+                type: Output
+            }], mode: [{
+                type: Input
+            }], collapsedChange: [{
+                type: Output
+            }], collapsed: [{
+                type: Input
+            }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
+class AXDecoratorContentComponent {
+    constructor(elementRef, cdr) {
+    }
+}
+AXDecoratorContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDecoratorContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDecoratorContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDecoratorContentComponent, selector: "ax-content", ngImport: i0, template: ` <ng-content> </ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDecoratorContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-content',
+                    template: ` <ng-content> </ng-content> `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+
+class AXDrawerContainerComponent {
+    constructor(elementRef, cdr, _zone) {
+        this.elementRef = elementRef;
+        this._zone = _zone;
+    }
+    ngDoCheck() {
+        const host = this.elementRef.nativeElement;
+        Array.from(host.querySelectorAll('ax-drawer'))
+            .map((c) => c['__axContext__'])
+            .some((c) => !c?.collapsed)
+            ? host.classList.add('ax-visible')
+            : host.classList.remove('ax-visible');
+    }
+}
+AXDrawerContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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.11", type: AXDrawerContainerComponent, selector: "ax-drawer-container", ngImport: i0, template: `
+    <ng-content select="ax-drawer[location='start']"> </ng-content>
+    <ng-content> </ng-content>
+    <ng-content select="ax-drawer[location='end']"> </ng-content>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-drawer-container',
+                    template: `
+    <ng-content select="ax-drawer[location='start']"> </ng-content>
+    <ng-content> </ng-content>
+    <ng-content select="ax-drawer[location='end']"> </ng-content>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; } });
+
+const COMPONENT$4 = [AXDrawerComponent, AXDrawerContainerComponent, AXDecoratorContentComponent];
+const MODULES$4 = [CommonModule];
 class AXDrawerModule {
 }
 AXDrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerModule, declarations: [AXDrawerComponent], imports: [CommonModule, BrowserAnimationsModule], exports: [AXDrawerComponent] });
-AXDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerModule, providers: [], imports: [[CommonModule, BrowserAnimationsModule]] });
+AXDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerModule, declarations: [AXDrawerComponent, AXDrawerContainerComponent, AXDecoratorContentComponent], imports: [CommonModule], exports: [AXDrawerComponent, AXDrawerContainerComponent, AXDecoratorContentComponent] });
+AXDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerModule, providers: [], imports: [[...MODULES$4]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [AXDrawerComponent],
-                    imports: [CommonModule, BrowserAnimationsModule],
-                    exports: [AXDrawerComponent],
-                    providers: []
+                    declarations: [...COMPONENT$4],
+                    imports: [...MODULES$4],
+                    exports: [...COMPONENT$4],
+                    providers: [],
                 }]
         }] });
 
@@ -13997,12 +14152,12 @@ class AXColorBoxComponent extends AXValidatableComponent {
 AXColorBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 AXColorBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXColorBoxComponent, selector: "ax-color-box", inputs: { value: "value" }, outputs: { onColorSelect: "onColorSelect", valueChange: "valueChange" }, providers: [
         { provide: AXValidatableComponent, useExisting: AXColorBoxComponent },
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"color-box\">\r\n    <div class=\"color-box-pallet\">\r\n        <div class=\"color-item\" *ngFor=\"let item of colors\" [style.background-color]=\"item.code\" [title]=\"item.code\"\r\n            (click)=\"onColorClick(item)\">\r\n            <i class=\"fas fa-check-circle color-active\" *ngIf=\"item.active\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"text-input\">\r\n        <ng-container *ngIf=\"inputFormat=='rgb';else hexTemplate\">\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"rColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"gColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"bColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part switch\" (click)=\"inputFormat='hex'\">\r\n                <span>RGB</span>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #hexTemplate>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"value\" size=\"sm\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <!-- <div class=\"color-part switch\" (click)=\"inputFormat='rgb'\">\r\n                <span>HEX</span>\r\n            </div> -->\r\n        </ng-template>\r\n\r\n    </div>\r\n</div>", styles: [".color-box{border:1px solid var(--ax-border-color);max-width:300px;padding:5px}.color-box .color-box-pallet{display:flex;width:100%;height:auto;flex-wrap:wrap;justify-content:space-between;align-items:center}.color-box .color-box-pallet div{width:18px;height:18px;cursor:pointer;display:flex;justify-content:center;align-items:center;border:1px solid var(--ax-border-color);margin:1px}.color-box .color-box-pallet .color-active{color:#fff;box-shadow:1px 1px 4px #5a5a5a;border-radius:50%;font-size:14px}.color-box .text-input{display:flex;justify-content:space-between}.color-box .text-input .color-part{padding:2px;display:flex;align-items:center;flex-direction:column;justify-content:center}.color-box .text-input .color-part.switch{cursor:pointer;font-weight:700}.color-box .text-input .color-part.switch:hover{text-decoration:underline}.color-box .text-input .color-part .ax-field-set .no-label input{margin-top:0!important;text-align:center;height:var(--ax-size-md)}\n"], components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"color-box\">\r\n    <div class=\"color-box-pallet\">\r\n        <div class=\"color-item\" *ngFor=\"let item of colors\" [style.background-color]=\"item.code\" [title]=\"item.code\"\r\n            (click)=\"onColorClick(item)\">\r\n            <i class=\"fas fa-check-circle color-active\" *ngIf=\"item.active\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"text-input\">\r\n        <ng-container *ngIf=\"inputFormat=='rgb';else hexTemplate\">\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"rColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"gColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"bColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part switch\" (click)=\"inputFormat='hex'\">\r\n                <span>RGB</span>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #hexTemplate>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"value\" size=\"sm\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <!-- <div class=\"color-part switch\" (click)=\"inputFormat='rgb'\">\r\n                <span>HEX</span>\r\n            </div> -->\r\n        </ng-template>\r\n\r\n    </div>\r\n</div>", styles: [".color-box{border:1px solid var(--ax-border-color);max-width:300px;padding:5px}.color-box .color-box-pallet{display:flex;width:100%;height:auto;flex-wrap:wrap;justify-content:space-between;align-items:center}.color-box .color-box-pallet div{width:18px;height:18px;cursor:pointer;display:flex;justify-content:center;align-items:center;border:1px solid var(--ax-border-color);margin:1px}.color-box .color-box-pallet .color-active{color:#fff;box-shadow:1px 1px 4px #5a5a5a;border-radius:50%;font-size:.875rem}.color-box .text-input{display:flex;justify-content:space-between}.color-box .text-input .color-part{padding:2px;display:flex;align-items:center;flex-direction:column;justify-content:center}.color-box .text-input .color-part.switch{cursor:pointer;font-weight:700}.color-box .text-input .color-part.switch:hover{text-decoration:underline}.color-box .text-input .color-part .ax-field-set .no-label input{margin-top:0!important;text-align:center;height:var(--ax-size-md)}\n"], components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-box', providers: [
                         { provide: AXValidatableComponent, useExisting: AXColorBoxComponent },
-                    ], template: "<div class=\"color-box\">\r\n    <div class=\"color-box-pallet\">\r\n        <div class=\"color-item\" *ngFor=\"let item of colors\" [style.background-color]=\"item.code\" [title]=\"item.code\"\r\n            (click)=\"onColorClick(item)\">\r\n            <i class=\"fas fa-check-circle color-active\" *ngIf=\"item.active\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"text-input\">\r\n        <ng-container *ngIf=\"inputFormat=='rgb';else hexTemplate\">\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"rColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"gColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"bColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part switch\" (click)=\"inputFormat='hex'\">\r\n                <span>RGB</span>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #hexTemplate>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"value\" size=\"sm\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <!-- <div class=\"color-part switch\" (click)=\"inputFormat='rgb'\">\r\n                <span>HEX</span>\r\n            </div> -->\r\n        </ng-template>\r\n\r\n    </div>\r\n</div>", styles: [".color-box{border:1px solid var(--ax-border-color);max-width:300px;padding:5px}.color-box .color-box-pallet{display:flex;width:100%;height:auto;flex-wrap:wrap;justify-content:space-between;align-items:center}.color-box .color-box-pallet div{width:18px;height:18px;cursor:pointer;display:flex;justify-content:center;align-items:center;border:1px solid var(--ax-border-color);margin:1px}.color-box .color-box-pallet .color-active{color:#fff;box-shadow:1px 1px 4px #5a5a5a;border-radius:50%;font-size:14px}.color-box .text-input{display:flex;justify-content:space-between}.color-box .text-input .color-part{padding:2px;display:flex;align-items:center;flex-direction:column;justify-content:center}.color-box .text-input .color-part.switch{cursor:pointer;font-weight:700}.color-box .text-input .color-part.switch:hover{text-decoration:underline}.color-box .text-input .color-part .ax-field-set .no-label input{margin-top:0!important;text-align:center;height:var(--ax-size-md)}\n"] }]
+                    ], template: "<div class=\"color-box\">\r\n    <div class=\"color-box-pallet\">\r\n        <div class=\"color-item\" *ngFor=\"let item of colors\" [style.background-color]=\"item.code\" [title]=\"item.code\"\r\n            (click)=\"onColorClick(item)\">\r\n            <i class=\"fas fa-check-circle color-active\" *ngIf=\"item.active\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"text-input\">\r\n        <ng-container *ngIf=\"inputFormat=='rgb';else hexTemplate\">\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"rColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"gColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"bColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part switch\" (click)=\"inputFormat='hex'\">\r\n                <span>RGB</span>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #hexTemplate>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"value\" size=\"sm\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <!-- <div class=\"color-part switch\" (click)=\"inputFormat='rgb'\">\r\n                <span>HEX</span>\r\n            </div> -->\r\n        </ng-template>\r\n\r\n    </div>\r\n</div>", styles: [".color-box{border:1px solid var(--ax-border-color);max-width:300px;padding:5px}.color-box .color-box-pallet{display:flex;width:100%;height:auto;flex-wrap:wrap;justify-content:space-between;align-items:center}.color-box .color-box-pallet div{width:18px;height:18px;cursor:pointer;display:flex;justify-content:center;align-items:center;border:1px solid var(--ax-border-color);margin:1px}.color-box .color-box-pallet .color-active{color:#fff;box-shadow:1px 1px 4px #5a5a5a;border-radius:50%;font-size:.875rem}.color-box .text-input{display:flex;justify-content:space-between}.color-box .text-input .color-part{padding:2px;display:flex;align-items:center;flex-direction:column;justify-content:center}.color-box .text-input .color-part.switch{cursor:pointer;font-weight:700}.color-box .text-input .color-part.switch:hover{text-decoration:underline}.color-box .text-input .color-part .ax-field-set .no-label input{margin-top:0!important;text-align:center;height:var(--ax-size-md)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { onColorSelect: [{
                 type: Output
             }], valueChange: [{
@@ -14407,10 +14562,10 @@ class ColumnPropertyEditorComponent extends AXProperyEditorComponent {
     }
 }
 ColumnPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
-ColumnPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let c of columns\" class=\"column-item\">\r\n    <div>\r\n        <div>{{c.fieldName}} - {{c.caption}}</div>\r\n    </div>\r\n    <div>\r\n        <div>\r\n        </div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(c)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" size=\"sm\" type=\"success outline\" (click)=\"handleAddClick()\">\u0633\u062A\u0648\u0646 \u0647\u0627</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <div class=\"ax-mrg-md\"></div>\r\n                <div class=\"table\">\r\n                    <div class=\"thead\">\r\n                        <div class=\"tr\">\r\n                            <div class=\"th\">\r\n                                <div style=\"width: 5px;\"></div>\r\n                                \u0646\u0627\u0645\r\n                            </div>\r\n                            <div class=\"th\">\u0639\u0646\u0648\u0627\u0646</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639 \u0646\u0645\u0627\u06CC\u0634</div>\r\n                            <div class=\"th\">\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0647\u062F\u0631</div>\r\n                            <div class=\"th\">\u062A\u06A9\u0645\u06CC\u0644 \u062A\u0648\u0633\u0637 \u06A9\u0627\u0631\u0628\u0631</div>\r\n                            <div class=\"th\">\u0639\u0645\u0644\u06CC\u0627\u062A</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"tbody\">\r\n                        <div cdkDropList class=\"drag-drop-table-item\" (cdkDropListDropped)=\"drop($event)\">\r\n                            <div class=\"tr  drag-drop-item-box\" *ngFor=\"let c of columns\" cdkDrag>\r\n                                <div class=\"td\">\r\n                                    <div>\r\n                                    </div>\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.fieldName\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.caption\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-select-box size=\"sm\" textField=\"title\" valueField=\"id\">\r\n                                        <ax-data-source [provideData]=\"handleDataReceived\"></ax-data-source>\r\n                                    </ax-select-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.displayType\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.rowHeader\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.fillByUser\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-button type=\"danger blank\" icon=\"far fa-trash-alt\" (click)=\"handleRemoveClick(c)\">\r\n                                    </ax-button>\r\n                                    <ax-button type=\"primary blank\" icon=\"far fa-ellipsis-v\">\r\n                                    </ax-button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n            <div style=\"display: flex; justify-content: flex-end;margin-left: 15px;\">\r\n                <ax-button icon=\"far fa-plus\" size=\"sm\" type=\"primary\" (click)=\"handleAddColumn()\">\u0627\u0641\u0632\u0648\u062F\u0646 \u0633\u062A\u0648\u0646 \u062C\u062F\u06CC\u062F\r\n                </ax-button>\r\n            </div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".column-item{border:1px solid var(--ax-gray-light-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;font-weight:500;align-items:center}.column-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.column-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.column-item div:first-child{display:flex;align-items:center}.column-item div:first-child div:first-child{width:100px;height:25px;border-radius:3px}.column-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.column-item div:last-child{display:flex;align-items:center}.column-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.column-item div:last-child button i{color:var(--ax-danger-color)}.column-item div:last-child div{min-width:40px}.column-item div:last-child div.min{color:var(--ax-danger-color)}.column-item div:last-child div.max{color:var(--ax-success-color)}.add-item{border:1px solid var(--ax-success-color);background-color:transparent;color:var(--ax-success-color)}table{width:100%;margin-top:1em}table thead th{text-align:right;padding:.4em;border:1px solid #00000029;background-color:var(--ax-primary-trans-dark-color)}table tbody tr td{text-align:center}.table{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .thead{width:100%;display:flex;align-items:center;justify-content:center}.table .thead .tr{width:100%;display:flex;border:1px solid var(--ax-border-color);background-color:var(--ax-primary-trans-light-color)}.table .thead .tr .th{width:14.2857142857%;height:100%;display:flex;justify-content:center;flex-direction:column;border-left:1px solid var(--ax-border-color);padding:.5em;font-weight:700}.table .tbody{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .tbody .tr{width:100%;height:100%;display:flex;border:1px solid var(--ax-border-color);border-top:0;align-items:center;justify-content:center}.table .tbody .tr .td{width:14.2857142857%;height:45px;padding:0 .4em;border-left:1px solid var(--ax-border-color);text-align:center;align-items:center;justify-content:center;display:flex}.table .tbody .tr .td:first-child{padding-right:0!important}.table .tbody .tr .td div{width:12px;background-color:var(--ax-border-color);margin-left:.4em;height:100%;cursor:move}.table .tbody .tr .td:last-child{border-left:0!important}.table .tr:first-child{overflow:hidden}.table .th:last-child{border-left:0!important}.drag-drop-table-item{width:100%}.drag-drop-item-box{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white;font-size:14px;z-index:700000!important}.cdk-drag-preview{box-sizing:border-box;border-radius:var(--ax-size-border-radius);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-drop-table-item.cdk-drop-list-dragging .drag-drop-item-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { type: AXPageComponent, selector: "ax-page" }, { type: AXPageContentComponent, selector: "ax-page-content" }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+ColumnPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let c of columns\" class=\"column-item\">\r\n    <div>\r\n        <div>{{c.fieldName}} - {{c.caption}}</div>\r\n    </div>\r\n    <div>\r\n        <div>\r\n        </div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(c)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" size=\"sm\" type=\"success outline\" (click)=\"handleAddClick()\">\u0633\u062A\u0648\u0646 \u0647\u0627</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <div class=\"ax-mrg-md\"></div>\r\n                <div class=\"table\">\r\n                    <div class=\"thead\">\r\n                        <div class=\"tr\">\r\n                            <div class=\"th\">\r\n                                <div style=\"width: 5px;\"></div>\r\n                                \u0646\u0627\u0645\r\n                            </div>\r\n                            <div class=\"th\">\u0639\u0646\u0648\u0627\u0646</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639 \u0646\u0645\u0627\u06CC\u0634</div>\r\n                            <div class=\"th\">\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0647\u062F\u0631</div>\r\n                            <div class=\"th\">\u062A\u06A9\u0645\u06CC\u0644 \u062A\u0648\u0633\u0637 \u06A9\u0627\u0631\u0628\u0631</div>\r\n                            <div class=\"th\">\u0639\u0645\u0644\u06CC\u0627\u062A</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"tbody\">\r\n                        <div cdkDropList class=\"drag-drop-table-item\" (cdkDropListDropped)=\"drop($event)\">\r\n                            <div class=\"tr  drag-drop-item-box\" *ngFor=\"let c of columns\" cdkDrag>\r\n                                <div class=\"td\">\r\n                                    <div>\r\n                                    </div>\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.fieldName\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.caption\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-select-box size=\"sm\" textField=\"title\" valueField=\"id\">\r\n                                        <ax-data-source [provideData]=\"handleDataReceived\"></ax-data-source>\r\n                                    </ax-select-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.displayType\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.rowHeader\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.fillByUser\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-button type=\"danger blank\" icon=\"far fa-trash-alt\" (click)=\"handleRemoveClick(c)\">\r\n                                    </ax-button>\r\n                                    <ax-button type=\"primary blank\" icon=\"far fa-ellipsis-v\">\r\n                                    </ax-button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n            <div style=\"display: flex; justify-content: flex-end;margin-left: 15px;\">\r\n                <ax-button icon=\"far fa-plus\" size=\"sm\" type=\"primary\" (click)=\"handleAddColumn()\">\u0627\u0641\u0632\u0648\u062F\u0646 \u0633\u062A\u0648\u0646 \u062C\u062F\u06CC\u062F\r\n                </ax-button>\r\n            </div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".column-item{border:1px solid var(--ax-gray-light-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;font-weight:500;align-items:center}.column-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.column-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.column-item div:first-child{display:flex;align-items:center}.column-item div:first-child div:first-child{width:100px;height:25px;border-radius:3px}.column-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.column-item div:last-child{display:flex;align-items:center}.column-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.column-item div:last-child button i{color:var(--ax-danger-color)}.column-item div:last-child div{min-width:40px}.column-item div:last-child div.min{color:var(--ax-danger-color)}.column-item div:last-child div.max{color:var(--ax-success-color)}.add-item{border:1px solid var(--ax-success-color);background-color:transparent;color:var(--ax-success-color)}table{width:100%;margin-top:1em}table thead th{text-align:right;padding:.4em;border:1px solid #00000029;background-color:var(--ax-primary-trans-dark-color)}table tbody tr td{text-align:center}.table{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .thead{width:100%;display:flex;align-items:center;justify-content:center}.table .thead .tr{width:100%;display:flex;border:1px solid var(--ax-border-color);background-color:var(--ax-primary-trans-light-color)}.table .thead .tr .th{width:14.2857142857%;height:100%;display:flex;justify-content:center;flex-direction:column;border-left:1px solid var(--ax-border-color);padding:.5em;font-weight:700}.table .tbody{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .tbody .tr{width:100%;height:100%;display:flex;border:1px solid var(--ax-border-color);border-top:0;align-items:center;justify-content:center}.table .tbody .tr .td{width:14.2857142857%;height:45px;padding:0 .4em;border-left:1px solid var(--ax-border-color);text-align:center;align-items:center;justify-content:center;display:flex}.table .tbody .tr .td:first-child{padding-right:0!important}.table .tbody .tr .td div{width:12px;background-color:var(--ax-border-color);margin-left:.4em;height:100%;cursor:move}.table .tbody .tr .td:last-child{border-left:0!important}.table .tr:first-child{overflow:hidden}.table .th:last-child{border-left:0!important}.drag-drop-table-item{width:100%}.drag-drop-item-box{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white;font-size:.875rem;z-index:700000!important}.cdk-drag-preview{box-sizing:border-box;border-radius:var(--ax-size-border-radius);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-drop-table-item.cdk-drop-list-dragging .drag-drop-item-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { type: AXPageComponent, selector: "ax-page" }, { type: AXPageContentComponent, selector: "ax-page-content" }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnPropertyEditorComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div *ngFor=\"let c of columns\" class=\"column-item\">\r\n    <div>\r\n        <div>{{c.fieldName}} - {{c.caption}}</div>\r\n    </div>\r\n    <div>\r\n        <div>\r\n        </div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(c)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" size=\"sm\" type=\"success outline\" (click)=\"handleAddClick()\">\u0633\u062A\u0648\u0646 \u0647\u0627</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <div class=\"ax-mrg-md\"></div>\r\n                <div class=\"table\">\r\n                    <div class=\"thead\">\r\n                        <div class=\"tr\">\r\n                            <div class=\"th\">\r\n                                <div style=\"width: 5px;\"></div>\r\n                                \u0646\u0627\u0645\r\n                            </div>\r\n                            <div class=\"th\">\u0639\u0646\u0648\u0627\u0646</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639 \u0646\u0645\u0627\u06CC\u0634</div>\r\n                            <div class=\"th\">\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0647\u062F\u0631</div>\r\n                            <div class=\"th\">\u062A\u06A9\u0645\u06CC\u0644 \u062A\u0648\u0633\u0637 \u06A9\u0627\u0631\u0628\u0631</div>\r\n                            <div class=\"th\">\u0639\u0645\u0644\u06CC\u0627\u062A</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"tbody\">\r\n                        <div cdkDropList class=\"drag-drop-table-item\" (cdkDropListDropped)=\"drop($event)\">\r\n                            <div class=\"tr  drag-drop-item-box\" *ngFor=\"let c of columns\" cdkDrag>\r\n                                <div class=\"td\">\r\n                                    <div>\r\n                                    </div>\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.fieldName\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.caption\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-select-box size=\"sm\" textField=\"title\" valueField=\"id\">\r\n                                        <ax-data-source [provideData]=\"handleDataReceived\"></ax-data-source>\r\n                                    </ax-select-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.displayType\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.rowHeader\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.fillByUser\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-button type=\"danger blank\" icon=\"far fa-trash-alt\" (click)=\"handleRemoveClick(c)\">\r\n                                    </ax-button>\r\n                                    <ax-button type=\"primary blank\" icon=\"far fa-ellipsis-v\">\r\n                                    </ax-button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n            <div style=\"display: flex; justify-content: flex-end;margin-left: 15px;\">\r\n                <ax-button icon=\"far fa-plus\" size=\"sm\" type=\"primary\" (click)=\"handleAddColumn()\">\u0627\u0641\u0632\u0648\u062F\u0646 \u0633\u062A\u0648\u0646 \u062C\u062F\u06CC\u062F\r\n                </ax-button>\r\n            </div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".column-item{border:1px solid var(--ax-gray-light-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;font-weight:500;align-items:center}.column-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.column-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.column-item div:first-child{display:flex;align-items:center}.column-item div:first-child div:first-child{width:100px;height:25px;border-radius:3px}.column-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.column-item div:last-child{display:flex;align-items:center}.column-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.column-item div:last-child button i{color:var(--ax-danger-color)}.column-item div:last-child div{min-width:40px}.column-item div:last-child div.min{color:var(--ax-danger-color)}.column-item div:last-child div.max{color:var(--ax-success-color)}.add-item{border:1px solid var(--ax-success-color);background-color:transparent;color:var(--ax-success-color)}table{width:100%;margin-top:1em}table thead th{text-align:right;padding:.4em;border:1px solid #00000029;background-color:var(--ax-primary-trans-dark-color)}table tbody tr td{text-align:center}.table{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .thead{width:100%;display:flex;align-items:center;justify-content:center}.table .thead .tr{width:100%;display:flex;border:1px solid var(--ax-border-color);background-color:var(--ax-primary-trans-light-color)}.table .thead .tr .th{width:14.2857142857%;height:100%;display:flex;justify-content:center;flex-direction:column;border-left:1px solid var(--ax-border-color);padding:.5em;font-weight:700}.table .tbody{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .tbody .tr{width:100%;height:100%;display:flex;border:1px solid var(--ax-border-color);border-top:0;align-items:center;justify-content:center}.table .tbody .tr .td{width:14.2857142857%;height:45px;padding:0 .4em;border-left:1px solid var(--ax-border-color);text-align:center;align-items:center;justify-content:center;display:flex}.table .tbody .tr .td:first-child{padding-right:0!important}.table .tbody .tr .td div{width:12px;background-color:var(--ax-border-color);margin-left:.4em;height:100%;cursor:move}.table .tbody .tr .td:last-child{border-left:0!important}.table .tr:first-child{overflow:hidden}.table .th:last-child{border-left:0!important}.drag-drop-table-item{width:100%}.drag-drop-item-box{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white;font-size:14px;z-index:700000!important}.cdk-drag-preview{box-sizing:border-box;border-radius:var(--ax-size-border-radius);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-drop-table-item.cdk-drop-list-dragging .drag-drop-item-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ template: "<div *ngFor=\"let c of columns\" class=\"column-item\">\r\n    <div>\r\n        <div>{{c.fieldName}} - {{c.caption}}</div>\r\n    </div>\r\n    <div>\r\n        <div>\r\n        </div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(c)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" size=\"sm\" type=\"success outline\" (click)=\"handleAddClick()\">\u0633\u062A\u0648\u0646 \u0647\u0627</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <div class=\"ax-mrg-md\"></div>\r\n                <div class=\"table\">\r\n                    <div class=\"thead\">\r\n                        <div class=\"tr\">\r\n                            <div class=\"th\">\r\n                                <div style=\"width: 5px;\"></div>\r\n                                \u0646\u0627\u0645\r\n                            </div>\r\n                            <div class=\"th\">\u0639\u0646\u0648\u0627\u0646</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639 \u0646\u0645\u0627\u06CC\u0634</div>\r\n                            <div class=\"th\">\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0647\u062F\u0631</div>\r\n                            <div class=\"th\">\u062A\u06A9\u0645\u06CC\u0644 \u062A\u0648\u0633\u0637 \u06A9\u0627\u0631\u0628\u0631</div>\r\n                            <div class=\"th\">\u0639\u0645\u0644\u06CC\u0627\u062A</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"tbody\">\r\n                        <div cdkDropList class=\"drag-drop-table-item\" (cdkDropListDropped)=\"drop($event)\">\r\n                            <div class=\"tr  drag-drop-item-box\" *ngFor=\"let c of columns\" cdkDrag>\r\n                                <div class=\"td\">\r\n                                    <div>\r\n                                    </div>\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.fieldName\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.caption\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-select-box size=\"sm\" textField=\"title\" valueField=\"id\">\r\n                                        <ax-data-source [provideData]=\"handleDataReceived\"></ax-data-source>\r\n                                    </ax-select-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.displayType\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.rowHeader\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.fillByUser\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-button type=\"danger blank\" icon=\"far fa-trash-alt\" (click)=\"handleRemoveClick(c)\">\r\n                                    </ax-button>\r\n                                    <ax-button type=\"primary blank\" icon=\"far fa-ellipsis-v\">\r\n                                    </ax-button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n            <div style=\"display: flex; justify-content: flex-end;margin-left: 15px;\">\r\n                <ax-button icon=\"far fa-plus\" size=\"sm\" type=\"primary\" (click)=\"handleAddColumn()\">\u0627\u0641\u0632\u0648\u062F\u0646 \u0633\u062A\u0648\u0646 \u062C\u062F\u06CC\u062F\r\n                </ax-button>\r\n            </div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".column-item{border:1px solid var(--ax-gray-light-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;font-weight:500;align-items:center}.column-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.column-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.column-item div:first-child{display:flex;align-items:center}.column-item div:first-child div:first-child{width:100px;height:25px;border-radius:3px}.column-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.column-item div:last-child{display:flex;align-items:center}.column-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.column-item div:last-child button i{color:var(--ax-danger-color)}.column-item div:last-child div{min-width:40px}.column-item div:last-child div.min{color:var(--ax-danger-color)}.column-item div:last-child div.max{color:var(--ax-success-color)}.add-item{border:1px solid var(--ax-success-color);background-color:transparent;color:var(--ax-success-color)}table{width:100%;margin-top:1em}table thead th{text-align:right;padding:.4em;border:1px solid #00000029;background-color:var(--ax-primary-trans-dark-color)}table tbody tr td{text-align:center}.table{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .thead{width:100%;display:flex;align-items:center;justify-content:center}.table .thead .tr{width:100%;display:flex;border:1px solid var(--ax-border-color);background-color:var(--ax-primary-trans-light-color)}.table .thead .tr .th{width:14.2857142857%;height:100%;display:flex;justify-content:center;flex-direction:column;border-left:1px solid var(--ax-border-color);padding:.5em;font-weight:700}.table .tbody{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .tbody .tr{width:100%;height:100%;display:flex;border:1px solid var(--ax-border-color);border-top:0;align-items:center;justify-content:center}.table .tbody .tr .td{width:14.2857142857%;height:45px;padding:0 .4em;border-left:1px solid var(--ax-border-color);text-align:center;align-items:center;justify-content:center;display:flex}.table .tbody .tr .td:first-child{padding-right:0!important}.table .tbody .tr .td div{width:12px;background-color:var(--ax-border-color);margin-left:.4em;height:100%;cursor:move}.table .tbody .tr .td:last-child{border-left:0!important}.table .tr:first-child{overflow:hidden}.table .th:last-child{border-left:0!important}.drag-drop-table-item{width:100%}.drag-drop-item-box{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white;font-size:.875rem;z-index:700000!important}.cdk-drag-preview{box-sizing:border-box;border-radius:var(--ax-size-border-radius);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-drop-table-item.cdk-drop-list-dragging .drag-drop-item-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AXPopupService }]; }, propDecorators: { tplEdit: [{
                 type: ViewChild,
                 args: ['tplEdit']
@@ -15030,5 +15185,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AXAccordionComponent, AXAccordionModule, AXAsyncEventArgs, AXBaseButtonComponent, AXBaseComponent, AXBaseDropdownComponent, AXBaseEvent, AXBaseInputChangeEvent, AXBasePageComponent, AXBasePopupPageComponent, AXBaseTextComponent, AXButtonComponent, AXButtonModule, AXCalendarBoxComponent, AXCalendarBoxModule, AXCheckBoxComponent, AXCheckBoxItemClick, AXCheckBoxModule, AXColorBoxComponent, AXColorPickerComponent, AXColorPickerModule, AXColorPropertyEditorComponent, AXColorPropertyEditorModule, AXConditionalColorPropertyEditorComponent, AXConditionalColorPropertyEditorModule, AXContextMenuComponent, AXContextMenuDirective, AXContextMenuItemClickEvent, AXContextMenuModule, AXDataEvent, AXDataListComponent, AXDataPickerChangeEvent, AXDataSourceComponent, AXDataSourceModule, AXDataSourceRead, AXDataSourceReceivedEvent, AXDataSourceReceivedResult, AXDatePickerComponent, AXDatePickerModule, AXDialogAlertResult, AXDialogComponent, AXDialogConfirmResult, AXDialogModule, AXDialogResult, AXDialogService, AXDrawerComponent, AXDrawerModule, AXDropdownComponent, AXDropdownModule, AXEvent, AXFieldsetComponent, AXFieldsetModule, AXFilterColumnComponent, AXFilterColumnDateComponent, AXFilterColumnNumberComponent, AXFilterColumnSelectionComponent, AXFilterColumnStringComponent, AXFilterModule, AXFilterPanelComponent, AXFormGroupComponent, AXFormGroupModule, AXHtmlEvent, AXLabelComponent, AXLabelModule, AXListComponent, AXListModule, AXLoadingIndicatorComponent, AXLoadingModule, AXLoadingPanelComponent, AXLoadingService, AXMenu2Component, AXMenuComponent, AXMenuItemClickEvent, AXMenuItemComponent, AXMenuModule, AXNumberBoxComponent, AXNumberBoxModule, AXOverlayService, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageContentComponent, AXPageFooterComponent, AXPageModule, AXPageResult, AXPanelBoxComponent, AXPanelBoxModule, AXPasswordBoxComponent, AXPasswordBoxModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXProgressBarComponent, AXProgressBarModule, AXPropertyDecorator, AXPropertyDecorators, AXPropertyEditorRendererDirective, AXProperyEditorComponent, AXProppertyEditorModule, AXQueryBuilderComponent, AXQueryBuilderControl, AXQueryBuilderField, AXQueryBuilderGroup, AXQueryBuilderGroupEvent, AXQueryBuilderModule, AXQueryBuilderPopup, AXQueryBuilderRule, AXQueryBuilderRuleEvent, AXQueryBuilderService, AXRangePropertyEditorComponent, AXRangePropertyEditorModule, AXSchedulerAgendaViewComponent, AXSchedulerBaseViewComponent, AXSchedulerComponent, AXSchedulerDayTimeViewComponent, AXSchedulerEventChangeArgs, AXSchedulerModule, AXSchedulerMonthViewComponent, AXSchedulerTimelineViewComponent, AXSchedulerViewProperty, AXSchedulerViewsProperty, AXSearchBoxComponent, AXSearchBoxModule, AXSelectBox2Component, AXSelectBoxComponent, AXSelectBoxModule, AXSelectBoxPropertyEditorComponent, AXSelectBoxPropertyEditorModule, AXSelectBoxSelectionChangedEvent, AXSelectBoxValueChangedEvent, AXSelectionListComponent, AXSelectionListModule, AXSwitchComponent, AXSwitchModule, AXTabComponent, AXTabPageHostComponent, AXTabPageModule, AXTabPageRendererComponent, AXTabPageService, AXTabStripChangedEvent, AXTabStripComponent, AXTabStripModule, AXTabViewComponent, AXTabViewModule, AXTextAreaComponent, AXTextAreaModule, AXTextBoxComponent, AXTextBoxModule, AXTextPropertyEditorComponent, AXTextPropertyEditorModule, AXTimePickerChangedEvent, AXTimePickerComponent, AXTimePickerItemChangedEvent, AXTimePickerModule, AXToastMessageComponent, AXToastModule, AXToastService, AXToastWrapperComponent, AXToolbarButtonGroupComponent, AXToolbarComponent, AXToolbarFilterViewComponent, AXToolbarItem, AXToolbarListViewComponent, AXToolbarMenuComponent, AXToolbarModule, AXToolbarSchedulerNavigatorComponent, AXToolbarSchedulerViewsComponent, AXToolbarSearchComponent, AXToolbarTitleComponent, AXTooltipDirective, AXTooltipModule, AXTreeSideMenuComponent, AXTreeSideMenuItemClick, AXTreeSideMenuItemData, AXTreeSideMenuItemMovedEvent, AXTreeSideMenuModule, AXTreeSideMenuNode, AXTreeSideMenuSelectionChangedEvent, AXTreeViewComponent, AXTreeViewItemClick, AXTreeViewItemData, AXTreeViewItemMovedEvent, AXTreeViewModule, AXTreeViewNode, AXTreeViewselectionChangedEvent, AXTreeViewseletedKeyFieldsChangedEvent, AXUploadFileComponent, AXUploadFileModule, AXValidatableComponent, AXValidation, AXValidationComponent, AXValidationFormComponent, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueEvent, DynamicTabsDirective, TAB_META_KEY, propertyEditor };
+export { AXAccordionComponent, AXAccordionModule, AXAsyncEventArgs, AXBaseButtonComponent, AXBaseComponent, AXBaseDropdownComponent, AXBaseEvent, AXBaseInputChangeEvent, AXBasePageComponent, AXBasePopupPageComponent, AXBaseTextComponent, AXButtonComponent, AXButtonModule, AXCalendarBoxComponent, AXCalendarBoxModule, AXCheckBoxComponent, AXCheckBoxItemClick, AXCheckBoxModule, AXColorBoxComponent, AXColorPickerComponent, AXColorPickerModule, AXColorPropertyEditorComponent, AXColorPropertyEditorModule, AXConditionalColorPropertyEditorComponent, AXConditionalColorPropertyEditorModule, AXContextMenuComponent, AXContextMenuDirective, AXContextMenuItemClickEvent, AXContextMenuModule, AXDataEvent, AXDataListComponent, AXDataPickerChangeEvent, AXDataSourceComponent, AXDataSourceModule, AXDataSourceRead, AXDataSourceReceivedEvent, AXDataSourceReceivedResult, AXDatePickerComponent, AXDatePickerModule, AXDecoratorContentComponent, AXDialogAlertResult, AXDialogComponent, AXDialogConfirmResult, AXDialogModule, AXDialogResult, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerModule, AXDropdownComponent, AXDropdownModule, AXEvent, AXFieldsetComponent, AXFieldsetModule, AXFilterColumnComponent, AXFilterColumnDateComponent, AXFilterColumnNumberComponent, AXFilterColumnSelectionComponent, AXFilterColumnStringComponent, AXFilterModule, AXFilterPanelComponent, AXFormGroupComponent, AXFormGroupModule, AXHtmlEvent, AXLabelComponent, AXLabelModule, AXListComponent, AXListModule, AXLoadingIndicatorComponent, AXLoadingModule, AXLoadingPanelComponent, AXLoadingService, AXMenu2Component, AXMenuComponent, AXMenuItemClickEvent, AXMenuItemComponent, AXMenuModule, AXNumberBoxComponent, AXNumberBoxModule, AXOverlayService, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageContentComponent, AXPageFooterComponent, AXPageModule, AXPageResult, AXPanelBoxComponent, AXPanelBoxModule, AXPasswordBoxComponent, AXPasswordBoxModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXProgressBarComponent, AXProgressBarModule, AXPropertyDecorator, AXPropertyDecorators, AXPropertyEditorRendererDirective, AXProperyEditorComponent, AXProppertyEditorModule, AXQueryBuilderComponent, AXQueryBuilderControl, AXQueryBuilderField, AXQueryBuilderGroup, AXQueryBuilderGroupEvent, AXQueryBuilderModule, AXQueryBuilderPopup, AXQueryBuilderRule, AXQueryBuilderRuleEvent, AXQueryBuilderService, AXRangePropertyEditorComponent, AXRangePropertyEditorModule, AXSchedulerAgendaViewComponent, AXSchedulerBaseViewComponent, AXSchedulerComponent, AXSchedulerDayTimeViewComponent, AXSchedulerEventChangeArgs, AXSchedulerModule, AXSchedulerMonthViewComponent, AXSchedulerTimelineViewComponent, AXSchedulerViewProperty, AXSchedulerViewsProperty, AXSearchBoxComponent, AXSearchBoxModule, AXSelectBox2Component, AXSelectBoxComponent, AXSelectBoxModule, AXSelectBoxPropertyEditorComponent, AXSelectBoxPropertyEditorModule, AXSelectBoxSelectionChangedEvent, AXSelectBoxValueChangedEvent, AXSelectionListComponent, AXSelectionListModule, AXSwitchComponent, AXSwitchModule, AXTabComponent, AXTabPageHostComponent, AXTabPageModule, AXTabPageRendererComponent, AXTabPageService, AXTabStripChangedEvent, AXTabStripComponent, AXTabStripModule, AXTabViewComponent, AXTabViewModule, AXTextAreaComponent, AXTextAreaModule, AXTextBoxComponent, AXTextBoxModule, AXTextPropertyEditorComponent, AXTextPropertyEditorModule, AXTimePickerChangedEvent, AXTimePickerComponent, AXTimePickerItemChangedEvent, AXTimePickerModule, AXToastMessageComponent, AXToastModule, AXToastService, AXToastWrapperComponent, AXToolbarButtonGroupComponent, AXToolbarComponent, AXToolbarFilterViewComponent, AXToolbarItem, AXToolbarListViewComponent, AXToolbarMenuComponent, AXToolbarModule, AXToolbarSchedulerNavigatorComponent, AXToolbarSchedulerViewsComponent, AXToolbarSearchComponent, AXToolbarTitleComponent, AXTooltipDirective, AXTooltipModule, AXTreeSideMenuComponent, AXTreeSideMenuItemClick, AXTreeSideMenuItemData, AXTreeSideMenuItemMovedEvent, AXTreeSideMenuModule, AXTreeSideMenuNode, AXTreeSideMenuSelectionChangedEvent, AXTreeViewComponent, AXTreeViewItemClick, AXTreeViewItemData, AXTreeViewItemMovedEvent, AXTreeViewModule, AXTreeViewNode, AXTreeViewselectionChangedEvent, AXTreeViewseletedKeyFieldsChangedEvent, AXUploadFileComponent, AXUploadFileModule, AXValidatableComponent, AXValidation, AXValidationComponent, AXValidationFormComponent, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueEvent, DynamicTabsDirective, TAB_META_KEY, propertyEditor };
 //# sourceMappingURL=acorex-components.mjs.map