@acorex/components 16.18.37 → 16.18.39

package/esm2022/lib/password-box/password-box.component.mjs

@@ -1,5 +1,5 @@
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, ElementRef } from '@angular/core';
-import { AXBaseTextComponent, AXValidatableComponent } from '../base/element.class';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, ElementRef, } from '@angular/core';
+import { AXBaseTextComponent, AXValidatableComponent, } from '../base/element.class';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "../button/button.component";
@@ -23,10 +23,14 @@ export 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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 }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFzc3dvcmQtYm94LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9zcmMvbGliL3Bhc3N3b3JkLWJveC9wYXNzd29yZC1ib3guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL3NyYy9saWIvcGFzc3dvcmQtYm94L3Bhc3N3b3JkLWJveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLHVCQUF1QixFQUFFLGlCQUFpQixFQUFFLGlCQUFpQixFQUFhLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNoSSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQzs7OztBQVVwRixNQUFNLE9BQU8sc0JBQXVCLFNBQVEsbUJBQW1CO0lBQ3ZDO0lBQXRCLFlBQXNCLEdBQXNCLEVBQUUsR0FBZTtRQUMzRCxLQUFLLENBQUMsR0FBRyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1FBREksUUFBRyxHQUFILEdBQUcsQ0FBbUI7SUFFNUMsQ0FBQztJQUVELElBQUksR0FBd0IsVUFBVSxDQUFDO0lBQ3ZDLE9BQU8sR0FBVyxZQUFZLENBQUM7SUFFL0Isa0JBQWtCO1FBQ2hCLElBQUksQ0FBQyxPQUFPLEdBQUcsa0JBQWtCLENBQUM7UUFDbEMsSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLFVBQVUsRUFBRSxDQUFDO1lBQzdCLElBQUksQ0FBQyxJQUFJLEdBQUcsTUFBTSxDQUFDO1lBQ25CLElBQUksQ0FBQyxPQUFPLEdBQUcsa0JBQWtCLENBQUM7UUFDcEMsQ0FBQzthQUFNLENBQUM7WUFDTixJQUFJLENBQUMsSUFBSSxHQUFHLFVBQVUsQ0FBQztZQUN2QixJQUFJLENBQUMsT0FBTyxHQUFHLFlBQVksQ0FBQztRQUM5QixDQUFDO0lBQ0gsQ0FBQzt1R0FqQlUsc0JBQXNCOzJGQUF0QixzQkFBc0IsbUZBRnRCLENBQUMsRUFBRSxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsV0FBVyxFQUFFLHNCQUFzQixFQUFFLENBQUMsaURDVHZGLDh6Q0F1QkE7OzJGRFphLHNCQUFzQjtrQkFSbEMsU0FBUzsrQkFDRSxpQkFBaUIsaUJBRVosaUJBQWlCLENBQUMsSUFBSSxtQkFDcEIsdUJBQXVCLENBQUMsTUFBTSxRQUN6QyxFQUFFLEtBQUssRUFBQyxhQUFhLEVBQUUsYUFDbEIsQ0FBQyxFQUFFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxXQUFXLHdCQUF3QixFQUFFLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBWaWV3RW5jYXBzdWxhdGlvbiwgQ2hhbmdlRGV0ZWN0b3JSZWYsIFZpZXdDaGlsZCwgRWxlbWVudFJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQVhCYXNlVGV4dENvbXBvbmVudCwgQVhWYWxpZGF0YWJsZUNvbXBvbmVudCB9IGZyb20gJy4uL2Jhc2UvZWxlbWVudC5jbGFzcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2F4LXBhc3N3b3JkLWJveCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9wYXNzd29yZC1ib3guY29tcG9uZW50Lmh0bWwnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaG9zdDogeyBzdHlsZTond2lkdGg6IDEwMCUnIH0sXG4gIHByb3ZpZGVyczogW3sgcHJvdmlkZTogQVhWYWxpZGF0YWJsZUNvbXBvbmVudCwgdXNlRXhpc3Rpbmc6IEFYUGFzc3dvcmRCb3hDb21wb25lbnQgfV1cbn0pXG5leHBvcnQgY2xhc3MgQVhQYXNzd29yZEJveENvbXBvbmVudCBleHRlbmRzIEFYQmFzZVRleHRDb21wb25lbnQge1xuICBjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZiwgcmVmOiBFbGVtZW50UmVmKSB7XG4gICAgc3VwZXIoY2RyLCByZWYpO1xuICB9XG5cbiAgdHlwZTogJ3RleHQnIHwgJ3Bhc3N3b3JkJyA9ICdwYXNzd29yZCc7XG4gIGV5ZUljb246IHN0cmluZyA9ICdmYXIgZmEtZXllJztcblxuICBoYW5kbGVTaG93UGFzc3dvcmQoKSB7XG4gICAgdGhpcy5leWVJY29uID0gJ2ZhciBmYS1leWUtc2xhc2gnO1xuICAgIGlmICh0aGlzLnR5cGUgPT09ICdwYXNzd29yZCcpIHtcbiAgICAgIHRoaXMudHlwZSA9ICd0ZXh0JztcbiAgICAgIHRoaXMuZXllSWNvbiA9ICdmYXIgZmEtZXllLXNsYXNoJztcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy50eXBlID0gJ3Bhc3N3b3JkJztcbiAgICAgIHRoaXMuZXllSWNvbiA9ICdmYXIgZmEtZXllJztcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJheCBmb3JtLWl0ZW1cIiBbY2xhc3MuZGlzYWJsZWRdPVwiZGlzYWJsZWRcIiBbYXR0ci5pZF09XCJ1aWRcIj5cbiAgICA8ZGl2IGNsYXNzPVwiYXggaXRlbXMtd3JhcHBlclwiPlxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbc3RhcnRdXCI+XG4gICAgICAgIDwvbmctY29udGVudD5cbiAgICAgICAgPGkgY2xhc3M9XCJmb3JtLWl0ZW0taWNvbiB7e2ljb259fVwiICpuZ0lmPVwiaWNvblwiPjwvaT5cblxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJjb250ZW50XCIgI2NvbnRlbnQ+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJheCBpbnB1dCBmb3JtLWNvbnRyb2wge3tzaXplfX1cIiBbY2xhc3MuZGlzYWJsZWRdPVwiZGlzYWJsZWRcIiBbY2xhc3MucmVhZG9ubHldPVwicmVhZG9ubHlcIiBbY2xhc3MuaWNvbl09XCJpY29uXCI+XG4gICAgICAgICAgICA8aW5wdXQgW2F1dG9jb21wbGV0ZV09XCJhdXRvY29tcGxldGVcIiBbbmFtZV09XCJuYW1lXCIgI2lucHV0IFt0eXBlXT1cInR5cGVcIiBjbGFzcz1cImF4IHt7c2l6ZX19XCIgdmFsdWU9XCJ7e3ZhbHVlfX1cIiBwbGFjZWhvbGRlcj1cInt7cGxhY2Vob2xkZXJ9fVwiXG4gICAgICAgICAgICAgICAgW3JlYWRvbmx5XT1cInJlYWRvbmx5XCIgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICAgICAgICAgICAgICBbbmdDbGFzc109XCJzZXRUZXh0QWxpZ24oKVwiIFtjbGFzcy5jbGVhcl09XCJ2YWx1ZSAmJiBhbGxvd0NsZWFyXCI+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJheCBpdGVtcy13cmFwcGVyXCI+XG4gICAgICAgIDxheC1idXR0b24gKm5nSWY9XCJ2YWx1ZSAmJiBhbGxvd0NsZWFyXCIgaWNvbj1cImZhcyBmYS10aW1lc1wiIHR5cGU9XCJkYW5nZXIgYmxhbmtcIiAoY2xpY2spPVwiY2xlYXIoKVwiICBbdGFiSW5kZXhdPVwiLTFcIj48L2F4LWJ1dHRvbj5cbiAgICAgICAgPGF4LWJ1dHRvbiBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIiBbaWNvbl09XCJleWVJY29uXCIgdHlwZT1cImxpZ2h0IGJsYW5rXCIgc2l6ZT1cInt7c2l6ZX19XCIgKGNsaWNrKT1cImhhbmRsZVNob3dQYXNzd29yZCgpXCIgIFt0YWJJbmRleF09XCItMVwiPlxuICAgICAgICAgICAgPCEtLSA8aSBjbGFzcz1cIlwiIFtuZ0NsYXNzXT1cInsnZmEtZXllJzogdHlwZSA9PT0gJ3Bhc3N3b3JkJywnZmEtZXllLXNsYXNoJzp0eXBlID09PSAndGV4dCd9XCI+PC9pPiAtLT5cbiAgICAgICAgPC9heC1idXR0b24+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltlbmRdXCI+XG4gICAgICAgIDwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFzc3dvcmQtYm94LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9zcmMvbGliL3Bhc3N3b3JkLWJveC9wYXNzd29yZC1ib3guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL3NyYy9saWIvcGFzc3dvcmQtYm94L3Bhc3N3b3JkLWJveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULHVCQUF1QixFQUN2QixpQkFBaUIsRUFDakIsaUJBQWlCLEVBRWpCLFVBQVUsR0FDWCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQ0wsbUJBQW1CLEVBQ25CLHNCQUFzQixHQUN2QixNQUFNLHVCQUF1QixDQUFDOzs7O0FBWS9CLE1BQU0sT0FBTyxzQkFBdUIsU0FBUSxtQkFBbUI7SUFDdkM7SUFBdEIsWUFBc0IsR0FBc0IsRUFBRSxHQUFlO1FBQzNELEtBQUssQ0FBQyxHQUFHLEVBQUUsR0FBRyxDQUFDLENBQUM7UUFESSxRQUFHLEdBQUgsR0FBRyxDQUFtQjtJQUU1QyxDQUFDO0lBRUQsSUFBSSxHQUF3QixVQUFVLENBQUM7SUFDdkMsT0FBTyxHQUFXLFlBQVksQ0FBQztJQUUvQixrQkFBa0I7UUFDaEIsSUFBSSxDQUFDLE9BQU8sR0FBRyxrQkFBa0IsQ0FBQztRQUNsQyxJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssVUFBVSxFQUFFLENBQUM7WUFDN0IsSUFBSSxDQUFDLElBQUksR0FBRyxNQUFNLENBQUM7WUFDbkIsSUFBSSxDQUFDLE9BQU8sR0FBRyxrQkFBa0IsQ0FBQztRQUNwQyxDQUFDO2FBQU0sQ0FBQztZQUNOLElBQUksQ0FBQyxJQUFJLEdBQUcsVUFBVSxDQUFDO1lBQ3ZCLElBQUksQ0FBQyxPQUFPLEdBQUcsWUFBWSxDQUFDO1FBQzlCLENBQUM7SUFDSCxDQUFDO3VHQWpCVSxzQkFBc0I7MkZBQXRCLHNCQUFzQixtRkFKdEI7WUFDVCxFQUFFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxXQUFXLEVBQUUsc0JBQXNCLEVBQUU7U0FDekUsaURDckJILDJoREFrREE7OzJGRDNCYSxzQkFBc0I7a0JBVmxDLFNBQVM7K0JBQ0UsaUJBQWlCLGlCQUVaLGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU0sUUFDekMsRUFBRSxLQUFLLEVBQUUsYUFBYSxFQUFFLGFBQ25CO3dCQUNULEVBQUUsT0FBTyxFQUFFLHNCQUFzQixFQUFFLFdBQVcsd0JBQXdCLEVBQUU7cUJBQ3pFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBWaWV3Q2hpbGQsXG4gIEVsZW1lbnRSZWYsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgQVhCYXNlVGV4dENvbXBvbmVudCxcbiAgQVhWYWxpZGF0YWJsZUNvbXBvbmVudCxcbn0gZnJvbSAnLi4vYmFzZS9lbGVtZW50LmNsYXNzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXgtcGFzc3dvcmQtYm94JyxcbiAgdGVtcGxhdGVVcmw6ICcuL3Bhc3N3b3JkLWJveC5jb21wb25lbnQuaHRtbCcsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBob3N0OiB7IHN0eWxlOiAnd2lkdGg6IDEwMCUnIH0sXG4gIHByb3ZpZGVyczogW1xuICAgIHsgcHJvdmlkZTogQVhWYWxpZGF0YWJsZUNvbXBvbmVudCwgdXNlRXhpc3Rpbmc6IEFYUGFzc3dvcmRCb3hDb21wb25lbnQgfSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgQVhQYXNzd29yZEJveENvbXBvbmVudCBleHRlbmRzIEFYQmFzZVRleHRDb21wb25lbnQge1xuICBjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZiwgcmVmOiBFbGVtZW50UmVmKSB7XG4gICAgc3VwZXIoY2RyLCByZWYpO1xuICB9XG5cbiAgdHlwZTogJ3RleHQnIHwgJ3Bhc3N3b3JkJyA9ICdwYXNzd29yZCc7XG4gIGV5ZUljb246IHN0cmluZyA9ICdmYXIgZmEtZXllJztcblxuICBoYW5kbGVTaG93UGFzc3dvcmQoKSB7XG4gICAgdGhpcy5leWVJY29uID0gJ2ZhciBmYS1leWUtc2xhc2gnO1xuICAgIGlmICh0aGlzLnR5cGUgPT09ICdwYXNzd29yZCcpIHtcbiAgICAgIHRoaXMudHlwZSA9ICd0ZXh0JztcbiAgICAgIHRoaXMuZXllSWNvbiA9ICdmYXIgZmEtZXllLXNsYXNoJztcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy50eXBlID0gJ3Bhc3N3b3JkJztcbiAgICAgIHRoaXMuZXllSWNvbiA9ICdmYXIgZmEtZXllJztcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJheCBmb3JtLWl0ZW1cIiBbY2xhc3MuZGlzYWJsZWRdPVwiZGlzYWJsZWRcIiBbYXR0ci5pZF09XCJ1aWRcIj5cbiAgPGRpdiBjbGFzcz1cImF4IGl0ZW1zLXdyYXBwZXJcIj5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbc3RhcnRdXCI+IDwvbmctY29udGVudD5cbiAgICA8aSBjbGFzcz1cImZvcm0taXRlbS1pY29uIHt7IGljb24gfX1cIiAqbmdJZj1cImljb25cIj48L2k+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwiY29udGVudFwiICNjb250ZW50PlxuICAgIDxkaXZcbiAgICAgIGNsYXNzPVwiYXggaW5wdXQgZm9ybS1jb250cm9sIHt7IHNpemUgfX1cIlxuICAgICAgW2NsYXNzLmRpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICAgIFtjbGFzcy5yZWFkb25seV09XCJyZWFkb25seVwiXG4gICAgICBbY2xhc3MuaWNvbl09XCJpY29uXCJcbiAgICA+XG4gICAgICA8aW5wdXRcbiAgICAgICAgKGZvY3VzKT1cImhhbmRsZUlucHV0Rm9jdXMoJGV2ZW50KVwiXG4gICAgICAgIChibHVyKT1cImhhbmRsZUlucHV0Qmx1cigkZXZlbnQpXCJcbiAgICAgICAgW2F1dG9jb21wbGV0ZV09XCJhdXRvY29tcGxldGVcIlxuICAgICAgICBbbmFtZV09XCJuYW1lXCJcbiAgICAgICAgI2lucHV0XG4gICAgICAgIFt0eXBlXT1cInR5cGVcIlxuICAgICAgICBjbGFzcz1cImF4IHt7IHNpemUgfX1cIlxuICAgICAgICB2YWx1ZT1cInt7IHZhbHVlIH19XCJcbiAgICAgICAgcGxhY2Vob2xkZXI9XCJ7eyBwbGFjZWhvbGRlciB9fVwiXG4gICAgICAgIFtyZWFkb25seV09XCJyZWFkb25seVwiXG4gICAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gICAgICAgIFtuZ0NsYXNzXT1cInNldFRleHRBbGlnbigpXCJcbiAgICAgICAgW2NsYXNzLmNsZWFyXT1cInZhbHVlICYmIGFsbG93Q2xlYXJcIlxuICAgICAgLz5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJheCBpdGVtcy13cmFwcGVyXCI+XG4gICAgPGF4LWJ1dHRvblxuICAgICAgKm5nSWY9XCJ2YWx1ZSAmJiBhbGxvd0NsZWFyXCJcbiAgICAgIGljb249XCJmYXMgZmEtdGltZXNcIlxuICAgICAgdHlwZT1cImRhbmdlciBibGFua1wiXG4gICAgICAoY2xpY2spPVwiY2xlYXIoKVwiXG4gICAgICBbdGFiSW5kZXhdPVwiLTFcIlxuICAgID48L2F4LWJ1dHRvbj5cbiAgICA8YXgtYnV0dG9uXG4gICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgICAgW2ljb25dPVwiZXllSWNvblwiXG4gICAgICB0eXBlPVwibGlnaHQgYmxhbmtcIlxuICAgICAgc2l6ZT1cInt7IHNpemUgfX1cIlxuICAgICAgKGNsaWNrKT1cImhhbmRsZVNob3dQYXNzd29yZCgpXCJcbiAgICAgIFt0YWJJbmRleF09XCItMVwiXG4gICAgPlxuICAgICAgPCEtLSA8aSBjbGFzcz1cIlwiIFtuZ0NsYXNzXT1cInsnZmEtZXllJzogdHlwZSA9PT0gJ3Bhc3N3b3JkJywnZmEtZXllLXNsYXNoJzp0eXBlID09PSAndGV4dCd9XCI+PC9pPiAtLT5cbiAgICA8L2F4LWJ1dHRvbj5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbZW5kXVwiPiA8L25nLWNvbnRlbnQ+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=

