@acorex/components 16.20.0 → 16.20.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,28 +1,28 @@
1
1
  import * as i1$2 from '@acorex/core';
2
2
  import { AXTranslator, AXHtmlUtil, AXPlatform, AXConfig, AXDateTime, AXDateTimeRange, AXCoreModule, AXTranslatorModule, AXScrollModule, AXObjectUtil, setPropByPath, AXColorUtil } from '@acorex/core';
3
3
  import * as i0 from '@angular/core';
4
- import { ElementRef, Input, Inject, Optional, Component, Injectable, EventEmitter, Output, Directive, ContentChild, ViewChild, TemplateRef, inject, signal, HostListener, ViewEncapsulation, NgModule, input, effect, ChangeDetectionStrategy, Attribute, ContentChildren, ViewChildren, output, ChangeDetectorRef, model, contentChild, afterNextRender, contentChildren, NO_ERRORS_SCHEMA, ViewContainerRef, HostBinding } from '@angular/core';
4
+ import { ElementRef, Input, Inject, Optional, Component, Injectable, EventEmitter, Output, Directive, ContentChild, ViewChild, DOCUMENT, TemplateRef, inject, signal, HostListener, ViewEncapsulation, NgModule, input, effect, ChangeDetectionStrategy, Attribute, ContentChildren, ViewChildren, output, ChangeDetectorRef, model, contentChild, afterNextRender, contentChildren, NO_ERRORS_SCHEMA, ViewContainerRef, HostBinding } from '@angular/core';
5
5
  import * as i1 from '@angular/cdk/overlay';
6
6
  import { OverlayContainer, Overlay, OverlayModule } from '@angular/cdk/overlay';
7
- import * as i1$3 from '@angular/cdk/portal';
7
+ import * as i1$4 from '@angular/cdk/portal';
8
8
  import { TemplatePortal, ComponentPortal, CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
9
9
  import { merge, Subject, Observable, debounceTime as debounceTime$1, takeUntil, BehaviorSubject, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs';
10
10
  import * as i2 from '@angular/cdk/bidi';
11
11
  import * as i1$1 from '@angular/common';
12
- import { DOCUMENT, CommonModule } from '@angular/common';
13
- import * as i2$1 from '@angular/cdk/drag-drop';
12
+ import { CommonModule } from '@angular/common';
13
+ import * as i1$3 from '@angular/cdk/drag-drop';
14
14
  import { DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
15
15
  import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
16
- import * as i2$2 from '@angular/forms';
16
+ import * as i1$5 from '@angular/forms';
17
17
  import { FormsModule } from '@angular/forms';
18
18
  import moment from 'jalali-moment';
19
19
  import * as i3 from 'ngx-mask';
20
20
  import { NgxMaskDirective, NgxMaskPipe, provideNgxMask } from 'ngx-mask';
21
21
  import { trigger, state, transition, style, animate } from '@angular/animations';
22
- import * as i5 from '@angular/cdk/a11y';
22
+ import * as i4 from '@angular/cdk/a11y';
23
23
  import { A11yModule } from '@angular/cdk/a11y';
24
24
  import { differenceBy, cloneDeep } from 'lodash-es';
25
- import * as i1$4 from '@angular/router';
25
+ import * as i1$6 from '@angular/router';
26
26
  import { RouterModule } from '@angular/router';
27
27
 
28
28
  // @dynamic
@@ -963,11 +963,11 @@ class AXButtonComponent extends AXBaseButtonComponent {
963
963
  this.container.nativeElement.focus();
964
964
  }
965
965
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
966
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXButtonComponent, isStandalone: false, selector: "ax-button", inputs: { type: "type", icon: "icon", submitBehavior: "submitBehavior", cancelBehavior: "cancelBehavior", block: "block", loading: "loading", selected: "selected" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<button\n #container\n class=\"ax button form-control {{ type }} {{ size }} {{ cssClass }}\"\n [class.ax-button-icon]=\"\n refContent.innerText.length == 0 && refContent.children.length == 0\n \"\n [class.selected]=\"selected\"\n [class.icon]=\"icon\"\n [class.icon]=\"loading\"\n [class.disabled]=\"disabled || loading\"\n (click)=\"handleClick($event)\"\n [disabled]=\"disabled\"\n [ngStyle]=\"{ 'width.%': block ? 100 : 'auto' }\"\n [attr.tabindex]=\"tabIndex\"\n>\n <div\n class=\"button-inner-content\"\n [style.flex-direction]=\"isRtl() ? 'row-reverse' : 'row'\"\n >\n <ng-container *ngIf=\"icon && !loading\">\n <i class=\"{{ icon }} icon\"></i>\n <ng-container\n *ngIf=\"\n refContent.innerText.length == 0 && refContent.children.length == 0\n \"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"loading\">\n <i class=\"far fa-circle-notch fa-spin icon\"></i>\n <ng-container\n *ngIf=\"\n refContent.innerText.length == 0 && refContent.children.length == 0\n \"\n ></ng-container>\n </ng-container>\n <div class=\"ax-wrapper\" #refContent>\n <ng-content></ng-content>\n </div>\n </div>\n</button>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
966
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXButtonComponent, isStandalone: false, selector: "ax-button", inputs: { type: "type", icon: "icon", submitBehavior: "submitBehavior", cancelBehavior: "cancelBehavior", block: "block", loading: "loading", selected: "selected" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<button\n #container\n class=\"ax button form-control {{ type }} {{ size }} {{ cssClass }}\"\n [class.ax-button-icon]=\"\n refContent.innerText.length == 0 && refContent.children.length == 0\n \"\n [class.selected]=\"selected\"\n [class.icon]=\"icon\"\n [class.icon]=\"loading\"\n [class.disabled]=\"disabled || loading\"\n (click)=\"handleClick($event)\"\n [disabled]=\"disabled\"\n [ngStyle]=\"{ 'width.%': block ? 100 : 'auto' }\"\n [attr.tabindex]=\"tabIndex\"\n >\n <div\n class=\"button-inner-content\"\n [style.flex-direction]=\"isRtl() ? 'row-reverse' : 'row'\"\n >\n @if (icon && !loading) {\n <i class=\"{{ icon }} icon\"></i>\n @if (\n refContent.innerText.length == 0 && refContent.children.length == 0\n ) {\n }\n }\n @if (loading) {\n <i class=\"far fa-circle-notch fa-spin icon\"></i>\n @if (\n refContent.innerText.length == 0 && refContent.children.length == 0\n ) {\n }\n }\n <div class=\"ax-wrapper\" #refContent>\n <ng-content></ng-content>\n </div>\n </div>\n</button>\n", dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
967
967
  }
968
968
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXButtonComponent, decorators: [{
969
969
  type: Component,
970
- args: [{ selector: 'ax-button', encapsulation: ViewEncapsulation.None, standalone: false, template: "<button\n #container\n class=\"ax button form-control {{ type }} {{ size }} {{ cssClass }}\"\n [class.ax-button-icon]=\"\n refContent.innerText.length == 0 && refContent.children.length == 0\n \"\n [class.selected]=\"selected\"\n [class.icon]=\"icon\"\n [class.icon]=\"loading\"\n [class.disabled]=\"disabled || loading\"\n (click)=\"handleClick($event)\"\n [disabled]=\"disabled\"\n [ngStyle]=\"{ 'width.%': block ? 100 : 'auto' }\"\n [attr.tabindex]=\"tabIndex\"\n>\n <div\n class=\"button-inner-content\"\n [style.flex-direction]=\"isRtl() ? 'row-reverse' : 'row'\"\n >\n <ng-container *ngIf=\"icon && !loading\">\n <i class=\"{{ icon }} icon\"></i>\n <ng-container\n *ngIf=\"\n refContent.innerText.length == 0 && refContent.children.length == 0\n \"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"loading\">\n <i class=\"far fa-circle-notch fa-spin icon\"></i>\n <ng-container\n *ngIf=\"\n refContent.innerText.length == 0 && refContent.children.length == 0\n \"\n ></ng-container>\n </ng-container>\n <div class=\"ax-wrapper\" #refContent>\n <ng-content></ng-content>\n </div>\n </div>\n</button>\n" }]
970
+ args: [{ selector: 'ax-button', encapsulation: ViewEncapsulation.None, standalone: false, template: "<button\n #container\n class=\"ax button form-control {{ type }} {{ size }} {{ cssClass }}\"\n [class.ax-button-icon]=\"\n refContent.innerText.length == 0 && refContent.children.length == 0\n \"\n [class.selected]=\"selected\"\n [class.icon]=\"icon\"\n [class.icon]=\"loading\"\n [class.disabled]=\"disabled || loading\"\n (click)=\"handleClick($event)\"\n [disabled]=\"disabled\"\n [ngStyle]=\"{ 'width.%': block ? 100 : 'auto' }\"\n [attr.tabindex]=\"tabIndex\"\n >\n <div\n class=\"button-inner-content\"\n [style.flex-direction]=\"isRtl() ? 'row-reverse' : 'row'\"\n >\n @if (icon && !loading) {\n <i class=\"{{ icon }} icon\"></i>\n @if (\n refContent.innerText.length == 0 && refContent.children.length == 0\n ) {\n }\n }\n @if (loading) {\n <i class=\"far fa-circle-notch fa-spin icon\"></i>\n @if (\n refContent.innerText.length == 0 && refContent.children.length == 0\n ) {\n }\n }\n <div class=\"ax-wrapper\" #refContent>\n <ng-content></ng-content>\n </div>\n </div>\n</button>\n" }]
971
971
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { container: [{
972
972
  type: ViewChild,
973
973
  args: ['container', { static: true }]
@@ -1931,11 +1931,11 @@ class AXMenuComponent {
1931
1931
  }
1932
1932
  }
1933
1933
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1934
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXMenuComponent, isStandalone: false, 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 });
1934
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXMenuComponent, isStandalone: false, 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: "<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 @for (item of items; track item) { @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 @if (item.startIcon) {\n <i class=\"{{ item.startIcon }}\"></i>\n } @if (item.icon) {\n <i class=\"{{ item.icon }}\"></i>\n } @if (item.text) {\n <span class=\"ax-menu-item-text\">{{ item.text }}</span>\n }\n </span>\n <span class=\"menu-item-end-side\">\n @if (item.items && item.text) {\n <i class=\"far fa-angle-down drop-icon\"></i>\n } @if (item.endIcon) {\n <i class=\"{{ item.endIcon }}\"></i>\n }\n </span>\n </div>\n @if (item.items) {\n <ul class=\"ax-sub-menu {{ placementClass }}\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: { $implicit: item.items }\"\n >\n </ng-container>\n </ul>\n }\n </li>\n } }\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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 });
1935
1935
  }
1936
1936
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMenuComponent, decorators: [{
1937
1937
  type: Component,
1938
- args: [{ selector: 'ax-menu', encapsulation: ViewEncapsulation.None, standalone: false, 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" }]
1938
+ args: [{ selector: 'ax-menu', encapsulation: ViewEncapsulation.None, standalone: false, template: "<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 @for (item of items; track item) { @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 @if (item.startIcon) {\n <i class=\"{{ item.startIcon }}\"></i>\n } @if (item.icon) {\n <i class=\"{{ item.icon }}\"></i>\n } @if (item.text) {\n <span class=\"ax-menu-item-text\">{{ item.text }}</span>\n }\n </span>\n <span class=\"menu-item-end-side\">\n @if (item.items && item.text) {\n <i class=\"far fa-angle-down drop-icon\"></i>\n } @if (item.endIcon) {\n <i class=\"{{ item.endIcon }}\"></i>\n }\n </span>\n </div>\n @if (item.items) {\n <ul class=\"ax-sub-menu {{ placementClass }}\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: { $implicit: item.items }\"\n >\n </ng-container>\n </ul>\n }\n </li>\n } }\n</ng-template>\n" }]
1939
1939
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { _contentMenuTemplate: [{
1940
1940
  type: ContentChild,
1941
1941
  args: [TemplateRef, { static: true }]
@@ -2238,11 +2238,11 @@ class AXSchedulerDayTimeViewComponent extends AXSchedulerBaseViewComponent {
2238
2238
  return a.indexOf(event);
2239
2239
  }
2240
2240
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSchedulerDayTimeViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2241
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXSchedulerDayTimeViewComponent, isStandalone: false, 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", "cdkDropListHasAnchor"], 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 });
2241
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXSchedulerDayTimeViewComponent, isStandalone: false, 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 @for (d of slots; track d) {\n <th 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 }\n </thead>\n </table>\n <div class=\"v-scroll\">\n <table class=\"body\" cdkDropListGroup>\n <tbody>\n @for (t of times; track t) {\n <tr>\n <td>\n {{t.display}}\n </td>\n @for (d of slots; track d) {\n <td class=\"slot-cell\" cdkDropList [cdkDropListData]=\"d\"\n (cdkDropListDropped)=\"onDragDropOnDay($event,t.value)\" [attr.data-uid]=\"d.uid\">\n <div class=\"event-wrapper\">\n @for (e of d.events; track e) {\n @if (e.range.startTime.hour==t.value) {\n <div 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 }\n }\n </div>\n </td>\n }\n </tr>\n }\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$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i1$3.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: i1$3.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i1$3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "pipe", type: i1$2.AXDateTimePipe, name: "dt" }], encapsulation: i0.ViewEncapsulation.None });
2242
2242
  }
2243
2243
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSchedulerDayTimeViewComponent, decorators: [{
2244
2244
  type: Component,
2245
- args: [{ encapsulation: ViewEncapsulation.None, providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerDayTimeViewComponent }], standalone: false, 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"] }]
2245
+ args: [{ encapsulation: ViewEncapsulation.None, providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerDayTimeViewComponent }], standalone: false, template: "<div class=\"view ax-scheduler-day-time-view\">\n <table class=\"header\">\n <thead>\n <th class=\"time-column\"></th>\n @for (d of slots; track d) {\n <th 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 }\n </thead>\n </table>\n <div class=\"v-scroll\">\n <table class=\"body\" cdkDropListGroup>\n <tbody>\n @for (t of times; track t) {\n <tr>\n <td>\n {{t.display}}\n </td>\n @for (d of slots; track d) {\n <td class=\"slot-cell\" cdkDropList [cdkDropListData]=\"d\"\n (cdkDropListDropped)=\"onDragDropOnDay($event,t.value)\" [attr.data-uid]=\"d.uid\">\n <div class=\"event-wrapper\">\n @for (e of d.events; track e) {\n @if (e.range.startTime.hour==t.value) {\n <div 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 }\n }\n </div>\n </td>\n }\n </tr>\n }\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"] }]
2246
2246
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }] });
2247
2247
 
2248
2248
  class AXSchedulerMonthViewComponent extends AXSchedulerBaseViewComponent {
@@ -2441,11 +2441,11 @@ class AXSchedulerMonthViewComponent extends AXSchedulerBaseViewComponent {
2441
2441
  }
2442
2442
  }
2443
2443
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSchedulerMonthViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2444
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXSchedulerMonthViewComponent, isStandalone: false, 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", "cdkDropListHasAnchor"], 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 });
2444
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXSchedulerMonthViewComponent, isStandalone: false, 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 @for (d of weekDays; track d) {\n <th class=\"header-cell\">\n <span [class.same-week-day]=\"d.index==today.dayInWeek\"> {{d.title}}</span>\n </th>\n }\n </thead>\n </table>\n <table class=\"body\" cdkDropListGroup>\n <tbody>\n @for (r of matrixSlots; track r) {\n <tr>\n @for (d of r; track d) {\n <td 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 @if (d.range.startTime.dayInMonth==1) {\n {{d.range.startTime | dt: 'MMM'}}\n }\n {{d.range.startTime | dt: 'DD'}}\n </div>\n <div class=\"event-wrapper\">\n @for (e of d.events; track e) {\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 }\n </div>\n <div class=\"view-more\"></div>\n </td>\n }\n </tr>\n }\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$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i1$3.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 });
2445
2445
  }
2446
2446
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSchedulerMonthViewComponent, decorators: [{
2447
2447
  type: Component,
2448
- args: [{ encapsulation: ViewEncapsulation.None, providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerMonthViewComponent }], standalone: false, 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"] }]
2448
+ args: [{ encapsulation: ViewEncapsulation.None, providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerMonthViewComponent }], standalone: false, template: "<div class=\"view ax-sheduler-month-view\">\n <table class=\"header\">\n <thead>\n @for (d of weekDays; track d) {\n <th class=\"header-cell\">\n <span [class.same-week-day]=\"d.index==today.dayInWeek\"> {{d.title}}</span>\n </th>\n }\n </thead>\n </table>\n <table class=\"body\" cdkDropListGroup>\n <tbody>\n @for (r of matrixSlots; track r) {\n <tr>\n @for (d of r; track d) {\n <td 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 @if (d.range.startTime.dayInMonth==1) {\n {{d.range.startTime | dt: 'MMM'}}\n }\n {{d.range.startTime | dt: 'DD'}}\n </div>\n <div class=\"event-wrapper\">\n @for (e of d.events; track e) {\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 }\n </div>\n <div class=\"view-more\"></div>\n </td>\n }\n </tr>\n }\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"] }]
2449
2449
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { onKeydownHandler: [{
2450
2450
  type: HostListener,
2451
2451
  args: ['wheel', ['$event']]
@@ -2613,11 +2613,11 @@ class AXSchedulerAgendaViewComponent extends AXSchedulerBaseViewComponent {
2613
2613
  this.navigate(this.navigatorDate.addDay(-this.interval));
2614
2614
  }
2615
2615
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSchedulerAgendaViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2616
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXSchedulerAgendaViewComponent, isStandalone: false, 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", "cdkDropListHasAnchor"], 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 });
2616
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXSchedulerAgendaViewComponent, isStandalone: false, 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 @if (slots.length) {\n <tbody>\n @for (slot of slots; track slot) {\n <tr 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 @if (slot.events.length) {\n <ul>\n @for (e of slot.events; track e) {\n <li [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\"}} - @if (e.range.duration('days')!=0) {\n {{e.range.endTime | dt:\"HH:mm\"}}\n } @else {\n {{e.range.endTime | dt:\"YYYY-MM-DD HH:mm\"}}\n }</div>\n <div *cdkDragPreview [style.background-color]=\"e.color\" class=\"event-drag-preview\">\n {{e.title}}\n </div>\n </li>\n }\n </ul>\n }\n @if (!slot.events.length) {\n <div class=\"event-empty\">No events</div>\n }\n </td>\n </tr>\n }\n </tbody>\n } @else {\n <tbody>\n <tr>\n <td colspan=\"2\">\n <div class=\"event-empty\">No events</div>\n </td>\n </tr>\n </tbody>\n }\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$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i1$3.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: i1$3.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "pipe", type: i1$2.AXDateTimePipe, name: "dt" }], encapsulation: i0.ViewEncapsulation.None });
2617
2617
  }
2618
2618
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSchedulerAgendaViewComponent, decorators: [{
2619
2619
  type: Component,
2620
- args: [{ encapsulation: ViewEncapsulation.None, providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerAgendaViewComponent }], standalone: false, 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"] }]
2620
+ args: [{ encapsulation: ViewEncapsulation.None, providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerAgendaViewComponent }], standalone: false, template: "<div class=\"view ax-scheduler-agenda-view\">\n <table class=\"body\" cdkDropListGroup>\n @if (slots.length) {\n <tbody>\n @for (slot of slots; track slot) {\n <tr 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 @if (slot.events.length) {\n <ul>\n @for (e of slot.events; track e) {\n <li [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\"}} - @if (e.range.duration('days')!=0) {\n {{e.range.endTime | dt:\"HH:mm\"}}\n } @else {\n {{e.range.endTime | dt:\"YYYY-MM-DD HH:mm\"}}\n }</div>\n <div *cdkDragPreview [style.background-color]=\"e.color\" class=\"event-drag-preview\">\n {{e.title}}\n </div>\n </li>\n }\n </ul>\n }\n @if (!slot.events.length) {\n <div class=\"event-empty\">No events</div>\n }\n </td>\n </tr>\n }\n </tbody>\n } @else {\n <tbody>\n <tr>\n <td colspan=\"2\">\n <div class=\"event-empty\">No events</div>\n </td>\n </tr>\n </tbody>\n }\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"] }]
2621
2621
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }] });
2622
2622
 
2623
2623
  class AXSchedulerTimelineViewComponent extends AXSchedulerBaseViewComponent {
@@ -2692,11 +2692,11 @@ class AXSchedulerTimelineViewComponent extends AXSchedulerBaseViewComponent {
2692
2692
  arrangeEvents() {
2693
2693
  }
2694
2694
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSchedulerTimelineViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2695
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXSchedulerTimelineViewComponent, isStandalone: false, selector: "ng-component", providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerTimelineViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"view ax-scheduler-timeline-view\">\n <table class=\"header\">\n <colgroup>\n <col *ngFor=\"let t of times\" class=\"time-column\"/>\n </colgroup>\n <tbody>\n <ng-container *ngFor=\"let d of slots\">\n <tr>\n <td class=\"header-cell\" [attr.colspan]=\"times.length\">\n <div [class.same-week-day]=\"d.range.startTime.equal(today)\">\n {{d.range.startTime | dt: 'MMM DD, dddd'}}\n </div>\n </td>\n </tr>\n <tr>\n <td *ngFor=\"let t of times\">\n <div>\n {{t.display}}\n </div>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n <!-- <div class=\"v-scroll\">\n <table class=\"body\">\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\">\n <div class=\"event-wrapper\">\n <ng-container *ngFor=\"let e of d.events\">\n <div *ngIf=\"e.range.startTime.date.getHours()==t.value\" class=\"event\"\n [attr.data-uid]=\"e.uid\" [style.background-color]=\"e.color\">\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>\n </ng-container>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div> -->\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$2.AXDateTimePipe, name: "dt" }], encapsulation: i0.ViewEncapsulation.None });
2695
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXSchedulerTimelineViewComponent, isStandalone: false, selector: "ng-component", providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerTimelineViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"view ax-scheduler-timeline-view\">\n <table class=\"header\">\n <colgroup>\n @for (t of times; track t) {\n <col class=\"time-column\"/>\n }\n </colgroup>\n <tbody>\n @for (d of slots; track d) {\n <tr>\n <td class=\"header-cell\" [attr.colspan]=\"times.length\">\n <div [class.same-week-day]=\"d.range.startTime.equal(today)\">\n {{d.range.startTime | dt: 'MMM DD, dddd'}}\n </div>\n </td>\n </tr>\n <tr>\n @for (t of times; track t) {\n <td>\n <div>\n {{t.display}}\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n<!-- <div class=\"v-scroll\">\n<table class=\"body\">\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\">\n <div class=\"event-wrapper\">\n <ng-container *ngFor=\"let e of d.events\">\n <div *ngIf=\"e.range.startTime.date.getHours()==t.value\" class=\"event\"\n [attr.data-uid]=\"e.uid\" [style.background-color]=\"e.color\">\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>\n </ng-container>\n </div>\n </td>\n </tr>\n </tbody>\n</table>\n</div> -->\n</div>", styles: [""], dependencies: [{ kind: "pipe", type: i1$2.AXDateTimePipe, name: "dt" }], encapsulation: i0.ViewEncapsulation.None });
2696
2696
  }
2697
2697
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSchedulerTimelineViewComponent, decorators: [{
2698
2698
  type: Component,
2699
- args: [{ encapsulation: ViewEncapsulation.None, providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerTimelineViewComponent }], standalone: false, template: "<div class=\"view ax-scheduler-timeline-view\">\n <table class=\"header\">\n <colgroup>\n <col *ngFor=\"let t of times\" class=\"time-column\"/>\n </colgroup>\n <tbody>\n <ng-container *ngFor=\"let d of slots\">\n <tr>\n <td class=\"header-cell\" [attr.colspan]=\"times.length\">\n <div [class.same-week-day]=\"d.range.startTime.equal(today)\">\n {{d.range.startTime | dt: 'MMM DD, dddd'}}\n </div>\n </td>\n </tr>\n <tr>\n <td *ngFor=\"let t of times\">\n <div>\n {{t.display}}\n </div>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n <!-- <div class=\"v-scroll\">\n <table class=\"body\">\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\">\n <div class=\"event-wrapper\">\n <ng-container *ngFor=\"let e of d.events\">\n <div *ngIf=\"e.range.startTime.date.getHours()==t.value\" class=\"event\"\n [attr.data-uid]=\"e.uid\" [style.background-color]=\"e.color\">\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>\n </ng-container>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div> -->\n</div>" }]
2699
+ args: [{ encapsulation: ViewEncapsulation.None, providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerTimelineViewComponent }], standalone: false, template: "<div class=\"view ax-scheduler-timeline-view\">\n <table class=\"header\">\n <colgroup>\n @for (t of times; track t) {\n <col class=\"time-column\"/>\n }\n </colgroup>\n <tbody>\n @for (d of slots; track d) {\n <tr>\n <td class=\"header-cell\" [attr.colspan]=\"times.length\">\n <div [class.same-week-day]=\"d.range.startTime.equal(today)\">\n {{d.range.startTime | dt: 'MMM DD, dddd'}}\n </div>\n </td>\n </tr>\n <tr>\n @for (t of times; track t) {\n <td>\n <div>\n {{t.display}}\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n<!-- <div class=\"v-scroll\">\n<table class=\"body\">\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\">\n <div class=\"event-wrapper\">\n <ng-container *ngFor=\"let e of d.events\">\n <div *ngIf=\"e.range.startTime.date.getHours()==t.value\" class=\"event\"\n [attr.data-uid]=\"e.uid\" [style.background-color]=\"e.color\">\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>\n </ng-container>\n </div>\n </td>\n </tr>\n </tbody>\n</table>\n</div> -->\n</div>" }]
2700
2700
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }] });
2701
2701
 
2702
2702
  class AXToolbarSearchComponent {
@@ -2979,7 +2979,7 @@ class AXSchedulerComponent {
2979
2979
  });
2980
2980
  }
2981
2981
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSchedulerComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2982
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXSchedulerComponent, isStandalone: false, selector: "ax-scheduler", inputs: { currentView: "currentView", events: "events" }, outputs: { onEventChanged: "onEventChanged" }, queries: [{ propertyName: "viewManager", first: true, predicate: AXSchedulerViewsProperty, descendants: true, static: true }, { propertyName: "toolbarView", first: true, predicate: AXToolbarSchedulerViewsComponent, descendants: true, static: true }, { propertyName: "toolbarNavigator", first: true, predicate: AXToolbarSchedulerNavigatorComponent, descendants: true, static: true }, { propertyName: "searchInput", first: true, predicate: AXToolbarSearchComponent, descendants: true, static: true }, { propertyName: "dataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }], viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<ng-content select=\"ax-scheduler-views\"></ng-content>\n<div class=\"ax-scheduler\">\n <div class=\"ax-scheduler-toolbar\" >\n <ng-content select=\"ax-toolbar\"></ng-content>\n </div>\n <div class=\"view-container\" #container>\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n</div>", styles: [".ax-scheduler{height:100%;width:100%}.ax-scheduler .ax-scheduler-toolbar{padding:4px 5px;background:#fff;border:1px solid var(--border-color);border-bottom:0;-webkit-border-top-left-radius:4px;-webkit-border-top-right-radius:4px;-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;border-top-left-radius:4px;border-top-right-radius:4px}.ax-scheduler .event-wrapper{z-index:100}.ax-scheduler .event-wrapper .event{color:var(--primary-fore-color);border:var(--gray-light-color);display:flex;overflow:hidden;position:absolute;font-size:smaller;justify-content:space-between;padding:1px 3px}.ax-scheduler .event-wrapper .event .span{padding:1px 2px;margin:1px}.ax-scheduler .event-wrapper .event .event-title{text-overflow:ellipsis;font-weight:700;color:var(--primary-fore-color);white-space:nowrap;overflow:hidden}.ax-scheduler .event-wrapper .event:hover,.ax-scheduler .event-wrapper .event:focus{cursor:pointer;box-shadow:0 6px 10px #00000024,0 1px 18px #0000001f,0 3px 5px -1px #0003}.ax-scheduler table{border-collapse:collapse;table-layout:fixed;width:100%}.ax-scheduler table td.cell-slot{position:relative}.ax-scheduler table td.cell-slot:hover{background-color:var(--primary-lighter-color)}.ax-scheduler table .same-week-day{color:var(--primary-color)}.ax-scheduler th,.ax-scheduler td{padding:8px 16px;border:1px solid var(--border-color);text-overflow:ellipsis;white-space:nowrap;position:relative}.ax-scheduler th{overflow:hidden}.ax-scheduler .view-container{height:100%}.ax-scheduler .time-column{width:80px}.ax-scheduler .h-scroll{overflow-x:auto;overflow-y:hidden;height:100%}.ax-scheduler .v-scroll{overflow-y:auto;overflow-x:hidden}.ax-scheduler .cdk-drag-placeholder{opacity:0;display:none}.event-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;padding:5px 10px;color:#fff;cursor:grabbing;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.event-drag-placeholder{background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-scheduler-event.cdk-drag-preview{box-sizing:border-box;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;cursor:grabbing;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;color:var(--primary-fore-color);border:var(--gray-light-color);display:flex;overflow:hidden;position:absolute;font-size:smaller;justify-content:space-between;padding:1px 3px}.ax-scheduler-event.cdk-drag-preview .span{padding:1px 2px;margin:1px}.ax-scheduler-event.cdk-drag-preview .event-title{text-overflow:ellipsis;font-weight:700;color:var(--primary-fore-color);white-space:nowrap;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
2982
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXSchedulerComponent, isStandalone: false, selector: "ax-scheduler", inputs: { currentView: "currentView", events: "events" }, outputs: { onEventChanged: "onEventChanged" }, queries: [{ propertyName: "viewManager", first: true, predicate: AXSchedulerViewsProperty, descendants: true, static: true }, { propertyName: "toolbarView", first: true, predicate: AXToolbarSchedulerViewsComponent, descendants: true, static: true }, { propertyName: "toolbarNavigator", first: true, predicate: AXToolbarSchedulerNavigatorComponent, descendants: true, static: true }, { propertyName: "searchInput", first: true, predicate: AXToolbarSearchComponent, descendants: true, static: true }, { propertyName: "dataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }], viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<ng-content select=\"ax-scheduler-views\"></ng-content>\n<div class=\"ax-scheduler\">\n <div class=\"ax-scheduler-toolbar\" >\n <ng-content select=\"ax-toolbar\"></ng-content>\n </div>\n <div class=\"view-container\" #container>\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n</div>", styles: [".ax-scheduler{height:100%;width:100%}.ax-scheduler .ax-scheduler-toolbar{padding:4px 5px;background:#fff;border:1px solid var(--border-color);border-bottom:0;-webkit-border-top-left-radius:4px;-webkit-border-top-right-radius:4px;-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;border-top-left-radius:4px;border-top-right-radius:4px}.ax-scheduler .event-wrapper{z-index:100}.ax-scheduler .event-wrapper .event{color:var(--primary-fore-color);border:var(--gray-light-color);display:flex;overflow:hidden;position:absolute;font-size:smaller;justify-content:space-between;padding:1px 3px}.ax-scheduler .event-wrapper .event .span{padding:1px 2px;margin:1px}.ax-scheduler .event-wrapper .event .event-title{text-overflow:ellipsis;font-weight:700;color:var(--primary-fore-color);white-space:nowrap;overflow:hidden}.ax-scheduler .event-wrapper .event:hover,.ax-scheduler .event-wrapper .event:focus{cursor:pointer;box-shadow:0 6px 10px #00000024,0 1px 18px #0000001f,0 3px 5px -1px #0003}.ax-scheduler table{border-collapse:collapse;table-layout:fixed;width:100%}.ax-scheduler table td.cell-slot{position:relative}.ax-scheduler table td.cell-slot:hover{background-color:var(--primary-lighter-color)}.ax-scheduler table .same-week-day{color:var(--primary-color)}.ax-scheduler th,.ax-scheduler td{padding:8px 16px;border:1px solid var(--border-color);text-overflow:ellipsis;white-space:nowrap;position:relative}.ax-scheduler th{overflow:hidden}.ax-scheduler .view-container{height:100%}.ax-scheduler .time-column{width:80px}.ax-scheduler .h-scroll{overflow-x:auto;overflow-y:hidden;height:100%}.ax-scheduler .v-scroll{overflow-y:auto;overflow-x:hidden}.ax-scheduler .cdk-drag-placeholder{opacity:0;display:none}.event-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;padding:5px 10px;color:#fff;cursor:grabbing;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.event-drag-placeholder{background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-scheduler-event.cdk-drag-preview{box-sizing:border-box;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;cursor:grabbing;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;color:var(--primary-fore-color);border:var(--gray-light-color);display:flex;overflow:hidden;position:absolute;font-size:smaller;justify-content:space-between;padding:1px 3px}.ax-scheduler-event.cdk-drag-preview .span{padding:1px 2px;margin:1px}.ax-scheduler-event.cdk-drag-preview .event-title{text-overflow:ellipsis;font-weight:700;color:var(--primary-fore-color);white-space:nowrap;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
2983
2983
  }
2984
2984
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSchedulerComponent, decorators: [{
2985
2985
  type: Component,
@@ -3036,23 +3036,23 @@ class AXToolbarTitleComponent {
3036
3036
  }
3037
3037
  }
3038
3038
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXToolbarTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3039
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXToolbarTitleComponent, isStandalone: false, selector: "ax-toolbar-title", inputs: { text: "text" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarTitleComponent }], ngImport: i0, template: `
3040
- <ng-container *ngIf="text; else elseTemplate">
3041
- <div class="title">{{text}}</div>
3042
- </ng-container>
3043
- <ng-template #elseTemplate>
3044
- <ng-content></ng-content>
3045
- </ng-template>`, isInline: true, styles: [".title{height:100%;display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
3039
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXToolbarTitleComponent, isStandalone: false, selector: "ax-toolbar-title", inputs: { text: "text" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarTitleComponent }], ngImport: i0, template: `
3040
+ @if (text) {
3041
+ <div class="title">{{text}}</div>
3042
+ } @else {
3043
+ <ng-content></ng-content>
3044
+ }
3045
+ `, isInline: true, styles: [".title{height:100%;display:flex;align-items:center}\n"] });
3046
3046
  }
3047
3047
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXToolbarTitleComponent, decorators: [{
3048
3048
  type: Component,
3049
3049
  args: [{ selector: 'ax-toolbar-title', template: `
3050
- <ng-container *ngIf="text; else elseTemplate">
3051
- <div class="title">{{text}}</div>
3052
- </ng-container>
3053
- <ng-template #elseTemplate>
3054
- <ng-content></ng-content>
3055
- </ng-template>`, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarTitleComponent }], standalone: false, styles: [".title{height:100%;display:flex;align-items:center}\n"] }]
3050
+ @if (text) {
3051
+ <div class="title">{{text}}</div>
3052
+ } @else {
3053
+ <ng-content></ng-content>
3054
+ }
3055
+ `, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarTitleComponent }], standalone: false, styles: [".title{height:100%;display:flex;align-items:center}\n"] }]
3056
3056
  }], ctorParameters: () => [], propDecorators: { text: [{
3057
3057
  type: Input
3058
3058
  }] } });
@@ -3081,23 +3081,24 @@ class AXToolbarButtonGroupComponent {
3081
3081
  }
3082
3082
  }
3083
3083
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXToolbarButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3084
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXToolbarButtonGroupComponent, isStandalone: false, selector: "ax-toolbar-group-button", inputs: { items: "items", mode: "mode" }, outputs: { itemClick: "itemClick" }, providers: [
3084
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXToolbarButtonGroupComponent, isStandalone: false, selector: "ax-toolbar-group-button", inputs: { items: "items", mode: "mode" }, outputs: { itemClick: "itemClick" }, providers: [
3085
3085
  { provide: AXToolbarItem, useExisting: AXToolbarButtonGroupComponent }
3086
3086
  ], ngImport: i0, template: `
3087
3087
  <div class="btn-group" role="group">
3088
- <button
3089
- type="button"
3090
- *ngFor="let item of items"
3091
- class="btn btn-sm {{ item.style }}"
3092
- [class.active]="item.selected"
3093
- (click)="onClick(item)"
3094
- [title]="item.tooltip"
3095
- >
3096
- <i class="{{ item.icon }}"></i>
3097
- {{ item.text }}
3098
- </button>
3088
+ @for (item of items; track item) {
3089
+ <button
3090
+ type="button"
3091
+ class="btn btn-sm {{ item.style }}"
3092
+ [class.active]="item.selected"
3093
+ (click)="onClick(item)"
3094
+ [title]="item.tooltip"
3095
+ >
3096
+ <i class="{{ item.icon }}"></i>
3097
+ {{ item.text }}
3098
+ </button>
3099
+ }
3099
3100
  </div>
3100
- `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
3101
+ `, isInline: true });
3101
3102
  }
