@acorex/components 19.10.10 → 19.10.11

package/fesm2022/acorex-components-picker.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, viewChild, signal, afterNextRender, effect, forwardRef, NgModule } from '@angular/core';
+import { input, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component, viewChild, signal, afterNextRender, effect, forwardRef, NgModule } from '@angular/core';
 import { AXCarouselDirective } from '@acorex/cdk/carousel';
 import { MXValueComponent } from '@acorex/components/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -12,10 +12,10 @@ class AXPickerContainerComponent {
     get __hostClass() {
         return `${this.customClass()}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPickerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.7", type: AXPickerContainerComponent, isStandalone: true, selector: "ax-picker-container", inputs: { customClass: { classPropertyName: "customClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, ngImport: i0, template: "<div class=\"ax-picker-title-container\">\n  <ng-content select=\"ax-picker-title\"></ng-content>\n</div>\n<div class=\"ax-picker-items-container\">\n  <ng-content select=\"ax-picker-items\"></ng-content>\n</div>\n", styles: ["ax-picker-container{width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}ax-picker-container .ax-picker-items-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}ax-picker-container .ax-picker-title-container{display:flex;align-items:center;justify-content:center;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPickerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: AXPickerContainerComponent, isStandalone: true, selector: "ax-picker-container", inputs: { customClass: { classPropertyName: "customClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, ngImport: i0, template: "<div class=\"ax-picker-title-container\">\n  <ng-content select=\"ax-picker-title\"></ng-content>\n</div>\n<div class=\"ax-picker-items-container\">\n  <ng-content select=\"ax-picker-items\"></ng-content>\n</div>\n", styles: ["ax-picker-container{width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}ax-picker-container .ax-picker-items-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}ax-picker-container .ax-picker-title-container{display:flex;align-items:center;justify-content:center;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPickerContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPickerContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-picker-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-picker-title-container\">\n  <ng-content select=\"ax-picker-title\"></ng-content>\n</div>\n<div class=\"ax-picker-items-container\">\n  <ng-content select=\"ax-picker-items\"></ng-content>\n</div>\n", styles: ["ax-picker-container{width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}ax-picker-container .ax-picker-items-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}ax-picker-container .ax-picker-title-container{display:flex;align-items:center;justify-content:center;width:100%}\n"] }]
         }], propDecorators: { __hostClass: [{
@@ -117,8 +117,8 @@ class AXPickerItemsComponent extends MXValueComponent {
     get __hostClass() {
         return [`${this.disabled && 'ax-state-disabled'}`, `${this.readonly && 'ax-state-readonly'}`];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPickerItemsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: AXPickerItemsComponent, isStandalone: true, selector: "ax-picker-items", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, readonlyChange: { classPropertyName: "readonlyChange", publicName: "readonlyChange", isSignal: false, isRequired: false, transformFunction: null }, disabledChange: { classPropertyName: "disabledChange", publicName: "disabledChange", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, slidesPerGroup: { classPropertyName: "slidesPerGroup", publicName: "slidesPerGroup", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPickerItemsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXPickerItemsComponent, isStandalone: true, selector: "ax-picker-items", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, readonlyChange: { classPropertyName: "readonlyChange", publicName: "readonlyChange", isSignal: false, isRequired: false, transformFunction: null }, disabledChange: { classPropertyName: "disabledChange", publicName: "disabledChange", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, slidesPerGroup: { classPropertyName: "slidesPerGroup", publicName: "slidesPerGroup", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AXPickerItemsComponent),
@@ -126,7 +126,7 @@ class AXPickerItemsComponent extends MXValueComponent {
             },
         ], viewQueries: [{ propertyName: "swiperRef", first: true, predicate: ["c"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #c=\"axCarousel\" axCarousel [carouselOptions]=\"option()\" class=\"ax-carousel\">\n  <div class=\"ax-carousel-wrapper\">\n    @for (item of items(); track item.id) {\n      <div (click)=\"clickHandler(item)\" class=\"ax-carousel-slide\">\n        <p class=\"ax-picker-item\">{{ item.text }}</p>\n      </div>\n    }\n  </div>\n\n  <div class=\"ax-selected-picker-border\"></div>\n</div>\n", styles: ["ax-picker-items{width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden;-webkit-user-select:none;user-select:none}ax-picker-items.ax-state-disabled{opacity:.5}ax-picker-items.ax-state-disabled .ax-carousel .ax-carousel-slide{cursor:not-allowed}ax-picker-items .ax-carousel{width:100%;height:100%;position:relative}ax-picker-items .ax-carousel .ax-carousel-wrapper .ax-carousel-slide{cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center}ax-picker-items .ax-carousel .ax-carousel-wrapper .ax-carousel-slide .ax-picker-item{width:100%;padding-block:.5rem;-webkit-user-select:none;user-select:none}ax-picker-items .ax-carousel .ax-carousel-wrapper .ax-carousel-slide .ax-picker-item:hover{background-color:rgba(var(--ax-sys-color-primary-lightest-surface));color:rgba(var(--ax-sys-color-on-primary-lightest-surface))}ax-picker-items .ax-carousel .ax-selected-picker-border{border-block:1px solid rgba(var(--ax-sys-color-primary-dark-surface));height:2rem;position:absolute;top:50%;transform:translateY(-50%);width:100%}.ax-dark ax-picker-items .ax-carousel .ax-selected-picker-border{border-block:1px solid rgba(var(--ax-sys-color-primary-lightest-surface))}\n"], dependencies: [{ kind: "directive", type: AXCarouselDirective, selector: "[axCarousel]", inputs: ["carouselOptions"], exportAs: ["axCarousel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPickerItemsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPickerItemsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-picker-items', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['disabled', 'readonly', 'readonlyChange', 'disabledChange'], outputs: ['onValueChanged'], providers: [
                         {
@@ -141,10 +141,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
             }] } });
 
 class AXPickerTitleComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPickerTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: AXPickerTitleComponent, isStandalone: true, selector: "ax-picker-title", ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["ax-picker-title{display:flex;justify-content:center;align-items:center;padding:.5rem;width:100%;height:fit-content}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPickerTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXPickerTitleComponent, isStandalone: true, selector: "ax-picker-title", ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["ax-picker-title{display:flex;justify-content:center;align-items:center;padding:.5rem;width:100%;height:fit-content}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPickerTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPickerTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-picker-title', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: ["ax-picker-title{display:flex;justify-content:center;align-items:center;padding:.5rem;width:100%;height:fit-content}\n"] }]
         }] });
@@ -152,11 +152,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
 const COMPONENT = [AXPickerContainerComponent, AXPickerItemsComponent, AXPickerTitleComponent];
 const MODULES = [CommonModule, AXCarouselDirective];
 class AXPickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXPickerModule, imports: [CommonModule, AXCarouselDirective, AXPickerContainerComponent, AXPickerItemsComponent, AXPickerTitleComponent], exports: [AXPickerContainerComponent, AXPickerItemsComponent, AXPickerTitleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPickerModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXPickerModule, imports: [CommonModule, AXCarouselDirective, AXPickerContainerComponent, AXPickerItemsComponent, AXPickerTitleComponent], exports: [AXPickerContainerComponent, AXPickerItemsComponent, AXPickerTitleComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPickerModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

package/fesm2022/acorex-components-popover.mjs

@@ -5,7 +5,7 @@ import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
 import { DOCUMENT, isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, Renderer2, EventEmitter, ElementRef, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ViewChild, Output, NgModule } from '@angular/core';
+import { inject, PLATFORM_ID, Renderer2, EventEmitter, ElementRef, TemplateRef, Output, Input, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import { fromEvent, delay } from 'rxjs';
 
 /**
@@ -481,10 +481,10 @@ class AXPopoverComponent extends MXBaseComponent {
         this._overlayRef?.detach();
         this._overlayRef?.dispose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: AXPopoverComponent, isStandalone: true, selector: "ax-popover", inputs: { offsetX: "offsetX", offsetY: "offsetY", target: "target", placement: "placement", content: "content", openOn: "openOn", closeOn: "closeOn", hasBackdrop: "hasBackdrop", openAfter: "openAfter", closeAfter: "closeAfter", backdropClass: "backdropClass", panelClass: "panelClass", adaptivityEnabled: "adaptivityEnabled" }, outputs: { onOpened: "onOpened", onClosed: "onClosed" }, providers: [{ provide: AXFocusableComponent, useExisting: AXPopoverComponent }], viewQueries: [{ propertyName: "_baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #baseTemplate>\n  <ng-content></ng-content>\n</ng-template>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXPopoverComponent, isStandalone: true, selector: "ax-popover", inputs: { offsetX: "offsetX", offsetY: "offsetY", target: "target", placement: "placement", content: "content", openOn: "openOn", closeOn: "closeOn", hasBackdrop: "hasBackdrop", openAfter: "openAfter", closeAfter: "closeAfter", backdropClass: "backdropClass", panelClass: "panelClass", adaptivityEnabled: "adaptivityEnabled" }, outputs: { onOpened: "onOpened", onClosed: "onClosed" }, providers: [{ provide: AXFocusableComponent, useExisting: AXPopoverComponent }], viewQueries: [{ propertyName: "_baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #baseTemplate>\n  <ng-content></ng-content>\n</ng-template>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXFocusableComponent, useExisting: AXPopoverComponent }], template: "<ng-template #baseTemplate>\n  <ng-content></ng-content>\n</ng-template>" }]
         }], propDecorators: { offsetX: [{
@@ -523,11 +523,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
             }] } });
 
 class AXPopoverModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXPopoverModule, imports: [CommonModule, AXPopoverComponent], exports: [AXPopoverComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPopoverModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXPopoverModule, imports: [CommonModule, AXPopoverComponent], exports: [AXPopoverComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPopoverModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXPopoverComponent],

package/fesm2022/acorex-components-popup.mjs

@@ -2,7 +2,7 @@ import * as i2 from '@acorex/core/platform';
 import { AXPlatform } from '@acorex/core/platform';
 import { TemplatePortal, ComponentPortal, CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, HostListener, inject, Injectable, NgModule } from '@angular/core';
+import { TemplateRef, HostListener, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, Injectable, NgModule } from '@angular/core';
 import { MXBaseComponent, AXClosbaleComponent, AXComponentClosedPromise, AXCommonModule } from '@acorex/components/common';
 import { AXDecoratorCloseButtonComponent, AXDecoratorModule } from '@acorex/components/decorators';
 import * as i1 from '@acorex/components/loading';
@@ -162,10 +162,10 @@ class AXPopupComponent extends MXBaseComponent {
             closeFn();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: i1.AXLoadingService }, { token: i2.AXPlatform }, { token: DIALOG_DATA }, { token: i3.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: AXPopupComponent, isStandalone: true, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXPopupComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\n  <div class=\"ax-popup ax-popup-{{ data.size }}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!data.draggable\">\n    <div cdkDragHandle class=\"ax-popup-header-container\">\n      @if (data.header) {\n        <div class=\"ax-popup-header\">\n          <span class=\"ax-popup-title\">{{ data.title | translate | async }}</span>\n          @if (data.closeButton) {\n            <ax-close-button tabindex=\"1\"></ax-close-button>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"ax-popup-main-container ax-loading-container\">\n      <div class=\"ax-popup-body-container\">\n        <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\n      </div>\n      <div class=\"ax-popup-footer-container\"></div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--ax-comp-popup-border-radius: var(--ax-sys-border-radius);--ax-comp-popup-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-popup-body-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-popup-body-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-popup-header-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-popup-header-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-popup-footer-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-popup-footer-border-color: var(--ax-sys-color-border-lighter-surface)}.ax-popup{max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));margin-left:auto;margin-right:auto;display:flex;width:auto;flex-direction:column;overflow:hidden;border-radius:var(--ax-comp-popup-border-radius);border-width:1px;border-color:rgba(var(--ax-comp-popup-border-color));background-color:rgba(var(--ax-comp-popup-body-bg-color));padding:0;--ax-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);outline:2px solid transparent;outline-offset:2px;color:rgba(var(--ax-comp-popup-body-text-color))}.ax-popup .ax-popup-header-container{background-color:rgba(var(--ax-comp-popup-header-bg-color))}.ax-popup .ax-popup-header-container .ax-popup-header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;border-color:rgba(var(--ax-comp-popup-header-border-color));padding:.75rem}.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:1rem;font-weight:500}@media (min-width: 768px){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:1.125rem;line-height:1.75rem}}.ax-popup ax-footer{box-shadow:0 2px 10px #0000004d;display:flex;align-items:center;justify-content:space-between;border-top-width:1px;border-color:rgba(var(--ax-comp-popup-footer-border-color));background-color:rgba(var(--ax-comp-popup-footer-bg-color));padding:.75rem}.ax-popup:focus{outline:2px solid transparent;outline-offset:2px}.ax-popup:focus-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}.ax-popup .ax-popup-main-container{display:flex;flex:1 1 0%;flex-direction:column;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{flex:1 1 0%;overflow:auto;background-color:rgba(var(--ax-comp-popup-body-bg-color))}.ax-popup .ax-popup-main-container .ax-popup-footer-container{background-color:rgba(var(--ax-comp-popup-footer-bg-color))}.ax-popup.ax-popup-full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh));border-radius:0!important}.ax-popup.ax-fit{width:fit-content!important}.ax-popup.ax-fit .ax-popup-body-container{max-height:100vh}.ax-popup.ax-fit .ax-popup-body-container>ng-component>div{width:fit-content!important}@media (min-width: 320px) and (max-width: 640px){.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.ax-popup.ax-popup-lg{width:93vw!important;height:fit-content;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}.ax-popup.ax-popup-sm .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-md .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-lg .ax-popup-body-container>ng-component>div{width:100%}}@media (min-width: 768px){.ax-popup.ax-popup-sm{width:55vw!important}.ax-popup.ax-popup-md{width:65vw!important}.ax-popup.ax-popup-lg{width:75vw!important}}@media (min-width: 1280px){.ax-popup.ax-popup-sm{width:30vw!important}.ax-popup.ax-popup-md{width:50vw!important}.ax-popup.ax-popup-lg{width:85vw!important}}@media (min-width: 1536px){.ax-popup.ax-popup-sm{width:25vw!important}.ax-popup.ax-popup-md{width:40vw!important}.ax-popup.ax-popup-lg{width:65vw!important}}.ax-dark .ax-popup{--ax-comp-popup-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-popup-body-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-popup-body-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-popup-header-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-popup-header-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-popup-footer-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-popup-footer-border-color: var(--ax-sys-color-border-dark-surface)}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: i1.AXLoadingService }, { token: i2.AXPlatform }, { token: DIALOG_DATA }, { token: i3.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXPopupComponent, isStandalone: true, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXPopupComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\n  <div class=\"ax-popup ax-popup-{{ data.size }}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!data.draggable\">\n    <div cdkDragHandle class=\"ax-popup-header-container\">\n      @if (data.header) {\n        <div class=\"ax-popup-header\">\n          <span class=\"ax-popup-title\">{{ data.title | translate | async }}</span>\n          @if (data.closeButton) {\n            <ax-close-button tabindex=\"1\"></ax-close-button>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"ax-popup-main-container ax-loading-container\">\n      <div class=\"ax-popup-body-container\">\n        <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\n      </div>\n      <div class=\"ax-popup-footer-container\"></div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--ax-comp-popup-border-radius: var(--ax-sys-border-radius);--ax-comp-popup-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-popup-body-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-popup-body-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-popup-header-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-popup-header-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-popup-footer-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-popup-footer-border-color: var(--ax-sys-color-border-lighter-surface)}.ax-popup{max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));margin-left:auto;margin-right:auto;display:flex;width:auto;flex-direction:column;overflow:hidden;border-radius:var(--ax-comp-popup-border-radius);border-width:1px;border-color:rgba(var(--ax-comp-popup-border-color));background-color:rgba(var(--ax-comp-popup-body-bg-color));padding:0;--ax-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);outline:2px solid transparent;outline-offset:2px;color:rgba(var(--ax-comp-popup-body-text-color))}.ax-popup .ax-popup-header-container{background-color:rgba(var(--ax-comp-popup-header-bg-color))}.ax-popup .ax-popup-header-container .ax-popup-header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;border-color:rgba(var(--ax-comp-popup-header-border-color));padding:.75rem}.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:1rem;font-weight:500}@media (min-width: 768px){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:1.125rem;line-height:1.75rem}}.ax-popup ax-footer{box-shadow:0 2px 10px #0000004d;display:flex;align-items:center;justify-content:space-between;border-top-width:1px;border-color:rgba(var(--ax-comp-popup-footer-border-color));background-color:rgba(var(--ax-comp-popup-footer-bg-color));padding:.75rem}.ax-popup:focus{outline:2px solid transparent;outline-offset:2px}.ax-popup:focus-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}.ax-popup .ax-popup-main-container{display:flex;flex:1 1 0%;flex-direction:column;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{flex:1 1 0%;overflow:auto;background-color:rgba(var(--ax-comp-popup-body-bg-color))}.ax-popup .ax-popup-main-container .ax-popup-footer-container{background-color:rgba(var(--ax-comp-popup-footer-bg-color))}.ax-popup.ax-popup-full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh));border-radius:0!important}.ax-popup.ax-fit{width:fit-content!important}.ax-popup.ax-fit .ax-popup-body-container{max-height:100vh}.ax-popup.ax-fit .ax-popup-body-container>ng-component>div{width:fit-content!important}@media (min-width: 320px) and (max-width: 640px){.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.ax-popup.ax-popup-lg{width:93vw!important;height:fit-content;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}.ax-popup.ax-popup-sm .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-md .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-lg .ax-popup-body-container>ng-component>div{width:100%}}@media (min-width: 768px){.ax-popup.ax-popup-sm{width:55vw!important}.ax-popup.ax-popup-md{width:65vw!important}.ax-popup.ax-popup-lg{width:75vw!important}}@media (min-width: 1280px){.ax-popup.ax-popup-sm{width:30vw!important}.ax-popup.ax-popup-md{width:50vw!important}.ax-popup.ax-popup-lg{width:85vw!important}}@media (min-width: 1536px){.ax-popup.ax-popup-sm{width:25vw!important}.ax-popup.ax-popup-md{width:40vw!important}.ax-popup.ax-popup-lg{width:65vw!important}}.ax-dark .ax-popup{--ax-comp-popup-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-popup-body-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-popup-body-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-popup-header-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-popup-header-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-popup-footer-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-popup-footer-border-color: var(--ax-sys-color-border-dark-surface)}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXClosbaleComponent, useExisting: AXPopupComponent }], imports: [CdkTrapFocus, CdkDrag, CdkDragHandle, AXDecoratorCloseButtonComponent, CdkPortalOutlet, AsyncPipe, AXTranslatorPipe], template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\n  <div class=\"ax-popup ax-popup-{{ data.size }}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!data.draggable\">\n    <div cdkDragHandle class=\"ax-popup-header-container\">\n      @if (data.header) {\n        <div class=\"ax-popup-header\">\n          <span class=\"ax-popup-title\">{{ data.title | translate | async }}</span>\n          @if (data.closeButton) {\n            <ax-close-button tabindex=\"1\"></ax-close-button>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"ax-popup-main-container ax-loading-container\">\n      <div class=\"ax-popup-body-container\">\n        <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\n      </div>\n      <div class=\"ax-popup-footer-container\"></div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--ax-comp-popup-border-radius: var(--ax-sys-border-radius);--ax-comp-popup-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-popup-body-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-popup-body-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-popup-header-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-popup-header-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-popup-footer-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-popup-footer-border-color: var(--ax-sys-color-border-lighter-surface)}.ax-popup{max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));margin-left:auto;margin-right:auto;display:flex;width:auto;flex-direction:column;overflow:hidden;border-radius:var(--ax-comp-popup-border-radius);border-width:1px;border-color:rgba(var(--ax-comp-popup-border-color));background-color:rgba(var(--ax-comp-popup-body-bg-color));padding:0;--ax-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);outline:2px solid transparent;outline-offset:2px;color:rgba(var(--ax-comp-popup-body-text-color))}.ax-popup .ax-popup-header-container{background-color:rgba(var(--ax-comp-popup-header-bg-color))}.ax-popup .ax-popup-header-container .ax-popup-header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;border-color:rgba(var(--ax-comp-popup-header-border-color));padding:.75rem}.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:1rem;font-weight:500}@media (min-width: 768px){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:1.125rem;line-height:1.75rem}}.ax-popup ax-footer{box-shadow:0 2px 10px #0000004d;display:flex;align-items:center;justify-content:space-between;border-top-width:1px;border-color:rgba(var(--ax-comp-popup-footer-border-color));background-color:rgba(var(--ax-comp-popup-footer-bg-color));padding:.75rem}.ax-popup:focus{outline:2px solid transparent;outline-offset:2px}.ax-popup:focus-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}.ax-popup .ax-popup-main-container{display:flex;flex:1 1 0%;flex-direction:column;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{flex:1 1 0%;overflow:auto;background-color:rgba(var(--ax-comp-popup-body-bg-color))}.ax-popup .ax-popup-main-container .ax-popup-footer-container{background-color:rgba(var(--ax-comp-popup-footer-bg-color))}.ax-popup.ax-popup-full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh));border-radius:0!important}.ax-popup.ax-fit{width:fit-content!important}.ax-popup.ax-fit .ax-popup-body-container{max-height:100vh}.ax-popup.ax-fit .ax-popup-body-container>ng-component>div{width:fit-content!important}@media (min-width: 320px) and (max-width: 640px){.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.ax-popup.ax-popup-lg{width:93vw!important;height:fit-content;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}.ax-popup.ax-popup-sm .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-md .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-lg .ax-popup-body-container>ng-component>div{width:100%}}@media (min-width: 768px){.ax-popup.ax-popup-sm{width:55vw!important}.ax-popup.ax-popup-md{width:65vw!important}.ax-popup.ax-popup-lg{width:75vw!important}}@media (min-width: 1280px){.ax-popup.ax-popup-sm{width:30vw!important}.ax-popup.ax-popup-md{width:50vw!important}.ax-popup.ax-popup-lg{width:85vw!important}}@media (min-width: 1536px){.ax-popup.ax-popup-sm{width:25vw!important}.ax-popup.ax-popup-md{width:40vw!important}.ax-popup.ax-popup-lg{width:65vw!important}}.ax-dark .ax-popup{--ax-comp-popup-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-popup-body-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-popup-body-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-popup-header-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-popup-header-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-popup-footer-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-popup-footer-border-color: var(--ax-sys-color-border-dark-surface)}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: i1.AXLoadingService }, { type: i2.AXPlatform }, { type: undefined, decorators: [{
@@ -233,21 +233,21 @@ class AXPopupService {
         });
         return promise;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPopupService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPopupService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPopupService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPopupService, decorators: [{
             type: Injectable
         }] });
 
 const COMPONENT = [AXPopupComponent];
 const MODULES = [CommonModule, AXCommonModule, DragDropModule, A11yModule, PortalModule, AXDecoratorModule, DialogModule, AXTranslationModule];
 class AXPopupModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXPopupModule, imports: [CommonModule, AXCommonModule, DragDropModule, A11yModule, PortalModule, AXDecoratorModule, DialogModule, AXTranslationModule, AXPopupComponent], exports: [AXPopupComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPopupModule, providers: [AXPopupService], imports: [MODULES, COMPONENT] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXPopupModule, imports: [CommonModule, AXCommonModule, DragDropModule, A11yModule, PortalModule, AXDecoratorModule, DialogModule, AXTranslationModule, AXPopupComponent], exports: [AXPopupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPopupModule, providers: [AXPopupService], imports: [MODULES, COMPONENT] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPopupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPopupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

package/fesm2022/acorex-components-progress-bar.mjs

@@ -1,6 +1,6 @@
 import { MXColorComponent } from '@acorex/components/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Output, Input, HostBinding, NgModule } from '@angular/core';
+import { EventEmitter, HostBinding, Input, Output, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 class AXProgressBarComponent extends MXColorComponent {
@@ -62,10 +62,10 @@ class AXProgressBarComponent extends MXColorComponent {
     get __hostClass() {
         return `ax-${this['color']}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXProgressBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: AXProgressBarComponent, isStandalone: true, selector: "ax-progress-bar", inputs: { color: "color", mode: "mode", progress: "progress", height: "height" }, outputs: { ValueChange: "ValueChange", sizeChange: "sizeChange" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "circle", first: true, predicate: ["c"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n@switch (mode) {\n  @case ('indeterminate') {\n    <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n      <div class=\"ax-progress-bar ax-indeterminate-progress\"></div>\n    </div>\n  }\n  @case ('query') {\n    <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n      <div class=\"ax-progress-bar ax-query-progress\"></div>\n    </div>\n  }\n  @case ('buffer') {\n    <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n      <div class=\"ax-progress-bar ax-buffer-progress\"></div>\n    </div>\n  }\n  @default {\n    <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n      <div class=\"ax-progress-bar\" [style.width.%]=\"progress\"></div>\n    </div>\n  }\n}\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-progress-bar.ax-default{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-primary-surface)}ax-progress-bar{--ax-comp-progress-bar-backdrop-bg-color: var(--ax-sys-color-dark);--ax-comp-progress-bar-backdrop-bg-color-opacity: .2}ax-progress-bar.ax-primary{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-primary-surface)}ax-progress-bar.ax-secondary{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-secondary-surface)}ax-progress-bar.ax-success{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-success-surface)}ax-progress-bar.ax-warning{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-warning-surface)}ax-progress-bar.ax-danger{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-danger-surface)}.ax-dark ax-progress-bar{--ax-comp-progress-bar-backdrop-bg-color: var(--ax-sys-color-light)}ax-progress-bar{display:flex;width:100%;align-items:center;justify-content:center;gap:.5rem;position:relative}ax-progress-bar .ax-progress{width:100%;overflow:hidden;background-color:rgba(var(--ax-comp-progress-bar-backdrop-bg-color),var(--ax-comp-progress-bar-backdrop-bg-color-opacity));border-radius:var(--ax-sys-border-radius)}ax-progress-bar .ax-progress .ax-progress-bar{height:100%;background-color:rgba(var(--ax-comp-progress-bar-bg-color));transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);border-style:solid}ax-progress-bar .ax-indeterminate-progress{animation:indeterminateAnimation 1s infinite linear;transform-origin:0% 50%;width:100%;height:100%}@keyframes indeterminateAnimation{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}ax-progress-bar .ax-query-progress{animation:queryAnimation 1s infinite linear;transform-origin:0% 50%;width:100%;height:100%}@keyframes queryAnimation{0%{transform:translate(100%) scaleX(0)}40%{transform:translate(0) scaleX(.7)}to{transform:translate(-50%) scaleX(.5)}}ax-progress-bar .ax-buffer-progress{animation:bufferAnimation 5s infinite linear;transform-origin:0% 50%;width:100%;height:100%;background-color:transparent!important;background-image:repeating-linear-gradient(to right,transparent,transparent .5rem,rgba(var(--ax-comp-progress-bar-bg-color)) .5rem,rgba(var(--ax-comp-progress-bar-bg-color)) 1rem)!important;background-size:100%}@keyframes bufferAnimation{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXProgressBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXProgressBarComponent, isStandalone: true, selector: "ax-progress-bar", inputs: { color: "color", mode: "mode", progress: "progress", height: "height" }, outputs: { ValueChange: "ValueChange", sizeChange: "sizeChange" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "circle", first: true, predicate: ["c"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n@switch (mode) {\n  @case ('indeterminate') {\n    <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n      <div class=\"ax-progress-bar ax-indeterminate-progress\"></div>\n    </div>\n  }\n  @case ('query') {\n    <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n      <div class=\"ax-progress-bar ax-query-progress\"></div>\n    </div>\n  }\n  @case ('buffer') {\n    <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n      <div class=\"ax-progress-bar ax-buffer-progress\"></div>\n    </div>\n  }\n  @default {\n    <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n      <div class=\"ax-progress-bar\" [style.width.%]=\"progress\"></div>\n    </div>\n  }\n}\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-progress-bar.ax-default{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-primary-surface)}ax-progress-bar{--ax-comp-progress-bar-backdrop-bg-color: var(--ax-sys-color-dark);--ax-comp-progress-bar-backdrop-bg-color-opacity: .2}ax-progress-bar.ax-primary{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-primary-surface)}ax-progress-bar.ax-secondary{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-secondary-surface)}ax-progress-bar.ax-success{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-success-surface)}ax-progress-bar.ax-warning{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-warning-surface)}ax-progress-bar.ax-danger{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-danger-surface)}.ax-dark ax-progress-bar{--ax-comp-progress-bar-backdrop-bg-color: var(--ax-sys-color-light)}ax-progress-bar{display:flex;width:100%;align-items:center;justify-content:center;gap:.5rem;position:relative}ax-progress-bar .ax-progress{width:100%;overflow:hidden;background-color:rgba(var(--ax-comp-progress-bar-backdrop-bg-color),var(--ax-comp-progress-bar-backdrop-bg-color-opacity));border-radius:var(--ax-sys-border-radius)}ax-progress-bar .ax-progress .ax-progress-bar{height:100%;background-color:rgba(var(--ax-comp-progress-bar-bg-color));transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);border-style:solid}ax-progress-bar .ax-indeterminate-progress{animation:indeterminateAnimation 1s infinite linear;transform-origin:0% 50%;width:100%;height:100%}@keyframes indeterminateAnimation{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}ax-progress-bar .ax-query-progress{animation:queryAnimation 1s infinite linear;transform-origin:0% 50%;width:100%;height:100%}@keyframes queryAnimation{0%{transform:translate(100%) scaleX(0)}40%{transform:translate(0) scaleX(.7)}to{transform:translate(-50%) scaleX(.5)}}ax-progress-bar .ax-buffer-progress{animation:bufferAnimation 5s infinite linear;transform-origin:0% 50%;width:100%;height:100%;background-color:transparent!important;background-image:repeating-linear-gradient(to right,transparent,transparent .5rem,rgba(var(--ax-comp-progress-bar-bg-color)) .5rem,rgba(var(--ax-comp-progress-bar-bg-color)) 1rem)!important;background-size:100%}@keyframes bufferAnimation{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXProgressBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-progress-bar', inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"ax-prefix\"></ng-content>\n@switch (mode) {\n  @case ('indeterminate') {\n    <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n      <div class=\"ax-progress-bar ax-indeterminate-progress\"></div>\n    </div>\n  }\n  @case ('query') {\n    <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n      <div class=\"ax-progress-bar ax-query-progress\"></div>\n    </div>\n  }\n  @case ('buffer') {\n    <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n      <div class=\"ax-progress-bar ax-buffer-progress\"></div>\n    </div>\n  }\n  @default {\n    <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n      <div class=\"ax-progress-bar\" [style.width.%]=\"progress\"></div>\n    </div>\n  }\n}\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-progress-bar.ax-default{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-primary-surface)}ax-progress-bar{--ax-comp-progress-bar-backdrop-bg-color: var(--ax-sys-color-dark);--ax-comp-progress-bar-backdrop-bg-color-opacity: .2}ax-progress-bar.ax-primary{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-primary-surface)}ax-progress-bar.ax-secondary{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-secondary-surface)}ax-progress-bar.ax-success{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-success-surface)}ax-progress-bar.ax-warning{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-warning-surface)}ax-progress-bar.ax-danger{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-danger-surface)}.ax-dark ax-progress-bar{--ax-comp-progress-bar-backdrop-bg-color: var(--ax-sys-color-light)}ax-progress-bar{display:flex;width:100%;align-items:center;justify-content:center;gap:.5rem;position:relative}ax-progress-bar .ax-progress{width:100%;overflow:hidden;background-color:rgba(var(--ax-comp-progress-bar-backdrop-bg-color),var(--ax-comp-progress-bar-backdrop-bg-color-opacity));border-radius:var(--ax-sys-border-radius)}ax-progress-bar .ax-progress .ax-progress-bar{height:100%;background-color:rgba(var(--ax-comp-progress-bar-bg-color));transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);border-style:solid}ax-progress-bar .ax-indeterminate-progress{animation:indeterminateAnimation 1s infinite linear;transform-origin:0% 50%;width:100%;height:100%}@keyframes indeterminateAnimation{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}ax-progress-bar .ax-query-progress{animation:queryAnimation 1s infinite linear;transform-origin:0% 50%;width:100%;height:100%}@keyframes queryAnimation{0%{transform:translate(100%) scaleX(0)}40%{transform:translate(0) scaleX(.7)}to{transform:translate(-50%) scaleX(.5)}}ax-progress-bar .ax-buffer-progress{animation:bufferAnimation 5s infinite linear;transform-origin:0% 50%;width:100%;height:100%;background-color:transparent!important;background-image:repeating-linear-gradient(to right,transparent,transparent .5rem,rgba(var(--ax-comp-progress-bar-bg-color)) .5rem,rgba(var(--ax-comp-progress-bar-bg-color)) 1rem)!important;background-size:100%}@keyframes bufferAnimation{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"] }]
         }], propDecorators: { circle: [{
@@ -87,11 +87,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
             }] } });
 
 class AXProgressBarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXProgressBarModule, imports: [CommonModule, AXProgressBarComponent], exports: [AXProgressBarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXProgressBarModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXProgressBarModule, imports: [CommonModule, AXProgressBarComponent], exports: [AXProgressBarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXProgressBarModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXProgressBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXProgressBarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXProgressBarComponent],

package/fesm2022/acorex-components-qrcode.mjs

@@ -1,7 +1,7 @@
 import { generateQRCode } from '@acorex/cdk/qrcode';
 import { AXValuableComponent } from '@acorex/components/common';
 import * as i0 from '@angular/core';
-import { input, signal, viewChild, effect, forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { input, signal, viewChild, effect, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 
@@ -81,8 +81,8 @@ class AXQrcodeComponent {
             console.error(error);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXQrcodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: AXQrcodeComponent, isStandalone: true, selector: "ax-qrcode", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, outputType: { classPropertyName: "outputType", publicName: "outputType", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXQrcodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXQrcodeComponent, isStandalone: true, selector: "ax-qrcode", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, outputType: { classPropertyName: "outputType", publicName: "outputType", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             { provide: AXValuableComponent, useExisting: AXQrcodeComponent },
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -91,7 +91,7 @@ class AXQrcodeComponent {
             },
         ], viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "svg", first: true, predicate: ["svg"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"qrcode\">\n  @if (outputType() === 'canvas') {\n    <canvas #canvas></canvas>\n  } @else if (outputType() === 'svg') {\n    <div #svg></div>\n  } @else {\n    <img [src]=\"qrCodeUrl()\" alt=\"QR Code\" />\n  }\n  <div class=\"logo-container\">\n    <ng-content select=\"img\"></ng-content>\n  </div>\n</div>\n", styles: [".qrcode{position:relative}.qrcode .logo-container{position:absolute;display:flex;align-items:center;justify-content:center;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXQrcodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXQrcodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-qrcode', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: AXValuableComponent, useExisting: AXQrcodeComponent },
@@ -104,11 +104,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
         }], ctorParameters: () => [] });
 
 class AXQrcodeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXQrcodeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXQrcodeModule, imports: [CommonModule, AXQrcodeComponent], exports: [AXQrcodeComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXQrcodeModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXQrcodeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXQrcodeModule, imports: [CommonModule, AXQrcodeComponent], exports: [AXQrcodeComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXQrcodeModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXQrcodeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXQrcodeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXQrcodeComponent],

package/fesm2022/acorex-components-query-builder.mjs

@@ -1,5 +1,6 @@
 import { AXButtonComponent, AXButtonModule } from '@acorex/components/button';
 import { AXButtonGroupComponent, AXButtonGroupItemComponent, AXButtonGroupModule } from '@acorex/components/button-group';
+import { AXDataSource } from '@acorex/components/common';
 import { AXDateTimeBoxComponent, AXDateTimeBoxModule } from '@acorex/components/datetime-box';
 import { AXDecoratorIconComponent, AXDecoratorClearButtonComponent, AXDecoratorModule } from '@acorex/components/decorators';
 import { AXNumberBoxComponent, AXNumberBoxModule } from '@acorex/components/number-box';
@@ -7,14 +8,25 @@ import { AXSelectBoxComponent, AXSelectBoxModule } from '@acorex/components/sele
 import { AXTextBoxComponent, AXTextBoxModule } from '@acorex/components/text-box';
 import { NgFor, NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, input, model, output, effect, Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { input, model, output, viewChild, signal, effect, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
 
 class AXQueryBuilderComponent {
     constructor() {
-        this.reRender = signal(true);
         this.columnData = input.required();
         this.queryData = model.required();
         this.onValueChanged = output();
+        this.selectBoxRef = viewChild('reRender');
+        this.selectedItem = signal(null);
+        this.ds = new AXDataSource({
+            load: async (e) => {
+                return {
+                    items: this.operators[this.selectedItem().type].slice(e.skip, (e.skip ?? 0) + (e.take ?? 0)),
+                    total: this.operators[this.selectedItem().type].length,
+                };
+            },
+            key: 'id',
+            pageSize: 20,
+        });
         this.operators = {
             string: [
                 'Starts With',
@@ -63,6 +75,7 @@ class AXQueryBuilderComponent {
         });
     }
     columnDataHandler(e, i) {
+        this.selectedItem.set(i);
         const selectedItem = e.component.selectedItems[0];
         this.queryData.update((prev) => {
             const copy = [...prev];
@@ -74,10 +87,8 @@ class AXQueryBuilderComponent {
                 find.inputValues = selectedItem.values;
             return copy;
         });
-        this.reRender.set(false);
-        setTimeout(() => {
-            this.reRender.set(true);
-        });
+        this.selectBoxRef().refresh();
+        this.selectBoxRef().reset();
     }
     operatorDataHandler(e, i) {
         this.queryData.update((prev) => {
@@ -180,10 +191,10 @@ class AXQueryBuilderComponent {
     trackById(_, item) {
         return item.id;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXQueryBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: AXQueryBuilderComponent, isStandalone: true, selector: "ax-query-builder", inputs: { columnData: { classPropertyName: "columnData", publicName: "columnData", isSignal: true, isRequired: true, transformFunction: null }, queryData: { classPropertyName: "queryData", publicName: "queryData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { queryData: "queryDataChange", onValueChanged: "onValueChanged" }, ngImport: i0, template: "<ng-container\n  *ngFor=\"let item of queryData(); let i = index; trackBy: trackById\"\n  [ngTemplateOutletContext]=\"{ $implicit: item, index: i }\"\n  [ngTemplateOutlet]=\"query\"\n>\n</ng-container>\n\n<ng-template #query let-item let-index=\"index\">\n  @if (item.condition) {\n    <div class=\"ax-recursive-container\">\n      <div class=\"ax-add-condition-container\">\n        <ax-button-group selection=\"single\" (selectedButtonChange)=\"conditionHandler($event, item)\" color=\"primary\" class=\"ax-sm\">\n          <ax-button-group-item data=\"and\" [selected]=\"item.condition === 'and'\" text=\"And\"> </ax-button-group-item>\n          <ax-button-group-item data=\"or\" [selected]=\"item.condition === 'or'\" text=\"Or\"> </ax-button-group-item>\n        </ax-button-group>\n        <ax-button (onClick)=\"addRulesHandler(item)\" class=\"ax-sm\" color=\"primary\" look=\"blank\" text=\"Add Rules\"></ax-button>\n        <ax-button (onClick)=\"addGroupHandler(item)\" class=\"ax-sm\" color=\"primary\" look=\"blank\" text=\"Add Group\"></ax-button>\n        @if (index !== 0) {\n          <ax-button look=\"blank\" (onClick)=\"removeGroupHandler(item)\" class=\"ax-sm\" color=\"danger\">\n            <ax-icon icon=\"ax-icon ax-icon-trash\"></ax-icon>\n          </ax-button>\n        }\n      </div>\n\n      <ng-container *ngFor=\"let child of item.rules; trackBy: trackById\" [ngTemplateOutletContext]=\"{ $implicit: child }\" [ngTemplateOutlet]=\"query\">\n      </ng-container>\n    </div>\n  } @else {\n    <div class=\"ax-rules-container\">\n      <div class=\"ax-input-rules-container\">\n        <ax-select-box\n          (onValueChanged)=\"columnDataHandler($event, item)\"\n          valueField=\"field\"\n          textField=\"label\"\n          [dataSource]=\"columnData()\"\n          placeholder=\"Select Field\"\n        >\n        </ax-select-box>\n\n        @if (reRender()) {\n          <ax-select-box\n            [disabled]=\"!item.field\"\n            name=\"selectBoxOperator\"\n            (onValueChanged)=\"operatorDataHandler($event, item)\"\n            [dataSource]=\"operators[item.type] || []\"\n            placeholder=\"Select Operator\"\n          >\n          </ax-select-box>\n        }\n\n        @switch (item.type) {\n          @case ('boolean') {\n            <div class=\"ax-boolean-value-input-container\">\n              @for (boolean of item.inputValues; track $index) {\n                <label>{{ boolean }}</label>\n                <input name=\"same\" [value]=\"boolean\" (input)=\"booleanValueHandler($event, item)\" type=\"radio\" />\n              }\n            </div>\n          }\n          @case ('string') {\n            <ax-text-box (onValueChanged)=\"stringValueHandler($event, item)\">\n              <ax-clear-button></ax-clear-button>\n            </ax-text-box>\n          }\n          @case ('number') {\n            <ax-number-box (onValueChanged)=\"numberValueHandler($event, item)\"></ax-number-box>\n          }\n          @case ('date') {\n            <ax-datetime-box format=\"yyyy/MM/dd\" (onValueChanged)=\"dateValueHandler($event, item)\">\n              <ax-clear-button></ax-clear-button>\n            </ax-datetime-box>\n          }\n        }\n      </div>\n      <ax-button (onClick)=\"removeRulesHandler(item)\" look=\"blank\" class=\"ax-md\" color=\"danger\">\n        <ax-icon icon=\"ax-icon ax-icon-trash\"></ax-icon>\n      </ax-button>\n    </div>\n  }\n</ng-template>\n", styles: ["ax-query-builder{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-radius:var(--ax-sys-border-radius);padding:1rem;width:100%;display:block}ax-query-builder .ax-add-condition-container{display:flex;gap:.5rem;margin-block:.5rem}ax-query-builder .ax-recursive-container{border-inline-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface));padding-inline-start:1rem}ax-query-builder .ax-rules-container{display:flex;align-items:center;margin-block:.5rem}ax-query-builder .ax-rules-container .ax-input-rules-container{display:flex;align-items:center;gap:.5rem;width:100%}ax-query-builder .ax-rules-container:not(:last-child){margin-bottom:.5rem}ax-query-builder .ax-boolean-value-input-container{display:flex;gap:.5rem;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXQueryBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXQueryBuilderComponent, isStandalone: true, selector: "ax-query-builder", inputs: { columnData: { classPropertyName: "columnData", publicName: "columnData", isSignal: true, isRequired: true, transformFunction: null }, queryData: { classPropertyName: "queryData", publicName: "queryData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { queryData: "queryDataChange", onValueChanged: "onValueChanged" }, viewQueries: [{ propertyName: "selectBoxRef", first: true, predicate: ["reRender"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container\n  *ngFor=\"let item of queryData(); let i = index; trackBy: trackById\"\n  [ngTemplateOutletContext]=\"{ $implicit: item, index: i }\"\n  [ngTemplateOutlet]=\"query\"\n>\n</ng-container>\n\n<ng-template #query let-item let-index=\"index\">\n  @if (item.condition) {\n    <div class=\"ax-recursive-container\">\n      <div class=\"ax-add-condition-container\">\n        <ax-button-group selection=\"single\" (selectedButtonChange)=\"conditionHandler($event, item)\" color=\"primary\" class=\"ax-sm\">\n          <ax-button-group-item data=\"and\" [selected]=\"item.condition === 'and'\" text=\"And\"> </ax-button-group-item>\n          <ax-button-group-item data=\"or\" [selected]=\"item.condition === 'or'\" text=\"Or\"> </ax-button-group-item>\n        </ax-button-group>\n        <ax-button (onClick)=\"addRulesHandler(item)\" class=\"ax-sm\" color=\"primary\" look=\"blank\" text=\"Add Rules\"></ax-button>\n        <ax-button (onClick)=\"addGroupHandler(item)\" class=\"ax-sm\" color=\"primary\" look=\"blank\" text=\"Add Group\"></ax-button>\n        @if (index !== 0) {\n          <ax-button look=\"blank\" (onClick)=\"removeGroupHandler(item)\" class=\"ax-sm\" color=\"danger\">\n            <ax-icon icon=\"ax-icon ax-icon-trash\"></ax-icon>\n          </ax-button>\n        }\n      </div>\n\n      <ng-container *ngFor=\"let child of item.rules; trackBy: trackById\" [ngTemplateOutletContext]=\"{ $implicit: child }\" [ngTemplateOutlet]=\"query\">\n      </ng-container>\n    </div>\n  } @else {\n    <div class=\"ax-rules-container\">\n      <div class=\"ax-input-rules-container\">\n        <ax-select-box\n          (onValueChanged)=\"columnDataHandler($event, item)\"\n          valueField=\"field\"\n          textField=\"label\"\n          [dataSource]=\"columnData()\"\n          placeholder=\"Select Field\"\n        >\n        </ax-select-box>\n\n        <ax-select-box\n          #reRender\n          [disabled]=\"!item.field\"\n          name=\"selectBoxOperator\"\n          (onValueChanged)=\"operatorDataHandler($event, item)\"\n          [dataSource]=\"ds\"\n          placeholder=\"Select Operator\"\n        >\n        </ax-select-box>\n\n        @switch (item.type) {\n          @case ('boolean') {\n            <div class=\"ax-boolean-value-input-container\">\n              @for (boolean of item.inputValues; track $index) {\n                <label>{{ boolean }}</label>\n                <input name=\"same\" [value]=\"boolean\" (input)=\"booleanValueHandler($event, item)\" type=\"radio\" />\n              }\n            </div>\n          }\n          @case ('string') {\n            <ax-text-box (onValueChanged)=\"stringValueHandler($event, item)\">\n              <ax-clear-button></ax-clear-button>\n            </ax-text-box>\n          }\n          @case ('number') {\n            <ax-number-box (onValueChanged)=\"numberValueHandler($event, item)\"></ax-number-box>\n          }\n          @case ('date') {\n            <ax-datetime-box format=\"yyyy/MM/dd\" (onValueChanged)=\"dateValueHandler($event, item)\">\n              <ax-clear-button></ax-clear-button>\n            </ax-datetime-box>\n          }\n        }\n      </div>\n      <ax-button (onClick)=\"removeRulesHandler(item)\" look=\"blank\" class=\"ax-md\" color=\"danger\">\n        <ax-icon icon=\"ax-icon ax-icon-trash\"></ax-icon>\n      </ax-button>\n    </div>\n  }\n</ng-template>\n", styles: ["ax-query-builder{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-radius:var(--ax-sys-border-radius);padding:1rem;width:100%;display:block}ax-query-builder .ax-add-condition-container{display:flex;gap:.5rem;margin-block:.5rem}ax-query-builder .ax-recursive-container{border-inline-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface));padding-inline-start:1rem}ax-query-builder .ax-rules-container{display:flex;align-items:center;margin-block:.5rem}ax-query-builder .ax-rules-container .ax-input-rules-container{display:flex;align-items:center;gap:.5rem;width:100%}ax-query-builder .ax-rules-container:not(:last-child){margin-bottom:.5rem}ax-query-builder .ax-boolean-value-input-container{display:flex;gap:.5rem;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXQueryBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXQueryBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-query-builder', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgFor,
@@ -197,7 +208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         AXDecoratorClearButtonComponent,
                         AXNumberBoxComponent,
                         AXDateTimeBoxComponent,
-                    ], template: "<ng-container\n  *ngFor=\"let item of queryData(); let i = index; trackBy: trackById\"\n  [ngTemplateOutletContext]=\"{ $implicit: item, index: i }\"\n  [ngTemplateOutlet]=\"query\"\n>\n</ng-container>\n\n<ng-template #query let-item let-index=\"index\">\n  @if (item.condition) {\n    <div class=\"ax-recursive-container\">\n      <div class=\"ax-add-condition-container\">\n        <ax-button-group selection=\"single\" (selectedButtonChange)=\"conditionHandler($event, item)\" color=\"primary\" class=\"ax-sm\">\n          <ax-button-group-item data=\"and\" [selected]=\"item.condition === 'and'\" text=\"And\"> </ax-button-group-item>\n          <ax-button-group-item data=\"or\" [selected]=\"item.condition === 'or'\" text=\"Or\"> </ax-button-group-item>\n        </ax-button-group>\n        <ax-button (onClick)=\"addRulesHandler(item)\" class=\"ax-sm\" color=\"primary\" look=\"blank\" text=\"Add Rules\"></ax-button>\n        <ax-button (onClick)=\"addGroupHandler(item)\" class=\"ax-sm\" color=\"primary\" look=\"blank\" text=\"Add Group\"></ax-button>\n        @if (index !== 0) {\n          <ax-button look=\"blank\" (onClick)=\"removeGroupHandler(item)\" class=\"ax-sm\" color=\"danger\">\n            <ax-icon icon=\"ax-icon ax-icon-trash\"></ax-icon>\n          </ax-button>\n        }\n      </div>\n\n      <ng-container *ngFor=\"let child of item.rules; trackBy: trackById\" [ngTemplateOutletContext]=\"{ $implicit: child }\" [ngTemplateOutlet]=\"query\">\n      </ng-container>\n    </div>\n  } @else {\n    <div class=\"ax-rules-container\">\n      <div class=\"ax-input-rules-container\">\n        <ax-select-box\n          (onValueChanged)=\"columnDataHandler($event, item)\"\n          valueField=\"field\"\n          textField=\"label\"\n          [dataSource]=\"columnData()\"\n          placeholder=\"Select Field\"\n        >\n        </ax-select-box>\n\n        @if (reRender()) {\n          <ax-select-box\n            [disabled]=\"!item.field\"\n            name=\"selectBoxOperator\"\n            (onValueChanged)=\"operatorDataHandler($event, item)\"\n            [dataSource]=\"operators[item.type] || []\"\n            placeholder=\"Select Operator\"\n          >\n          </ax-select-box>\n        }\n\n        @switch (item.type) {\n          @case ('boolean') {\n            <div class=\"ax-boolean-value-input-container\">\n              @for (boolean of item.inputValues; track $index) {\n                <label>{{ boolean }}</label>\n                <input name=\"same\" [value]=\"boolean\" (input)=\"booleanValueHandler($event, item)\" type=\"radio\" />\n              }\n            </div>\n          }\n          @case ('string') {\n            <ax-text-box (onValueChanged)=\"stringValueHandler($event, item)\">\n              <ax-clear-button></ax-clear-button>\n            </ax-text-box>\n          }\n          @case ('number') {\n            <ax-number-box (onValueChanged)=\"numberValueHandler($event, item)\"></ax-number-box>\n          }\n          @case ('date') {\n            <ax-datetime-box format=\"yyyy/MM/dd\" (onValueChanged)=\"dateValueHandler($event, item)\">\n              <ax-clear-button></ax-clear-button>\n            </ax-datetime-box>\n          }\n        }\n      </div>\n      <ax-button (onClick)=\"removeRulesHandler(item)\" look=\"blank\" class=\"ax-md\" color=\"danger\">\n        <ax-icon icon=\"ax-icon ax-icon-trash\"></ax-icon>\n      </ax-button>\n    </div>\n  }\n</ng-template>\n", styles: ["ax-query-builder{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-radius:var(--ax-sys-border-radius);padding:1rem;width:100%;display:block}ax-query-builder .ax-add-condition-container{display:flex;gap:.5rem;margin-block:.5rem}ax-query-builder .ax-recursive-container{border-inline-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface));padding-inline-start:1rem}ax-query-builder .ax-rules-container{display:flex;align-items:center;margin-block:.5rem}ax-query-builder .ax-rules-container .ax-input-rules-container{display:flex;align-items:center;gap:.5rem;width:100%}ax-query-builder .ax-rules-container:not(:last-child){margin-bottom:.5rem}ax-query-builder .ax-boolean-value-input-container{display:flex;gap:.5rem;align-items:center}\n"] }]
+                    ], template: "<ng-container\n  *ngFor=\"let item of queryData(); let i = index; trackBy: trackById\"\n  [ngTemplateOutletContext]=\"{ $implicit: item, index: i }\"\n  [ngTemplateOutlet]=\"query\"\n>\n</ng-container>\n\n<ng-template #query let-item let-index=\"index\">\n  @if (item.condition) {\n    <div class=\"ax-recursive-container\">\n      <div class=\"ax-add-condition-container\">\n        <ax-button-group selection=\"single\" (selectedButtonChange)=\"conditionHandler($event, item)\" color=\"primary\" class=\"ax-sm\">\n          <ax-button-group-item data=\"and\" [selected]=\"item.condition === 'and'\" text=\"And\"> </ax-button-group-item>\n          <ax-button-group-item data=\"or\" [selected]=\"item.condition === 'or'\" text=\"Or\"> </ax-button-group-item>\n        </ax-button-group>\n        <ax-button (onClick)=\"addRulesHandler(item)\" class=\"ax-sm\" color=\"primary\" look=\"blank\" text=\"Add Rules\"></ax-button>\n        <ax-button (onClick)=\"addGroupHandler(item)\" class=\"ax-sm\" color=\"primary\" look=\"blank\" text=\"Add Group\"></ax-button>\n        @if (index !== 0) {\n          <ax-button look=\"blank\" (onClick)=\"removeGroupHandler(item)\" class=\"ax-sm\" color=\"danger\">\n            <ax-icon icon=\"ax-icon ax-icon-trash\"></ax-icon>\n          </ax-button>\n        }\n      </div>\n\n      <ng-container *ngFor=\"let child of item.rules; trackBy: trackById\" [ngTemplateOutletContext]=\"{ $implicit: child }\" [ngTemplateOutlet]=\"query\">\n      </ng-container>\n    </div>\n  } @else {\n    <div class=\"ax-rules-container\">\n      <div class=\"ax-input-rules-container\">\n        <ax-select-box\n          (onValueChanged)=\"columnDataHandler($event, item)\"\n          valueField=\"field\"\n          textField=\"label\"\n          [dataSource]=\"columnData()\"\n          placeholder=\"Select Field\"\n        >\n        </ax-select-box>\n\n        <ax-select-box\n          #reRender\n          [disabled]=\"!item.field\"\n          name=\"selectBoxOperator\"\n          (onValueChanged)=\"operatorDataHandler($event, item)\"\n          [dataSource]=\"ds\"\n          placeholder=\"Select Operator\"\n        >\n        </ax-select-box>\n\n        @switch (item.type) {\n          @case ('boolean') {\n            <div class=\"ax-boolean-value-input-container\">\n              @for (boolean of item.inputValues; track $index) {\n                <label>{{ boolean }}</label>\n                <input name=\"same\" [value]=\"boolean\" (input)=\"booleanValueHandler($event, item)\" type=\"radio\" />\n              }\n            </div>\n          }\n          @case ('string') {\n            <ax-text-box (onValueChanged)=\"stringValueHandler($event, item)\">\n              <ax-clear-button></ax-clear-button>\n            </ax-text-box>\n          }\n          @case ('number') {\n            <ax-number-box (onValueChanged)=\"numberValueHandler($event, item)\"></ax-number-box>\n          }\n          @case ('date') {\n            <ax-datetime-box format=\"yyyy/MM/dd\" (onValueChanged)=\"dateValueHandler($event, item)\">\n              <ax-clear-button></ax-clear-button>\n            </ax-datetime-box>\n          }\n        }\n      </div>\n      <ax-button (onClick)=\"removeRulesHandler(item)\" look=\"blank\" class=\"ax-md\" color=\"danger\">\n        <ax-icon icon=\"ax-icon ax-icon-trash\"></ax-icon>\n      </ax-button>\n    </div>\n  }\n</ng-template>\n", styles: ["ax-query-builder{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-radius:var(--ax-sys-border-radius);padding:1rem;width:100%;display:block}ax-query-builder .ax-add-condition-container{display:flex;gap:.5rem;margin-block:.5rem}ax-query-builder .ax-recursive-container{border-inline-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface));padding-inline-start:1rem}ax-query-builder .ax-rules-container{display:flex;align-items:center;margin-block:.5rem}ax-query-builder .ax-rules-container .ax-input-rules-container{display:flex;align-items:center;gap:.5rem;width:100%}ax-query-builder .ax-rules-container:not(:last-child){margin-bottom:.5rem}ax-query-builder .ax-boolean-value-input-container{display:flex;gap:.5rem;align-items:center}\n"] }]
         }] });
 
 const COMPONENT = [AXQueryBuilderComponent];
@@ -212,8 +223,8 @@ const MODULES = [
     CommonModule,
 ];
 class AXQueryBuilderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXQueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXQueryBuilderModule, imports: [AXButtonGroupModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXQueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXQueryBuilderModule, imports: [AXButtonGroupModule,
             AXDecoratorModule,
             AXSelectBoxModule,
             AXButtonModule,
@@ -221,9 +232,9 @@ class AXQueryBuilderModule {
             AXNumberBoxModule,
             AXDateTimeBoxModule,
             CommonModule, AXQueryBuilderComponent], exports: [AXQueryBuilderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXQueryBuilderModule, imports: [MODULES, COMPONENT] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXQueryBuilderModule, imports: [MODULES, COMPONENT] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXQueryBuilderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXQueryBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],