package/esm2022/lib/property-editor/editors/conditional-color-editor/conditional-color.editor.mjs

@@ -202,7 +202,7 @@ export class AXConditionalColorPropertyEditorComponent extends AXProperyEditorCo
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXConditionalColorPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: i4.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: i5.AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }, { kind: "component", type: i6.AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { kind: "component", type: i7.AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: i8.AXPageComponent, selector: "ax-page" }, { kind: "component", type: i9.AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: i10.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: i11.AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: i12.AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: i13.AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "pipe", type: i14.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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: i4.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: i5.AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }, { kind: "component", type: i6.AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: i7.AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: i8.AXPageComponent, selector: "ax-page" }, { kind: "component", type: i9.AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: i10.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: i11.AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: i12.AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: i13.AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "pipe", type: i14.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXConditionalColorPropertyEditorComponent, decorators: [{
             type: Component,

package/esm2022/lib/property-editor/editors/range-editor/range.editor.mjs

@@ -133,7 +133,7 @@ export 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: i1.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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: i4.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: i5.AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }, { kind: "component", type: i6.AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { kind: "component", type: i7.AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: i8.AXPageComponent, selector: "ax-page" }, { kind: "component", type: i9.AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: i10.AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: i11.AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "component", type: i12.AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "pipe", type: i13.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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: i4.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: i5.AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }, { kind: "component", type: i6.AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: i7.AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: i8.AXPageComponent, selector: "ax-page" }, { kind: "component", type: i9.AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: i10.AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: i11.AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "component", type: i12.AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "pipe", type: i13.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXRangePropertyEditorComponent, decorators: [{
             type: Component,

package/esm2022/lib/query-builder/query-builder-popup/query-builder-popup.component.mjs

@@ -165,7 +165,7 @@ export class AXQueryBuilderPopupComponent extends AXBasePopupPageComponent {
         ];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXQueryBuilderPopupComponent, deps: [{ token: i1.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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.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: i4.AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { kind: "component", type: i5.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: i6.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: i7.AXFormGroupComponent, selector: "ax-form-group", inputs: ["size", "labelMode"], outputs: ["labelModeChange"] }, { kind: "component", type: i8.AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { kind: "component", type: i9.AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: i10.AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: i11.AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "component", type: i12.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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.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: i4.AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { kind: "component", type: i5.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: i6.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: i7.AXFormGroupComponent, selector: "ax-form-group", inputs: ["size", "labelMode"], outputs: ["labelModeChange"] }, { kind: "component", type: i8.AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: i9.AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: i10.AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: i11.AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "component", type: i12.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,

package/esm2022/lib/search-bar/search-bar.component.mjs

@@ -251,7 +251,7 @@ export 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i3.AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }, { kind: "component", type: i4.AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { kind: "component", type: i5.AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "rtl", "visible"], outputs: ["onOutSideClick"] }, { kind: "pipe", type: i7.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i3.AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }, { kind: "component", type: i4.AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: i5.AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "rtl", "visible"], outputs: ["onOutSideClick"] }, { kind: "pipe", type: i7.AXTranslatorPipe, name: "trans" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSearchBarComponent, decorators: [{
             type: Component,