3102
3103
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXToolbarButtonGroupComponent, decorators: [{
3103
3104
  type: Component,
@@ -3105,19 +3106,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
3105
3106
  selector: "ax-toolbar-group-button",
3106
3107
  template: `
3107
3108
  <div class="btn-group" role="group">
3108
- <button
3109
- type="button"
3110
- *ngFor="let item of items"
3111
- class="btn btn-sm {{ item.style }}"
3112
- [class.active]="item.selected"
3113
- (click)="onClick(item)"
3114
- [title]="item.tooltip"
3115
- >
3116
- <i class="{{ item.icon }}"></i>
3117
- {{ item.text }}
3118
- </button>
3109
+ @for (item of items; track item) {
3110
+ <button
3111
+ type="button"
3112
+ class="btn btn-sm {{ item.style }}"
3113
+ [class.active]="item.selected"
3114
+ (click)="onClick(item)"
3115
+ [title]="item.tooltip"
3116
+ >
3117
+ <i class="{{ item.icon }}"></i>
3118
+ {{ item.text }}
3119
+ </button>
3120
+ }
3119
3121
  </div>
3120
- `,
3122
+ `,
3121
3123
  providers: [
3122
3124
  { provide: AXToolbarItem, useExisting: AXToolbarButtonGroupComponent }
3123
3125
  ],
@@ -3142,33 +3144,57 @@ class AXMenuItemComponent {
3142
3144
  showSubItems(event) {
3143
3145
  event.stopPropagation();
3144
3146
  if (this.item?.items?.length) {
3145
- this.showSubMenu.emit({ item: this.item, element: this.element, level: this.level });
3147
+ this.showSubMenu.emit({
3148
+ item: this.item,
3149
+ element: this.element,
3150
+ level: this.level,
3151
+ });
3146
3152
  }
3147
3153
  }
3148
3154
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMenuItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
3149
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXMenuItemComponent, isStandalone: false, selector: "ax-menu-item", inputs: { item: "item", level: "level" }, outputs: { showSubMenu: "showSubMenu" }, ngImport: i0, template: `
3150
- <div class="ax-menu-item {{item.style}}" [attr.data-level]="level" (click)="showSubItems($event)" [ngClass]="{'disabled': item.disable}" >
3151
- <i *ngIf="item.startIcon" class="icon {{item.startIcon}}"></i>
3152
- <span class="text">{{ item.text }}</span>
3153
- <i *ngIf="item.endIcon" class="icon {{item.endIcon}}"></i>
3154
- <i class="far fa-angle-down icon drop-icon" *ngIf="item?.items?.length && item.text"></i>
3155
- </div>
3156
- `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
3155
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXMenuItemComponent, isStandalone: false, selector: "ax-menu-item", inputs: { item: "item", level: "level" }, outputs: { showSubMenu: "showSubMenu" }, ngImport: i0, template: `
3156
+ <div
3157
+ class="ax-menu-item {{ item.style }}"
3158
+ [attr.data-level]="level"
3159
+ (click)="showSubItems($event)"
3160
+ [ngClass]="{ disabled: item.disable }"
3161
+ >
3162
+ @if (item.startIcon) {
3163
+ <i class="icon {{ item.startIcon }}"></i>
3164
+ }
3165
+ <span class="text">{{ item.text }}</span>
3166
+ @if (item.endIcon) {
3167
+ <i class="icon {{ item.endIcon }}"></i>
3168
+ } @if (item?.items?.length && item.text) {
3169
+ <i class="far fa-angle-down icon drop-icon"></i>
3170
+ }
3171
+ </div>
3172
+ `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
3157
3173
  }
3158
3174
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMenuItemComponent, decorators: [{
3159
3175
  type: Component,
3160
3176
  args: [{
3161
3177
  selector: 'ax-menu-item',
3162
3178
  template: `
3163
- <div class="ax-menu-item {{item.style}}" [attr.data-level]="level" (click)="showSubItems($event)" [ngClass]="{'disabled': item.disable}" >
3164
- <i *ngIf="item.startIcon" class="icon {{item.startIcon}}"></i>
3165
- <span class="text">{{ item.text }}</span>
3166
- <i *ngIf="item.endIcon" class="icon {{item.endIcon}}"></i>
3167
- <i class="far fa-angle-down icon drop-icon" *ngIf="item?.items?.length && item.text"></i>
3168
- </div>
3169
- `,
3179
+ <div
3180
+ class="ax-menu-item {{ item.style }}"
3181
+ [attr.data-level]="level"
3182
+ (click)="showSubItems($event)"
3183
+ [ngClass]="{ disabled: item.disable }"
3184
+ >
3185
+ @if (item.startIcon) {
3186
+ <i class="icon {{ item.startIcon }}"></i>
3187
+ }
3188
+ <span class="text">{{ item.text }}</span>
3189
+ @if (item.endIcon) {
3190
+ <i class="icon {{ item.endIcon }}"></i>
3191
+ } @if (item?.items?.length && item.text) {
3192
+ <i class="far fa-angle-down icon drop-icon"></i>
3193
+ }
3194
+ </div>
3195
+ `,
3170
3196
  encapsulation: ViewEncapsulation.None,
3171
- standalone: false
3197
+ standalone: false,
3172
3198
  }]
3173
3199
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { item: [{
3174
3200
  type: Input
@@ -3239,29 +3265,31 @@ class AXMenu2Component {
3239
3265
  this.hideOverlays();
3240
3266
  }
3241
3267
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMenu2Component, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
3242
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXMenu2Component, isStandalone: false, selector: "ax-menu2", inputs: { items: "items" }, outputs: { selected: "selected" }, host: { listeners: { "document:click": "onDocumentClick($event.target)" } }, ngImport: i0, template: `
3268
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXMenu2Component, isStandalone: false, selector: "ax-menu2", inputs: { items: "items" }, outputs: { selected: "selected" }, host: { listeners: { "document:click": "onDocumentClick($event.target)" } }, ngImport: i0, template: `
3243
3269
  <div class="ax ax-menu ax-menu-vertical" [attr.data-level]="level">
3244
- <ax-menu-item
3245
- *ngFor="let item of items"
3246
- [level]="level"
3247
- [item]="item"
3248
- (showSubMenu)="showSubmenu($event)">
3249
- </ax-menu-item>
3270
+ @for (item of items; track item) {
3271
+ <ax-menu-item
3272
+ [level]="level"
3273
+ [item]="item"
3274
+ (showSubMenu)="showSubmenu($event)">
3275
+ </ax-menu-item>
3276
+ }
3250
3277
  </div>
3251
- `, isInline: true, styles: [".ax.ax-menu{display:flex}.ax.ax-menu.ax-menu-vertical[data-level=\"0\"]{display:flex;flex-direction:row}.ax.ax-menu.ax-menu-vertical:not([data-level=\"0\"]){display:flex;transition:opacity .3s;min-width:12em;box-shadow:0 1px 7px 0 var(--ax-border-color);background:#fff;flex-direction:column}.ax.ax-menu.ax-menu-vertical .ax-menu-item{display:flex;white-space:nowrap;cursor:pointer;padding:0 10px;font-weight:400;font-size:.875rem;line-height:40px;text-decoration:none;align-items:center}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:first-child{margin-inline-end:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:last-child{margin-inline-start:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item span{flex:1}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled{opacity:.6}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: ["item", "level"], outputs: ["showSubMenu"] }], encapsulation: i0.ViewEncapsulation.None });
3278
+ `, isInline: true, styles: [".ax.ax-menu{display:flex}.ax.ax-menu.ax-menu-vertical[data-level=\"0\"]{display:flex;flex-direction:row}.ax.ax-menu.ax-menu-vertical:not([data-level=\"0\"]){display:flex;transition:opacity .3s;min-width:12em;box-shadow:0 1px 7px 0 var(--ax-border-color);background:#fff;flex-direction:column}.ax.ax-menu.ax-menu-vertical .ax-menu-item{display:flex;white-space:nowrap;cursor:pointer;padding:0 10px;font-weight:400;font-size:.875rem;line-height:40px;text-decoration:none;align-items:center}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:first-child{margin-inline-end:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:last-child{margin-inline-start:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item span{flex:1}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled{opacity:.6}\n"], dependencies: [{ kind: "component", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: ["item", "level"], outputs: ["showSubMenu"] }], encapsulation: i0.ViewEncapsulation.None });
3252
3279
  }
3253
3280
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMenu2Component, decorators: [{
3254
3281
  type: Component,
3255
3282
  args: [{ selector: 'ax-menu2', template: `
3256
3283
  <div class="ax ax-menu ax-menu-vertical" [attr.data-level]="level">
3257
- <ax-menu-item
3258
- *ngFor="let item of items"
3259
- [level]="level"
3260
- [item]="item"
3261
- (showSubMenu)="showSubmenu($event)">
3262
- </ax-menu-item>
3284
+ @for (item of items; track item) {
3285
+ <ax-menu-item
3286
+ [level]="level"
3287
+ [item]="item"
3288
+ (showSubMenu)="showSubmenu($event)">
3289
+ </ax-menu-item>
3290
+ }
3263
3291
  </div>
3264
- `, encapsulation: ViewEncapsulation.None, standalone: false, styles: [".ax.ax-menu{display:flex}.ax.ax-menu.ax-menu-vertical[data-level=\"0\"]{display:flex;flex-direction:row}.ax.ax-menu.ax-menu-vertical:not([data-level=\"0\"]){display:flex;transition:opacity .3s;min-width:12em;box-shadow:0 1px 7px 0 var(--ax-border-color);background:#fff;flex-direction:column}.ax.ax-menu.ax-menu-vertical .ax-menu-item{display:flex;white-space:nowrap;cursor:pointer;padding:0 10px;font-weight:400;font-size:.875rem;line-height:40px;text-decoration:none;align-items:center}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:first-child{margin-inline-end:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:last-child{margin-inline-start:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item span{flex:1}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled{opacity:.6}\n"] }]
3292
+ `, encapsulation: ViewEncapsulation.None, standalone: false, styles: [".ax.ax-menu{display:flex}.ax.ax-menu.ax-menu-vertical[data-level=\"0\"]{display:flex;flex-direction:row}.ax.ax-menu.ax-menu-vertical:not([data-level=\"0\"]){display:flex;transition:opacity .3s;min-width:12em;box-shadow:0 1px 7px 0 var(--ax-border-color);background:#fff;flex-direction:column}.ax.ax-menu.ax-menu-vertical .ax-menu-item{display:flex;white-space:nowrap;cursor:pointer;padding:0 10px;font-weight:400;font-size:.875rem;line-height:40px;text-decoration:none;align-items:center}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:first-child{margin-inline-end:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:last-child{margin-inline-start:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item span{flex:1}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled{opacity:.6}\n"] }]
3265
3293
  }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }], propDecorators: { items: [{
3266
3294
  type: Input
3267
3295
  }], selected: [{
@@ -3557,11 +3585,11 @@ class AXContextMenuComponent {
3557
3585
  }
3558
3586
  }
3559
3587
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXContextMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
3560
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXContextMenuComponent, isStandalone: false, selector: "ax-context-menu", inputs: { size: "size", width: "width", items: "items" }, outputs: { onItemClick: "onItemClick", onClosed: "onClosed" }, host: { classAttribute: "ax context-menu-container" }, viewQueries: [{ propertyName: "contex", first: true, predicate: ["contex"], descendants: true }], ngImport: i0, template: "<!-- <ul class=\"ax context-menu {{size}}\" [style.width.px]=\"width\">\n <ng-container *ngFor=\"let item of items\">\n <li class=\"context-menu-item\" [class.divider]=\"item.divider\" [class.disabled]=\"item.disable\">\n <div class=\"startIcon\">\n <i class=\"{{item.icon}}\"></i>\n <i class=\"{{item.startIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n </div>\n <span>{{item.text}}</span>\n\n <div class=\"endIcon\">\n <i class=\"{{item.endIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n <i class=\"far fa-angle-left ax-menu-item-drop-icon\"></i>\n </div>\n </li>\n </ng-container>\n\n</ul> -->\n\n<ul #contex class=\"ax context-menu {{size}}\" [style.width.px]=\"width\"\n [ngClass]=\"{'animate__animated animate__faster animate__fadeIn': show}\">\n <ng-container *ngTemplateOutlet=\"recursiveContextMenu; context:{ $implicit: items }\"></ng-container>\n</ul>\n\n<ng-template #recursiveContextMenu let-items>\n <li *ngFor=\"let item of items\" class=\"context-menu-item\" [class.divider]=\"item.divider\"\n [class.disabled]=\"item.disable\" (click)=\"handleClickItem(item)\">\n <div class=\"startIcon\">\n <i class=\"{{item.icon}}\"></i>\n <i class=\"{{item.startIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n </div>\n <span>{{item.text}}</span>\n\n <div class=\"endIcon\">\n <i class=\"{{item.endIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n <i class=\"far fa-angle-left ax-menu-item-drop-icon\" *ngIf=\"item.items?.length > 0\"></i>\n </div>\n <ul class=\"ax context-menu child\" *ngIf=\"item.items?.length > 0\">\n <ng-container *ngTemplateOutlet=\"recursiveContextMenu; context:{ $implicit: item.items }\">\n </ng-container>\n </ul>\n </li>\n</ng-template>", 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"] }] });
3588
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXContextMenuComponent, isStandalone: false, selector: "ax-context-menu", inputs: { size: "size", width: "width", items: "items" }, outputs: { onItemClick: "onItemClick", onClosed: "onClosed" }, host: { classAttribute: "ax context-menu-container" }, viewQueries: [{ propertyName: "contex", first: true, predicate: ["contex"], descendants: true }], ngImport: i0, template: "<!-- <ul class=\"ax context-menu {{size}}\" [style.width.px]=\"width\">\n<ng-container *ngFor=\"let item of items\">\n <li class=\"context-menu-item\" [class.divider]=\"item.divider\" [class.disabled]=\"item.disable\">\n <div class=\"startIcon\">\n <i class=\"{{item.icon}}\"></i>\n <i class=\"{{item.startIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n </div>\n <span>{{item.text}}</span>\n\n <div class=\"endIcon\">\n <i class=\"{{item.endIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n <i class=\"far fa-angle-left ax-menu-item-drop-icon\"></i>\n </div>\n </li>\n</ng-container>\n\n</ul> -->\n\n<ul #contex class=\"ax context-menu {{size}}\" [style.width.px]=\"width\"\n [ngClass]=\"{'animate__animated animate__faster animate__fadeIn': show}\">\n <ng-container *ngTemplateOutlet=\"recursiveContextMenu; context:{ $implicit: items }\"></ng-container>\n</ul>\n\n<ng-template #recursiveContextMenu let-items>\n @for (item of items; track item) {\n <li class=\"context-menu-item\" [class.divider]=\"item.divider\"\n [class.disabled]=\"item.disable\" (click)=\"handleClickItem(item)\">\n <div class=\"startIcon\">\n <i class=\"{{item.icon}}\"></i>\n @if (!item.icon && item.startIcon) {\n <i class=\"{{item.startIcon}}\"></i>\n }\n </div>\n <span>{{item.text}}</span>\n <div class=\"endIcon\">\n @if (!item.icon && item.startIcon) {\n <i class=\"{{item.endIcon}}\"></i>\n }\n @if (item.items?.length > 0) {\n <i class=\"far fa-angle-left ax-menu-item-drop-icon\"></i>\n }\n </div>\n @if (item.items?.length > 0) {\n <ul class=\"ax context-menu child\">\n <ng-container *ngTemplateOutlet=\"recursiveContextMenu; context:{ $implicit: item.items }\">\n </ng-container>\n </ul>\n }\n </li>\n }\n</ng-template>", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
3561
3589
  }
3562
3590
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXContextMenuComponent, decorators: [{
3563
3591
  type: Component,
3564
- args: [{ selector: 'ax-context-menu', host: { class: 'ax context-menu-container' }, standalone: false, template: "<!-- <ul class=\"ax context-menu {{size}}\" [style.width.px]=\"width\">\n <ng-container *ngFor=\"let item of items\">\n <li class=\"context-menu-item\" [class.divider]=\"item.divider\" [class.disabled]=\"item.disable\">\n <div class=\"startIcon\">\n <i class=\"{{item.icon}}\"></i>\n <i class=\"{{item.startIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n </div>\n <span>{{item.text}}</span>\n\n <div class=\"endIcon\">\n <i class=\"{{item.endIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n <i class=\"far fa-angle-left ax-menu-item-drop-icon\"></i>\n </div>\n </li>\n </ng-container>\n\n</ul> -->\n\n<ul #contex class=\"ax context-menu {{size}}\" [style.width.px]=\"width\"\n [ngClass]=\"{'animate__animated animate__faster animate__fadeIn': show}\">\n <ng-container *ngTemplateOutlet=\"recursiveContextMenu; context:{ $implicit: items }\"></ng-container>\n</ul>\n\n<ng-template #recursiveContextMenu let-items>\n <li *ngFor=\"let item of items\" class=\"context-menu-item\" [class.divider]=\"item.divider\"\n [class.disabled]=\"item.disable\" (click)=\"handleClickItem(item)\">\n <div class=\"startIcon\">\n <i class=\"{{item.icon}}\"></i>\n <i class=\"{{item.startIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n </div>\n <span>{{item.text}}</span>\n\n <div class=\"endIcon\">\n <i class=\"{{item.endIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n <i class=\"far fa-angle-left ax-menu-item-drop-icon\" *ngIf=\"item.items?.length > 0\"></i>\n </div>\n <ul class=\"ax context-menu child\" *ngIf=\"item.items?.length > 0\">\n <ng-container *ngTemplateOutlet=\"recursiveContextMenu; context:{ $implicit: item.items }\">\n </ng-container>\n </ul>\n </li>\n</ng-template>" }]
3592
+ args: [{ selector: 'ax-context-menu', host: { class: 'ax context-menu-container' }, standalone: false, template: "<!-- <ul class=\"ax context-menu {{size}}\" [style.width.px]=\"width\">\n<ng-container *ngFor=\"let item of items\">\n <li class=\"context-menu-item\" [class.divider]=\"item.divider\" [class.disabled]=\"item.disable\">\n <div class=\"startIcon\">\n <i class=\"{{item.icon}}\"></i>\n <i class=\"{{item.startIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n </div>\n <span>{{item.text}}</span>\n\n <div class=\"endIcon\">\n <i class=\"{{item.endIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\n <i class=\"far fa-angle-left ax-menu-item-drop-icon\"></i>\n </div>\n </li>\n</ng-container>\n\n</ul> -->\n\n<ul #contex class=\"ax context-menu {{size}}\" [style.width.px]=\"width\"\n [ngClass]=\"{'animate__animated animate__faster animate__fadeIn': show}\">\n <ng-container *ngTemplateOutlet=\"recursiveContextMenu; context:{ $implicit: items }\"></ng-container>\n</ul>\n\n<ng-template #recursiveContextMenu let-items>\n @for (item of items; track item) {\n <li class=\"context-menu-item\" [class.divider]=\"item.divider\"\n [class.disabled]=\"item.disable\" (click)=\"handleClickItem(item)\">\n <div class=\"startIcon\">\n <i class=\"{{item.icon}}\"></i>\n @if (!item.icon && item.startIcon) {\n <i class=\"{{item.startIcon}}\"></i>\n }\n </div>\n <span>{{item.text}}</span>\n <div class=\"endIcon\">\n @if (!item.icon && item.startIcon) {\n <i class=\"{{item.endIcon}}\"></i>\n }\n @if (item.items?.length > 0) {\n <i class=\"far fa-angle-left ax-menu-item-drop-icon\"></i>\n }\n </div>\n @if (item.items?.length > 0) {\n <ul class=\"ax context-menu child\">\n <ng-container *ngTemplateOutlet=\"recursiveContextMenu; context:{ $implicit: item.items }\">\n </ng-container>\n </ul>\n }\n </li>\n }\n</ng-template>" }]
3565
3593
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { size: [{
3566
3594
  type: Input
3567
3595
  }], width: [{
@@ -3859,11 +3887,11 @@ class AXSelectionListComponent extends AXValidatableComponent {
3859
3887
  });
3860
3888
  }
3861
3889
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSelectionListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
3862
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXSelectionListComponent, isStandalone: false, selector: "ax-selection-list", inputs: { readonly: "readonly", value: "value", disabled: "disabled", size: "size", direction: "direction", items: "items", mode: "mode", textField: "textField", valueField: "valueField", selectedItems: "selectedItems", selectedValues: "selectedValues" }, outputs: { selectionChanged: "selectionChanged", selectedItemsChange: "selectedItemsChange", selectedValuesChange: "selectedValuesChange" }, usesInheritance: true, ngImport: i0, template: "<ng-container\n *ngIf=\"mode == 'multiple'; then checkboxList; else radioButtonList\"\n></ng-container>\n<ng-template #checkboxList>\n <div\n class=\"ax selection-list {{ size }}\"\n style=\"flex-wrap: wrap; gap: 4px\"\n [ngClass]=\"direction\"\n >\n <ax-check-box\n label=\"{{ item[textField] }}\"\n *ngFor=\"let item of items\"\n [disabled]=\"item.disable || disabled\"\n [readonly]=\"item.readonly || readonly\"\n [value]=\"selectedValues.indexOf(item[valueField]) > -1\"\n (onValueChanged)=\"onCheckValueChange(item, $event.value)\"\n (onClick)=\"checkBoxClick($event, item)\"\n >\n </ax-check-box>\n </div>\n</ng-template>\n<ng-template #radioButtonList>\n <div\n style=\"flex-wrap: wrap; gap: 4px\"\n class=\"ax selection-list {{ size }}\"\n [ngClass]=\"direction\"\n >\n <label\n class=\"ax radio\"\n for=\"{{ uid }}\"\n [class.disabled]=\"disabled\"\n [class.readonly]=\"readonly\"\n *ngFor=\"let item of items\"\n (click)=\"onvalueChanged(item)\"\n >\n {{ item[textField] }}\n <input\n type=\"radio\"\n (change)=\"onCheckValueChange(item[valueField], true)\"\n [value]=\"item[valueField]\"\n [checked]=\"selectedValues == item[valueField]\"\n [name]=\"uid\"\n [disabled]=\"item.disable || disabled\"\n [readonly]=\"item.readonly || readonly\"\n />\n <span class=\"checkmark\"></span>\n </label>\n </div>\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: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
3890
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXSelectionListComponent, isStandalone: false, selector: "ax-selection-list", inputs: { readonly: "readonly", value: "value", disabled: "disabled", size: "size", direction: "direction", items: "items", mode: "mode", textField: "textField", valueField: "valueField", selectedItems: "selectedItems", selectedValues: "selectedValues" }, outputs: { selectionChanged: "selectionChanged", selectedItemsChange: "selectedItemsChange", selectedValuesChange: "selectedValuesChange" }, usesInheritance: true, ngImport: i0, template: "@if (mode == 'multiple') {\n <div\n class=\"ax selection-list {{ size }}\"\n style=\"flex-wrap: wrap; gap: 4px\"\n [ngClass]=\"direction\"\n >\n @for (item of items; track item) {\n <ax-check-box\n label=\"{{ item[textField] }}\"\n [disabled]=\"item.disable || disabled\"\n [readonly]=\"item.readonly || readonly\"\n [value]=\"selectedValues.indexOf(item[valueField]) > -1\"\n (onValueChanged)=\"onCheckValueChange(item, $event.value)\"\n (onClick)=\"checkBoxClick($event, item)\"\n >\n </ax-check-box>\n }\n </div>\n} @else {\n <div\n style=\"flex-wrap: wrap; gap: 4px\"\n class=\"ax selection-list {{ size }}\"\n [ngClass]=\"direction\"\n >\n @for (item of items; track item) {\n <label\n class=\"ax radio\"\n for=\"{{ uid }}\"\n [class.disabled]=\"disabled\"\n [class.readonly]=\"readonly\"\n (click)=\"onvalueChanged(item)\"\n >\n {{ item[textField] }}\n <input\n type=\"radio\"\n (change)=\"onCheckValueChange(item[valueField], true)\"\n [value]=\"item[valueField]\"\n [checked]=\"selectedValues == item[valueField]\"\n [name]=\"uid\"\n [disabled]=\"item.disable || disabled\"\n [readonly]=\"item.readonly || readonly\"\n />\n <span class=\"checkmark\"></span>\n </label>\n }\n </div>\n }\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
3863
3891
  }
3864
3892
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSelectionListComponent, decorators: [{
3865
3893
  type: Component,
3866
- args: [{ selector: 'ax-selection-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container\n *ngIf=\"mode == 'multiple'; then checkboxList; else radioButtonList\"\n></ng-container>\n<ng-template #checkboxList>\n <div\n class=\"ax selection-list {{ size }}\"\n style=\"flex-wrap: wrap; gap: 4px\"\n [ngClass]=\"direction\"\n >\n <ax-check-box\n label=\"{{ item[textField] }}\"\n *ngFor=\"let item of items\"\n [disabled]=\"item.disable || disabled\"\n [readonly]=\"item.readonly || readonly\"\n [value]=\"selectedValues.indexOf(item[valueField]) > -1\"\n (onValueChanged)=\"onCheckValueChange(item, $event.value)\"\n (onClick)=\"checkBoxClick($event, item)\"\n >\n </ax-check-box>\n </div>\n</ng-template>\n<ng-template #radioButtonList>\n <div\n style=\"flex-wrap: wrap; gap: 4px\"\n class=\"ax selection-list {{ size }}\"\n [ngClass]=\"direction\"\n >\n <label\n class=\"ax radio\"\n for=\"{{ uid }}\"\n [class.disabled]=\"disabled\"\n [class.readonly]=\"readonly\"\n *ngFor=\"let item of items\"\n (click)=\"onvalueChanged(item)\"\n >\n {{ item[textField] }}\n <input\n type=\"radio\"\n (change)=\"onCheckValueChange(item[valueField], true)\"\n [value]=\"item[valueField]\"\n [checked]=\"selectedValues == item[valueField]\"\n [name]=\"uid\"\n [disabled]=\"item.disable || disabled\"\n [readonly]=\"item.readonly || readonly\"\n />\n <span class=\"checkmark\"></span>\n </label>\n </div>\n</ng-template>\n" }]
3894
+ args: [{ selector: 'ax-selection-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (mode == 'multiple') {\n <div\n class=\"ax selection-list {{ size }}\"\n style=\"flex-wrap: wrap; gap: 4px\"\n [ngClass]=\"direction\"\n >\n @for (item of items; track item) {\n <ax-check-box\n label=\"{{ item[textField] }}\"\n [disabled]=\"item.disable || disabled\"\n [readonly]=\"item.readonly || readonly\"\n [value]=\"selectedValues.indexOf(item[valueField]) > -1\"\n (onValueChanged)=\"onCheckValueChange(item, $event.value)\"\n (onClick)=\"checkBoxClick($event, item)\"\n >\n </ax-check-box>\n }\n </div>\n} @else {\n <div\n style=\"flex-wrap: wrap; gap: 4px\"\n class=\"ax selection-list {{ size }}\"\n [ngClass]=\"direction\"\n >\n @for (item of items; track item) {\n <label\n class=\"ax radio\"\n for=\"{{ uid }}\"\n [class.disabled]=\"disabled\"\n [class.readonly]=\"readonly\"\n (click)=\"onvalueChanged(item)\"\n >\n {{ item[textField] }}\n <input\n type=\"radio\"\n (change)=\"onCheckValueChange(item[valueField], true)\"\n [value]=\"item[valueField]\"\n [checked]=\"selectedValues == item[valueField]\"\n [name]=\"uid\"\n [disabled]=\"item.disable || disabled\"\n [readonly]=\"item.readonly || readonly\"\n />\n <span class=\"checkmark\"></span>\n </label>\n }\n </div>\n }\n" }]
3867
3895
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { readonly: [{
3868
3896
  type: Input
3869
3897
  }], value: [{
@@ -4048,11 +4076,11 @@ class AXDropdownComponent extends AXBaseDropdownComponent {
4048
4076
  }
4049
4077
  focus() { }
4050
4078
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
4051
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXDropdownComponent, isStandalone: false, selector: "ax-drop-down", inputs: { rtl: "rtl", readonly: "readonly", loading: "loading", dropdownWidth: "dropdownWidth" }, outputs: { dropdownToggle: "dropdownToggle", onButtonClick: "onButtonClick" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, styleAttribute: "display:contents;" }, viewQueries: [{ propertyName: "baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "endButtons", first: true, predicate: ["endButtons"], descendants: true }, { propertyName: "dropdownEL", first: true, predicate: ["el"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item {{size}}\" [class.readonly]=\"readonly\" [attr.id]=\"uid\" [class.disabled]=\"disabled\" #el>\n <div class=\"ax items-wrapper\">\n <ng-content select=\"[start]\">\n </ng-content>\n </div>\n <div class=\"content\">\n <ng-content select=\"ng-container[header]\">\n </ng-content>\n </div>\n <div class=\"ax items-wrapper\">\n <ax-button *ngIf=\"showDropDownButton\" [disabled]=\"disabled || readonly\" [loading]=\"loading\"\n icon=\"far fa-angle-down icon\" type=\"light blank\" [size]=\"size\" (click)=\"handleArrowClick($event)\"\n [tabIndex]=\"-1\">\n </ax-button>\n <ng-content select=\"[end]\">\n </ng-content>\n </div>\n</div>\n\n<ng-template #baseTemplate>\n <!-- [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth + 'px' : 'unset'}\" -->\n <div class=\"ax-dropdown-container-bordered\" [ngStyle]=\"{'width': dropdownWidth !== '0px' ? dropdownWidth : 'unset'}\">\n <ng-content select=\"ng-container[panel]\">\n </ng-content>\n </div>\n</ng-template>", styles: [".ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-size-border-radius);box-shadow:0 0 3px #0003;margin:.2rem 0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
4079
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXDropdownComponent, isStandalone: false, selector: "ax-drop-down", inputs: { rtl: "rtl", readonly: "readonly", loading: "loading", dropdownWidth: "dropdownWidth" }, outputs: { dropdownToggle: "dropdownToggle", onButtonClick: "onButtonClick" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, styleAttribute: "display:contents;" }, viewQueries: [{ propertyName: "baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "endButtons", first: true, predicate: ["endButtons"], descendants: true }, { propertyName: "dropdownEL", first: true, predicate: ["el"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item {{size}}\" [class.readonly]=\"readonly\" [attr.id]=\"uid\" [class.disabled]=\"disabled\" #el>\n <div class=\"ax items-wrapper\">\n <ng-content select=\"[start]\">\n </ng-content>\n </div>\n <div class=\"content\">\n <ng-content select=\"ng-container[header]\">\n </ng-content>\n </div>\n <div class=\"ax items-wrapper\">\n @if (showDropDownButton) {\n <ax-button [disabled]=\"disabled || readonly\" [loading]=\"loading\"\n icon=\"far fa-angle-down icon\" type=\"light blank\" [size]=\"size\" (click)=\"handleArrowClick($event)\"\n [tabIndex]=\"-1\">\n </ax-button>\n }\n <ng-content select=\"[end]\">\n </ng-content>\n </div>\n</div>\n\n<ng-template #baseTemplate>\n <!-- [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth + 'px' : 'unset'}\" -->\n <div class=\"ax-dropdown-container-bordered\" [ngStyle]=\"{'width': dropdownWidth !== '0px' ? dropdownWidth : 'unset'}\">\n <ng-content select=\"ng-container[panel]\">\n </ng-content>\n </div>\n</ng-template>", styles: [".ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-size-border-radius);box-shadow:0 0 3px #0003;margin:.2rem 0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
4052
4080
  }
4053
4081
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDropdownComponent, decorators: [{
4054
4082
  type: Component,
4055
- args: [{ selector: 'ax-drop-down', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'display:contents;' }, standalone: false, template: "<div class=\"ax form-item {{size}}\" [class.readonly]=\"readonly\" [attr.id]=\"uid\" [class.disabled]=\"disabled\" #el>\n <div class=\"ax items-wrapper\">\n <ng-content select=\"[start]\">\n </ng-content>\n </div>\n <div class=\"content\">\n <ng-content select=\"ng-container[header]\">\n </ng-content>\n </div>\n <div class=\"ax items-wrapper\">\n <ax-button *ngIf=\"showDropDownButton\" [disabled]=\"disabled || readonly\" [loading]=\"loading\"\n icon=\"far fa-angle-down icon\" type=\"light blank\" [size]=\"size\" (click)=\"handleArrowClick($event)\"\n [tabIndex]=\"-1\">\n </ax-button>\n <ng-content select=\"[end]\">\n </ng-content>\n </div>\n</div>\n\n<ng-template #baseTemplate>\n <!-- [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth + 'px' : 'unset'}\" -->\n <div class=\"ax-dropdown-container-bordered\" [ngStyle]=\"{'width': dropdownWidth !== '0px' ? dropdownWidth : 'unset'}\">\n <ng-content select=\"ng-container[panel]\">\n </ng-content>\n </div>\n</ng-template>", styles: [".ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-size-border-radius);box-shadow:0 0 3px #0003;margin:.2rem 0}\n"] }]
4083
+ args: [{ selector: 'ax-drop-down', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'display:contents;' }, standalone: false, template: "<div class=\"ax form-item {{size}}\" [class.readonly]=\"readonly\" [attr.id]=\"uid\" [class.disabled]=\"disabled\" #el>\n <div class=\"ax items-wrapper\">\n <ng-content select=\"[start]\">\n </ng-content>\n </div>\n <div class=\"content\">\n <ng-content select=\"ng-container[header]\">\n </ng-content>\n </div>\n <div class=\"ax items-wrapper\">\n @if (showDropDownButton) {\n <ax-button [disabled]=\"disabled || readonly\" [loading]=\"loading\"\n icon=\"far fa-angle-down icon\" type=\"light blank\" [size]=\"size\" (click)=\"handleArrowClick($event)\"\n [tabIndex]=\"-1\">\n </ax-button>\n }\n <ng-content select=\"[end]\">\n </ng-content>\n </div>\n</div>\n\n<ng-template #baseTemplate>\n <!-- [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth + 'px' : 'unset'}\" -->\n <div class=\"ax-dropdown-container-bordered\" [ngStyle]=\"{'width': dropdownWidth !== '0px' ? dropdownWidth : 'unset'}\">\n <ng-content select=\"ng-container[panel]\">\n </ng-content>\n </div>\n</ng-template>", styles: [".ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-size-border-radius);box-shadow:0 0 3px #0003;margin:.2rem 0}\n"] }]
4056
4084
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { baseTemplate: [{
4057
4085
  type: ViewChild,
4058
4086
  args: ['baseTemplate']
@@ -4097,15 +4125,15 @@ class AXTextBoxComponent extends AXBaseTextComponent {
4097
4125
  this.cdr = cdr;
4098
4126
  }
4099
4127
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTextBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
4100
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXTextBoxComponent, isStandalone: false, selector: "ax-text-box", inputs: { mask: "mask", showMask: "showMask", type: "type", maxLength: "maxLength", maskGuid: "maskGuid", maskPlaceholder: "maskPlaceholder", maskKeepCharPositions: "maskKeepCharPositions", leadZeroDateTime: "leadZeroDateTime" }, host: { styleAttribute: "width: 100%" }, providers: [
4128
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXTextBoxComponent, isStandalone: false, selector: "ax-text-box", inputs: { mask: "mask", showMask: "showMask", type: "type", maxLength: "maxLength", maskGuid: "maskGuid", maskPlaceholder: "maskPlaceholder", maskKeepCharPositions: "maskKeepCharPositions", leadZeroDateTime: "leadZeroDateTime" }, host: { styleAttribute: "width: 100%" }, providers: [
4101
4129
  { provide: AXValidatableComponent, useExisting: AXTextBoxComponent },
4102
- ], 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]\"> </ng-content>\n <i class=\"form-item-icon {{ icon }}\" *ngIf=\"icon\"></i>\n </div>\n <div class=\"content\" #content>\n <div\n class=\"ax form-control input {{ size }}\"\n [class.disabled]=\"disabled\"\n [class.readonly]=\"readonly\"\n [class.icon]=\"icon\"\n >\n <input\n #input\n [autocomplete]=\"autocomplete\"\n [name]=\"name\"\n class=\"ax {{ size }}\"\n [attr.type]=\"type\"\n [attr.maxlength]=\"maxLength\"\n [mask]=\"mask\"\n [leadZeroDateTime]=\"leadZeroDateTime\"\n [showMaskTyped]=\"showMask\"\n [(ngModel)]=\"value\"\n placeholder=\"{{ placeholder }}\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [ngClass]=\"setTextAlign()\"\n [class.clear]=\"value && allowClear\"\n (focus)=\"handleInputFocus($event)\"\n (blur)=\"handleInputBlur($event)\"\n />\n </div>\n </div>\n <div class=\"ax items-wrapper\">\n <ax-button\n *ngIf=\"value && allowClear\"\n icon=\"far fa-times\"\n type=\"danger blank\"\n (click)=\"clear()\"\n ></ax-button>\n <ng-content select=\"[end]\"> </ng-content>\n </div>\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: i3.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
4130
+ ], 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]\"> </ng-content>\n @if (icon) {\n <i class=\"form-item-icon {{ icon }}\"></i>\n }\n </div>\n <div class=\"content\" #content>\n <div\n class=\"ax form-control input {{ size }}\"\n [class.disabled]=\"disabled\"\n [class.readonly]=\"readonly\"\n [class.icon]=\"icon\"\n >\n <input\n #input\n [autocomplete]=\"autocomplete\"\n [name]=\"name\"\n class=\"ax {{ size }}\"\n [attr.type]=\"type\"\n [attr.maxlength]=\"maxLength\"\n [mask]=\"mask\"\n [leadZeroDateTime]=\"leadZeroDateTime\"\n [showMaskTyped]=\"showMask\"\n [(ngModel)]=\"value\"\n placeholder=\"{{ placeholder }}\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [ngClass]=\"setTextAlign()\"\n [class.clear]=\"value && allowClear\"\n (focus)=\"handleInputFocus($event)\"\n (blur)=\"handleInputBlur($event)\"\n />\n </div>\n </div>\n <div class=\"ax items-wrapper\">\n @if (value && allowClear) {\n <ax-button\n icon=\"far fa-times\"\n type=\"danger blank\"\n (click)=\"clear()\"\n ></ax-button>\n }\n <ng-content select=\"[end]\"> </ng-content>\n </div>\n </div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i3.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: i1$5.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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
4103
4131
  }
4104
4132
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTextBoxComponent, decorators: [{
4105
4133
  type: Component,
4106
4134
  args: [{ selector: 'ax-text-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [
4107
4135
  { provide: AXValidatableComponent, useExisting: AXTextBoxComponent },
4108
- ], standalone: false, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n <div class=\"ax items-wrapper\">\n <ng-content select=\"[start]\"> </ng-content>\n <i class=\"form-item-icon {{ icon }}\" *ngIf=\"icon\"></i>\n </div>\n <div class=\"content\" #content>\n <div\n class=\"ax form-control input {{ size }}\"\n [class.disabled]=\"disabled\"\n [class.readonly]=\"readonly\"\n [class.icon]=\"icon\"\n >\n <input\n #input\n [autocomplete]=\"autocomplete\"\n [name]=\"name\"\n class=\"ax {{ size }}\"\n [attr.type]=\"type\"\n [attr.maxlength]=\"maxLength\"\n [mask]=\"mask\"\n [leadZeroDateTime]=\"leadZeroDateTime\"\n [showMaskTyped]=\"showMask\"\n [(ngModel)]=\"value\"\n placeholder=\"{{ placeholder }}\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [ngClass]=\"setTextAlign()\"\n [class.clear]=\"value && allowClear\"\n (focus)=\"handleInputFocus($event)\"\n (blur)=\"handleInputBlur($event)\"\n />\n </div>\n </div>\n <div class=\"ax items-wrapper\">\n <ax-button\n *ngIf=\"value && allowClear\"\n icon=\"far fa-times\"\n type=\"danger blank\"\n (click)=\"clear()\"\n ></ax-button>\n <ng-content select=\"[end]\"> </ng-content>\n </div>\n</div>\n" }]
4136
+ ], standalone: false, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n <div class=\"ax items-wrapper\">\n <ng-content select=\"[start]\"> </ng-content>\n @if (icon) {\n <i class=\"form-item-icon {{ icon }}\"></i>\n }\n </div>\n <div class=\"content\" #content>\n <div\n class=\"ax form-control input {{ size }}\"\n [class.disabled]=\"disabled\"\n [class.readonly]=\"readonly\"\n [class.icon]=\"icon\"\n >\n <input\n #input\n [autocomplete]=\"autocomplete\"\n [name]=\"name\"\n class=\"ax {{ size }}\"\n [attr.type]=\"type\"\n [attr.maxlength]=\"maxLength\"\n [mask]=\"mask\"\n [leadZeroDateTime]=\"leadZeroDateTime\"\n [showMaskTyped]=\"showMask\"\n [(ngModel)]=\"value\"\n placeholder=\"{{ placeholder }}\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [ngClass]=\"setTextAlign()\"\n [class.clear]=\"value && allowClear\"\n (focus)=\"handleInputFocus($event)\"\n (blur)=\"handleInputBlur($event)\"\n />\n </div>\n </div>\n <div class=\"ax items-wrapper\">\n @if (value && allowClear) {\n <ax-button\n icon=\"far fa-times\"\n type=\"danger blank\"\n (click)=\"clear()\"\n ></ax-button>\n }\n <ng-content select=\"[end]\"> </ng-content>\n </div>\n </div>\n" }]
4109
4137
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { mask: [{
4110
4138
  type: Input
4111
4139
  }], showMask: [{
@@ -5217,13 +5245,13 @@ class AXDatePickerComponent extends AXValidatableComponent {
5217
5245
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
5218
5246
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXDatePickerComponent, isStandalone: false, selector: "ax-date-picker", inputs: { selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: true, isRequired: false, transformFunction: null }, dayStyle: { classPropertyName: "dayStyle", publicName: "dayStyle", isSignal: false, isRequired: false, transformFunction: null }, dayMinMaxResoan: { classPropertyName: "dayMinMaxResoan", publicName: "dayMinMaxResoan", isSignal: false, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: false, isRequired: false, transformFunction: null }, textAlign: { classPropertyName: "textAlign", publicName: "textAlign", isSignal: false, isRequired: false, transformFunction: null }, showToday: { classPropertyName: "showToday", publicName: "showToday", isSignal: false, isRequired: false, transformFunction: null }, selectableHoliday: { classPropertyName: "selectableHoliday", publicName: "selectableHoliday", isSignal: false, isRequired: false, transformFunction: null }, dateType: { classPropertyName: "dateType", publicName: "dateType", isSignal: false, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: false, isRequired: false, transformFunction: null }, openByClick: { classPropertyName: "openByClick", publicName: "openByClick", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { typeChange: "typeChange", onValueChanged: "onValueChanged", valueChange: "valueChange" }, host: { styleAttribute: "width: 100%" }, providers: [
5219
5247
  { provide: AXValidatableComponent, useExisting: AXDatePickerComponent },
5220
- ], queries: [{ propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down\n [readonly]=\"readonly\"\n [fitParent]=\"false\"\n [size]=\"size\"\n [showDropDownButton]=\"false\"\n icon=\"far fa-calendar-alt\"\n #dropdown\n maxHeight=\"unset\"\n>\n <ng-container start>\n <ng-content select=\"[start]\"> </ng-content>\n </ng-container>\n <ng-container header>\n <ax-text-box\n [mask]=\"dateType\"\n [showMask]=\"true\"\n #input\n [textAlign]=\"textAlign\"\n [value]=\"text\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [size]=\"size\"\n (onkey)=\"handleKeyPress($event)\"\n (onBlur)=\"handleInputBlur()\"\n (click)=\"handleClick()\"\n (onValueChanged)=\"textChange($event)\"\n ></ax-text-box>\n </ng-container>\n <ng-container panel>\n @if (_renderPicker) {\n <ax-calendar-box\n #calendarRef\n [showTodayButton]=\"showTodayButton\"\n [selectableHoliday]=\"selectableHoliday\"\n [min]=\"min()\"\n [max]=\"max()\"\n [size]=\"size\"\n (onClick)=\"onClick($event)\"\n (onValueChanged)=\"onDateChange($event)\"\n [type]=\"type\"\n [(value)]=\"calendarValue\"\n [dayStyle]=\"dayStyle\"\n [dayMinMaxResoan]=\"dayMinMaxResoan\"\n [selectedDates]=\"selectedDates()\"\n >\n </ax-calendar-box>\n }\n </ng-container>\n <ng-container end>\n <ax-button\n end\n *ngIf=\"allowClear && value\"\n [disabled]=\"disabled\"\n icon=\"far fa-times icon\"\n type=\"blank danger\"\n (click)=\"clearTextBox()\"\n [size]=\"size\"\n [tabIndex]=\"-1\"\n >\n </ax-button>\n <ax-button\n end\n icon=\"far fa-calendar-alt icon\"\n type=\"light blank\"\n (click)=\"handleButtonClick()\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n [tabIndex]=\"-1\"\n ></ax-button>\n <ng-content select=\"[end]\"> </ng-content>\n </ng-container>\n</ax-drop-down>\n", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: ["selectedDates", "size", "type", "locale", "dir", "min", "max", "selectableHoliday", "dayStyle", "dayMinMaxResoan", "showTodayButton", "view", "depth", "value"], outputs: ["onValueChanged", "onClick", "valueChange"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }], encapsulation: i0.ViewEncapsulation.None });
5248
+ ], queries: [{ propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down\n [readonly]=\"readonly\"\n [fitParent]=\"false\"\n [size]=\"size\"\n [showDropDownButton]=\"false\"\n icon=\"far fa-calendar-alt\"\n #dropdown\n maxHeight=\"unset\"\n >\n <ng-container start>\n <ng-content select=\"[start]\"> </ng-content>\n </ng-container>\n <ng-container header>\n <ax-text-box\n [mask]=\"dateType\"\n [showMask]=\"true\"\n #input\n [textAlign]=\"textAlign\"\n [value]=\"text\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [size]=\"size\"\n (onkey)=\"handleKeyPress($event)\"\n (onBlur)=\"handleInputBlur()\"\n (click)=\"handleClick()\"\n (onValueChanged)=\"textChange($event)\"\n ></ax-text-box>\n </ng-container>\n <ng-container panel>\n @if (_renderPicker) {\n <ax-calendar-box\n #calendarRef\n [showTodayButton]=\"showTodayButton\"\n [selectableHoliday]=\"selectableHoliday\"\n [min]=\"min()\"\n [max]=\"max()\"\n [size]=\"size\"\n (onClick)=\"onClick($event)\"\n (onValueChanged)=\"onDateChange($event)\"\n [type]=\"type\"\n [(value)]=\"calendarValue\"\n [dayStyle]=\"dayStyle\"\n [dayMinMaxResoan]=\"dayMinMaxResoan\"\n [selectedDates]=\"selectedDates()\"\n >\n </ax-calendar-box>\n }\n </ng-container>\n <ng-container end>\n @if (allowClear && value) {\n <ax-button\n end\n [disabled]=\"disabled\"\n icon=\"far fa-times icon\"\n type=\"blank danger\"\n (click)=\"clearTextBox()\"\n [size]=\"size\"\n [tabIndex]=\"-1\"\n >\n </ax-button>\n }\n <ax-button\n end\n icon=\"far fa-calendar-alt icon\"\n type=\"light blank\"\n (click)=\"handleButtonClick()\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n [tabIndex]=\"-1\"\n ></ax-button>\n <ng-content select=\"[end]\"> </ng-content>\n </ng-container>\n</ax-drop-down>\n", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"], dependencies: [{ kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: ["selectedDates", "size", "type", "locale", "dir", "min", "max", "selectableHoliday", "dayStyle", "dayMinMaxResoan", "showTodayButton", "view", "depth", "value"], outputs: ["onValueChanged", "onClick", "valueChange"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }], encapsulation: i0.ViewEncapsulation.None });
5221
5249
  }
5222
5250
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDatePickerComponent, decorators: [{
5223
5251
  type: Component,
5224
5252
  args: [{ selector: 'ax-date-picker', encapsulation: ViewEncapsulation.None, providers: [
5225
5253
  { provide: AXValidatableComponent, useExisting: AXDatePickerComponent },
5226
- ], host: { style: 'width: 100%' }, standalone: false, template: "<ax-drop-down\n [readonly]=\"readonly\"\n [fitParent]=\"false\"\n [size]=\"size\"\n [showDropDownButton]=\"false\"\n icon=\"far fa-calendar-alt\"\n #dropdown\n maxHeight=\"unset\"\n>\n <ng-container start>\n <ng-content select=\"[start]\"> </ng-content>\n </ng-container>\n <ng-container header>\n <ax-text-box\n [mask]=\"dateType\"\n [showMask]=\"true\"\n #input\n [textAlign]=\"textAlign\"\n [value]=\"text\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [size]=\"size\"\n (onkey)=\"handleKeyPress($event)\"\n (onBlur)=\"handleInputBlur()\"\n (click)=\"handleClick()\"\n (onValueChanged)=\"textChange($event)\"\n ></ax-text-box>\n </ng-container>\n <ng-container panel>\n @if (_renderPicker) {\n <ax-calendar-box\n #calendarRef\n [showTodayButton]=\"showTodayButton\"\n [selectableHoliday]=\"selectableHoliday\"\n [min]=\"min()\"\n [max]=\"max()\"\n [size]=\"size\"\n (onClick)=\"onClick($event)\"\n (onValueChanged)=\"onDateChange($event)\"\n [type]=\"type\"\n [(value)]=\"calendarValue\"\n [dayStyle]=\"dayStyle\"\n [dayMinMaxResoan]=\"dayMinMaxResoan\"\n [selectedDates]=\"selectedDates()\"\n >\n </ax-calendar-box>\n }\n </ng-container>\n <ng-container end>\n <ax-button\n end\n *ngIf=\"allowClear && value\"\n [disabled]=\"disabled\"\n icon=\"far fa-times icon\"\n type=\"blank danger\"\n (click)=\"clearTextBox()\"\n [size]=\"size\"\n [tabIndex]=\"-1\"\n >\n </ax-button>\n <ax-button\n end\n icon=\"far fa-calendar-alt icon\"\n type=\"light blank\"\n (click)=\"handleButtonClick()\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n [tabIndex]=\"-1\"\n ></ax-button>\n <ng-content select=\"[end]\"> </ng-content>\n </ng-container>\n</ax-drop-down>\n", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"] }]
5254
+ ], host: { style: 'width: 100%' }, standalone: false, template: "<ax-drop-down\n [readonly]=\"readonly\"\n [fitParent]=\"false\"\n [size]=\"size\"\n [showDropDownButton]=\"false\"\n icon=\"far fa-calendar-alt\"\n #dropdown\n maxHeight=\"unset\"\n >\n <ng-container start>\n <ng-content select=\"[start]\"> </ng-content>\n </ng-container>\n <ng-container header>\n <ax-text-box\n [mask]=\"dateType\"\n [showMask]=\"true\"\n #input\n [textAlign]=\"textAlign\"\n [value]=\"text\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [size]=\"size\"\n (onkey)=\"handleKeyPress($event)\"\n (onBlur)=\"handleInputBlur()\"\n (click)=\"handleClick()\"\n (onValueChanged)=\"textChange($event)\"\n ></ax-text-box>\n </ng-container>\n <ng-container panel>\n @if (_renderPicker) {\n <ax-calendar-box\n #calendarRef\n [showTodayButton]=\"showTodayButton\"\n [selectableHoliday]=\"selectableHoliday\"\n [min]=\"min()\"\n [max]=\"max()\"\n [size]=\"size\"\n (onClick)=\"onClick($event)\"\n (onValueChanged)=\"onDateChange($event)\"\n [type]=\"type\"\n [(value)]=\"calendarValue\"\n [dayStyle]=\"dayStyle\"\n [dayMinMaxResoan]=\"dayMinMaxResoan\"\n [selectedDates]=\"selectedDates()\"\n >\n </ax-calendar-box>\n }\n </ng-container>\n <ng-container end>\n @if (allowClear && value) {\n <ax-button\n end\n [disabled]=\"disabled\"\n icon=\"far fa-times icon\"\n type=\"blank danger\"\n (click)=\"clearTextBox()\"\n [size]=\"size\"\n [tabIndex]=\"-1\"\n >\n </ax-button>\n }\n <ax-button\n end\n icon=\"far fa-calendar-alt icon\"\n type=\"light blank\"\n (click)=\"handleButtonClick()\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n [tabIndex]=\"-1\"\n ></ax-button>\n <ng-content select=\"[end]\"> </ng-content>\n </ng-container>\n</ax-drop-down>\n", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"] }]
5227
5255
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { dropdown: [{
5228
5256
  type: ViewChild,
5229
5257
  args: ['dropdown', { static: true }]
@@ -5478,23 +5506,27 @@ class AXFilterColumnNumberComponent extends AXFilterColumnComponent {
5478
5506
  };
5479
5507
  }
5480
5508
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFilterColumnNumberComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
5481
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXFilterColumnNumberComponent, isStandalone: false, selector: "ax-filter-column-number", providers: [
5509
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXFilterColumnNumberComponent, isStandalone: false, selector: "ax-filter-column-number", providers: [
5482
5510
  { provide: AXFilterColumnComponent, useExisting: AXFilterColumnNumberComponent }
5483
5511
  ], usesInheritance: true, ngImport: i0, template: `
5484
5512
  <div class="ax-filter-section">
5485
- <div>
5513
+ <div>
5486
5514
  <select (ngModelChange)="onOperatorChange($event)" class="form-control form-control-sm" [(ngModel)]="operator">
5487
- <option *ngFor="let o of operators" value="{{o.value}}">
5488
- {{o.title}}
5515
+ @for (o of operators; track o) {
5516
+ <option value="{{o.value}}">
5517
+ {{o.title}}
5489
5518
  </option>
5519
+ }
5490
5520
  </select>
5521
+ </div>
5522
+ <div>
5523
+ @if (operator!='is-not-empty' && operator!='is-empty') {
5524
+ <ax-text-box placeholder="Type here" (textChange)="onTextChange($event)" [(value)]="value">
5525
+ </ax-text-box>
5526
+ }
5527
+ </div>
5491
5528
  </div>
5492
- <div>
5493
- <ax-text-box placeholder="Type here" (textChange)="onTextChange($event)" [(value)]="value" *ngIf="operator!='is-not-empty' && operator!='is-empty'">
5494
- </ax-text-box>
5495
- </div>
5496
- </div>
5497
- `, isInline: true, 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$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }] });
5529
+ `, isInline: true, dependencies: [{ kind: "directive", type: i1$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }] });
5498
5530
  }
