@acorex/components 21.0.1-next.76 → 21.0.1-next.77

package/fesm2022/acorex-components-paint.mjs

@@ -223,7 +223,7 @@ class AXPaintContainerComponent extends classes((MXInputBaseValueComponent), MXL
                 useExisting: forwardRef(() => AXPaintContainerComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-editor-container ax-default {{ look }}\">\n  <ng-content></ng-content>\n\n  @if (service.activeToolState() && !editMode()) {\n    <div class=\"ax-secondary-toolbar\">\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          <ax-paint-pen-tool></ax-paint-pen-tool>\n        }\n        @case ('eraser') {\n          <ax-paint-eraser-tool></ax-paint-eraser-tool>\n        }\n        @case ('highlight') {\n          <ax-paint-highlight-tool></ax-paint-highlight-tool>\n        }\n      }\n    </div>\n  }\n\n  @if (!editMode()) {\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-paint-tools-selector></ax-paint-tools-selector>\n      </ax-content>\n    </ax-toolbar>\n  }\n\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-paint-container>.ax-editor-container{height:100%;display:block;padding:calc(var(--spacing,.25rem) * 0)!important}ax-paint-container.ax-state-disabled{opacity:.5}ax-paint-container .ax-disable-overlay{top:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0);cursor:not-allowed;width:100%;height:100%;position:absolute}ax-paint-container .ax-secondary-toolbar{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));padding:calc(var(--spacing,.25rem) * 1);justify-content:center;display:flex}ax-paint-container .ax-secondary-toolbar:where(.dark,.dark *){border-color:var(--color-border-darkest,rgba(var(--ax-sys-color-border-darkest-surface)))}ax-paint-container .ax-main-toolbar{padding:calc(var(--spacing,.25rem) * 1);justify-content:center}ax-paint-container ax-paint-tools-selector{padding:calc(var(--spacing,.25rem) * 1);display:flex}ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool{display:flex}:is(ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool) ax-range-slider{width:calc(var(--spacing,.25rem) * 40);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2)}:is(ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool) ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem) * 4)!important;width:calc(var(--spacing,.25rem) * 4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXToolBarComponent, selector: "ax-toolbar" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPaintToolsSelectorComponent, selector: "ax-paint-tools-selector" }, { kind: "component", type: AXPaintPenToolComponent, selector: "ax-paint-pen-tool" }, { kind: "component", type: AXPaintHighlightToolComponent, selector: "ax-paint-highlight-tool" }, { kind: "component", type: AXPaintEraserToolComponent, selector: "ax-paint-eraser-tool" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-editor-container ax-default {{ look }}\">\n  <ng-content></ng-content>\n\n  @if (service.activeToolState() && !editMode()) {\n    <div class=\"ax-secondary-toolbar\">\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          <ax-paint-pen-tool></ax-paint-pen-tool>\n        }\n        @case ('eraser') {\n          <ax-paint-eraser-tool></ax-paint-eraser-tool>\n        }\n        @case ('highlight') {\n          <ax-paint-highlight-tool></ax-paint-highlight-tool>\n        }\n      }\n    </div>\n  }\n\n  @if (!editMode()) {\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-paint-tools-selector></ax-paint-tools-selector>\n      </ax-content>\n    </ax-toolbar>\n  }\n\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-paint-container>.ax-editor-container{height:100%;display:block;padding:calc(var(--spacing,.25rem) * 0)!important}ax-paint-container.ax-state-disabled{opacity:.5}ax-paint-container .ax-disable-overlay{top:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0);cursor:not-allowed;width:100%;height:100%;position:absolute}ax-paint-container .ax-secondary-toolbar{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));padding:calc(var(--spacing,.25rem) * 1);justify-content:center;display:flex}ax-paint-container .ax-secondary-toolbar:where(.dark,.dark *){border-color:var(--color-border-darkest,rgba(var(--ax-sys-color-border-darkest-surface)))}ax-paint-container .ax-main-toolbar{padding:calc(var(--spacing,.25rem) * 1);justify-content:center}ax-paint-container ax-paint-tools-selector{padding:calc(var(--spacing,.25rem) * 1);display:flex}ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool{display:flex}:is(ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool) ax-range-slider{width:calc(var(--spacing,.25rem) * 40);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2)}:is(ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool) ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem) * 4)!important;width:calc(var(--spacing,.25rem) * 4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXToolBarComponent, selector: "ax-toolbar" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPaintToolsSelectorComponent, selector: "ax-paint-tools-selector" }, { kind: "component", type: AXPaintPenToolComponent, selector: "ax-paint-pen-tool" }, { kind: "component", type: AXPaintHighlightToolComponent, selector: "ax-paint-highlight-tool" }, { kind: "component", type: AXPaintEraserToolComponent, selector: "ax-paint-eraser-tool" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPaintContainerComponent, decorators: [{
             type: Component,
@@ -244,7 +244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         AXPaintPenToolComponent,
                         AXPaintHighlightToolComponent,
                         AXPaintEraserToolComponent,
-                    ], template: "<div class=\"ax-editor-container ax-default {{ look }}\">\n  <ng-content></ng-content>\n\n  @if (service.activeToolState() && !editMode()) {\n    <div class=\"ax-secondary-toolbar\">\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          <ax-paint-pen-tool></ax-paint-pen-tool>\n        }\n        @case ('eraser') {\n          <ax-paint-eraser-tool></ax-paint-eraser-tool>\n        }\n        @case ('highlight') {\n          <ax-paint-highlight-tool></ax-paint-highlight-tool>\n        }\n      }\n    </div>\n  }\n\n  @if (!editMode()) {\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-paint-tools-selector></ax-paint-tools-selector>\n      </ax-content>\n    </ax-toolbar>\n  }\n\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-paint-container>.ax-editor-container{height:100%;display:block;padding:calc(var(--spacing,.25rem) * 0)!important}ax-paint-container.ax-state-disabled{opacity:.5}ax-paint-container .ax-disable-overlay{top:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0);cursor:not-allowed;width:100%;height:100%;position:absolute}ax-paint-container .ax-secondary-toolbar{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));padding:calc(var(--spacing,.25rem) * 1);justify-content:center;display:flex}ax-paint-container .ax-secondary-toolbar:where(.dark,.dark *){border-color:var(--color-border-darkest,rgba(var(--ax-sys-color-border-darkest-surface)))}ax-paint-container .ax-main-toolbar{padding:calc(var(--spacing,.25rem) * 1);justify-content:center}ax-paint-container ax-paint-tools-selector{padding:calc(var(--spacing,.25rem) * 1);display:flex}ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool{display:flex}:is(ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool) ax-range-slider{width:calc(var(--spacing,.25rem) * 40);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2)}:is(ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool) ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem) * 4)!important;width:calc(var(--spacing,.25rem) * 4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<div class=\"ax-editor-container ax-default {{ look }}\">\n  <ng-content></ng-content>\n\n  @if (service.activeToolState() && !editMode()) {\n    <div class=\"ax-secondary-toolbar\">\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          <ax-paint-pen-tool></ax-paint-pen-tool>\n        }\n        @case ('eraser') {\n          <ax-paint-eraser-tool></ax-paint-eraser-tool>\n        }\n        @case ('highlight') {\n          <ax-paint-highlight-tool></ax-paint-highlight-tool>\n        }\n      }\n    </div>\n  }\n\n  @if (!editMode()) {\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-paint-tools-selector></ax-paint-tools-selector>\n      </ax-content>\n    </ax-toolbar>\n  }\n\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-paint-container>.ax-editor-container{height:100%;display:block;padding:calc(var(--spacing,.25rem) * 0)!important}ax-paint-container.ax-state-disabled{opacity:.5}ax-paint-container .ax-disable-overlay{top:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0);cursor:not-allowed;width:100%;height:100%;position:absolute}ax-paint-container .ax-secondary-toolbar{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));padding:calc(var(--spacing,.25rem) * 1);justify-content:center;display:flex}ax-paint-container .ax-secondary-toolbar:where(.dark,.dark *){border-color:var(--color-border-darkest,rgba(var(--ax-sys-color-border-darkest-surface)))}ax-paint-container .ax-main-toolbar{padding:calc(var(--spacing,.25rem) * 1);justify-content:center}ax-paint-container ax-paint-tools-selector{padding:calc(var(--spacing,.25rem) * 1);display:flex}ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool{display:flex}:is(ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool) ax-range-slider{width:calc(var(--spacing,.25rem) * 40);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2)}:is(ax-paint-container ax-paint-eraser-tool,ax-paint-container ax-paint-highlight-tool,ax-paint-container ax-paint-pen-tool) ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem) * 4)!important;width:calc(var(--spacing,.25rem) * 4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -395,11 +395,11 @@ class AXPaintViewComponent {
         return [`ax-${this.paintBackgroundColor()}`];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPaintViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", type: AXPaintViewComponent, isStandalone: true, selector: "ax-paint-view", inputs: { paintBackgroundColor: { classPropertyName: "paintBackgroundColor", publicName: "paintBackgroundColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXPaintViewComponent }], viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["c"], descendants: true, isSignal: true }], ngImport: i0, template: "<canvas\n  #c\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n>\n</canvas>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-paint-view{touch-action:none;width:100%;display:block}ax-paint-view.ax-white{background-color:var(--color-white,#fff)}ax-paint-view.ax-black{background-color:var(--color-black,#000)}ax-paint-view .ax-canvas-element{cursor:crosshair;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));width:100%}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", type: AXPaintViewComponent, isStandalone: true, selector: "ax-paint-view", inputs: { paintBackgroundColor: { classPropertyName: "paintBackgroundColor", publicName: "paintBackgroundColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXPaintViewComponent }], viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["c"], descendants: true, isSignal: true }], ngImport: i0, template: "<canvas\n  #c\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n>\n</canvas>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-paint-view{touch-action:none;width:100%;display:block}ax-paint-view.ax-white{background-color:var(--color-white,#fff)}ax-paint-view.ax-black{background-color:var(--color-black,#000)}ax-paint-view .ax-canvas-element{cursor:crosshair;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));width:100%}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPaintViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-paint-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXPaintViewComponent }], template: "<canvas\n  #c\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n>\n</canvas>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-paint-view{touch-action:none;width:100%;display:block}ax-paint-view.ax-white{background-color:var(--color-white,#fff)}ax-paint-view.ax-black{background-color:var(--color-black,#000)}ax-paint-view .ax-canvas-element{cursor:crosshair;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));width:100%}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-paint-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXPaintViewComponent }], template: "<canvas\n  #c\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n>\n</canvas>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-paint-view{touch-action:none;width:100%;display:block}ax-paint-view.ax-white{background-color:var(--color-white,#fff)}ax-paint-view.ax-black{background-color:var(--color-black,#000)}ax-paint-view .ax-canvas-element{cursor:crosshair;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));width:100%}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { paintBackgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "paintBackgroundColor", required: false }] }], canvasElem: [{ type: i0.ViewChild, args: ['c', { isSignal: true }] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']

package/fesm2022/acorex-components-password-box.mjs

@@ -166,11 +166,11 @@ class AXPasswordStrengthValidationComponent {
         this.passwordStrength.set((strength * 100) / 5);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPasswordStrengthValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXPasswordStrengthValidationComponent, isStandalone: true, selector: "ax-password-strength-validation", inputs: { showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null }, showLengthGraterThan8: { classPropertyName: "showLengthGraterThan8", publicName: "showLengthGraterThan8", isSignal: true, isRequired: false, transformFunction: null }, showUseUpperCase: { classPropertyName: "showUseUpperCase", publicName: "showUseUpperCase", isSignal: true, isRequired: false, transformFunction: null }, showUseLowerCase: { classPropertyName: "showUseLowerCase", publicName: "showUseLowerCase", isSignal: true, isRequired: false, transformFunction: null }, showUseNumber: { classPropertyName: "showUseNumber", publicName: "showUseNumber", isSignal: true, isRequired: false, transformFunction: null }, showUseSpecialCharacter: { classPropertyName: "showUseSpecialCharacter", publicName: "showUseSpecialCharacter", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXPasswordStrengthValidationComponent }], ngImport: i0, template: "@if (showProgress()) {\n  <small\n    class=\"ax-state-password\"\n    [class.ax-text-red]=\"strengthLabelColor() === 'danger'\"\n    [class.ax-text-orange]=\"strengthLabelColor() === 'warning'\"\n    [class.ax-text-green]=\"strengthLabelColor() === 'success'\"\n  >\n    {{ '@acorex:password-strength.levels.' + strengthLabel() | translate | async }}\n  </small>\n\n  <ax-progress-bar [color]=\"strengthLabelColor()\" [progress]=\"passwordStrength()\" [height]=\"4\"></ax-progress-bar>\n}\n\n<div class=\"ax-hint-container\">\n  @if (showLengthGraterThan8()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isLengthGraterThan8().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.at-least-8-characters' | translate | async }}\n      </span>\n    </small>\n  }\n  @if (showUseUpperCase()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseUpperCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.english-upper-case-letter' | translate | async }}\n      </span>\n    </small>\n  }\n  @if (showUseLowerCase()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseLowerCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.english-lower-case-letter' | translate | async }}\n      </span>\n    </small>\n  }\n  @if (showUseNumber()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseNumber().state ? 'success' : 'danger'\"></ax-badge\n      ><span> {{ '@acorex:password-strength.rules.digits' | translate | async }} </span>\n    </small>\n  }\n  @if (showUseSpecialCharacter()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseSpecialCharacter().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.special-character' | translate | async }}\n      </span>\n    </small>\n  }\n</div>\n", styles: ["@layer components{.ax-state-password{margin-bottom:calc(var(--spacing,.25rem) * 1.5);display:block}.ax-state-password.ax-text-red{color:var(--color-danger,rgba(var(--ax-sys-color-danger-surface)))}.ax-state-password.ax-text-orange{color:var(--color-warning,rgba(var(--ax-sys-color-warning-surface)))}.ax-state-password.ax-text-green{color:var(--color-success,rgba(var(--ax-sys-color-success-surface)))}.ax-hint-container{gap:calc(var(--spacing,.25rem) * 2);padding-top:calc(var(--spacing,.25rem) * 2);flex-direction:column;display:flex}.ax-hint-container ax-badge{margin-inline-end:calc(var(--spacing,.25rem) * 1)}}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXPasswordStrengthValidationComponent, isStandalone: true, selector: "ax-password-strength-validation", inputs: { showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null }, showLengthGraterThan8: { classPropertyName: "showLengthGraterThan8", publicName: "showLengthGraterThan8", isSignal: true, isRequired: false, transformFunction: null }, showUseUpperCase: { classPropertyName: "showUseUpperCase", publicName: "showUseUpperCase", isSignal: true, isRequired: false, transformFunction: null }, showUseLowerCase: { classPropertyName: "showUseLowerCase", publicName: "showUseLowerCase", isSignal: true, isRequired: false, transformFunction: null }, showUseNumber: { classPropertyName: "showUseNumber", publicName: "showUseNumber", isSignal: true, isRequired: false, transformFunction: null }, showUseSpecialCharacter: { classPropertyName: "showUseSpecialCharacter", publicName: "showUseSpecialCharacter", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXPasswordStrengthValidationComponent }], ngImport: i0, template: "@if (showProgress()) {\n  <small\n    class=\"ax-state-password\"\n    [class.ax-text-red]=\"strengthLabelColor() === 'danger'\"\n    [class.ax-text-orange]=\"strengthLabelColor() === 'warning'\"\n    [class.ax-text-green]=\"strengthLabelColor() === 'success'\"\n  >\n    {{ '@acorex:password-strength.levels.' + strengthLabel() | translate | async }}\n  </small>\n\n  <ax-progress-bar [color]=\"strengthLabelColor()\" [progress]=\"passwordStrength()\" [height]=\"4\"></ax-progress-bar>\n}\n\n<div class=\"ax-hint-container\">\n  @if (showLengthGraterThan8()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isLengthGraterThan8().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.at-least-8-characters' | translate | async }}\n      </span>\n    </small>\n  }\n  @if (showUseUpperCase()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseUpperCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.english-upper-case-letter' | translate | async }}\n      </span>\n    </small>\n  }\n  @if (showUseLowerCase()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseLowerCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.english-lower-case-letter' | translate | async }}\n      </span>\n    </small>\n  }\n  @if (showUseNumber()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseNumber().state ? 'success' : 'danger'\"></ax-badge\n      ><span> {{ '@acorex:password-strength.rules.digits' | translate | async }} </span>\n    </small>\n  }\n  @if (showUseSpecialCharacter()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseSpecialCharacter().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.special-character' | translate | async }}\n      </span>\n    </small>\n  }\n</div>\n", styles: ["@layer components{.ax-state-password{margin-bottom:calc(var(--spacing,.25rem) * 1.5);display:block}.ax-state-password.ax-text-red{color:var(--color-danger,rgba(var(--ax-sys-color-danger-surface)))}.ax-state-password.ax-text-orange{color:var(--color-warning,rgba(var(--ax-sys-color-warning-surface)))}.ax-state-password.ax-text-green{color:var(--color-success,rgba(var(--ax-sys-color-success-surface)))}.ax-hint-container{gap:calc(var(--spacing,.25rem) * 2);padding-top:calc(var(--spacing,.25rem) * 2);flex-direction:column;display:flex}.ax-hint-container ax-badge{margin-inline-end:calc(var(--spacing,.25rem) * 1)}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { 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: "21.1.3", ngImport: i0, type: AXPasswordStrengthValidationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-password-strength-validation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXProgressBarComponent, AXBadgeComponent, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXPasswordStrengthValidationComponent }], template: "@if (showProgress()) {\n  <small\n    class=\"ax-state-password\"\n    [class.ax-text-red]=\"strengthLabelColor() === 'danger'\"\n    [class.ax-text-orange]=\"strengthLabelColor() === 'warning'\"\n    [class.ax-text-green]=\"strengthLabelColor() === 'success'\"\n  >\n    {{ '@acorex:password-strength.levels.' + strengthLabel() | translate | async }}\n  </small>\n\n  <ax-progress-bar [color]=\"strengthLabelColor()\" [progress]=\"passwordStrength()\" [height]=\"4\"></ax-progress-bar>\n}\n\n<div class=\"ax-hint-container\">\n  @if (showLengthGraterThan8()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isLengthGraterThan8().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.at-least-8-characters' | translate | async }}\n      </span>\n    </small>\n  }\n  @if (showUseUpperCase()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseUpperCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.english-upper-case-letter' | translate | async }}\n      </span>\n    </small>\n  }\n  @if (showUseLowerCase()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseLowerCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.english-lower-case-letter' | translate | async }}\n      </span>\n    </small>\n  }\n  @if (showUseNumber()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseNumber().state ? 'success' : 'danger'\"></ax-badge\n      ><span> {{ '@acorex:password-strength.rules.digits' | translate | async }} </span>\n    </small>\n  }\n  @if (showUseSpecialCharacter()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseSpecialCharacter().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.special-character' | translate | async }}\n      </span>\n    </small>\n  }\n</div>\n", styles: ["@layer components{.ax-state-password{margin-bottom:calc(var(--spacing,.25rem) * 1.5);display:block}.ax-state-password.ax-text-red{color:var(--color-danger,rgba(var(--ax-sys-color-danger-surface)))}.ax-state-password.ax-text-orange{color:var(--color-warning,rgba(var(--ax-sys-color-warning-surface)))}.ax-state-password.ax-text-green{color:var(--color-success,rgba(var(--ax-sys-color-success-surface)))}.ax-hint-container{gap:calc(var(--spacing,.25rem) * 2);padding-top:calc(var(--spacing,.25rem) * 2);flex-direction:column;display:flex}.ax-hint-container ax-badge{margin-inline-end:calc(var(--spacing,.25rem) * 1)}}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-password-strength-validation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXProgressBarComponent, AXBadgeComponent, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXPasswordStrengthValidationComponent }], template: "@if (showProgress()) {\n  <small\n    class=\"ax-state-password\"\n    [class.ax-text-red]=\"strengthLabelColor() === 'danger'\"\n    [class.ax-text-orange]=\"strengthLabelColor() === 'warning'\"\n    [class.ax-text-green]=\"strengthLabelColor() === 'success'\"\n  >\n    {{ '@acorex:password-strength.levels.' + strengthLabel() | translate | async }}\n  </small>\n\n  <ax-progress-bar [color]=\"strengthLabelColor()\" [progress]=\"passwordStrength()\" [height]=\"4\"></ax-progress-bar>\n}\n\n<div class=\"ax-hint-container\">\n  @if (showLengthGraterThan8()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isLengthGraterThan8().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.at-least-8-characters' | translate | async }}\n      </span>\n    </small>\n  }\n  @if (showUseUpperCase()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseUpperCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.english-upper-case-letter' | translate | async }}\n      </span>\n    </small>\n  }\n  @if (showUseLowerCase()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseLowerCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.english-lower-case-letter' | translate | async }}\n      </span>\n    </small>\n  }\n  @if (showUseNumber()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseNumber().state ? 'success' : 'danger'\"></ax-badge\n      ><span> {{ '@acorex:password-strength.rules.digits' | translate | async }} </span>\n    </small>\n  }\n  @if (showUseSpecialCharacter()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseSpecialCharacter().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.special-character' | translate | async }}\n      </span>\n    </small>\n  }\n</div>\n", styles: ["@layer components{.ax-state-password{margin-bottom:calc(var(--spacing,.25rem) * 1.5);display:block}.ax-state-password.ax-text-red{color:var(--color-danger,rgba(var(--ax-sys-color-danger-surface)))}.ax-state-password.ax-text-orange{color:var(--color-warning,rgba(var(--ax-sys-color-warning-surface)))}.ax-state-password.ax-text-green{color:var(--color-success,rgba(var(--ax-sys-color-success-surface)))}.ax-hint-container{gap:calc(var(--spacing,.25rem) * 2);padding-top:calc(var(--spacing,.25rem) * 2);flex-direction:column;display:flex}.ax-hint-container ax-badge{margin-inline-end:calc(var(--spacing,.25rem) * 1)}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { showProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgress", required: false }] }], showLengthGraterThan8: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLengthGraterThan8", required: false }] }], showUseUpperCase: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUseUpperCase", required: false }] }], showUseLowerCase: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUseLowerCase", required: false }] }], showUseNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUseNumber", required: false }] }], showUseSpecialCharacter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUseSpecialCharacter", required: false }] }] } });
 
 const COMPONENT = [AXPasswordBoxComponent, AXPasswordStrengthValidationComponent];

