@acorex/components 16.18.37 → 16.18.39

package/fesm2022/acorex-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ElementRef, Component, Inject, Optional, Input, Injectable, EventEmitter, Output, Directive, ViewChild, ContentChild, TemplateRef, ViewEncapsulation, HostListener, NgModule, ChangeDetectionStrategy, Attribute, ContentChildren, ViewChildren, inject, ChangeDetectorRef, model, afterNextRender, input, contentChildren, NO_ERRORS_SCHEMA, ViewContainerRef, HostBinding } from '@angular/core';
+import { ElementRef, Component, Inject, Optional, Input, Injectable, EventEmitter, Output, Directive, ViewChild, ContentChild, TemplateRef, ViewEncapsulation, HostListener, NgModule, ChangeDetectionStrategy, Attribute, ContentChildren, ViewChildren, output, inject, ChangeDetectorRef, model, contentChild, afterNextRender, input, contentChildren, NO_ERRORS_SCHEMA, ViewContainerRef, HostBinding } from '@angular/core';
 import * as i1$2 from '@acorex/core';
 import { AXTranslator, AXHtmlUtil, AXConfig, AXDateTime, AXDateTimeRange, AXCoreModule, AXTranslatorModule, AXObjectUtil, AXScrollModule, setPropByPath, AXColorUtil } from '@acorex/core';
 import * as i1 from '@angular/cdk/overlay';
@@ -5064,13 +5064,13 @@ class AXDatePickerComponent extends AXValidatableComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: { dayStyle: "dayStyle", dayMinMaxResoan: "dayMinMaxResoan", validation: "validation", placeholder: "placeholder", min: "min", max: "max", readonly: "readonly", disabled: "disabled", allowClear: "allowClear", textAlign: "textAlign", showToday: "showToday", selectableHoliday: "selectableHoliday", dateType: "dateType", showTodayButton: "showTodayButton", openByClick: "openByClick", size: "size", type: "type", value: "value" }, outputs: { typeChange: "typeChange", onValueChanged: "onValueChanged", valueChange: "valueChange" }, host: { styleAttribute: "width: 100%" }, providers: [
             { provide: AXValidatableComponent, useExisting: AXDatePickerComponent },
-        ], 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      #input\n      [textAlign]=\"textAlign\"\n      [(value)]=\"text\"\n      [mask]=\"dateType\"\n      [readonly]=\"false\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [size]=\"size\"\n      (onkey)=\"handleKeyPress($event)\"\n      (onFocus)=\"handleInputFocus()\"\n      (click)=\"handleClick()\"\n      (onBlur)=\"handleInputBlur()\"\n      (onValueChanged)=\"textChange($event)\"\n    ></ax-text-box>\n  </ng-container>\n  <ng-container panel>\n    <ax-calendar-box\n      #calendarRef\n      *ngIf=\"_renderPicker\"\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)]=\"value\"\n      [dayStyle]=\"dayStyle\"\n      [dayMinMaxResoan]=\"dayMinMaxResoan\"\n    >\n    </ax-calendar-box>\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)=\"clear()\"\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: ["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"] }], encapsulation: i0.ViewEncapsulation.None });
+        ], 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      #input\n      [textAlign]=\"textAlign\"\n      [(value)]=\"text\"\n      [mask]=\"dateType\"\n      [readonly]=\"true\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [size]=\"size\"\n      (onkey)=\"handleKeyPress($event)\"\n      (onFocus)=\"handleInputFocus()\"\n      (click)=\"handleClick()\"\n      (onBlur)=\"handleInputBlur()\"\n      (onValueChanged)=\"textChange($event)\"\n    ></ax-text-box>\n  </ng-container>\n  <ng-container panel>\n    <ax-calendar-box\n      #calendarRef\n      *ngIf=\"_renderPicker\"\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)]=\"value\"\n      [dayStyle]=\"dayStyle\"\n      [dayMinMaxResoan]=\"dayMinMaxResoan\"\n    >\n    </ax-calendar-box>\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)=\"clear()\"\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: ["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"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXDatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-date-picker', encapsulation: ViewEncapsulation.None, providers: [
                         { provide: AXValidatableComponent, useExisting: AXDatePickerComponent },