5499
5531
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFilterColumnNumberComponent, decorators: [{
5500
5532
  type: Component,
@@ -5502,18 +5534,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
5502
5534
  selector: 'ax-filter-column-number',
5503
5535
  template: `
5504
5536
  <div class="ax-filter-section">
5505
- <div>
5537
+ <div>
5506
5538
  <select (ngModelChange)="onOperatorChange($event)" class="form-control form-control-sm" [(ngModel)]="operator">
5507
- <option *ngFor="let o of operators" value="{{o.value}}">
5508
- {{o.title}}
5539
+ @for (o of operators; track o) {
5540
+ <option value="{{o.value}}">
5541
+ {{o.title}}
5509
5542
  </option>
5543
+ }
5510
5544
  </select>
5545
+ </div>
5546
+ <div>
5547
+ @if (operator!='is-not-empty' && operator!='is-empty') {
5548
+ <ax-text-box placeholder="Type here" (textChange)="onTextChange($event)" [(value)]="value">
5549
+ </ax-text-box>
5550
+ }
5551
+ </div>
5511
5552
  </div>
5512
- <div>
5513
- <ax-text-box placeholder="Type here" (textChange)="onTextChange($event)" [(value)]="value" *ngIf="operator!='is-not-empty' && operator!='is-empty'">
5514
- </ax-text-box>
5515
- </div>
5516
- </div>
5517
5553
  `,
5518
5554
  providers: [
5519
5555
  { provide: AXFilterColumnComponent, useExisting: AXFilterColumnNumberComponent }
@@ -5662,23 +5698,27 @@ class AXFilterColumnStringComponent extends AXFilterColumnComponent {
5662
5698
  };
5663
5699
  }
5664
5700
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFilterColumnStringComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
5665
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXFilterColumnStringComponent, isStandalone: false, selector: "ax-filter-column-string", providers: [
5701
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXFilterColumnStringComponent, isStandalone: false, selector: "ax-filter-column-string", providers: [
5666
5702
  { provide: AXFilterColumnComponent, useExisting: AXFilterColumnStringComponent }
5667
5703
  ], usesInheritance: true, ngImport: i0, template: `
5668
5704
  <div class="ax-filter-section">
5669
- <div>
5705
+ <div>
5670
5706
  <select (ngModelChange)="onOperatorChange($event)" class="form-control form-control-sm" [(ngModel)]="operator">
5671
- <option *ngFor="let o of operators" value="{{o.value}}">
5672
- {{o.title}}
5707
+ @for (o of operators; track o) {
5708
+ <option value="{{o.value}}">
5709
+ {{o.title}}
5673
5710
  </option>
5711
+ }
5674
5712
  </select>
5713
+ </div>
5714
+ <div>
5715
+ @if (operator!='is-not-empty' && operator!='is-empty') {
5716
+ <ax-text-box placeholder="Type here" (textChange)="onTextChange($event)" [(value)]="value">
5717
+ </ax-text-box>
5718
+ }
5719
+ </div>
5675
5720
  </div>
5676
- <div>
5677
- <ax-text-box placeholder="Type here" (textChange)="onTextChange($event)" [(value)]="value" *ngIf="operator!='is-not-empty' && operator!='is-empty'">
5678
- </ax-text-box>
5679
- </div>
5680
- </div>
5681
- `, isInline: true, 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$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }] });
5721
+ `, isInline: true, dependencies: [{ kind: "directive", type: i1$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }] });
5682
5722
  }
5683
5723
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFilterColumnStringComponent, decorators: [{
5684
5724
  type: Component,
@@ -5686,18 +5726,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
5686
5726
  selector: 'ax-filter-column-string',
5687
5727
  template: `
5688
5728
  <div class="ax-filter-section">
5689
- <div>
5729
+ <div>
5690
5730
  <select (ngModelChange)="onOperatorChange($event)" class="form-control form-control-sm" [(ngModel)]="operator">
5691
- <option *ngFor="let o of operators" value="{{o.value}}">
5692
- {{o.title}}
5731
+ @for (o of operators; track o) {
5732
+ <option value="{{o.value}}">
5733
+ {{o.title}}
5693
5734
  </option>
5735
+ }
5694
5736
  </select>
5737
+ </div>
5738
+ <div>
5739
+ @if (operator!='is-not-empty' && operator!='is-empty') {
5740
+ <ax-text-box placeholder="Type here" (textChange)="onTextChange($event)" [(value)]="value">
5741
+ </ax-text-box>
5742
+ }
5743
+ </div>
5695
5744
  </div>
5696
- <div>
5697
- <ax-text-box placeholder="Type here" (textChange)="onTextChange($event)" [(value)]="value" *ngIf="operator!='is-not-empty' && operator!='is-empty'">
5698
- </ax-text-box>
5699
- </div>
5700
- </div>
5701
5745
  `,
5702
5746
  providers: [
5703
5747
  { provide: AXFilterColumnComponent, useExisting: AXFilterColumnStringComponent }
@@ -5862,7 +5906,7 @@ class AXPanelBoxComponent {
5862
5906
  }
5863
5907
  }
5864
5908
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPanelBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5865
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXPanelBoxComponent, isStandalone: false, selector: "ax-panel-box", inputs: { size: "size", type: "type", caption: "caption", collapsed: "collapsed", allowCollapse: "allowCollapse" }, outputs: { collapsedChange: "collapsedChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ax-panel-box ax {{size}}\">\n <ng-container *ngIf=\"headerTemplate; else elseTemplate\">\n <header [class.toggle]=\"allowCollapse\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\">\n </ng-container>\n </header>\n </ng-container>\n <ng-template #elseTemplate>\n <header class=\"ax panel {{type}}\" [class.toggle]=\"allowCollapse\" (click)=\"toggle()\">\n <div [innerHTML]=\"caption\"></div>\n <div *ngIf=\"allowCollapse\">\n <i [ngClass]=\"{ 'far fa-minus-square' : !collapsed ,'fas fa-plus-square' : collapsed }\"></i>\n </div>\n </header>\n </ng-template>\n <div class=\"content\" [@visibilityChanged]=\"collapsed ? 'hidden' : 'shown'\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".ax-panel-box{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;border-radius:var(--ax-size-border-radius);overflow:hidden;font-family:inherit;font-size:inherit;position:relative}.ax-panel-box header{display:flex;flex:1;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ax-border-color);padding:.8em}.ax-panel-box .content{padding:.8em;overflow:hidden}.ax-panel-box .toggle{cursor:pointer}\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: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
5909
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXPanelBoxComponent, isStandalone: false, selector: "ax-panel-box", inputs: { size: "size", type: "type", caption: "caption", collapsed: "collapsed", allowCollapse: "allowCollapse" }, outputs: { collapsedChange: "collapsedChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ax-panel-box ax {{size}}\">\n @if (headerTemplate) {\n <header [class.toggle]=\"allowCollapse\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\">\n </ng-container>\n </header>\n } @else {\n <header class=\"ax panel {{type}}\" [class.toggle]=\"allowCollapse\" (click)=\"toggle()\">\n <div [innerHTML]=\"caption\"></div>\n @if (allowCollapse) {\n <div>\n <i [ngClass]=\"{ 'far fa-minus-square' : !collapsed ,'fas fa-plus-square' : collapsed }\"></i>\n </div>\n }\n </header>\n }\n <div class=\"content\" [@visibilityChanged]=\"collapsed ? 'hidden' : 'shown'\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".ax-panel-box{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;border-radius:var(--ax-size-border-radius);overflow:hidden;font-family:inherit;font-size:inherit;position:relative}.ax-panel-box header{display:flex;flex:1;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ax-border-color);padding:.8em}.ax-panel-box .content{padding:.8em;overflow:hidden}.ax-panel-box .toggle{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
5866
5910
  trigger("visibilityChanged", [
5867
5911
  state("shown", style({
5868
5912
  height: "*",
@@ -5896,7 +5940,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
5896
5940
  transition("shown => hidden", animate("200ms")),
5897
5941
  transition("hidden => shown", animate("200ms")),
5898
5942
  ]),
5899
- ], standalone: false, template: "<div class=\"ax-panel-box ax {{size}}\">\n <ng-container *ngIf=\"headerTemplate; else elseTemplate\">\n <header [class.toggle]=\"allowCollapse\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\">\n </ng-container>\n </header>\n </ng-container>\n <ng-template #elseTemplate>\n <header class=\"ax panel {{type}}\" [class.toggle]=\"allowCollapse\" (click)=\"toggle()\">\n <div [innerHTML]=\"caption\"></div>\n <div *ngIf=\"allowCollapse\">\n <i [ngClass]=\"{ 'far fa-minus-square' : !collapsed ,'fas fa-plus-square' : collapsed }\"></i>\n </div>\n </header>\n </ng-template>\n <div class=\"content\" [@visibilityChanged]=\"collapsed ? 'hidden' : 'shown'\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".ax-panel-box{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;border-radius:var(--ax-size-border-radius);overflow:hidden;font-family:inherit;font-size:inherit;position:relative}.ax-panel-box header{display:flex;flex:1;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ax-border-color);padding:.8em}.ax-panel-box .content{padding:.8em;overflow:hidden}.ax-panel-box .toggle{cursor:pointer}\n"] }]
5943
+ ], standalone: false, template: "<div class=\"ax-panel-box ax {{size}}\">\n @if (headerTemplate) {\n <header [class.toggle]=\"allowCollapse\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\">\n </ng-container>\n </header>\n } @else {\n <header class=\"ax panel {{type}}\" [class.toggle]=\"allowCollapse\" (click)=\"toggle()\">\n <div [innerHTML]=\"caption\"></div>\n @if (allowCollapse) {\n <div>\n <i [ngClass]=\"{ 'far fa-minus-square' : !collapsed ,'fas fa-plus-square' : collapsed }\"></i>\n </div>\n }\n </header>\n }\n <div class=\"content\" [@visibilityChanged]=\"collapsed ? 'hidden' : 'shown'\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".ax-panel-box{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;border-radius:var(--ax-size-border-radius);overflow:hidden;font-family:inherit;font-size:inherit;position:relative}.ax-panel-box header{display:flex;flex:1;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ax-border-color);padding:.8em}.ax-panel-box .content{padding:.8em;overflow:hidden}.ax-panel-box .toggle{cursor:pointer}\n"] }]
5900
5944
  }], propDecorators: { headerTemplate: [{
5901
5945
  type: ContentChild,
5902
5946
  args: ["header", { static: true }]
@@ -6439,11 +6483,11 @@ class AXFormGroupComponent extends AXBaseComponent {
6439
6483
  }
6440
6484
  });
6441
6485
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
6442
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: AXFormGroupComponent, isStandalone: false, selector: "ax-form-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { labelMode: "labelModeChange" }, host: { styleAttribute: "width: 100%; display:contents;" }, queries: [{ propertyName: "label", first: true, predicate: AXLabelComponent, descendants: true, isSignal: true }, { propertyName: "component", first: true, predicate: AXValidatableComponent, descendants: true }], viewQueries: [{ propertyName: "div", first: true, predicate: ["div"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"ax form-group {{ size }} ax-form-group-container {{\n labelMode() !== 'static' && 'ax-label-flexible'\n }}\"\n>\n <div *ngIf=\"labelMode() === 'static'\" class=\"ax-label-static\">\n <ng-container *ngTemplateOutlet=\"lableRef\"></ng-container>\n </div>\n\n <div\n #div\n class=\"ax form-item {{ size }}\"\n [ngClass]=\"{ 'required-state': required }\"\n >\n <div *ngIf=\"labelMode() !== 'static'\" class=\"ax-label-{{ labelMode() }}\">\n <ng-container *ngTemplateOutlet=\"lableRef\"></ng-container>\n </div>\n\n <div class=\"ax buttons start-buttons\" #startButtons>\n <ng-content select=\"ax-button[start]\"></ng-content>\n </div>\n <div class=\"content\" #content>\n <ng-content></ng-content>\n </div>\n <div class=\"ax buttons end-buttons\" #endButtons>\n <ng-content select=\"ax-button[end]\"></ng-content>\n <ng-content select=\"ax-button\"></ng-content>\n </div>\n </div>\n</div>\n\n<ng-template #lableRef><ng-content select=\"ax-label\"></ng-content></ng-template>\n", styles: [".ax-form-group-container{position:relative}.ax-form-group-container .ax-label-static{position:static;margin-bottom:.25rem}.ax-form-group-container .ax-label-float{top:50%;transform:translateY(-50%)}.ax-form-group-container .ax-label-over{top:-.5rem}.ax-form-group-container .ax-label-over label{transition:all .2s ease-in-out;font-size:.675rem!important;background:#fff;border:1px solid var(--ax-border-color);padding-inline:.25rem;border-radius:.25rem}.ax-form-group-container .ax-label-over,.ax-form-group-container .ax-label-float{position:absolute;z-index:999;transition:all .15s ease-in-out;inset-inline-start:.3rem;color:var(--ax-gray-dark-color)}.ax-form-group-container .form-group-label{padding:0!important;line-height:1}\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: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
6486
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXFormGroupComponent, isStandalone: false, selector: "ax-form-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { labelMode: "labelModeChange" }, host: { styleAttribute: "width: 100%; display:contents;" }, queries: [{ propertyName: "label", first: true, predicate: AXLabelComponent, descendants: true, isSignal: true }, { propertyName: "component", first: true, predicate: AXValidatableComponent, descendants: true }], viewQueries: [{ propertyName: "div", first: true, predicate: ["div"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"ax form-group {{ size }} ax-form-group-container {{\n labelMode() !== 'static' && 'ax-label-flexible'\n }}\"\n >\n @if (labelMode() === 'static') {\n <div class=\"ax-label-static\">\n <ng-container *ngTemplateOutlet=\"lableRef\"></ng-container>\n </div>\n }\n\n <div\n #div\n class=\"ax form-item {{ size }}\"\n [ngClass]=\"{ 'required-state': required }\"\n >\n @if (labelMode() !== 'static') {\n <div class=\"ax-label-{{ labelMode() }}\">\n <ng-container *ngTemplateOutlet=\"lableRef\"></ng-container>\n </div>\n }\n\n <div class=\"ax buttons start-buttons\" #startButtons>\n <ng-content select=\"ax-button[start]\"></ng-content>\n </div>\n <div class=\"content\" #content>\n <ng-content></ng-content>\n </div>\n <div class=\"ax buttons end-buttons\" #endButtons>\n <ng-content select=\"ax-button[end]\"></ng-content>\n <ng-content select=\"ax-button\"></ng-content>\n </div>\n </div>\n</div>\n\n<ng-template #lableRef><ng-content select=\"ax-label\"></ng-content></ng-template>\n", styles: [".ax-form-group-container{position:relative}.ax-form-group-container .ax-label-static{position:static;margin-bottom:.25rem}.ax-form-group-container .ax-label-float{top:50%;transform:translateY(-50%)}.ax-form-group-container .ax-label-over{top:-.5rem}.ax-form-group-container .ax-label-over label{transition:all .2s ease-in-out;font-size:.675rem!important;background:#fff;border:1px solid var(--ax-border-color);padding-inline:.25rem;border-radius:.25rem}.ax-form-group-container .ax-label-over,.ax-form-group-container .ax-label-float{position:absolute;z-index:999;transition:all .15s ease-in-out;inset-inline-start:.3rem;color:var(--ax-gray-dark-color)}.ax-form-group-container .form-group-label{padding:0!important;line-height:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
6443
6487
  }
6444
6488
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFormGroupComponent, decorators: [{
6445
6489
  type: Component,
6446
- args: [{ selector: 'ax-form-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%; display:contents;' }, standalone: false, template: "<div\n class=\"ax form-group {{ size }} ax-form-group-container {{\n labelMode() !== 'static' && 'ax-label-flexible'\n }}\"\n>\n <div *ngIf=\"labelMode() === 'static'\" class=\"ax-label-static\">\n <ng-container *ngTemplateOutlet=\"lableRef\"></ng-container>\n </div>\n\n <div\n #div\n class=\"ax form-item {{ size }}\"\n [ngClass]=\"{ 'required-state': required }\"\n >\n <div *ngIf=\"labelMode() !== 'static'\" class=\"ax-label-{{ labelMode() }}\">\n <ng-container *ngTemplateOutlet=\"lableRef\"></ng-container>\n </div>\n\n <div class=\"ax buttons start-buttons\" #startButtons>\n <ng-content select=\"ax-button[start]\"></ng-content>\n </div>\n <div class=\"content\" #content>\n <ng-content></ng-content>\n </div>\n <div class=\"ax buttons end-buttons\" #endButtons>\n <ng-content select=\"ax-button[end]\"></ng-content>\n <ng-content select=\"ax-button\"></ng-content>\n </div>\n </div>\n</div>\n\n<ng-template #lableRef><ng-content select=\"ax-label\"></ng-content></ng-template>\n", styles: [".ax-form-group-container{position:relative}.ax-form-group-container .ax-label-static{position:static;margin-bottom:.25rem}.ax-form-group-container .ax-label-float{top:50%;transform:translateY(-50%)}.ax-form-group-container .ax-label-over{top:-.5rem}.ax-form-group-container .ax-label-over label{transition:all .2s ease-in-out;font-size:.675rem!important;background:#fff;border:1px solid var(--ax-border-color);padding-inline:.25rem;border-radius:.25rem}.ax-form-group-container .ax-label-over,.ax-form-group-container .ax-label-float{position:absolute;z-index:999;transition:all .15s ease-in-out;inset-inline-start:.3rem;color:var(--ax-gray-dark-color)}.ax-form-group-container .form-group-label{padding:0!important;line-height:1}\n"] }]
6490
+ args: [{ selector: 'ax-form-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%; display:contents;' }, standalone: false, template: "<div\n class=\"ax form-group {{ size }} ax-form-group-container {{\n labelMode() !== 'static' && 'ax-label-flexible'\n }}\"\n >\n @if (labelMode() === 'static') {\n <div class=\"ax-label-static\">\n <ng-container *ngTemplateOutlet=\"lableRef\"></ng-container>\n </div>\n }\n\n <div\n #div\n class=\"ax form-item {{ size }}\"\n [ngClass]=\"{ 'required-state': required }\"\n >\n @if (labelMode() !== 'static') {\n <div class=\"ax-label-{{ labelMode() }}\">\n <ng-container *ngTemplateOutlet=\"lableRef\"></ng-container>\n </div>\n }\n\n <div class=\"ax buttons start-buttons\" #startButtons>\n <ng-content select=\"ax-button[start]\"></ng-content>\n </div>\n <div class=\"content\" #content>\n <ng-content></ng-content>\n </div>\n <div class=\"ax buttons end-buttons\" #endButtons>\n <ng-content select=\"ax-button[end]\"></ng-content>\n <ng-content select=\"ax-button\"></ng-content>\n </div>\n </div>\n</div>\n\n<ng-template #lableRef><ng-content select=\"ax-label\"></ng-content></ng-template>\n", styles: [".ax-form-group-container{position:relative}.ax-form-group-container .ax-label-static{position:static;margin-bottom:.25rem}.ax-form-group-container .ax-label-float{top:50%;transform:translateY(-50%)}.ax-form-group-container .ax-label-over{top:-.5rem}.ax-form-group-container .ax-label-over label{transition:all .2s ease-in-out;font-size:.675rem!important;background:#fff;border:1px solid var(--ax-border-color);padding-inline:.25rem;border-radius:.25rem}.ax-form-group-container .ax-label-over,.ax-form-group-container .ax-label-float{position:absolute;z-index:999;transition:all .15s ease-in-out;inset-inline-start:.3rem;color:var(--ax-gray-dark-color)}.ax-form-group-container .form-group-label{padding:0!important;line-height:1}\n"] }]
6447
6491
  }], propDecorators: { size: [{
6448
6492
  type: Input
6449
6493
  }], div: [{
@@ -6826,22 +6870,30 @@ class AXToolbarListViewComponent {
6826
6870
  }
6827
6871
  }
6828
6872
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXToolbarListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6829
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXToolbarListViewComponent, isStandalone: false, selector: "ax-toolbar-list-view", inputs: { vertical: "vertical", verticalWrap: ["vertical-wrap", "verticalWrap"], horizontalWrap: ["horizontal-wrap", "horizontalWrap"], horizontal: "horizontal", direction: "direction" }, outputs: { onDirectionChanged: "onDirectionChanged" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarListViewComponent }], ngImport: i0, template: `
6873
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXToolbarListViewComponent, isStandalone: false, selector: "ax-toolbar-list-view", inputs: { vertical: "vertical", verticalWrap: ["vertical-wrap", "verticalWrap"], horizontalWrap: ["horizontal-wrap", "horizontalWrap"], horizontal: "horizontal", direction: "direction" }, outputs: { onDirectionChanged: "onDirectionChanged" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarListViewComponent }], ngImport: i0, template: `
6830
6874
  <div class="btn-group" role="group">
6831
- <button type="button" class="btn btn-light btn-sm" *ngIf="vertical" [class.active]="direction=='vertical'" (click)="direction='vertical'" title="vertical">
6832
- <i class="far fa-bars"></i>
6875
+ @if (vertical) {
6876
+ <button type="button" class="btn btn-light btn-sm" [class.active]="direction=='vertical'" (click)="direction='vertical'" title="vertical">
6877
+ <i class="far fa-bars"></i>
6833
6878
  </button>
6834
- <button type="button" class="btn btn-light btn-sm" *ngIf="verticalWrap" [class.active]="direction=='vertical-wrap'" (click)="direction='vertical-wrap'" title="vertical-wrap">
6835
- <i class="far fa-grip-horizontal"></i>
6879
+ }
6880
+ @if (verticalWrap) {
6881
+ <button type="button" class="btn btn-light btn-sm" [class.active]="direction=='vertical-wrap'" (click)="direction='vertical-wrap'" title="vertical-wrap">
6882
+ <i class="far fa-grip-horizontal"></i>
6836
6883
  </button>
6837
- <button type="button" class="btn btn-light btn-sm" *ngIf="horizontalWrap" [class.active]="direction=='horizontal-wrap'" title="horizontal-wrap'" (click)="direction='horizontal-wrap'" title="horizontal-wrap">
6838
- <i class="far fa-bars fa-rotate-90"></i>
6884
+ }
6885
+ @if (horizontalWrap) {
6886
+ <button type="button" class="btn btn-light btn-sm" [class.active]="direction=='horizontal-wrap'" title="horizontal-wrap'" (click)="direction='horizontal-wrap'" title="horizontal-wrap">
6887
+ <i class="far fa-bars fa-rotate-90"></i>
6839
6888
  </button>
6840
- <button type="button" class="btn btn-light btn-sm" *ngIf="horizontal" [class.active]="direction=='horizontal'" (click)="direction='horizontal'" title="horizontal">
6841
- <i class="far fa-grip-horizontal fa-rotate-90"></i>
6889
+ }
6890
+ @if (horizontal) {
6891
+ <button type="button" class="btn btn-light btn-sm" [class.active]="direction=='horizontal'" (click)="direction='horizontal'" title="horizontal">
6892
+ <i class="far fa-grip-horizontal fa-rotate-90"></i>
6842
6893
  </button>
6894
+ }
6843
6895
  </div>
6844
- `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
6896
+ `, isInline: true });
6845
6897
  }
6846
6898
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXToolbarListViewComponent, decorators: [{
6847
6899
  type: Component,
@@ -6849,18 +6901,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
6849
6901
  selector: 'ax-toolbar-list-view',
6850
6902
  template: `
