@acorex/components 16.18.11 → 16.18.13

package/fesm2022/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, NO_ERRORS_SCHEMA, ViewContainerRef, HostBinding } from '@angular/core';
+import { ElementRef, Component, Inject, Optional, Input, Injectable, EventEmitter, Output, Directive, ViewChild, ContentChild, TemplateRef, ViewEncapsulation, HostListener, NgModule, ChangeDetectionStrategy, Attribute, ContentChildren, ViewChildren, NO_ERRORS_SCHEMA, ViewContainerRef, HostBinding, input } 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';
@@ -1874,11 +1874,11 @@ class AXMenuComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXMenuComponent, selector: "ax-menu", inputs: { menuTemplate: "menuTemplate", rtl: "rtl", size: "size", selection: "selection", mode: "mode", target: "target", floatAlignment: "floatAlignment", floatPlacemnet: "floatPlacemnet", direction: "direction", items: "items" }, outputs: { onItemClick: "onItemClick" }, queries: [{ propertyName: "_contentMenuTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<!-- <div class=\"ax menu-container {{size}}\" #container>\n  <ul class=\"root\" [class.horizontal]=\"direction=='horizontal'\" [class.vertical]=\"direction=='vertical'\" #root>\n    <ng-template #recursiveList let-list>\n      <ng-container *ngFor=\"let item of list;trackBy:trackByItem\">\n        <li class=\"ax-toolbar-menu-item ax {{item.type || 'ax primary'}} {{item.style || 'ax primary'}}\" [class.disabled]='item.disable'  [class.subIcon]='item.items' [class.startIcon]='item.startIcon' [class.startIcon]='item.icon' [class.endIcon]='item.endIcon' *ngIf=\"item.visible!=false\" (click)=\"handleItemClick($event, item)\"\n          [class.selected]=\"item.selected\" [class.divider]=\"item.divider\" [attr.title]=\"item.tooltip ? item.tooltip : null\"\n          [attr.data-uid]=\"item.uid\"\n          [class.split]=\"item.split\">\n          <div class=\"content-side\">\n            <ng-container *ngIf=\"menuTemplate; else menuBody\">\n              <ng-container *ngTemplateOutlet=\"menuTemplate; context: { $implicit: item }\">\n              </ng-container>\n            </ng-container>\n            <ng-template #menuBody>\n              <span class=\"ax-toolbar-menu-item-text\">\n                <i class=\"{{ item.startIcon }} start-icon ax-menu-item-icon\" *ngIf=\"item.startIcon\"></i>\n                <i class=\"{{ item.icon }} start-icon ax-menu-item-icon\" *ngIf=\"item.icon\"></i>\n                <span *ngIf=\"item.text\">{{ item.text }}</span>\n                <i class=\"{{ item.endIcon }} end-icon ax-menu-item-icon\" *ngIf=\"item.endIcon\"></i>\n              </span>\n            </ng-template>\n          </div>\n          <div class=\"sub-icon-side\" *ngIf=\"item.hasChildren\">\n            <i class=\"far fa-angle-down ax-menu-item-drop-icon\"></i>\n          </div>\n          <ul *ngIf=\"item.hasChildren\" class=\"collapsed sub-menu\">\n            <ng-container *ngTemplateOutlet=\"\n              recursiveList;\n              context: { $implicit: item.items }\n            \"></ng-container>\n          </ul>\n        </li>\n      </ng-container>\n    </ng-template>\n    <ng-container *ngTemplateOutlet=\"recursiveList; context: { $implicit: items }\"></ng-container>\n    <li class=\"more\" #moreLI (click)=\"handleItemClick($event)\">\n      <i class=\"far fa-bars\"></i>\n      <ul #moreUL class=\"collapsed sub-menu\"></ul>\n    </li>\n  </ul>\n</div> -->\n\n<nav>\n  <ul\n    class=\"ax nav-menu\"\n    [class.rtl]=\"rtl\"\n    [class.nav-center]=\"direction == 'horizontal'\"\n    [class.nav-vertical]=\"direction == 'vertical'\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"recursiveMenu; context: { $implicit: items }\"\n    ></ng-container>\n  </ul>\n</nav>\n\n<ng-template #recursiveMenu let-items>\n  <ng-container *ngFor=\"let item of items\">\n    <li\n      class=\"ax {{ item.style }}\"\n      [ngClass]=\"{ disabled: item.disable }\"\n      *ngIf=\"item.visible === undefined || item.visible\"\n      (click)=\"handleItemClick($event, item)\"\n      axTooltip\n      [placement]=\"item.tooltipPlacement ? item.tooltipPlacement : 'bottom'\"\n      [tooltip]=\"item.tooltip ? item.tooltip : ''\"\n    >\n      <div class=\"ax-menu-item\">\n        <span class=\"menu-item-start-side\">\n          <i class=\"{{ item.startIcon }}\" *ngIf=\"item.startIcon\"></i>\n          <i class=\"{{ item.icon }}\" *ngIf=\"item.icon\"></i>\n          <span class=\"ax-menu-item-text\" *ngIf=\"item.text\">{{\n            item.text\n          }}</span>\n        </span>\n        <span class=\"menu-item-end-side\">\n          <i\n            class=\"far fa-angle-down drop-icon\"\n            *ngIf=\"item.items && item.text\"\n          ></i>\n          <i class=\"{{ item.endIcon }}\" *ngIf=\"item.endIcon\"></i>\n        </span>\n      </div>\n      <ul *ngIf=\"item.items\" class=\"ax-sub-menu {{ placementClass }}\">\n        <ng-container\n          *ngTemplateOutlet=\"recursiveMenu; context: { $implicit: item.items }\"\n        >\n        </ng-container>\n      </ul>\n    </li>\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["tooltip", "placement", "delay"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: AXMenuComponent, selector: "ax-menu", inputs: { menuTemplate: "menuTemplate", rtl: "rtl", size: "size", selection: "selection", mode: "mode", target: "target", floatAlignment: "floatAlignment", floatPlacemnet: "floatPlacemnet", direction: "direction", items: "items" }, outputs: { onItemClick: "onItemClick" }, queries: [{ propertyName: "_contentMenuTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<!-- <div class=\"ax menu-container {{size}}\" #container>\n  <ul class=\"root\" [class.horizontal]=\"direction=='horizontal'\" [class.vertical]=\"direction=='vertical'\" #root>\n    <ng-template #recursiveList let-list>\n      <ng-container *ngFor=\"let item of list;trackBy:trackByItem\">\n        <li class=\"ax-toolbar-menu-item ax {{item.type || 'ax primary'}} {{item.style || 'ax primary'}}\" [class.disabled]='item.disable'  [class.subIcon]='item.items' [class.startIcon]='item.startIcon' [class.startIcon]='item.icon' [class.endIcon]='item.endIcon' *ngIf=\"item.visible!=false\" (click)=\"handleItemClick($event, item)\"\n          [class.selected]=\"item.selected\" [class.divider]=\"item.divider\" [attr.title]=\"item.tooltip ? item.tooltip : null\"\n          [attr.data-uid]=\"item.uid\"\n          [class.split]=\"item.split\">\n          <div class=\"content-side\">\n            <ng-container *ngIf=\"menuTemplate; else menuBody\">\n              <ng-container *ngTemplateOutlet=\"menuTemplate; context: { $implicit: item }\">\n              </ng-container>\n            </ng-container>\n            <ng-template #menuBody>\n              <span class=\"ax-toolbar-menu-item-text\">\n                <i class=\"{{ item.startIcon }} start-icon ax-menu-item-icon\" *ngIf=\"item.startIcon\"></i>\n                <i class=\"{{ item.icon }} start-icon ax-menu-item-icon\" *ngIf=\"item.icon\"></i>\n                <span *ngIf=\"item.text\">{{ item.text }}</span>\n                <i class=\"{{ item.endIcon }} end-icon ax-menu-item-icon\" *ngIf=\"item.endIcon\"></i>\n              </span>\n            </ng-template>\n          </div>\n          <div class=\"sub-icon-side\" *ngIf=\"item.hasChildren\">\n            <i class=\"far fa-angle-down ax-menu-item-drop-icon\"></i>\n          </div>\n          <ul *ngIf=\"item.hasChildren\" class=\"collapsed sub-menu\">\n            <ng-container *ngTemplateOutlet=\"\n              recursiveList;\n              context: { $implicit: item.items }\n            \"></ng-container>\n          </ul>\n        </li>\n      </ng-container>\n    </ng-template>\n    <ng-container *ngTemplateOutlet=\"recursiveList; context: { $implicit: items }\"></ng-container>\n    <li class=\"more\" #moreLI (click)=\"handleItemClick($event)\">\n      <i class=\"far fa-bars\"></i>\n      <ul #moreUL class=\"collapsed sub-menu\"></ul>\n    </li>\n  </ul>\n</div> -->\n\n<nav>\n  <ul\n    class=\"ax nav-menu\"\n    [class.rtl]=\"rtl\"\n    [class.nav-center]=\"direction == 'horizontal'\"\n    [class.nav-vertical]=\"direction == 'vertical'\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"recursiveMenu; context: { $implicit: items }\"\n    ></ng-container>\n  </ul>\n</nav>\n\n<ng-template #recursiveMenu let-items>\n  <ng-container *ngFor=\"let item of items\">\n    @if (item?.visible != false) {\n    <li\n      class=\"ax {{ item.style }}\"\n      [ngClass]=\"{ disabled: item.disable }\"\n      (click)=\"handleItemClick($event, item)\"\n      axTooltip\n      [placement]=\"item.tooltipPlacement ? item.tooltipPlacement : 'bottom'\"\n      [tooltip]=\"item.tooltip ? item.tooltip : ''\"\n    >\n      <div class=\"ax-menu-item\">\n        <span class=\"menu-item-start-side\">\n          <i class=\"{{ item.startIcon }}\" *ngIf=\"item.startIcon\"></i>\n          <i class=\"{{ item.icon }}\" *ngIf=\"item.icon\"></i>\n          <span class=\"ax-menu-item-text\" *ngIf=\"item.text\">{{\n            item.text\n          }}</span>\n        </span>\n        <span class=\"menu-item-end-side\">\n          <i\n            class=\"far fa-angle-down drop-icon\"\n            *ngIf=\"item.items && item.text\"\n          ></i>\n          <i class=\"{{ item.endIcon }}\" *ngIf=\"item.endIcon\"></i>\n        </span>\n      </div>\n      <ul *ngIf=\"item.items\" class=\"ax-sub-menu {{ placementClass }}\">\n        <ng-container\n          *ngTemplateOutlet=\"recursiveMenu; context: { $implicit: item.items }\"\n        >\n        </ng-container>\n      </ul>\n    </li>\n    }\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["tooltip", "placement", "delay"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-menu', encapsulation: ViewEncapsulation.None, template: "<!-- <div class=\"ax menu-container {{size}}\" #container>\n  <ul class=\"root\" [class.horizontal]=\"direction=='horizontal'\" [class.vertical]=\"direction=='vertical'\" #root>\n    <ng-template #recursiveList let-list>\n      <ng-container *ngFor=\"let item of list;trackBy:trackByItem\">\n        <li class=\"ax-toolbar-menu-item ax {{item.type || 'ax primary'}} {{item.style || 'ax primary'}}\" [class.disabled]='item.disable'  [class.subIcon]='item.items' [class.startIcon]='item.startIcon' [class.startIcon]='item.icon' [class.endIcon]='item.endIcon' *ngIf=\"item.visible!=false\" (click)=\"handleItemClick($event, item)\"\n          [class.selected]=\"item.selected\" [class.divider]=\"item.divider\" [attr.title]=\"item.tooltip ? item.tooltip : null\"\n          [attr.data-uid]=\"item.uid\"\n          [class.split]=\"item.split\">\n          <div class=\"content-side\">\n            <ng-container *ngIf=\"menuTemplate; else menuBody\">\n              <ng-container *ngTemplateOutlet=\"menuTemplate; context: { $implicit: item }\">\n              </ng-container>\n            </ng-container>\n            <ng-template #menuBody>\n              <span class=\"ax-toolbar-menu-item-text\">\n                <i class=\"{{ item.startIcon }} start-icon ax-menu-item-icon\" *ngIf=\"item.startIcon\"></i>\n                <i class=\"{{ item.icon }} start-icon ax-menu-item-icon\" *ngIf=\"item.icon\"></i>\n                <span *ngIf=\"item.text\">{{ item.text }}</span>\n                <i class=\"{{ item.endIcon }} end-icon ax-menu-item-icon\" *ngIf=\"item.endIcon\"></i>\n              </span>\n            </ng-template>\n          </div>\n          <div class=\"sub-icon-side\" *ngIf=\"item.hasChildren\">\n            <i class=\"far fa-angle-down ax-menu-item-drop-icon\"></i>\n          </div>\n          <ul *ngIf=\"item.hasChildren\" class=\"collapsed sub-menu\">\n            <ng-container *ngTemplateOutlet=\"\n              recursiveList;\n              context: { $implicit: item.items }\n            \"></ng-container>\n          </ul>\n        </li>\n      </ng-container>\n    </ng-template>\n    <ng-container *ngTemplateOutlet=\"recursiveList; context: { $implicit: items }\"></ng-container>\n    <li class=\"more\" #moreLI (click)=\"handleItemClick($event)\">\n      <i class=\"far fa-bars\"></i>\n      <ul #moreUL class=\"collapsed sub-menu\"></ul>\n    </li>\n  </ul>\n</div> -->\n\n<nav>\n  <ul\n    class=\"ax nav-menu\"\n    [class.rtl]=\"rtl\"\n    [class.nav-center]=\"direction == 'horizontal'\"\n    [class.nav-vertical]=\"direction == 'vertical'\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"recursiveMenu; context: { $implicit: items }\"\n    ></ng-container>\n  </ul>\n</nav>\n\n<ng-template #recursiveMenu let-items>\n  <ng-container *ngFor=\"let item of items\">\n    <li\n      class=\"ax {{ item.style }}\"\n      [ngClass]=\"{ disabled: item.disable }\"\n      *ngIf=\"item.visible === undefined || item.visible\"\n      (click)=\"handleItemClick($event, item)\"\n      axTooltip\n      [placement]=\"item.tooltipPlacement ? item.tooltipPlacement : 'bottom'\"\n      [tooltip]=\"item.tooltip ? item.tooltip : ''\"\n    >\n      <div class=\"ax-menu-item\">\n        <span class=\"menu-item-start-side\">\n          <i class=\"{{ item.startIcon }}\" *ngIf=\"item.startIcon\"></i>\n          <i class=\"{{ item.icon }}\" *ngIf=\"item.icon\"></i>\n          <span class=\"ax-menu-item-text\" *ngIf=\"item.text\">{{\n            item.text\n          }}</span>\n        </span>\n        <span class=\"menu-item-end-side\">\n          <i\n            class=\"far fa-angle-down drop-icon\"\n            *ngIf=\"item.items && item.text\"\n          ></i>\n          <i class=\"{{ item.endIcon }}\" *ngIf=\"item.endIcon\"></i>\n        </span>\n      </div>\n      <ul *ngIf=\"item.items\" class=\"ax-sub-menu {{ placementClass }}\">\n        <ng-container\n          *ngTemplateOutlet=\"recursiveMenu; context: { $implicit: item.items }\"\n        >\n        </ng-container>\n      </ul>\n    </li>\n  </ng-container>\n</ng-template>\n" }]
+            args: [{ selector: 'ax-menu', encapsulation: ViewEncapsulation.None, template: "<!-- <div class=\"ax menu-container {{size}}\" #container>\n  <ul class=\"root\" [class.horizontal]=\"direction=='horizontal'\" [class.vertical]=\"direction=='vertical'\" #root>\n    <ng-template #recursiveList let-list>\n      <ng-container *ngFor=\"let item of list;trackBy:trackByItem\">\n        <li class=\"ax-toolbar-menu-item ax {{item.type || 'ax primary'}} {{item.style || 'ax primary'}}\" [class.disabled]='item.disable'  [class.subIcon]='item.items' [class.startIcon]='item.startIcon' [class.startIcon]='item.icon' [class.endIcon]='item.endIcon' *ngIf=\"item.visible!=false\" (click)=\"handleItemClick($event, item)\"\n          [class.selected]=\"item.selected\" [class.divider]=\"item.divider\" [attr.title]=\"item.tooltip ? item.tooltip : null\"\n          [attr.data-uid]=\"item.uid\"\n          [class.split]=\"item.split\">\n          <div class=\"content-side\">\n            <ng-container *ngIf=\"menuTemplate; else menuBody\">\n              <ng-container *ngTemplateOutlet=\"menuTemplate; context: { $implicit: item }\">\n              </ng-container>\n            </ng-container>\n            <ng-template #menuBody>\n              <span class=\"ax-toolbar-menu-item-text\">\n                <i class=\"{{ item.startIcon }} start-icon ax-menu-item-icon\" *ngIf=\"item.startIcon\"></i>\n                <i class=\"{{ item.icon }} start-icon ax-menu-item-icon\" *ngIf=\"item.icon\"></i>\n                <span *ngIf=\"item.text\">{{ item.text }}</span>\n                <i class=\"{{ item.endIcon }} end-icon ax-menu-item-icon\" *ngIf=\"item.endIcon\"></i>\n              </span>\n            </ng-template>\n          </div>\n          <div class=\"sub-icon-side\" *ngIf=\"item.hasChildren\">\n            <i class=\"far fa-angle-down ax-menu-item-drop-icon\"></i>\n          </div>\n          <ul *ngIf=\"item.hasChildren\" class=\"collapsed sub-menu\">\n            <ng-container *ngTemplateOutlet=\"\n              recursiveList;\n              context: { $implicit: item.items }\n            \"></ng-container>\n          </ul>\n        </li>\n      </ng-container>\n    </ng-template>\n    <ng-container *ngTemplateOutlet=\"recursiveList; context: { $implicit: items }\"></ng-container>\n    <li class=\"more\" #moreLI (click)=\"handleItemClick($event)\">\n      <i class=\"far fa-bars\"></i>\n      <ul #moreUL class=\"collapsed sub-menu\"></ul>\n    </li>\n  </ul>\n</div> -->\n\n<nav>\n  <ul\n    class=\"ax nav-menu\"\n    [class.rtl]=\"rtl\"\n    [class.nav-center]=\"direction == 'horizontal'\"\n    [class.nav-vertical]=\"direction == 'vertical'\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"recursiveMenu; context: { $implicit: items }\"\n    ></ng-container>\n  </ul>\n</nav>\n\n<ng-template #recursiveMenu let-items>\n  <ng-container *ngFor=\"let item of items\">\n    @if (item?.visible != false) {\n    <li\n      class=\"ax {{ item.style }}\"\n      [ngClass]=\"{ disabled: item.disable }\"\n      (click)=\"handleItemClick($event, item)\"\n      axTooltip\n      [placement]=\"item.tooltipPlacement ? item.tooltipPlacement : 'bottom'\"\n      [tooltip]=\"item.tooltip ? item.tooltip : ''\"\n    >\n      <div class=\"ax-menu-item\">\n        <span class=\"menu-item-start-side\">\n          <i class=\"{{ item.startIcon }}\" *ngIf=\"item.startIcon\"></i>\n          <i class=\"{{ item.icon }}\" *ngIf=\"item.icon\"></i>\n          <span class=\"ax-menu-item-text\" *ngIf=\"item.text\">{{\n            item.text\n          }}</span>\n        </span>\n        <span class=\"menu-item-end-side\">\n          <i\n            class=\"far fa-angle-down drop-icon\"\n            *ngIf=\"item.items && item.text\"\n          ></i>\n          <i class=\"{{ item.endIcon }}\" *ngIf=\"item.endIcon\"></i>\n        </span>\n      </div>\n      <ul *ngIf=\"item.items\" class=\"ax-sub-menu {{ placementClass }}\">\n        <ng-container\n          *ngTemplateOutlet=\"recursiveMenu; context: { $implicit: item.items }\"\n        >\n        </ng-container>\n      </ul>\n    </li>\n    }\n  </ng-container>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { _contentMenuTemplate: [{
                 type: ContentChild,
                 args: [TemplateRef, { static: true }]
@@ -2180,7 +2180,7 @@ class AXSchedulerDayTimeViewComponent extends AXSchedulerBaseViewComponent {
         return a.indexOf(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSchedulerDayTimeViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXSchedulerDayTimeViewComponent, selector: "ng-component", providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerDayTimeViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"view ax-scheduler-day-time-view\">\n    <table class=\"header\">\n        <thead>\n            <th class=\"time-column\"></th>\n            <th *ngFor=\"let d of slots\" class=\"header-cell\">\n                <div [class.same-week-day]=\"d.range.startTime.equal(today)\">\n                    {{d.range.startTime | dt: 'ddd'}}<br>\n                    {{d.range.startTime | dt: 'DD'}}\n                </div>\n            </th>\n        </thead>\n    </table>\n    <div class=\"v-scroll\">\n        <table class=\"body\" cdkDropListGroup>\n            <tbody>\n                <tr *ngFor=\"let t of times\">\n                    <td>\n                        {{t.display}}\n                    </td>\n                    <td *ngFor=\"let d of slots\" class=\"slot-cell\" cdkDropList [cdkDropListData]=\"d\"\n                    (cdkDropListDropped)=\"onDragDropOnDay($event,t.value)\" [attr.data-uid]=\"d.uid\">\n                        <div class=\"event-wrapper\">\n                            <ng-container *ngFor=\"let e of d.events\">\n                                <div *ngIf=\"e.range.startTime.hour==t.value\" class=\"event\"\n                                    role=\"button\" aria-readonly=\"false\" aria-selected=\"true\" aria-grabbed=\"false\"\n                                    cdkDrag [cdkDragData]=\"e\" \n                                    [attr.data-uid]=\"e.uid\" [style.background-color]=\"e.color\" [title]=\"e.title\">\n                                    <div class=\"event-title\">{{e.title}}</div>\n                                    <div>\n                                        <span>{{e.range.startTime | dt: 'HH:mm'}}</span> -\n                                        <span>{{e.range.endTime | dt: 'HH:mm'}}</span>\n                                    </div>\n                                    <div *cdkDragPreview [style.background-color]=\"e.color\" class=\"event-drag-preview\">\n                                        {{e.title}}\n                                    </div>\n                                    <div class=\"event-drag-placeholder\" *cdkDragPlaceholder></div>\n                                </div>\n                            </ng-container>\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </div>\n</div>", styles: [".ax-scheduler-day-time-view .event-wrapper{position:absolute;top:0;left:0;display:inline-flex;flex:auto;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;width:100%}.ax-scheduler-day-time-view .event-wrapper .event{display:block;position:relative;flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", 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"] }, { kind: "directive", type: i2$1.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i2$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "pipe", type: i1$2.AXDateTimePipe, name: "dt" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXSchedulerDayTimeViewComponent, selector: "ng-component", providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerDayTimeViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"view ax-scheduler-day-time-view\">\n    <table class=\"header\">\n        <thead>\n            <th class=\"time-column\"></th>\n            <th *ngFor=\"let d of slots\" class=\"header-cell\">\n                <div [class.same-week-day]=\"d.range.startTime.equal(today)\">\n                    {{d.range.startTime | dt: 'ddd'}}<br>\n                    {{d.range.startTime | dt: 'DD'}}\n                </div>\n            </th>\n        </thead>\n    </table>\n    <div class=\"v-scroll\">\n        <table class=\"body\" cdkDropListGroup>\n            <tbody>\n                <tr *ngFor=\"let t of times\">\n                    <td>\n                        {{t.display}}\n                    </td>\n                    <td *ngFor=\"let d of slots\" class=\"slot-cell\" cdkDropList [cdkDropListData]=\"d\"\n                    (cdkDropListDropped)=\"onDragDropOnDay($event,t.value)\" [attr.data-uid]=\"d.uid\">\n                        <div class=\"event-wrapper\">\n                            <ng-container *ngFor=\"let e of d.events\">\n                                <div *ngIf=\"e.range.startTime.hour==t.value\" class=\"event\"\n                                    role=\"button\" aria-readonly=\"false\" aria-selected=\"true\" aria-grabbed=\"false\"\n                                    cdkDrag [cdkDragData]=\"e\" \n                                    [attr.data-uid]=\"e.uid\" [style.background-color]=\"e.color\" [title]=\"e.title\">\n                                    <div class=\"event-title\">{{e.title}}</div>\n                                    <div>\n                                        <span>{{e.range.startTime | dt: 'HH:mm'}}</span> -\n                                        <span>{{e.range.endTime | dt: 'HH:mm'}}</span>\n                                    </div>\n                                    <div *cdkDragPreview [style.background-color]=\"e.color\" class=\"event-drag-preview\">\n                                        {{e.title}}\n                                    </div>\n                                    <div class=\"event-drag-placeholder\" *cdkDragPlaceholder></div>\n                                </div>\n                            </ng-container>\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </div>\n</div>", styles: [".ax-scheduler-day-time-view .event-wrapper{position:absolute;top:0;left:0;display:inline-flex;flex:auto;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;width:100%}.ax-scheduler-day-time-view .event-wrapper .event{display:block;position:relative;flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i2$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "pipe", type: i1$2.AXDateTimePipe, name: "dt" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSchedulerDayTimeViewComponent, decorators: [{
             type: Component,
@@ -2383,7 +2383,7 @@ class AXSchedulerMonthViewComponent extends AXSchedulerBaseViewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSchedulerMonthViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXSchedulerMonthViewComponent, selector: "ng-component", host: { listeners: { "wheel": "onKeydownHandler($event)" } }, providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerMonthViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"view ax-sheduler-month-view\">\n    <table class=\"header\">\n        <thead>\n            <th *ngFor=\"let d of weekDays\" class=\"header-cell\">\n                <span [class.same-week-day]=\"d.index==today.dayInWeek\"> {{d.title}}</span>\n            </th>\n        </thead>\n    </table>\n    <table class=\"body\" cdkDropListGroup>\n        <tbody>\n            <tr *ngFor=\"let r of matrixSlots\">\n                <td *ngFor=\"let d of r\" class=\"cell-slot\" cdkDropList [cdkDropListData]=\"d\"\n                    (cdkDropListDropped)=\"onDragDropOnDay($event)\" \n                    [attr.data-uid]=\"d.uid\">\n                    <div class=\"day-num\" [class.first-day-month]=\"d.range.startTime.dayInMonth==1\"\n                        [class.today]=\"d.range.startTime.equal(today)\">\n                        <ng-container *ngIf=\"d.range.startTime.dayInMonth==1\">\n                            {{d.range.startTime | dt: 'MMM'}}\n                        </ng-container>\n                        {{d.range.startTime | dt: 'DD'}}\n                    </div>\n                    <div class=\"event-wrapper\">\n                        <ng-container *ngFor=\"let e of d.events\">\n                            <div class=\"event ax-scheduler-event\" cdkDrag [cdkDragData]=\"e\" [attr.data-uid]=\"e.uid\"\n                                [style.background-color]=\"e.color\"\n                                (cdkDragStarted)=\"onDragStarted($event)\"\n                                (cdkDragEnded)=\"onDragEnded($event)\"\n                                (cdkDragEntered)=\"onDragEntered($event)\">\n                                <span class=\"ax-sch-str\">{{e.range.startTime | dt: 'HH:mm'}}</span><span\n                                    class=\"event-title\">{{e.title}}</span><span>{{e.range.endTime | dt: 'HH:mm'}}</span>\n                            </div>\n                        </ng-container>\n                    </div>\n                    <div class=\"view-more\"></div>\n                </td>\n            </tr>\n        </tbody>\n    </table>\n</div>", styles: [".ax-sheduler-month-view .day-num{position:absolute;left:5px;top:5px;font-size:smaller;padding:1px 5px;display:flex;border-radius:10%;align-items:center;justify-content:center}.ax-sheduler-month-view .day-num.first-day-month{color:var(--primary-color);font-weight:700}.ax-sheduler-month-view .day-num:hover{text-decoration:underline;cursor:pointer}.ax-sheduler-month-view .day-num.today{background-color:var(--primary-light-color);color:var(--danger-fore-color)}.ax-sheduler-month-view .view-more{position:absolute;bottom:0;font-size:x-small;right:0;padding:0 5px;width:100%;cursor:pointer;text-align:center;background-color:var(--gray-dark-color)}.ax-sheduler-month-view .view-more:hover{box-shadow:0 6px 10px #00000024,0 1px 18px #0000001f,0 3px 5px -1px #0003}.ax-sheduler-month-view .event-wrapper{position:absolute;top:30px;left:0}.ax-sheduler-month-view .event-wrapper .event{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", 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"] }, { kind: "pipe", type: i1$2.AXDateTimePipe, name: "dt" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXSchedulerMonthViewComponent, selector: "ng-component", host: { listeners: { "wheel": "onKeydownHandler($event)" } }, providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerMonthViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"view ax-sheduler-month-view\">\n    <table class=\"header\">\n        <thead>\n            <th *ngFor=\"let d of weekDays\" class=\"header-cell\">\n                <span [class.same-week-day]=\"d.index==today.dayInWeek\"> {{d.title}}</span>\n            </th>\n        </thead>\n    </table>\n    <table class=\"body\" cdkDropListGroup>\n        <tbody>\n            <tr *ngFor=\"let r of matrixSlots\">\n                <td *ngFor=\"let d of r\" class=\"cell-slot\" cdkDropList [cdkDropListData]=\"d\"\n                    (cdkDropListDropped)=\"onDragDropOnDay($event)\" \n                    [attr.data-uid]=\"d.uid\">\n                    <div class=\"day-num\" [class.first-day-month]=\"d.range.startTime.dayInMonth==1\"\n                        [class.today]=\"d.range.startTime.equal(today)\">\n                        <ng-container *ngIf=\"d.range.startTime.dayInMonth==1\">\n                            {{d.range.startTime | dt: 'MMM'}}\n                        </ng-container>\n                        {{d.range.startTime | dt: 'DD'}}\n                    </div>\n                    <div class=\"event-wrapper\">\n                        <ng-container *ngFor=\"let e of d.events\">\n                            <div class=\"event ax-scheduler-event\" cdkDrag [cdkDragData]=\"e\" [attr.data-uid]=\"e.uid\"\n                                [style.background-color]=\"e.color\"\n                                (cdkDragStarted)=\"onDragStarted($event)\"\n                                (cdkDragEnded)=\"onDragEnded($event)\"\n                                (cdkDragEntered)=\"onDragEntered($event)\">\n                                <span class=\"ax-sch-str\">{{e.range.startTime | dt: 'HH:mm'}}</span><span\n                                    class=\"event-title\">{{e.title}}</span><span>{{e.range.endTime | dt: 'HH:mm'}}</span>\n                            </div>\n                        </ng-container>\n                    </div>\n                    <div class=\"view-more\"></div>\n                </td>\n            </tr>\n        </tbody>\n    </table>\n</div>", styles: [".ax-sheduler-month-view .day-num{position:absolute;left:5px;top:5px;font-size:smaller;padding:1px 5px;display:flex;border-radius:10%;align-items:center;justify-content:center}.ax-sheduler-month-view .day-num.first-day-month{color:var(--primary-color);font-weight:700}.ax-sheduler-month-view .day-num:hover{text-decoration:underline;cursor:pointer}.ax-sheduler-month-view .day-num.today{background-color:var(--primary-light-color);color:var(--danger-fore-color)}.ax-sheduler-month-view .view-more{position:absolute;bottom:0;font-size:x-small;right:0;padding:0 5px;width:100%;cursor:pointer;text-align:center;background-color:var(--gray-dark-color)}.ax-sheduler-month-view .view-more:hover{box-shadow:0 6px 10px #00000024,0 1px 18px #0000001f,0 3px 5px -1px #0003}.ax-sheduler-month-view .event-wrapper{position:absolute;top:30px;left:0}.ax-sheduler-month-view .event-wrapper .event{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: i1$2.AXDateTimePipe, name: "dt" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSchedulerMonthViewComponent, decorators: [{
             type: Component,
@@ -2554,7 +2554,7 @@ class AXSchedulerAgendaViewComponent extends AXSchedulerBaseViewComponent {
         this.navigate(this.navigatorDate.addDay(-this.interval));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSchedulerAgendaViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXSchedulerAgendaViewComponent, selector: "ng-component", providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerAgendaViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"view ax-scheduler-agenda-view\">\n    <table class=\"body\" cdkDropListGroup>\n        <tbody *ngIf=\"slots.length; else elseTemplate\">\n            <tr *ngFor=\"let slot of slots\" cdkDropList [cdkDropListData]=\"slot\" [attr.data-uid]=\"slot.uid\"\n                (cdkDropListDropped)=\"onDragDropOnDay($event)\">\n                <td class=\"day-column\">\n                    <div class=\"day-num\">{{slot.range.startTime | dt:\"DD\"}}</div>\n                    <div class=\"day-name\">{{slot.range.startTime | dt:\"ddd\"}}</div>\n                </td>\n                <td class=\"day-border\">\n                    <ul *ngIf=\"slot.events.length\">\n                        <li *ngFor=\"let e of slot.events\" [style.border-color]=\"e.color\" cdkDrag [cdkDragData]=\"e\"\n                            [attr.data-uid]=\"e.uid\">\n                            <div class=\"event-title\">{{e.title}}</div>\n                            <div class=\"event-time\">{{e.range.startTime | dt:\"HH:mm\"}} - <span\n                                    *ngIf=\"e.range.duration('days')!=0 then a else b\"></span></div>\n                            <ng-template #a>\n                                {{e.range.endTime | dt:\"HH:mm\"}}\n                            </ng-template>\n                            <ng-template #b>\n                                {{e.range.endTime | dt:\"YYYY-MM-DD HH:mm\"}}\n                            </ng-template>\n\n                            <div *cdkDragPreview [style.background-color]=\"e.color\" class=\"event-drag-preview\">\n                                {{e.title}}\n                            </div>\n                        </li>\n                    </ul>\n                    <div *ngIf=\"!slot.events.length\" class=\"event-empty\">No events</div>\n                </td>\n            </tr>\n        </tbody>\n        <ng-template #elseTemplate>\n            <tbody>\n                <tr>\n                    <td colspan=\"2\">\n                        <div class=\"event-empty\">No events</div>\n                    </td>\n                </tr>\n            </tbody>\n        </ng-template>\n    </table>\n</div>", styles: [".ax-scheduler-agenda-view{height:100%;overflow-y:auto}.ax-scheduler-agenda-view table{border-top:1px solid var(--border-color)}.ax-scheduler-agenda-view .event-title{color:var(--gray-fore-color)}.ax-scheduler-agenda-view td{padding-top:5px;text-overflow:ellipsis;white-space:nowrap;vertical-align:top;border:none}.ax-scheduler-agenda-view td.day-border{border-bottom:1px solid var(--border-color);padding:5px;vertical-align:middle}.ax-scheduler-agenda-view .day-column{width:80px;text-align:center}.ax-scheduler-agenda-view .day-column .day-num{font-weight:600}.ax-scheduler-agenda-view .day-column .day-name{font-size:smaller}.ax-scheduler-agenda-view ul{list-style:none;padding:0;margin:0}.ax-scheduler-agenda-view ul li{border-left:4px solid var(--primary-color);margin-bottom:var(--sp-sm-size);padding:0 8px}.ax-scheduler-agenda-view ul li:hover{background-color:var(--primary-lighter-color);cursor:pointer}.ax-scheduler-agenda-view ul li .event-time,.ax-scheduler-agenda-view ul li .event-empty{color:var(--gray-fore-color);font-size:smaller}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", 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"] }, { kind: "directive", type: i2$1.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "pipe", type: i1$2.AXDateTimePipe, name: "dt" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXSchedulerAgendaViewComponent, selector: "ng-component", providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerAgendaViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"view ax-scheduler-agenda-view\">\n    <table class=\"body\" cdkDropListGroup>\n        <tbody *ngIf=\"slots.length; else elseTemplate\">\n            <tr *ngFor=\"let slot of slots\" cdkDropList [cdkDropListData]=\"slot\" [attr.data-uid]=\"slot.uid\"\n                (cdkDropListDropped)=\"onDragDropOnDay($event)\">\n                <td class=\"day-column\">\n                    <div class=\"day-num\">{{slot.range.startTime | dt:\"DD\"}}</div>\n                    <div class=\"day-name\">{{slot.range.startTime | dt:\"ddd\"}}</div>\n                </td>\n                <td class=\"day-border\">\n                    <ul *ngIf=\"slot.events.length\">\n                        <li *ngFor=\"let e of slot.events\" [style.border-color]=\"e.color\" cdkDrag [cdkDragData]=\"e\"\n                            [attr.data-uid]=\"e.uid\">\n                            <div class=\"event-title\">{{e.title}}</div>\n                            <div class=\"event-time\">{{e.range.startTime | dt:\"HH:mm\"}} - <span\n                                    *ngIf=\"e.range.duration('days')!=0 then a else b\"></span></div>\n                            <ng-template #a>\n                                {{e.range.endTime | dt:\"HH:mm\"}}\n                            </ng-template>\n                            <ng-template #b>\n                                {{e.range.endTime | dt:\"YYYY-MM-DD HH:mm\"}}\n                            </ng-template>\n\n                            <div *cdkDragPreview [style.background-color]=\"e.color\" class=\"event-drag-preview\">\n                                {{e.title}}\n                            </div>\n                        </li>\n                    </ul>\n                    <div *ngIf=\"!slot.events.length\" class=\"event-empty\">No events</div>\n                </td>\n            </tr>\n        </tbody>\n        <ng-template #elseTemplate>\n            <tbody>\n                <tr>\n                    <td colspan=\"2\">\n                        <div class=\"event-empty\">No events</div>\n                    </td>\n                </tr>\n            </tbody>\n        </ng-template>\n    </table>\n</div>", styles: [".ax-scheduler-agenda-view{height:100%;overflow-y:auto}.ax-scheduler-agenda-view table{border-top:1px solid var(--border-color)}.ax-scheduler-agenda-view .event-title{color:var(--gray-fore-color)}.ax-scheduler-agenda-view td{padding-top:5px;text-overflow:ellipsis;white-space:nowrap;vertical-align:top;border:none}.ax-scheduler-agenda-view td.day-border{border-bottom:1px solid var(--border-color);padding:5px;vertical-align:middle}.ax-scheduler-agenda-view .day-column{width:80px;text-align:center}.ax-scheduler-agenda-view .day-column .day-num{font-weight:600}.ax-scheduler-agenda-view .day-column .day-name{font-size:smaller}.ax-scheduler-agenda-view ul{list-style:none;padding:0;margin:0}.ax-scheduler-agenda-view ul li{border-left:4px solid var(--primary-color);margin-bottom:var(--sp-sm-size);padding:0 8px}.ax-scheduler-agenda-view ul li:hover{background-color:var(--primary-lighter-color);cursor:pointer}.ax-scheduler-agenda-view ul li .event-time,.ax-scheduler-agenda-view ul li .event-empty{color:var(--gray-fore-color);font-size:smaller}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "pipe", type: i1$2.AXDateTimePipe, name: "dt" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSchedulerAgendaViewComponent, decorators: [{
             type: Component,
@@ -6691,7 +6691,7 @@ class AXListComponent extends AXDataListComponent {
     dragDrop(event) {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXListComponent, selector: "ax-list", inputs: { width: "width", height: "height", dropId: "dropId", connectedList: "connectedList", allowMoveItem: "allowMoveItem", dataSource: "dataSource", itemTemplate: "itemTemplate", emptyTemplate: "emptyTemplate", direction: "direction" }, outputs: { onDirectionChanged: "onDirectionChanged" }, queries: [{ propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentItemTemplate", first: true, predicate: ["itemTemplate"], descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true, static: true }, { propertyName: "searchToolbar", first: true, predicate: AXToolbarSearchComponent, descendants: true, static: true }, { propertyName: "viewToolbar", first: true, predicate: AXToolbarListViewComponent, descendants: true, static: true }, { propertyName: "toolbar", first: true, predicate: AXToolbarComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div [style.height]=\"height\" [style.width]=\"width\">\n  <div class=\"ax-list-toolbar\" *ngIf=\"toolbar\">\n    <ng-content select=\"ax-toolbar\"></ng-content>\n  </div>\n  <div class=\"ax-list-container\" cdkDropList [id]=\"dropId\" [cdkDropListConnectedTo]=\"connectedList\"\n    (cdkDropListDropped)=\"dragDrop($event)\" [cdkDropListData]=\"items\"\n    [ngClass]=\"{'overflow-y': direction=='vertical' || direction=='horizontal-wrap','overflow-x': direction=='horizontal' || direction=='vertical-wrap'}\">\n    <div class=\"item-wrapper\" [ngClass]=\"direction\">\n      <!-- <ng-container *ngIf=\"items && items.length; else emptyTemplate\"> -->\n      <ng-container *ngIf=\"allowMoveItem; else elseTemplate\">\n        <div class=\"ax-list-item\" *ngFor=\"let item of items\" cdkDrag [cdkDragData]=\"item\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\n          </ng-container>\n          <div class=\"drop-placeholder\" *cdkDragPlaceholder></div>\n        </div>\n      </ng-container>\n      <ng-template #elseTemplate>\n        <div class=\"ax-list-item\" *ngFor=\"let item of items\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction }\">\n          </ng-container>\n        </div>\n      </ng-template>\n      <!-- </ng-container> -->\n\n    </div>\n    <ng-container *ngIf=\"items==null || items.length==0\">\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\n      </ng-container>\n    </ng-container>\n\n  </div>\n</div>", styles: [".ax-list-container{height:calc(100% - 45px);min-height:50px}.ax-list-container.overflow-x{overflow-x:auto;overflow-y:hidden}.ax-list-container.overflow-y{overflow-y:auto;overflow-x:hidden}.ax-list-container .item-wrapper{height:auto;display:flex}.ax-list-container .cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-list-container .cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.ax-list-container .drop-placeholder{background:var(--gray-light-color);border:dotted 2px var(--border-color);min-height:60px;margin-bottom:5px;transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-list-container .vertical{flex-direction:column}.ax-list-container .vertical-wrap{flex-direction:column;flex-wrap:wrap}.ax-list-container .horizontal-wrap{flex-direction:row;flex-wrap:wrap}.ax-list-container .horizontal{flex-direction:row}.ax-list-toolbar{padding:4px 5px;background:#fff;border:1px solid var(--border-color);border-radius:4px;margin-bottom:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", 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"] }, { kind: "directive", type: i2$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXListComponent, selector: "ax-list", inputs: { width: "width", height: "height", dropId: "dropId", connectedList: "connectedList", allowMoveItem: "allowMoveItem", dataSource: "dataSource", itemTemplate: "itemTemplate", emptyTemplate: "emptyTemplate", direction: "direction" }, outputs: { onDirectionChanged: "onDirectionChanged" }, queries: [{ propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentItemTemplate", first: true, predicate: ["itemTemplate"], descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true, static: true }, { propertyName: "searchToolbar", first: true, predicate: AXToolbarSearchComponent, descendants: true, static: true }, { propertyName: "viewToolbar", first: true, predicate: AXToolbarListViewComponent, descendants: true, static: true }, { propertyName: "toolbar", first: true, predicate: AXToolbarComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div [style.height]=\"height\" [style.width]=\"width\">\n  <div class=\"ax-list-toolbar\" *ngIf=\"toolbar\">\n    <ng-content select=\"ax-toolbar\"></ng-content>\n  </div>\n  <div class=\"ax-list-container\" cdkDropList [id]=\"dropId\" [cdkDropListConnectedTo]=\"connectedList\"\n    (cdkDropListDropped)=\"dragDrop($event)\" [cdkDropListData]=\"items\"\n    [ngClass]=\"{'overflow-y': direction=='vertical' || direction=='horizontal-wrap','overflow-x': direction=='horizontal' || direction=='vertical-wrap'}\">\n    <div class=\"item-wrapper\" [ngClass]=\"direction\">\n      <!-- <ng-container *ngIf=\"items && items.length; else emptyTemplate\"> -->\n      <ng-container *ngIf=\"allowMoveItem; else elseTemplate\">\n        <div class=\"ax-list-item\" *ngFor=\"let item of items\" cdkDrag [cdkDragData]=\"item\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\n          </ng-container>\n          <div class=\"drop-placeholder\" *cdkDragPlaceholder></div>\n        </div>\n      </ng-container>\n      <ng-template #elseTemplate>\n        <div class=\"ax-list-item\" *ngFor=\"let item of items\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction }\">\n          </ng-container>\n        </div>\n      </ng-template>\n      <!-- </ng-container> -->\n\n    </div>\n    <ng-container *ngIf=\"items==null || items.length==0\">\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\n      </ng-container>\n    </ng-container>\n\n  </div>\n</div>", styles: [".ax-list-container{height:calc(100% - 45px);min-height:50px}.ax-list-container.overflow-x{overflow-x:auto;overflow-y:hidden}.ax-list-container.overflow-y{overflow-y:auto;overflow-x:hidden}.ax-list-container .item-wrapper{height:auto;display:flex}.ax-list-container .cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-list-container .cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.ax-list-container .drop-placeholder{background:var(--gray-light-color);border:dotted 2px var(--border-color);min-height:60px;margin-bottom:5px;transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-list-container .vertical{flex-direction:column}.ax-list-container .vertical-wrap{flex-direction:column;flex-wrap:wrap}.ax-list-container .horizontal-wrap{flex-direction:row;flex-wrap:wrap}.ax-list-container .horizontal{flex-direction:row}.ax-list-toolbar{padding:4px 5px;background:#fff;border:1px solid var(--border-color);border-radius:4px;margin-bottom:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXListComponent, decorators: [{
             type: Component,
@@ -6941,7 +6941,7 @@ class AXPopupComponent extends AXBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i1$2.AXRenderService }, { token: AXLoadingService }, { token: i0.ChangeDetectorRef }, { token: i1$2.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXPopupComponent, selector: "ng-component", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "popupBody", first: true, predicate: ["popupBody"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"popup-wrapper\" role=\"dialog\" [attr.aria-labelledby]=\"'dialog'+uid+'_label'\" aria-modal=\"true\" cdkTrapFocus>\n  <div class=\"popup-container {{size}}\" tabindex=\"0\" cdkDrag [class.has-border]=\"!modal\">\n    <div class=\"ax-popup-header\" cdkDragHandle [attr.id]=\"'dialog'+uid+'_label'\">\n      <span>\n        {{title}}\n      </span>\n      <span class=\"ax-buttons-containers\">\n        <i class=\"far fa-expand ax-popup-header-button\" (click)=\"onFullScreen()\" *ngIf=\"maximizable\" tabindex=\"2\"\n          title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"></i>\n        <i class=\"far fa-times ax-popup-header-button\" (click)=\"onCloseClick()\" *ngIf=\"closable\" tabindex=\"1\"\n          title=\"\u0628\u0633\u062A\u0646\"></i>\n      </span>\n    </div>\n    <div class=\"ax-popup-body ax-loading-host\">\n      <div class=\"ax-popup-body-container\">\n        <div [hidden]=\"isLoading\">\n          <ng-template #popupBody></ng-template>\n        </div>\n      </div>\n      <div class=\"ax-popup-footer\" *ngIf=\"!isLoading && footerButtons.length > 0\">\n        <div class=\"ax-buttons-containers\">\n          <ng-container *ngFor=\"let button of footerButtons\">\n            <ax-button [type]=\"button.style\" [icon]=\"button.icon\" [submitBehavior]=\"button.submitBehavior\"\n              [disabled]=\"button.disable\" [cancelBehavior]=\"button.cancelBehavior\"\n              (click)=\"handleFooterButtonClick(button)\">\n              {{button.text}}\n            </ax-button>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".popup-wrapper .popup-container{opacity:1;background:var(--ax-white-color);display:flex;flex-direction:column;border-radius:var(--ax-size-border-radius);-webkit-border-radius:var(--ax-size-border-radius);-moz-border-radius:var(--ax-size-border-radius);overflow:hidden;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));min-height:fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}.popup-wrapper .popup-container:focus{box-shadow:0 0 0 .2rem rgba(var(--outline-color),.8);outline-color:transparent}.popup-wrapper .popup-container.full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh))}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-light-color);color:var(--ax-gray-fore-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1rem;font-weight:500;padding:.5rem .7rem}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers{display:flex;flex-direction:row}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers .ax-popup-header-button{border-radius:50%;font-size:1.1rem;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;cursor:pointer;margin-inline-start:.5em}.popup-wrapper .popup-container .ax-popup-body{position:relative;overflow:hidden;display:flex;flex-direction:column}.popup-wrapper .popup-container .ax-popup-body .ax-popup-body-container{overflow:auto}.popup-wrapper .popup-container .ax-popup-body .ax-footer{background:var(--ax-white-color);border-top:1px solid;border-color:var(--ax-border-color);margin-block-start:.5em;padding:.4em .5em;display:flex;align-items:center}.popup-wrapper .popup-container .ax-popup-body .ax-footer .button{min-width:100px;margin-inline-end:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer{background-color:var(--ax-white-color);display:flex;flex-direction:row;align-items:center;padding:.5em;border-top:1px solid var(--ax-border-color);margin-block-start:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers{flex:1;max-width:fit-content;max-width:-moz-fit-content}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers .button{margin-inline-end:.5em;min-width:80px}@media all and (min-width: 1280px){.popup-wrapper .popup-container.sm{width:420px!important}.popup-wrapper .popup-container.md{width:680px!important}.popup-wrapper .popup-container.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:700px!important}}@media (max-width: 599px){.popup-wrapper .popup-container.sm,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:93vw!important;height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", 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"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXPopupComponent, selector: "ng-component", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "popupBody", first: true, predicate: ["popupBody"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"popup-wrapper\" role=\"dialog\" [attr.aria-labelledby]=\"'dialog'+uid+'_label'\" aria-modal=\"true\" cdkTrapFocus>\n  <div class=\"popup-container {{size}}\" tabindex=\"0\" cdkDrag [class.has-border]=\"!modal\">\n    <div class=\"ax-popup-header\" cdkDragHandle [attr.id]=\"'dialog'+uid+'_label'\">\n      <span>\n        {{title}}\n      </span>\n      <span class=\"ax-buttons-containers\">\n        <i class=\"far fa-expand ax-popup-header-button\" (click)=\"onFullScreen()\" *ngIf=\"maximizable\" tabindex=\"2\"\n          title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"></i>\n        <i class=\"far fa-times ax-popup-header-button\" (click)=\"onCloseClick()\" *ngIf=\"closable\" tabindex=\"1\"\n          title=\"\u0628\u0633\u062A\u0646\"></i>\n      </span>\n    </div>\n    <div class=\"ax-popup-body ax-loading-host\">\n      <div class=\"ax-popup-body-container\">\n        <div [hidden]=\"isLoading\">\n          <ng-template #popupBody></ng-template>\n        </div>\n      </div>\n      <div class=\"ax-popup-footer\" *ngIf=\"!isLoading && footerButtons.length > 0\">\n        <div class=\"ax-buttons-containers\">\n          <ng-container *ngFor=\"let button of footerButtons\">\n            <ax-button [type]=\"button.style\" [icon]=\"button.icon\" [submitBehavior]=\"button.submitBehavior\"\n              [disabled]=\"button.disable\" [cancelBehavior]=\"button.cancelBehavior\"\n              (click)=\"handleFooterButtonClick(button)\">\n              {{button.text}}\n            </ax-button>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".popup-wrapper .popup-container{opacity:1;background:var(--ax-white-color);display:flex;flex-direction:column;border-radius:var(--ax-size-border-radius);-webkit-border-radius:var(--ax-size-border-radius);-moz-border-radius:var(--ax-size-border-radius);overflow:hidden;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));min-height:fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}.popup-wrapper .popup-container:focus{box-shadow:0 0 0 .2rem rgba(var(--outline-color),.8);outline-color:transparent}.popup-wrapper .popup-container.full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh))}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-light-color);color:var(--ax-gray-fore-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1rem;font-weight:500;padding:.5rem .7rem}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers{display:flex;flex-direction:row}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers .ax-popup-header-button{border-radius:50%;font-size:1.1rem;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;cursor:pointer;margin-inline-start:.5em}.popup-wrapper .popup-container .ax-popup-body{position:relative;overflow:hidden;display:flex;flex-direction:column}.popup-wrapper .popup-container .ax-popup-body .ax-popup-body-container{overflow:auto}.popup-wrapper .popup-container .ax-popup-body .ax-footer{background:var(--ax-white-color);border-top:1px solid;border-color:var(--ax-border-color);margin-block-start:.5em;padding:.4em .5em;display:flex;align-items:center}.popup-wrapper .popup-container .ax-popup-body .ax-footer .button{min-width:100px;margin-inline-end:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer{background-color:var(--ax-white-color);display:flex;flex-direction:row;align-items:center;padding:.5em;border-top:1px solid var(--ax-border-color);margin-block-start:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers{flex:1;max-width:fit-content;max-width:-moz-fit-content}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers .button{margin-inline-end:.5em;min-width:80px}@media all and (min-width: 1280px){.popup-wrapper .popup-container.sm{width:420px!important}.popup-wrapper .popup-container.md{width:680px!important}.popup-wrapper .popup-container.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:700px!important}}@media (max-width: 599px){.popup-wrapper .popup-container.sm,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:93vw!important;height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
@@ -7584,7 +7584,7 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
     cdr;
     min = null;
     max = null;
-    showSeparator = false;
+    showSeparator = input(false);
     showCurrency = false;
     showCounter = true;
     scrollWeel = true;
@@ -7614,7 +7614,9 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
             this._values = '-';
         }
         else {
-            if (v === '' || v == null || v === undefined ? true : isNaN(Number(v.toString().replace(/,/g, ''))) === false) {
+            if (v === '' || v == null || v === undefined
+                ? true
+                : isNaN(Number(v.toString().replace(/,/g, ''))) === false) {
                 if (v === '' || v == null || v === undefined) {
                     this.textValue = '';
                     const old = this._values;
@@ -7625,7 +7627,7 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
                             isUserChange: this.userEdite,
                             component: this,
                             value: null,
-                            oldValue: this.showSeparator && old
+                            oldValue: this.showSeparator() && old
                                 ? old === '-'
                                     ? null
                                     : Number(old.replace(/,/g, ''))
@@ -7634,7 +7636,7 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
                                     : old === '-'
                                         ? null
                                         : Number(old),
-                            htmlElement: this.ref.nativeElement
+                            htmlElement: this.ref.nativeElement,
                         });
                         this.userEdite = false;
                         this.cdr.detectChanges();
@@ -7644,7 +7646,8 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
                 else {
                     v = v.toString();
                     // this.addCommas(v.toString());
-                    this.textValue = this.showSeparator && v ? this.addCommas(v.toString()) : v;
+                    this.textValue =
+                        this.showSeparator() && v ? this.addCommas(v.toString()) : v;
                     // if (this.textValue.indexOf('.') !== -1) {
                     //   // const dottt= (this.textValue.length-1) - this.textValue.indexOf('.')
                     //   if (this.textValue.length - 1 - this.textValue.indexOf('.') < this.decimalNumber) {
@@ -7667,12 +7670,16 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
                     if (v !== this._values) {
                         const old = this._values;
                         this._values = v;
-                        this.valueChange.emit(this.showSeparator && v ? Number(v.replace(/,/g, '')) : Number(v));
+                        this.valueChange.emit(this.showSeparator() && v
+                            ? Number(v.replace(/,/g, ''))
+                            : Number(v));
                         this.onValueChanged.emit({
                             isUserChange: this.userEdite,
                             component: this,
-                            value: this.showSeparator && v ? Number(v.replace(/,/g, '')) : Number(v),
-                            oldValue: this.showSeparator && old
+                            value: this.showSeparator() && v
+                                ? Number(v.replace(/,/g, ''))
+                                : Number(v),
+                            oldValue: this.showSeparator() && old
                                 ? old === '-'
                                     ? null
                                     : Number(old.replace(/,/g, ''))
@@ -7681,7 +7688,7 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
                                     : old === '-'
                                         ? null
                                         : Number(old),
-                            htmlElement: this.ref.nativeElement
+                            htmlElement: this.ref.nativeElement,
                         });
                         this.userEdite = false;
                         this.cdr.detectChanges();
@@ -7700,7 +7707,7 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
                         isUserChange: this.userEdite,
                         component: this,
                         value: null,
-                        oldValue: this.showSeparator && old
+                        oldValue: this.showSeparator() && old
                             ? old === '-'
                                 ? null
                                 : Number(old.replace(/,/g, ''))
@@ -7709,7 +7716,7 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
                                 : old === '-'
                                     ? null
                                     : Number(old),
-                        htmlElement: this.ref.nativeElement
+                        htmlElement: this.ref.nativeElement,
                     });
                     this.userEdite = false;
                     this.cdr.detectChanges();
@@ -7724,7 +7731,7 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
         this.textAlign = 'left';
     }
     calcSeparator(num) {
-        if (this.showSeparator) {
+        if (this.showSeparator()) {
             return num + +(num / 3);
         }
         else {
@@ -7793,7 +7800,8 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
             this.findMinus = false;
         }
         // get cursur position when key press
-        if (this.input.nativeElement.selectionStart || this.input.nativeElement.selectionStart === 0) {
+        if (this.input.nativeElement.selectionStart ||
+            this.input.nativeElement.selectionStart === 0) {
             this.cursorPosition = this.input.nativeElement.selectionStart;
             this.cursorPosition += 1;
         }
@@ -7822,7 +7830,9 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
                 if (this.value && this.value.toString().match(/\./g)) {
                     const figureAfterDot = this.value.length - this.value.indexOf('.');
                     const dotIndex = this.value.indexOf('.');
-                    if (dotIndex - 1 + dotIndex + figureAfterDot > dotIndex - 1 + dotIndex + this.decimalNumber && this.cursorPosition - 1 > dotIndex) {
+                    if (dotIndex - 1 + dotIndex + figureAfterDot >
+                        dotIndex - 1 + dotIndex + this.decimalNumber &&
+                        this.cursorPosition - 1 > dotIndex) {
                         event.preventDefault();
                     }
                 }
@@ -7858,7 +7868,8 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
         }
         // left & right Button
         if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-            if (this.input.nativeElement.selectionStart || this.input.nativeElement.selectionStart === 0) {
+            if (this.input.nativeElement.selectionStart ||
+                this.input.nativeElement.selectionStart === 0) {
                 this.cursorPosition = this.input.nativeElement.selectionStart;
             }
         }
@@ -7890,9 +7901,13 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
         }
         if (this.readonly === false) {
             const countAfterDot = this.value !== null && this.value !== '' && this.value !== undefined
-                ? this.value.toString().length - 1 - this.value.toString().indexOf('.')
+                ? this.value.toString().length -
+                    1 -
+                    this.value.toString().indexOf('.')
                 : 0;
-            const defaultStep = countAfterDot > this.decimalNumber ? Math.pow(this.decimalConstant, this.decimalNumber) : Math.pow(this.decimalConstant, countAfterDot);
+            const defaultStep = countAfterDot > this.decimalNumber
+                ? Math.pow(this.decimalConstant, this.decimalNumber)
+                : Math.pow(this.decimalConstant, countAfterDot);
             // step and +- with up key and down key
             if (this.value && this.value.toString().match(/\./g)) {
                 this.dotPosition = this.value.indexOf('.');
@@ -7902,14 +7917,18 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
                         this.count = this.tmp - +this.intStep;
                         if (this.min === null || Number(this.count) >= Number(this.min)) {
                             // this.value = this.count.toFixed(this.decimalNumber);
-                            this.value = this.count.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot);
+                            this.value = this.count.toFixed(countAfterDot > this.decimalNumber
+                                ? this.decimalNumber
+                                : countAfterDot);
                         }
                     }
                     if (event.key === 'ArrowUp') {
                         this.tmp = parseFloat(this.value.replace(/,/g, ''));
                         this.count = this.tmp + +this.intStep;
                         if (this.max === null || Number(this.count) <= Number(this.max)) {
-                            this.value = this.count.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot);
+                            this.value = this.count.toFixed(countAfterDot > this.decimalNumber
+                                ? this.decimalNumber
+                                : countAfterDot);
                         }
                     }
                 }
@@ -7919,16 +7938,26 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
                             if (this.customStep !== null) {
                                 this.tmp = parseFloat(this.value.replace(/,/g, ''));
                                 this.lastStep =
-                                    parseFloat(defaultStep.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot)) +
-                                        parseFloat(this.customStep.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot)) -
-                                        parseFloat(defaultStep.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot));
+                                    parseFloat(defaultStep.toFixed(countAfterDot > this.decimalNumber
+                                        ? this.decimalNumber
+                                        : countAfterDot)) +
+                                        parseFloat(this.customStep.toFixed(countAfterDot > this.decimalNumber
+                                            ? this.decimalNumber
+                                            : countAfterDot)) -
+                                        parseFloat(defaultStep.toFixed(countAfterDot > this.decimalNumber
+                                            ? this.decimalNumber
+                                            : countAfterDot));
                                 this.count = parseFloat(this.tmp) - this.lastStep;
-                                this.value = this.count.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot);
+                                this.value = this.count.toFixed(countAfterDot > this.decimalNumber
+                                    ? this.decimalNumber
+                                    : countAfterDot);
                             }
                             else {
                                 this.tmp = parseFloat(this.value.replace(/,/g, ''));
                                 this.count = parseFloat(this.tmp) - defaultStep;
-                                this.value = this.count.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot);
+                                this.value = this.count.toFixed(countAfterDot > this.decimalNumber
+                                    ? this.decimalNumber
+                                    : countAfterDot);
                             }
                         }
                     }
@@ -7937,16 +7966,26 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
                             if (this.customStep !== null) {
                                 this.tmp = parseFloat(this.value.replace(/,/g, ''));
                                 this.lastStep =
-                                    parseFloat(defaultStep.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot)) +
-                                        parseFloat(this.customStep.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot)) -
-                                        parseFloat(defaultStep.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot));
+                                    parseFloat(defaultStep.toFixed(countAfterDot > this.decimalNumber
+                                        ? this.decimalNumber
+                                        : countAfterDot)) +
+                                        parseFloat(this.customStep.toFixed(countAfterDot > this.decimalNumber
+                                            ? this.decimalNumber
+                                            : countAfterDot)) -
+                                        parseFloat(defaultStep.toFixed(countAfterDot > this.decimalNumber
+                                            ? this.decimalNumber
+                                            : countAfterDot));
                                 this.count = parseFloat(this.tmp) + this.lastStep;
-                                this.value = this.count.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot);
+                                this.value = this.count.toFixed(countAfterDot > this.decimalNumber
+                                    ? this.decimalNumber
+                                    : countAfterDot);
                             }
                             else {
                                 this.tmp = parseFloat(this.value.replace(/,/g, ''));
                                 this.count = parseFloat(this.tmp) + defaultStep;
-                                this.value = this.count.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot);
+                                this.value = this.count.toFixed(countAfterDot > this.decimalNumber
+                                    ? this.decimalNumber
+                                    : countAfterDot);
                             }
                         }
                     }
