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

package/fesm2022/acorex-components-label.mjs

@@ -67,14 +67,14 @@ class AXLabelComponent extends MXBaseComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXLabelComponent, isStandalone: true, selector: "ax-label", inputs: { required: "required", for: "for" }, outputs: { requiredChange: "requiredChange" }, providers: [
             { provide: MXBaseComponent, useExisting: AXLabelComponent },
             { provide: AXComponent, 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>\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-leading:initial;--tw-font-weight:initial}}}@layer components{ax-label{color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)))}ax-label label{margin-bottom:calc(var(--spacing,.25rem) * 2);cursor:inherit;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);display:block}ax-label label .ax-state-required,ax-label.ax-state-error{color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)))}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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>\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-leading:initial;--tw-font-weight:initial}}}@layer components{ax-label{color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)))}ax-label label{margin-bottom:calc(var(--spacing,.25rem) * 2);cursor:inherit;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);display:block}ax-label label .ax-state-required,ax-label.ax-state-error{color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)))}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\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: AXLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: MXBaseComponent, useExisting: AXLabelComponent },
                         { provide: AXComponent, 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>\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-leading:initial;--tw-font-weight:initial}}}@layer components{ax-label{color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)))}ax-label label{margin-bottom:calc(var(--spacing,.25rem) * 2);cursor:inherit;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);display:block}ax-label label .ax-state-required,ax-label.ax-state-error{color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)))}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], 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>\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-leading:initial;--tw-font-weight:initial}}}@layer components{ax-label{color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)))}ax-label label{margin-bottom:calc(var(--spacing,.25rem) * 2);cursor:inherit;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);display:block}ax-label label .ax-state-required,ax-label.ax-state-error{color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)))}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { requiredChange: [{
                 type: Output
             }], required: [{

package/fesm2022/acorex-components-list.mjs

@@ -283,7 +283,7 @@ class AXListComponent extends MXSelectionValueComponent {
                 },
                 deps: [[new Optional(), new SkipSelf(), AX_SELECTION_DATA_TOKEN]],
             },
-        ], viewQueries: [{ propertyName: "tooltipRef", predicate: AXTooltipDirective, descendants: true, isSignal: true }, { propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"list-container\" cdkVirtualScrollingElement [class.ax-height-auto]=\"showEmptyTemplate()\">\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    [class.ax-truncated-container]=\"isItemTruncated()\"\n  >\n    <ul>\n      <!--  Item Template  -->\n      <ng-container *cdkVirtualFor=\"let item of listDataSource; let i = index; trackBy: trackByIdx\">\n        @if (item !== null && item !== undefined) {\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            @if (itemTemplate) {\n              <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\">\n              </ng-container>\n            } @else {\n              <ng-container [ngTemplateOutlet]=\"defaultItemTpl\"></ng-container>\n            }\n            <!--  Default Item Template  -->\n            <ng-template #defaultItemTpl>\n              @if (item !== null && item !== undefined) {\n                <div class=\"ax-label-container\">\n                  @if (multiple && checkbox) {\n                    <input\n                      class=\"ax-checkbox\"\n                      type=\"checkbox\"\n                      [checked]=\"isItemSelected(item)\"\n                      [disabled]=\"isItemDisabled(item)\"\n                      tabindex=\"0\"\n                    />\n                  }\n\n                  <span\n                    [class.ax-checkbox-label]=\"multiple && checkbox\"\n                    [class.ax-truncated]=\"isItemTruncated()\"\n                    [axTooltip]=\"getDisplayText(item)\"\n                    [axTooltipDisabled]=\"!showItemTooltip()\"\n                  >\n                    {{ getDisplayText(item) | translate | async }}\n                  </span>\n                </div>\n                <!-- @if (isItemSelected(item)) {\n                  <i class=\"ax-icon ax-icon-check ax-selected-icon\"></i>\n                } -->\n              } @else {\n                <ng-container [ngTemplateOutlet]=\"loadingTpl\"> </ng-container>\n              }\n            </ng-template>\n          </li>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"loadingTpl\"> </ng-container>\n        }\n      </ng-container>\n    </ul>\n  </cdk-virtual-scroll-viewport>\n  <ng-content select=\"ax-footer\"></ng-content>\n</div>\n\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n  <!--  Custom Loading Template  -->\n  @if (loadingTemplate) {\n    <ng-container [ngTemplateOutlet]=\"loadingTemplate\"> </ng-container>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"defaultLoadingTpl\"> </ng-container>\n  }\n  <!--  Default Loading Template  -->\n  <ng-template #defaultLoadingTpl>\n    <li>{{ '@acorex:common.status.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: ["@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-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-list{width:100%;height:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);display:block}ax-list .list-container{flex-direction:column;height:100%;display:flex}ax-list .list-container.ax-height-auto{height:auto}ax-list ax-footer,ax-list ax-header{background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)))}ax-list .empty-container{height:calc(var(--spacing,.25rem) * 10);width:100%;padding-inline:calc(var(--spacing,.25rem) * 3);justify-content:center;align-items:center;display:flex}ax-list .cdk-virtual-scroll-viewport.ax-truncated-container .cdk-virtual-scroll-content-wrapper{width:100%;min-width:unset}ax-list .cdk-virtual-scroll-viewport ul li{min-height:calc(var(--spacing,.25rem) * 10);cursor:pointer;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding-inline-start:calc(var(--spacing,.25rem) * 3);padding-inline-end:calc(var(--spacing,.25rem) * 4);position:relative;display:flex!important}ax-list .cdk-virtual-scroll-viewport ul li:hover{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)))}ax-list .cdk-virtual-scroll-viewport ul li:focus-visible{--tw-inset-ring-shadow:inset 0 0 0 2px var(--tw-inset-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-inset-ring-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)));--tw-outline-style:none;outline-style:none}ax-list .cdk-virtual-scroll-viewport ul li .ax-label-container{align-items:center;width:100%;display:flex}ax-list .cdk-virtual-scroll-viewport ul li .ax-checkbox-label{margin-inline-start:calc(var(--spacing,.25rem) * 2)}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-selected{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface)) 20%,transparent)}@supports (color:color-mix(in lab,red,red)){ax-list .cdk-virtual-scroll-viewport ul li.ax-state-selected{background-color:color-mix(in oklab,var(--color-primary,rgba(var(--ax-sys-color-primary-surface))) 20%,transparent)}}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-list .cdk-virtual-scroll-viewport ul li .ax-truncated{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}}@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: "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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "tooltipRef", predicate: AXTooltipDirective, descendants: true, isSignal: true }, { propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"list-container\" cdkVirtualScrollingElement [class.ax-height-auto]=\"showEmptyTemplate()\">\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    [class.ax-truncated-container]=\"isItemTruncated()\"\n  >\n    <ul>\n      <!--  Item Template  -->\n      <ng-container *cdkVirtualFor=\"let item of listDataSource; let i = index; trackBy: trackByIdx\">\n        @if (item !== null && item !== undefined) {\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            @if (itemTemplate) {\n              <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\">\n              </ng-container>\n            } @else {\n              <ng-container [ngTemplateOutlet]=\"defaultItemTpl\"></ng-container>\n            }\n            <!--  Default Item Template  -->\n            <ng-template #defaultItemTpl>\n              @if (item !== null && item !== undefined) {\n                <div class=\"ax-label-container\">\n                  @if (multiple && checkbox) {\n                    <input\n                      class=\"ax-checkbox\"\n                      type=\"checkbox\"\n                      [checked]=\"isItemSelected(item)\"\n                      [disabled]=\"isItemDisabled(item)\"\n                      tabindex=\"0\"\n                    />\n                  }\n\n                  <span\n                    [class.ax-checkbox-label]=\"multiple && checkbox\"\n                    [class.ax-truncated]=\"isItemTruncated()\"\n                    [axTooltip]=\"getDisplayText(item)\"\n                    [axTooltipDisabled]=\"!showItemTooltip()\"\n                  >\n                    {{ getDisplayText(item) | translate | async }}\n                  </span>\n                </div>\n                <!-- @if (isItemSelected(item)) {\n                  <i class=\"ax-icon ax-icon-check ax-selected-icon\"></i>\n                } -->\n              } @else {\n                <ng-container [ngTemplateOutlet]=\"loadingTpl\"> </ng-container>\n              }\n            </ng-template>\n          </li>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"loadingTpl\"> </ng-container>\n        }\n      </ng-container>\n    </ul>\n  </cdk-virtual-scroll-viewport>\n  <ng-content select=\"ax-footer\"></ng-content>\n</div>\n\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n  <!--  Custom Loading Template  -->\n  @if (loadingTemplate) {\n    <ng-container [ngTemplateOutlet]=\"loadingTemplate\"> </ng-container>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"defaultLoadingTpl\"> </ng-container>\n  }\n  <!--  Default Loading Template  -->\n  <ng-template #defaultLoadingTpl>\n    <li>{{ '@acorex:common.status.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: ["@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-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-list{width:100%;height:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);display:block}ax-list .list-container{flex-direction:column;height:100%;display:flex}ax-list .list-container.ax-height-auto{height:auto}ax-list ax-footer,ax-list ax-header{background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)))}ax-list .empty-container{height:calc(var(--spacing,.25rem) * 10);width:100%;padding-inline:calc(var(--spacing,.25rem) * 3);justify-content:center;align-items:center;display:flex}ax-list .cdk-virtual-scroll-viewport.ax-truncated-container .cdk-virtual-scroll-content-wrapper{width:100%;min-width:unset}ax-list .cdk-virtual-scroll-viewport ul li{min-height:calc(var(--spacing,.25rem) * 10);cursor:pointer;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding-inline-start:calc(var(--spacing,.25rem) * 3);padding-inline-end:calc(var(--spacing,.25rem) * 4);position:relative;display:flex!important}ax-list .cdk-virtual-scroll-viewport ul li:hover{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)))}ax-list .cdk-virtual-scroll-viewport ul li:focus-visible{--tw-inset-ring-shadow:inset 0 0 0 2px var(--tw-inset-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-inset-ring-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)));--tw-outline-style:none;outline-style:none}ax-list .cdk-virtual-scroll-viewport ul li .ax-label-container{align-items:center;width:100%;display:flex}ax-list .cdk-virtual-scroll-viewport ul li .ax-checkbox-label{margin-inline-start:calc(var(--spacing,.25rem) * 2)}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-selected{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface)) 20%,transparent)}@supports (color:color-mix(in lab,red,red)){ax-list .cdk-virtual-scroll-viewport ul li.ax-state-selected{background-color:color-mix(in oklab,var(--color-primary,rgba(var(--ax-sys-color-primary-surface))) 20%,transparent)}}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-list .cdk-virtual-scroll-viewport ul li .ax-truncated{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}}@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: "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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { 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: AXListComponent, decorators: [{
             type: Component,
