@acorex/components 19.13.0-next.0 → 19.13.0-next.10

package/fesm2022/acorex-components-image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-image.mjs","sources":["../../../../libs/components/image/src/lib/image.component.ts","../../../../libs/components/image/src/lib/image.component.html","../../../../libs/components/image/src/lib/image.module.ts","../../../../libs/components/image/src/acorex-components-image.ts"],"sourcesContent":["import { AXHtmlEvent, MXBaseComponent } from '@acorex/components/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';\n\n/**\n * Displays an image with customizable settings.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-image',\n  templateUrl: './image.component.html',\n  styleUrls: ['./image.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: 'ax-image', useValue: AXImageComponent }],\n})\nexport class AXImageComponent extends MXBaseComponent implements OnInit {\n  /**\n   * Specifies when the image overlay should be shown.\n   *\n   * @defaultValue 'hover'\n   */\n  @Input()\n  overlayMode: 'always' | 'hover' = 'hover';\n\n  /**\n   * The URL of the image to be displayed.\n   *\n   * @defaultValue null\n   */\n  @Input()\n  src?: string | null;\n\n  /**\n   * The alternative text for the image, for accessibility purposes.\n   *\n   * @defaultValue null\n   */\n  @Input()\n  alt?: string | null;\n\n  /**\n   * Priority for image loading.\n   *\n   * @defaultValue 'auto'\n   */\n  @Input()\n  priority: 'low' | 'auto' | 'high' = 'auto';\n\n  /**\n   * Indicates if the image should be loaded lazily.\n   *\n   * @defaultValue false\n   */\n  @Input()\n  lazy: boolean;\n\n  /**\n   * Emits an event when the image has successfully loaded.\n   *\n   * @event\n   */\n  @Output()\n  onLoad: EventEmitter<AXHtmlEvent> = new EventEmitter<AXHtmlEvent>();\n\n  /**\n   * Emits an event when there is an error loading the image.\n   *\n   * @event\n   */\n  @Output()\n  onError: EventEmitter<AXHtmlEvent<ErrorEvent>> = new EventEmitter<AXHtmlEvent<ErrorEvent>>();\n\n  /**\n   *  @ignore\n   */\n  protected _hasError = false;\n\n  /**\n   *  @ignore\n   */\n  protected _isLoaded = false;\n\n  /**\n   *  @ignore\n   */\n  protected _isLoading = false;\n\n  /**\n   *  @ignore\n   */\n  override ngOnInit(): void {\n    super.ngOnInit();\n    this._isLoading = this.src != null;\n  }\n\n  /**\n   *  @ignore\n   */\n  _handleLoadImage(e: Event) {\n    this._isLoaded = true;\n    this._hasError = false;\n    this._isLoading = false;\n    this.onLoad.emit({\n      component: this,\n      htmlElement: this.getHostElement(),\n      isUserInteraction: false,\n      nativeEvent: e,\n    });\n  }\n\n  /**\n   *  @ignore\n   */\n  _handleErrorImage(e: ErrorEvent) {\n    this._hasError = true;\n    this._isLoaded = false;\n    this._isLoading = false;\n    this.onError.emit({\n      component: this,\n      htmlElement: this.getHostElement(),\n      isUserInteraction: false,\n      nativeEvent: e,\n    });\n  }\n\n  /**\n   *  @ignore\n   */\n  @HostBinding('class')\n  get __hostClass(): string[] {\n    return [`ax-overlay-${this.overlayMode}`, `${this._hasError || !this.src ? 'ax-state-empty' : ''}`, `${this._isLoading ? 'ax-state-loading' : ''}`];\n  }\n}\n","@if(src){\n<img class=\"ax-state-hidden\" [class.ax-state-loaded]=\"_isLoaded\" [src]=\"src\" [alt]=\"alt\" [attr.fetchpriority]=\"priority\"\n  [attr.loading]=\"lazy ? 'lazy' : 'eager'\" (load)=\"_handleLoadImage($event)\" (error)=\"_handleErrorImage($event)\" />\n}\n<ng-content select=\"ax-overlay\"></ng-content>\n@if(!src || _hasError){\n<ng-content select=\"ax-placeholder, ng-content\"></ng-content>\n}\n@if(_isLoading){\n<ng-content select=\"ax-loading, ax-loading-spinner\"></ng-content>\n}","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXImageComponent } from './image.component';\n\n@NgModule({\n  imports: [CommonModule, AXImageComponent],\n  exports: [AXImageComponent],\n  providers: [],\n})\nexport class AXImageModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-image.mjs","sources":["../../../../libs/components/image/src/lib/image.component.ts","../../../../libs/components/image/src/lib/image.component.html","../../../../libs/components/image/src/lib/image.module.ts","../../../../libs/components/image/src/acorex-components-image.ts"],"sourcesContent":["import { AXHtmlEvent, MXBaseComponent } from '@acorex/components/common';\nimport { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  HostBinding,\n  input,\n  Input,\n  OnInit,\n  Output,\n  ViewEncapsulation,\n} from '@angular/core';\n\n/**\n * Displays an image with customizable settings.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-image',\n  templateUrl: './image.component.html',\n  styleUrls: ['./image.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: 'ax-image', useValue: AXImageComponent }],\n  imports: [CommonModule],\n})\nexport class AXImageComponent extends MXBaseComponent implements OnInit {\n  width = input<number>(null);\n  height = input<number>(null);\n\n  /**\n   * Specifies when the image overlay should be shown.\n   *\n   * @defaultValue 'hover'\n   */\n  @Input()\n  overlayMode: 'always' | 'hover' = 'hover';\n\n  /**\n   * The URL of the image to be displayed.\n   *\n   * @defaultValue null\n   */\n  @Input()\n  src?: string | null;\n\n  /**\n   * The alternative text for the image, for accessibility purposes.\n   *\n   * @defaultValue null\n   */\n  @Input()\n  alt?: string | null;\n\n  /**\n   * Priority for image loading.\n   *\n   * @defaultValue 'auto'\n   */\n  @Input()\n  priority: 'low' | 'auto' | 'high' = 'auto';\n\n  /**\n   * Indicates if the image should be loaded lazily.\n   *\n   * @defaultValue false\n   */\n  @Input()\n  lazy: boolean;\n\n  /**\n   * Emits an event when the image has successfully loaded.\n   *\n   * @event\n   */\n  @Output()\n  onLoad: EventEmitter<AXHtmlEvent> = new EventEmitter<AXHtmlEvent>();\n\n  /**\n   * Emits an event when there is an error loading the image.\n   *\n   * @event\n   */\n  @Output()\n  onError: EventEmitter<AXHtmlEvent<ErrorEvent>> = new EventEmitter<AXHtmlEvent<ErrorEvent>>();\n\n  /**\n   *  @ignore\n   */\n  protected _hasError = false;\n\n  /**\n   *  @ignore\n   */\n  protected _isLoaded = false;\n\n  /**\n   *  @ignore\n   */\n  protected _isLoading = false;\n\n  /**\n   *  @ignore\n   */\n  override ngOnInit(): void {\n    super.ngOnInit();\n    this._isLoading = this.src != null;\n  }\n\n  /**\n   *  @ignore\n   */\n  _handleLoadImage(e: Event) {\n    this._isLoaded = true;\n    this._hasError = false;\n    this._isLoading = false;\n    this.onLoad.emit({\n      component: this,\n      htmlElement: this.getHostElement(),\n      isUserInteraction: false,\n      nativeEvent: e,\n    });\n  }\n\n  /**\n   *  @ignore\n   */\n  _handleErrorImage(e: ErrorEvent) {\n    this._hasError = true;\n    this._isLoaded = false;\n    this._isLoading = false;\n    this.onError.emit({\n      component: this,\n      htmlElement: this.getHostElement(),\n      isUserInteraction: false,\n      nativeEvent: e,\n    });\n  }\n\n  /**\n   *  @ignore\n   */\n  @HostBinding('class')\n  get __hostClass(): string[] {\n    return [\n      `ax-overlay-${this.overlayMode}`,\n      `${this._hasError || !this.src ? 'ax-state-empty' : ''}`,\n      `${this._isLoading ? 'ax-state-loading' : ''}`,\n    ];\n  }\n\n  @HostBinding('style')\n  private get __hostStyle(): string {\n    return `width: ${this.width()}px; height: ${this.height()}px`;\n  }\n}\n","@if (src) {\n  <img\n    class=\"ax-state-hidden\"\n    [class.ax-state-loaded]=\"_isLoaded\"\n    [src]=\"src\"\n    [alt]=\"alt\"\n    [attr.fetchpriority]=\"priority\"\n    [attr.loading]=\"lazy ? 'lazy' : 'eager'\"\n    (load)=\"_handleLoadImage($event)\"\n    (error)=\"_handleErrorImage($event)\"\n  />\n}\n<ng-content select=\"ax-overlay\"></ng-content>\n@if (!src || _hasError) {\n  <ng-content select=\"ax-placeholder, ng-content\"></ng-content>\n}\n@if (_isLoading) {\n  <ng-content select=\"ax-loading, ax-loading-spinner\"></ng-content>\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXImageComponent } from './image.component';\n\n@NgModule({\n  imports: [CommonModule, AXImageComponent],\n  exports: [AXImageComponent],\n  providers: [],\n})\nexport class AXImageModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-json-viewer.mjs

@@ -32,10 +32,10 @@ class JsonViewerComponent {
     isBoolean(value) {
         return typeof value === 'boolean';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: JsonViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: JsonViewerComponent, isStandalone: true, selector: "ax-json-viewer", inputs: { json: { classPropertyName: "json", publicName: "json", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"Recursion; context: { list: convertedData() }\"></ng-container>\n\n<ng-template #Recursion let-list=\"list\">\n  @for (item of list; track $index) {\n    @if (isArray(item.value)) {\n      <details>\n        <summary>\"{{ item.key }}\"</summary>\n        <div class=\"ax-indent-details\">\n          <ng-container *ngTemplateOutlet=\"Recursion; context: { list: item.value }\"></ng-container>\n        </div>\n      </details>\n    } @else {\n      <div class=\"ax-flex-container\">\n        <p class=\"ax-nowrap ax-margin\">\"{{ item.key }}\"<span>:</span></p>\n\n        <p\n          class=\"ax-nowrap ax-indent {{\n            isNumber(item.value) || isBoolean(item.value) ? 'ax-number-color' : 'ax-string-color'\n          }}\"\n        >\n          @if (isNumber(item.value) || isBoolean(item.value)) {\n            {{ item.value }}\n          } @else {\n            ''{{ item.value }}''\n          }\n        </p>\n      </div>\n    }\n  }\n</ng-template>\n", styles: ["ax-json-viewer{--ax-comp-json-viewer-string-color-light: rgb(217, 57, 62);--ax-comp-json-viewer-string-color-dark: rgba(92, 213, 251, 255);--ax-comp-json-viewer-number-color-dark: rgba(var(--ax-sys-color-on-lightest-surface));--ax-comp-json-viewer-number-color-light: rgba(var(--ax-sys-color-on-lightest-surface));--ax-comp-json-viewer-key-color-dark: rgba(124, 172, 248, 255);--ax-comp-json-viewer-key-color-light: rgba(var(--ax-sys-color-on-lightest-surface))}ax-json-viewer{padding:1.5rem;overflow-x:auto;display:block}ax-json-viewer .ax-number-color{color:var(--ax-comp-json-viewer-number-color-light)}ax-json-viewer .ax-number-color input::-webkit-outer-spin-button,ax-json-viewer .ax-number-color input::-webkit-inner-spin-button{-webkit-appearance:none}ax-json-viewer .ax-string-color{color:var(--ax-comp-json-viewer-string-color-light)}ax-json-viewer .ax-indent{margin:0;padding:0;height:fit-content}ax-json-viewer .ax-margin{margin-inline-end:.3rem}ax-json-viewer .ax-indent-details{margin:0 2rem;height:fit-content}ax-json-viewer .ax-flex-container{display:flex;justify-content:flex-start;align-items:center;gap:.25rem}ax-json-viewer summary,ax-json-viewer p{color:var(--ax-comp-json-viewer-key-color-light)}ax-json-viewer summary::marker,ax-json-viewer span{color:rgb(var(--ax-sys-body-text-color))}ax-json-viewer details{margin-inline-start:-1rem}ax-json-viewer .ax-nowrap{white-space:nowrap}.ax-dark ax-json-viewer summary,.ax-dark ax-json-viewer p{color:var(--ax-comp-json-viewer-key-color-dark)}.ax-dark ax-json-viewer .ax-string-color{color:var(--ax-comp-json-viewer-string-color-dark)}.ax-dark ax-json-viewer .ax-number-color{color:var(--ax-comp-json-viewer-number-color-dark)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: JsonViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: JsonViewerComponent, isStandalone: true, selector: "ax-json-viewer", inputs: { json: { classPropertyName: "json", publicName: "json", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"Recursion; context: { list: convertedData() }\"></ng-container>\n\n<ng-template #Recursion let-list=\"list\">\n  @for (item of list; track $index) {\n    @if (isArray(item.value)) {\n      <details>\n        <summary>\"{{ item.key }}\"</summary>\n        <div class=\"ax-indent-details\">\n          <ng-container *ngTemplateOutlet=\"Recursion; context: { list: item.value }\"></ng-container>\n        </div>\n      </details>\n    } @else {\n      <div class=\"ax-flex-container\">\n        <p class=\"ax-nowrap ax-margin\">\"{{ item.key }}\"<span>:</span></p>\n\n        <p\n          class=\"ax-nowrap ax-indent {{\n            isNumber(item.value) || isBoolean(item.value) ? 'ax-number-color' : 'ax-string-color'\n          }}\"\n        >\n          @if (isNumber(item.value) || isBoolean(item.value)) {\n            {{ item.value }}\n          } @else {\n            ''{{ item.value }}''\n          }\n        </p>\n      </div>\n    }\n  }\n</ng-template>\n", styles: ["ax-json-viewer{--ax-comp-json-viewer-string-color-light: rgb(217, 57, 62);--ax-comp-json-viewer-string-color-dark: rgba(92, 213, 251, 255);--ax-comp-json-viewer-number-color-dark: rgba(var(--ax-sys-color-on-lightest-surface));--ax-comp-json-viewer-number-color-light: rgba(var(--ax-sys-color-on-lightest-surface));--ax-comp-json-viewer-key-color-dark: rgba(124, 172, 248, 255);--ax-comp-json-viewer-key-color-light: rgba(var(--ax-sys-color-on-lightest-surface))}ax-json-viewer{padding:1.5rem;overflow-x:auto;display:block}ax-json-viewer .ax-number-color{color:var(--ax-comp-json-viewer-number-color-light)}ax-json-viewer .ax-number-color input::-webkit-outer-spin-button,ax-json-viewer .ax-number-color input::-webkit-inner-spin-button{-webkit-appearance:none}ax-json-viewer .ax-string-color{color:var(--ax-comp-json-viewer-string-color-light)}ax-json-viewer .ax-indent{margin:0;padding:0;height:fit-content}ax-json-viewer .ax-margin{margin-inline-end:.3rem}ax-json-viewer .ax-indent-details{margin:0 2rem;height:fit-content}ax-json-viewer .ax-flex-container{display:flex;justify-content:flex-start;align-items:center;gap:.25rem}ax-json-viewer summary,ax-json-viewer p{color:var(--ax-comp-json-viewer-key-color-light)}ax-json-viewer summary::marker,ax-json-viewer span{color:rgb(var(--ax-sys-body-text-color))}ax-json-viewer details{margin-inline-start:-1rem}ax-json-viewer .ax-nowrap{white-space:nowrap}.ax-dark ax-json-viewer summary,.ax-dark ax-json-viewer p{color:var(--ax-comp-json-viewer-key-color-dark)}.ax-dark ax-json-viewer .ax-string-color{color:var(--ax-comp-json-viewer-string-color-dark)}.ax-dark ax-json-viewer .ax-number-color{color:var(--ax-comp-json-viewer-number-color-dark)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: JsonViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: JsonViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-json-viewer', encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet], template: "<ng-container *ngTemplateOutlet=\"Recursion; context: { list: convertedData() }\"></ng-container>\n\n<ng-template #Recursion let-list=\"list\">\n  @for (item of list; track $index) {\n    @if (isArray(item.value)) {\n      <details>\n        <summary>\"{{ item.key }}\"</summary>\n        <div class=\"ax-indent-details\">\n          <ng-container *ngTemplateOutlet=\"Recursion; context: { list: item.value }\"></ng-container>\n        </div>\n      </details>\n    } @else {\n      <div class=\"ax-flex-container\">\n        <p class=\"ax-nowrap ax-margin\">\"{{ item.key }}\"<span>:</span></p>\n\n        <p\n          class=\"ax-nowrap ax-indent {{\n            isNumber(item.value) || isBoolean(item.value) ? 'ax-number-color' : 'ax-string-color'\n          }}\"\n        >\n          @if (isNumber(item.value) || isBoolean(item.value)) {\n            {{ item.value }}\n          } @else {\n            ''{{ item.value }}''\n          }\n        </p>\n      </div>\n    }\n  }\n</ng-template>\n", styles: ["ax-json-viewer{--ax-comp-json-viewer-string-color-light: rgb(217, 57, 62);--ax-comp-json-viewer-string-color-dark: rgba(92, 213, 251, 255);--ax-comp-json-viewer-number-color-dark: rgba(var(--ax-sys-color-on-lightest-surface));--ax-comp-json-viewer-number-color-light: rgba(var(--ax-sys-color-on-lightest-surface));--ax-comp-json-viewer-key-color-dark: rgba(124, 172, 248, 255);--ax-comp-json-viewer-key-color-light: rgba(var(--ax-sys-color-on-lightest-surface))}ax-json-viewer{padding:1.5rem;overflow-x:auto;display:block}ax-json-viewer .ax-number-color{color:var(--ax-comp-json-viewer-number-color-light)}ax-json-viewer .ax-number-color input::-webkit-outer-spin-button,ax-json-viewer .ax-number-color input::-webkit-inner-spin-button{-webkit-appearance:none}ax-json-viewer .ax-string-color{color:var(--ax-comp-json-viewer-string-color-light)}ax-json-viewer .ax-indent{margin:0;padding:0;height:fit-content}ax-json-viewer .ax-margin{margin-inline-end:.3rem}ax-json-viewer .ax-indent-details{margin:0 2rem;height:fit-content}ax-json-viewer .ax-flex-container{display:flex;justify-content:flex-start;align-items:center;gap:.25rem}ax-json-viewer summary,ax-json-viewer p{color:var(--ax-comp-json-viewer-key-color-light)}ax-json-viewer summary::marker,ax-json-viewer span{color:rgb(var(--ax-sys-body-text-color))}ax-json-viewer details{margin-inline-start:-1rem}ax-json-viewer .ax-nowrap{white-space:nowrap}.ax-dark ax-json-viewer summary,.ax-dark ax-json-viewer p{color:var(--ax-comp-json-viewer-key-color-dark)}.ax-dark ax-json-viewer .ax-string-color{color:var(--ax-comp-json-viewer-string-color-dark)}.ax-dark ax-json-viewer .ax-number-color{color:var(--ax-comp-json-viewer-number-color-dark)}\n"] }]
         }] });
@@ -43,11 +43,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 const COMPONENT = [JsonViewerComponent];
 const MODULES = [AXTextBoxModule, FormsModule, CommonModule];
 class AXJsonViewerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXJsonViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: AXJsonViewerModule, imports: [AXTextBoxModule, FormsModule, CommonModule, JsonViewerComponent], exports: [JsonViewerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXJsonViewerModule, imports: [MODULES] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXJsonViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: AXJsonViewerModule, imports: [AXTextBoxModule, FormsModule, CommonModule, JsonViewerComponent], exports: [JsonViewerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXJsonViewerModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXJsonViewerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXJsonViewerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

package/fesm2022/acorex-components-kbd.mjs

@@ -10,29 +10,29 @@ class AXKBDItemComponent {
     capitalizeFirstLetter(text) {
         return text.charAt(0).toUpperCase() + text.slice(1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXKBDItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXKBDItemComponent, isStandalone: true, selector: "ax-kbd-item", inputs: { keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (typeof keys() === 'string') {\n  <kbd>{{ keys() }}</kbd>\n} @else {\n  @for (key of keys(); track $index; let last = $last) {\n    @if (!last && modifierKeys().includes(key.toLocaleLowerCase())) {\n      <kbd>{{ capitalizeFirstLetter(key) }}</kbd>\n      <span>+</span>\n    }\n  }\n  @for (key of keys(); track $index; let last = $last) {\n    @if (last || !modifierKeys().includes(key.toLocaleLowerCase())) {\n      <kbd>{{ key.toLocaleUpperCase() }}</kbd>\n    }\n  }\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXKBDItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: AXKBDItemComponent, isStandalone: true, selector: "ax-kbd-item", inputs: { keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (typeof keys() === 'string') {\n  <kbd>{{ keys() }}</kbd>\n} @else {\n  @for (key of keys(); track $index; let last = $last) {\n    @if (!last && modifierKeys().includes(key.toLocaleLowerCase())) {\n      <kbd>{{ capitalizeFirstLetter(key) }}</kbd>\n      <span>+</span>\n    }\n  }\n  @for (key of keys(); track $index; let last = $last) {\n    @if (last || !modifierKeys().includes(key.toLocaleLowerCase())) {\n      <kbd>{{ key.toLocaleUpperCase() }}</kbd>\n    }\n  }\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXKBDItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXKBDItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-kbd-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (typeof keys() === 'string') {\n  <kbd>{{ keys() }}</kbd>\n} @else {\n  @for (key of keys(); track $index; let last = $last) {\n    @if (!last && modifierKeys().includes(key.toLocaleLowerCase())) {\n      <kbd>{{ capitalizeFirstLetter(key) }}</kbd>\n      <span>+</span>\n    }\n  }\n  @for (key of keys(); track $index; let last = $last) {\n    @if (last || !modifierKeys().includes(key.toLocaleLowerCase())) {\n      <kbd>{{ key.toLocaleUpperCase() }}</kbd>\n    }\n  }\n}\n" }]
         }] });
 
 class AXKBDComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXKBDComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AXKBDComponent, isStandalone: true, selector: "ax-kbd", ngImport: i0, template: "<ng-content select=\"ax-kbd-item\"></ng-content>\n", styles: ["ax-kbd{display:flex;-webkit-user-select:none;user-select:none;line-height:normal;gap:var(--ax-comp-kbd-gap, 1rem)}ax-kbd ax-kbd-item{display:flex;align-items:center;gap:var(--ax-comp-kbd-item-gap, .25rem)}ax-kbd ax-kbd-item kbd{padding-inline:.5rem;border-radius:var(--ax-comp-kbd-item-border-radius, var(--ax-sys-border-radius));background-color:rgba(var(--ax-comp-kbd-item-bg-color, var(--ax-sys-color-light-surface)));border-left:1px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)));border-bottom:4px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)))}ax-kbd ax-kbd-item kbd:active{border-bottom-width:1px}ax-kbd ax-kbd-item span{line-height:1;padding-bottom:4px}.ax-dark ax-kbd{--ax-comp-kbd-item-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-kbd-item-border-color: var(--ax-sys-color-light-surface)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXKBDComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: AXKBDComponent, isStandalone: true, selector: "ax-kbd", ngImport: i0, template: "<ng-content select=\"ax-kbd-item\"></ng-content>\n", styles: ["ax-kbd{display:flex;-webkit-user-select:none;user-select:none;line-height:normal;gap:var(--ax-comp-kbd-gap, 1rem)}ax-kbd ax-kbd-item{display:flex;align-items:center;gap:var(--ax-comp-kbd-item-gap, .25rem)}ax-kbd ax-kbd-item kbd{padding-inline:.5rem;border-radius:var(--ax-comp-kbd-item-border-radius, var(--ax-sys-border-radius));background-color:rgba(var(--ax-comp-kbd-item-bg-color, var(--ax-sys-color-light-surface)));border-left:1px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)));border-bottom:4px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)))}ax-kbd ax-kbd-item kbd:active{border-bottom-width:1px}ax-kbd ax-kbd-item span{line-height:1;padding-bottom:4px}.ax-dark ax-kbd{--ax-comp-kbd-item-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-kbd-item-border-color: var(--ax-sys-color-light-surface)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXKBDComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXKBDComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-kbd', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"ax-kbd-item\"></ng-content>\n", styles: ["ax-kbd{display:flex;-webkit-user-select:none;user-select:none;line-height:normal;gap:var(--ax-comp-kbd-gap, 1rem)}ax-kbd ax-kbd-item{display:flex;align-items:center;gap:var(--ax-comp-kbd-item-gap, .25rem)}ax-kbd ax-kbd-item kbd{padding-inline:.5rem;border-radius:var(--ax-comp-kbd-item-border-radius, var(--ax-sys-border-radius));background-color:rgba(var(--ax-comp-kbd-item-bg-color, var(--ax-sys-color-light-surface)));border-left:1px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)));border-bottom:4px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)))}ax-kbd ax-kbd-item kbd:active{border-bottom-width:1px}ax-kbd ax-kbd-item span{line-height:1;padding-bottom:4px}.ax-dark ax-kbd{--ax-comp-kbd-item-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-kbd-item-border-color: var(--ax-sys-color-light-surface)}\n"] }]
         }] });
 
 class AXKBDModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXKBDModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: AXKBDModule, imports: [CommonModule, AXKBDComponent, AXKBDItemComponent], exports: [AXKBDComponent, AXKBDItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXKBDModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXKBDModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: AXKBDModule, imports: [CommonModule, AXKBDComponent, AXKBDItemComponent], exports: [AXKBDComponent, AXKBDItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXKBDModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXKBDModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXKBDModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXKBDComponent, AXKBDItemComponent],

package/fesm2022/acorex-components-label.mjs

@@ -64,10 +64,10 @@ class AXLabelComponent extends MXBaseComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXLabelComponent, isStandalone: true, selector: "ax-label", inputs: { required: "required", for: "for" }, outputs: { requiredChange: "requiredChange" }, providers: [{ provide: MXBaseComponent, useExisting: AXLabelComponent }], usesInheritance: true, ngImport: i0, template: "<label (click)=\"for?.focus()\" [class.ax-cursor-pointer]=\"for\" [attr.for]=\"for?.getHostElement().id\">\n  <ng-content></ng-content>\n  @if(required || for?.isRequired){\n  <span class=\"ax-state-required\">&nbsp;*</span>\n  }\n</label>", styles: ["ax-label{color:rgb(var(--ax-sys-color-on-lightest-surface))}ax-label label{margin-bottom:.5rem;display:block;cursor:inherit;font-size:.875rem;line-height:1.25rem;font-weight:500}ax-label label .ax-state-required{color:rgba(var(--ax-sys-color-danger-surface))}ax-label.ax-state-error{color:rgba(var(--ax-sys-color-danger-surface))!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: AXLabelComponent, isStandalone: true, selector: "ax-label", inputs: { required: "required", for: "for" }, outputs: { requiredChange: "requiredChange" }, providers: [{ provide: MXBaseComponent, useExisting: AXLabelComponent }], usesInheritance: true, ngImport: i0, template: "<label (click)=\"for?.focus()\" [class.ax-cursor-pointer]=\"for\" [attr.for]=\"for?.getHostElement().id\">\n  <ng-content></ng-content>\n  @if(required || for?.isRequired){\n  <span class=\"ax-state-required\">&nbsp;*</span>\n  }\n</label>", styles: ["ax-label{color:rgb(var(--ax-sys-color-on-lightest-surface))}ax-label label{margin-bottom:.5rem;display:block;cursor:inherit;font-size:.875rem;line-height:1.25rem;font-weight:500}ax-label label .ax-state-required{color:rgba(var(--ax-sys-color-danger-surface))}ax-label.ax-state-error{color:rgba(var(--ax-sys-color-danger-surface))!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: MXBaseComponent, useExisting: AXLabelComponent }], template: "<label (click)=\"for?.focus()\" [class.ax-cursor-pointer]=\"for\" [attr.for]=\"for?.getHostElement().id\">\n  <ng-content></ng-content>\n  @if(required || for?.isRequired){\n  <span class=\"ax-state-required\">&nbsp;*</span>\n  }\n</label>", styles: ["ax-label{color:rgb(var(--ax-sys-color-on-lightest-surface))}ax-label label{margin-bottom:.5rem;display:block;cursor:inherit;font-size:.875rem;line-height:1.25rem;font-weight:500}ax-label label .ax-state-required{color:rgba(var(--ax-sys-color-danger-surface))}ax-label.ax-state-error{color:rgba(var(--ax-sys-color-danger-surface))!important}\n"] }]
         }], propDecorators: { requiredChange: [{
@@ -81,11 +81,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 const COMPONENT = [AXLabelComponent];
 const MODULES = [CommonModule];
 class AXLabelModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: AXLabelModule, imports: [CommonModule, AXLabelComponent], exports: [AXLabelComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLabelModule, imports: [MODULES] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: AXLabelModule, imports: [CommonModule, AXLabelComponent], exports: [AXLabelComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLabelModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLabelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLabelModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

package/fesm2022/acorex-components-list.mjs

@@ -217,8 +217,8 @@ class AXListComponent extends MXSelectionValueComponent {
         const _class = `ax-default ${this.showEmptyTemplate() ? 'ax-state-empty' : ''}`;
         return this.itemTemplate ? '' : _class;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXListComponent, isStandalone: true, selector: "ax-list", inputs: { id: "id", name: "name", disabled: "disabled", readonly: "readonly", valueField: "valueField", textField: "textField", textTemplate: "textTemplate", disabledField: "disabledField", multiple: "multiple", selectionMode: "selectionMode", dataSource: "dataSource", itemHeight: "itemHeight", itemTemplate: "itemTemplate", emptyTemplate: "emptyTemplate", loadingTemplate: "loadingTemplate", checkbox: "checkbox" }, outputs: { onValueChanged: "onValueChanged", disabledChange: "disabledChange", readOnlyChange: "readOnlyChange", onBlur: "onBlur", onFocus: "onFocus", onItemClick: "onItemClick", onScrolledIndexChanged: "onScrolledIndexChanged" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: AXListComponent, isStandalone: true, selector: "ax-list", inputs: { id: "id", name: "name", disabled: "disabled", readonly: "readonly", valueField: "valueField", textField: "textField", textTemplate: "textTemplate", disabledField: "disabledField", multiple: "multiple", selectionMode: "selectionMode", dataSource: "dataSource", itemHeight: "itemHeight", itemTemplate: "itemTemplate", emptyTemplate: "emptyTemplate", loadingTemplate: "loadingTemplate", checkbox: "checkbox" }, outputs: { onValueChanged: "onValueChanged", disabledChange: "disabledChange", readOnlyChange: "readOnlyChange", onBlur: "onBlur", onFocus: "onFocus", onItemClick: "onItemClick", onScrolledIndexChanged: "onScrolledIndexChanged" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
             { provide: AXComponent, useExisting: AXListComponent },
             { provide: AXFocusableComponent, useExisting: AXListComponent },
             { provide: AXValuableComponent, useExisting: AXListComponent },
@@ -236,7 +236,7 @@ class AXListComponent extends MXSelectionValueComponent {
             },
         ], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"list-container\" cdkVirtualScrollingElement>\n  <ng-content select=\"ax-header\"></ng-content>\n  <cdk-virtual-scroll-viewport\n    [itemSize]=\"itemHeightSignal()\"\n    [style.--item-height]=\"itemHeightSignal() + 'px'\"\n    (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\"\n  >\n    <ul>\n      <!--  Item Template  -->\n      <ng-container *cdkVirtualFor=\"let item of listDataSource; let i = index; trackBy: trackByIdx\">\n        <ng-container *ngIf=\"item !== null && item !== undefined; else loadingTpl\">\n          <li\n            [class.ax-state-selected]=\"isItemSelected(item)\"\n            class=\"list-item\"\n            [class.ax-state-disabled]=\"isItemDisabled(item)\"\n            [attr.tabindex]=\"i\"\n            (click)=\"_handleOnItemClick($event, item)\"\n            [attr.data-id]=\"getValue(item)\"\n          >\n            <!--  Custom Item Template  -->\n            <ng-container *ngIf=\"itemTemplate; else defaultItemTpl\">\n              <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: { data: item } }\">\n              </ng-container>\n            </ng-container>\n            <!--  Default Item Template  -->\n            <ng-template #defaultItemTpl>\n              <ng-container *ngIf=\"item !== null && item !== undefined; else loadingTpl\">\n                <div class=\"ax-label-container\">\n                  <input\n                    class=\"ax-checkbox\"\n                    *ngIf=\"multiple && checkbox\"\n                    type=\"checkbox\"\n                    [checked]=\"isItemSelected(item)\"\n                    [disabled]=\"isItemDisabled(item)\"\n                    tabindex=\"0\"\n                  />\n                  <span [class.ax-checkbox-label]=\"multiple && checkbox\">{{ getDisplayText(item) }}</span>\n                </div>\n                <!-- <i class=\"ax-icon ax-icon-check ax-selected-icon\" *ngIf=\"isItemSelected(item) \"></i> -->\n              </ng-container>\n            </ng-template>\n          </li>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </cdk-virtual-scroll-viewport>\n  <ng-content select=\"ax-footer\"></ng-content>\n</div>\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n  <!--  Custom Loading Template  -->\n  <ng-container *ngIf=\"loadingTemplate; else defaultLoadingTpl\">\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\n  </ng-container>\n  <!--  Default Loading Template  -->\n  <ng-template #defaultLoadingTpl>\n    <li>{{ 'loading' | translate | async }}</li>\n  </ng-template>\n</ng-template>\n<!--  Empty Template  -->\n@if (showEmptyTemplate()) {\n  <div class=\"empty-container\">\n    <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n  </div>\n}\n", styles: ["ax-list{--ax-comp-list-item-height: var(--ax-sys-size-base);--ax-comp-list-empty-container-height: var(--ax-sys-size-base)}ax-list{--ax-comp-list-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-list-item-header: var(--ax-sys-color-lighter-surface);--ax-comp-list-item-footer: var(--ax-sys-color-lighter-surface)}ax-list{display:block;height:100%;width:100%;font-size:var(--ax-comp-list-font-size, .875rem);line-height:var(--ax-comp-list-line-height, 1.25rem)}ax-list .list-container{display:flex;height:100%;flex-direction:column}ax-list ax-header{background-color:rgba(var(--ax-comp-list-item-header))}ax-list ax-footer{background-color:rgba(var(--ax-comp-list-item-footer))}ax-list .empty-container{display:flex;height:var(--ax-comp-list-empty-container-height);width:100%;align-items:center;justify-content:center;padding-left:var(--ax-comp-list-empty-container-padding-x, .75rem);padding-right:var(--ax-comp-list-empty-container-padding-x, .75rem)}ax-list .cdk-virtual-scroll-viewport ul li{position:relative;display:flex;height:var(--ax-comp-list-item-height);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:space-between;padding-inline-end:var(--ax-comp-list-item-padding-e, 1rem);padding-inline-start:var(--ax-comp-list-item-padding-s, .75rem);font-size:var(--ax-comp-list-font-size, .875rem);line-height:var(--ax-comp-list-line-height, 1.25rem)}ax-list .cdk-virtual-scroll-viewport ul li:hover{background:rgba(var(--ax-comp-list-item-hover-bg-color, var(--ax-sys-color-surface)))}ax-list .cdk-virtual-scroll-viewport ul li:focus,ax-list .cdk-virtual-scroll-viewport ul li:focus-within,ax-list .cdk-virtual-scroll-viewport ul li:focus-visible{outline-width:var(--ax-comp-list-item-focus-outline-width, 2px);outline-offset:var(--ax-comp-list-item-focus-outline-offset, -4px);outline-color:rgba(var(--ax-comp-list-item-focus-outline-color, var(--ax-sys-color-primary-surface)))}ax-list .cdk-virtual-scroll-viewport ul li .ax-label-container{display:flex;align-items:center}ax-list .cdk-virtual-scroll-viewport ul li .ax-checkbox-label{margin-inline-start:var(--ax-comp-list-checkbox-label-margin-s, .5rem)}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-selected{background-color:rgba(var(--ax-comp-list-item-selected-bg-color))}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-list-item-disabled-opacity, .5)}ax-list.ax-state-empty{height:auto!important}\n"], dependencies: [{ kind: "directive", type: CdkVirtualScrollableElement, selector: "[cdkVirtualScrollingElement]" }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['id', 'name', 'disabled', 'readonly', 'valueField', 'textField', 'textTemplate', 'disabledField', 'multiple', 'selectionMode'], outputs: ['onValueChanged', 'disabledChange', 'readOnlyChange', 'onBlur', 'onFocus'], providers: [
                         { provide: AXComponent, useExisting: AXListComponent },
@@ -294,11 +294,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 const COMPONENT = [AXListComponent];
 const MODULES = [CommonModule, ScrollingModule, AXTranslationModule];
 class AXListModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: AXListModule, imports: [CommonModule, ScrollingModule, AXTranslationModule, AXListComponent], exports: [AXListComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXListModule, imports: [MODULES, COMPONENT] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: AXListModule, imports: [CommonModule, ScrollingModule, AXTranslationModule, AXListComponent], exports: [AXListComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXListModule, imports: [MODULES, COMPONENT] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

package/fesm2022/acorex-components-loading-dialog.mjs

@@ -85,10 +85,10 @@ class AXLoadingDialogComponent extends MXBaseComponent {
         const result = button.autofocus || this.data.buttons.length == 1 || !this.data.buttons.some((c) => c.autofocus);
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingDialogComponent, deps: [{ token: DIALOG_DATA }, { token: i1.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXLoadingDialogComponent, isStandalone: true, selector: "ax-loading-dialog", usesInheritance: true, ngImport: i0, template: "<ax-title>{{ dialogTitle() }}</ax-title>\n\n<ax-progress-bar\n  [mode]=\"data.mode\"\n  [progress]=\"this.progressValue()\"\n  [color]=\"progressColor()\"\n></ax-progress-bar>\n<div class=\"progress-decorators\">\n  <div>{{ progressText() }}</div>\n  <div>{{ progressStatus() }}</div>\n</div>\n<ax-footer>\n  @for (button of data.buttons; track $index) {\n    <ax-button\n      [text]=\"button.text | translate | async\"\n      [tabindex]=\"$index\"\n      [axHotkey]=\"button.hotkey\"\n      [axAutoFocus]=\"_hasAutoFocus(button)\"\n      (onClick)=\"_handleButtonClick(button)\"\n      [look]=\"button.look\"\n      [disabled]=\"button.disabled\"\n      [color]=\"button.color\"\n    >\n      @if (button.loading) {\n        <ax-loading></ax-loading>\n      }\n    </ax-button>\n  }\n</ax-footer>\n", styles: ["ax-loading-dialog{display:flex;flex-direction:column;gap:.5rem;width:33vw;background-color:rgba(var(--ax-sys-color-lightest-surface));padding:1rem;border-radius:var(--ax-sys-border-radius)}ax-loading-dialog ax-title{font-weight:500;font-size:1rem;margin-bottom:.5rem}@media (min-width: 320px) and (max-width: 640px){ax-loading-dialog{width:93vw!important}}@media (min-width: 768px){ax-loading-dialog{width:55vw!important}}@media (min-width: 1280px){ax-loading-dialog{width:30vw!important}}@media (min-width: 1536px){ax-loading-dialog{width:25vw!important}}ax-loading-dialog .progress-decorators{display:flex;justify-content:space-between;font-size:.875rem}ax-loading-dialog ax-footer{justify-content:flex-end;padding-top:.75rem}\n"], dependencies: [{ 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: AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXHotkeyDirective, selector: "[axHotkey]", inputs: ["axHotkey"] }, { kind: "directive", type: AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingDialogComponent, deps: [{ token: DIALOG_DATA }, { token: i1.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: AXLoadingDialogComponent, isStandalone: true, selector: "ax-loading-dialog", usesInheritance: true, ngImport: i0, template: "<ax-title>{{ dialogTitle() }}</ax-title>\n\n<ax-progress-bar\n  [mode]=\"data.mode\"\n  [progress]=\"this.progressValue()\"\n  [color]=\"progressColor()\"\n></ax-progress-bar>\n<div class=\"progress-decorators\">\n  <div>{{ progressText() }}</div>\n  <div>{{ progressStatus() }}</div>\n</div>\n<ax-footer>\n  @for (button of data.buttons; track $index) {\n    <ax-button\n      [text]=\"button.text | translate | async\"\n      [tabindex]=\"$index\"\n      [axHotkey]=\"button.hotkey\"\n      [axAutoFocus]=\"_hasAutoFocus(button)\"\n      (onClick)=\"_handleButtonClick(button)\"\n      [look]=\"button.look\"\n      [disabled]=\"button.disabled\"\n      [color]=\"button.color\"\n    >\n      @if (button.loading) {\n        <ax-loading></ax-loading>\n      }\n    </ax-button>\n  }\n</ax-footer>\n", styles: ["ax-loading-dialog{display:flex;flex-direction:column;gap:.5rem;width:33vw;background-color:rgba(var(--ax-sys-color-lightest-surface));padding:1rem;border-radius:var(--ax-sys-border-radius)}ax-loading-dialog ax-title{font-weight:500;font-size:1rem;margin-bottom:.5rem}@media (min-width: 320px) and (max-width: 640px){ax-loading-dialog{width:93vw!important}}@media (min-width: 768px){ax-loading-dialog{width:55vw!important}}@media (min-width: 1280px){ax-loading-dialog{width:30vw!important}}@media (min-width: 1536px){ax-loading-dialog{width:25vw!important}}ax-loading-dialog .progress-decorators{display:flex;justify-content:space-between;font-size:.875rem}ax-loading-dialog ax-footer{justify-content:flex-end;padding-top:.75rem}\n"], dependencies: [{ 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: AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXHotkeyDirective, selector: "[axHotkey]", inputs: ["axHotkey"] }, { kind: "directive", type: AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-loading-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         AXDecoratorGenericComponent,
@@ -131,20 +131,20 @@ class AXLoadingDialogService {
             setProgressColor: (color) => dialogRef.componentInstance?.setProgressColor(color),
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingDialogService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingDialogService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingDialogService, decorators: [{
             type: Injectable
         }] });
 
 const COMPONENT = [AXLoadingDialogComponent];
 class AXLoadingDialogModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingDialogModule, imports: [AXCommonModule, AXProgressBarModule, AXLoadingModule, AXDecoratorModule, AXButtonModule, AXTranslationModule, AsyncPipe, AXLoadingDialogComponent], exports: [AXLoadingDialogComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingDialogModule, providers: [AXLoadingDialogService], imports: [AXCommonModule, AXProgressBarModule, AXLoadingModule, AXDecoratorModule, AXButtonModule, AXTranslationModule, COMPONENT] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingDialogModule, imports: [AXCommonModule, AXProgressBarModule, AXLoadingModule, AXDecoratorModule, AXButtonModule, AXTranslationModule, AsyncPipe, AXLoadingDialogComponent], exports: [AXLoadingDialogComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingDialogModule, providers: [AXLoadingDialogService], imports: [AXCommonModule, AXProgressBarModule, AXLoadingModule, AXDecoratorModule, AXButtonModule, AXTranslationModule, COMPONENT] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXCommonModule, AXProgressBarModule, AXLoadingModule, AXDecoratorModule, AXButtonModule, AXTranslationModule, AsyncPipe, ...COMPONENT],

package/fesm2022/acorex-components-loading.mjs

@@ -36,15 +36,15 @@ class AXLoadingSpinnerComponent {
     get __hostClass() {
         return `ax-${this.color}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXLoadingSpinnerComponent, isStandalone: true, selector: "ax-loading-spinner", inputs: { text: "text", color: "color", size: "size", stroke: "stroke" }, host: { properties: { "class": "this.__hostClass" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: AXLoadingSpinnerComponent, isStandalone: true, selector: "ax-loading-spinner", inputs: { text: "text", color: "color", size: "size", stroke: "stroke" }, host: { properties: { "class": "this.__hostClass" } }, ngImport: i0, template: `
     <span class="ax-loader" [style.width.px]="size" [style.height.px]="size" [style.border-width.px]="stroke" [style.border-color]="color"></span>
     @if (text) {
       <span> {{ text }} </span>
     }
   `, isInline: true, styles: ["ax-loading-spinner{--ax-comp-loading-spinner-loader-height: 3rem;--ax-comp-loading-spinner-loader-width: 3rem;--ax-comp-loading-spinner-loader-border-width: 6px}ax-loading-spinner.ax-black{--ax-comp-loading-spinner-loader-border-color: 0, 0, 0}ax-loading-spinner.ax-white{--ax-comp-loading-spinner-loader-border-color: 255, 255, 255}ax-loading-spinner.ax-primary{--ax-comp-loading-spinner-loader-border-color: var(--ax-sys-color-primary-surface)}ax-loading-spinner.ax-secondary{--ax-comp-loading-spinner-loader-border-color: var(--ax-sys-color-secondary-surface)}ax-loading-spinner.ax-success{--ax-comp-loading-spinner-loader-border-color: var(--ax-sys-color-success-surface)}ax-loading-spinner.ax-warning{--ax-comp-loading-spinner-loader-border-color: var(--ax-sys-color-warning-surface)}ax-loading-spinner.ax-danger{--ax-comp-loading-spinner-loader-border-color: var(--ax-sys-color-danger-surface)}ax-loading-spinner .ax-loader{margin:auto;border-style:solid;display:inline-block;border-radius:9999px;box-sizing:border-box;animation:rotation .5s linear infinite;border-bottom-color:transparent!important;width:var(--ax-comp-loading-spinner-loader-width);height:var(--ax-comp-loading-spinner-loader-height);border-width:var(--ax-comp-loading-spinner-loader-border-width);border-color:rgba(var(--ax-comp-loading-spinner-loader-border-color))}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-loading-spinner', template: `
     <span class="ax-loader" [style.width.px]="size" [style.height.px]="size" [style.border-width.px]="stroke" [style.border-color]="color"></span>
@@ -134,10 +134,10 @@ class AXLoadingComponent extends MXBaseComponent {
             Object.assign(ref.instance, this.context);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AXLoadingComponent, isStandalone: true, selector: "ax-loading", inputs: { visible: "visible", type: "type", context: "context" }, outputs: { visibleChange: "visibleChange" }, usesInheritance: true, ngImport: i0, template: ` <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttched($event)"></ng-template> `, isInline: true, styles: ["ax-loading{--ax-comp-loading-padding-x: .25rem;--ax-comp-loading-inner-scale: 0;--ax-comp-loading-pulse-scale: 1.05;--ax-comp-loading-animation-duration: 2s;--ax-comp-loading-spinner-gap: .75rem}.ax-loading-overlay-backdrop{--ax-comp-loading-overlay-opacity: .6}.ax-loading-pane{--ax-comp-loading-pane-outline-width: 2px;--ax-comp-loading-pane-outline-offset: 2px}ax-loading{position:relative;padding-left:var(--ax-comp-loading-padding-x);padding-right:var(--ax-comp-loading-padding-x)}ax-loading:before,ax-loading:after{content:\"\";top:50%;width:100%;height:100%;position:absolute;border-radius:9999px;inset-inline-start:50%;transform:translate(-50%,-50%) scale(var(--ax-comp-loading-inner-scale));background-color:transparent;animation:var(--ax-comp-loading-animation-duration) ease-in-out both ax-pulse;animation-iteration-count:infinite}@keyframes ax-pulse{50%{transform:scale3d(var(--ax-comp-loading-pulse-scale),var(--ax-comp-loading-pulse-scale),var(--ax-comp-loading-pulse-scale))}}ax-loading ax-loading-spinner{display:flex;gap:var(--ax-comp-loading-spinner-gap)}.ax-loading-overlay-backdrop{opacity:var(--ax-comp-loading-overlay-opacity);background-color:rgba(var(--ax-comp-loading-overlay-bg-color, var(--ax-sys-color-surface)))}.ax-loading-pane{top:0;bottom:0;inset-inline-end:0px;inset-inline-start:0px;width:100%!important;height:100%!important}.ax-loading-pane .cdk-dialog-container{display:flex!important;align-items:center;justify-content:center}.ax-loading-pane .cdk-dialog-container:focus,.ax-loading-pane .cdk-dialog-container:focus-visible,.ax-loading-pane .cdk-dialog-container:focus-within{outline-style:solid;outline-color:transparent;outline-width:var(--ax-comp-loading-pane-outline-width);outline-offset:var(--ax-comp-loading-pane-outline-offset)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: AXLoadingComponent, isStandalone: true, selector: "ax-loading", inputs: { visible: "visible", type: "type", context: "context" }, outputs: { visibleChange: "visibleChange" }, usesInheritance: true, ngImport: i0, template: ` <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttched($event)"></ng-template> `, isInline: true, styles: ["ax-loading{--ax-comp-loading-padding-x: .25rem;--ax-comp-loading-inner-scale: 0;--ax-comp-loading-pulse-scale: 1.05;--ax-comp-loading-animation-duration: 2s;--ax-comp-loading-spinner-gap: .75rem}.ax-loading-overlay-backdrop{--ax-comp-loading-overlay-opacity: .6}.ax-loading-pane{--ax-comp-loading-pane-outline-width: 2px;--ax-comp-loading-pane-outline-offset: 2px}ax-loading{position:relative;padding-left:var(--ax-comp-loading-padding-x);padding-right:var(--ax-comp-loading-padding-x)}ax-loading:before,ax-loading:after{content:\"\";top:50%;width:100%;height:100%;position:absolute;border-radius:9999px;inset-inline-start:50%;transform:translate(-50%,-50%) scale(var(--ax-comp-loading-inner-scale));background-color:transparent;animation:var(--ax-comp-loading-animation-duration) ease-in-out both ax-pulse;animation-iteration-count:infinite}@keyframes ax-pulse{50%{transform:scale3d(var(--ax-comp-loading-pulse-scale),var(--ax-comp-loading-pulse-scale),var(--ax-comp-loading-pulse-scale))}}ax-loading ax-loading-spinner{display:flex;gap:var(--ax-comp-loading-spinner-gap)}.ax-loading-overlay-backdrop{opacity:var(--ax-comp-loading-overlay-opacity);background-color:rgba(var(--ax-comp-loading-overlay-bg-color, var(--ax-sys-color-surface)))}.ax-loading-pane{top:0;bottom:0;inset-inline-end:0px;inset-inline-start:0px;width:100%!important;height:100%!important}.ax-loading-pane .cdk-dialog-container{display:flex!important;align-items:center;justify-content:center}.ax-loading-pane .cdk-dialog-container:focus,.ax-loading-pane .cdk-dialog-container:focus-visible,.ax-loading-pane .cdk-dialog-container:focus-within{outline-style:solid;outline-color:transparent;outline-width:var(--ax-comp-loading-pane-outline-width);outline-offset:var(--ax-comp-loading-pane-outline-offset)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-loading', template: ` <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttched($event)"></ng-template> `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkPortalOutlet], styles: ["ax-loading{--ax-comp-loading-padding-x: .25rem;--ax-comp-loading-inner-scale: 0;--ax-comp-loading-pulse-scale: 1.05;--ax-comp-loading-animation-duration: 2s;--ax-comp-loading-spinner-gap: .75rem}.ax-loading-overlay-backdrop{--ax-comp-loading-overlay-opacity: .6}.ax-loading-pane{--ax-comp-loading-pane-outline-width: 2px;--ax-comp-loading-pane-outline-offset: 2px}ax-loading{position:relative;padding-left:var(--ax-comp-loading-padding-x);padding-right:var(--ax-comp-loading-padding-x)}ax-loading:before,ax-loading:after{content:\"\";top:50%;width:100%;height:100%;position:absolute;border-radius:9999px;inset-inline-start:50%;transform:translate(-50%,-50%) scale(var(--ax-comp-loading-inner-scale));background-color:transparent;animation:var(--ax-comp-loading-animation-duration) ease-in-out both ax-pulse;animation-iteration-count:infinite}@keyframes ax-pulse{50%{transform:scale3d(var(--ax-comp-loading-pulse-scale),var(--ax-comp-loading-pulse-scale),var(--ax-comp-loading-pulse-scale))}}ax-loading ax-loading-spinner{display:flex;gap:var(--ax-comp-loading-spinner-gap)}.ax-loading-overlay-backdrop{opacity:var(--ax-comp-loading-overlay-opacity);background-color:rgba(var(--ax-comp-loading-overlay-bg-color, var(--ax-sys-color-surface)))}.ax-loading-pane{top:0;bottom:0;inset-inline-end:0px;inset-inline-start:0px;width:100%!important;height:100%!important}.ax-loading-pane .cdk-dialog-container{display:flex!important;align-items:center;justify-content:center}.ax-loading-pane .cdk-dialog-container:focus,.ax-loading-pane .cdk-dialog-container:focus-visible,.ax-loading-pane .cdk-dialog-container:focus-within{outline-style:solid;outline-color:transparent;outline-width:var(--ax-comp-loading-pane-outline-width);outline-offset:var(--ax-comp-loading-pane-outline-offset)}\n"] }]
         }], propDecorators: { visibleChange: [{
@@ -260,10 +260,10 @@ class AXLoadingService {
     getLoaderId(loaderId) {
         return loaderId ?? DEFAULT_LOADER_ID;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingService, decorators: [{
             type: Injectable
         }] });
 
@@ -289,10 +289,10 @@ class AXLoadingDirective {
         this.loadingService = loadingService;
         this._hostElement = this.elementRef.nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingDirective, deps: [{ token: i0.ElementRef }, { token: AXLoadingService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.5", type: AXLoadingDirective, isStandalone: true, selector: "[axIsLoading]", inputs: { isLoading: ["axIsLoading", "isLoading"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingDirective, deps: [{ token: i0.ElementRef }, { token: AXLoadingService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: AXLoadingDirective, isStandalone: true, selector: "[axIsLoading]", inputs: { isLoading: ["axIsLoading", "isLoading"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axIsLoading]' }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: AXLoadingService }], propDecorators: { isLoading: [{
@@ -303,11 +303,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 const COMPONENT = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
 const MODULES = [CommonModule, OverlayModule, DialogModule, PortalModule];
 class AXLoadingModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingModule, imports: [CommonModule, OverlayModule, DialogModule, PortalModule, AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent], exports: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingModule, providers: [AXLoadingService], imports: [MODULES] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingModule, imports: [CommonModule, OverlayModule, DialogModule, PortalModule, AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent], exports: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingModule, providers: [AXLoadingService], imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXLoadingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLoadingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],