-                    ], host: { style: 'width: 100%' }, 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      #input\n      [textAlign]=\"textAlign\"\n      [(value)]=\"text\"\n      [mask]=\"dateType\"\n      [readonly]=\"false\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [size]=\"size\"\n      (onkey)=\"handleKeyPress($event)\"\n      (onFocus)=\"handleInputFocus()\"\n      (click)=\"handleClick()\"\n      (onBlur)=\"handleInputBlur()\"\n      (onValueChanged)=\"textChange($event)\"\n    ></ax-text-box>\n  </ng-container>\n  <ng-container panel>\n    <ax-calendar-box\n      #calendarRef\n      *ngIf=\"_renderPicker\"\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)]=\"value\"\n      [dayStyle]=\"dayStyle\"\n      [dayMinMaxResoan]=\"dayMinMaxResoan\"\n    >\n    </ax-calendar-box>\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)=\"clear()\"\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"] }]
+                    ], host: { style: 'width: 100%' }, 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      #input\n      [textAlign]=\"textAlign\"\n      [(value)]=\"text\"\n      [mask]=\"dateType\"\n      [readonly]=\"true\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [size]=\"size\"\n      (onkey)=\"handleKeyPress($event)\"\n      (onFocus)=\"handleInputFocus()\"\n      (click)=\"handleClick()\"\n      (onBlur)=\"handleInputBlur()\"\n      (onValueChanged)=\"textChange($event)\"\n    ></ax-text-box>\n  </ng-container>\n  <ng-container panel>\n    <ax-calendar-box\n      #calendarRef\n      *ngIf=\"_renderPicker\"\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)]=\"value\"\n      [dayStyle]=\"dayStyle\"\n      [dayMinMaxResoan]=\"dayMinMaxResoan\"\n    >\n    </ax-calendar-box>\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)=\"clear()\"\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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { dropdown: [{
                 type: ViewChild,
                 args: ['dropdown', { static: true }]
@@ -6178,6 +6178,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                 }]
         }] });
 