@@ -7958,7 +7997,8 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
                         this.value = this.min.toString();
                     }
                     else {
-                        if (this.min === null || Number(this.value) > parseInt(this.min.toString())) {
+                        if (this.min === null ||
+                            Number(this.value) > parseInt(this.min.toString())) {
                             if (this.value == null) {
                                 this.value = '0';
                             }
@@ -7975,7 +8015,8 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
                         this.value = this.min.toString();
                     }
                     else {
-                        if (this.max === null || Number(this.value) < parseInt(this.max.toString())) {
+                        if (this.max === null ||
+                            Number(this.value) < parseInt(this.max.toString())) {
                             if (this.value == null) {
                                 this.value = '0';
                             }
@@ -7998,7 +8039,8 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
         }
     }
     handleClick() {
-        if (this.input.nativeElement.selectionStart || this.input.nativeElement.selectionStart === 0) {
+        if (this.input.nativeElement.selectionStart ||
+            this.input.nativeElement.selectionStart === 0) {
             this.cursorPosition = this.input.nativeElement.selectionStart;
         }
     }
@@ -8006,7 +8048,9 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
         Observable.create((observer) => {
             this.userQuestionUpdate = observer;
         });
-        this.userQuestionUpdate.pipe(debounceTime(1000), distinctUntilChanged()).subscribe((text) => this.checkMinMax(text));
+        this.userQuestionUpdate
+            .pipe(debounceTime(1000), distinctUntilChanged())
+            .subscribe((text) => this.checkMinMax(text));
         // this.userQuestionUpdate.next((e.target as any).value);
         setTimeout(() => {
             this.userQuestionUpdate.next(this.input.nativeElement.value);
@@ -8062,20 +8106,26 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
         else {
             if (this.readonly === false) {
                 const countAfterDot = this.value !== null && this.value !== '' && this.value !== undefined
-                    ? this.value.toString().length - 1 - this.value.toString().indexOf('.')
+                    ? this.value.toString().length -
+                        1 -
+                        this.value.toString().indexOf('.')
                     : 0;
                 if (this.value == null) {
                     this.value = '0';
                 }
                 else {
-                    const defaultStep = countAfterDot > this.decimalNumber ? Math.pow(this.decimalConstant, this.decimalNumber) : Math.pow(this.decimalConstant, countAfterDot);
+                    const defaultStep = countAfterDot > this.decimalNumber
+                        ? Math.pow(this.decimalConstant, this.decimalNumber)
+                        : Math.pow(this.decimalConstant, countAfterDot);
                     this.dotPosition = this.value.toString().indexOf('.') + 1;
                     if (this.value && this.value.toString().match(/\./g)) {
                         if (this.dotPosition > this.cursorPosition) {
                             this.tmp = parseFloat(this.value.replace(/,/g, ''));
                             this.count = this.tmp + +this.intStep;
                             if (this.max === null || Number(this.count) <= this.max) {
-                                this.value = this.count.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot);
+                                this.value = this.count.toFixed(countAfterDot > this.decimalNumber
+                                    ? this.decimalNumber
+                                    : countAfterDot);
                             }
                         }
                         else {
@@ -8083,22 +8133,37 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
                                 if (this.customStep !== null) {
                                     this.tmp = parseFloat(this.value.replace(/,/g, ''));
                                     this.lastStep =
-                                        parseFloat(defaultStep.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot)) +
-                                            parseFloat(this.customStep.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot)) -
-                                            parseFloat(defaultStep.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot));
+                                        parseFloat(defaultStep.toFixed(countAfterDot > this.decimalNumber
+                                            ? this.decimalNumber
+                                            : countAfterDot)) +
+                                            parseFloat(this.customStep.toFixed(countAfterDot > this.decimalNumber
+                                                ? this.decimalNumber
+                                                : countAfterDot)) -
+                                            parseFloat(defaultStep.toFixed(countAfterDot > this.decimalNumber
+                                                ? this.decimalNumber
+                                                : countAfterDot));
                                     this.count = parseFloat(this.tmp) + this.lastStep;
-                                    this.value = this.count.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot).replace(/,/g, '');
+                                    this.value = this.count
+                                        .toFixed(countAfterDot > this.decimalNumber
+                                        ? this.decimalNumber
+                                        : countAfterDot)
+                                        .replace(/,/g, '');
                                 }
                                 else {
                                     this.tmp = parseFloat(this.value.replace(/,/g, ''));
                                     this.count = parseFloat(this.tmp) + defaultStep;
-                                    this.value = this.count.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot).replace(/,/g, '');
+                                    this.value = this.count
+                                        .toFixed(countAfterDot > this.decimalNumber
+                                        ? this.decimalNumber
+                                        : countAfterDot)
+                                        .replace(/,/g, '');
                                 }
                             }
                         }
                     }
                     else {
-                        if (this.max === null || Number(this.value) < parseInt(this.max.toString())) {
+                        if (this.max === null ||
+                            Number(this.value) < parseInt(this.max.toString())) {
                             this.tmp = this.value.toString().replace(/,/g, '');
                             this.count = +this.tmp + +this.intStep;
                             this.value = this.count.toString().replace(/,/g, '');
@@ -8116,20 +8181,29 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
         else {
             if (this.readonly === false) {
                 const countAfterDot = this.value !== null && this.value !== '' && this.value !== undefined
-                    ? this.value.toString().length - 1 - this.value.toString().indexOf('.')
+                    ? this.value.toString().length -
+                        1 -
+                        this.value.toString().indexOf('.')
                     : 0;
                 if (this.value == null) {
                     this.value = '0';
                 }
                 else {
-                    const defaultStep = countAfterDot > this.decimalNumber ? Math.pow(this.decimalConstant, this.decimalNumber) : Math.pow(this.decimalConstant, countAfterDot);
+                    const defaultStep = countAfterDot > this.decimalNumber
+                        ? Math.pow(this.decimalConstant, this.decimalNumber)
+                        : Math.pow(this.decimalConstant, countAfterDot);
                     this.dotPosition = this.value.toString().indexOf('.') + 1;
                     if (this.value && this.value.toString().match(/\./g)) {
                         if (this.dotPosition > this.cursorPosition) {
                             this.tmp = parseFloat(this.value.replace(/,/g, ''));
-                            this.count = parseFloat(this.value.replace(/,/g, '')) - +this.intStep;
+                            this.count =
+                                parseFloat(this.value.replace(/,/g, '')) - +this.intStep;
                             if (this.min === null || Number(this.count) >= this.min) {
-                                this.value = this.count.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot).replace(/,/g, '');
+                                this.value = this.count
+                                    .toFixed(countAfterDot > this.decimalNumber
+                                    ? this.decimalNumber
+                                    : countAfterDot)
+                                    .replace(/,/g, '');
                             }
                         }
                         else {
@@ -8137,22 +8211,33 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
                                 if (this.customStep !== null) {
                                     this.tmp = parseFloat(this.value.replace(/,/g, ''));
                                     this.lastStep =
-                                        parseFloat(defaultStep.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot)) +
-                                            parseFloat(this.customStep.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot)) -
-                                            parseFloat(defaultStep.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot));
+                                        parseFloat(defaultStep.toFixed(countAfterDot > this.decimalNumber
+                                            ? this.decimalNumber
+                                            : countAfterDot)) +
+                                            parseFloat(this.customStep.toFixed(countAfterDot > this.decimalNumber
+                                                ? this.decimalNumber
+                                                : countAfterDot)) -
+                                            parseFloat(defaultStep.toFixed(countAfterDot > this.decimalNumber
+                                                ? this.decimalNumber
+                                                : countAfterDot));
                                     this.count = parseFloat(this.tmp) - this.lastStep;
-                                    this.value = this.count.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot);
+                                    this.value = this.count.toFixed(countAfterDot > this.decimalNumber
+                                        ? this.decimalNumber
+                                        : countAfterDot);
                                 }
                                 else {
                                     this.tmp = parseFloat(this.value.replace(/,/g, ''));
                                     this.count = parseFloat(this.tmp) - defaultStep;
-                                    this.value = this.count.toFixed(countAfterDot > this.decimalNumber ? this.decimalNumber : countAfterDot);
+                                    this.value = this.count.toFixed(countAfterDot > this.decimalNumber
+                                        ? this.decimalNumber
+                                        : countAfterDot);
                                 }
                             }
                         }
                     }
                     else {
-                        if (this.min === null || Number(this.value) > parseInt(this.min.toString())) {
+                        if (this.min === null ||
+                            Number(this.value) > parseInt(this.min.toString())) {
                             this.tmp = +this.value.toString().replace(/,/g, '');
                             this.count = +this.tmp - +this.intStep;
                             this.value = this.count.toString().replace(/,/g, '');
@@ -8167,21 +8252,23 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
         this.onBlur.emit({
             component: this,
             htmlElement: this.ref.nativeElement,
-            htmlEvent: e
+            htmlEvent: e,
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { min: "min", max: "max", showSeparator: "showSeparator", showCurrency: "showCurrency", showCounter: "showCounter", scrollWeel: "scrollWeel", showDoubleCounter: "showDoubleCounter", maxLength: "maxLength", intStep: "intStep", decimalNumber: "decimalNumber", customStep: "customStep" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXNumberBoxComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n            [class.icon]=\"icon\">\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input type=\"text\" class=\"ax {{size}}\" [maxlength]=\"calcSeparator(maxLength)\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\"\n                [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\n                [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\"\n                (keypress)=\"handleKeyPress($event)\" (ngModelChange)=\"this.userQuestionUpdate.next($event)\"\n                (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick()\" (keyup)=\"handleKeyUp($event)\">\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\"\n            (click)=\"clear()\"></ax-button>\n            <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n        <div class=\"arrow-number\" *ngIf=\"showCounter && !showDoubleCounter && !readonly\" >\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\"\n                (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\"\n                (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n        </div>\n    </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.7", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, showSeparator: { classPropertyName: "showSeparator", publicName: "showSeparator", isSignal: true, isRequired: false, transformFunction: null }, showCurrency: { classPropertyName: "showCurrency", publicName: "showCurrency", isSignal: false, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: false, isRequired: false, transformFunction: null }, scrollWeel: { classPropertyName: "scrollWeel", publicName: "scrollWeel", isSignal: false, isRequired: false, transformFunction: null }, showDoubleCounter: { classPropertyName: "showDoubleCounter", publicName: "showDoubleCounter", isSignal: false, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: false, isRequired: false, transformFunction: null }, intStep: { classPropertyName: "intStep", publicName: "intStep", isSignal: false, isRequired: false, transformFunction: null }, decimalNumber: { classPropertyName: "decimalNumber", publicName: "decimalNumber", isSignal: false, isRequired: false, transformFunction: null }, customStep: { classPropertyName: "customStep", publicName: "customStep", isSignal: false, isRequired: false, transformFunction: null } }, host: { styleAttribute: "width: 100%" }, providers: [
+            { provide: AXValidatableComponent, useExisting: AXNumberBoxComponent },
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n            [class.icon]=\"icon\">\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input type=\"text\" class=\"ax {{size}}\" [maxlength]=\"calcSeparator(maxLength)\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\"\n                [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\n                [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\"\n                (keypress)=\"handleKeyPress($event)\" (ngModelChange)=\"this.userQuestionUpdate.next($event)\"\n                (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick()\" (keyup)=\"handleKeyUp($event)\">\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\"\n            (click)=\"clear()\"></ax-button>\n            <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n        <div class=\"arrow-number\" *ngIf=\"showCounter && !showDoubleCounter && !readonly\" >\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\"\n                (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\"\n                (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n        </div>\n    </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-number-box', changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXNumberBoxComponent }], template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n            [class.icon]=\"icon\">\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input type=\"text\" class=\"ax {{size}}\" [maxlength]=\"calcSeparator(maxLength)\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\"\n                [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\n                [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\"\n                (keypress)=\"handleKeyPress($event)\" (ngModelChange)=\"this.userQuestionUpdate.next($event)\"\n                (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick()\" (keyup)=\"handleKeyUp($event)\">\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\"\n            (click)=\"clear()\"></ax-button>\n            <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n        <div class=\"arrow-number\" *ngIf=\"showCounter && !showDoubleCounter && !readonly\" >\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\"\n                (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\"\n                (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n        </div>\n    </div>\n\n</div>\n" }]
+            args: [{ selector: 'ax-number-box', changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [
+                        { provide: AXValidatableComponent, useExisting: AXNumberBoxComponent },
+                    ], template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n            [class.icon]=\"icon\">\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input type=\"text\" class=\"ax {{size}}\" [maxlength]=\"calcSeparator(maxLength)\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\"\n                [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\n                [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\"\n                (keypress)=\"handleKeyPress($event)\" (ngModelChange)=\"this.userQuestionUpdate.next($event)\"\n                (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick()\" (keyup)=\"handleKeyUp($event)\">\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\"\n            (click)=\"clear()\"></ax-button>\n            <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n        <div class=\"arrow-number\" *ngIf=\"showCounter && !showDoubleCounter && !readonly\" >\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\"\n                (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\"\n                (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n        </div>\n    </div>\n\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { min: [{
                 type: Input
             }], max: [{
                 type: Input
-            }], showSeparator: [{
-                type: Input
             }], showCurrency: [{
                 type: Input
             }], showCounter: [{
@@ -12577,7 +12664,7 @@ class ColumnPropertyEditorComponent extends AXProperyEditorComponent {
         return Promise.resolve(this.columnTypeData);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: ColumnPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", 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\">\n    <div>\n        <div>{{c.fieldName}} - {{c.caption}}</div>\n    </div>\n    <div>\n        <div>\n        </div>\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(c)\"><i class=\"far fa-trash-alt\"></i></div>\n    </div>\n</div>\n<ax-button icon=\"far fa-plus\" size=\"sm\" type=\"success outline\" (click)=\"handleAddClick()\">\u0633\u062A\u0648\u0646 \u0647\u0627</ax-button>\n<ng-template #tplEdit>\n    <ax-page>\n        <ax-page-content>\n            <div class=\"container\">\n                <div class=\"ax-mrg-md\"></div>\n                <div class=\"table\">\n                    <div class=\"thead\">\n                        <div class=\"tr\">\n                            <div class=\"th\">\n                                <div style=\"width: 5px;\"></div>\n                                \u0646\u0627\u0645\n                            </div>\n                            <div class=\"th\">\u0639\u0646\u0648\u0627\u0646</div>\n                            <div class=\"th\">\u0646\u0648\u0639</div>\n                            <div class=\"th\">\u0646\u0648\u0639 \u0646\u0645\u0627\u06CC\u0634</div>\n                            <div class=\"th\">\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0647\u062F\u0631</div>\n                            <div class=\"th\">\u062A\u06A9\u0645\u06CC\u0644 \u062A\u0648\u0633\u0637 \u06A9\u0627\u0631\u0628\u0631</div>\n                            <div class=\"th\">\u0639\u0645\u0644\u06CC\u0627\u062A</div>\n                        </div>\n                    </div>\n                    <div class=\"tbody\">\n                        <div cdkDropList class=\"drag-drop-table-item\" (cdkDropListDropped)=\"drop($event)\">\n                            <div class=\"tr  drag-drop-item-box\" *ngFor=\"let c of columns\" cdkDrag>\n                                <div class=\"td\">\n                                    <div>\n                                    </div>\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.fieldName\" [allowClear]=\"true\"></ax-text-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.caption\" [allowClear]=\"true\"></ax-text-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-select-box size=\"sm\" textField=\"title\" valueField=\"id\">\n                                        <ax-data-source [provideData]=\"handleDataReceived\"></ax-data-source>\n                                    </ax-select-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.displayType\"></ax-text-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-check-box size=\"md\" [(value)]=\"c.rowHeader\"></ax-check-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-check-box size=\"md\" [(value)]=\"c.fillByUser\"></ax-check-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-button type=\"danger blank\" icon=\"far fa-trash-alt\" (click)=\"handleRemoveClick(c)\">\n                                    </ax-button>\n                                    <ax-button type=\"primary blank\" icon=\"far fa-ellipsis-v\">\n                                    </ax-button>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"ax-mrg-md\"></div>\n            <div style=\"display: flex; justify-content: flex-end;margin-left: 15px;\">\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\n                </ax-button>\n            </div>\n        </ax-page-content>\n    </ax-page>\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{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 rgba(0,0,0,.1607843137);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:#fff;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"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: AXPageComponent, selector: "ax-page" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dropdownWidth", "multiLine", "onDemandTranslate", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { kind: "component", type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", 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\">\n    <div>\n        <div>{{c.fieldName}} - {{c.caption}}</div>\n    </div>\n    <div>\n        <div>\n        </div>\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(c)\"><i class=\"far fa-trash-alt\"></i></div>\n    </div>\n</div>\n<ax-button icon=\"far fa-plus\" size=\"sm\" type=\"success outline\" (click)=\"handleAddClick()\">\u0633\u062A\u0648\u0646 \u0647\u0627</ax-button>\n<ng-template #tplEdit>\n    <ax-page>\n        <ax-page-content>\n            <div class=\"container\">\n                <div class=\"ax-mrg-md\"></div>\n                <div class=\"table\">\n                    <div class=\"thead\">\n                        <div class=\"tr\">\n                            <div class=\"th\">\n                                <div style=\"width: 5px;\"></div>\n                                \u0646\u0627\u0645\n                            </div>\n                            <div class=\"th\">\u0639\u0646\u0648\u0627\u0646</div>\n                            <div class=\"th\">\u0646\u0648\u0639</div>\n                            <div class=\"th\">\u0646\u0648\u0639 \u0646\u0645\u0627\u06CC\u0634</div>\n                            <div class=\"th\">\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0647\u062F\u0631</div>\n                            <div class=\"th\">\u062A\u06A9\u0645\u06CC\u0644 \u062A\u0648\u0633\u0637 \u06A9\u0627\u0631\u0628\u0631</div>\n                            <div class=\"th\">\u0639\u0645\u0644\u06CC\u0627\u062A</div>\n                        </div>\n                    </div>\n                    <div class=\"tbody\">\n                        <div cdkDropList class=\"drag-drop-table-item\" (cdkDropListDropped)=\"drop($event)\">\n                            <div class=\"tr  drag-drop-item-box\" *ngFor=\"let c of columns\" cdkDrag>\n                                <div class=\"td\">\n                                    <div>\n                                    </div>\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.fieldName\" [allowClear]=\"true\"></ax-text-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.caption\" [allowClear]=\"true\"></ax-text-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-select-box size=\"sm\" textField=\"title\" valueField=\"id\">\n                                        <ax-data-source [provideData]=\"handleDataReceived\"></ax-data-source>\n                                    </ax-select-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.displayType\"></ax-text-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-check-box size=\"md\" [(value)]=\"c.rowHeader\"></ax-check-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-check-box size=\"md\" [(value)]=\"c.fillByUser\"></ax-check-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-button type=\"danger blank\" icon=\"far fa-trash-alt\" (click)=\"handleRemoveClick(c)\">\n                                    </ax-button>\n                                    <ax-button type=\"primary blank\" icon=\"far fa-ellipsis-v\">\n                                    </ax-button>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"ax-mrg-md\"></div>\n            <div style=\"display: flex; justify-content: flex-end;margin-left: 15px;\">\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\n                </ax-button>\n            </div>\n        </ax-page-content>\n    </ax-page>\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{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 rgba(0,0,0,.1607843137);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:#fff;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"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: AXPageComponent, selector: "ax-page" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dropdownWidth", "multiLine", "onDemandTranslate", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { kind: "component", type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: ColumnPropertyEditorComponent, decorators: [{
             type: Component,