@@ -324,7 +324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         AXTranslatorPipe,
                         AXTooltipModule,
                         AXTooltipDirective,
-                    ], template: "<div class=\"list-container\" cdkVirtualScrollingElement [class.ax-height-auto]=\"showEmptyTemplate()\">\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    [class.ax-truncated-container]=\"isItemTruncated()\"\n  >\n    <ul>\n      <!--  Item Template  -->\n      <ng-container *cdkVirtualFor=\"let item of listDataSource; let i = index; trackBy: trackByIdx\">\n        @if (item !== null && item !== undefined) {\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            @if (itemTemplate) {\n              <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\">\n              </ng-container>\n            } @else {\n              <ng-container [ngTemplateOutlet]=\"defaultItemTpl\"></ng-container>\n            }\n            <!--  Default Item Template  -->\n            <ng-template #defaultItemTpl>\n              @if (item !== null && item !== undefined) {\n                <div class=\"ax-label-container\">\n                  @if (multiple && checkbox) {\n                    <input\n                      class=\"ax-checkbox\"\n                      type=\"checkbox\"\n                      [checked]=\"isItemSelected(item)\"\n                      [disabled]=\"isItemDisabled(item)\"\n                      tabindex=\"0\"\n                    />\n                  }\n\n                  <span\n                    [class.ax-checkbox-label]=\"multiple && checkbox\"\n                    [class.ax-truncated]=\"isItemTruncated()\"\n                    [axTooltip]=\"getDisplayText(item)\"\n                    [axTooltipDisabled]=\"!showItemTooltip()\"\n                  >\n                    {{ getDisplayText(item) | translate | async }}\n                  </span>\n                </div>\n                <!-- @if (isItemSelected(item)) {\n                  <i class=\"ax-icon ax-icon-check ax-selected-icon\"></i>\n                } -->\n              } @else {\n                <ng-container [ngTemplateOutlet]=\"loadingTpl\"> </ng-container>\n              }\n            </ng-template>\n          </li>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"loadingTpl\"> </ng-container>\n        }\n      </ng-container>\n    </ul>\n  </cdk-virtual-scroll-viewport>\n  <ng-content select=\"ax-footer\"></ng-content>\n</div>\n\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n  <!--  Custom Loading Template  -->\n  @if (loadingTemplate) {\n    <ng-container [ngTemplateOutlet]=\"loadingTemplate\"> </ng-container>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"defaultLoadingTpl\"> </ng-container>\n  }\n  <!--  Default Loading Template  -->\n  <ng-template #defaultLoadingTpl>\n    <li>{{ '@acorex:common.status.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: ["@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-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-list{width:100%;height:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);display:block}ax-list .list-container{flex-direction:column;height:100%;display:flex}ax-list .list-container.ax-height-auto{height:auto}ax-list ax-footer,ax-list ax-header{background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)))}ax-list .empty-container{height:calc(var(--spacing,.25rem) * 10);width:100%;padding-inline:calc(var(--spacing,.25rem) * 3);justify-content:center;align-items:center;display:flex}ax-list .cdk-virtual-scroll-viewport.ax-truncated-container .cdk-virtual-scroll-content-wrapper{width:100%;min-width:unset}ax-list .cdk-virtual-scroll-viewport ul li{min-height:calc(var(--spacing,.25rem) * 10);cursor:pointer;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding-inline-start:calc(var(--spacing,.25rem) * 3);padding-inline-end:calc(var(--spacing,.25rem) * 4);position:relative;display:flex!important}ax-list .cdk-virtual-scroll-viewport ul li:hover{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)))}ax-list .cdk-virtual-scroll-viewport ul li:focus-visible{--tw-inset-ring-shadow:inset 0 0 0 2px var(--tw-inset-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-inset-ring-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)));--tw-outline-style:none;outline-style:none}ax-list .cdk-virtual-scroll-viewport ul li .ax-label-container{align-items:center;width:100%;display:flex}ax-list .cdk-virtual-scroll-viewport ul li .ax-checkbox-label{margin-inline-start:calc(var(--spacing,.25rem) * 2)}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-selected{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface)) 20%,transparent)}@supports (color:color-mix(in lab,red,red)){ax-list .cdk-virtual-scroll-viewport ul li.ax-state-selected{background-color:color-mix(in oklab,var(--color-primary,rgba(var(--ax-sys-color-primary-surface))) 20%,transparent)}}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-list .cdk-virtual-scroll-viewport ul li .ax-truncated{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}}@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"] }]
+                    ], template: "<div class=\"list-container\" cdkVirtualScrollingElement [class.ax-height-auto]=\"showEmptyTemplate()\">\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    [class.ax-truncated-container]=\"isItemTruncated()\"\n  >\n    <ul>\n      <!--  Item Template  -->\n      <ng-container *cdkVirtualFor=\"let item of listDataSource; let i = index; trackBy: trackByIdx\">\n        @if (item !== null && item !== undefined) {\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            @if (itemTemplate) {\n              <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\">\n              </ng-container>\n            } @else {\n              <ng-container [ngTemplateOutlet]=\"defaultItemTpl\"></ng-container>\n            }\n            <!--  Default Item Template  -->\n            <ng-template #defaultItemTpl>\n              @if (item !== null && item !== undefined) {\n                <div class=\"ax-label-container\">\n                  @if (multiple && checkbox) {\n                    <input\n                      class=\"ax-checkbox\"\n                      type=\"checkbox\"\n                      [checked]=\"isItemSelected(item)\"\n                      [disabled]=\"isItemDisabled(item)\"\n                      tabindex=\"0\"\n                    />\n                  }\n\n                  <span\n                    [class.ax-checkbox-label]=\"multiple && checkbox\"\n                    [class.ax-truncated]=\"isItemTruncated()\"\n                    [axTooltip]=\"getDisplayText(item)\"\n                    [axTooltipDisabled]=\"!showItemTooltip()\"\n                  >\n                    {{ getDisplayText(item) | translate | async }}\n                  </span>\n                </div>\n                <!-- @if (isItemSelected(item)) {\n                  <i class=\"ax-icon ax-icon-check ax-selected-icon\"></i>\n                } -->\n              } @else {\n                <ng-container [ngTemplateOutlet]=\"loadingTpl\"> </ng-container>\n              }\n            </ng-template>\n          </li>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"loadingTpl\"> </ng-container>\n        }\n      </ng-container>\n    </ul>\n  </cdk-virtual-scroll-viewport>\n  <ng-content select=\"ax-footer\"></ng-content>\n</div>\n\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n  <!--  Custom Loading Template  -->\n  @if (loadingTemplate) {\n    <ng-container [ngTemplateOutlet]=\"loadingTemplate\"> </ng-container>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"defaultLoadingTpl\"> </ng-container>\n  }\n  <!--  Default Loading Template  -->\n  <ng-template #defaultLoadingTpl>\n    <li>{{ '@acorex:common.status.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: ["@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-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-list{width:100%;height:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);display:block}ax-list .list-container{flex-direction:column;height:100%;display:flex}ax-list .list-container.ax-height-auto{height:auto}ax-list ax-footer,ax-list ax-header{background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)))}ax-list .empty-container{height:calc(var(--spacing,.25rem) * 10);width:100%;padding-inline:calc(var(--spacing,.25rem) * 3);justify-content:center;align-items:center;display:flex}ax-list .cdk-virtual-scroll-viewport.ax-truncated-container .cdk-virtual-scroll-content-wrapper{width:100%;min-width:unset}ax-list .cdk-virtual-scroll-viewport ul li{min-height:calc(var(--spacing,.25rem) * 10);cursor:pointer;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding-inline-start:calc(var(--spacing,.25rem) * 3);padding-inline-end:calc(var(--spacing,.25rem) * 4);position:relative;display:flex!important}ax-list .cdk-virtual-scroll-viewport ul li:hover{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)))}ax-list .cdk-virtual-scroll-viewport ul li:focus-visible{--tw-inset-ring-shadow:inset 0 0 0 2px var(--tw-inset-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-inset-ring-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)));--tw-outline-style:none;outline-style:none}ax-list .cdk-virtual-scroll-viewport ul li .ax-label-container{align-items:center;width:100%;display:flex}ax-list .cdk-virtual-scroll-viewport ul li .ax-checkbox-label{margin-inline-start:calc(var(--spacing,.25rem) * 2)}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-selected{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface)) 20%,transparent)}@supports (color:color-mix(in lab,red,red)){ax-list .cdk-virtual-scroll-viewport ul li.ax-state-selected{background-color:color-mix(in oklab,var(--color-primary,rgba(var(--ax-sys-color-primary-surface))) 20%,transparent)}}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-list .cdk-virtual-scroll-viewport ul li .ax-truncated{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}}@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: { tooltipRef: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => AXTooltipDirective), { isSignal: true }] }], isItemTruncated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemTruncated", required: false }] }], showItemTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showItemTooltip", required: false }] }], dataSource: [{
                 type: Input
             }], itemHeight: [{

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

@@ -121,7 +121,7 @@ class AXLoadingDialogComponent extends MXBaseComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXLoadingDialogComponent, isStandalone: true, selector: "ax-loading-dialog", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, onClose: { classPropertyName: "onClose", publicName: "onClose", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXLoadingDialogComponent }], usesInheritance: true, ngImport: i0, template: "<ax-title>{{ dialogTitle() }}</ax-title>\n\n<ax-progress-bar [mode]=\"data().mode\" [progress]=\"progressValue()\" [color]=\"progressColor()\"></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: ["@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-loading-dialog{gap:calc(var(--spacing,.25rem) * 2);border-radius:var(--radius-lg,.5rem);background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));width:93vw;padding:calc(var(--spacing,.25rem) * 4);flex-direction:column;display:flex}@media(min-width:40rem){ax-loading-dialog{width:80vw}}@media(min-width:48rem){ax-loading-dialog{width:55vw}}@media(min-width:64rem){ax-loading-dialog{width:30vw}}@media(min-width:80rem){ax-loading-dialog{width:25vw}}ax-loading-dialog ax-title{margin-bottom:calc(var(--spacing,.25rem) * 2);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)}ax-loading-dialog .progress-decorators{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));justify-content:space-between;display:flex}ax-loading-dialog ax-footer{padding-top:calc(var(--spacing,.25rem) * 3);justify-content:flex-end}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXLoadingDialogComponent, isStandalone: true, selector: "ax-loading-dialog", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, onClose: { classPropertyName: "onClose", publicName: "onClose", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXLoadingDialogComponent }], usesInheritance: true, ngImport: i0, template: "<ax-title>{{ dialogTitle() }}</ax-title>\n\n<ax-progress-bar [mode]=\"data().mode\" [progress]=\"progressValue()\" [color]=\"progressColor()\"></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: ["@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-loading-dialog{gap:calc(var(--spacing,.25rem) * 2);border-radius:var(--radius-lg,.5rem);background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));width:93vw;padding:calc(var(--spacing,.25rem) * 4);flex-direction:column;display:flex}@media(min-width:40rem){ax-loading-dialog{width:80vw}}@media(min-width:48rem){ax-loading-dialog{width:55vw}}@media(min-width:64rem){ax-loading-dialog{width:30vw}}@media(min-width:80rem){ax-loading-dialog{width:25vw}}ax-loading-dialog ax-title{margin-bottom:calc(var(--spacing,.25rem) * 2);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)}ax-loading-dialog .progress-decorators{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));justify-content:space-between;display:flex}ax-loading-dialog ax-footer{padding-top:calc(var(--spacing,.25rem) * 3);justify-content:flex-end}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\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: "21.1.3", ngImport: i0, type: AXLoadingDialogComponent, decorators: [{
             type: Component,
@@ -134,7 +134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         AXLoadingComponent,
                         AXTranslatorPipe,
                         AsyncPipe,
-                    ], providers: [{ provide: AXComponent, useExisting: AXLoadingDialogComponent }], template: "<ax-title>{{ dialogTitle() }}</ax-title>\n\n<ax-progress-bar [mode]=\"data().mode\" [progress]=\"progressValue()\" [color]=\"progressColor()\"></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: ["@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-loading-dialog{gap:calc(var(--spacing,.25rem) * 2);border-radius:var(--radius-lg,.5rem);background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));width:93vw;padding:calc(var(--spacing,.25rem) * 4);flex-direction:column;display:flex}@media(min-width:40rem){ax-loading-dialog{width:80vw}}@media(min-width:48rem){ax-loading-dialog{width:55vw}}@media(min-width:64rem){ax-loading-dialog{width:30vw}}@media(min-width:80rem){ax-loading-dialog{width:25vw}}ax-loading-dialog ax-title{margin-bottom:calc(var(--spacing,.25rem) * 2);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)}ax-loading-dialog .progress-decorators{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));justify-content:space-between;display:flex}ax-loading-dialog ax-footer{padding-top:calc(var(--spacing,.25rem) * 3);justify-content:flex-end}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], providers: [{ provide: AXComponent, useExisting: AXLoadingDialogComponent }], template: "<ax-title>{{ dialogTitle() }}</ax-title>\n\n<ax-progress-bar [mode]=\"data().mode\" [progress]=\"progressValue()\" [color]=\"progressColor()\"></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: ["@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-loading-dialog{gap:calc(var(--spacing,.25rem) * 2);border-radius:var(--radius-lg,.5rem);background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));width:93vw;padding:calc(var(--spacing,.25rem) * 4);flex-direction:column;display:flex}@media(min-width:40rem){ax-loading-dialog{width:80vw}}@media(min-width:48rem){ax-loading-dialog{width:55vw}}@media(min-width:64rem){ax-loading-dialog{width:30vw}}@media(min-width:80rem){ax-loading-dialog{width:25vw}}ax-loading-dialog ax-title{margin-bottom:calc(var(--spacing,.25rem) * 2);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)}ax-loading-dialog .progress-decorators{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));justify-content:space-between;display:flex}ax-loading-dialog ax-footer{padding-top:calc(var(--spacing,.25rem) * 3);justify-content:flex-end}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], onClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "onClose", required: false }] }] } });
 
 class AXLoadingDialogModule {

package/fesm2022/acorex-components-loading.mjs

@@ -47,7 +47,7 @@ class AXLoadingSpinnerComponent {
     @if (text) {
       <span> {{ text }} </span>
     }
-  `, isInline: true, styles: ["@layer components{ax-loading-spinner .ax-loader{box-sizing:border-box;animation:var(--animate-spin,spin 1s linear infinite);border-color:var(--ax-comp-bg);border-radius:3.40282e38px;margin:auto;display:inline-block;border-bottom-color:#0000!important}ax-loading-spinner.ax-white .ax-loader{border-color:var(--color-white,#fff)}ax-loading-spinner.ax-default .ax-loader{border-color:var(--color-black,#000)}ax-loading-spinner.ax-default .ax-loader:where(.dark,.dark *){border-color:var(--color-white,#fff)}ax-loading-spinner.ax-black .ax-loader{border-color:var(--color-black,#000)}}@keyframes spin{to{transform:rotate(360deg)}}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{ax-loading-spinner .ax-loader{box-sizing:border-box;animation:var(--animate-spin,spin 1s linear infinite);border-color:var(--ax-comp-bg);border-radius:3.40282e38px;margin:auto;display:inline-block;border-bottom-color:#0000!important}ax-loading-spinner.ax-white .ax-loader{border-color:var(--color-white,#fff)}ax-loading-spinner.ax-default .ax-loader{border-color:var(--color-black,#000)}ax-loading-spinner.ax-default .ax-loader:where(.dark,.dark *){border-color:var(--color-white,#fff)}ax-loading-spinner.ax-black .ax-loader{border-color:var(--color-black,#000)}}@keyframes spin{to{transform:rotate(360deg)}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingSpinnerComponent, decorators: [{
             type: Component,
@@ -62,7 +62,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
     @if (text) {
       <span> {{ text }} </span>
     }
-  `, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXLoadingSpinnerComponent }], styles: ["@layer components{ax-loading-spinner .ax-loader{box-sizing:border-box;animation:var(--animate-spin,spin 1s linear infinite);border-color:var(--ax-comp-bg);border-radius:3.40282e38px;margin:auto;display:inline-block;border-bottom-color:#0000!important}ax-loading-spinner.ax-white .ax-loader{border-color:var(--color-white,#fff)}ax-loading-spinner.ax-default .ax-loader{border-color:var(--color-black,#000)}ax-loading-spinner.ax-default .ax-loader:where(.dark,.dark *){border-color:var(--color-white,#fff)}ax-loading-spinner.ax-black .ax-loader{border-color:var(--color-black,#000)}}@keyframes spin{to{transform:rotate(360deg)}}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+  `, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXLoadingSpinnerComponent }], styles: ["@layer components{ax-loading-spinner .ax-loader{box-sizing:border-box;animation:var(--animate-spin,spin 1s linear infinite);border-color:var(--ax-comp-bg);border-radius:3.40282e38px;margin:auto;display:inline-block;border-bottom-color:#0000!important}ax-loading-spinner.ax-white .ax-loader{border-color:var(--color-white,#fff)}ax-loading-spinner.ax-default .ax-loader{border-color:var(--color-black,#000)}ax-loading-spinner.ax-default .ax-loader:where(.dark,.dark *){border-color:var(--color-white,#fff)}ax-loading-spinner.ax-black .ax-loader{border-color:var(--color-black,#000)}}@keyframes spin{to{transform:rotate(360deg)}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { text: [{
                 type: Input
             }], color: [{
@@ -146,11 +146,11 @@ class AXLoadingComponent extends MXBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXLoadingComponent, isStandalone: true, selector: "ax-loading", inputs: { visible: "visible", type: "type", context: "context" }, outputs: { visibleChange: "visibleChange" }, providers: [{ provide: AXComponent, useExisting: AXLoadingComponent }], usesInheritance: true, ngImport: i0, template: ` <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttached($event)"></ng-template> `, isInline: true, 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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-content:\"\";--tw-outline-style:solid}}}@layer components{ax-loading{padding-inline:calc(var(--spacing,.25rem) * 2);position:relative}ax-loading:before,ax-loading:after{--tw-translate-x:-50%;--tw-translate-y:-50%;width:100%;height:100%;translate:var(--tw-translate-x) var(--tw-translate-y);transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);animation:var(--animate-pulse,1s ease-in-out both pulse);--tw-content:\"\";content:var(--tw-content);inset-inline-start:50%;background-color:#0000;border-radius:3.40282e38px;animation-iteration-count:infinite;position:absolute;top:50%}ax-loading ax-loading-spinner{gap:calc(var(--spacing,.25rem) * 3);display:flex}.ax-loading-overlay-backdrop{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));opacity:.6!important}.ax-loading-pane{inset-inline-start:calc(var(--spacing,.25rem) * 0);inset-inline-end:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);width:100%!important;height:100%!important}.ax-loading-pane .cdk-dialog-container{justify-content:center;align-items:center;display:flex!important}.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:var(--tw-outline-style);outline-offset:2px;--tw-outline-style:solid;outline:2px solid #0000}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXLoadingComponent, isStandalone: true, selector: "ax-loading", inputs: { visible: "visible", type: "type", context: "context" }, outputs: { visibleChange: "visibleChange" }, providers: [{ provide: AXComponent, useExisting: AXLoadingComponent }], usesInheritance: true, ngImport: i0, template: ` <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttached($event)"></ng-template> `, isInline: true, 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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-content:\"\";--tw-outline-style:solid}}}@layer components{ax-loading{padding-inline:calc(var(--spacing,.25rem) * 2);position:relative}ax-loading:before,ax-loading:after{--tw-translate-x:-50%;--tw-translate-y:-50%;width:100%;height:100%;translate:var(--tw-translate-x) var(--tw-translate-y);transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);animation:var(--animate-pulse,1s ease-in-out both pulse);--tw-content:\"\";content:var(--tw-content);inset-inline-start:50%;background-color:#0000;border-radius:3.40282e38px;animation-iteration-count:infinite;position:absolute;top:50%}ax-loading ax-loading-spinner{gap:calc(var(--spacing,.25rem) * 3);display:flex}.ax-loading-overlay-backdrop{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));opacity:.6!important}.ax-loading-pane{inset-inline-start:calc(var(--spacing,.25rem) * 0);inset-inline-end:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);width:100%!important;height:100%!important}.ax-loading-pane .cdk-dialog-container{justify-content:center;align-items:center;display:flex!important}.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:var(--tw-outline-style);outline-offset:2px;--tw-outline-style:solid;outline:2px solid #0000}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\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: "21.1.3", ngImport: i0, type: AXLoadingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-loading', template: ` <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttached($event)"></ng-template> `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkPortalOutlet], providers: [{ provide: AXComponent, useExisting: AXLoadingComponent }], 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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-content:\"\";--tw-outline-style:solid}}}@layer components{ax-loading{padding-inline:calc(var(--spacing,.25rem) * 2);position:relative}ax-loading:before,ax-loading:after{--tw-translate-x:-50%;--tw-translate-y:-50%;width:100%;height:100%;translate:var(--tw-translate-x) var(--tw-translate-y);transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);animation:var(--animate-pulse,1s ease-in-out both pulse);--tw-content:\"\";content:var(--tw-content);inset-inline-start:50%;background-color:#0000;border-radius:3.40282e38px;animation-iteration-count:infinite;position:absolute;top:50%}ax-loading ax-loading-spinner{gap:calc(var(--spacing,.25rem) * 3);display:flex}.ax-loading-overlay-backdrop{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));opacity:.6!important}.ax-loading-pane{inset-inline-start:calc(var(--spacing,.25rem) * 0);inset-inline-end:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);width:100%!important;height:100%!important}.ax-loading-pane .cdk-dialog-container{justify-content:center;align-items:center;display:flex!important}.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:var(--tw-outline-style);outline-offset:2px;--tw-outline-style:solid;outline:2px solid #0000}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-loading', template: ` <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttached($event)"></ng-template> `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkPortalOutlet], providers: [{ provide: AXComponent, useExisting: AXLoadingComponent }], 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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-content:\"\";--tw-outline-style:solid}}}@layer components{ax-loading{padding-inline:calc(var(--spacing,.25rem) * 2);position:relative}ax-loading:before,ax-loading:after{--tw-translate-x:-50%;--tw-translate-y:-50%;width:100%;height:100%;translate:var(--tw-translate-x) var(--tw-translate-y);transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);animation:var(--animate-pulse,1s ease-in-out both pulse);--tw-content:\"\";content:var(--tw-content);inset-inline-start:50%;background-color:#0000;border-radius:3.40282e38px;animation-iteration-count:infinite;position:absolute;top:50%}ax-loading ax-loading-spinner{gap:calc(var(--spacing,.25rem) * 3);display:flex}.ax-loading-overlay-backdrop{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));opacity:.6!important}.ax-loading-pane{inset-inline-start:calc(var(--spacing,.25rem) * 0);inset-inline-end:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);width:100%!important;height:100%!important}.ax-loading-pane .cdk-dialog-container{justify-content:center;align-items:center;display:flex!important}.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:var(--tw-outline-style);outline-offset:2px;--tw-outline-style:solid;outline:2px solid #0000}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { visibleChange: [{
                 type: Output
             }], visible: [{