+class AXLabelComponent extends AXBaseComponent {
+    constructor() {
+        super();
+    }
+    clickLabel = output();
+    size = 'md';
+    clickHandler() {
+        this.clickLabel.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXLabelComponent, selector: "ax-label", inputs: { size: "size" }, outputs: { clickLabel: "clickLabel" }, usesInheritance: true, ngImport: i0, template: "<div (click)=\"clickHandler()\" class=\"ax form-group-label {{ size }}\">\n  <label>\n    <ng-content></ng-content>\n  </label>\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-label', encapsulation: ViewEncapsulation.None, template: "<div (click)=\"clickHandler()\" class=\"ax form-group-label {{ size }}\">\n  <label>\n    <ng-content></ng-content>\n  </label>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { size: [{
+                type: Input
+            }] } });
+
 class AXFormGroupComponent extends AXBaseComponent {
     crd = inject(ChangeDetectorRef);
     size = AXConfig.get('form')?.size || 'md';
@@ -6185,6 +6204,7 @@ class AXFormGroupComponent extends AXBaseComponent {
     component;
     required = AXConfig.get('form')?.required || false;
     labelMode = model(AXConfig.get('form')?.labelMode || 'static');
+    label = contentChild(AXLabelComponent);
     #nextRender = afterNextRender(() => {
         this.required = this.component?.validation?.rules?.some((c) => c.type === 'required' && c.enabled);
         this.div.nativeElement.classList.add(this.size);
@@ -6192,6 +6212,9 @@ class AXFormGroupComponent extends AXBaseComponent {
             this.div.nativeElement.classList.add('required-state');
         }
         const convertTypeComponent = this.component;
+        this.label().clickLabel.subscribe(() => {
+            convertTypeComponent.focus();
+        });
         if (this.labelMode() === 'static' || this.labelMode() === 'over')
             return;
         if (convertTypeComponent.value ||
@@ -6219,6 +6242,26 @@ class AXFormGroupComponent extends AXBaseComponent {
                     }
                 });
                 break;
+            case 'textArea':
+                convertTypeComponent.onValueChanged.subscribe((e) => {
+                    if (e.value) {
+                        this.labelMode.set('over');
+                    }
+                    else {
+                        this.labelMode.set('float');
+                    }
+                });
+                convertTypeComponent.onFocus.subscribe((e) => {
+                    if (!e.target.value) {
+                        this.labelMode.set('over');
+                    }
+                });
+                convertTypeComponent.onBlur.subscribe((e) => {
+                    if (!e.target.value) {
+                        this.labelMode.set('float');
+                    }
+                });
+                break;
             default:
                 convertTypeComponent.onValueChanged.subscribe((e) => {
                     if (e.value) {
@@ -6228,22 +6271,24 @@ class AXFormGroupComponent extends AXBaseComponent {
                         this.labelMode.set('float');
                     }
                 });
-        }
-        if (convertTypeComponent.componentName === 'textArea') {
-            const textArea = this.component;
-            textArea.onFocus.subscribe((e) => {
-                if (!e.target.value) {
-                    this.labelMode.set('over');
-                }
-            });
+                convertTypeComponent.onFocus.subscribe((e) => {
+                    if (!e.component?.value) {
+                        this.labelMode.set('over');
+                    }
+                });
+                convertTypeComponent.onBlur.subscribe((e) => {
+                    if (!e.component?.value) {
+                        this.labelMode.set('float');
+                    }
+                });
         }
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.7", type: AXFormGroupComponent, 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: "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-margin-form'\n  }}\"\n>\n  <div class=\"ax-lable-{{ labelMode() }}\">\n    <ng-content select=\"ax-label\"></ng-content>\n  </div>\n  <div\n    #div\n    class=\"ax form-item {{ size }}\"\n    [ngClass]=\"{ 'required-state': required }\"\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", styles: [".ax-form-group-container{position:relative}.ax-form-group-container .ax-lable-static{position:static;font-size:.875rem}.ax-form-group-container .ax-lable-float{top:50%;transform:translateY(-50%)}.ax-form-group-container .ax-lable-over{top:-4%}.ax-form-group-container .ax-lable-over,.ax-form-group-container .ax-lable-float{position:absolute;z-index:999;transition:all .15s ease-in-out;inset-inline-start:.3rem}.ax-form-group-container .ax-lable-over label,.ax-form-group-container .ax-lable-float label{font-size:.7rem!important}.ax-form-group-container .form-group-label{padding:.1rem .5rem!important}.ax-form-group-container.ax-margin-form{margin-bottom:.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.7", type: AXFormGroupComponent, 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-margin-form'\n  }}\"\n>\n  <div *ngIf=\"labelMode() === 'static'\" class=\"ax-lable-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-lable-{{ 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-lable-static{position:static}.ax-form-group-container .ax-lable-float{top:50%;transform:translateY(-50%)}.ax-form-group-container .ax-lable-over{top:-9%}.ax-form-group-container .ax-lable-over label{transition:all .2s ease-in-out;font-size:.67rem!important}.ax-form-group-container .ax-lable-over,.ax-form-group-container .ax-lable-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:.1rem .5rem!important}.ax-form-group-container.ax-margin-form{margin-bottom:.5rem}\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXFormGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-form-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%; display:contents;' }, template: "<div\n  class=\"ax form-group {{ size }} ax-form-group-container {{\n    labelMode() !== 'static' && 'ax-margin-form'\n  }}\"\n>\n  <div class=\"ax-lable-{{ labelMode() }}\">\n    <ng-content select=\"ax-label\"></ng-content>\n  </div>\n  <div\n    #div\n    class=\"ax form-item {{ size }}\"\n    [ngClass]=\"{ 'required-state': required }\"\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", styles: [".ax-form-group-container{position:relative}.ax-form-group-container .ax-lable-static{position:static;font-size:.875rem}.ax-form-group-container .ax-lable-float{top:50%;transform:translateY(-50%)}.ax-form-group-container .ax-lable-over{top:-4%}.ax-form-group-container .ax-lable-over,.ax-form-group-container .ax-lable-float{position:absolute;z-index:999;transition:all .15s ease-in-out;inset-inline-start:.3rem}.ax-form-group-container .ax-lable-over label,.ax-form-group-container .ax-lable-float label{font-size:.7rem!important}.ax-form-group-container .form-group-label{padding:.1rem .5rem!important}.ax-form-group-container.ax-margin-form{margin-bottom:.5rem}\n"] }]
+            args: [{ selector: 'ax-form-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%; display:contents;' }, template: "<div\n  class=\"ax form-group {{ size }} ax-form-group-container {{\n    labelMode() !== 'static' && 'ax-margin-form'\n  }}\"\n>\n  <div *ngIf=\"labelMode() === 'static'\" class=\"ax-lable-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-lable-{{ 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-lable-static{position:static}.ax-form-group-container .ax-lable-float{top:50%;transform:translateY(-50%)}.ax-form-group-container .ax-lable-over{top:-9%}.ax-form-group-container .ax-lable-over label{transition:all .2s ease-in-out;font-size:.67rem!important}.ax-form-group-container .ax-lable-over,.ax-form-group-container .ax-lable-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:.1rem .5rem!important}.ax-form-group-container.ax-margin-form{margin-bottom:.5rem}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }], div: [{
@@ -7559,22 +7604,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                 }]
         }] });
 