6851
6903
  <div class="btn-group" role="group">
6852
- <button type="button" class="btn btn-light btn-sm" *ngIf="vertical" [class.active]="direction=='vertical'" (click)="direction='vertical'" title="vertical">
6853
- <i class="far fa-bars"></i>
6904
+ @if (vertical) {
6905
+ <button type="button" class="btn btn-light btn-sm" [class.active]="direction=='vertical'" (click)="direction='vertical'" title="vertical">
6906
+ <i class="far fa-bars"></i>
6854
6907
  </button>
6855
- <button type="button" class="btn btn-light btn-sm" *ngIf="verticalWrap" [class.active]="direction=='vertical-wrap'" (click)="direction='vertical-wrap'" title="vertical-wrap">
6856
- <i class="far fa-grip-horizontal"></i>
6908
+ }
6909
+ @if (verticalWrap) {
6910
+ <button type="button" class="btn btn-light btn-sm" [class.active]="direction=='vertical-wrap'" (click)="direction='vertical-wrap'" title="vertical-wrap">
6911
+ <i class="far fa-grip-horizontal"></i>
6857
6912
  </button>
6858
- <button type="button" class="btn btn-light btn-sm" *ngIf="horizontalWrap" [class.active]="direction=='horizontal-wrap'" title="horizontal-wrap'" (click)="direction='horizontal-wrap'" title="horizontal-wrap">
6859
- <i class="far fa-bars fa-rotate-90"></i>
6913
+ }
6914
+ @if (horizontalWrap) {
6915
+ <button type="button" class="btn btn-light btn-sm" [class.active]="direction=='horizontal-wrap'" title="horizontal-wrap'" (click)="direction='horizontal-wrap'" title="horizontal-wrap">
6916
+ <i class="far fa-bars fa-rotate-90"></i>
6860
6917
  </button>
6861
- <button type="button" class="btn btn-light btn-sm" *ngIf="horizontal" [class.active]="direction=='horizontal'" (click)="direction='horizontal'" title="horizontal">
6862
- <i class="far fa-grip-horizontal fa-rotate-90"></i>
6918
+ }
6919
+ @if (horizontal) {
6920
+ <button type="button" class="btn btn-light btn-sm" [class.active]="direction=='horizontal'" (click)="direction='horizontal'" title="horizontal">
6921
+ <i class="far fa-grip-horizontal fa-rotate-90"></i>
6863
6922
  </button>
6923
+ }
6864
6924
  </div>
6865
6925
  `,
6866
6926
  providers: [{ provide: AXToolbarItem, useExisting: AXToolbarListViewComponent }],
@@ -6961,11 +7021,11 @@ class AXListComponent extends AXDataListComponent {
6961
7021
  dragDrop(event) {
6962
7022
  }
6963
7023
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6964
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXListComponent, isStandalone: false, 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", "cdkDropListHasAnchor"], 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 });
7024
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXListComponent, isStandalone: false, 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 @if (toolbar) {\n <div class=\"ax-list-toolbar\">\n <ng-content select=\"ax-toolbar\"></ng-content>\n </div>\n }\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 @if (allowMoveItem) {\n @for (item of items; track item) {\n <div class=\"ax-list-item\" 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 }\n } @else {\n @for (item of items; track item) {\n <div class=\"ax-list-item\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction }\">\n </ng-container>\n </div>\n }\n }\n <!-- </ng-container> -->\n\n </div>\n @if (items==null || items.length==0) {\n <ng-container *ngTemplateOutlet=\"emptyTemplate\">\n </ng-container>\n }\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$3.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: i1$3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }], encapsulation: i0.ViewEncapsulation.None });
6965
7025
  }
6966
7026
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXListComponent, decorators: [{
6967
7027
  type: Component,
6968
- args: [{ selector: "ax-list", encapsulation: ViewEncapsulation.None, standalone: false, 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"] }]
7028
+ args: [{ selector: "ax-list", encapsulation: ViewEncapsulation.None, standalone: false, template: "<div [style.height]=\"height\" [style.width]=\"width\">\n @if (toolbar) {\n <div class=\"ax-list-toolbar\">\n <ng-content select=\"ax-toolbar\"></ng-content>\n </div>\n }\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 @if (allowMoveItem) {\n @for (item of items; track item) {\n <div class=\"ax-list-item\" 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 }\n } @else {\n @for (item of items; track item) {\n <div class=\"ax-list-item\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction }\">\n </ng-container>\n </div>\n }\n }\n <!-- </ng-container> -->\n\n </div>\n @if (items==null || items.length==0) {\n <ng-container *ngTemplateOutlet=\"emptyTemplate\">\n </ng-container>\n }\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"] }]
6969
7029
  }], ctorParameters: () => [], propDecorators: { width: [{
6970
7030
  type: Input
6971
7031
  }], height: [{
@@ -7214,11 +7274,11 @@ class AXPopupComponent extends AXBaseComponent {
7214
7274
  }
7215
7275
  }
7216
7276
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i1$2.AXRenderService }, { token: AXLoadingService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
7217
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXPopupComponent, isStandalone: false, selector: "ng-component", host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "popupBody", first: true, predicate: ["popupBody"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"popup-wrapper\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"'dialog' + uid + '_label'\"\n aria-modal=\"true\"\n cdkTrapFocus\n cdkDrag\n>\n <div\n class=\"popup-container {{ size }}\"\n tabindex=\"0\"\n [class.has-border]=\"!modal\"\n >\n @if (hasHeader) {\n <div\n class=\"ax-popup-header\"\n cdkDragHandle\n [attr.id]=\"'dialog' + uid + '_label'\"\n >\n <span>\n {{ title }}\n </span>\n <span class=\"ax-buttons-containers\">\n <i\n class=\"far fa-expand ax-popup-header-button\"\n (click)=\"onFullScreen()\"\n *ngIf=\"maximizable\"\n tabindex=\"2\"\n title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"\n ></i>\n <i\n class=\"far fa-times ax-popup-header-button\"\n (click)=\"onCloseClick()\"\n *ngIf=\"closable\"\n tabindex=\"1\"\n title=\"\u0628\u0633\u062A\u0646\"\n ></i>\n </span>\n </div>\n }\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\n [style.direction]=\"isRtl() ? 'ltr' : 'rtl'\"\n class=\"ax-popup-footer\"\n *ngIf=\"!isLoading && footerButtons.length > 0\"\n >\n <div class=\"ax-buttons-containers\">\n <ng-container *ngFor=\"let button of footerButtons\">\n <ax-button\n [type]=\"button.style\"\n [icon]=\"button.icon\"\n [submitBehavior]=\"button.submitBehavior\"\n [disabled]=\"button.disable\"\n [cancelBehavior]=\"button.cancelBehavior\"\n (click)=\"handleFooterButtonClick(button)\"\n >\n {{ button.text }}\n </ax-button>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".popup-wrapper{position:relative;display:flex;justify-content:center;align-items:center}.popup-wrapper .popup-container{position:absolute;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{max-height:90dvh;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 });
7277
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXPopupComponent, isStandalone: false, selector: "ng-component", host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "popupBody", first: true, predicate: ["popupBody"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"popup-wrapper\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"'dialog' + uid + '_label'\"\n aria-modal=\"true\"\n cdkTrapFocus\n cdkDrag\n >\n <div\n class=\"popup-container {{ size }}\"\n tabindex=\"0\"\n [class.has-border]=\"!modal\"\n >\n @if (hasHeader) {\n <div\n class=\"ax-popup-header\"\n cdkDragHandle\n [attr.id]=\"'dialog' + uid + '_label'\"\n >\n <span>\n {{ title }}\n </span>\n <span class=\"ax-buttons-containers\">\n @if (maximizable) {\n <i\n class=\"far fa-expand ax-popup-header-button\"\n (click)=\"onFullScreen()\"\n tabindex=\"2\"\n title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"\n ></i>\n }\n @if (closable) {\n <i\n class=\"far fa-times ax-popup-header-button\"\n (click)=\"onCloseClick()\"\n tabindex=\"1\"\n title=\"\u0628\u0633\u062A\u0646\"\n ></i>\n }\n </span>\n </div>\n }\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 @if (!isLoading && footerButtons.length > 0) {\n <div\n [style.direction]=\"isRtl() ? 'ltr' : 'rtl'\"\n class=\"ax-popup-footer\"\n >\n <div class=\"ax-buttons-containers\">\n @for (button of footerButtons; track button) {\n <ax-button\n [type]=\"button.style\"\n [icon]=\"button.icon\"\n [submitBehavior]=\"button.submitBehavior\"\n [disabled]=\"button.disable\"\n [cancelBehavior]=\"button.cancelBehavior\"\n (click)=\"handleFooterButtonClick(button)\"\n >\n {{ button.text }}\n </ax-button>\n }\n </div>\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".popup-wrapper{position:relative;display:flex;justify-content:center;align-items:center}.popup-wrapper .popup-container{position:absolute;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{max-height:90dvh;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$3.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: i1$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i4.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 });
7218
7278
  }
7219
7279
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPopupComponent, decorators: [{
7220
7280
  type: Component,
7221
- args: [{ encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\n class=\"popup-wrapper\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"'dialog' + uid + '_label'\"\n aria-modal=\"true\"\n cdkTrapFocus\n cdkDrag\n>\n <div\n class=\"popup-container {{ size }}\"\n tabindex=\"0\"\n [class.has-border]=\"!modal\"\n >\n @if (hasHeader) {\n <div\n class=\"ax-popup-header\"\n cdkDragHandle\n [attr.id]=\"'dialog' + uid + '_label'\"\n >\n <span>\n {{ title }}\n </span>\n <span class=\"ax-buttons-containers\">\n <i\n class=\"far fa-expand ax-popup-header-button\"\n (click)=\"onFullScreen()\"\n *ngIf=\"maximizable\"\n tabindex=\"2\"\n title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"\n ></i>\n <i\n class=\"far fa-times ax-popup-header-button\"\n (click)=\"onCloseClick()\"\n *ngIf=\"closable\"\n tabindex=\"1\"\n title=\"\u0628\u0633\u062A\u0646\"\n ></i>\n </span>\n </div>\n }\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\n [style.direction]=\"isRtl() ? 'ltr' : 'rtl'\"\n class=\"ax-popup-footer\"\n *ngIf=\"!isLoading && footerButtons.length > 0\"\n >\n <div class=\"ax-buttons-containers\">\n <ng-container *ngFor=\"let button of footerButtons\">\n <ax-button\n [type]=\"button.style\"\n [icon]=\"button.icon\"\n [submitBehavior]=\"button.submitBehavior\"\n [disabled]=\"button.disable\"\n [cancelBehavior]=\"button.cancelBehavior\"\n (click)=\"handleFooterButtonClick(button)\"\n >\n {{ button.text }}\n </ax-button>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".popup-wrapper{position:relative;display:flex;justify-content:center;align-items:center}.popup-wrapper .popup-container{position:absolute;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{max-height:90dvh;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"] }]
7281
+ args: [{ encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\n class=\"popup-wrapper\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"'dialog' + uid + '_label'\"\n aria-modal=\"true\"\n cdkTrapFocus\n cdkDrag\n >\n <div\n class=\"popup-container {{ size }}\"\n tabindex=\"0\"\n [class.has-border]=\"!modal\"\n >\n @if (hasHeader) {\n <div\n class=\"ax-popup-header\"\n cdkDragHandle\n [attr.id]=\"'dialog' + uid + '_label'\"\n >\n <span>\n {{ title }}\n </span>\n <span class=\"ax-buttons-containers\">\n @if (maximizable) {\n <i\n class=\"far fa-expand ax-popup-header-button\"\n (click)=\"onFullScreen()\"\n tabindex=\"2\"\n title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"\n ></i>\n }\n @if (closable) {\n <i\n class=\"far fa-times ax-popup-header-button\"\n (click)=\"onCloseClick()\"\n tabindex=\"1\"\n title=\"\u0628\u0633\u062A\u0646\"\n ></i>\n }\n </span>\n </div>\n }\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 @if (!isLoading && footerButtons.length > 0) {\n <div\n [style.direction]=\"isRtl() ? 'ltr' : 'rtl'\"\n class=\"ax-popup-footer\"\n >\n <div class=\"ax-buttons-containers\">\n @for (button of footerButtons; track button) {\n <ax-button\n [type]=\"button.style\"\n [icon]=\"button.icon\"\n [submitBehavior]=\"button.submitBehavior\"\n [disabled]=\"button.disable\"\n [cancelBehavior]=\"button.cancelBehavior\"\n (click)=\"handleFooterButtonClick(button)\"\n >\n {{ button.text }}\n </ax-button>\n }\n </div>\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".popup-wrapper{position:relative;display:flex;justify-content:center;align-items:center}.popup-wrapper .popup-container{position:absolute;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{max-height:90dvh;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"] }]
7222
7282
  }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.ElementRef }, { type: i1$2.AXRenderService }, { type: AXLoadingService }, { type: i0.ChangeDetectorRef }], propDecorators: { popupBody: [{
7223
7283
  type: ViewChild,
7224
7284
  args: ['popupBody', { read: ViewContainerRef, static: true }]
@@ -7805,23 +7865,27 @@ class AXLoadingPanelComponent {
7805
7865
  this.visible = false;
7806
7866
  }
7807
7867
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXLoadingPanelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
7808
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXLoadingPanelComponent, isStandalone: false, selector: "ax-loading-panel", inputs: { visible: "visible" }, ngImport: i0, template: `
7809
- <div onclick="return false;" class="ax ax-loading-panel ax-overlay-wrapper ax-overlay-modal ax-loading-overlay" *ngIf="visible" >
7868
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXLoadingPanelComponent, isStandalone: false, selector: "ax-loading-panel", inputs: { visible: "visible" }, ngImport: i0, template: `
7869
+ @if (visible) {
7870
+ <div onclick="return false;" class="ax ax-loading-panel ax-overlay-wrapper ax-overlay-modal ax-loading-overlay" >
7810
7871
  <ax-loading-indicator tabindex="0" cdkTrapFocus>
7811
7872
  </ax-loading-indicator>
7812
- </div>
7813
- `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: AXLoadingIndicatorComponent, selector: "ax-loading-indicator", inputs: ["size"] }] });
7873
+ </div>
7874
+ }
7875
+ `, isInline: true, dependencies: [{ kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: AXLoadingIndicatorComponent, selector: "ax-loading-indicator", inputs: ["size"] }] });
7814
7876
  }
7815
7877
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXLoadingPanelComponent, decorators: [{
7816
7878
  type: Component,
7817
7879
  args: [{
7818
7880
  selector: 'ax-loading-panel',
7819
7881
  template: `
7820
- <div onclick="return false;" class="ax ax-loading-panel ax-overlay-wrapper ax-overlay-modal ax-loading-overlay" *ngIf="visible" >
7882
+ @if (visible) {
7883
+ <div onclick="return false;" class="ax ax-loading-panel ax-overlay-wrapper ax-overlay-modal ax-loading-overlay" >
7821
7884
  <ax-loading-indicator tabindex="0" cdkTrapFocus>
7822
7885
  </ax-loading-indicator>
7823
- </div>
7824
- `,
7886
+ </div>
7887
+ }
7888
+ `,
7825
7889
  standalone: false
7826
7890
  }]
