@acorex/components 21.0.1-next.53 → 21.0.1-next.56

package/fesm2022/acorex-components-list.mjs

@@ -1,11 +1,11 @@
 import { MXSelectionValueComponent, convertArrayToDataSource, AXListDataSource, AXComponent, AXFocusableComponent, AXValuableComponent, AX_SELECTION_DATA_TOKEN, MXSelectionBridgeService } from '@acorex/cdk/common';
 import * as i1 from '@acorex/components/tooltip';
-import { AXTooltipModule, AXTooltipDirective } from '@acorex/components/tooltip';
+import { AXTooltipDirective, AXTooltipModule } from '@acorex/components/tooltip';
 import { AXTranslatorPipe } from '@acorex/core/translation';
 import { CdkVirtualScrollableElement, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
 import { isPlatformBrowser, NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, signal, EventEmitter, computed, Optional, SkipSelf, forwardRef, HostListener, ViewChild, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { viewChildren, input, signal, EventEmitter, computed, Optional, SkipSelf, forwardRef, HostListener, ViewChild, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 /**
@@ -16,6 +16,7 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 class AXListComponent extends MXSelectionValueComponent {
     constructor() {
         super(...arguments);
+        this.tooltipRef = viewChildren(AXTooltipDirective, ...(ngDevMode ? [{ debugName: "tooltipRef" }] : []));
         /**
          * Determines if an item is truncated.
          *
@@ -28,12 +29,10 @@ class AXListComponent extends MXSelectionValueComponent {
          * @defaultValue false
          */
         this.showItemTooltip = input(false, ...(ngDevMode ? [{ debugName: "showItemTooltip" }] : []));
-        /**
-         * Defines the data source for the list.
-         *
-         *  @defaultValue convertArrayToDataSource([])
-         */
-        this.dataSource = convertArrayToDataSource([]);
+        /** @ignore */
+        this._dataSource = convertArrayToDataSource([]);
+        /** @ignore */
+        this._isInitialized = false;
         /**
          *  @ignore
          */
@@ -72,6 +71,23 @@ class AXListComponent extends MXSelectionValueComponent {
          */
         this.showEmptyTemplate = computed(() => this.isLoading() === false && this.emptyTemplate && this.hasItems === false, ...(ngDevMode ? [{ debugName: "showEmptyTemplate" }] : []));
     }
+    /**
+     * Defines the data source for the list.
+     *
+     *  @defaultValue convertArrayToDataSource([])
+     */
+    set dataSource(v) {
+        if (!v || v === this._dataSource) {
+            return;
+        }
+        this._dataSource = v;
+        if (this._isInitialized) {
+            this._setupListDataSource();
+        }
+    }
+    get dataSource() {
+        return this._dataSource;
+    }
     /**
      * Sets the height of each item in the list.
      */
@@ -86,13 +102,42 @@ class AXListComponent extends MXSelectionValueComponent {
      */
     ngOnInit() {
         super.ngOnInit();
+        this._setupListDataSource();
+        this._isInitialized = true;
+    }
+    /**
+     *  @ignore
+     */
+    ngOnDestroy() {
+        this._onChangedSub?.unsubscribe();
+        this._onLoadingChangedSub?.unsubscribe();
+        super.ngOnDestroy();
+    }
+    /**
+     * (Re)creates the internal `AXListDataSource` wrapper used by `cdkVirtualFor`
+     * and (re)subscribes to the underlying source's events. This is invoked
+     * whenever the `dataSource` input changes so that the list properly reflects
+     * the new source.
+     * @ignore
+     */
+    _setupListDataSource() {
+        this._onChangedSub?.unsubscribe();
+        this._onLoadingChangedSub?.unsubscribe();
         this.listDataSource = new AXListDataSource({
-            source: this.dataSource,
+            source: this._dataSource,
         });
-        this.listDataSource.source.onLoadingChanged.subscribe((data) => {
+        // Only mirror the source's state if it has already produced data.
+        // Otherwise keep `isLoading=true` so the empty template doesn't render,
+        // which would add `.ax-height-auto` and collapse the container, starving
+        // the virtual viewport of size — preventing `viewChange` from firing and
+        // the data source's `load` callback from ever being invoked.
+        const hasLoadedItems = this._dataSource.totalCount > 0;
+        this.isLoading.set(hasLoadedItems ? this._dataSource.isLoading : true);
+        this.hasItems = hasLoadedItems;
+        this._onLoadingChangedSub = this.listDataSource.source.onLoadingChanged.subscribe((data) => {
             this.isLoading.set(data);
         });
-        this.listDataSource.source.onChanged.subscribe((data) => {
+        this._onChangedSub = this.listDataSource.source.onChanged.subscribe((data) => {
             this.hasItems = data.totalCount > 0;
             setTimeout(() => {
                 this.render();
@@ -111,6 +156,9 @@ class AXListComponent extends MXSelectionValueComponent {
         if (this.isItemDisabled(item)) {
             return;
         }
+        this.tooltipRef().forEach((item) => {
+            item.close();
+        });
         this.toggleSelect(item);
         this.onItemClick.emit({
             component: this,
@@ -235,7 +283,7 @@ class AXListComponent extends MXSelectionValueComponent {
                 },
                 deps: [[new Optional(), new SkipSelf(), AX_SELECTION_DATA_TOKEN]],
             },
-        ], viewQueries: [{ 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.1 | 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);background-color:var(--color-surface,rgba(var(--ax-sys-color-surface-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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXListComponent, decorators: [{
             type: Component,
@@ -276,8 +324,8 @@ 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.1 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { isItemTruncated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemTruncated", required: false }] }], showItemTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showItemTooltip", required: false }] }], dataSource: [{
+                    ], 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);background-color:var(--color-surface,rgba(var(--ax-sys-color-surface-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"] }]
+        }], 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: [{
                 type: Input

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

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-list.mjs","sources":["../../../../packages/components/list/src/lib/list.component.ts","../../../../packages/components/list/src/lib/list.component.html","../../../../packages/components/list/src/lib/list.module.ts","../../../../packages/components/list/src/acorex-components-list.ts"],"sourcesContent":["import {\n  AXComponent,\n  AXDataSource,\n  AXEvent,\n  AXFocusableComponent,\n  AXListDataSource,\n  AXValuableComponent,\n  AX_SELECTION_DATA_TOKEN,\n  MXSelectionBridgeService,\n  MXSelectionValueComponent,\n  convertArrayToDataSource,\n} from '@acorex/cdk/common';\nimport { AXTooltipDirective, AXTooltipModule } from '@acorex/components/tooltip';\nimport { AXTranslatorPipe } from '@acorex/core/translation';\nimport {\n  CdkFixedSizeVirtualScroll,\n  CdkVirtualForOf,\n  CdkVirtualScrollViewport,\n  CdkVirtualScrollableElement,\n} from '@angular/cdk/scrolling';\nimport { AsyncPipe, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  HostListener,\n  Input,\n  OnInit,\n  Optional,\n  Output,\n  SkipSelf,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation,\n  WritableSignal,\n  computed,\n  forwardRef,\n  input,\n  signal,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport interface AXListScrollIndexChanged extends AXEvent {\n  index: number;\n}\n\n/**\n * provides a list control with various input options and events for user interaction.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-list',\n  templateUrl: './list.component.html',\n  styleUrls: ['./list.component.compiled.css'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  inputs: [\n    'id',\n    'name',\n    'disabled',\n    'readonly',\n    'valueField',\n    'textField',\n    'textTemplate',\n    'disabledField',\n    'multiple',\n    'selectionMode',\n  ],\n  outputs: ['onValueChanged', 'disabledChange', 'readonlyChange', 'onBlur', 'onFocus', 'onItemClick', 'onItemSelected'],\n  providers: [\n    { provide: AXComponent, useExisting: AXListComponent },\n    { provide: AXFocusableComponent, useExisting: AXListComponent },\n    { provide: AXValuableComponent, useExisting: AXListComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXListComponent),\n      multi: true,\n    },\n    {\n      provide: AX_SELECTION_DATA_TOKEN,\n      useFactory: (existingService: MXSelectionBridgeService) => {\n        return existingService || new MXSelectionBridgeService();\n      },\n      deps: [[new Optional(), new SkipSelf(), AX_SELECTION_DATA_TOKEN]],\n    },\n  ],\n  imports: [\n    CdkVirtualScrollableElement,\n    CdkVirtualScrollViewport,\n    CdkFixedSizeVirtualScroll,\n    CdkVirtualForOf,\n    NgTemplateOutlet,\n    AsyncPipe,\n    AXTranslatorPipe,\n    AXTooltipModule,\n    AXTooltipDirective,\n  ],\n})\nexport class AXListComponent extends MXSelectionValueComponent implements OnInit {\n  /**\n   * Determines if an item is truncated.\n   *\n   * @defaultValue true\n   */\n  isItemTruncated = input(true);\n\n  /**\n   * Determines if a tooltip is shown for an item.\n   *\n   * @defaultValue false\n   */\n  showItemTooltip = input(false);\n\n  /**\n   * Defines the data source for the list.\n   *\n   *  @defaultValue convertArrayToDataSource([])\n   */\n  @Input()\n  dataSource: AXDataSource<unknown> = convertArrayToDataSource([]);\n\n  /**\n   *  @ignore\n   */\n  itemHeightSignal: WritableSignal<number | 'auto'> = signal(40);\n\n  /**\n   * Sets the height of each item in the list.\n   */\n  @Input()\n  public set itemHeight(v: number | 'auto') {\n    this.itemHeightSignal.set(v);\n  }\n\n  /**\n   * Template for rendering individual items in the list.\n   */\n  @Input()\n  itemTemplate: TemplateRef<unknown>;\n\n  /**\n   * Template to display when the list is empty.\n   */\n  @Input()\n  emptyTemplate: TemplateRef<unknown>;\n\n  /**\n   * Template to show while the list is loading.\n   */\n  @Input()\n  loadingTemplate: TemplateRef<unknown>;\n\n  /**\n   * Emitted when the index of the scrolled item changes.\n   *\n   * @event\n   */\n  @Output()\n  onScrolledIndexChanged: EventEmitter<AXListScrollIndexChanged> = new EventEmitter<AXListScrollIndexChanged>();\n\n  /**\n   * Specifies whether the checkbox is enabled.\n   *\n   *  @defaultValue true\n   */\n  @Input()\n  checkbox = true;\n\n  /**\n   *  @ignore\n   */\n  protected listDataSource: AXListDataSource<unknown>;\n\n  /**\n   *  @ignore\n   */\n  protected isLoading = signal(true);\n\n  /**\n   *  @ignore\n   */\n  protected hasItems = false;\n\n  /**\n   *  @ignore\n   */\n  private lastIndex = 0;\n\n  /**\n   *  @ignore\n   */\n  private postponeFocus = false;\n\n  /**\n   *  @ignore\n   */\n  @ViewChild(CdkVirtualScrollViewport)\n  private viewport: CdkVirtualScrollViewport;\n\n  trackByIdx(i) {\n    return i;\n  }\n\n  /**\n   *  @ignore\n   */\n  override ngOnInit() {\n    super.ngOnInit();\n    this.listDataSource = new AXListDataSource<unknown>({\n      source: this.dataSource,\n    });\n    this.listDataSource.source.onLoadingChanged.subscribe((data) => {\n      this.isLoading.set(data);\n    });\n    this.listDataSource.source.onChanged.subscribe((data) => {\n      this.hasItems = data.totalCount > 0;\n      setTimeout(() => {\n        this.render();\n      }, 100);\n    });\n  }\n  /**\n   *  @ignore\n   */\n  _handleOnItemClick(e: MouseEvent, item: any) {\n    if (this.readonly || this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n    if (this.isItemDisabled(item)) {\n      return;\n    }\n    this.toggleSelect(item);\n    this.onItemClick.emit({\n      component: this,\n      item,\n      htmlElement: e.target as HTMLElement,\n      isUserInteraction: true,\n      nativeEvent: e,\n    });\n  }\n\n  /**\n   *  @ignore\n   */\n  @HostListener('keydown', ['$event'])\n  _handleKeydown(e: KeyboardEvent) {\n    if ((e.code === 'ArrowDown' || e.code === 'ArrowUp') && this.hasItems) {\n      this.focusItemByNav(e.key === 'ArrowDown' ? 1 : -1);\n      e.preventDefault();\n    }\n    if ((e.code === 'Space' || e.code === 'Enter') && this.hasItems) {\n      if (this.readonly || this.disabled) {\n        e.preventDefault();\n        e.stopPropagation();\n        return;\n      }\n      if (isPlatformBrowser(this.platformID)) {\n        const id = this.document.activeElement?.closest('li')?.dataset['id'];\n        this.toggleSelect(id);\n      }\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  }\n\n  /**\n   *  @ignore\n   */\n  private focusItemByNav(sign: -1 | 1): void {\n    if (isPlatformBrowser(this.platformID)) {\n      const list = this.getHostElement().querySelector('ul');\n      const fn = (s) => list.querySelector<HTMLDivElement>(s);\n      const itemDiv: HTMLElement = this.document.activeElement?.closest('li') || fn(`li.ax-state-selected`) || fn(`li`);\n      const next = (sign == 1 ? itemDiv.nextElementSibling : itemDiv.previousElementSibling) as HTMLElement;\n      if (next) {\n        next.focus();\n      }\n    }\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleOnscrolledIndexChange(e: number) {\n    this.lastIndex = e;\n    this.onScrolledIndexChanged.emit({\n      component: this,\n      index: this.lastIndex,\n      isUserInteraction: true,\n    });\n  }\n\n  /**\n   * Retrieves an item from the data source based on the provided key.\n   *\n   * @param key The key used to identify the item.\n   * @ignore\n   */\n  getItemByKey(key: unknown): Promise<unknown> | unknown {\n    return this.dataSource.find(key);\n  }\n\n  /**\n   * Renders the component by updating the viewport size, scrolling to the last index, and optionally focusing the element.\n   */\n  public render() {\n    this.viewport.checkViewportSize();\n    this.viewport.scrollToIndex(this.lastIndex);\n    if (this.postponeFocus) {\n      this.postponeFocus = false;\n      this.focus();\n    }\n  }\n\n  /**\n   * Refreshes the list by clearing the selection cache and reloading the data source.\n   * @ignore\n   */\n  public refresh(clearSelection = true) {\n    if (clearSelection) {\n      this.clearSelectionCache();\n    }\n    this.listDataSource.refresh();\n  }\n\n  /**\n   * Scrolls the viewport to the specified item index.\n   * @param index The index of the item to scroll to.\n   * @ignore\n   */\n  public scrollToIndex(index: number) {\n    this.viewport.scrollToIndex(index);\n  }\n  /**\n   * Sets focus to the first selectable list item. If no item is available, postpones focus.\n   */\n  override focus(): void {\n    const list = this.getHostElement().querySelector('ul');\n    const focusable =\n      list.querySelector<HTMLElement>('li.ax-state-selected') ?? list.querySelector<HTMLElement>('li.list-item');\n    if (focusable) {\n      focusable.focus();\n    } else {\n      this.postponeFocus = true;\n    }\n  }\n\n  /**\n   * Determines whether to show the empty template based on the presence of items and loading state.\n   * @ignore\n   */\n  showEmptyTemplate = computed(() => this.isLoading() === false && this.emptyTemplate && this.hasItems === false);\n}\n","<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","import { NgModule } from '@angular/core';\nimport { AXListComponent } from './list.component';\n\n@NgModule({\n  imports: [AXListComponent],\n  exports: [AXListComponent],\n})\nexport class AXListModule {}\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-list.mjs","sources":["../../../../packages/components/list/src/lib/list.component.ts","../../../../packages/components/list/src/lib/list.component.html","../../../../packages/components/list/src/lib/list.module.ts","../../../../packages/components/list/src/acorex-components-list.ts"],"sourcesContent":["import {\n  AXComponent,\n  AXDataSource,\n  AXEvent,\n  AXFocusableComponent,\n  AXListDataSource,\n  AXValuableComponent,\n  AX_SELECTION_DATA_TOKEN,\n  MXSelectionBridgeService,\n  MXSelectionValueComponent,\n  convertArrayToDataSource,\n} from '@acorex/cdk/common';\nimport { AXTooltipDirective, AXTooltipModule } from '@acorex/components/tooltip';\nimport { AXTranslatorPipe } from '@acorex/core/translation';\nimport {\n  CdkFixedSizeVirtualScroll,\n  CdkVirtualForOf,\n  CdkVirtualScrollViewport,\n  CdkVirtualScrollableElement,\n} from '@angular/cdk/scrolling';\nimport { AsyncPipe, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  HostListener,\n  Input,\n  OnInit,\n  Optional,\n  Output,\n  SkipSelf,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation,\n  WritableSignal,\n  computed,\n  forwardRef,\n  input,\n  signal,\n  viewChildren,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { Subscription } from 'rxjs';\n\nexport interface AXListScrollIndexChanged extends AXEvent {\n  index: number;\n}\n\n/**\n * provides a list control with various input options and events for user interaction.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-list',\n  templateUrl: './list.component.html',\n  styleUrls: ['./list.component.compiled.css'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  inputs: [\n    'id',\n    'name',\n    'disabled',\n    'readonly',\n    'valueField',\n    'textField',\n    'textTemplate',\n    'disabledField',\n    'multiple',\n    'selectionMode',\n  ],\n  outputs: ['onValueChanged', 'disabledChange', 'readonlyChange', 'onBlur', 'onFocus', 'onItemClick', 'onItemSelected'],\n  providers: [\n    { provide: AXComponent, useExisting: AXListComponent },\n    { provide: AXFocusableComponent, useExisting: AXListComponent },\n    { provide: AXValuableComponent, useExisting: AXListComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXListComponent),\n      multi: true,\n    },\n    {\n      provide: AX_SELECTION_DATA_TOKEN,\n      useFactory: (existingService: MXSelectionBridgeService) => {\n        return existingService || new MXSelectionBridgeService();\n      },\n      deps: [[new Optional(), new SkipSelf(), AX_SELECTION_DATA_TOKEN]],\n    },\n  ],\n  imports: [\n    CdkVirtualScrollableElement,\n    CdkVirtualScrollViewport,\n    CdkFixedSizeVirtualScroll,\n    CdkVirtualForOf,\n    NgTemplateOutlet,\n    AsyncPipe,\n    AXTranslatorPipe,\n    AXTooltipModule,\n    AXTooltipDirective,\n  ],\n})\nexport class AXListComponent extends MXSelectionValueComponent implements OnInit {\n  private tooltipRef = viewChildren(AXTooltipDirective);\n\n  /**\n   * Determines if an item is truncated.\n   *\n   * @defaultValue true\n   */\n  isItemTruncated = input(true);\n\n  /**\n   * Determines if a tooltip is shown for an item.\n   *\n   * @defaultValue false\n   */\n  showItemTooltip = input(false);\n\n  /** @ignore */\n  private _dataSource: AXDataSource<unknown> = convertArrayToDataSource([]);\n\n  /** @ignore */\n  private _isInitialized = false;\n\n  /** @ignore */\n  private _onChangedSub?: Subscription;\n\n  /** @ignore */\n  private _onLoadingChangedSub?: Subscription;\n\n  /**\n   * Defines the data source for the list.\n   *\n   *  @defaultValue convertArrayToDataSource([])\n   */\n  @Input()\n  public set dataSource(v: AXDataSource<unknown>) {\n    if (!v || v === this._dataSource) {\n      return;\n    }\n    this._dataSource = v;\n    if (this._isInitialized) {\n      this._setupListDataSource();\n    }\n  }\n\n  public get dataSource(): AXDataSource<unknown> {\n    return this._dataSource;\n  }\n\n  /**\n   *  @ignore\n   */\n  itemHeightSignal: WritableSignal<number | 'auto'> = signal(40);\n\n  /**\n   * Sets the height of each item in the list.\n   */\n  @Input()\n  public set itemHeight(v: number | 'auto') {\n    this.itemHeightSignal.set(v);\n  }\n\n  /**\n   * Template for rendering individual items in the list.\n   */\n  @Input()\n  itemTemplate: TemplateRef<unknown>;\n\n  /**\n   * Template to display when the list is empty.\n   */\n  @Input()\n  emptyTemplate: TemplateRef<unknown>;\n\n  /**\n   * Template to show while the list is loading.\n   */\n  @Input()\n  loadingTemplate: TemplateRef<unknown>;\n\n  /**\n   * Emitted when the index of the scrolled item changes.\n   *\n   * @event\n   */\n  @Output()\n  onScrolledIndexChanged: EventEmitter<AXListScrollIndexChanged> = new EventEmitter<AXListScrollIndexChanged>();\n\n  /**\n   * Specifies whether the checkbox is enabled.\n   *\n   *  @defaultValue true\n   */\n  @Input()\n  checkbox = true;\n\n  /**\n   *  @ignore\n   */\n  protected listDataSource: AXListDataSource<unknown>;\n\n  /**\n   *  @ignore\n   */\n  protected isLoading = signal(true);\n\n  /**\n   *  @ignore\n   */\n  protected hasItems = false;\n\n  /**\n   *  @ignore\n   */\n  private lastIndex = 0;\n\n  /**\n   *  @ignore\n   */\n  private postponeFocus = false;\n\n  /**\n   *  @ignore\n   */\n  @ViewChild(CdkVirtualScrollViewport)\n  private viewport: CdkVirtualScrollViewport;\n\n  trackByIdx(i) {\n    return i;\n  }\n\n  /**\n   *  @ignore\n   */\n  override ngOnInit() {\n    super.ngOnInit();\n    this._setupListDataSource();\n    this._isInitialized = true;\n  }\n\n  /**\n   *  @ignore\n   */\n  protected override ngOnDestroy(): void {\n    this._onChangedSub?.unsubscribe();\n    this._onLoadingChangedSub?.unsubscribe();\n    super.ngOnDestroy();\n  }\n\n  /**\n   * (Re)creates the internal `AXListDataSource` wrapper used by `cdkVirtualFor`\n   * and (re)subscribes to the underlying source's events. This is invoked\n   * whenever the `dataSource` input changes so that the list properly reflects\n   * the new source.\n   * @ignore\n   */\n  private _setupListDataSource(): void {\n    this._onChangedSub?.unsubscribe();\n    this._onLoadingChangedSub?.unsubscribe();\n\n    this.listDataSource = new AXListDataSource<unknown>({\n      source: this._dataSource,\n    });\n\n    // Only mirror the source's state if it has already produced data.\n    // Otherwise keep `isLoading=true` so the empty template doesn't render,\n    // which would add `.ax-height-auto` and collapse the container, starving\n    // the virtual viewport of size — preventing `viewChange` from firing and\n    // the data source's `load` callback from ever being invoked.\n    const hasLoadedItems = this._dataSource.totalCount > 0;\n    this.isLoading.set(hasLoadedItems ? this._dataSource.isLoading : true);\n    this.hasItems = hasLoadedItems;\n\n    this._onLoadingChangedSub = this.listDataSource.source.onLoadingChanged.subscribe((data) => {\n      this.isLoading.set(data);\n    });\n    this._onChangedSub = this.listDataSource.source.onChanged.subscribe((data) => {\n      this.hasItems = data.totalCount > 0;\n      setTimeout(() => {\n        this.render();\n      }, 100);\n    });\n  }\n  /**\n   *  @ignore\n   */\n  _handleOnItemClick(e: MouseEvent, item: any) {\n    if (this.readonly || this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n    if (this.isItemDisabled(item)) {\n      return;\n    }\n\n    this.tooltipRef().forEach((item) => {\n      item.close();\n    });\n    this.toggleSelect(item);\n    this.onItemClick.emit({\n      component: this,\n      item,\n      htmlElement: e.target as HTMLElement,\n      isUserInteraction: true,\n      nativeEvent: e,\n    });\n  }\n\n  /**\n   *  @ignore\n   */\n  @HostListener('keydown', ['$event'])\n  _handleKeydown(e: KeyboardEvent) {\n    if ((e.code === 'ArrowDown' || e.code === 'ArrowUp') && this.hasItems) {\n      this.focusItemByNav(e.key === 'ArrowDown' ? 1 : -1);\n      e.preventDefault();\n    }\n    if ((e.code === 'Space' || e.code === 'Enter') && this.hasItems) {\n      if (this.readonly || this.disabled) {\n        e.preventDefault();\n        e.stopPropagation();\n        return;\n      }\n      if (isPlatformBrowser(this.platformID)) {\n        const id = this.document.activeElement?.closest('li')?.dataset['id'];\n        this.toggleSelect(id);\n      }\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  }\n\n  /**\n   *  @ignore\n   */\n  private focusItemByNav(sign: -1 | 1): void {\n    if (isPlatformBrowser(this.platformID)) {\n      const list = this.getHostElement().querySelector('ul');\n      const fn = (s) => list.querySelector<HTMLDivElement>(s);\n      const itemDiv: HTMLElement = this.document.activeElement?.closest('li') || fn(`li.ax-state-selected`) || fn(`li`);\n      const next = (sign == 1 ? itemDiv.nextElementSibling : itemDiv.previousElementSibling) as HTMLElement;\n      if (next) {\n        next.focus();\n      }\n    }\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleOnscrolledIndexChange(e: number) {\n    this.lastIndex = e;\n    this.onScrolledIndexChanged.emit({\n      component: this,\n      index: this.lastIndex,\n      isUserInteraction: true,\n    });\n  }\n\n  /**\n   * Retrieves an item from the data source based on the provided key.\n   *\n   * @param key The key used to identify the item.\n   * @ignore\n   */\n  getItemByKey(key: unknown): Promise<unknown> | unknown {\n    return this.dataSource.find(key);\n  }\n\n  /**\n   * Renders the component by updating the viewport size, scrolling to the last index, and optionally focusing the element.\n   */\n  public render() {\n    this.viewport.checkViewportSize();\n    this.viewport.scrollToIndex(this.lastIndex);\n    if (this.postponeFocus) {\n      this.postponeFocus = false;\n      this.focus();\n    }\n  }\n\n  /**\n   * Refreshes the list by clearing the selection cache and reloading the data source.\n   * @ignore\n   */\n  public refresh(clearSelection = true) {\n    if (clearSelection) {\n      this.clearSelectionCache();\n    }\n    this.listDataSource.refresh();\n  }\n\n  /**\n   * Scrolls the viewport to the specified item index.\n   * @param index The index of the item to scroll to.\n   * @ignore\n   */\n  public scrollToIndex(index: number) {\n    this.viewport.scrollToIndex(index);\n  }\n  /**\n   * Sets focus to the first selectable list item. If no item is available, postpones focus.\n   */\n  override focus(): void {\n    const list = this.getHostElement().querySelector('ul');\n    const focusable =\n      list.querySelector<HTMLElement>('li.ax-state-selected') ?? list.querySelector<HTMLElement>('li.list-item');\n    if (focusable) {\n      focusable.focus();\n    } else {\n      this.postponeFocus = true;\n    }\n  }\n\n  /**\n   * Determines whether to show the empty template based on the presence of items and loading state.\n   * @ignore\n   */\n  showEmptyTemplate = computed(() => this.isLoading() === false && this.emptyTemplate && this.hasItems === false);\n}\n","<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","import { NgModule } from '@angular/core';\nimport { AXListComponent } from './list.component';\n\n@NgModule({\n  imports: [AXListComponent],\n  exports: [AXListComponent],\n})\nexport class AXListModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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.1 | 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.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 }); }
 }
 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.1 | 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.2.4 | 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

@@ -1,8 +1,9 @@
 import { AXComponent, MXBaseComponent } from '@acorex/cdk/common';
 import * as i0 from '@angular/core';
-import { HostBinding, Input, ViewEncapsulation, Component, InjectionToken, inject, EventEmitter, Output, ChangeDetectionStrategy, Injectable, ElementRef, Directive, NgModule } from '@angular/core';
+import { HostBinding, Input, ViewEncapsulation, Component, InjectionToken, inject, EventEmitter, Output, ChangeDetectionStrategy, ComponentRef, Injectable, ElementRef, Directive, NgModule } from '@angular/core';
 import { ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
-import { Dialog } from '@angular/cdk/dialog';
+import { AXOverlayService } from '@acorex/cdk/overlay';
+import { DOCUMENT } from '@angular/common';
 import { asyncScheduler, BehaviorSubject } from 'rxjs';
 import { observeOn, finalize } from 'rxjs/operators';
 
@@ -46,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.1 | 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.2.4 | 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,
@@ -61,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.1 | 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.2.4 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { text: [{
                 type: Input
             }], color: [{
@@ -145,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.1 | 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);background-color:var(--color-surface,rgba(var(--ax-sys-color-surface-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 }); }
 }
 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.1 | 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);background-color:var(--color-surface,rgba(var(--ax-sys-color-surface-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"] }]
         }], propDecorators: { visibleChange: [{
                 type: Output
             }], visible: [{
@@ -169,7 +170,9 @@ class AXLoadingService {
         // Both loading state maps are kept in-sync such that
         // they can be used by both sync and async methods.
         this.loadingStates$ = new WeakMap();
-        this.dialog = inject(Dialog);
+        this.overlayService = inject(AXOverlayService);
+        this.document = inject(DOCUMENT);
+        this.activeOverlays = new Map();
     }
     /**
      * Shows a modal loading overlay.
@@ -181,34 +184,70 @@ class AXLoadingService {
      * @returns number Unique loading reference id to be used with {@link hide}.
      */
     show(config) {
-        const ce = (config?.location ?? document.body);
-        const dialogRef = this.dialog.open(AXLoadingComponent, {
-            hasBackdrop: true,
-            disableClose: true,
-            restoreFocus: true,
-            closeOnDestroy: true,
-            closeOnNavigation: true,
-            ariaModal: true,
-            role: 'alertdialog',
-            panelClass: ['ax-loading-pane', 'animate-fadeIn'],
-            backdropClass: ['ax-loading-overlay-backdrop', 'animate-fadeIn'],
-        });
+        const ce = (config?.location ?? this.document.body);
         const id = new Date().getTime();
-        dialogRef.componentInstance.visible = true;
-        dialogRef.componentInstance.id = id.toString();
-        if (ce != document.body) {
-            const bg = dialogRef.overlayRef.backdropElement;
-            const ov = dialogRef.overlayRef.overlayElement;
-            ce.style.position = 'relative';
-            ov.style.position = 'absolute';
-            ce.appendChild(bg);
-            ce.appendChild(ov);
-            setTimeout(() => {
-                ov.style.position = 'absolute';
-            });
-        }
+        const isElementLevel = ce !== this.document.body;
+        const inputs = {};
+        if (config?.type)
+            inputs['type'] = config.type;
+        if (config?.context)
+            inputs['context'] = config.context;
+        const entry = {
+            dispose: () => {
+                /* noop until overlay is created */
+            },
+        };
+        this.activeOverlays.set(id, entry);
+        this.overlayService
+            .create(AXLoadingComponent, {
+            inputs,
+            backdrop: isElementLevel
+                ? { enabled: false }
+                : {
+                    enabled: true,
+                    background: true,
+                    closeOnClick: false,
+                    backdropClass: 'ax-loading-overlay-backdrop',
+                },
+            panelClass: ['ax-loading-pane', 'ax-animate-fadeIn'],
+        })
+            .then((overlayRef) => {
+            if (overlayRef.instance instanceof ComponentRef) {
+                const instance = overlayRef.instance.instance;
+                instance.visible = true;
+                instance.id = id.toString();
+            }
+            if (isElementLevel) {
+                const backdrop = this.document.createElement('div');
+                backdrop.classList.add('ax-loading-overlay-backdrop', 'ax-animate-fadeIn');
+                backdrop.style.position = 'absolute';
+                backdrop.style.top = '0';
+                backdrop.style.left = '0';
+                backdrop.style.width = '100%';
+                backdrop.style.height = '100%';
+                ce.style.position = 'relative';
+                const ov = overlayRef.overlayElement;
+                if (ov) {
+                    ov.style.position = 'absolute';
+                    ce.appendChild(backdrop);
+                    ce.appendChild(ov);
+                    setTimeout(() => {
+                        ov.style.position = 'absolute';
+                    });
+                }
+                entry.dispose = () => {
+                    backdrop.remove();
+                    overlayRef.dispose();
+                };
+            }
+            else {
+                entry.dispose = () => overlayRef.dispose();
+            }
+            if (!this.activeOverlays.has(id)) {
+                entry.dispose();
+            }
+        });
         return id;
-        // TODO: diabled focus and click, maybe we need a service and directive for it
     }
     /**
      * Hides a previously shown modal loading overlay.
@@ -216,9 +255,10 @@ class AXLoadingService {
      * @param id Loading reference id returned by {@link show}.
      */
     hide(id) {
-        const f = this.dialog.openDialogs.find((c) => c.componentInstance.id === id.toString());
-        if (f) {
-            f.close();
+        const entry = this.activeOverlays.get(id);
+        if (entry) {
+            entry.dispose();
+            this.activeOverlays.delete(id);
         }
     }
     /**