-class AXLabelComponent extends AXBaseComponent {
-    constructor() {
-        super();
-    }
-    size = 'md';
-    ngOnInit() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXLabelComponent, selector: "ax-label", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-group-label {{size}}\">\n    <label>\n        <ng-content></ng-content>\n    </label>\n</div>", encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXLabelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-label', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax form-group-label {{size}}\">\n    <label>\n        <ng-content></ng-content>\n    </label>\n</div>" }]
-        }], ctorParameters: () => [], propDecorators: { size: [{
-                type: Input
-            }] } });
-
 const COMPONENT$3 = [AXLabelComponent];
 const MODULES$3 = [CommonModule];
 class AXLabelModule {
@@ -8125,7 +8154,7 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
     }
     checkMinMax(text) {
         let number;
-        if (text.indexOf(',') > 0) {
+        if (text?.indexOf(',') > 0) {
             number = Number(text.replaceAll(',', ''));
         }
         else {
@@ -8446,11 +8475,15 @@ class AXPasswordBoxComponent extends AXBaseTextComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXPasswordBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXPasswordBoxComponent, selector: "ax-password-box", host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXPasswordBoxComponent }], 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\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input [type]=\"type\" class=\"ax {{size}}\" value=\"{{value}}\" placeholder=\"{{placeholder}}\"\n                [readonly]=\"readonly\" [disabled]=\"disabled\"\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\">\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" icon=\"fas fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\"></ax-button>\n        <ax-button [disabled]=\"disabled\" [icon]=\"eyeIcon\" type=\"light blank\" size=\"{{size}}\" (click)=\"handleShowPassword()\"  [tabIndex]=\"-1\">\n            <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\n        </ax-button>\n        <ng-content select=\"[end]\">\n        </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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXPasswordBoxComponent, selector: "ax-password-box", host: { styleAttribute: "width: 100%" }, providers: [
+            { provide: AXValidatableComponent, useExisting: AXPasswordBoxComponent },
+        ], 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXPasswordBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-password-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXPasswordBoxComponent }], 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\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input [type]=\"type\" class=\"ax {{size}}\" value=\"{{value}}\" placeholder=\"{{placeholder}}\"\n                [readonly]=\"readonly\" [disabled]=\"disabled\"\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\">\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" icon=\"fas fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\"></ax-button>\n        <ax-button [disabled]=\"disabled\" [icon]=\"eyeIcon\" type=\"light blank\" size=\"{{size}}\" (click)=\"handleShowPassword()\"  [tabIndex]=\"-1\">\n            <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\n        </ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'ax-password-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [
+                        { provide: AXValidatableComponent, useExisting: AXPasswordBoxComponent },
+                    ], 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" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }] });
 
 const COMPONENT$2 = [AXPasswordBoxComponent];