7827
7891
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { visible: [{
@@ -8445,11 +8509,11 @@ class AXSearchBoxComponent extends AXBaseTextComponent {
8445
8509
  // this.searchChangeObserver.next(this.text);
8446
8510
  }
8447
8511
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSearchBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
8448
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXSearchBoxComponent, isStandalone: false, selector: "ax-search-box", inputs: { placeholder: "placeholder", onDemandTranslate: "onDemandTranslate", text: "text", delay: "delay" }, outputs: { textChanged: "textChanged", onButtonClick: "onButtonClick" }, host: { styleAttribute: "width: 100%" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n <div class=\"ax items-wrapper\">\n <ng-content select=\"[start]\">\n </ng-content>\n <i class=\"form-item-icon {{icon}}\" *ngIf=\"icon\"></i>\n </div>\n <div class=\"content\" #content>\n <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n [class.icon]=\"icon\">\n <input #input type=\"text\" class=\"ax {{size}}\" [(ngModel)]=\"value\"\n (input)=\"onSearchChanged($event.target.value)\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\n [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\"\n (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" (keyup)=\"handleKeyEvent($event)\"\n (keydown)=\"handleKeyEvent($event)\">\n </div>\n </div>\n <div class=\"ax items-wrapper\">\n <ax-button [size]=\"size\" *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\" [tabIndex]=\"-1\">\n </ax-button>\n <ax-button [size]=\"size\" type=\"light blank\" icon=\"far fa-search\" end (click)=\"click($event)\" [tabIndex]=\"-1\">\n </ax-button>\n <ng-content select=\"[end]\">\n </ng-content>\n </div>\n</div>", 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
8512
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXSearchBoxComponent, isStandalone: false, selector: "ax-search-box", inputs: { placeholder: "placeholder", onDemandTranslate: "onDemandTranslate", text: "text", delay: "delay" }, outputs: { textChanged: "textChanged", onButtonClick: "onButtonClick" }, host: { styleAttribute: "width: 100%" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n <div class=\"ax items-wrapper\">\n <ng-content select=\"[start]\">\n </ng-content>\n @if (icon) {\n <i class=\"form-item-icon {{icon}}\"></i>\n }\n </div>\n <div class=\"content\" #content>\n <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n [class.icon]=\"icon\">\n <input #input type=\"text\" class=\"ax {{size}}\" [(ngModel)]=\"value\"\n (input)=\"onSearchChanged($event.target.value)\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\n [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\"\n (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" (keyup)=\"handleKeyEvent($event)\"\n (keydown)=\"handleKeyEvent($event)\">\n </div>\n </div>\n <div class=\"ax items-wrapper\">\n @if (value && allowClear) {\n <ax-button [size]=\"size\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\" [tabIndex]=\"-1\">\n </ax-button>\n }\n <ax-button [size]=\"size\" type=\"light blank\" icon=\"far fa-search\" end (click)=\"click($event)\" [tabIndex]=\"-1\">\n </ax-button>\n <ng-content select=\"[end]\">\n </ng-content>\n </div>\n </div>", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i1$5.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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
8449
8513
  }
8450
8514
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSearchBoxComponent, decorators: [{
8451
8515
  type: Component,
8452
- args: [{ selector: 'ax-search-box', host: { style: 'width: 100%' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n <div class=\"ax items-wrapper\">\n <ng-content select=\"[start]\">\n </ng-content>\n <i class=\"form-item-icon {{icon}}\" *ngIf=\"icon\"></i>\n </div>\n <div class=\"content\" #content>\n <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n [class.icon]=\"icon\">\n <input #input type=\"text\" class=\"ax {{size}}\" [(ngModel)]=\"value\"\n (input)=\"onSearchChanged($event.target.value)\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\n [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\"\n (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" (keyup)=\"handleKeyEvent($event)\"\n (keydown)=\"handleKeyEvent($event)\">\n </div>\n </div>\n <div class=\"ax items-wrapper\">\n <ax-button [size]=\"size\" *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\" [tabIndex]=\"-1\">\n </ax-button>\n <ax-button [size]=\"size\" type=\"light blank\" icon=\"far fa-search\" end (click)=\"click($event)\" [tabIndex]=\"-1\">\n </ax-button>\n <ng-content select=\"[end]\">\n </ng-content>\n </div>\n</div>" }]
8516
+ args: [{ selector: 'ax-search-box', host: { style: 'width: 100%' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n <div class=\"ax items-wrapper\">\n <ng-content select=\"[start]\">\n </ng-content>\n @if (icon) {\n <i class=\"form-item-icon {{icon}}\"></i>\n }\n </div>\n <div class=\"content\" #content>\n <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n [class.icon]=\"icon\">\n <input #input type=\"text\" class=\"ax {{size}}\" [(ngModel)]=\"value\"\n (input)=\"onSearchChanged($event.target.value)\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\n [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\"\n (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" (keyup)=\"handleKeyEvent($event)\"\n (keydown)=\"handleKeyEvent($event)\">\n </div>\n </div>\n <div class=\"ax items-wrapper\">\n @if (value && allowClear) {\n <ax-button [size]=\"size\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\" [tabIndex]=\"-1\">\n </ax-button>\n }\n <ax-button [size]=\"size\" type=\"light blank\" icon=\"far fa-search\" end (click)=\"click($event)\" [tabIndex]=\"-1\">\n </ax-button>\n <ng-content select=\"[end]\">\n </ng-content>\n </div>\n </div>" }]
8453
8517
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { textChanged: [{
8454
8518
  type: Output
8455
8519
  }], onButtonClick: [{
@@ -9188,15 +9252,15 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
9188
9252
  });
9189
9253
  }
9190
9254
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
9191
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXNumberBoxComponent, isStandalone: false, 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: [
9255
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXNumberBoxComponent, isStandalone: false, 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: [
9192
9256
  { provide: AXValidatableComponent, useExisting: AXNumberBoxComponent },
9193
- ], 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 });
9257
+ ], 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 @if (showDoubleCounter) {\n <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\"></ax-button>\n }\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 @if (icon) {\n <i class=\"{{icon}}\"></i>\n }\n </div>\n </div>\n <div class=\"ax items-wrapper\">\n @if (value && allowClear) {\n <ax-button [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\"\n (click)=\"clear()\"></ax-button>\n }\n @if (showDoubleCounter) {\n <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\"></ax-button>\n }\n <ng-content select=\"[end]\">\n </ng-content>\n @if (showCounter && !showDoubleCounter && !readonly) {\n <div class=\"arrow-number\" >\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 }\n </div>\n\n </div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i1$5.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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
9194
9258
  }
9195
9259
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
9196
9260
  type: Component,
9197
9261
  args: [{ selector: 'ax-number-box', changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [
9198
9262
  { provide: AXValidatableComponent, useExisting: AXNumberBoxComponent },
9199
- ], standalone: false, 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" }]
9263
+ ], standalone: false, 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 @if (showDoubleCounter) {\n <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\"></ax-button>\n }\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 @if (icon) {\n <i class=\"{{icon}}\"></i>\n }\n </div>\n </div>\n <div class=\"ax items-wrapper\">\n @if (value && allowClear) {\n <ax-button [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\"\n (click)=\"clear()\"></ax-button>\n }\n @if (showDoubleCounter) {\n <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\"></ax-button>\n }\n <ng-content select=\"[end]\">\n </ng-content>\n @if (showCounter && !showDoubleCounter && !readonly) {\n <div class=\"arrow-number\" >\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 }\n </div>\n\n </div>\n" }]
9200
9264
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { min: [{
9201
9265
  type: Input
9202
9266
  }], max: [{
@@ -9338,15 +9402,15 @@ class AXPasswordBoxComponent extends AXBaseTextComponent {
9338
9402
  return this.ref.nativeElement.querySelector('input');
9339
9403
  }
9340
9404
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPasswordBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
9341
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXPasswordBoxComponent, isStandalone: false, selector: "ax-password-box", inputs: { allowAutocomplete: { classPropertyName: "allowAutocomplete", publicName: "allowAutocomplete", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "width: 100%" }, providers: [
9405
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXPasswordBoxComponent, isStandalone: false, selector: "ax-password-box", inputs: { allowAutocomplete: { classPropertyName: "allowAutocomplete", publicName: "allowAutocomplete", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "width: 100%" }, providers: [
9342
9406
  { provide: AXValidatableComponent, useExisting: AXPasswordBoxComponent },
9343
- ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n <div class=\"ax items-wrapper\">\n <ng-content select=\"[start]\"> </ng-content>\n <i class=\"form-item-icon {{ icon }}\" *ngIf=\"icon\"></i>\n </div>\n <div class=\"content\" #content>\n <div\n class=\"ax input form-control {{ size }}\"\n [class.disabled]=\"disabled\"\n [class.readonly]=\"readonly\"\n [class.icon]=\"icon\"\n >\n <input\n (focus)=\"handleInputFocus($event)\"\n (blur)=\"handleInputBlur($event)\"\n [autocomplete]=\"autocomplete\"\n [name]=\"name\"\n #input\n [type]=\"type\"\n class=\"ax {{ size }}\"\n value=\"{{ value }}\"\n placeholder=\"{{ placeholder }}\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [ngClass]=\"setTextAlign()\"\n [class.clear]=\"value && allowClear\"\n />\n </div>\n </div>\n <div class=\"ax items-wrapper\">\n <ax-button\n *ngIf=\"value && allowClear\"\n icon=\"fas fa-times\"\n type=\"danger blank\"\n (click)=\"clear()\"\n [tabIndex]=\"-1\"\n ></ax-button>\n <ax-button\n [disabled]=\"disabled\"\n [icon]=\"eyeIcon\"\n type=\"light blank\"\n size=\"{{ size }}\"\n (click)=\"handleShowPassword()\"\n [tabIndex]=\"-1\"\n >\n <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\n </ax-button>\n <ng-content select=\"[end]\"> </ng-content>\n </div>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
9407
+ ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n <div class=\"ax items-wrapper\">\n <ng-content select=\"[start]\"> </ng-content>\n @if (icon) {\n <i class=\"form-item-icon {{ icon }}\"></i>\n }\n </div>\n <div class=\"content\" #content>\n <div\n class=\"ax input form-control {{ size }}\"\n [class.disabled]=\"disabled\"\n [class.readonly]=\"readonly\"\n [class.icon]=\"icon\"\n >\n <input\n (focus)=\"handleInputFocus($event)\"\n (blur)=\"handleInputBlur($event)\"\n [autocomplete]=\"autocomplete\"\n [name]=\"name\"\n #input\n [type]=\"type\"\n class=\"ax {{ size }}\"\n value=\"{{ value }}\"\n placeholder=\"{{ placeholder }}\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [ngClass]=\"setTextAlign()\"\n [class.clear]=\"value && allowClear\"\n />\n </div>\n </div>\n <div class=\"ax items-wrapper\">\n @if (value && allowClear) {\n <ax-button\n icon=\"fas fa-times\"\n type=\"danger blank\"\n (click)=\"clear()\"\n [tabIndex]=\"-1\"\n ></ax-button>\n }\n <ax-button\n [disabled]=\"disabled\"\n [icon]=\"eyeIcon\"\n type=\"light blank\"\n size=\"{{ size }}\"\n (click)=\"handleShowPassword()\"\n [tabIndex]=\"-1\"\n >\n <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\n </ax-button>\n <ng-content select=\"[end]\"> </ng-content>\n </div>\n </div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
9344
9408
  }
9345
9409
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPasswordBoxComponent, decorators: [{
9346
9410
  type: Component,
9347
9411
  args: [{ selector: 'ax-password-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [
9348
9412
  { provide: AXValidatableComponent, useExisting: AXPasswordBoxComponent },
9349
- ], standalone: false, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n <div class=\"ax items-wrapper\">\n <ng-content select=\"[start]\"> </ng-content>\n <i class=\"form-item-icon {{ icon }}\" *ngIf=\"icon\"></i>\n </div>\n <div class=\"content\" #content>\n <div\n class=\"ax input form-control {{ size }}\"\n [class.disabled]=\"disabled\"\n [class.readonly]=\"readonly\"\n [class.icon]=\"icon\"\n >\n <input\n (focus)=\"handleInputFocus($event)\"\n (blur)=\"handleInputBlur($event)\"\n [autocomplete]=\"autocomplete\"\n [name]=\"name\"\n #input\n [type]=\"type\"\n class=\"ax {{ size }}\"\n value=\"{{ value }}\"\n placeholder=\"{{ placeholder }}\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [ngClass]=\"setTextAlign()\"\n [class.clear]=\"value && allowClear\"\n />\n </div>\n </div>\n <div class=\"ax items-wrapper\">\n <ax-button\n *ngIf=\"value && allowClear\"\n icon=\"fas fa-times\"\n type=\"danger blank\"\n (click)=\"clear()\"\n [tabIndex]=\"-1\"\n ></ax-button>\n <ax-button\n [disabled]=\"disabled\"\n [icon]=\"eyeIcon\"\n type=\"light blank\"\n size=\"{{ size }}\"\n (click)=\"handleShowPassword()\"\n [tabIndex]=\"-1\"\n >\n <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\n </ax-button>\n <ng-content select=\"[end]\"> </ng-content>\n </div>\n</div>\n" }]
9413
+ ], standalone: false, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n <div class=\"ax items-wrapper\">\n <ng-content select=\"[start]\"> </ng-content>\n @if (icon) {\n <i class=\"form-item-icon {{ icon }}\"></i>\n }\n </div>\n <div class=\"content\" #content>\n <div\n class=\"ax input form-control {{ size }}\"\n [class.disabled]=\"disabled\"\n [class.readonly]=\"readonly\"\n [class.icon]=\"icon\"\n >\n <input\n (focus)=\"handleInputFocus($event)\"\n (blur)=\"handleInputBlur($event)\"\n [autocomplete]=\"autocomplete\"\n [name]=\"name\"\n #input\n [type]=\"type\"\n class=\"ax {{ size }}\"\n value=\"{{ value }}\"\n placeholder=\"{{ placeholder }}\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [ngClass]=\"setTextAlign()\"\n [class.clear]=\"value && allowClear\"\n />\n </div>\n </div>\n <div class=\"ax items-wrapper\">\n @if (value && allowClear) {\n <ax-button\n icon=\"fas fa-times\"\n type=\"danger blank\"\n (click)=\"clear()\"\n [tabIndex]=\"-1\"\n ></ax-button>\n }\n <ax-button\n [disabled]=\"disabled\"\n [icon]=\"eyeIcon\"\n type=\"light blank\"\n size=\"{{ size }}\"\n (click)=\"handleShowPassword()\"\n [tabIndex]=\"-1\"\n >\n <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\n </ax-button>\n <ng-content select=\"[end]\"> </ng-content>\n </div>\n </div>\n" }]
9350
9414
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }] });
9351
9415
 
9352
9416
  const COMPONENT$2 = [AXPasswordBoxComponent];
@@ -10943,11 +11007,11 @@ class AXQueryBuilderRuleComponent {
10943
11007
  return this.rule.control.options ? this.rule.control.options[name] : null;
10944
11008
  }
10945
11009
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXQueryBuilderRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
10946
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXQueryBuilderRuleComponent, isStandalone: false, selector: "ax-query-rule", inputs: { isEditing: "isEditing", rule: "rule", parent: "parent", mode: "mode", fields: "fields" }, outputs: { onRuleDelete: "onRuleDelete", ruleChanged: "ruleChanged" }, host: { classAttribute: "ax ax-query-rule" }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true }, { propertyName: "selectBoxValue", first: true, predicate: ["selectBoxValue"], descendants: true }, { propertyName: "selectBoxBoolean", first: true, predicate: ["selectBoxBoolean"], descendants: true }, { propertyName: "textBoxNameValue", first: true, predicate: ["textBoxNameValue"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], ngImport: i0, template: "<div class=\"condition\" *ngIf=\"parent\">\n <div class=\"text {{parent.condition}}\">\n <span>{{parent.condition}}</span>\n </div>\n</div>\n<div class=\"handler\">\n <i class=\"far fa-grip-lines-vertical\"></i>\n</div>\n\n<div class=\"caption\" [ngClass]=\"{'editable': isEditing}\">\n <ng-container *ngIf=\"isEditing;else fieldsTemplate\">\n <ax-form-group>\n <ax-select-box [readonly]=\"mode == 'edit'\" (selectionChanged)=\"captionChange($event)\" allowNull=\"false\"\n [(selectedItems)]=\"rule.dataFieldItem\" textField=\"caption\" valueField=\"dataField\" [items]=\"fields\"\n mode=\"single\">\n </ax-select-box>\n </ax-form-group>\n </ng-container>\n <ng-template #fieldsTemplate>\n <div (click)=\"handleEditClick()\">\n {{rule.caption}}\n </div>\n </ng-template>\n</div>\n\n<div class=\"operator\" [ngClass]=\"{'editable': isEditing,'radius':!showValue}\">\n <ng-container *ngIf=\"isEditing;else operatorTemplate\">\n <ax-form-group>\n <ax-select-box [readonly]=\"mode == 'edit'\" *ngIf=\"showOperatorSelectBox\" [(selectedValues)]=\"rule.operator\"\n #selectBox (selectedItemsChange)=\"operatorChange($event)\" allowNull=\"false\" mode=\"single\">\n <ax-data-source [provideData]=\"provideDataOperator\">\n </ax-data-source>\n </ax-select-box>\n </ax-form-group>\n </ng-container>\n <ng-template #operatorTemplate>\n <div class=\"text\" (click)=\"handleEditClick()\">\n {{('queryBuilder.'+rule.operator) | trans}}\n </div>\n </ng-template>\n</div>\n<div *ngIf=\"showValue\" class=\"value\" [ngClass]=\"{'editable': isEditing}\">\n <ng-container *ngIf=\"isEditing;else valueTemplate\">\n\n <div *ngIf=\" rule.control && !isOnDemandLabel\" [ngSwitch]=\"rule.control.type\">\n <div *ngSwitchCase=\"'textBox'\">\n <ax-form-group>\n <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n [(value)]=\"rule.value\">\n </ax-text-box>\n </ax-form-group>\n </div>\n <div *ngSwitchCase=\"'selectBox'\">\n <ax-form-group>\n <ax-select-box *ngIf=\"showSelectBox\" [mode]=\"getOption('mode')\"\n [remoteOperation]=\"getOption('remoteOperation')\" [valueField]=\"getOption('valueField')\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" [textField]=\"getOption('textField')\"\n [(selectedItems)]=\"rule.valueItem\" (selectedItemsChange)=\"selectedItemsChange($event)\"\n #selectBoxValue>\n <ax-data-source [provideData]=\"getProvideData\"></ax-data-source>\n </ax-select-box>\n </ax-form-group>\n </div>\n\n <div *ngSwitchCase=\"'numberBox'\">\n <ax-form-group>\n <ax-number-box [decimalNumber]=\"2\" (onValueChanged)=\"valueChange($event)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" [(value)]=\"rule.value\">\n </ax-number-box>\n </ax-form-group>\n </div>\n <div *ngSwitchCase=\"'datetime'\">\n <ax-date-picker label=\"From\" [(value)]=\"rule.value\" (onValueChanged)=\"valueChange($event)\">\n </ax-date-picker>\n\n </div>\n <div *ngSwitchCase=\"'boolean'\">\n\n <ax-form-group>\n <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event)\"\n allowNull=\"false\" [selectedValues]=\"rule.value\" mode=\"single\">\n <ax-data-source [provideData]=\"provideDataBoolean\">\n </ax-data-source>\n </ax-select-box>\n </ax-form-group>\n\n </div>\n <div *ngSwitchDefault>\n <ax-form-group>\n <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n [(value)]=\"rule.value\">\n </ax-text-box>\n\n </ax-form-group>\n\n </div>\n </div>\n\n <div *ngIf=\"isOnDemandLabel\">\n\n <ax-text-box #textBoxNameValue [value]=\"getOnDemandName(rule.onDemandLabel)\"\n (onValueChanged)=\"onDemandLabelChange($event)\" placeholder=\"\u0646\u0627\u0645 \u0645\u062A\u063A\u06CC\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\">\n <!-- <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation> -->\n </ax-text-box>\n\n\n </div>\n\n </ng-container>\n <ng-template #valueTemplate>\n <div (click)=\"handleEditClick()\">\n\n {{rule.text}}\n\n </div>\n </ng-template>\n</div>\n\n<div class=\"buttons-list\">\n <div *ngIf=\"showValue && isEditing && mode == 'new'\" class=\"button variable\"\n [ngClass]=\"{'active-button': isOnDemandLabel}\">\n <i class=\"far fa-dollar-sign\"></i>\n <ax-check-box [value]=\"isOnDemandLabel\" (onClick)=\"onDemandLabel($event)\">\n </ax-check-box>\n </div>\n\n <div class=\"button commit\" (click)=\"handleCommitClick()\" *ngIf=\"isEditing\">\n <i class=\"far fa-check\"></i>\n </div>\n <div class=\"button remove\" (click)=\"handleRemoveClick()\" *ngIf=\"mode == 'new'\">\n <i class=\"far fa-times\"></i>\n </div>\n</div>", 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: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size", "labelMode"], outputs: ["labelModeChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: ["selectedDates", "dayStyle", "dayMinMaxResoan", "validation", "placeholder", "min", "max", "readonly", "disabled", "allowClear", "textAlign", "showToday", "selectableHoliday", "dateType", "showTodayButton", "openByClick", "size", "type", "value"], outputs: ["typeChange", "onValueChanged", "valueChange"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], encapsulation: i0.ViewEncapsulation.None });
11010
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXQueryBuilderRuleComponent, isStandalone: false, selector: "ax-query-rule", inputs: { isEditing: "isEditing", rule: "rule", parent: "parent", mode: "mode", fields: "fields" }, outputs: { onRuleDelete: "onRuleDelete", ruleChanged: "ruleChanged" }, host: { classAttribute: "ax ax-query-rule" }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true }, { propertyName: "selectBoxValue", first: true, predicate: ["selectBoxValue"], descendants: true }, { propertyName: "selectBoxBoolean", first: true, predicate: ["selectBoxBoolean"], descendants: true }, { propertyName: "textBoxNameValue", first: true, predicate: ["textBoxNameValue"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], ngImport: i0, template: "@if (parent) {\n <div class=\"condition\">\n <div class=\"text {{parent.condition}}\">\n <span>{{parent.condition}}</span>\n </div>\n </div>\n}\n<div class=\"handler\">\n <i class=\"far fa-grip-lines-vertical\"></i>\n</div>\n\n<div class=\"caption\" [ngClass]=\"{'editable': isEditing}\">\n @if (isEditing) {\n <ax-form-group>\n <ax-select-box [readonly]=\"mode == 'edit'\" (selectionChanged)=\"captionChange($event)\" allowNull=\"false\"\n [(selectedItems)]=\"rule.dataFieldItem\" textField=\"caption\" valueField=\"dataField\" [items]=\"fields\"\n mode=\"single\">\n </ax-select-box>\n </ax-form-group>\n } @else {\n <div (click)=\"handleEditClick()\">\n {{rule.caption}}\n </div>\n }\n</div>\n\n<div class=\"operator\" [ngClass]=\"{'editable': isEditing,'radius':!showValue}\">\n @if (isEditing) {\n <ax-form-group>\n @if (showOperatorSelectBox) {\n <ax-select-box [readonly]=\"mode == 'edit'\" [(selectedValues)]=\"rule.operator\"\n #selectBox (selectedItemsChange)=\"operatorChange($event)\" allowNull=\"false\" mode=\"single\">\n <ax-data-source [provideData]=\"provideDataOperator\">\n </ax-data-source>\n </ax-select-box>\n }\n </ax-form-group>\n } @else {\n <div class=\"text\" (click)=\"handleEditClick()\">\n {{('queryBuilder.'+rule.operator) | trans}}\n </div>\n }\n</div>\n@if (showValue) {\n <div class=\"value\" [ngClass]=\"{'editable': isEditing}\">\n @if (isEditing) {\n @if ( rule.control && !isOnDemandLabel) {\n <div>\n @switch (rule.control.type) {\n @case ('textBox') {\n <div>\n <ax-form-group>\n <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n [(value)]=\"rule.value\">\n </ax-text-box>\n </ax-form-group>\n </div>\n }\n @case ('selectBox') {\n <div>\n <ax-form-group>\n @if (showSelectBox) {\n <ax-select-box [mode]=\"getOption('mode')\"\n [remoteOperation]=\"getOption('remoteOperation')\" [valueField]=\"getOption('valueField')\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" [textField]=\"getOption('textField')\"\n [(selectedItems)]=\"rule.valueItem\" (selectedItemsChange)=\"selectedItemsChange($event)\"\n #selectBoxValue>\n <ax-data-source [provideData]=\"getProvideData\"></ax-data-source>\n </ax-select-box>\n }\n </ax-form-group>\n </div>\n }\n @case ('numberBox') {\n <div>\n <ax-form-group>\n <ax-number-box [decimalNumber]=\"2\" (onValueChanged)=\"valueChange($event)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" [(value)]=\"rule.value\">\n </ax-number-box>\n </ax-form-group>\n </div>\n }\n @case ('datetime') {\n <div>\n <ax-date-picker label=\"From\" [(value)]=\"rule.value\" (onValueChanged)=\"valueChange($event)\">\n </ax-date-picker>\n </div>\n }\n @case ('boolean') {\n <div>\n <ax-form-group>\n <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event)\"\n allowNull=\"false\" [selectedValues]=\"rule.value\" mode=\"single\">\n <ax-data-source [provideData]=\"provideDataBoolean\">\n </ax-data-source>\n </ax-select-box>\n </ax-form-group>\n </div>\n }\n @default {\n <div>\n <ax-form-group>\n <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n [(value)]=\"rule.value\">\n </ax-text-box>\n </ax-form-group>\n </div>\n }\n }\n </div>\n }\n @if (isOnDemandLabel) {\n <div>\n <ax-text-box #textBoxNameValue [value]=\"getOnDemandName(rule.onDemandLabel)\"\n (onValueChanged)=\"onDemandLabelChange($event)\" placeholder=\"\u0646\u0627\u0645 \u0645\u062A\u063A\u06CC\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\">\n <!-- <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation> -->\n </ax-text-box>\n </div>\n }\n } @else {\n <div (click)=\"handleEditClick()\">\n {{rule.text}}\n </div>\n }\n</div>\n}\n\n<div class=\"buttons-list\">\n @if (showValue && isEditing && mode == 'new') {\n <div class=\"button variable\"\n [ngClass]=\"{'active-button': isOnDemandLabel}\">\n <i class=\"far fa-dollar-sign\"></i>\n <ax-check-box [value]=\"isOnDemandLabel\" (onClick)=\"onDemandLabel($event)\">\n </ax-check-box>\n </div>\n }\n\n @if (isEditing) {\n <div class=\"button commit\" (click)=\"handleCommitClick()\">\n <i class=\"far fa-check\"></i>\n </div>\n }\n @if (mode == 'new') {\n <div class=\"button remove\" (click)=\"handleRemoveClick()\">\n <i class=\"far fa-times\"></i>\n </div>\n }\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size", "labelMode"], outputs: ["labelModeChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: ["selectedDates", "dayStyle", "dayMinMaxResoan", "validation", "placeholder", "min", "max", "readonly", "disabled", "allowClear", "textAlign", "showToday", "selectableHoliday", "dateType", "showTodayButton", "openByClick", "size", "type", "value"], outputs: ["typeChange", "onValueChanged", "valueChange"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], encapsulation: i0.ViewEncapsulation.None });
10947
11011
  }
10948
11012
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXQueryBuilderRuleComponent, decorators: [{
10949
11013
  type: Component,
10950
- args: [{ selector: 'ax-query-rule', host: { class: 'ax ax-query-rule' }, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"condition\" *ngIf=\"parent\">\n <div class=\"text {{parent.condition}}\">\n <span>{{parent.condition}}</span>\n </div>\n</div>\n<div class=\"handler\">\n <i class=\"far fa-grip-lines-vertical\"></i>\n</div>\n\n<div class=\"caption\" [ngClass]=\"{'editable': isEditing}\">\n <ng-container *ngIf=\"isEditing;else fieldsTemplate\">\n <ax-form-group>\n <ax-select-box [readonly]=\"mode == 'edit'\" (selectionChanged)=\"captionChange($event)\" allowNull=\"false\"\n [(selectedItems)]=\"rule.dataFieldItem\" textField=\"caption\" valueField=\"dataField\" [items]=\"fields\"\n mode=\"single\">\n </ax-select-box>\n </ax-form-group>\n </ng-container>\n <ng-template #fieldsTemplate>\n <div (click)=\"handleEditClick()\">\n {{rule.caption}}\n </div>\n </ng-template>\n</div>\n\n<div class=\"operator\" [ngClass]=\"{'editable': isEditing,'radius':!showValue}\">\n <ng-container *ngIf=\"isEditing;else operatorTemplate\">\n <ax-form-group>\n <ax-select-box [readonly]=\"mode == 'edit'\" *ngIf=\"showOperatorSelectBox\" [(selectedValues)]=\"rule.operator\"\n #selectBox (selectedItemsChange)=\"operatorChange($event)\" allowNull=\"false\" mode=\"single\">\n <ax-data-source [provideData]=\"provideDataOperator\">\n </ax-data-source>\n </ax-select-box>\n </ax-form-group>\n </ng-container>\n <ng-template #operatorTemplate>\n <div class=\"text\" (click)=\"handleEditClick()\">\n {{('queryBuilder.'+rule.operator) | trans}}\n </div>\n </ng-template>\n</div>\n<div *ngIf=\"showValue\" class=\"value\" [ngClass]=\"{'editable': isEditing}\">\n <ng-container *ngIf=\"isEditing;else valueTemplate\">\n\n <div *ngIf=\" rule.control && !isOnDemandLabel\" [ngSwitch]=\"rule.control.type\">\n <div *ngSwitchCase=\"'textBox'\">\n <ax-form-group>\n <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n [(value)]=\"rule.value\">\n </ax-text-box>\n </ax-form-group>\n </div>\n <div *ngSwitchCase=\"'selectBox'\">\n <ax-form-group>\n <ax-select-box *ngIf=\"showSelectBox\" [mode]=\"getOption('mode')\"\n [remoteOperation]=\"getOption('remoteOperation')\" [valueField]=\"getOption('valueField')\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" [textField]=\"getOption('textField')\"\n [(selectedItems)]=\"rule.valueItem\" (selectedItemsChange)=\"selectedItemsChange($event)\"\n #selectBoxValue>\n <ax-data-source [provideData]=\"getProvideData\"></ax-data-source>\n </ax-select-box>\n </ax-form-group>\n </div>\n\n <div *ngSwitchCase=\"'numberBox'\">\n <ax-form-group>\n <ax-number-box [decimalNumber]=\"2\" (onValueChanged)=\"valueChange($event)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" [(value)]=\"rule.value\">\n </ax-number-box>\n </ax-form-group>\n </div>\n <div *ngSwitchCase=\"'datetime'\">\n <ax-date-picker label=\"From\" [(value)]=\"rule.value\" (onValueChanged)=\"valueChange($event)\">\n </ax-date-picker>\n\n </div>\n <div *ngSwitchCase=\"'boolean'\">\n\n <ax-form-group>\n <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event)\"\n allowNull=\"false\" [selectedValues]=\"rule.value\" mode=\"single\">\n <ax-data-source [provideData]=\"provideDataBoolean\">\n </ax-data-source>\n </ax-select-box>\n </ax-form-group>\n\n </div>\n <div *ngSwitchDefault>\n <ax-form-group>\n <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n [(value)]=\"rule.value\">\n </ax-text-box>\n\n </ax-form-group>\n\n </div>\n </div>\n\n <div *ngIf=\"isOnDemandLabel\">\n\n <ax-text-box #textBoxNameValue [value]=\"getOnDemandName(rule.onDemandLabel)\"\n (onValueChanged)=\"onDemandLabelChange($event)\" placeholder=\"\u0646\u0627\u0645 \u0645\u062A\u063A\u06CC\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\">\n <!-- <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation> -->\n </ax-text-box>\n\n\n </div>\n\n </ng-container>\n <ng-template #valueTemplate>\n <div (click)=\"handleEditClick()\">\n\n {{rule.text}}\n\n </div>\n </ng-template>\n</div>\n\n<div class=\"buttons-list\">\n <div *ngIf=\"showValue && isEditing && mode == 'new'\" class=\"button variable\"\n [ngClass]=\"{'active-button': isOnDemandLabel}\">\n <i class=\"far fa-dollar-sign\"></i>\n <ax-check-box [value]=\"isOnDemandLabel\" (onClick)=\"onDemandLabel($event)\">\n </ax-check-box>\n </div>\n\n <div class=\"button commit\" (click)=\"handleCommitClick()\" *ngIf=\"isEditing\">\n <i class=\"far fa-check\"></i>\n </div>\n <div class=\"button remove\" (click)=\"handleRemoveClick()\" *ngIf=\"mode == 'new'\">\n <i class=\"far fa-times\"></i>\n </div>\n</div>" }]
11014
+ args: [{ selector: 'ax-query-rule', host: { class: 'ax ax-query-rule' }, encapsulation: ViewEncapsulation.None, standalone: false, template: "@if (parent) {\n <div class=\"condition\">\n <div class=\"text {{parent.condition}}\">\n <span>{{parent.condition}}</span>\n </div>\n </div>\n}\n<div class=\"handler\">\n <i class=\"far fa-grip-lines-vertical\"></i>\n</div>\n\n<div class=\"caption\" [ngClass]=\"{'editable': isEditing}\">\n @if (isEditing) {\n <ax-form-group>\n <ax-select-box [readonly]=\"mode == 'edit'\" (selectionChanged)=\"captionChange($event)\" allowNull=\"false\"\n [(selectedItems)]=\"rule.dataFieldItem\" textField=\"caption\" valueField=\"dataField\" [items]=\"fields\"\n mode=\"single\">\n </ax-select-box>\n </ax-form-group>\n } @else {\n <div (click)=\"handleEditClick()\">\n {{rule.caption}}\n </div>\n }\n</div>\n\n<div class=\"operator\" [ngClass]=\"{'editable': isEditing,'radius':!showValue}\">\n @if (isEditing) {\n <ax-form-group>\n @if (showOperatorSelectBox) {\n <ax-select-box [readonly]=\"mode == 'edit'\" [(selectedValues)]=\"rule.operator\"\n #selectBox (selectedItemsChange)=\"operatorChange($event)\" allowNull=\"false\" mode=\"single\">\n <ax-data-source [provideData]=\"provideDataOperator\">\n </ax-data-source>\n </ax-select-box>\n }\n </ax-form-group>\n } @else {\n <div class=\"text\" (click)=\"handleEditClick()\">\n {{('queryBuilder.'+rule.operator) | trans}}\n </div>\n }\n</div>\n@if (showValue) {\n <div class=\"value\" [ngClass]=\"{'editable': isEditing}\">\n @if (isEditing) {\n @if ( rule.control && !isOnDemandLabel) {\n <div>\n @switch (rule.control.type) {\n @case ('textBox') {\n <div>\n <ax-form-group>\n <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n [(value)]=\"rule.value\">\n </ax-text-box>\n </ax-form-group>\n </div>\n }\n @case ('selectBox') {\n <div>\n <ax-form-group>\n @if (showSelectBox) {\n <ax-select-box [mode]=\"getOption('mode')\"\n [remoteOperation]=\"getOption('remoteOperation')\" [valueField]=\"getOption('valueField')\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" [textField]=\"getOption('textField')\"\n [(selectedItems)]=\"rule.valueItem\" (selectedItemsChange)=\"selectedItemsChange($event)\"\n #selectBoxValue>\n <ax-data-source [provideData]=\"getProvideData\"></ax-data-source>\n </ax-select-box>\n }\n </ax-form-group>\n </div>\n }\n @case ('numberBox') {\n <div>\n <ax-form-group>\n <ax-number-box [decimalNumber]=\"2\" (onValueChanged)=\"valueChange($event)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" [(value)]=\"rule.value\">\n </ax-number-box>\n </ax-form-group>\n </div>\n }\n @case ('datetime') {\n <div>\n <ax-date-picker label=\"From\" [(value)]=\"rule.value\" (onValueChanged)=\"valueChange($event)\">\n </ax-date-picker>\n </div>\n }\n @case ('boolean') {\n <div>\n <ax-form-group>\n <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event)\"\n allowNull=\"false\" [selectedValues]=\"rule.value\" mode=\"single\">\n <ax-data-source [provideData]=\"provideDataBoolean\">\n </ax-data-source>\n </ax-select-box>\n </ax-form-group>\n </div>\n }\n @default {\n <div>\n <ax-form-group>\n <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n [(value)]=\"rule.value\">\n </ax-text-box>\n </ax-form-group>\n </div>\n }\n }\n </div>\n }\n @if (isOnDemandLabel) {\n <div>\n <ax-text-box #textBoxNameValue [value]=\"getOnDemandName(rule.onDemandLabel)\"\n (onValueChanged)=\"onDemandLabelChange($event)\" placeholder=\"\u0646\u0627\u0645 \u0645\u062A\u063A\u06CC\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\">\n <!-- <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation> -->\n </ax-text-box>\n </div>\n }\n } @else {\n <div (click)=\"handleEditClick()\">\n {{rule.text}}\n </div>\n }\n</div>\n}\n\n<div class=\"buttons-list\">\n @if (showValue && isEditing && mode == 'new') {\n <div class=\"button variable\"\n [ngClass]=\"{'active-button': isOnDemandLabel}\">\n <i class=\"far fa-dollar-sign\"></i>\n <ax-check-box [value]=\"isOnDemandLabel\" (onClick)=\"onDemandLabel($event)\">\n </ax-check-box>\n </div>\n }\n\n @if (isEditing) {\n <div class=\"button commit\" (click)=\"handleCommitClick()\">\n <i class=\"far fa-check\"></i>\n </div>\n }\n @if (mode == 'new') {\n <div class=\"button remove\" (click)=\"handleRemoveClick()\">\n <i class=\"far fa-times\"></i>\n </div>\n }\n</div>" }]
10951
11015
  }], ctorParameters: () => [], propDecorators: { selectBox: [{
10952
11016
  type: ViewChild,
10953
11017
  args: ['selectBox']
@@ -11128,11 +11192,11 @@ class AXQueryBuilderPopupComponent extends AXBasePopupPageComponent {
11128
11192
  ];
11129
11193
  }
11130
11194
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXQueryBuilderPopupComponent, deps: [{ token: AXToastService }], target: i0.ɵɵFactoryTarget.Component });
11131
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXQueryBuilderPopupComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div>\n <ax-validation-form #form>\n <div *ngFor=\"let rule of items\">\n\n <div *ngIf=\" rule.control\" [ngSwitch]=\"rule.control.type\" style=\"padding: 1em;\">\n <div *ngSwitchCase=\"'textBox'\">\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n </ax-form-group>\n </div>\n <div *ngSwitchCase=\"'selectBox'\">\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-select-box placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n [textField]=\"getOption('textField',rule)\" [(selectedItems)]=\"rule.valueItem\"\n [valueField]=\"getOption('valueField',rule)\" [mode]=\"getOption('mode',rule)\"\n (selectedItemsChange)=\"selectedItemsChange($event,rule)\" size=\"sm\" #selectBoxValue\n [remoteOperation]=\"getOption('remoteOperation',rule)\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n <ax-data-source [provideData]=\"getProvideData\" [params]=\"rule\"></ax-data-source>\n </ax-select-box>\n </ax-form-group>\n </div>\n <div *ngSwitchCase=\"'numberBox'\">\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-number-box (onValueChanged)=\"valueChange($event,rule)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </ax-form-group>\n </div>\n <div *ngSwitchCase=\"'datetime'\">\n <ax-date-picker label=\"From\" [(value)]=\"rule.value\" (onValueChanged)=\"valueChange($event,rule)\">\n </ax-date-picker>\n </div>\n <div *ngSwitchCase=\"'boolean'\">\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event,rule)\"\n allowNull=\"false\" [selectedValues]=\"rule.value\" size=\"sm\" mode=\"single\">\n <ax-data-source [provideData]=\"provideDataBoolean\">\n </ax-data-source>\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-select-box>\n </ax-form-group>\n </div>\n <div *ngSwitchDefault>\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n\n </ax-form-group>\n\n </div>\n </div>\n\n\n\n\n </div>\n\n </ax-validation-form>\n</div>\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: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size", "labelMode"], outputs: ["labelModeChange"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "component", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: ["selectedDates", "dayStyle", "dayMinMaxResoan", "validation", "placeholder", "min", "max", "readonly", "disabled", "allowClear", "textAlign", "showToday", "selectableHoliday", "dateType", "showTodayButton", "openByClick", "size", "type", "value"], outputs: ["typeChange", "onValueChanged", "valueChange"] }] });
11195
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXQueryBuilderPopupComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div>\n <ax-validation-form #form>\n @for (rule of items; track rule) {\n <div>\n @if ( rule.control) {\n <div style=\"padding: 1em;\">\n @switch (rule.control.type) {\n @case ('textBox') {\n <div>\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n </ax-form-group>\n </div>\n }\n @case ('selectBox') {\n <div>\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-select-box placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n [textField]=\"getOption('textField',rule)\" [(selectedItems)]=\"rule.valueItem\"\n [valueField]=\"getOption('valueField',rule)\" [mode]=\"getOption('mode',rule)\"\n (selectedItemsChange)=\"selectedItemsChange($event,rule)\" size=\"sm\" #selectBoxValue\n [remoteOperation]=\"getOption('remoteOperation',rule)\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n <ax-data-source [provideData]=\"getProvideData\" [params]=\"rule\"></ax-data-source>\n </ax-select-box>\n </ax-form-group>\n </div>\n }\n @case ('numberBox') {\n <div>\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-number-box (onValueChanged)=\"valueChange($event,rule)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </ax-form-group>\n </div>\n }\n @case ('datetime') {\n <div>\n <ax-date-picker label=\"From\" [(value)]=\"rule.value\" (onValueChanged)=\"valueChange($event,rule)\">\n </ax-date-picker>\n </div>\n }\n @case ('boolean') {\n <div>\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event,rule)\"\n allowNull=\"false\" [selectedValues]=\"rule.value\" size=\"sm\" mode=\"single\">\n <ax-data-source [provideData]=\"provideDataBoolean\">\n </ax-data-source>\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-select-box>\n </ax-form-group>\n </div>\n }\n @default {\n <div>\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n </ax-form-group>\n </div>\n }\n }\n </div>\n }\n </div>\n }\n\n </ax-validation-form>\n</div>\n", dependencies: [{ 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: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size", "labelMode"], outputs: ["labelModeChange"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "component", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: ["selectedDates", "dayStyle", "dayMinMaxResoan", "validation", "placeholder", "min", "max", "readonly", "disabled", "allowClear", "textAlign", "showToday", "selectableHoliday", "dateType", "showTodayButton", "openByClick", "size", "type", "value"], outputs: ["typeChange", "onValueChanged", "valueChange"] }] });
11132
11196
  }
11133
11197
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXQueryBuilderPopupComponent, decorators: [{
11134
11198
  type: Component,
11135
- args: [{ standalone: false, template: "<div>\n <ax-validation-form #form>\n <div *ngFor=\"let rule of items\">\n\n <div *ngIf=\" rule.control\" [ngSwitch]=\"rule.control.type\" style=\"padding: 1em;\">\n <div *ngSwitchCase=\"'textBox'\">\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n </ax-form-group>\n </div>\n <div *ngSwitchCase=\"'selectBox'\">\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-select-box placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n [textField]=\"getOption('textField',rule)\" [(selectedItems)]=\"rule.valueItem\"\n [valueField]=\"getOption('valueField',rule)\" [mode]=\"getOption('mode',rule)\"\n (selectedItemsChange)=\"selectedItemsChange($event,rule)\" size=\"sm\" #selectBoxValue\n [remoteOperation]=\"getOption('remoteOperation',rule)\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n <ax-data-source [provideData]=\"getProvideData\" [params]=\"rule\"></ax-data-source>\n </ax-select-box>\n </ax-form-group>\n </div>\n <div *ngSwitchCase=\"'numberBox'\">\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-number-box (onValueChanged)=\"valueChange($event,rule)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </ax-form-group>\n </div>\n <div *ngSwitchCase=\"'datetime'\">\n <ax-date-picker label=\"From\" [(value)]=\"rule.value\" (onValueChanged)=\"valueChange($event,rule)\">\n </ax-date-picker>\n </div>\n <div *ngSwitchCase=\"'boolean'\">\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event,rule)\"\n allowNull=\"false\" [selectedValues]=\"rule.value\" size=\"sm\" mode=\"single\">\n <ax-data-source [provideData]=\"provideDataBoolean\">\n </ax-data-source>\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-select-box>\n </ax-form-group>\n </div>\n <div *ngSwitchDefault>\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n\n </ax-form-group>\n\n </div>\n </div>\n\n\n\n\n </div>\n\n </ax-validation-form>\n</div>\n" }]
11199
+ args: [{ standalone: false, template: "<div>\n <ax-validation-form #form>\n @for (rule of items; track rule) {\n <div>\n @if ( rule.control) {\n <div style=\"padding: 1em;\">\n @switch (rule.control.type) {\n @case ('textBox') {\n <div>\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n </ax-form-group>\n </div>\n }\n @case ('selectBox') {\n <div>\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-select-box placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n [textField]=\"getOption('textField',rule)\" [(selectedItems)]=\"rule.valueItem\"\n [valueField]=\"getOption('valueField',rule)\" [mode]=\"getOption('mode',rule)\"\n (selectedItemsChange)=\"selectedItemsChange($event,rule)\" size=\"sm\" #selectBoxValue\n [remoteOperation]=\"getOption('remoteOperation',rule)\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n <ax-data-source [provideData]=\"getProvideData\" [params]=\"rule\"></ax-data-source>\n </ax-select-box>\n </ax-form-group>\n </div>\n }\n @case ('numberBox') {\n <div>\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-number-box (onValueChanged)=\"valueChange($event,rule)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </ax-form-group>\n </div>\n }\n @case ('datetime') {\n <div>\n <ax-date-picker label=\"From\" [(value)]=\"rule.value\" (onValueChanged)=\"valueChange($event,rule)\">\n </ax-date-picker>\n </div>\n }\n @case ('boolean') {\n <div>\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event,rule)\"\n allowNull=\"false\" [selectedValues]=\"rule.value\" size=\"sm\" mode=\"single\">\n <ax-data-source [provideData]=\"provideDataBoolean\">\n </ax-data-source>\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-select-box>\n </ax-form-group>\n </div>\n }\n @default {\n <div>\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n </ax-form-group>\n </div>\n }\n }\n </div>\n }\n </div>\n }\n\n </ax-validation-form>\n</div>\n" }]
11136
11200
  }], ctorParameters: () => [{ type: AXToastService }], propDecorators: { form: [{
11137
11201
  type: ViewChild,
11138
11202
  args: [AXValidationFormComponent]
@@ -11425,11 +11489,11 @@ class AXQueryBuilderGroupComponent {
11425
11489
  });
11426
11490
  }
11427
11491
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXQueryBuilderGroupComponent, deps: [{ token: AXQueryBuilderService }], target: i0.ɵɵFactoryTarget.Component });
11428
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXQueryBuilderGroupComponent, isStandalone: false, selector: "ax-query-group", inputs: { group: "group", parent: "parent", fields: "fields", mode: "mode" }, outputs: { groupRuleChanged: "groupRuleChanged" }, host: { classAttribute: "ax ax-query-group" }, viewQueries: [{ propertyName: "queryRule", first: true, predicate: ["queryRule"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], ngImport: i0, template: "<div class=\"header\">\n <div class=\"condition\" *ngIf=\"parent\">\n <div class=\"text {{parent.condition}}\">\n <span>{{parent.condition }}</span>\n </div>\n </div>\n <div class=\"handler\">\n <i class=\"far fa-grip-lines-vertical\"></i>\n </div>\n\n <div class=\"detail {{group.condition}}\" (click)=\"changeDetailMode()\">\n <div class=\"collapsed\" *ngIf=\"collapsed;else expandedTemplate\">\n {{group.queryString}}\n </div>\n <ng-template #expandedTemplate>\n <div class=\"expanded\">\n <strong>{{group.condition == 'OR' ? '\u06CC\u06A9\u06CC \u0627\u0632' : '\u0647\u0645\u0647' }} <span>\u0634\u0631\u0627\u06CC\u0637 \u0632\u06CC\u0631 \u0628\u0631\u0642\u0631\u0627\u0631 \u0628\u0627\u0634\u062F</span> </strong>\n </div>\n </ng-template>\n </div>\n <div class=\"buttons-list\">\n <div class=\"button remove\" *ngIf=\"parent && mode=='new'\" (click)=\"handleRemoveClick()\">\n <i class=\"far fa-times ax-danger-color\"></i>\n </div>\n <div class=\"button edit\" *ngIf=\"mode=='new'\" (click)=\"handleChangeClick()\">\n <i class=\"far fa-retweet ax-danger-color\"></i>\n </div>\n </div>\n</div>\n<div class=\"rules\" *ngIf=\"!collapsed\">\n <!-- <ax-validation-form #form> -->\n\n <div *ngFor=\"let item of group.items\" class=\"group-item\">\n <ng-container *ngIf=\"item.condition;else ruleTemplate\">\n <ax-query-group (groupRuleChanged)=\"ruleChanged($event)\" [mode]=\"mode\" [group]=\"item\" [fields]=\"fields\"\n [parent]=\"group\">\n </ax-query-group>\n </ng-container>\n <ng-template #ruleTemplate>\n <ax-query-rule #queryRule (ruleChanged)=\"ruleChanged($event)\" [mode]=\"mode\"\n (onRuleDelete)=\"ruleDelete($event)\" [rule]=\"item\" [fields]=\"fields\" [parent]=\"group\">\n </ax-query-rule>\n </ng-template>\n </div>\n <!-- </ax-validation-form> -->\n <div class=\"group-item\" *ngIf=\"mode=='new'\">\n <div class=\"ax-query-rule\">\n <div class=\"condition\">\n </div>\n <div class=\"handler\">\n <i class=\"far fa-grip-lines-vertical\"></i>\n </div>\n <div class=\"add-rule\" (click)=\"addRule()\" *ngIf=\"mode=='new'\">\n <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>\u0634\u0631\u0637</span>\n </div>\n <div class=\"add-group\" (click)=\"addGroup()\" *ngIf=\"!showGroupCondition && mode=='new'\">\n <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>\u06AF\u0631\u0648\u0647</span>\n </div>\n <div *ngIf=\"showGroupCondition && mode=='new'\" class=\"add-condition OR\" (click)=\"addGroupOR()\">\n <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>OR</span>\n </div>\n <div *ngIf=\"showGroupCondition && mode=='new'\" class=\"add-condition AND\" (click)=\"addGroupAND()\">\n <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>AND</span>\n </div>\n\n </div>\n </div>\n</div>", 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: "component", type: AXQueryBuilderGroupComponent, selector: "ax-query-group", inputs: ["group", "parent", "fields", "mode"], outputs: ["groupRuleChanged"] }, { kind: "component", type: AXQueryBuilderRuleComponent, selector: "ax-query-rule", inputs: ["isEditing", "rule", "parent", "mode", "fields"], outputs: ["onRuleDelete", "ruleChanged"] }], encapsulation: i0.ViewEncapsulation.None });
11492
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXQueryBuilderGroupComponent, isStandalone: false, selector: "ax-query-group", inputs: { group: "group", parent: "parent", fields: "fields", mode: "mode" }, outputs: { groupRuleChanged: "groupRuleChanged" }, host: { classAttribute: "ax ax-query-group" }, viewQueries: [{ propertyName: "queryRule", first: true, predicate: ["queryRule"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], ngImport: i0, template: "<div class=\"header\">\n @if (parent) {\n <div class=\"condition\">\n <div class=\"text {{parent.condition}}\">\n <span>{{parent.condition }}</span>\n </div>\n </div>\n }\n <div class=\"handler\">\n <i class=\"far fa-grip-lines-vertical\"></i>\n </div>\n\n <div class=\"detail {{group.condition}}\" (click)=\"changeDetailMode()\">\n @if (collapsed) {\n <div class=\"collapsed\">\n {{group.queryString}}\n </div>\n } @else {\n <div class=\"expanded\">\n <strong>{{group.condition == 'OR' ? '\u06CC\u06A9\u06CC \u0627\u0632' : '\u0647\u0645\u0647' }} <span>\u0634\u0631\u0627\u06CC\u0637 \u0632\u06CC\u0631 \u0628\u0631\u0642\u0631\u0627\u0631 \u0628\u0627\u0634\u062F</span> </strong>\n </div>\n }\n </div>\n <div class=\"buttons-list\">\n @if (parent && mode=='new') {\n <div class=\"button remove\" (click)=\"handleRemoveClick()\">\n <i class=\"far fa-times ax-danger-color\"></i>\n </div>\n }\n @if (mode=='new') {\n <div class=\"button edit\" (click)=\"handleChangeClick()\">\n <i class=\"far fa-retweet ax-danger-color\"></i>\n </div>\n }\n </div>\n</div>\n@if (!collapsed) {\n <div class=\"rules\">\n <!-- <ax-validation-form #form> -->\n @for (item of group.items; track item) {\n <div class=\"group-item\">\n @if (item.condition) {\n <ax-query-group (groupRuleChanged)=\"ruleChanged($event)\" [mode]=\"mode\" [group]=\"item\" [fields]=\"fields\"\n [parent]=\"group\">\n </ax-query-group>\n } @else {\n <ax-query-rule #queryRule (ruleChanged)=\"ruleChanged($event)\" [mode]=\"mode\"\n (onRuleDelete)=\"ruleDelete($event)\" [rule]=\"item\" [fields]=\"fields\" [parent]=\"group\">\n </ax-query-rule>\n }\n </div>\n }\n <!-- </ax-validation-form> -->\n @if (mode=='new') {\n <div class=\"group-item\">\n <div class=\"ax-query-rule\">\n <div class=\"condition\">\n </div>\n <div class=\"handler\">\n <i class=\"far fa-grip-lines-vertical\"></i>\n </div>\n @if (mode=='new') {\n <div class=\"add-rule\" (click)=\"addRule()\">\n <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>\u0634\u0631\u0637</span>\n </div>\n }\n @if (!showGroupCondition && mode=='new') {\n <div class=\"add-group\" (click)=\"addGroup()\">\n <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>\u06AF\u0631\u0648\u0647</span>\n </div>\n }\n @if (showGroupCondition && mode=='new') {\n <div class=\"add-condition OR\" (click)=\"addGroupOR()\">\n <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>OR</span>\n </div>\n }\n @if (showGroupCondition && mode=='new') {\n <div class=\"add-condition AND\" (click)=\"addGroupAND()\">\n <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>AND</span>\n </div>\n }\n </div>\n </div>\n }\n</div>\n}", dependencies: [{ kind: "component", type: AXQueryBuilderGroupComponent, selector: "ax-query-group", inputs: ["group", "parent", "fields", "mode"], outputs: ["groupRuleChanged"] }, { kind: "component", type: AXQueryBuilderRuleComponent, selector: "ax-query-rule", inputs: ["isEditing", "rule", "parent", "mode", "fields"], outputs: ["onRuleDelete", "ruleChanged"] }], encapsulation: i0.ViewEncapsulation.None });
11429
11493
  }