package/fesm2022/acorex-components-pdf-reader.mjs

@@ -9,11 +9,11 @@ class AXPdfReaderComponent {
         this.src = input(...(ngDevMode ? [undefined, { debugName: "src" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPdfReaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: AXPdfReaderComponent, isStandalone: true, selector: "ax-pdf-reader", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXPdfReaderComponent }], ngImport: i0, template: "<iframe [src]=\"src()\" frameborder=\"0\"></iframe>\n", styles: ["@layer components{ax-pdf-reader,ax-pdf-reader iframe{width:100%;height:100%}}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: AXPdfReaderComponent, isStandalone: true, selector: "ax-pdf-reader", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXPdfReaderComponent }], ngImport: i0, template: "<iframe [src]=\"src()\" frameborder=\"0\"></iframe>\n", styles: ["@layer components{ax-pdf-reader,ax-pdf-reader iframe{width:100%;height:100%}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPdfReaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-pdf-reader', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXPdfReaderComponent }], template: "<iframe [src]=\"src()\" frameborder=\"0\"></iframe>\n", styles: ["@layer components{ax-pdf-reader,ax-pdf-reader iframe{width:100%;height:100%}}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-pdf-reader', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXPdfReaderComponent }], template: "<iframe [src]=\"src()\" frameborder=\"0\"></iframe>\n", styles: ["@layer components{ax-pdf-reader,ax-pdf-reader iframe{width:100%;height:100%}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }] } });
 
 const COMPONENT = [AXPdfReaderComponent];

package/fesm2022/acorex-components-phone-box.mjs

@@ -277,7 +277,7 @@ class AXPhoneBoxComponent extends classes((MXInputBaseValueComponent), MXLookCom
                 useExisting: forwardRef(() => AXPhoneBoxComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["s"], descendants: true, isSignal: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-box\n  dir=\"ltr\"\n  [look]=\"look\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  [maskPattern]=\"selectedCountry()?.mask\"\n  [placeholder]=\"selectedCountry()?.format\"\n  [ngModel]=\"value\"\n  (onValueChanged)=\"_handleModelChange($event)\"\n  (onBlur)=\"emitOnBlurEvent($event.nativeEvent)\"\n  (onFocus)=\"emitOnFocusEvent($event.nativeEvent)\"\n  (onKeyDown)=\"handleKeyDown($event.nativeEvent)\"\n  (onKeyPress)=\"emitOnKeypressEvent($event.nativeEvent)\"\n  (onKeyUp)=\"emitOnKeyupEvent($event.nativeEvent)\"\n>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n\n  <ax-prefix>\n    @if (precode()) {\n      <ax-text>{{ precode() }}</ax-text>\n    } @else {\n      <ax-select-box\n        #s\n        look=\"blank\"\n        [disabled]=\"disabled || readonly\"\n        [readonly]=\"readonly\"\n        [dropdownWidth]=\"'320px'\"\n        [dataSource]=\"dataSource\"\n        [ngModel]=\"selectedCountry()\"\n        [textField]=\"'iso2code'\"\n        [multiple]=\"false\"\n        [valueField]=\"'code'\"\n        [itemTemplate]=\"customItemTemplate\"\n        [selectedTemplate]=\"selectedTemplate\"\n        (onValueChanged)=\"_handleCountryValueChanged($event)\"\n        (onClosed)=\"handleCountryOnClosed()\"\n        [tabIndex]=\"included().length === 1 ? '-1' : '1'\"\n      >\n        <ax-search-box class=\"ax-sm\" look=\"fill\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n        <ng-template #customItemTemplate let-item>\n          <div class=\"ax-country-item\">\n            <div\n              class=\"ax-country-flag\"\n              [ngStyle]=\"{\n                'background-position': item.data.bkPosition?.x + ' ' + item.data.bkPosition?.y,\n                'background-image': 'url(' + flags() + ')',\n              }\"\n            ></div>\n            <div>\n              <span class=\"ax-country-name\">{{ item.data.name }}</span>\n              <span class=\"ax-iso2code\">{{ item.data.iso2code }}</span>\n            </div>\n          </div>\n        </ng-template>\n        <ng-template #selectedTemplate let-item>\n          <div class=\"ax-selected-country\">\n            <span>{{ item.data.iso2code }}</span>\n          </div>\n        </ng-template>\n        <ng-template #loading></ng-template>\n      </ax-select-box>\n    }\n  </ax-prefix>\n</ax-text-box>\n\n<ng-content select=\"ax-clear-button \"></ng-content>\n<div class=\"ax-error-container\"></div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial}}}@layer components{ax-phone-box ax-select-box ax-dropdown-box .ax-content{padding-top:calc(var(--spacing,.25rem) * 0)!important}.ax-country-item{cursor:pointer;align-items:center;gap:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 3);display:flex}.ax-country-item:hover{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)))}.ax-country-item .ax-country-name{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);margin-inline-end:calc(var(--spacing,.25rem) * 2)}.ax-country-item .ax-iso2code{opacity:.7}.ax-country-flag{background-repeat:no-repeat;height:calc(var(--spacing,.25rem) * 5)!important;width:calc(var(--spacing,.25rem) * 6)!important}.ax-selected-country{align-items:center;gap:calc(var(--spacing,.25rem) * 2);padding-inline-end:calc(var(--spacing,.25rem) * 2);display:flex}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { 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", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXFormModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["s"], descendants: true, isSignal: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-box\n  dir=\"ltr\"\n  [look]=\"look\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  [maskPattern]=\"selectedCountry()?.mask\"\n  [placeholder]=\"selectedCountry()?.format\"\n  [ngModel]=\"value\"\n  (onValueChanged)=\"_handleModelChange($event)\"\n  (onBlur)=\"emitOnBlurEvent($event.nativeEvent)\"\n  (onFocus)=\"emitOnFocusEvent($event.nativeEvent)\"\n  (onKeyDown)=\"handleKeyDown($event.nativeEvent)\"\n  (onKeyPress)=\"emitOnKeypressEvent($event.nativeEvent)\"\n  (onKeyUp)=\"emitOnKeyupEvent($event.nativeEvent)\"\n>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n\n  <ax-prefix>\n    @if (precode()) {\n      <ax-text>{{ precode() }}</ax-text>\n    } @else {\n      <ax-select-box\n        #s\n        look=\"blank\"\n        [disabled]=\"disabled || readonly\"\n        [readonly]=\"readonly\"\n        [dropdownWidth]=\"'320px'\"\n        [dataSource]=\"dataSource\"\n        [ngModel]=\"selectedCountry()\"\n        [textField]=\"'iso2code'\"\n        [multiple]=\"false\"\n        [valueField]=\"'code'\"\n        [itemTemplate]=\"customItemTemplate\"\n        [selectedTemplate]=\"selectedTemplate\"\n        (onValueChanged)=\"_handleCountryValueChanged($event)\"\n        (onClosed)=\"handleCountryOnClosed()\"\n        [tabIndex]=\"included().length === 1 ? '-1' : '1'\"\n      >\n        <ax-search-box class=\"ax-sm\" look=\"fill\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n        <ng-template #customItemTemplate let-item>\n          <div class=\"ax-country-item\">\n            <div\n              class=\"ax-country-flag\"\n              [ngStyle]=\"{\n                'background-position': item.data.bkPosition?.x + ' ' + item.data.bkPosition?.y,\n                'background-image': 'url(' + flags() + ')',\n              }\"\n            ></div>\n            <div>\n              <span class=\"ax-country-name\">{{ item.data.name }}</span>\n              <span class=\"ax-iso2code\">{{ item.data.iso2code }}</span>\n            </div>\n          </div>\n        </ng-template>\n        <ng-template #selectedTemplate let-item>\n          <div class=\"ax-selected-country\">\n            <span>{{ item.data.iso2code }}</span>\n          </div>\n        </ng-template>\n        <ng-template #loading></ng-template>\n      </ax-select-box>\n    }\n  </ax-prefix>\n</ax-text-box>\n\n<ng-content select=\"ax-clear-button \"></ng-content>\n<div class=\"ax-error-container\"></div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial}}}@layer components{ax-phone-box ax-select-box ax-dropdown-box .ax-content{padding-top:calc(var(--spacing,.25rem) * 0)!important}.ax-country-item{cursor:pointer;align-items:center;gap:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 3);display:flex}.ax-country-item:hover{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)))}.ax-country-item .ax-country-name{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);margin-inline-end:calc(var(--spacing,.25rem) * 2)}.ax-country-item .ax-iso2code{opacity:.7}.ax-country-flag{background-repeat:no-repeat;height:calc(var(--spacing,.25rem) * 5)!important;width:calc(var(--spacing,.25rem) * 6)!important}.ax-selected-country{align-items:center;gap:calc(var(--spacing,.25rem) * 2);padding-inline-end:calc(var(--spacing,.25rem) * 2);display:flex}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { 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", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXFormModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPhoneBoxComponent, decorators: [{
             type: Component,
@@ -327,7 +327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         AXDecoratorClearButtonComponent,
                         NgStyle,
                         AXFormModule,
-                    ], template: "<ax-text-box\n  dir=\"ltr\"\n  [look]=\"look\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  [maskPattern]=\"selectedCountry()?.mask\"\n  [placeholder]=\"selectedCountry()?.format\"\n  [ngModel]=\"value\"\n  (onValueChanged)=\"_handleModelChange($event)\"\n  (onBlur)=\"emitOnBlurEvent($event.nativeEvent)\"\n  (onFocus)=\"emitOnFocusEvent($event.nativeEvent)\"\n  (onKeyDown)=\"handleKeyDown($event.nativeEvent)\"\n  (onKeyPress)=\"emitOnKeypressEvent($event.nativeEvent)\"\n  (onKeyUp)=\"emitOnKeyupEvent($event.nativeEvent)\"\n>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n\n  <ax-prefix>\n    @if (precode()) {\n      <ax-text>{{ precode() }}</ax-text>\n    } @else {\n      <ax-select-box\n        #s\n        look=\"blank\"\n        [disabled]=\"disabled || readonly\"\n        [readonly]=\"readonly\"\n        [dropdownWidth]=\"'320px'\"\n        [dataSource]=\"dataSource\"\n        [ngModel]=\"selectedCountry()\"\n        [textField]=\"'iso2code'\"\n        [multiple]=\"false\"\n        [valueField]=\"'code'\"\n        [itemTemplate]=\"customItemTemplate\"\n        [selectedTemplate]=\"selectedTemplate\"\n        (onValueChanged)=\"_handleCountryValueChanged($event)\"\n        (onClosed)=\"handleCountryOnClosed()\"\n        [tabIndex]=\"included().length === 1 ? '-1' : '1'\"\n      >\n        <ax-search-box class=\"ax-sm\" look=\"fill\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n        <ng-template #customItemTemplate let-item>\n          <div class=\"ax-country-item\">\n            <div\n              class=\"ax-country-flag\"\n              [ngStyle]=\"{\n                'background-position': item.data.bkPosition?.x + ' ' + item.data.bkPosition?.y,\n                'background-image': 'url(' + flags() + ')',\n              }\"\n            ></div>\n            <div>\n              <span class=\"ax-country-name\">{{ item.data.name }}</span>\n              <span class=\"ax-iso2code\">{{ item.data.iso2code }}</span>\n            </div>\n          </div>\n        </ng-template>\n        <ng-template #selectedTemplate let-item>\n          <div class=\"ax-selected-country\">\n            <span>{{ item.data.iso2code }}</span>\n          </div>\n        </ng-template>\n        <ng-template #loading></ng-template>\n      </ax-select-box>\n    }\n  </ax-prefix>\n</ax-text-box>\n\n<ng-content select=\"ax-clear-button \"></ng-content>\n<div class=\"ax-error-container\"></div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial}}}@layer components{ax-phone-box ax-select-box ax-dropdown-box .ax-content{padding-top:calc(var(--spacing,.25rem) * 0)!important}.ax-country-item{cursor:pointer;align-items:center;gap:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 3);display:flex}.ax-country-item:hover{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)))}.ax-country-item .ax-country-name{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);margin-inline-end:calc(var(--spacing,.25rem) * 2)}.ax-country-item .ax-iso2code{opacity:.7}.ax-country-flag{background-repeat:no-repeat;height:calc(var(--spacing,.25rem) * 5)!important;width:calc(var(--spacing,.25rem) * 6)!important}.ax-selected-country{align-items:center;gap:calc(var(--spacing,.25rem) * 2);padding-inline-end:calc(var(--spacing,.25rem) * 2);display:flex}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<ax-text-box\n  dir=\"ltr\"\n  [look]=\"look\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  [maskPattern]=\"selectedCountry()?.mask\"\n  [placeholder]=\"selectedCountry()?.format\"\n  [ngModel]=\"value\"\n  (onValueChanged)=\"_handleModelChange($event)\"\n  (onBlur)=\"emitOnBlurEvent($event.nativeEvent)\"\n  (onFocus)=\"emitOnFocusEvent($event.nativeEvent)\"\n  (onKeyDown)=\"handleKeyDown($event.nativeEvent)\"\n  (onKeyPress)=\"emitOnKeypressEvent($event.nativeEvent)\"\n  (onKeyUp)=\"emitOnKeyupEvent($event.nativeEvent)\"\n>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n\n  <ax-prefix>\n    @if (precode()) {\n      <ax-text>{{ precode() }}</ax-text>\n    } @else {\n      <ax-select-box\n        #s\n        look=\"blank\"\n        [disabled]=\"disabled || readonly\"\n        [readonly]=\"readonly\"\n        [dropdownWidth]=\"'320px'\"\n        [dataSource]=\"dataSource\"\n        [ngModel]=\"selectedCountry()\"\n        [textField]=\"'iso2code'\"\n        [multiple]=\"false\"\n        [valueField]=\"'code'\"\n        [itemTemplate]=\"customItemTemplate\"\n        [selectedTemplate]=\"selectedTemplate\"\n        (onValueChanged)=\"_handleCountryValueChanged($event)\"\n        (onClosed)=\"handleCountryOnClosed()\"\n        [tabIndex]=\"included().length === 1 ? '-1' : '1'\"\n      >\n        <ax-search-box class=\"ax-sm\" look=\"fill\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n        <ng-template #customItemTemplate let-item>\n          <div class=\"ax-country-item\">\n            <div\n              class=\"ax-country-flag\"\n              [ngStyle]=\"{\n                'background-position': item.data.bkPosition?.x + ' ' + item.data.bkPosition?.y,\n                'background-image': 'url(' + flags() + ')',\n              }\"\n            ></div>\n            <div>\n              <span class=\"ax-country-name\">{{ item.data.name }}</span>\n              <span class=\"ax-iso2code\">{{ item.data.iso2code }}</span>\n            </div>\n          </div>\n        </ng-template>\n        <ng-template #selectedTemplate let-item>\n          <div class=\"ax-selected-country\">\n            <span>{{ item.data.iso2code }}</span>\n          </div>\n        </ng-template>\n        <ng-template #loading></ng-template>\n      </ax-select-box>\n    }\n  </ax-prefix>\n</ax-text-box>\n\n<ng-content select=\"ax-clear-button \"></ng-content>\n<div class=\"ax-error-container\"></div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial}}}@layer components{ax-phone-box ax-select-box ax-dropdown-box .ax-content{padding-top:calc(var(--spacing,.25rem) * 0)!important}.ax-country-item{cursor:pointer;align-items:center;gap:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 3);display:flex}.ax-country-item:hover{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)))}.ax-country-item .ax-country-name{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);margin-inline-end:calc(var(--spacing,.25rem) * 2)}.ax-country-item .ax-iso2code{opacity:.7}.ax-country-flag{background-repeat:no-repeat;height:calc(var(--spacing,.25rem) * 5)!important;width:calc(var(--spacing,.25rem) * 6)!important}.ax-selected-country{align-items:center;gap:calc(var(--spacing,.25rem) * 2);padding-inline-end:calc(var(--spacing,.25rem) * 2);display:flex}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { textbox: [{
                 type: ViewChild,
                 args: [AXTextBoxComponent, { static: true }]

package/fesm2022/acorex-components-picker.mjs

@@ -13,11 +13,11 @@ class AXPickerContainerComponent {
         return `${this.customClass()}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPickerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", 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" } }, providers: [{ provide: AXComponent, useExisting: AXPickerContainerComponent }], 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: ["@layer components{ax-picker-container{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}ax-picker-container .ax-picker-items-container{height:calc(var(--spacing,.25rem) * 100);justify-content:center;align-items:center;width:100%;display:flex}ax-picker-container .ax-picker-title-container{justify-content:center;align-items:center;width:100%;display:flex}}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", 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" } }, providers: [{ provide: AXComponent, useExisting: AXPickerContainerComponent }], 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: ["@layer components{ax-picker-container{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}ax-picker-container .ax-picker-items-container{height:calc(var(--spacing,.25rem) * 100);justify-content:center;align-items:center;width:100%;display:flex}ax-picker-container .ax-picker-title-container{justify-content:center;align-items:center;width:100%;display:flex}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPickerContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-picker-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXPickerContainerComponent }], 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: ["@layer components{ax-picker-container{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}ax-picker-container .ax-picker-items-container{height:calc(var(--spacing,.25rem) * 100);justify-content:center;align-items:center;width:100%;display:flex}ax-picker-container .ax-picker-title-container{justify-content:center;align-items:center;width:100%;display:flex}}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-picker-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXPickerContainerComponent }], 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: ["@layer components{ax-picker-container{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}ax-picker-container .ax-picker-items-container{height:calc(var(--spacing,.25rem) * 100);justify-content:center;align-items:center;width:100%;display:flex}ax-picker-container .ax-picker-title-container{justify-content:center;align-items:center;width:100%;display:flex}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -136,7 +136,7 @@ class AXPickerItemsComponent extends MXValueComponent {
                 multi: true,
             },
             { provide: AXComponent, useExisting: AXPickerItemsComponent },
-        ], viewQueries: [{ propertyName: "swiperRef", first: true, predicate: ["c"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #c=\"axCarousel\" axCarousel 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        @if (minValue() != null && item.text < minValue()) {\n          <p class=\"ax-picker-item ax-state-disabled\">{{ item.text }}</p>\n        } @else if (maxValue() != null && item.text > maxValue()) {\n          <p class=\"ax-picker-item ax-state-disabled\">{{ item.text }}</p>\n        } @else {\n          <p class=\"ax-picker-item\">{{ item.text }}</p>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"ax-selected-picker-border\"></div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-picker-items{-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}ax-picker-items .ax-state-disabled{cursor:not-allowed;opacity:.5}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;text-align:center;justify-content:center;align-items:center;display:flex}ax-picker-items .ax-carousel .ax-carousel-wrapper .ax-carousel-slide .ax-picker-item{width:100%;padding-block:calc(var(--spacing,.25rem) * 2);-webkit-user-select:none;user-select:none}ax-picker-items .ax-carousel .ax-carousel-wrapper .ax-carousel-slide .ax-picker-item:hover{background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest)}ax-picker-items .ax-carousel .ax-selected-picker-border{height:calc(var(--spacing,.25rem) * 8);border-block-style:var(--tw-border-style);border-block-width:1px;border-color:var(--color-primary-dark,rgba(var(--ax-sys-color-primary-dark-surface)));width:100%;position:absolute;top:50%}ax-picker-items .ax-carousel .ax-selected-picker-border:where(.dark,.dark *){border-color:var(--color-primary-lightest,rgba(var(--ax-sys-color-primary-lightest-surface)))}ax-picker-items .ax-carousel .ax-selected-picker-border{transform:translateY(-50%)}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AXCarouselDirective, selector: "[axCarousel]", exportAs: ["axCarousel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "swiperRef", first: true, predicate: ["c"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #c=\"axCarousel\" axCarousel 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        @if (minValue() != null && item.text < minValue()) {\n          <p class=\"ax-picker-item ax-state-disabled\">{{ item.text }}</p>\n        } @else if (maxValue() != null && item.text > maxValue()) {\n          <p class=\"ax-picker-item ax-state-disabled\">{{ item.text }}</p>\n        } @else {\n          <p class=\"ax-picker-item\">{{ item.text }}</p>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"ax-selected-picker-border\"></div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-picker-items{-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}ax-picker-items .ax-state-disabled{cursor:not-allowed;opacity:.5}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;text-align:center;justify-content:center;align-items:center;display:flex}ax-picker-items .ax-carousel .ax-carousel-wrapper .ax-carousel-slide .ax-picker-item{width:100%;padding-block:calc(var(--spacing,.25rem) * 2);-webkit-user-select:none;user-select:none}ax-picker-items .ax-carousel .ax-carousel-wrapper .ax-carousel-slide .ax-picker-item:hover{background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest)}ax-picker-items .ax-carousel .ax-selected-picker-border{height:calc(var(--spacing,.25rem) * 8);border-block-style:var(--tw-border-style);border-block-width:1px;border-color:var(--color-primary-dark,rgba(var(--ax-sys-color-primary-dark-surface)));width:100%;position:absolute;top:50%}ax-picker-items .ax-carousel .ax-selected-picker-border:where(.dark,.dark *){border-color:var(--color-primary-lightest,rgba(var(--ax-sys-color-primary-lightest-surface)))}ax-picker-items .ax-carousel .ax-selected-picker-border{transform:translateY(-50%)}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AXCarouselDirective, selector: "[axCarousel]", exportAs: ["axCarousel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPickerItemsComponent, decorators: [{
             type: Component,
@@ -147,7 +147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                             multi: true,
                         },
                         { provide: AXComponent, useExisting: AXPickerItemsComponent },
-                    ], imports: [AXCarouselDirective], template: "<div #c=\"axCarousel\" axCarousel 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        @if (minValue() != null && item.text < minValue()) {\n          <p class=\"ax-picker-item ax-state-disabled\">{{ item.text }}</p>\n        } @else if (maxValue() != null && item.text > maxValue()) {\n          <p class=\"ax-picker-item ax-state-disabled\">{{ item.text }}</p>\n        } @else {\n          <p class=\"ax-picker-item\">{{ item.text }}</p>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"ax-selected-picker-border\"></div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-picker-items{-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}ax-picker-items .ax-state-disabled{cursor:not-allowed;opacity:.5}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;text-align:center;justify-content:center;align-items:center;display:flex}ax-picker-items .ax-carousel .ax-carousel-wrapper .ax-carousel-slide .ax-picker-item{width:100%;padding-block:calc(var(--spacing,.25rem) * 2);-webkit-user-select:none;user-select:none}ax-picker-items .ax-carousel .ax-carousel-wrapper .ax-carousel-slide .ax-picker-item:hover{background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest)}ax-picker-items .ax-carousel .ax-selected-picker-border{height:calc(var(--spacing,.25rem) * 8);border-block-style:var(--tw-border-style);border-block-width:1px;border-color:var(--color-primary-dark,rgba(var(--ax-sys-color-primary-dark-surface)));width:100%;position:absolute;top:50%}ax-picker-items .ax-carousel .ax-selected-picker-border:where(.dark,.dark *){border-color:var(--color-primary-lightest,rgba(var(--ax-sys-color-primary-lightest-surface)))}ax-picker-items .ax-carousel .ax-selected-picker-border{transform:translateY(-50%)}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], imports: [AXCarouselDirective], template: "<div #c=\"axCarousel\" axCarousel 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        @if (minValue() != null && item.text < minValue()) {\n          <p class=\"ax-picker-item ax-state-disabled\">{{ item.text }}</p>\n        } @else if (maxValue() != null && item.text > maxValue()) {\n          <p class=\"ax-picker-item ax-state-disabled\">{{ item.text }}</p>\n        } @else {\n          <p class=\"ax-picker-item\">{{ item.text }}</p>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"ax-selected-picker-border\"></div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-picker-items{-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}ax-picker-items .ax-state-disabled{cursor:not-allowed;opacity:.5}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;text-align:center;justify-content:center;align-items:center;display:flex}ax-picker-items .ax-carousel .ax-carousel-wrapper .ax-carousel-slide .ax-picker-item{width:100%;padding-block:calc(var(--spacing,.25rem) * 2);-webkit-user-select:none;user-select:none}ax-picker-items .ax-carousel .ax-carousel-wrapper .ax-carousel-slide .ax-picker-item:hover{background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest)}ax-picker-items .ax-carousel .ax-selected-picker-border{height:calc(var(--spacing,.25rem) * 8);border-block-style:var(--tw-border-style);border-block-width:1px;border-color:var(--color-primary-dark,rgba(var(--ax-sys-color-primary-dark-surface)));width:100%;position:absolute;top:50%}ax-picker-items .ax-carousel .ax-selected-picker-border:where(.dark,.dark *){border-color:var(--color-primary-lightest,rgba(var(--ax-sys-color-primary-lightest-surface)))}ax-picker-items .ax-carousel .ax-selected-picker-border{transform:translateY(-50%)}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { swiperRef: [{ type: i0.ViewChild, args: ['c', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], slidesPerGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidesPerGroup", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -155,11 +155,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
 class AXPickerTitleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPickerTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXPickerTitleComponent, isStandalone: true, selector: "ax-picker-title", providers: [{ provide: AXComponent, useExisting: AXPickerTitleComponent }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["@layer components{ax-picker-title{width:100%;height:fit-content;padding:calc(var(--spacing,.25rem) * 2);justify-content:center;align-items:center;display:flex}}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXPickerTitleComponent, isStandalone: true, selector: "ax-picker-title", providers: [{ provide: AXComponent, useExisting: AXPickerTitleComponent }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["@layer components{ax-picker-title{width:100%;height:fit-content;padding:calc(var(--spacing,.25rem) * 2);justify-content:center;align-items:center;display:flex}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPickerTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-picker-title', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXPickerTitleComponent }], template: "<ng-content></ng-content>\n", styles: ["@layer components{ax-picker-title{width:100%;height:fit-content;padding:calc(var(--spacing,.25rem) * 2);justify-content:center;align-items:center;display:flex}}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-picker-title', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXPickerTitleComponent }], template: "<ng-content></ng-content>\n", styles: ["@layer components{ax-picker-title{width:100%;height:fit-content;padding:calc(var(--spacing,.25rem) * 2);justify-content:center;align-items:center;display:flex}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 const COMPONENT = [AXPickerContainerComponent, AXPickerItemsComponent, AXPickerTitleComponent];

package/fesm2022/acorex-components-popup.mjs

@@ -253,14 +253,14 @@ class AXPopupComponent extends MXBaseComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXPopupComponent, isStandalone: true, selector: "ax-popup", inputs: { __content__: { classPropertyName: "__content__", publicName: "__content__", isSignal: true, isRequired: false, transformFunction: null }, __config__: { classPropertyName: "__config__", publicName: "__config__", isSignal: true, isRequired: false, transformFunction: null }, __popupRef__: { classPropertyName: "__popupRef__", publicName: "__popupRef__", isSignal: true, isRequired: false, transformFunction: null }, __id__: { classPropertyName: "__id__", publicName: "__id__", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onKeydownHandler()", "document:mousemove": "onDragMove($event)", "document:mouseup": "onDragEnd()" } }, providers: [
             { provide: AXClosableComponent, useExisting: AXPopupComponent },
             { provide: AXComponent, useExisting: AXPopupComponent },
-        ], viewQueries: [{ propertyName: "contentContainerRef", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "contentContainerEl", first: true, predicate: ["contentContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" axFocusTrap>\n  <div\n    class=\"ax-popup ax-popup-{{ __config__()?.size || 'md' }}\"\n    tabindex=\"0\"\n    [class.ax-popup-dragging]=\"isDragging()\"\n    [style.position]=\"dragOffset().x || dragOffset().y ? 'fixed' : null\"\n    [style.left.px]=\"dragOffset().x || null\"\n    [style.top.px]=\"dragOffset().y || null\"\n    [style.transform]=\"dragOffset().x || dragOffset().y ? 'none' : null\"\n  >\n    <div\n      class=\"ax-popup-header-container\"\n      [class.ax-popup-draggable]=\"__config__()?.draggable\"\n      (mousedown)=\"onDragStart($event)\"\n    >\n      @if (__config__()?.header) {\n        <div class=\"ax-popup-header\">\n          <span class=\"ax-popup-title\">{{ title() | translate | async }}</span>\n          @if (__config__()?.closeButton) {\n            <ax-close-button tabindex=\"1\" (click)=\"_handleCloseClick()\"></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\" #contentContainer></div>\n      <div class=\"ax-popup-footer-container\"></div>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-outline-style:solid;--tw-font-weight:initial;--tw-leading:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer components{.ax-popup{border-style:var(--tw-border-style);background-color:var(--color-lightest);width:auto;color:var(--color-on-lightest);border-width:1px;border-color:var(--color-border-lightest);padding:calc(var(--spacing,.25rem) * 0);outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000;flex-direction:column;margin-inline:auto;display:flex;overflow:hidden;border-radius:var(--radius-default,var(--ax-sys-border-radius))!important}.ax-popup:where(.dark,.dark *){background-color:var(--color-darkest);color:var(--color-on-darkest);border-color:var(--color-border-darkest)}.ax-popup{max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));--ax-shadow:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--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 #0000),var(--ax-ring-shadow,0 0 #0000),var(--ax-shadow)}.ax-popup .ax-popup-header-container{background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)))}.ax-popup .ax-popup-header-container:where(.dark,.dark *){background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)))}.ax-popup .ax-popup-header-container .ax-popup-header{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-lighter,rgba(var(--ax-sys-color-border-lighter-surface)));padding:calc(var(--spacing,.25rem) * 3);justify-content:space-between;align-items:center;display:flex}.ax-popup .ax-popup-header-container .ax-popup-header:where(.dark,.dark *){border-color:var(--color-border-dark,rgba(var(--ax-sys-color-border-dark-surface)))}.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}@media(min-width:48rem){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));--tw-leading:calc(var(--spacing,.25rem) * 7);line-height:calc(var(--spacing,.25rem) * 7)}}.ax-popup .ax-popup-wrapper{display:contents}.ax-popup .ax-popup-header-container.ax-popup-draggable{cursor:move}.ax-popup .ax-popup.ax-popup-dragging{-webkit-user-select:none;user-select:none}.ax-popup ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border-lighter,rgba(var(--ax-sys-color-border-lighter-surface)));background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)));padding:calc(var(--spacing,.25rem) * 3);--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);justify-content:space-between;align-items:center;display:flex}.ax-popup ax-footer:where(.dark,.dark *){border-color:var(--color-border-dark,rgba(var(--ax-sys-color-border-dark-surface)));background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)))}.ax-popup:focus{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000}.ax-popup:focus-visible{border-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))}.ax-popup .ax-popup-main-container{flex-direction:column;flex:1;display:flex;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));flex:1;overflow:auto}.ax-popup .ax-popup-main-container .ax-popup-body-container:where(.dark,.dark *){background-color:var(--color-darkest,rgba(var(--ax-sys-color-darkest-surface)))}.ax-popup .ax-popup-main-container .ax-popup-footer-container{background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)))}.ax-popup .ax-popup-main-container .ax-popup-footer-container:where(.dark,.dark *){background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)))}.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{height:fit-content;width:93vw!important;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}:is(.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.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}}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "directive", type: AXFocusTrapDirective, selector: "[axFocusTrap]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "contentContainerRef", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "contentContainerEl", first: true, predicate: ["contentContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" axFocusTrap>\n  <div\n    class=\"ax-popup ax-popup-{{ __config__()?.size || 'md' }}\"\n    tabindex=\"0\"\n    [class.ax-popup-dragging]=\"isDragging()\"\n    [style.position]=\"dragOffset().x || dragOffset().y ? 'fixed' : null\"\n    [style.left.px]=\"dragOffset().x || null\"\n    [style.top.px]=\"dragOffset().y || null\"\n    [style.transform]=\"dragOffset().x || dragOffset().y ? 'none' : null\"\n  >\n    <div\n      class=\"ax-popup-header-container\"\n      [class.ax-popup-draggable]=\"__config__()?.draggable\"\n      (mousedown)=\"onDragStart($event)\"\n    >\n      @if (__config__()?.header) {\n        <div class=\"ax-popup-header\">\n          <span class=\"ax-popup-title\">{{ title() | translate | async }}</span>\n          @if (__config__()?.closeButton) {\n            <ax-close-button tabindex=\"1\" (click)=\"_handleCloseClick()\"></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\" #contentContainer></div>\n      <div class=\"ax-popup-footer-container\"></div>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-outline-style:solid;--tw-font-weight:initial;--tw-leading:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer components{.ax-popup{border-style:var(--tw-border-style);background-color:var(--color-lightest);width:auto;color:var(--color-on-lightest);border-width:1px;border-color:var(--color-border-lightest);padding:calc(var(--spacing,.25rem) * 0);outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000;flex-direction:column;margin-inline:auto;display:flex;overflow:hidden;border-radius:var(--radius-default,var(--ax-sys-border-radius))!important}.ax-popup:where(.dark,.dark *){background-color:var(--color-darkest);color:var(--color-on-darkest);border-color:var(--color-border-darkest)}.ax-popup{max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));--ax-shadow:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--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 #0000),var(--ax-ring-shadow,0 0 #0000),var(--ax-shadow)}.ax-popup .ax-popup-header-container{background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)))}.ax-popup .ax-popup-header-container:where(.dark,.dark *){background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)))}.ax-popup .ax-popup-header-container .ax-popup-header{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-lighter,rgba(var(--ax-sys-color-border-lighter-surface)));padding:calc(var(--spacing,.25rem) * 3);justify-content:space-between;align-items:center;display:flex}.ax-popup .ax-popup-header-container .ax-popup-header:where(.dark,.dark *){border-color:var(--color-border-dark,rgba(var(--ax-sys-color-border-dark-surface)))}.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}@media(min-width:48rem){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));--tw-leading:calc(var(--spacing,.25rem) * 7);line-height:calc(var(--spacing,.25rem) * 7)}}.ax-popup .ax-popup-wrapper{display:contents}.ax-popup .ax-popup-header-container.ax-popup-draggable{cursor:move}.ax-popup .ax-popup.ax-popup-dragging{-webkit-user-select:none;user-select:none}.ax-popup ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border-lighter,rgba(var(--ax-sys-color-border-lighter-surface)));background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)));padding:calc(var(--spacing,.25rem) * 3);--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);justify-content:space-between;align-items:center;display:flex}.ax-popup ax-footer:where(.dark,.dark *){border-color:var(--color-border-dark,rgba(var(--ax-sys-color-border-dark-surface)));background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)))}.ax-popup:focus{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000}.ax-popup:focus-visible{border-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))}.ax-popup .ax-popup-main-container{flex-direction:column;flex:1;display:flex;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));flex:1;overflow:auto}.ax-popup .ax-popup-main-container .ax-popup-body-container:where(.dark,.dark *){background-color:var(--color-darkest,rgba(var(--ax-sys-color-darkest-surface)))}.ax-popup .ax-popup-main-container .ax-popup-footer-container{background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)))}.ax-popup .ax-popup-main-container .ax-popup-footer-container:where(.dark,.dark *){background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)))}.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{height:fit-content;width:93vw!important;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}:is(.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.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}}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "directive", type: AXFocusTrapDirective, selector: "[axFocusTrap]" }, { 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: "21.1.3", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: AXClosableComponent, useExisting: AXPopupComponent },
                         { provide: AXComponent, useExisting: AXPopupComponent },
-                    ], imports: [AXDecoratorCloseButtonComponent, AsyncPipe, AXTranslatorPipe, AXFocusTrapDirective], template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" axFocusTrap>\n  <div\n    class=\"ax-popup ax-popup-{{ __config__()?.size || 'md' }}\"\n    tabindex=\"0\"\n    [class.ax-popup-dragging]=\"isDragging()\"\n    [style.position]=\"dragOffset().x || dragOffset().y ? 'fixed' : null\"\n    [style.left.px]=\"dragOffset().x || null\"\n    [style.top.px]=\"dragOffset().y || null\"\n    [style.transform]=\"dragOffset().x || dragOffset().y ? 'none' : null\"\n  >\n    <div\n      class=\"ax-popup-header-container\"\n      [class.ax-popup-draggable]=\"__config__()?.draggable\"\n      (mousedown)=\"onDragStart($event)\"\n    >\n      @if (__config__()?.header) {\n        <div class=\"ax-popup-header\">\n          <span class=\"ax-popup-title\">{{ title() | translate | async }}</span>\n          @if (__config__()?.closeButton) {\n            <ax-close-button tabindex=\"1\" (click)=\"_handleCloseClick()\"></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\" #contentContainer></div>\n      <div class=\"ax-popup-footer-container\"></div>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-outline-style:solid;--tw-font-weight:initial;--tw-leading:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer components{.ax-popup{border-style:var(--tw-border-style);background-color:var(--color-lightest);width:auto;color:var(--color-on-lightest);border-width:1px;border-color:var(--color-border-lightest);padding:calc(var(--spacing,.25rem) * 0);outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000;flex-direction:column;margin-inline:auto;display:flex;overflow:hidden;border-radius:var(--radius-default,var(--ax-sys-border-radius))!important}.ax-popup:where(.dark,.dark *){background-color:var(--color-darkest);color:var(--color-on-darkest);border-color:var(--color-border-darkest)}.ax-popup{max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));--ax-shadow:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--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 #0000),var(--ax-ring-shadow,0 0 #0000),var(--ax-shadow)}.ax-popup .ax-popup-header-container{background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)))}.ax-popup .ax-popup-header-container:where(.dark,.dark *){background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)))}.ax-popup .ax-popup-header-container .ax-popup-header{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-lighter,rgba(var(--ax-sys-color-border-lighter-surface)));padding:calc(var(--spacing,.25rem) * 3);justify-content:space-between;align-items:center;display:flex}.ax-popup .ax-popup-header-container .ax-popup-header:where(.dark,.dark *){border-color:var(--color-border-dark,rgba(var(--ax-sys-color-border-dark-surface)))}.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}@media(min-width:48rem){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));--tw-leading:calc(var(--spacing,.25rem) * 7);line-height:calc(var(--spacing,.25rem) * 7)}}.ax-popup .ax-popup-wrapper{display:contents}.ax-popup .ax-popup-header-container.ax-popup-draggable{cursor:move}.ax-popup .ax-popup.ax-popup-dragging{-webkit-user-select:none;user-select:none}.ax-popup ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border-lighter,rgba(var(--ax-sys-color-border-lighter-surface)));background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)));padding:calc(var(--spacing,.25rem) * 3);--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);justify-content:space-between;align-items:center;display:flex}.ax-popup ax-footer:where(.dark,.dark *){border-color:var(--color-border-dark,rgba(var(--ax-sys-color-border-dark-surface)));background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)))}.ax-popup:focus{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000}.ax-popup:focus-visible{border-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))}.ax-popup .ax-popup-main-container{flex-direction:column;flex:1;display:flex;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));flex:1;overflow:auto}.ax-popup .ax-popup-main-container .ax-popup-body-container:where(.dark,.dark *){background-color:var(--color-darkest,rgba(var(--ax-sys-color-darkest-surface)))}.ax-popup .ax-popup-main-container .ax-popup-footer-container{background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)))}.ax-popup .ax-popup-main-container .ax-popup-footer-container:where(.dark,.dark *){background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)))}.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{height:fit-content;width:93vw!important;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}:is(.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.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}}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], imports: [AXDecoratorCloseButtonComponent, AsyncPipe, AXTranslatorPipe, AXFocusTrapDirective], template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" axFocusTrap>\n  <div\n    class=\"ax-popup ax-popup-{{ __config__()?.size || 'md' }}\"\n    tabindex=\"0\"\n    [class.ax-popup-dragging]=\"isDragging()\"\n    [style.position]=\"dragOffset().x || dragOffset().y ? 'fixed' : null\"\n    [style.left.px]=\"dragOffset().x || null\"\n    [style.top.px]=\"dragOffset().y || null\"\n    [style.transform]=\"dragOffset().x || dragOffset().y ? 'none' : null\"\n  >\n    <div\n      class=\"ax-popup-header-container\"\n      [class.ax-popup-draggable]=\"__config__()?.draggable\"\n      (mousedown)=\"onDragStart($event)\"\n    >\n      @if (__config__()?.header) {\n        <div class=\"ax-popup-header\">\n          <span class=\"ax-popup-title\">{{ title() | translate | async }}</span>\n          @if (__config__()?.closeButton) {\n            <ax-close-button tabindex=\"1\" (click)=\"_handleCloseClick()\"></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\" #contentContainer></div>\n      <div class=\"ax-popup-footer-container\"></div>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-outline-style:solid;--tw-font-weight:initial;--tw-leading:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer components{.ax-popup{border-style:var(--tw-border-style);background-color:var(--color-lightest);width:auto;color:var(--color-on-lightest);border-width:1px;border-color:var(--color-border-lightest);padding:calc(var(--spacing,.25rem) * 0);outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000;flex-direction:column;margin-inline:auto;display:flex;overflow:hidden;border-radius:var(--radius-default,var(--ax-sys-border-radius))!important}.ax-popup:where(.dark,.dark *){background-color:var(--color-darkest);color:var(--color-on-darkest);border-color:var(--color-border-darkest)}.ax-popup{max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));--ax-shadow:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--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 #0000),var(--ax-ring-shadow,0 0 #0000),var(--ax-shadow)}.ax-popup .ax-popup-header-container{background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)))}.ax-popup .ax-popup-header-container:where(.dark,.dark *){background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)))}.ax-popup .ax-popup-header-container .ax-popup-header{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-lighter,rgba(var(--ax-sys-color-border-lighter-surface)));padding:calc(var(--spacing,.25rem) * 3);justify-content:space-between;align-items:center;display:flex}.ax-popup .ax-popup-header-container .ax-popup-header:where(.dark,.dark *){border-color:var(--color-border-dark,rgba(var(--ax-sys-color-border-dark-surface)))}.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}@media(min-width:48rem){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));--tw-leading:calc(var(--spacing,.25rem) * 7);line-height:calc(var(--spacing,.25rem) * 7)}}.ax-popup .ax-popup-wrapper{display:contents}.ax-popup .ax-popup-header-container.ax-popup-draggable{cursor:move}.ax-popup .ax-popup.ax-popup-dragging{-webkit-user-select:none;user-select:none}.ax-popup ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border-lighter,rgba(var(--ax-sys-color-border-lighter-surface)));background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)));padding:calc(var(--spacing,.25rem) * 3);--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);justify-content:space-between;align-items:center;display:flex}.ax-popup ax-footer:where(.dark,.dark *){border-color:var(--color-border-dark,rgba(var(--ax-sys-color-border-dark-surface)));background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)))}.ax-popup:focus{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000}.ax-popup:focus-visible{border-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))}.ax-popup .ax-popup-main-container{flex-direction:column;flex:1;display:flex;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));flex:1;overflow:auto}.ax-popup .ax-popup-main-container .ax-popup-body-container:where(.dark,.dark *){background-color:var(--color-darkest,rgba(var(--ax-sys-color-darkest-surface)))}.ax-popup .ax-popup-main-container .ax-popup-footer-container{background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)))}.ax-popup .ax-popup-main-container .ax-popup-footer-container:where(.dark,.dark *){background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)))}.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{height:fit-content;width:93vw!important;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}:is(.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.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}}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { contentContainerRef: [{
                 type: ViewChild,
                 args: ['contentContainer', { read: ViewContainerRef, static: true }]

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

@@ -65,11 +65,11 @@ class AXProgressBarComponent extends MXColorComponent {
         return `${this['color']}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXProgressBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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" } }, providers: [{ provide: AXComponent, useExisting: AXProgressBarComponent }], 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: ["@layer components{ax-progress-bar{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);width:100%;display:flex;position:relative}ax-progress-bar .ax-progress{border-radius:var(--radius-lg,.5rem);background-color:#0003;width:100%;overflow:hidden}@supports (color:color-mix(in lab,red,red)){ax-progress-bar .ax-progress{background-color:color-mix(in oklab,var(--color-black,#000) 20%,transparent)}}ax-progress-bar .ax-progress:where(.dark,.dark *){background-color:#fff3}@supports (color:color-mix(in lab,red,red)){ax-progress-bar .ax-progress:where(.dark,.dark *){background-color:color-mix(in oklab,var(--color-white,#fff) 20%,transparent)}}ax-progress-bar .ax-progress .ax-progress-bar{--tw-border-style:solid;background-color:var(--ax-comp-bg);height:100%;transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));border-style:solid}ax-progress-bar .ax-indeterminate-progress{transform-origin:0;width:100%;height:100%;animation:1s linear infinite indeterminateAnimation}ax-progress-bar .ax-query-progress{transform-origin:0;width:100%;height:100%;animation:1s linear infinite queryAnimation}ax-progress-bar .ax-buffer-progress{transform-origin:0;background-size:100%;width:100%;height:100%;animation:5s linear infinite bufferAnimation;background-color:#0000!important;background-image:repeating-linear-gradient(to right,transparent,transparent .5rem,var(--ax-comp-bg) .5rem,var(--ax-comp-bg) 1rem)!important}}@keyframes indeterminateAnimation{0%{transform:translate(0)scaleX(0)}40%{transform:translate(0)scaleX(.4)}to{transform:translate(100%)scaleX(.5)}}@keyframes queryAnimation{0%{transform:translate(100%)scaleX(0)}40%{transform:translate(0)scaleX(.7)}to{transform:translate(-50%)scaleX(.5)}}@keyframes bufferAnimation{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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" } }, providers: [{ provide: AXComponent, useExisting: AXProgressBarComponent }], 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: ["@layer components{ax-progress-bar{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);width:100%;display:flex;position:relative}ax-progress-bar .ax-progress{border-radius:var(--radius-lg,.5rem);background-color:#0003;width:100%;overflow:hidden}@supports (color:color-mix(in lab,red,red)){ax-progress-bar .ax-progress{background-color:color-mix(in oklab,var(--color-black,#000) 20%,transparent)}}ax-progress-bar .ax-progress:where(.dark,.dark *){background-color:#fff3}@supports (color:color-mix(in lab,red,red)){ax-progress-bar .ax-progress:where(.dark,.dark *){background-color:color-mix(in oklab,var(--color-white,#fff) 20%,transparent)}}ax-progress-bar .ax-progress .ax-progress-bar{--tw-border-style:solid;background-color:var(--ax-comp-bg);height:100%;transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));border-style:solid}ax-progress-bar .ax-indeterminate-progress{transform-origin:0;width:100%;height:100%;animation:1s linear infinite indeterminateAnimation}ax-progress-bar .ax-query-progress{transform-origin:0;width:100%;height:100%;animation:1s linear infinite queryAnimation}ax-progress-bar .ax-buffer-progress{transform-origin:0;background-size:100%;width:100%;height:100%;animation:5s linear infinite bufferAnimation;background-color:#0000!important;background-image:repeating-linear-gradient(to right,transparent,transparent .5rem,var(--ax-comp-bg) .5rem,var(--ax-comp-bg) 1rem)!important}}@keyframes indeterminateAnimation{0%{transform:translate(0)scaleX(0)}40%{transform:translate(0)scaleX(.4)}to{transform:translate(100%)scaleX(.5)}}@keyframes queryAnimation{0%{transform:translate(100%)scaleX(0)}40%{transform:translate(0)scaleX(.7)}to{transform:translate(-50%)scaleX(.5)}}@keyframes bufferAnimation{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-progress-bar', inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXProgressBarComponent }], 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: ["@layer components{ax-progress-bar{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);width:100%;display:flex;position:relative}ax-progress-bar .ax-progress{border-radius:var(--radius-lg,.5rem);background-color:#0003;width:100%;overflow:hidden}@supports (color:color-mix(in lab,red,red)){ax-progress-bar .ax-progress{background-color:color-mix(in oklab,var(--color-black,#000) 20%,transparent)}}ax-progress-bar .ax-progress:where(.dark,.dark *){background-color:#fff3}@supports (color:color-mix(in lab,red,red)){ax-progress-bar .ax-progress:where(.dark,.dark *){background-color:color-mix(in oklab,var(--color-white,#fff) 20%,transparent)}}ax-progress-bar .ax-progress .ax-progress-bar{--tw-border-style:solid;background-color:var(--ax-comp-bg);height:100%;transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));border-style:solid}ax-progress-bar .ax-indeterminate-progress{transform-origin:0;width:100%;height:100%;animation:1s linear infinite indeterminateAnimation}ax-progress-bar .ax-query-progress{transform-origin:0;width:100%;height:100%;animation:1s linear infinite queryAnimation}ax-progress-bar .ax-buffer-progress{transform-origin:0;background-size:100%;width:100%;height:100%;animation:5s linear infinite bufferAnimation;background-color:#0000!important;background-image:repeating-linear-gradient(to right,transparent,transparent .5rem,var(--ax-comp-bg) .5rem,var(--ax-comp-bg) 1rem)!important}}@keyframes indeterminateAnimation{0%{transform:translate(0)scaleX(0)}40%{transform:translate(0)scaleX(.4)}to{transform:translate(100%)scaleX(.5)}}@keyframes queryAnimation{0%{transform:translate(100%)scaleX(0)}40%{transform:translate(0)scaleX(.7)}to{transform:translate(-50%)scaleX(.5)}}@keyframes bufferAnimation{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-progress-bar', inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXProgressBarComponent }], 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: ["@layer components{ax-progress-bar{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);width:100%;display:flex;position:relative}ax-progress-bar .ax-progress{border-radius:var(--radius-lg,.5rem);background-color:#0003;width:100%;overflow:hidden}@supports (color:color-mix(in lab,red,red)){ax-progress-bar .ax-progress{background-color:color-mix(in oklab,var(--color-black,#000) 20%,transparent)}}ax-progress-bar .ax-progress:where(.dark,.dark *){background-color:#fff3}@supports (color:color-mix(in lab,red,red)){ax-progress-bar .ax-progress:where(.dark,.dark *){background-color:color-mix(in oklab,var(--color-white,#fff) 20%,transparent)}}ax-progress-bar .ax-progress .ax-progress-bar{--tw-border-style:solid;background-color:var(--ax-comp-bg);height:100%;transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));border-style:solid}ax-progress-bar .ax-indeterminate-progress{transform-origin:0;width:100%;height:100%;animation:1s linear infinite indeterminateAnimation}ax-progress-bar .ax-query-progress{transform-origin:0;width:100%;height:100%;animation:1s linear infinite queryAnimation}ax-progress-bar .ax-buffer-progress{transform-origin:0;background-size:100%;width:100%;height:100%;animation:5s linear infinite bufferAnimation;background-color:#0000!important;background-image:repeating-linear-gradient(to right,transparent,transparent .5rem,var(--ax-comp-bg) .5rem,var(--ax-comp-bg) 1rem)!important}}@keyframes indeterminateAnimation{0%{transform:translate(0)scaleX(0)}40%{transform:translate(0)scaleX(.4)}to{transform:translate(100%)scaleX(.5)}}@keyframes queryAnimation{0%{transform:translate(100%)scaleX(0)}40%{transform:translate(0)scaleX(.7)}to{transform:translate(-50%)scaleX(.5)}}@keyframes bufferAnimation{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { circle: [{
                 type: ViewChild,
                 args: ['c']

package/fesm2022/acorex-components-qrcode.mjs

@@ -90,7 +90,7 @@ class AXQrcodeComponent {
                 multi: true,
             },
             { provide: AXComponent, useExisting: 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: ["@layer components{.qrcode{justify-content:center;align-items:center;display:flex;position:relative}.qrcode .logo-container{justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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: ["@layer components{.qrcode{justify-content:center;align-items:center;display:flex;position:relative}.qrcode .logo-container{justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXQrcodeComponent, decorators: [{
             type: Component,
@@ -102,7 +102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                             multi: true,
                         },
                         { provide: AXComponent, useExisting: AXQrcodeComponent },
-                    ], 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: ["@layer components{.qrcode{justify-content:center;align-items:center;display:flex;position:relative}.qrcode .logo-container{justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], 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: ["@layer components{.qrcode{justify-content:center;align-items:center;display:flex;position:relative}.qrcode .logo-container{justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], outputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputType", required: false }] }], canvas: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], svg: [{ type: i0.ViewChild, args: ['svg', { isSignal: true }] }] } });
 
 class AXQrcodeModule {