@@ -10361,7 +10394,7 @@ class AXQueryBuilderPopupComponent extends AXBasePopupPageComponent {
         ];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXQueryBuilderPopupComponent, deps: [{ token: AXToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXQueryBuilderPopupComponent, 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"] }, { 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"] }, { 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: ["dayStyle", "dayMinMaxResoan", "validation", "placeholder", "min", "max", "readonly", "disabled", "allowClear", "textAlign", "showToday", "selectableHoliday", "dateType", "showTodayButton", "openByClick", "size", "type", "value"], outputs: ["typeChange", "onValueChanged", "valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXQueryBuilderPopupComponent, 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"] }, { 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: ["dayStyle", "dayMinMaxResoan", "validation", "placeholder", "min", "max", "readonly", "disabled", "allowClear", "textAlign", "showToday", "selectableHoliday", "dateType", "showTodayButton", "openByClick", "size", "type", "value"], outputs: ["typeChange", "onValueChanged", "valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXQueryBuilderPopupComponent, decorators: [{
             type: Component,
@@ -11858,7 +11891,7 @@ class AXSearchBarComponent {
         this.searchPopover.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSearchBarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXSearchBarComponent, selector: "ax-search-bar", inputs: { sizeButton: "sizeButton", size: "size", disabled: "disabled", fitParent: "fitParent", popoverWidth: "popoverWidth", rtl: "rtl", loadOnInit: "loadOnInit", caption: "caption", block: "block", items: "items" }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue" }, 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: "<ax-button [block]=\"block\" end icon=\"far fa-sliders-h icon\" [selected]=\"_searchCount? true:false\"\n    [type]=\" _searchCount ? 'primary':'primary outline'\" [disabled]=\"disabled\" [size]=\"sizeButton\" [tabIndex]=\"-1\"\n    (click)=\"handleButtonClick()\"> {{caption? caption:'common.search' | trans}}\n    <span *ngIf=\"_searchCount\" class=\"search-count\">{{_searchCount}}</span></ax-button>\n\n\n<ax-popover #searchPop [target]=\"ref\" [rtl]=\"rtl\"\n    [position]=\"{originX:'end',originY:'bottom',overlayX:'end',overlayY:'top',offsetY:10}\">\n    <div class=\"panel-box ax-dropdown-container-bordered {{size}}\">\n        <ax-validation-form #form>\n            <ng-container *ngFor=\"let item of _items\">\n                <div class=\"row\">\n                    <ng-container *ngFor=\"let prop of item.items\">\n                        <div *ngIf=\"prop.property.visible != false\" class=\"{{renderCol(prop.property.col)}}\">\n                            <div>\n                                <ax-label>{{prop.property.title}}</ax-label>\n                                <ng-container ax-property-editor-renderer [validationForm]=\"form\" [property]=\"prop\"\n                                    [context]=\"_context\" (onValueChange)=\"handleValueChange($event)\"></ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </div>\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()\">{{'common.reset' | trans}}</ax-button>\n            </div>\n        </ax-validation-form>\n    </div>\n</ax-popover>", 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}\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"] }, { 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: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXSearchBarComponent, selector: "ax-search-bar", inputs: { sizeButton: "sizeButton", size: "size", disabled: "disabled", fitParent: "fitParent", popoverWidth: "popoverWidth", rtl: "rtl", loadOnInit: "loadOnInit", caption: "caption", block: "block", items: "items" }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue" }, 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: "<ax-button [block]=\"block\" end icon=\"far fa-sliders-h icon\" [selected]=\"_searchCount? true:false\"\n    [type]=\" _searchCount ? 'primary':'primary outline'\" [disabled]=\"disabled\" [size]=\"sizeButton\" [tabIndex]=\"-1\"\n    (click)=\"handleButtonClick()\"> {{caption? caption:'common.search' | trans}}\n    <span *ngIf=\"_searchCount\" class=\"search-count\">{{_searchCount}}</span></ax-button>\n\n\n<ax-popover #searchPop [target]=\"ref\" [rtl]=\"rtl\"\n    [position]=\"{originX:'end',originY:'bottom',overlayX:'end',overlayY:'top',offsetY:10}\">\n    <div class=\"panel-box ax-dropdown-container-bordered {{size}}\">\n        <ax-validation-form #form>\n            <ng-container *ngFor=\"let item of _items\">\n                <div class=\"row\">\n                    <ng-container *ngFor=\"let prop of item.items\">\n                        <div *ngIf=\"prop.property.visible != false\" class=\"{{renderCol(prop.property.col)}}\">\n                            <div>\n                                <ax-label>{{prop.property.title}}</ax-label>\n                                <ng-container ax-property-editor-renderer [validationForm]=\"form\" [property]=\"prop\"\n                                    [context]=\"_context\" (onValueChange)=\"handleValueChange($event)\"></ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </div>\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()\">{{'common.reset' | trans}}</ax-button>\n            </div>\n        </ax-validation-form>\n    </div>\n</ax-popover>", 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}\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: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSearchBarComponent, decorators: [{
             type: Component,
@@ -12944,7 +12977,7 @@ class AXConditionalColorPropertyEditorComponent extends AXProperyEditorComponent
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXConditionalColorPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXConditionalColorPropertyEditorComponent, 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"] }, { 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"] }, { 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXConditionalColorPropertyEditorComponent, 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"] }, { 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXConditionalColorPropertyEditorComponent, decorators: [{
             type: Component,
@@ -13316,7 +13349,7 @@ class AXRangePropertyEditorComponent extends AXProperyEditorComponent {
         super.handleValueChange(this.ranges);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXRangePropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXRangePropertyEditorComponent, 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"] }, { 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"] }, { 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXRangePropertyEditorComponent, 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"] }, { 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXRangePropertyEditorComponent, decorators: [{
             type: Component,