11430
11494
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXQueryBuilderGroupComponent, decorators: [{
11431
11495
  type: Component,
11432
- args: [{ selector: 'ax-query-group', host: { class: 'ax ax-query-group' }, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"header\">\n <div class=\"condition\" *ngIf=\"parent\">\n <div class=\"text {{parent.condition}}\">\n <span>{{parent.condition }}</span>\n </div>\n </div>\n <div class=\"handler\">\n <i class=\"far fa-grip-lines-vertical\"></i>\n </div>\n\n <div class=\"detail {{group.condition}}\" (click)=\"changeDetailMode()\">\n <div class=\"collapsed\" *ngIf=\"collapsed;else expandedTemplate\">\n {{group.queryString}}\n </div>\n <ng-template #expandedTemplate>\n <div class=\"expanded\">\n <strong>{{group.condition == 'OR' ? '\u06CC\u06A9\u06CC \u0627\u0632' : '\u0647\u0645\u0647' }} <span>\u0634\u0631\u0627\u06CC\u0637 \u0632\u06CC\u0631 \u0628\u0631\u0642\u0631\u0627\u0631 \u0628\u0627\u0634\u062F</span> </strong>\n </div>\n </ng-template>\n </div>\n <div class=\"buttons-list\">\n <div class=\"button remove\" *ngIf=\"parent && mode=='new'\" (click)=\"handleRemoveClick()\">\n <i class=\"far fa-times ax-danger-color\"></i>\n </div>\n <div class=\"button edit\" *ngIf=\"mode=='new'\" (click)=\"handleChangeClick()\">\n <i class=\"far fa-retweet ax-danger-color\"></i>\n </div>\n </div>\n</div>\n<div class=\"rules\" *ngIf=\"!collapsed\">\n <!-- <ax-validation-form #form> -->\n\n <div *ngFor=\"let item of group.items\" class=\"group-item\">\n <ng-container *ngIf=\"item.condition;else ruleTemplate\">\n <ax-query-group (groupRuleChanged)=\"ruleChanged($event)\" [mode]=\"mode\" [group]=\"item\" [fields]=\"fields\"\n [parent]=\"group\">\n </ax-query-group>\n </ng-container>\n <ng-template #ruleTemplate>\n <ax-query-rule #queryRule (ruleChanged)=\"ruleChanged($event)\" [mode]=\"mode\"\n (onRuleDelete)=\"ruleDelete($event)\" [rule]=\"item\" [fields]=\"fields\" [parent]=\"group\">\n </ax-query-rule>\n </ng-template>\n </div>\n <!-- </ax-validation-form> -->\n <div class=\"group-item\" *ngIf=\"mode=='new'\">\n <div class=\"ax-query-rule\">\n <div class=\"condition\">\n </div>\n <div class=\"handler\">\n <i class=\"far fa-grip-lines-vertical\"></i>\n </div>\n <div class=\"add-rule\" (click)=\"addRule()\" *ngIf=\"mode=='new'\">\n <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>\u0634\u0631\u0637</span>\n </div>\n <div class=\"add-group\" (click)=\"addGroup()\" *ngIf=\"!showGroupCondition && mode=='new'\">\n <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>\u06AF\u0631\u0648\u0647</span>\n </div>\n <div *ngIf=\"showGroupCondition && mode=='new'\" class=\"add-condition OR\" (click)=\"addGroupOR()\">\n <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>OR</span>\n </div>\n <div *ngIf=\"showGroupCondition && mode=='new'\" class=\"add-condition AND\" (click)=\"addGroupAND()\">\n <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>AND</span>\n </div>\n\n </div>\n </div>\n</div>" }]
11496
+ args: [{ selector: 'ax-query-group', host: { class: 'ax ax-query-group' }, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"header\">\n @if (parent) {\n <div class=\"condition\">\n <div class=\"text {{parent.condition}}\">\n <span>{{parent.condition }}</span>\n </div>\n </div>\n }\n <div class=\"handler\">\n <i class=\"far fa-grip-lines-vertical\"></i>\n </div>\n\n <div class=\"detail {{group.condition}}\" (click)=\"changeDetailMode()\">\n @if (collapsed) {\n <div class=\"collapsed\">\n {{group.queryString}}\n </div>\n } @else {\n <div class=\"expanded\">\n <strong>{{group.condition == 'OR' ? '\u06CC\u06A9\u06CC \u0627\u0632' : '\u0647\u0645\u0647' }} <span>\u0634\u0631\u0627\u06CC\u0637 \u0632\u06CC\u0631 \u0628\u0631\u0642\u0631\u0627\u0631 \u0628\u0627\u0634\u062F</span> </strong>\n </div>\n }\n </div>\n <div class=\"buttons-list\">\n @if (parent && mode=='new') {\n <div class=\"button remove\" (click)=\"handleRemoveClick()\">\n <i class=\"far fa-times ax-danger-color\"></i>\n </div>\n }\n @if (mode=='new') {\n <div class=\"button edit\" (click)=\"handleChangeClick()\">\n <i class=\"far fa-retweet ax-danger-color\"></i>\n </div>\n }\n </div>\n</div>\n@if (!collapsed) {\n <div class=\"rules\">\n <!-- <ax-validation-form #form> -->\n @for (item of group.items; track item) {\n <div class=\"group-item\">\n @if (item.condition) {\n <ax-query-group (groupRuleChanged)=\"ruleChanged($event)\" [mode]=\"mode\" [group]=\"item\" [fields]=\"fields\"\n [parent]=\"group\">\n </ax-query-group>\n } @else {\n <ax-query-rule #queryRule (ruleChanged)=\"ruleChanged($event)\" [mode]=\"mode\"\n (onRuleDelete)=\"ruleDelete($event)\" [rule]=\"item\" [fields]=\"fields\" [parent]=\"group\">\n </ax-query-rule>\n }\n </div>\n }\n <!-- </ax-validation-form> -->\n @if (mode=='new') {\n <div class=\"group-item\">\n <div class=\"ax-query-rule\">\n <div class=\"condition\">\n </div>\n <div class=\"handler\">\n <i class=\"far fa-grip-lines-vertical\"></i>\n </div>\n @if (mode=='new') {\n <div class=\"add-rule\" (click)=\"addRule()\">\n <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>\u0634\u0631\u0637</span>\n </div>\n }\n @if (!showGroupCondition && mode=='new') {\n <div class=\"add-group\" (click)=\"addGroup()\">\n <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>\u06AF\u0631\u0648\u0647</span>\n </div>\n }\n @if (showGroupCondition && mode=='new') {\n <div class=\"add-condition OR\" (click)=\"addGroupOR()\">\n <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>OR</span>\n </div>\n }\n @if (showGroupCondition && mode=='new') {\n <div class=\"add-condition AND\" (click)=\"addGroupAND()\">\n <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>AND</span>\n </div>\n }\n </div>\n </div>\n }\n</div>\n}" }]
11433
11497
  }], ctorParameters: () => [{ type: AXQueryBuilderService }], propDecorators: { queryRule: [{
11434
11498
  type: ViewChild,
11435
11499
  args: ['queryRule']
@@ -12047,15 +12111,15 @@ class AXSelectBox2Component extends AXValidatableComponent {
12047
12111
  this.currentfocusedIndex = index;
12048
12112
  }
12049
12113
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSelectBox2Component, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
12050
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXSelectBox2Component, isStandalone: false, selector: "ax-select-box2", inputs: { showDropDownButton: "showDropDownButton", readonly: "readonly", rtl: "rtl", disabled: "disabled", placeholder: "placeholder", size: "size", allowNull: "allowNull", textAlign: "textAlign", bufferSize: "bufferSize", remoteOperation: "remoteOperation", allowSearch: "allowSearch", textField: "textField", valueField: "valueField", selectionMode: "selectionMode", selectionDataMode: "selectionDataMode", dataSource: "dataSource", validation: "validation", value: "value", items: "items" }, outputs: { itemsChange: "itemsChange", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" }, styleAttribute: "width: 100%" }, providers: [
12114
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXSelectBox2Component, isStandalone: false, selector: "ax-select-box2", inputs: { showDropDownButton: "showDropDownButton", readonly: "readonly", rtl: "rtl", disabled: "disabled", placeholder: "placeholder", size: "size", allowNull: "allowNull", textAlign: "textAlign", bufferSize: "bufferSize", remoteOperation: "remoteOperation", allowSearch: "allowSearch", textField: "textField", valueField: "valueField", selectionMode: "selectionMode", selectionDataMode: "selectionDataMode", dataSource: "dataSource", validation: "validation", value: "value", items: "items" }, outputs: { itemsChange: "itemsChange", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" }, styleAttribute: "width: 100%" }, providers: [
12051
12115
  { provide: AXValidatableComponent, useExisting: AXSelectBox2Component },
12052
- ], queries: [{ propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "span", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }, { propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }, { propertyName: "textBoxSelectBox", first: true, predicate: ["textBoxSelectBox"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["d"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggle($event)\" [loading]=\"showLoading\">\n <ng-container start>\n <ng-content select=\"[start]\">\n </ng-content>\n </ng-container>\n <ng-container header>\n <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\n <div *ngFor=\"let item of selectedItems\" class=\"chips\" [class.chips-blank]=\"selectionMode === 'single'\"\n [title]=\"item[textField]\">\n <span class=\"chips-text\">\n {{item[textField]}}\n </span>\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\n *ngIf=\"(readonly!=true) && disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\n <i class=\"far fa-times close\"></i>\n </span>\n </div>\n <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\n <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\n [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\n [disabled]=\"disabled\" [size]=\"size\">\n </ax-text-box>\n </div>\n </div>\n </ng-container>\n <ng-container end>\n <ng-content select=\"[end]\">\n </ng-content>\n </ng-container>\n <ng-container panel>\n <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\n <ax-search-box #searchBox [(value)]=\"text\" size=\"sm\"\n (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\n </ax-search-box>\n </div>\n <div class=\"ax list-container\">\n <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\n <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\n <ng-template #thenTemplate>\n <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\n [class.focused]=\"i==currentfocusedIndex\" (click)=\"handleItemClick($event,item)\"\n [class.selected]=\"isItemSelected(item)\">\n <div>\n <div>\n <ax-check-box *ngIf=\"selectionMode !== 'single'\" [size]=\"size\" [value]=\"isItemSelected(item)\"\n [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\n (onClick)=\"handleItemClick($event,item)\">\n </ax-check-box>\n </div>\n <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\n [title]=\"item[textField]\"\n [ngStyle]=\"(selectionMode !== 'single') ? {'padding-inline-start': '2em'}:''\">\n {{ item[textField] }}\n </div>\n </div>\n </div>\n </ng-template>\n <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\n <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\n </div>\n <ng-template #elseTemplate>\n <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\n <ng-template #searchTemplate>\n <div class=\"list-item\">\n {{'common.searching' | trans}}\n </div>\n </ng-template>\n <ng-template #noDataTemplate>\n <div class=\"list-item\">\n {{'common.noDataFound' | trans}}\n </div>\n </ng-template>\n </ng-template>\n </div>\n </div>\n </ng-container>\n</ax-drop-down>", 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: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "directive", type: i1$2.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "onDemandTranslate", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
12116
+ ], queries: [{ propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "span", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }, { propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }, { propertyName: "textBoxSelectBox", first: true, predicate: ["textBoxSelectBox"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["d"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggle($event)\" [loading]=\"showLoading\">\n <ng-container start>\n <ng-content select=\"[start]\">\n </ng-content>\n </ng-container>\n <ng-container header>\n <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\n @for (item of selectedItems; track item) {\n <div class=\"chips\" [class.chips-blank]=\"selectionMode === 'single'\"\n [title]=\"item[textField]\">\n <span class=\"chips-text\">\n {{item[textField]}}\n </span>\n @if ((readonly!=true) && disabled!=true && (allowNull==true || (selectedItems.length > 1))) {\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\n >\n <i class=\"far fa-times close\"></i>\n </span>\n }\n </div>\n }\n <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\n <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\n [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\n [disabled]=\"disabled\" [size]=\"size\">\n </ax-text-box>\n </div>\n </div>\n </ng-container>\n <ng-container end>\n <ng-content select=\"[end]\">\n </ng-content>\n </ng-container>\n <ng-container panel>\n @if (allowSearch) {\n <div class=\"search-wrapper\" style=\"padding: 0.7em;\">\n <ax-search-box #searchBox [(value)]=\"text\" size=\"sm\"\n (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\n </ax-search-box>\n </div>\n }\n <div class=\"ax list-container\">\n <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\n @if (getItems().length>0) {\n @for (item of getItems(); track item; let i = $index) {\n <div class=\"list-item\"\n [class.focused]=\"i==currentfocusedIndex\" (click)=\"handleItemClick($event,item)\"\n [class.selected]=\"isItemSelected(item)\">\n <div>\n <div>\n @if (selectionMode !== 'single') {\n <ax-check-box [size]=\"size\" [value]=\"isItemSelected(item)\"\n [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\n (onClick)=\"handleItemClick($event,item)\">\n </ax-check-box>\n }\n </div>\n <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\n [title]=\"item[textField]\"\n [ngStyle]=\"(selectionMode !== 'single') ? {'padding-inline-start': '2em'}:''\">\n {{ item[textField] }}\n </div>\n </div>\n </div>\n }\n } @else {\n @if (showLoading == true) {\n <div class=\"list-item\">\n {{'common.searching' | trans}}\n </div>\n } @else {\n <div class=\"list-item\">\n {{'common.noDataFound' | trans}}\n </div>\n }\n }\n @if (showLoading) {\n <div class=\"ax-pad-sm\" style=\"text-align: center;\">\n <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\n </div>\n }\n </div>\n </div>\n </ng-container>\n</ax-drop-down>", dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "directive", type: i1$2.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "onDemandTranslate", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
12053
12117
  }
12054
12118
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSelectBox2Component, decorators: [{
12055
12119
  type: Component,
12056
12120
  args: [{ selector: 'ax-select-box2', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [
12057
12121
  { provide: AXValidatableComponent, useExisting: AXSelectBox2Component },
12058
- ], standalone: false, template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggle($event)\" [loading]=\"showLoading\">\n <ng-container start>\n <ng-content select=\"[start]\">\n </ng-content>\n </ng-container>\n <ng-container header>\n <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\n <div *ngFor=\"let item of selectedItems\" class=\"chips\" [class.chips-blank]=\"selectionMode === 'single'\"\n [title]=\"item[textField]\">\n <span class=\"chips-text\">\n {{item[textField]}}\n </span>\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\n *ngIf=\"(readonly!=true) && disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\n <i class=\"far fa-times close\"></i>\n </span>\n </div>\n <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\n <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\n [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\n [disabled]=\"disabled\" [size]=\"size\">\n </ax-text-box>\n </div>\n </div>\n </ng-container>\n <ng-container end>\n <ng-content select=\"[end]\">\n </ng-content>\n </ng-container>\n <ng-container panel>\n <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\n <ax-search-box #searchBox [(value)]=\"text\" size=\"sm\"\n (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\n </ax-search-box>\n </div>\n <div class=\"ax list-container\">\n <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\n <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\n <ng-template #thenTemplate>\n <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\n [class.focused]=\"i==currentfocusedIndex\" (click)=\"handleItemClick($event,item)\"\n [class.selected]=\"isItemSelected(item)\">\n <div>\n <div>\n <ax-check-box *ngIf=\"selectionMode !== 'single'\" [size]=\"size\" [value]=\"isItemSelected(item)\"\n [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\n (onClick)=\"handleItemClick($event,item)\">\n </ax-check-box>\n </div>\n <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\n [title]=\"item[textField]\"\n [ngStyle]=\"(selectionMode !== 'single') ? {'padding-inline-start': '2em'}:''\">\n {{ item[textField] }}\n </div>\n </div>\n </div>\n </ng-template>\n <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\n <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\n </div>\n <ng-template #elseTemplate>\n <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\n <ng-template #searchTemplate>\n <div class=\"list-item\">\n {{'common.searching' | trans}}\n </div>\n </ng-template>\n <ng-template #noDataTemplate>\n <div class=\"list-item\">\n {{'common.noDataFound' | trans}}\n </div>\n </ng-template>\n </ng-template>\n </div>\n </div>\n </ng-container>\n</ax-drop-down>" }]
12122
+ ], standalone: false, template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggle($event)\" [loading]=\"showLoading\">\n <ng-container start>\n <ng-content select=\"[start]\">\n </ng-content>\n </ng-container>\n <ng-container header>\n <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\n @for (item of selectedItems; track item) {\n <div class=\"chips\" [class.chips-blank]=\"selectionMode === 'single'\"\n [title]=\"item[textField]\">\n <span class=\"chips-text\">\n {{item[textField]}}\n </span>\n @if ((readonly!=true) && disabled!=true && (allowNull==true || (selectedItems.length > 1))) {\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\n >\n <i class=\"far fa-times close\"></i>\n </span>\n }\n </div>\n }\n <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\n <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\n [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\n [disabled]=\"disabled\" [size]=\"size\">\n </ax-text-box>\n </div>\n </div>\n </ng-container>\n <ng-container end>\n <ng-content select=\"[end]\">\n </ng-content>\n </ng-container>\n <ng-container panel>\n @if (allowSearch) {\n <div class=\"search-wrapper\" style=\"padding: 0.7em;\">\n <ax-search-box #searchBox [(value)]=\"text\" size=\"sm\"\n (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\n </ax-search-box>\n </div>\n }\n <div class=\"ax list-container\">\n <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\n @if (getItems().length>0) {\n @for (item of getItems(); track item; let i = $index) {\n <div class=\"list-item\"\n [class.focused]=\"i==currentfocusedIndex\" (click)=\"handleItemClick($event,item)\"\n [class.selected]=\"isItemSelected(item)\">\n <div>\n <div>\n @if (selectionMode !== 'single') {\n <ax-check-box [size]=\"size\" [value]=\"isItemSelected(item)\"\n [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\n (onClick)=\"handleItemClick($event,item)\">\n </ax-check-box>\n }\n </div>\n <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\n [title]=\"item[textField]\"\n [ngStyle]=\"(selectionMode !== 'single') ? {'padding-inline-start': '2em'}:''\">\n {{ item[textField] }}\n </div>\n </div>\n </div>\n }\n } @else {\n @if (showLoading == true) {\n <div class=\"list-item\">\n {{'common.searching' | trans}}\n </div>\n } @else {\n <div class=\"list-item\">\n {{'common.noDataFound' | trans}}\n </div>\n }\n }\n @if (showLoading) {\n <div class=\"ax-pad-sm\" style=\"text-align: center;\">\n <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\n </div>\n }\n </div>\n </div>\n </ng-container>\n</ax-drop-down>" }]
12059
12123
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { span: [{
12060
12124
  type: ViewChild,
12061
12125
  args: [AXTextBoxComponent, { static: true }]
@@ -12680,11 +12744,11 @@ class AXSearchBarComponent {
12680
12744
  this.searchPopover.close();
12681
12745
  }
12682
12746
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSearchBarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
12683
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXSearchBarComponent, isStandalone: false, selector: "ax-search-bar", inputs: { showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, sizeButton: { classPropertyName: "sizeButton", publicName: "sizeButton", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: false, isRequired: false, transformFunction: null }, popoverWidth: { classPropertyName: "popoverWidth", publicName: "popoverWidth", isSignal: false, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: false, isRequired: false, transformFunction: null }, loadOnInit: { classPropertyName: "loadOnInit", publicName: "loadOnInit", isSignal: false, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue", onClose: "onClose" }, viewQueries: [{ propertyName: "searchPopover", first: true, predicate: ["searchPop"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "@if (showBadge()) {\n\n<div class=\"ax-search-bar-badge-container\">\n <ax-button\n [block]=\"block\"\n end\n icon=\"far fa-sliders-h icon\"\n [type]=\"'primary outline'\"\n [disabled]=\"disabled\"\n [size]=\"sizeButton\"\n [tabIndex]=\"-1\"\n (click)=\"handleButtonClick()\"\n >\n </ax-button>\n\n @if (_searchCount) {\n\n <span class=\"search-count\">\n {{ _searchCount }}\n </span>\n }\n</div>\n\n}@else {\n<ax-button\n [block]=\"block\"\n end\n icon=\"far fa-sliders-h icon\"\n [selected]=\"_searchCount ? true : false\"\n [type]=\"_searchCount ? 'primary' : 'primary outline'\"\n [disabled]=\"disabled\"\n [size]=\"sizeButton\"\n [tabIndex]=\"-1\"\n (click)=\"handleButtonClick()\"\n>\n {{ caption ? caption : ('common.search' | trans) }}\n <span *ngIf=\"_searchCount\" class=\"search-count\">{{\n _searchCount\n }}</span></ax-button\n>\n}\n\n<ax-popover\n #searchPop\n [target]=\"ref\"\n [rtl]=\"rtl\"\n [position]=\"{\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top',\n offsetY: 10\n }\"\n>\n <div class=\"panel-box ax-dropdown-container-bordered {{ size }}\">\n <ax-validation-form #form>\n <ng-container *ngFor=\"let item of _items\">\n @if (item?.groupTitle) {\n <ax-fieldset [caption]=\"item?.groupTitle\">\n <ng-container *ngFor=\"let item of item.rows\">\n <div class=\"row\">\n <ng-container *ngFor=\"let prop of item.items\">\n <div\n *ngIf=\"prop.property.visible != false\"\n class=\"{{ renderCol(prop.property.col) }}\"\n >\n <div\n [class.ax-search-bar-required-state]=\"\n prop.property.editorOptions?.validation?.rules?.length\n \"\n >\n <ax-label>{{ prop.property.title }}</ax-label>\n <ng-container\n ax-property-editor-renderer\n [validationForm]=\"form\"\n [property]=\"prop\"\n [context]=\"_context\"\n (onValueChange)=\"handleValueChange($event)\"\n ></ng-container>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </ax-fieldset>\n }@else {\n <ng-container *ngFor=\"let item of item.rows\">\n <div class=\"row\">\n <ng-container *ngFor=\"let prop of item.items\">\n <div\n *ngIf=\"prop.property.visible != false\"\n class=\"{{ renderCol(prop.property.col) }}\"\n >\n <div\n [class.ax-search-bar-required-state]=\"\n prop.property.editorOptions?.validation?.rules?.length\n \"\n >\n <ax-label>{{ prop.property.title }}</ax-label>\n <ng-container\n ax-property-editor-renderer\n [validationForm]=\"form\"\n [property]=\"prop\"\n [context]=\"_context\"\n (onValueChange)=\"handleValueChange($event)\"\n ></ng-container>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n }\n </ng-container>\n <div class=\"footer-button\">\n <ax-button (click)=\"search()\">{{ 'common.search' | trans }}</ax-button>\n <ax-button type=\"blank danger\" (click)=\"clear()\">{{\n 'common.reset' | trans\n }}</ax-button>\n </div>\n </ax-validation-form>\n </div>\n</ax-popover>\n", styles: [".panel-box{padding:1rem}.panel-box.ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.search-count{background:#fff3;border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}.ax-search-bar-badge-container{position:relative;display:inline-block}.ax-search-bar-badge-container .search-count{background-color:var(--ax-primary-color);color:#fff;border-radius:50%;height:25px;width:25px;position:absolute;left:0;top:0;transform:translate(-30%,-30%)}\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: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "rtl", "visible"], outputs: ["onOutSideClick"] }, { kind: "component", type: AXFieldsetComponent, selector: "ax-fieldset", inputs: ["size", "caption", "allowCollapse"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }] });
12747
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXSearchBarComponent, isStandalone: false, selector: "ax-search-bar", inputs: { showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, sizeButton: { classPropertyName: "sizeButton", publicName: "sizeButton", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: false, isRequired: false, transformFunction: null }, popoverWidth: { classPropertyName: "popoverWidth", publicName: "popoverWidth", isSignal: false, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: false, isRequired: false, transformFunction: null }, loadOnInit: { classPropertyName: "loadOnInit", publicName: "loadOnInit", isSignal: false, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue", onClose: "onClose" }, viewQueries: [{ propertyName: "searchPopover", first: true, predicate: ["searchPop"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "@if (showBadge()) {\n\n <div class=\"ax-search-bar-badge-container\">\n <ax-button\n [block]=\"block\"\n end\n icon=\"far fa-sliders-h icon\"\n [type]=\"'primary outline'\"\n [disabled]=\"disabled\"\n [size]=\"sizeButton\"\n [tabIndex]=\"-1\"\n (click)=\"handleButtonClick()\"\n >\n </ax-button>\n\n @if (_searchCount) {\n\n <span class=\"search-count\">\n {{ _searchCount }}\n </span>\n }\n </div>\n\n }@else {\n <ax-button\n [block]=\"block\"\n end\n icon=\"far fa-sliders-h icon\"\n [selected]=\"_searchCount ? true : false\"\n [type]=\"_searchCount ? 'primary' : 'primary outline'\"\n [disabled]=\"disabled\"\n [size]=\"sizeButton\"\n [tabIndex]=\"-1\"\n (click)=\"handleButtonClick()\"\n >\n {{ caption ? caption : ('common.search' | trans) }}\n @if (_searchCount) {\n <span class=\"search-count\">{{\n _searchCount\n }}</span>\n }</ax-button\n >\n }\n\n <ax-popover\n #searchPop\n [target]=\"ref\"\n [rtl]=\"rtl\"\n [position]=\"{\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top',\n offsetY: 10\n }\"\n >\n <div class=\"panel-box ax-dropdown-container-bordered {{ size }}\">\n <ax-validation-form #form>\n @for (item of _items; track item) {\n @if (item?.groupTitle) {\n <ax-fieldset [caption]=\"item?.groupTitle\">\n @for (item of item.rows; track item) {\n <div class=\"row\">\n @for (prop of item.items; track prop) {\n @if (prop.property.visible != false) {\n <div\n class=\"{{ renderCol(prop.property.col) }}\"\n >\n <div\n [class.ax-search-bar-required-state]=\"\n prop.property.editorOptions?.validation?.rules?.length\n \"\n >\n <ax-label>{{ prop.property.title }}</ax-label>\n <ng-container\n ax-property-editor-renderer\n [validationForm]=\"form\"\n [property]=\"prop\"\n [context]=\"_context\"\n (onValueChange)=\"handleValueChange($event)\"\n ></ng-container>\n </div>\n </div>\n }\n }\n </div>\n }\n </ax-fieldset>\n }@else {\n @for (item of item.rows; track item) {\n <div class=\"row\">\n @for (prop of item.items; track prop) {\n @if (prop.property.visible != false) {\n <div\n class=\"{{ renderCol(prop.property.col) }}\"\n >\n <div\n [class.ax-search-bar-required-state]=\"\n prop.property.editorOptions?.validation?.rules?.length\n \"\n >\n <ax-label>{{ prop.property.title }}</ax-label>\n <ng-container\n ax-property-editor-renderer\n [validationForm]=\"form\"\n [property]=\"prop\"\n [context]=\"_context\"\n (onValueChange)=\"handleValueChange($event)\"\n ></ng-container>\n </div>\n </div>\n }\n }\n </div>\n }\n }\n }\n <div class=\"footer-button\">\n <ax-button (click)=\"search()\">{{ 'common.search' | trans }}</ax-button>\n <ax-button type=\"blank danger\" (click)=\"clear()\">{{\n 'common.reset' | trans\n }}</ax-button>\n </div>\n </ax-validation-form>\n </div>\n </ax-popover>\n", styles: [".panel-box{padding:1rem}.panel-box.ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.search-count{background:#fff3;border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}.ax-search-bar-badge-container{position:relative;display:inline-block}.ax-search-bar-badge-container .search-count{background-color:var(--ax-primary-color);color:#fff;border-radius:50%;height:25px;width:25px;position:absolute;left:0;top:0;transform:translate(-30%,-30%)}\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "rtl", "visible"], outputs: ["onOutSideClick"] }, { kind: "component", type: AXFieldsetComponent, selector: "ax-fieldset", inputs: ["size", "caption", "allowCollapse"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }] });
12684
12748
  }
12685
12749
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSearchBarComponent, decorators: [{
12686
12750
  type: Component,
12687
- args: [{ selector: 'ax-search-bar', standalone: false, template: "@if (showBadge()) {\n\n<div class=\"ax-search-bar-badge-container\">\n <ax-button\n [block]=\"block\"\n end\n icon=\"far fa-sliders-h icon\"\n [type]=\"'primary outline'\"\n [disabled]=\"disabled\"\n [size]=\"sizeButton\"\n [tabIndex]=\"-1\"\n (click)=\"handleButtonClick()\"\n >\n </ax-button>\n\n @if (_searchCount) {\n\n <span class=\"search-count\">\n {{ _searchCount }}\n </span>\n }\n</div>\n\n}@else {\n<ax-button\n [block]=\"block\"\n end\n icon=\"far fa-sliders-h icon\"\n [selected]=\"_searchCount ? true : false\"\n [type]=\"_searchCount ? 'primary' : 'primary outline'\"\n [disabled]=\"disabled\"\n [size]=\"sizeButton\"\n [tabIndex]=\"-1\"\n (click)=\"handleButtonClick()\"\n>\n {{ caption ? caption : ('common.search' | trans) }}\n <span *ngIf=\"_searchCount\" class=\"search-count\">{{\n _searchCount\n }}</span></ax-button\n>\n}\n\n<ax-popover\n #searchPop\n [target]=\"ref\"\n [rtl]=\"rtl\"\n [position]=\"{\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top',\n offsetY: 10\n }\"\n>\n <div class=\"panel-box ax-dropdown-container-bordered {{ size }}\">\n <ax-validation-form #form>\n <ng-container *ngFor=\"let item of _items\">\n @if (item?.groupTitle) {\n <ax-fieldset [caption]=\"item?.groupTitle\">\n <ng-container *ngFor=\"let item of item.rows\">\n <div class=\"row\">\n <ng-container *ngFor=\"let prop of item.items\">\n <div\n *ngIf=\"prop.property.visible != false\"\n class=\"{{ renderCol(prop.property.col) }}\"\n >\n <div\n [class.ax-search-bar-required-state]=\"\n prop.property.editorOptions?.validation?.rules?.length\n \"\n >\n <ax-label>{{ prop.property.title }}</ax-label>\n <ng-container\n ax-property-editor-renderer\n [validationForm]=\"form\"\n [property]=\"prop\"\n [context]=\"_context\"\n (onValueChange)=\"handleValueChange($event)\"\n ></ng-container>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </ax-fieldset>\n }@else {\n <ng-container *ngFor=\"let item of item.rows\">\n <div class=\"row\">\n <ng-container *ngFor=\"let prop of item.items\">\n <div\n *ngIf=\"prop.property.visible != false\"\n class=\"{{ renderCol(prop.property.col) }}\"\n >\n <div\n [class.ax-search-bar-required-state]=\"\n prop.property.editorOptions?.validation?.rules?.length\n \"\n >\n <ax-label>{{ prop.property.title }}</ax-label>\n <ng-container\n ax-property-editor-renderer\n [validationForm]=\"form\"\n [property]=\"prop\"\n [context]=\"_context\"\n (onValueChange)=\"handleValueChange($event)\"\n ></ng-container>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n }\n </ng-container>\n <div class=\"footer-button\">\n <ax-button (click)=\"search()\">{{ 'common.search' | trans }}</ax-button>\n <ax-button type=\"blank danger\" (click)=\"clear()\">{{\n 'common.reset' | trans\n }}</ax-button>\n </div>\n </ax-validation-form>\n </div>\n</ax-popover>\n", styles: [".panel-box{padding:1rem}.panel-box.ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.search-count{background:#fff3;border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}.ax-search-bar-badge-container{position:relative;display:inline-block}.ax-search-bar-badge-container .search-count{background-color:var(--ax-primary-color);color:#fff;border-radius:50%;height:25px;width:25px;position:absolute;left:0;top:0;transform:translate(-30%,-30%)}\n"] }]
12751
+ args: [{ selector: 'ax-search-bar', standalone: false, template: "@if (showBadge()) {\n\n <div class=\"ax-search-bar-badge-container\">\n <ax-button\n [block]=\"block\"\n end\n icon=\"far fa-sliders-h icon\"\n [type]=\"'primary outline'\"\n [disabled]=\"disabled\"\n [size]=\"sizeButton\"\n [tabIndex]=\"-1\"\n (click)=\"handleButtonClick()\"\n >\n </ax-button>\n\n @if (_searchCount) {\n\n <span class=\"search-count\">\n {{ _searchCount }}\n </span>\n }\n </div>\n\n }@else {\n <ax-button\n [block]=\"block\"\n end\n icon=\"far fa-sliders-h icon\"\n [selected]=\"_searchCount ? true : false\"\n [type]=\"_searchCount ? 'primary' : 'primary outline'\"\n [disabled]=\"disabled\"\n [size]=\"sizeButton\"\n [tabIndex]=\"-1\"\n (click)=\"handleButtonClick()\"\n >\n {{ caption ? caption : ('common.search' | trans) }}\n @if (_searchCount) {\n <span class=\"search-count\">{{\n _searchCount\n }}</span>\n }</ax-button\n >\n }\n\n <ax-popover\n #searchPop\n [target]=\"ref\"\n [rtl]=\"rtl\"\n [position]=\"{\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top',\n offsetY: 10\n }\"\n >\n <div class=\"panel-box ax-dropdown-container-bordered {{ size }}\">\n <ax-validation-form #form>\n @for (item of _items; track item) {\n @if (item?.groupTitle) {\n <ax-fieldset [caption]=\"item?.groupTitle\">\n @for (item of item.rows; track item) {\n <div class=\"row\">\n @for (prop of item.items; track prop) {\n @if (prop.property.visible != false) {\n <div\n class=\"{{ renderCol(prop.property.col) }}\"\n >\n <div\n [class.ax-search-bar-required-state]=\"\n prop.property.editorOptions?.validation?.rules?.length\n \"\n >\n <ax-label>{{ prop.property.title }}</ax-label>\n <ng-container\n ax-property-editor-renderer\n [validationForm]=\"form\"\n [property]=\"prop\"\n [context]=\"_context\"\n (onValueChange)=\"handleValueChange($event)\"\n ></ng-container>\n </div>\n </div>\n }\n }\n </div>\n }\n </ax-fieldset>\n }@else {\n @for (item of item.rows; track item) {\n <div class=\"row\">\n @for (prop of item.items; track prop) {\n @if (prop.property.visible != false) {\n <div\n class=\"{{ renderCol(prop.property.col) }}\"\n >\n <div\n [class.ax-search-bar-required-state]=\"\n prop.property.editorOptions?.validation?.rules?.length\n \"\n >\n <ax-label>{{ prop.property.title }}</ax-label>\n <ng-container\n ax-property-editor-renderer\n [validationForm]=\"form\"\n [property]=\"prop\"\n [context]=\"_context\"\n (onValueChange)=\"handleValueChange($event)\"\n ></ng-container>\n </div>\n </div>\n }\n }\n </div>\n }\n }\n }\n <div class=\"footer-button\">\n <ax-button (click)=\"search()\">{{ 'common.search' | trans }}</ax-button>\n <ax-button type=\"blank danger\" (click)=\"clear()\">{{\n 'common.reset' | trans\n }}</ax-button>\n </div>\n </ax-validation-form>\n </div>\n </ax-popover>\n", styles: [".panel-box{padding:1rem}.panel-box.ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.search-count{background:#fff3;border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}.ax-search-bar-badge-container{position:relative;display:inline-block}.ax-search-bar-badge-container .search-count{background-color:var(--ax-primary-color);color:#fff;border-radius:50%;height:25px;width:25px;position:absolute;left:0;top:0;transform:translate(-30%,-30%)}\n"] }]
12688
12752
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { searchPopover: [{
12689
12753
  type: ViewChild,
12690
12754
  args: ['searchPop']
@@ -13302,15 +13366,15 @@ class AXColorBoxComponent extends AXValidatableComponent {
13302
13366
  }
13303
13367
  }
13304
13368
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXColorBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
13305
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXColorBoxComponent, isStandalone: false, selector: "ax-color-box", inputs: { value: "value" }, outputs: { onColorSelect: "onColorSelect", valueChange: "valueChange" }, providers: [
13369
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXColorBoxComponent, isStandalone: false, selector: "ax-color-box", inputs: { value: "value" }, outputs: { onColorSelect: "onColorSelect", valueChange: "valueChange" }, providers: [
13306
13370
  { provide: AXValidatableComponent, useExisting: AXColorBoxComponent },
13307
- ], usesInheritance: true, ngImport: i0, template: "<div class=\"color-box\">\n <div class=\"color-box-pallet\">\n <div class=\"color-item\" *ngFor=\"let item of colors\" [style.background-color]=\"item.code\" [title]=\"item.code\"\n (click)=\"onColorClick(item)\">\n <i class=\"fas fa-check-circle color-active\" *ngIf=\"item.active\"></i>\n </div>\n </div>\n <div class=\"text-input\">\n <ng-container *ngIf=\"inputFormat=='rgb';else hexTemplate\">\n <div class=\"color-part\">\n <ax-text-box [(value)]=\"rColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\n </ax-text-box>\n </div>\n <div class=\"color-part\">\n <ax-text-box [(value)]=\"gColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\n </ax-text-box>\n </div>\n <div class=\"color-part\">\n <ax-text-box [(value)]=\"bColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\n </ax-text-box>\n </div>\n <div class=\"color-part switch\" (click)=\"inputFormat='hex'\">\n <span>RGB</span>\n </div>\n </ng-container>\n <ng-template #hexTemplate>\n <div class=\"color-part\">\n <ax-text-box [(value)]=\"value\" size=\"sm\" (onKey)=\"handleKeyEvent($event)\">\n </ax-text-box>\n </div>\n <!-- <div class=\"color-part switch\" (click)=\"inputFormat='rgb'\">\n <span>HEX</span>\n </div> -->\n </ng-template>\n\n </div>\n</div>", styles: [".color-box{border:1px solid var(--ax-border-color);max-width:300px;padding:5px}.color-box .color-box-pallet{display:flex;width:100%;height:auto;flex-wrap:wrap;justify-content:space-between;align-items:center}.color-box .color-box-pallet div{width:18px;height:18px;cursor:pointer;display:flex;justify-content:center;align-items:center;border:1px solid var(--ax-border-color);margin:1px}.color-box .color-box-pallet .color-active{color:#fff;box-shadow:1px 1px 4px #5a5a5a;border-radius:50%;font-size:.875rem}.color-box .text-input{display:flex;justify-content:space-between}.color-box .text-input .color-part{padding:2px;display:flex;align-items:center;flex-direction:column;justify-content:center}.color-box .text-input .color-part.switch{cursor:pointer;font-weight:700}.color-box .text-input .color-part.switch:hover{text-decoration:underline}.color-box .text-input .color-part .ax-field-set .no-label input{margin-top:0!important;text-align:center;height:var(--ax-size-md)}\n"], 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: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }] });
13371
+ ], usesInheritance: true, ngImport: i0, template: "<div class=\"color-box\">\n <div class=\"color-box-pallet\">\n @for (item of colors; track item) {\n <div class=\"color-item\" [style.background-color]=\"item.code\" [title]=\"item.code\"\n (click)=\"onColorClick(item)\">\n @if (item.active) {\n <i class=\"fas fa-check-circle color-active\"></i>\n }\n </div>\n }\n </div>\n <div class=\"text-input\">\n @if (inputFormat=='rgb') {\n <div class=\"color-part\">\n <ax-text-box [(value)]=\"rColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\n </ax-text-box>\n </div>\n <div class=\"color-part\">\n <ax-text-box [(value)]=\"gColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\n </ax-text-box>\n </div>\n <div class=\"color-part\">\n <ax-text-box [(value)]=\"bColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\n </ax-text-box>\n </div>\n <div class=\"color-part switch\" (click)=\"inputFormat='hex'\">\n <span>RGB</span>\n </div>\n } @else {\n <div class=\"color-part\">\n <ax-text-box [(value)]=\"value\" size=\"sm\" (onKey)=\"handleKeyEvent($event)\">\n </ax-text-box>\n </div>\n <!-- <div class=\"color-part switch\" (click)=\"inputFormat='rgb'\">\n <span>HEX</span>\n </div> -->\n }\n\n</div>\n</div>", styles: [".color-box{border:1px solid var(--ax-border-color);max-width:300px;padding:5px}.color-box .color-box-pallet{display:flex;width:100%;height:auto;flex-wrap:wrap;justify-content:space-between;align-items:center}.color-box .color-box-pallet div{width:18px;height:18px;cursor:pointer;display:flex;justify-content:center;align-items:center;border:1px solid var(--ax-border-color);margin:1px}.color-box .color-box-pallet .color-active{color:#fff;box-shadow:1px 1px 4px #5a5a5a;border-radius:50%;font-size:.875rem}.color-box .text-input{display:flex;justify-content:space-between}.color-box .text-input .color-part{padding:2px;display:flex;align-items:center;flex-direction:column;justify-content:center}.color-box .text-input .color-part.switch{cursor:pointer;font-weight:700}.color-box .text-input .color-part.switch:hover{text-decoration:underline}.color-box .text-input .color-part .ax-field-set .no-label input{margin-top:0!important;text-align:center;height:var(--ax-size-md)}\n"], dependencies: [{ kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }] });
13308
13372
  }
13309
13373
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXColorBoxComponent, decorators: [{
13310
13374
  type: Component,
13311
13375
  args: [{ selector: 'ax-color-box', providers: [
13312
13376
  { provide: AXValidatableComponent, useExisting: AXColorBoxComponent },
13313
- ], standalone: false, template: "<div class=\"color-box\">\n <div class=\"color-box-pallet\">\n <div class=\"color-item\" *ngFor=\"let item of colors\" [style.background-color]=\"item.code\" [title]=\"item.code\"\n (click)=\"onColorClick(item)\">\n <i class=\"fas fa-check-circle color-active\" *ngIf=\"item.active\"></i>\n </div>\n </div>\n <div class=\"text-input\">\n <ng-container *ngIf=\"inputFormat=='rgb';else hexTemplate\">\n <div class=\"color-part\">\n <ax-text-box [(value)]=\"rColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\n </ax-text-box>\n </div>\n <div class=\"color-part\">\n <ax-text-box [(value)]=\"gColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\n </ax-text-box>\n </div>\n <div class=\"color-part\">\n <ax-text-box [(value)]=\"bColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\n </ax-text-box>\n </div>\n <div class=\"color-part switch\" (click)=\"inputFormat='hex'\">\n <span>RGB</span>\n </div>\n </ng-container>\n <ng-template #hexTemplate>\n <div class=\"color-part\">\n <ax-text-box [(value)]=\"value\" size=\"sm\" (onKey)=\"handleKeyEvent($event)\">\n </ax-text-box>\n </div>\n <!-- <div class=\"color-part switch\" (click)=\"inputFormat='rgb'\">\n <span>HEX</span>\n </div> -->\n </ng-template>\n\n </div>\n</div>", styles: [".color-box{border:1px solid var(--ax-border-color);max-width:300px;padding:5px}.color-box .color-box-pallet{display:flex;width:100%;height:auto;flex-wrap:wrap;justify-content:space-between;align-items:center}.color-box .color-box-pallet div{width:18px;height:18px;cursor:pointer;display:flex;justify-content:center;align-items:center;border:1px solid var(--ax-border-color);margin:1px}.color-box .color-box-pallet .color-active{color:#fff;box-shadow:1px 1px 4px #5a5a5a;border-radius:50%;font-size:.875rem}.color-box .text-input{display:flex;justify-content:space-between}.color-box .text-input .color-part{padding:2px;display:flex;align-items:center;flex-direction:column;justify-content:center}.color-box .text-input .color-part.switch{cursor:pointer;font-weight:700}.color-box .text-input .color-part.switch:hover{text-decoration:underline}.color-box .text-input .color-part .ax-field-set .no-label input{margin-top:0!important;text-align:center;height:var(--ax-size-md)}\n"] }]
13377
+ ], standalone: false, template: "<div class=\"color-box\">\n <div class=\"color-box-pallet\">\n @for (item of colors; track item) {\n <div class=\"color-item\" [style.background-color]=\"item.code\" [title]=\"item.code\"\n (click)=\"onColorClick(item)\">\n @if (item.active) {\n <i class=\"fas fa-check-circle color-active\"></i>\n }\n </div>\n }\n </div>\n <div class=\"text-input\">\n @if (inputFormat=='rgb') {\n <div class=\"color-part\">\n <ax-text-box [(value)]=\"rColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\n </ax-text-box>\n </div>\n <div class=\"color-part\">\n <ax-text-box [(value)]=\"gColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\n </ax-text-box>\n </div>\n <div class=\"color-part\">\n <ax-text-box [(value)]=\"bColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\n </ax-text-box>\n </div>\n <div class=\"color-part switch\" (click)=\"inputFormat='hex'\">\n <span>RGB</span>\n </div>\n } @else {\n <div class=\"color-part\">\n <ax-text-box [(value)]=\"value\" size=\"sm\" (onKey)=\"handleKeyEvent($event)\">\n </ax-text-box>\n </div>\n <!-- <div class=\"color-part switch\" (click)=\"inputFormat='rgb'\">\n <span>HEX</span>\n </div> -->\n }\n\n</div>\n</div>", styles: [".color-box{border:1px solid var(--ax-border-color);max-width:300px;padding:5px}.color-box .color-box-pallet{display:flex;width:100%;height:auto;flex-wrap:wrap;justify-content:space-between;align-items:center}.color-box .color-box-pallet div{width:18px;height:18px;cursor:pointer;display:flex;justify-content:center;align-items:center;border:1px solid var(--ax-border-color);margin:1px}.color-box .color-box-pallet .color-active{color:#fff;box-shadow:1px 1px 4px #5a5a5a;border-radius:50%;font-size:.875rem}.color-box .text-input{display:flex;justify-content:space-between}.color-box .text-input .color-part{padding:2px;display:flex;align-items:center;flex-direction:column;justify-content:center}.color-box .text-input .color-part.switch{cursor:pointer;font-weight:700}.color-box .text-input .color-part.switch:hover{text-decoration:underline}.color-box .text-input .color-part .ax-field-set .no-label input{margin-top:0!important;text-align:center;height:var(--ax-size-md)}\n"] }]
13314
13378
  }], ctorParameters: () => [], propDecorators: { onColorSelect: [{
13315
13379
  type: Output
13316
13380
  }], valueChange: [{
@@ -13365,15 +13429,15 @@ class AXColorPickerComponent extends AXColorBoxComponent {
13365
13429
  this.dropdown.close();
13366
13430
  }
13367
13431
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXColorPickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
13368
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXColorPickerComponent, isStandalone: false, selector: "ax-color-picker", inputs: { placeholder: "placeholder", showClear: "showClear", label: "label", readonly: "readonly", disabled: "disabled", size: "size", rtl: "rtl", validation: "validation" }, host: { styleAttribute: "width: 100%" }, providers: [
13432
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXColorPickerComponent, isStandalone: false, selector: "ax-color-picker", inputs: { placeholder: "placeholder", showClear: "showClear", label: "label", readonly: "readonly", disabled: "disabled", size: "size", rtl: "rtl", validation: "validation" }, host: { styleAttribute: "width: 100%" }, providers: [
13369
13433
  { provide: AXValidatableComponent, useExisting: AXColorPickerComponent },
13370
- ], queries: [{ propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down #dropdown fitParent=\"false\" [size]=\"size\" [disabled]=\"disabled\" [rtl]=\"rtl\">\n <ng-container start>\n <ng-content select=\"[start]\">\n </ng-content>\n </ng-container>\n <ng-container header>\n\n <div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n <div class=\"content\" #content>\n <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\n <ng-container *ngIf=\"value; else elseTemplate\">\n <div [style.background-color]=\"value\" [style.color]=\"findTextColor(value)\"\n style=\"padding:0px 5px;width: 100%;display: flex;align-items: center;\">\n {{value}}&nbsp;</div>\n </ng-container>\n <ng-template #elseTemplate>\n {{placeholder}}&nbsp;\n </ng-template>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container end>\n <ng-content select=\"[end]\">\n </ng-content>\n </ng-container>\n <ng-container panel>\n <ax-color-box [(value)]=\"value\" \n (onColorSelect)=\"handleItemClick($event)\"></ax-color-box>\n </ng-container>\n</ax-drop-down>", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["value"], outputs: ["onColorSelect", "valueChange"] }] });
13434
+ ], queries: [{ propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down #dropdown fitParent=\"false\" [size]=\"size\" [disabled]=\"disabled\" [rtl]=\"rtl\">\n <ng-container start>\n <ng-content select=\"[start]\">\n </ng-content>\n </ng-container>\n <ng-container header>\n\n <div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n <div class=\"content\" #content>\n <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\n @if (value) {\n <div [style.background-color]=\"value\" [style.color]=\"findTextColor(value)\"\n style=\"padding:0px 5px;width: 100%;display: flex;align-items: center;\">\n {{value}}&nbsp;</div>\n } @else {\n {{placeholder}}&nbsp;\n }\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container end>\n <ng-content select=\"[end]\">\n </ng-content>\n </ng-container>\n <ng-container panel>\n <ax-color-box [(value)]=\"value\"\n (onColorSelect)=\"handleItemClick($event)\"></ax-color-box>\n </ng-container>\n</ax-drop-down>", dependencies: [{ kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["value"], outputs: ["onColorSelect", "valueChange"] }] });
13371
13435
  }
13372
13436
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXColorPickerComponent, decorators: [{
13373
13437
  type: Component,
13374
13438
  args: [{ selector: 'ax-color-picker', providers: [
13375
13439
  { provide: AXValidatableComponent, useExisting: AXColorPickerComponent },
13376
- ], host: { style: 'width: 100%' }, standalone: false, template: "<ax-drop-down #dropdown fitParent=\"false\" [size]=\"size\" [disabled]=\"disabled\" [rtl]=\"rtl\">\n <ng-container start>\n <ng-content select=\"[start]\">\n </ng-content>\n </ng-container>\n <ng-container header>\n\n <div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n <div class=\"content\" #content>\n <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\n <ng-container *ngIf=\"value; else elseTemplate\">\n <div [style.background-color]=\"value\" [style.color]=\"findTextColor(value)\"\n style=\"padding:0px 5px;width: 100%;display: flex;align-items: center;\">\n {{value}}&nbsp;</div>\n </ng-container>\n <ng-template #elseTemplate>\n {{placeholder}}&nbsp;\n </ng-template>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container end>\n <ng-content select=\"[end]\">\n </ng-content>\n </ng-container>\n <ng-container panel>\n <ax-color-box [(value)]=\"value\" \n (onColorSelect)=\"handleItemClick($event)\"></ax-color-box>\n </ng-container>\n</ax-drop-down>" }]
13440
+ ], host: { style: 'width: 100%' }, standalone: false, template: "<ax-drop-down #dropdown fitParent=\"false\" [size]=\"size\" [disabled]=\"disabled\" [rtl]=\"rtl\">\n <ng-container start>\n <ng-content select=\"[start]\">\n </ng-content>\n </ng-container>\n <ng-container header>\n\n <div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n <div class=\"content\" #content>\n <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\n @if (value) {\n <div [style.background-color]=\"value\" [style.color]=\"findTextColor(value)\"\n style=\"padding:0px 5px;width: 100%;display: flex;align-items: center;\">\n {{value}}&nbsp;</div>\n } @else {\n {{placeholder}}&nbsp;\n }\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container end>\n <ng-content select=\"[end]\">\n </ng-content>\n </ng-container>\n <ng-container panel>\n <ax-color-box [(value)]=\"value\"\n (onColorSelect)=\"handleItemClick($event)\"></ax-color-box>\n </ng-container>\n</ax-drop-down>" }]
13377
13441
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { dropdown: [{
13378
13442
  type: ViewChild,
13379
13443
  args: ['dropdown', { static: true }]
@@ -13558,11 +13622,11 @@ class ColumnPropertyEditorComponent extends AXProperyEditorComponent {
13558
13622
  return Promise.resolve(this.columnTypeData);
13559
13623
  };
13560
13624
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ColumnPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
13561
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: ColumnPropertyEditorComponent, isStandalone: false, 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", "leadZeroDateTime"] }, { 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", "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", "cdkDropListHasAnchor"], 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"] }] });
13625
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: ColumnPropertyEditorComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@for (c of columns; track c) {\n <div 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}\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 @for (c of columns; track c) {\n <div class=\"tr drag-drop-item-box\" 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 }\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: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { 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", "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: i1$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$3.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"] }] });
13562
13626
  }
13563
13627
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ColumnPropertyEditorComponent, decorators: [{
13564
13628
  type: Component,
13565
- args: [{ standalone: false, 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"] }]
13629
+ args: [{ standalone: false, template: "@for (c of columns; track c) {\n <div 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}\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 @for (c of columns; track c) {\n <div class=\"tr drag-drop-item-box\" 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 }\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"] }]
13566
13630
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: AXPopupService }], propDecorators: { tplEdit: [{
13567
13631
  type: ViewChild,
13568
13632
  args: ['tplEdit']
@@ -13770,11 +13834,11 @@ class AXConditionalColorPropertyEditorComponent extends AXProperyEditorComponent
13770
13834
  }
13771
13835
  }
13772
13836
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXConditionalColorPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
13773
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXConditionalColorPropertyEditorComponent, isStandalone: false, selector: "ng-component", inputs: { dataType: "dataType" }, viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\n <div>\n <div [style.background-color]=\"r.color\"></div>\n <div>{{ r.display }}</div>\n </div>\n <div [attr.title]=\"getTitle(r.operator)\">\n <div class=\"value\">{{r.value}}</div>\n <div>\n <i class=\"far {{getIcon(r.operator)}}\"></i>\n </div>\n <div class=\"value-text\">{{'common.value' | trans}}</div>\n <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\n </div>\n</div>\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans }}\n</ax-button>\n<ng-template #tplEdit>\n <ax-page>\n <ax-page-content>\n <div class=\"container\">\n <ax-validation-form (onInit)=\"onFormInit($event)\">\n\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.condition' | trans }}</ax-label>\n <ax-select-box [(selectedValues)]=\"editRow.operator\" [allowSearch]=\"false\"\n [allowNull]=\"false\" [items]=\"operators\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-select-box>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.value' | trans }}</ax-label>\n <div [ngSwitch]=\"dataType\">\n <ax-text-box *ngSwitchCase=\"'string'\" [(value)]=\"editRow.value\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n <ax-select-box *ngSwitchCase=\"'boolean'\" [(selectedValues)]=\"editRow.value\"\n [allowSearch]=\"false\" [allowNull]=\"false\" [items]=\"booleanItems\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-select-box>\n <ax-number-box *ngSwitchDefault [(value)]=\"editRow.value\"\n [showSeparator]=\"showSeparator\" [decimalNumber]=\"decimalNumber\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'conditional-color-property-editor.replaced-color' | trans }}</ax-label>\n <ax-color-picker [(value)]=\"editRow.color\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-color-picker>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'conditional-color-property-editor.replaced-title' | trans }}</ax-label>\n <ax-text-box [(value)]=\"editRow.display\">\n </ax-text-box>\n </div>\n </div>\n </ax-validation-form>\n </div>\n <div class=\"ax-mrg-md\"></div>\n </ax-page-content>\n </ax-page>\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.value-text{color:var(--ax-success-color)}.range-item div:last-child div.value{color:var(--ax-danger-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { 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: 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: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
13837
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXConditionalColorPropertyEditorComponent, isStandalone: false, selector: "ng-component", inputs: { dataType: "dataType" }, viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@for (r of ranges; track r) {\n <div [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\n <div>\n <div [style.background-color]=\"r.color\"></div>\n <div>{{ r.display }}</div>\n </div>\n <div [attr.title]=\"getTitle(r.operator)\">\n <div class=\"value\">{{r.value}}</div>\n <div>\n <i class=\"far {{getIcon(r.operator)}}\"></i>\n </div>\n <div class=\"value-text\">{{'common.value' | trans}}</div>\n <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\n </div>\n </div>\n}\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans }}\n</ax-button>\n<ng-template #tplEdit>\n <ax-page>\n <ax-page-content>\n <div class=\"container\">\n <ax-validation-form (onInit)=\"onFormInit($event)\">\n\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.condition' | trans }}</ax-label>\n <ax-select-box [(selectedValues)]=\"editRow.operator\" [allowSearch]=\"false\"\n [allowNull]=\"false\" [items]=\"operators\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-select-box>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.value' | trans }}</ax-label>\n <div>\n @switch (dataType) {\n @case ('string') {\n <ax-text-box [(value)]=\"editRow.value\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n }\n @case ('boolean') {\n <ax-select-box [(selectedValues)]=\"editRow.value\"\n [allowSearch]=\"false\" [allowNull]=\"false\" [items]=\"booleanItems\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-select-box>\n }\n @default {\n <ax-number-box [(value)]=\"editRow.value\"\n [showSeparator]=\"showSeparator\" [decimalNumber]=\"decimalNumber\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n }\n }\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'conditional-color-property-editor.replaced-color' | trans }}</ax-label>\n <ax-color-picker [(value)]=\"editRow.color\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-color-picker>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'conditional-color-property-editor.replaced-title' | trans }}</ax-label>\n <ax-text-box [(value)]=\"editRow.display\">\n </ax-text-box>\n </div>\n </div>\n </ax-validation-form>\n </div>\n <div class=\"ax-mrg-md\"></div>\n </ax-page-content>\n </ax-page>\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.value-text{color:var(--ax-success-color)}.range-item div:last-child div.value{color:var(--ax-danger-color)}\n"], dependencies: [{ kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { 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: 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: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
13774
13838
  }
13775
13839
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXConditionalColorPropertyEditorComponent, decorators: [{
13776
13840
  type: Component,
13777
- args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\n <div>\n <div [style.background-color]=\"r.color\"></div>\n <div>{{ r.display }}</div>\n </div>\n <div [attr.title]=\"getTitle(r.operator)\">\n <div class=\"value\">{{r.value}}</div>\n <div>\n <i class=\"far {{getIcon(r.operator)}}\"></i>\n </div>\n <div class=\"value-text\">{{'common.value' | trans}}</div>\n <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\n </div>\n</div>\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans }}\n</ax-button>\n<ng-template #tplEdit>\n <ax-page>\n <ax-page-content>\n <div class=\"container\">\n <ax-validation-form (onInit)=\"onFormInit($event)\">\n\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.condition' | trans }}</ax-label>\n <ax-select-box [(selectedValues)]=\"editRow.operator\" [allowSearch]=\"false\"\n [allowNull]=\"false\" [items]=\"operators\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-select-box>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.value' | trans }}</ax-label>\n <div [ngSwitch]=\"dataType\">\n <ax-text-box *ngSwitchCase=\"'string'\" [(value)]=\"editRow.value\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n <ax-select-box *ngSwitchCase=\"'boolean'\" [(selectedValues)]=\"editRow.value\"\n [allowSearch]=\"false\" [allowNull]=\"false\" [items]=\"booleanItems\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-select-box>\n <ax-number-box *ngSwitchDefault [(value)]=\"editRow.value\"\n [showSeparator]=\"showSeparator\" [decimalNumber]=\"decimalNumber\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'conditional-color-property-editor.replaced-color' | trans }}</ax-label>\n <ax-color-picker [(value)]=\"editRow.color\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-color-picker>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'conditional-color-property-editor.replaced-title' | trans }}</ax-label>\n <ax-text-box [(value)]=\"editRow.display\">\n </ax-text-box>\n </div>\n </div>\n </ax-validation-form>\n </div>\n <div class=\"ax-mrg-md\"></div>\n </ax-page-content>\n </ax-page>\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.value-text{color:var(--ax-success-color)}.range-item div:last-child div.value{color:var(--ax-danger-color)}\n"] }]
13841
+ args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@for (r of ranges; track r) {\n <div [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\n <div>\n <div [style.background-color]=\"r.color\"></div>\n <div>{{ r.display }}</div>\n </div>\n <div [attr.title]=\"getTitle(r.operator)\">\n <div class=\"value\">{{r.value}}</div>\n <div>\n <i class=\"far {{getIcon(r.operator)}}\"></i>\n </div>\n <div class=\"value-text\">{{'common.value' | trans}}</div>\n <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\n </div>\n </div>\n}\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans }}\n</ax-button>\n<ng-template #tplEdit>\n <ax-page>\n <ax-page-content>\n <div class=\"container\">\n <ax-validation-form (onInit)=\"onFormInit($event)\">\n\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.condition' | trans }}</ax-label>\n <ax-select-box [(selectedValues)]=\"editRow.operator\" [allowSearch]=\"false\"\n [allowNull]=\"false\" [items]=\"operators\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-select-box>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.value' | trans }}</ax-label>\n <div>\n @switch (dataType) {\n @case ('string') {\n <ax-text-box [(value)]=\"editRow.value\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n }\n @case ('boolean') {\n <ax-select-box [(selectedValues)]=\"editRow.value\"\n [allowSearch]=\"false\" [allowNull]=\"false\" [items]=\"booleanItems\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-select-box>\n }\n @default {\n <ax-number-box [(value)]=\"editRow.value\"\n [showSeparator]=\"showSeparator\" [decimalNumber]=\"decimalNumber\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n }\n }\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'conditional-color-property-editor.replaced-color' | trans }}</ax-label>\n <ax-color-picker [(value)]=\"editRow.color\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-color-picker>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'conditional-color-property-editor.replaced-title' | trans }}</ax-label>\n <ax-text-box [(value)]=\"editRow.display\">\n </ax-text-box>\n </div>\n </div>\n </ax-validation-form>\n </div>\n <div class=\"ax-mrg-md\"></div>\n </ax-page-content>\n </ax-page>\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.value-text{color:var(--ax-success-color)}.range-item div:last-child div.value{color:var(--ax-danger-color)}\n"] }]
13778
13842
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: AXPopupService }], propDecorators: { tplEdit: [{
13779
13843
  type: ViewChild,
13780
13844
  args: ['tplEdit']
@@ -14147,11 +14211,11 @@ class AXRangePropertyEditorComponent extends AXProperyEditorComponent {
14147
14211
  super.handleValueChange(this.ranges);
14148
14212
  }
14149
14213
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRangePropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
14150
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXRangePropertyEditorComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\n <div>\n <div [style.background-color]=\"r.color\"></div>\n <div>{{r.title}}</div>\n </div>\n <div>\n <div class=\"min\" title=\"minimum {{r.minValue}}\">{{r.minValue}}</div>\n <div>\n <i class=\"far fa-long-arrow-left\"></i>\n </div>\n <div class=\"max\" title=\"maxmimum {{r.maxValue}}\">{{r.maxValue}}</div>\n <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\n </div>\n</div>\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans }}\n</ax-button>\n<ng-template #tplEdit>\n <ax-page>\n <ax-page-content>\n <div class=\"container\">\n <ax-validation-form (onInit)=\"onFormInit($event)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.title' | trans }}</ax-label>\n <ax-text-box [(value)]=\"editRow.title\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-6\">\n <ax-label>{{ 'common.min-value' | trans }}</ax-label>\n <ax-number-box [(value)]=\"editRow.minValue\" [showSeparator]=\"showSeparator\"\n [decimalNumber]=\"decimalNumber\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </div>\n <div class=\"col-6\">\n <ax-label>{{ 'common.max-value' | trans }}</ax-label>\n <ax-number-box [(value)]=\"editRow.maxValue\" [showSeparator]=\"showSeparator\"\n [decimalNumber]=\"decimalNumber\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.color' | trans }}</ax-label>\n <ax-color-picker [(value)]=\"editRow.color\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-color-picker>\n </div>\n </div>\n </ax-validation-form>\n </div>\n <div class=\"ax-mrg-md\"></div>\n </ax-page-content>\n </ax-page>\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.min{color:var(--ax-danger-color)}.range-item div:last-child div.max{color:var(--ax-success-color)}\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", "leadZeroDateTime"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: AXPageComponent, selector: "ax-page" }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
14214
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXRangePropertyEditorComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@for (r of ranges; track r) {\n <div [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\n <div>\n <div [style.background-color]=\"r.color\"></div>\n <div>{{r.title}}</div>\n </div>\n <div>\n <div class=\"min\" title=\"minimum {{r.minValue}}\">{{r.minValue}}</div>\n <div>\n <i class=\"far fa-long-arrow-left\"></i>\n </div>\n <div class=\"max\" title=\"maxmimum {{r.maxValue}}\">{{r.maxValue}}</div>\n <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\n </div>\n </div>\n}\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans }}\n</ax-button>\n<ng-template #tplEdit>\n <ax-page>\n <ax-page-content>\n <div class=\"container\">\n <ax-validation-form (onInit)=\"onFormInit($event)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.title' | trans }}</ax-label>\n <ax-text-box [(value)]=\"editRow.title\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-6\">\n <ax-label>{{ 'common.min-value' | trans }}</ax-label>\n <ax-number-box [(value)]=\"editRow.minValue\" [showSeparator]=\"showSeparator\"\n [decimalNumber]=\"decimalNumber\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </div>\n <div class=\"col-6\">\n <ax-label>{{ 'common.max-value' | trans }}</ax-label>\n <ax-number-box [(value)]=\"editRow.maxValue\" [showSeparator]=\"showSeparator\"\n [decimalNumber]=\"decimalNumber\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.color' | trans }}</ax-label>\n <ax-color-picker [(value)]=\"editRow.color\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-color-picker>\n </div>\n </div>\n </ax-validation-form>\n </div>\n <div class=\"ax-mrg-md\"></div>\n </ax-page-content>\n </ax-page>\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.min{color:var(--ax-danger-color)}.range-item div:last-child div.max{color:var(--ax-success-color)}\n"], dependencies: [{ kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: AXPageComponent, selector: "ax-page" }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
14151
14215
  }
14152
14216
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRangePropertyEditorComponent, decorators: [{
14153
14217
  type: Component,
14154
- args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\n <div>\n <div [style.background-color]=\"r.color\"></div>\n <div>{{r.title}}</div>\n </div>\n <div>\n <div class=\"min\" title=\"minimum {{r.minValue}}\">{{r.minValue}}</div>\n <div>\n <i class=\"far fa-long-arrow-left\"></i>\n </div>\n <div class=\"max\" title=\"maxmimum {{r.maxValue}}\">{{r.maxValue}}</div>\n <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\n </div>\n</div>\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans }}\n</ax-button>\n<ng-template #tplEdit>\n <ax-page>\n <ax-page-content>\n <div class=\"container\">\n <ax-validation-form (onInit)=\"onFormInit($event)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.title' | trans }}</ax-label>\n <ax-text-box [(value)]=\"editRow.title\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-6\">\n <ax-label>{{ 'common.min-value' | trans }}</ax-label>\n <ax-number-box [(value)]=\"editRow.minValue\" [showSeparator]=\"showSeparator\"\n [decimalNumber]=\"decimalNumber\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </div>\n <div class=\"col-6\">\n <ax-label>{{ 'common.max-value' | trans }}</ax-label>\n <ax-number-box [(value)]=\"editRow.maxValue\" [showSeparator]=\"showSeparator\"\n [decimalNumber]=\"decimalNumber\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.color' | trans }}</ax-label>\n <ax-color-picker [(value)]=\"editRow.color\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-color-picker>\n </div>\n </div>\n </ax-validation-form>\n </div>\n <div class=\"ax-mrg-md\"></div>\n </ax-page-content>\n </ax-page>\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.min{color:var(--ax-danger-color)}.range-item div:last-child div.max{color:var(--ax-success-color)}\n"] }]
14218
+ args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@for (r of ranges; track r) {\n <div [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\n <div>\n <div [style.background-color]=\"r.color\"></div>\n <div>{{r.title}}</div>\n </div>\n <div>\n <div class=\"min\" title=\"minimum {{r.minValue}}\">{{r.minValue}}</div>\n <div>\n <i class=\"far fa-long-arrow-left\"></i>\n </div>\n <div class=\"max\" title=\"maxmimum {{r.maxValue}}\">{{r.maxValue}}</div>\n <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\n </div>\n </div>\n}\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans }}\n</ax-button>\n<ng-template #tplEdit>\n <ax-page>\n <ax-page-content>\n <div class=\"container\">\n <ax-validation-form (onInit)=\"onFormInit($event)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.title' | trans }}</ax-label>\n <ax-text-box [(value)]=\"editRow.title\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-6\">\n <ax-label>{{ 'common.min-value' | trans }}</ax-label>\n <ax-number-box [(value)]=\"editRow.minValue\" [showSeparator]=\"showSeparator\"\n [decimalNumber]=\"decimalNumber\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </div>\n <div class=\"col-6\">\n <ax-label>{{ 'common.max-value' | trans }}</ax-label>\n <ax-number-box [(value)]=\"editRow.maxValue\" [showSeparator]=\"showSeparator\"\n [decimalNumber]=\"decimalNumber\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.color' | trans }}</ax-label>\n <ax-color-picker [(value)]=\"editRow.color\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-color-picker>\n </div>\n </div>\n </ax-validation-form>\n </div>\n <div class=\"ax-mrg-md\"></div>\n </ax-page-content>\n </ax-page>\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.min{color:var(--ax-danger-color)}.range-item div:last-child div.max{color:var(--ax-success-color)}\n"] }]
14155
14219
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: AXPopupService }], propDecorators: { tplEdit: [{
14156
14220
  type: ViewChild,
14157
14221
  args: ['tplEdit']
@@ -14470,7 +14534,7 @@ class AXSwitchComponent extends AXBaseComponent {
14470
14534
  }
14471
14535
  focus() { }
14472
14536
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSwitchComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
14473
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXSwitchComponent, isStandalone: false, selector: "ax-switch", inputs: { tabIndex: "tabIndex", value: "value", readonly: "readonly", disabled: "disabled", size: "size" }, outputs: { onValueChanged: "onValueChanged", valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<label class=\"ax ax-switch\" >\n <input type=\"checkbox\" [(ngModel)]=\"value\" [ngModelOptions]=\"{standalone: true}\" [attr.tabindex]=\"tabIndex\">\n <span class=\"slider round\"></span>\n</label>", styles: [".ax.ax-switch{position:relative;display:inline-block;width:46px;height:25px;margin:5px}.ax.ax-switch>input{opacity:0;width:0;height:0}.ax.ax-switch>input:checked+.slider{background-color:var(--ax-primary-color)}.ax.ax-switch>input:checked+.slider:before{-webkit-transform:translateX(21px);-ms-transform:translateX(21px);transform:translate(21px)}.ax.ax-switch:focus-within .slider{outline:1px solid var(--ax-primary-color)}.ax.ax-switch .slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;-webkit-transition:.2s;transition:.2s}.ax.ax-switch .slider:before{content:\"\";position:absolute;height:21px;width:21px;left:2px;bottom:2px;background-color:#fff;-webkit-transition:.2s;transition:.2s}.ax.ax-switch .slider.round{border-radius:25px}.ax.ax-switch .slider.round:before{border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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, encapsulation: i0.ViewEncapsulation.None });
14537
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXSwitchComponent, isStandalone: false, selector: "ax-switch", inputs: { tabIndex: "tabIndex", value: "value", readonly: "readonly", disabled: "disabled", size: "size" }, outputs: { onValueChanged: "onValueChanged", valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<label class=\"ax ax-switch\" >\n <input type=\"checkbox\" [(ngModel)]=\"value\" [ngModelOptions]=\"{standalone: true}\" [attr.tabindex]=\"tabIndex\">\n <span class=\"slider round\"></span>\n</label>", styles: [".ax.ax-switch{position:relative;display:inline-block;width:46px;height:25px;margin:5px}.ax.ax-switch>input{opacity:0;width:0;height:0}.ax.ax-switch>input:checked+.slider{background-color:var(--ax-primary-color)}.ax.ax-switch>input:checked+.slider:before{-webkit-transform:translateX(21px);-ms-transform:translateX(21px);transform:translate(21px)}.ax.ax-switch:focus-within .slider{outline:1px solid var(--ax-primary-color)}.ax.ax-switch .slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;-webkit-transition:.2s;transition:.2s}.ax.ax-switch .slider:before{content:\"\";position:absolute;height:21px;width:21px;left:2px;bottom:2px;background-color:#fff;-webkit-transition:.2s;transition:.2s}.ax.ax-switch .slider.round{border-radius:25px}.ax.ax-switch .slider.round:before{border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1$5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
14474
14538
  }
14475
14539
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSwitchComponent, decorators: [{
14476
14540
  type: Component,
@@ -15780,15 +15844,15 @@ class AXTimePickerComponent extends AXBaseTextComponent {
15780
15844
  this.setCaretPosition(this.input.nativeElement, this.cursorPosition);
15781
15845
  }
15782
15846
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTimePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
15783
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXTimePickerComponent, isStandalone: false, selector: "ax-time-picker", inputs: { timeType: "timeType", showMask: "showMask", showCurentTime: "showCurentTime" }, outputs: { onValueChanged: "onValueChanged" }, host: { styleAttribute: "width: 100%" }, providers: [
15847
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXTimePickerComponent, isStandalone: false, selector: "ax-time-picker", inputs: { timeType: "timeType", showMask: "showMask", showCurentTime: "showCurentTime" }, outputs: { onValueChanged: "onValueChanged" }, host: { styleAttribute: "width: 100%" }, providers: [
15784
15848
  { provide: AXValidatableComponent, useExisting: AXTimePickerComponent },
15785
- ], 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]\"> </ng-content>\n <i class=\"form-item-icon {{ icon }}\" *ngIf=\"icon\"></i>\n </div>\n <div class=\"content\" #content>\n <div\n class=\"ax form-control input {{ size }}\"\n [class.disabled]=\"disabled\"\n [class.readonly]=\"readonly\"\n [class.icon]=\"icon\"\n >\n <input\n #input\n type=\"text\"\n class=\"ax {{ size }}\"\n [mask]=\"timeType\"\n [showMaskTyped]=\"showMask\"\n [(ngModel)]=\"textValue\"\n placeholder=\"{{ placeholder }}\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [ngClass]=\"setTextAlign()\"\n [class.clear]=\"value && allowClear\"\n (focus)=\"handleInputFocus()\"\n (blur)=\"handleInputBlur($event)\"\n (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (click)=\"handleClick($event)\"\n />\n </div>\n </div>\n <div class=\"ax items-wrapper\">\n <ax-button\n *ngIf=\"value && allowClear\"\n icon=\"far fa-times\"\n type=\"danger blank\"\n (click)=\"clear()\"\n [disabled]=\"disabled\"\n [tabIndex]=\"-1\"\n ></ax-button>\n <ng-content select=\"[end]\"> </ng-content>\n </div>\n</div>\n<!-- [textMask]=\"{mask: mask , showMask:showMask , guid: maskGuid , keepCharPositions: maskKeepCharPositions}\" -->\n<!-- <input #input id=\"timePickerValue\" [textMask]=\"timeType\" type=\"text\" [(ngModel)]=\"value\" (keypress)='handleKeyPress($event)'\n (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\"> -->\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: "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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i3.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
15849
+ ], 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]\"> </ng-content>\n @if (icon) {\n <i class=\"form-item-icon {{ icon }}\"></i>\n }\n </div>\n <div class=\"content\" #content>\n <div\n class=\"ax form-control input {{ size }}\"\n [class.disabled]=\"disabled\"\n [class.readonly]=\"readonly\"\n [class.icon]=\"icon\"\n >\n <input\n #input\n type=\"text\"\n class=\"ax {{ size }}\"\n [mask]=\"timeType\"\n [showMaskTyped]=\"showMask\"\n [(ngModel)]=\"textValue\"\n placeholder=\"{{ placeholder }}\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [ngClass]=\"setTextAlign()\"\n [class.clear]=\"value && allowClear\"\n (focus)=\"handleInputFocus()\"\n (blur)=\"handleInputBlur($event)\"\n (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (click)=\"handleClick($event)\"\n />\n </div>\n </div>\n <div class=\"ax items-wrapper\">\n @if (value && allowClear) {\n <ax-button\n icon=\"far fa-times\"\n type=\"danger blank\"\n (click)=\"clear()\"\n [disabled]=\"disabled\"\n [tabIndex]=\"-1\"\n ></ax-button>\n }\n <ng-content select=\"[end]\"> </ng-content>\n </div>\n </div>\n <!-- [textMask]=\"{mask: mask , showMask:showMask , guid: maskGuid , keepCharPositions: maskKeepCharPositions}\" -->\n <!-- <input #input id=\"timePickerValue\" [textMask]=\"timeType\" type=\"text\" [(ngModel)]=\"value\" (keypress)='handleKeyPress($event)'\n (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\"> -->\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i3.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
15786
15850
  }
15787
15851
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTimePickerComponent, decorators: [{
15788
15852
  type: Component,
15789
15853
  args: [{ selector: 'ax-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [
15790
15854
  { provide: AXValidatableComponent, useExisting: AXTimePickerComponent },
15791
- ], standalone: false, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n <div class=\"ax items-wrapper\">\n <ng-content select=\"[start]\"> </ng-content>\n <i class=\"form-item-icon {{ icon }}\" *ngIf=\"icon\"></i>\n </div>\n <div class=\"content\" #content>\n <div\n class=\"ax form-control input {{ size }}\"\n [class.disabled]=\"disabled\"\n [class.readonly]=\"readonly\"\n [class.icon]=\"icon\"\n >\n <input\n #input\n type=\"text\"\n class=\"ax {{ size }}\"\n [mask]=\"timeType\"\n [showMaskTyped]=\"showMask\"\n [(ngModel)]=\"textValue\"\n placeholder=\"{{ placeholder }}\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [ngClass]=\"setTextAlign()\"\n [class.clear]=\"value && allowClear\"\n (focus)=\"handleInputFocus()\"\n (blur)=\"handleInputBlur($event)\"\n (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (click)=\"handleClick($event)\"\n />\n </div>\n </div>\n <div class=\"ax items-wrapper\">\n <ax-button\n *ngIf=\"value && allowClear\"\n icon=\"far fa-times\"\n type=\"danger blank\"\n (click)=\"clear()\"\n [disabled]=\"disabled\"\n [tabIndex]=\"-1\"\n ></ax-button>\n <ng-content select=\"[end]\"> </ng-content>\n </div>\n</div>\n<!-- [textMask]=\"{mask: mask , showMask:showMask , guid: maskGuid , keepCharPositions: maskKeepCharPositions}\" -->\n<!-- <input #input id=\"timePickerValue\" [textMask]=\"timeType\" type=\"text\" [(ngModel)]=\"value\" (keypress)='handleKeyPress($event)'\n (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\"> -->\n" }]
15855
+ ], standalone: false, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n <div class=\"ax items-wrapper\">\n <ng-content select=\"[start]\"> </ng-content>\n @if (icon) {\n <i class=\"form-item-icon {{ icon }}\"></i>\n }\n </div>\n <div class=\"content\" #content>\n <div\n class=\"ax form-control input {{ size }}\"\n [class.disabled]=\"disabled\"\n [class.readonly]=\"readonly\"\n [class.icon]=\"icon\"\n >\n <input\n #input\n type=\"text\"\n class=\"ax {{ size }}\"\n [mask]=\"timeType\"\n [showMaskTyped]=\"showMask\"\n [(ngModel)]=\"textValue\"\n placeholder=\"{{ placeholder }}\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [ngClass]=\"setTextAlign()\"\n [class.clear]=\"value && allowClear\"\n (focus)=\"handleInputFocus()\"\n (blur)=\"handleInputBlur($event)\"\n (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (click)=\"handleClick($event)\"\n />\n </div>\n </div>\n <div class=\"ax items-wrapper\">\n @if (value && allowClear) {\n <ax-button\n icon=\"far fa-times\"\n type=\"danger blank\"\n (click)=\"clear()\"\n [disabled]=\"disabled\"\n [tabIndex]=\"-1\"\n ></ax-button>\n }\n <ng-content select=\"[end]\"> </ng-content>\n </div>\n </div>\n <!-- [textMask]=\"{mask: mask , showMask:showMask , guid: maskGuid , keepCharPositions: maskKeepCharPositions}\" -->\n <!-- <input #input id=\"timePickerValue\" [textMask]=\"timeType\" type=\"text\" [(ngModel)]=\"value\" (keypress)='handleKeyPress($event)'\n (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\"> -->\n" }]
15792
15856
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { onValueChanged: [{
15793
15857
  type: Output
15794
15858
  }], timeType: [{
@@ -15924,7 +15988,7 @@ class AXProppertyEditorModule {
15924
15988
  AXTimePropertyEditorModule,
15925
15989
  AXTextareaPropertyEditorModule,
15926
15990
  AXCheckPropertyEditorModule,
15927
- AXSelectionPropertyEditorModule, i1$4.RouterModule], exports: [AXPropertyEditorRendererDirective] });
15991
+ AXSelectionPropertyEditorModule, i1$6.RouterModule], exports: [AXPropertyEditorRendererDirective] });
15928
15992
  static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXProppertyEditorModule, imports: [WDIGET_MODULES,
15929
15993
  RouterModule.forChild([
15930
15994
  {
@@ -16490,11 +16554,11 @@ class AXTabStripComponent {
16490
16554
  }
16491
16555
  }
16492
16556
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTabStripComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
16493
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXTabStripComponent, isStandalone: false, selector: "ax-tab-strip", inputs: { maxWidth: "maxWidth", items: "items" }, outputs: { onTabChanged: "onTabChanged" }, ngImport: i0, template: "<ul\n class=\"tab-strip-container\"\n [ngClass]=\"{ 'tab-strip-custom-width': maxWidth }\"\n [style.max-width]=\"maxWidth\"\n>\n <ng-container *ngFor=\"let item of items\">\n <li\n *ngIf=\"!!item.visible || item.visible == undefined\"\n [class.active]=\"item.active\"\n [class.disabled]=\"item.disable\"\n (click)=\"handleClick(item, $event)\"\n >\n {{ item.text }}\n </li>\n </ng-container>\n</ul>\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"] }] });
16557
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXTabStripComponent, isStandalone: false, selector: "ax-tab-strip", inputs: { maxWidth: "maxWidth", items: "items" }, outputs: { onTabChanged: "onTabChanged" }, ngImport: i0, template: "<ul\n class=\"tab-strip-container\"\n [ngClass]=\"{ 'tab-strip-custom-width': maxWidth }\"\n [style.max-width]=\"maxWidth\"\n >\n @for (item of items; track item) {\n @if (!!item.visible || item.visible == undefined) {\n <li\n [class.active]=\"item.active\"\n [class.disabled]=\"item.disable\"\n (click)=\"handleClick(item, $event)\"\n >\n {{ item.text }}\n </li>\n }\n }\n</ul>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
16494
16558
  }
16495
16559
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTabStripComponent, decorators: [{
16496
16560
  type: Component,
16497
- args: [{ selector: 'ax-tab-strip', standalone: false, template: "<ul\n class=\"tab-strip-container\"\n [ngClass]=\"{ 'tab-strip-custom-width': maxWidth }\"\n [style.max-width]=\"maxWidth\"\n>\n <ng-container *ngFor=\"let item of items\">\n <li\n *ngIf=\"!!item.visible || item.visible == undefined\"\n [class.active]=\"item.active\"\n [class.disabled]=\"item.disable\"\n (click)=\"handleClick(item, $event)\"\n >\n {{ item.text }}\n </li>\n </ng-container>\n</ul>\n" }]
16561
+ args: [{ selector: 'ax-tab-strip', standalone: false, template: "<ul\n class=\"tab-strip-container\"\n [ngClass]=\"{ 'tab-strip-custom-width': maxWidth }\"\n [style.max-width]=\"maxWidth\"\n >\n @for (item of items; track item) {\n @if (!!item.visible || item.visible == undefined) {\n <li\n [class.active]=\"item.active\"\n [class.disabled]=\"item.disable\"\n (click)=\"handleClick(item, $event)\"\n >\n {{ item.text }}\n </li>\n }\n }\n</ul>\n" }]
16498
16562
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { maxWidth: [{
16499
16563
  type: Input
16500
16564
  }], items: [{
@@ -16551,11 +16615,11 @@ class AXTabComponent {
16551
16615
  dataContext;
16552
16616
  icon;
16553
16617
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
16554
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXTabComponent, isStandalone: false, selector: "ax-tab", inputs: { caption: "caption", name: "name", active: "active", isCloseable: "isCloseable", template: "template", dataContext: "dataContext", icon: "icon" }, ngImport: i0, template: "<div [hidden]=\"!active\" class=\"ax tab-pane\">\n <ng-content></ng-content>\n <ng-container *ngIf=\"template\"\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"dataContext\"\n >\n </ng-container>\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
16618
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXTabComponent, isStandalone: false, selector: "ax-tab", inputs: { caption: "caption", name: "name", active: "active", isCloseable: "isCloseable", template: "template", dataContext: "dataContext", icon: "icon" }, ngImport: i0, template: "<div [hidden]=\"!active\" class=\"ax tab-pane\">\n <ng-content></ng-content>\n @if (template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"dataContext\"\n >\n </ng-container>\n }\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
16555
16619
  }
16556
16620
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTabComponent, decorators: [{
16557
16621
  type: Component,
16558
- args: [{ selector: 'ax-tab', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div [hidden]=\"!active\" class=\"ax tab-pane\">\n <ng-content></ng-content>\n <ng-container *ngIf=\"template\"\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"dataContext\"\n >\n </ng-container>\n</div>" }]
16622
+ args: [{ selector: 'ax-tab', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div [hidden]=\"!active\" class=\"ax tab-pane\">\n <ng-content></ng-content>\n @if (template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"dataContext\"\n >\n </ng-container>\n }\n</div>" }]
16559
16623
  }], propDecorators: { caption: [{
16560
16624
  type: Input
16561
16625
  }], name: [{
@@ -17332,11 +17396,11 @@ class AXTreeSideMenuComponent extends AXBaseComponent {
17332
17396
  return keyFields;
17333
17397
  }
17334
17398
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTreeSideMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
17335
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXTreeSideMenuComponent, isStandalone: false, selector: "ax-tree-side-menu", inputs: { cssClass: "cssClass", selectionMode: "selectionMode", selectionLevel: "selectionLevel", selectedFieldName: "selectedFieldName", selectNodesRecursive: "selectNodesRecursive", seletedKeyFields: "seletedKeyFields", keyField: "keyField", textField: "textField", hasChildField: "hasChildField", bordered: "bordered", lazyLoading: "lazyLoading", allowDrag: "allowDrag", size: "size", iconStart: "iconStart", closeIconName: "closeIconName", openIconName: "openIconName", contextMenuItems: "contextMenuItems" }, outputs: { selectionChanged: "selectionChanged", onItemOpening: "onItemOpening", onItemClick: "onItemClick", onItemClosing: "onItemClosing", onItemDrag: "onItemDrag", onItemMoved: "onItemMoved", onContextMenuItemClick: "onContextMenuItemClick" }, queries: [{ propertyName: "nodeTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"ax-tree-side-menu {{size}} {{cssClass}}\">\n <ng-template #recursiveList let-list>\n <ng-container *ngFor=\"let item of list\">\n <li (click)=\"handleOnNodeClick($event,item,true)\"\n class=\"{{item[hasChildField] ? '':'node'}} {{!!item.toggle ? 'active':''}}\" style=\"display: flex;\"\n [class.selected]=\"item.select\">\n <div class=\"ax-tree-side-menu-item\" (click)=\"handleOnNodeClick($event,item,true)\">\n\n \n\n <div (click)=\"handleOnNodeClick($event,item,true)\" (dblclick)=\"itemdbClick($event,item)\">\n <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\n <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\n </ng-container>\n <ng-template #elseTemplate>\n {{item[textField]}}\n </ng-template>\n </div>\n\n <div class=\"start-side\" *ngIf=\"iconStart\">\n <div *ngIf=\"item[hasChildField]\">\n <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\n <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\n <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\n </div>\n </div>\n\n <div class=\"start-side\" *ngIf=\"!iconStart\">\n <div *ngIf=\"item[hasChildField]\" (click)=\"handleOnNodeClick($event,item,true)\">\n <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\n <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\n <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\n </div>\n </div>\n </div>\n <ul class=\"ax-tree-side-menu-child\" *ngIf=\"item.toggle\">\n <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\"></ng-container>\n </ul>\n </li>\n </ng-container>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\n</ul>", 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: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
17399
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXTreeSideMenuComponent, isStandalone: false, selector: "ax-tree-side-menu", inputs: { cssClass: "cssClass", selectionMode: "selectionMode", selectionLevel: "selectionLevel", selectedFieldName: "selectedFieldName", selectNodesRecursive: "selectNodesRecursive", seletedKeyFields: "seletedKeyFields", keyField: "keyField", textField: "textField", hasChildField: "hasChildField", bordered: "bordered", lazyLoading: "lazyLoading", allowDrag: "allowDrag", size: "size", iconStart: "iconStart", closeIconName: "closeIconName", openIconName: "openIconName", contextMenuItems: "contextMenuItems" }, outputs: { selectionChanged: "selectionChanged", onItemOpening: "onItemOpening", onItemClick: "onItemClick", onItemClosing: "onItemClosing", onItemDrag: "onItemDrag", onItemMoved: "onItemMoved", onContextMenuItemClick: "onContextMenuItemClick" }, queries: [{ propertyName: "nodeTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"ax-tree-side-menu {{size}} {{cssClass}}\">\n <ng-template #recursiveList let-list>\n @for (item of list; track item) {\n <li (click)=\"handleOnNodeClick($event,item,true)\"\n class=\"{{item[hasChildField] ? '':'node'}} {{!!item.toggle ? 'active':''}}\" style=\"display: flex;\"\n [class.selected]=\"item.select\">\n <div class=\"ax-tree-side-menu-item\" (click)=\"handleOnNodeClick($event,item,true)\">\n <div (click)=\"handleOnNodeClick($event,item,true)\" (dblclick)=\"itemdbClick($event,item)\">\n @if (nodeTemplate) {\n <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\n } @else {\n {{item[textField]}}\n }\n </div>\n @if (iconStart) {\n <div class=\"start-side\">\n @if (item[hasChildField]) {\n <div>\n @if ( !!item.toggle && !item.loading) {\n <i class=\"{{openIconName}}\"></i>\n }\n @if (!item.toggle && !item.loading) {\n <i class=\"{{closeIconName}}\"></i>\n }\n @if (item.loading) {\n <i class=\"fal fa-spinner fa-spin\"></i>\n }\n </div>\n }\n </div>\n }\n @if (!iconStart) {\n <div class=\"start-side\">\n @if (item[hasChildField]) {\n <div (click)=\"handleOnNodeClick($event,item,true)\">\n @if ( !!item.toggle && !item.loading) {\n <i class=\"{{openIconName}}\"></i>\n }\n @if (!item.toggle && !item.loading) {\n <i class=\"{{closeIconName}}\"></i>\n }\n @if (item.loading) {\n <i class=\"fal fa-spinner fa-spin\"></i>\n }\n </div>\n }\n </div>\n }\n </div>\n @if (item.toggle) {\n <ul class=\"ax-tree-side-menu-child\">\n <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\"></ng-container>\n </ul>\n }\n </li>\n }\n </ng-template>\n <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\n</ul>", dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
17336
17400
  }
17337
17401
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTreeSideMenuComponent, decorators: [{
17338
17402
  type: Component,
17339
- args: [{ selector: 'ax-tree-side-menu', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ul class=\"ax-tree-side-menu {{size}} {{cssClass}}\">\n <ng-template #recursiveList let-list>\n <ng-container *ngFor=\"let item of list\">\n <li (click)=\"handleOnNodeClick($event,item,true)\"\n class=\"{{item[hasChildField] ? '':'node'}} {{!!item.toggle ? 'active':''}}\" style=\"display: flex;\"\n [class.selected]=\"item.select\">\n <div class=\"ax-tree-side-menu-item\" (click)=\"handleOnNodeClick($event,item,true)\">\n\n \n\n <div (click)=\"handleOnNodeClick($event,item,true)\" (dblclick)=\"itemdbClick($event,item)\">\n <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\n <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\n </ng-container>\n <ng-template #elseTemplate>\n {{item[textField]}}\n </ng-template>\n </div>\n\n <div class=\"start-side\" *ngIf=\"iconStart\">\n <div *ngIf=\"item[hasChildField]\">\n <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\n <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\n <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\n </div>\n </div>\n\n <div class=\"start-side\" *ngIf=\"!iconStart\">\n <div *ngIf=\"item[hasChildField]\" (click)=\"handleOnNodeClick($event,item,true)\">\n <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\n <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\n <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\n </div>\n </div>\n </div>\n <ul class=\"ax-tree-side-menu-child\" *ngIf=\"item.toggle\">\n <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\"></ng-container>\n </ul>\n </li>\n </ng-container>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\n</ul>" }]
17403
+ args: [{ selector: 'ax-tree-side-menu', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ul class=\"ax-tree-side-menu {{size}} {{cssClass}}\">\n <ng-template #recursiveList let-list>\n @for (item of list; track item) {\n <li (click)=\"handleOnNodeClick($event,item,true)\"\n class=\"{{item[hasChildField] ? '':'node'}} {{!!item.toggle ? 'active':''}}\" style=\"display: flex;\"\n [class.selected]=\"item.select\">\n <div class=\"ax-tree-side-menu-item\" (click)=\"handleOnNodeClick($event,item,true)\">\n <div (click)=\"handleOnNodeClick($event,item,true)\" (dblclick)=\"itemdbClick($event,item)\">\n @if (nodeTemplate) {\n <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\n } @else {\n {{item[textField]}}\n }\n </div>\n @if (iconStart) {\n <div class=\"start-side\">\n @if (item[hasChildField]) {\n <div>\n @if ( !!item.toggle && !item.loading) {\n <i class=\"{{openIconName}}\"></i>\n }\n @if (!item.toggle && !item.loading) {\n <i class=\"{{closeIconName}}\"></i>\n }\n @if (item.loading) {\n <i class=\"fal fa-spinner fa-spin\"></i>\n }\n </div>\n }\n </div>\n }\n @if (!iconStart) {\n <div class=\"start-side\">\n @if (item[hasChildField]) {\n <div (click)=\"handleOnNodeClick($event,item,true)\">\n @if ( !!item.toggle && !item.loading) {\n <i class=\"{{openIconName}}\"></i>\n }\n @if (!item.toggle && !item.loading) {\n <i class=\"{{closeIconName}}\"></i>\n }\n @if (item.loading) {\n <i class=\"fal fa-spinner fa-spin\"></i>\n }\n </div>\n }\n </div>\n }\n </div>\n @if (item.toggle) {\n <ul class=\"ax-tree-side-menu-child\">\n <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\"></ng-container>\n </ul>\n }\n </li>\n }\n </ng-template>\n <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\n</ul>" }]
17340
17404
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { nodeTemplate: [{
17341
17405
  type: ContentChild,
17342
17406
  args: [TemplateRef, { static: true }]
@@ -18535,11 +18599,11 @@ class AXUploadFileComponent extends AXBaseComponent {
18535
18599
  this.dropRef.classList.add('ax-upload-drop-over');
18536
18600
  }
18537
18601
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXUploadFileComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.AXRenderService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: AXToastService }], target: i0.ɵɵFactoryTarget.Component });
18538
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXUploadFileComponent, isStandalone: false, selector: "ax-upload-file", inputs: { contentType: "contentType", dropRef: "dropRef", progressRef: "progressRef", label: "label", size: "size", type: "type", template: "template", disabled: "disabled" }, outputs: { onLoad: "onLoad", onProgress: "onProgress", onRemove: "onRemove" }, host: { styleAttribute: "display: block; width:100%; position: relative" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input\n #fileInput\n type=\"file\"\n [accept]=\"accessTypes.join(',')\"\n style=\"display: none\"\n (change)=\"onFileChange($event)\"\n/>\n\n<ng-container *ngIf=\"type == 'inline'; else elseTemplate\">\n <ax-form-group size=\"{{ size }}\">\n <ax-text-box\n [value]=\"fileName\"\n readonly=\"true\"\n [disabled]=\"disabled\"\n ></ax-text-box>\n <ax-button\n type=\"blank light\"\n icon=\"far fa-times\"\n (click)=\"remove()\"\n *ngIf=\"fileName\"\n [tabIndex]=\"-1\"\n >\n </ax-button>\n <ax-button\n type=\"primary blank\"\n icon=\"far fa-upload\"\n (click)=\"open()\"\n [disabled]=\"disabled\"\n [tabIndex]=\"-1\"\n >\n </ax-button>\n </ax-form-group>\n</ng-container>\n\n<ng-template #elseTemplate>\n <div class=\"ax upload-file-box\" (click)=\"open()\" #dropRef></div>\n</ng-template>\n", dependencies: [{ 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: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size", "labelMode"], outputs: ["labelModeChange"] }], encapsulation: i0.ViewEncapsulation.None });
18602
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXUploadFileComponent, isStandalone: false, selector: "ax-upload-file", inputs: { contentType: "contentType", dropRef: "dropRef", progressRef: "progressRef", label: "label", size: "size", type: "type", template: "template", disabled: "disabled" }, outputs: { onLoad: "onLoad", onProgress: "onProgress", onRemove: "onRemove" }, host: { styleAttribute: "display: block; width:100%; position: relative" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input\n #fileInput\n type=\"file\"\n [accept]=\"accessTypes.join(',')\"\n style=\"display: none\"\n (change)=\"onFileChange($event)\"\n />\n\n @if (type == 'inline') {\n <ax-form-group size=\"{{ size }}\">\n <ax-text-box\n [value]=\"fileName\"\n readonly=\"true\"\n [disabled]=\"disabled\"\n ></ax-text-box>\n @if (fileName) {\n <ax-button\n type=\"blank light\"\n icon=\"far fa-times\"\n (click)=\"remove()\"\n [tabIndex]=\"-1\"\n >\n </ax-button>\n }\n <ax-button\n type=\"primary blank\"\n icon=\"far fa-upload\"\n (click)=\"open()\"\n [disabled]=\"disabled\"\n [tabIndex]=\"-1\"\n >\n </ax-button>\n </ax-form-group>\n } @else {\n <div class=\"ax upload-file-box\" (click)=\"open()\" #dropRef></div>\n }\n\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size", "labelMode"], outputs: ["labelModeChange"] }], encapsulation: i0.ViewEncapsulation.None });
18539
18603
  }
18540
18604
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXUploadFileComponent, decorators: [{
18541
18605
  type: Component,
18542
- args: [{ selector: 'ax-upload-file', encapsulation: ViewEncapsulation.None, host: { style: 'display: block; width:100%; position: relative' }, standalone: false, template: "<input\n #fileInput\n type=\"file\"\n [accept]=\"accessTypes.join(',')\"\n style=\"display: none\"\n (change)=\"onFileChange($event)\"\n/>\n\n<ng-container *ngIf=\"type == 'inline'; else elseTemplate\">\n <ax-form-group size=\"{{ size }}\">\n <ax-text-box\n [value]=\"fileName\"\n readonly=\"true\"\n [disabled]=\"disabled\"\n ></ax-text-box>\n <ax-button\n type=\"blank light\"\n icon=\"far fa-times\"\n (click)=\"remove()\"\n *ngIf=\"fileName\"\n [tabIndex]=\"-1\"\n >\n </ax-button>\n <ax-button\n type=\"primary blank\"\n icon=\"far fa-upload\"\n (click)=\"open()\"\n [disabled]=\"disabled\"\n [tabIndex]=\"-1\"\n >\n </ax-button>\n </ax-form-group>\n</ng-container>\n\n<ng-template #elseTemplate>\n <div class=\"ax upload-file-box\" (click)=\"open()\" #dropRef></div>\n</ng-template>\n" }]
18606
+ args: [{ selector: 'ax-upload-file', encapsulation: ViewEncapsulation.None, host: { style: 'display: block; width:100%; position: relative' }, standalone: false, template: "<input\n #fileInput\n type=\"file\"\n [accept]=\"accessTypes.join(',')\"\n style=\"display: none\"\n (change)=\"onFileChange($event)\"\n />\n\n @if (type == 'inline') {\n <ax-form-group size=\"{{ size }}\">\n <ax-text-box\n [value]=\"fileName\"\n readonly=\"true\"\n [disabled]=\"disabled\"\n ></ax-text-box>\n @if (fileName) {\n <ax-button\n type=\"blank light\"\n icon=\"far fa-times\"\n (click)=\"remove()\"\n [tabIndex]=\"-1\"\n >\n </ax-button>\n }\n <ax-button\n type=\"primary blank\"\n icon=\"far fa-upload\"\n (click)=\"open()\"\n [disabled]=\"disabled\"\n [tabIndex]=\"-1\"\n >\n </ax-button>\n </ax-form-group>\n } @else {\n <div class=\"ax upload-file-box\" (click)=\"open()\" #dropRef></div>\n }\n\n" }]
18543
18607
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.AXRenderService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: AXToastService }], propDecorators: { contentType: [{
18544
18608
  type: Input
18545
18609
  }], dropRef: [{