@acorex/components 21.0.2-next.51 → 21.0.2-next.53

package/fesm2022/acorex-components-list.mjs

@@ -141,7 +141,7 @@ class AXListComponent extends MXSelectionValueComponent {
             this.hasItems = data.totalCount > 0;
             setTimeout(() => {
                 this.render();
-            }, 100);
+            }, 0);
         });
     }
     /**
@@ -225,16 +225,66 @@ class AXListComponent extends MXSelectionValueComponent {
         return this.dataSource.find(key);
     }
     /**
-     * Renders the component by updating the viewport size, scrolling to the last index, and optionally focusing the element.
+     * Renders the component by updating the viewport size, scrolling to the selected item, and optionally focusing the element.
      */
     render() {
-        this.viewport.checkViewportSize();
-        this.viewport.scrollToIndex(this.lastIndex);
+        if (!this.viewport) {
+            return;
+        }
+        this.scrollTo();
         if (this.postponeFocus) {
             this.postponeFocus = false;
             this.focus();
         }
     }
+    /**
+     * Scrolls the viewport to the currently selected list item.
+     */
+    scrollTo() {
+        if (!this.viewport || !isPlatformBrowser(this.platformID)) {
+            return;
+        }
+        this.viewport.checkViewportSize();
+        requestAnimationFrame(() => {
+            const index = this.resolveSelectedIndex();
+            if (index >= 0) {
+                this.lastIndex = index;
+                this.viewport.scrollToIndex(index);
+            }
+        });
+    }
+    /**
+     * Resolves the selected item index from values already loaded in the list source.
+     * Only considers loaded entries so lazy sources are not scanned by a global index.
+     * @ignore
+     */
+    resolveSelectedIndex() {
+        if (this.multiple || !this.listDataSource) {
+            return -1;
+        }
+        const selectedValue = this.getSelectedKey();
+        if (selectedValue == null) {
+            return -1;
+        }
+        const items = this.listDataSource.source.cachedItems;
+        for (let index = 0; index < items.length; index++) {
+            const item = items[index];
+            if (item != null && this.getValue(item) == selectedValue) {
+                return index;
+            }
+        }
+        return -1;
+    }
+    /**
+     * @ignore
+     */
+    getSelectedKey() {
+        const item = this.selectedItems[0] ?? this.value;
+        if (item == null) {
+            return null;
+        }
+        return typeof item === 'object' ? this.getValue(item) : item;
+    }
     /**
      * Refreshes the list by clearing the selection cache and reloading the data source.
      * @ignore

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  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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"}
+{"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      }, 0);\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 selected item, and optionally focusing the element.\n   */\n  public render() {\n    if (!this.viewport) {\n      return;\n    }\n\n    this.scrollTo();\n    if (this.postponeFocus) {\n      this.postponeFocus = false;\n      this.focus();\n    }\n  }\n\n  /**\n   * Scrolls the viewport to the currently selected list item.\n   */\n  public scrollTo(): void {\n    if (!this.viewport || !isPlatformBrowser(this.platformID)) {\n      return;\n    }\n\n    this.viewport.checkViewportSize();\n\n    requestAnimationFrame(() => {\n      const index = this.resolveSelectedIndex();\n      if (index >= 0) {\n        this.lastIndex = index;\n        this.viewport.scrollToIndex(index);\n      }\n    });\n  }\n\n  /**\n   * Resolves the selected item index from values already loaded in the list source.\n   * Only considers loaded entries so lazy sources are not scanned by a global index.\n   * @ignore\n   */\n  private resolveSelectedIndex(): number {\n    if (this.multiple || !this.listDataSource) {\n      return -1;\n    }\n\n    const selectedValue = this.getSelectedKey();\n    if (selectedValue == null) {\n      return -1;\n    }\n\n    const items = this.listDataSource.source.cachedItems;\n\n    for (let index = 0; index < items.length; index++) {\n      const item = items[index];\n      if (item != null && this.getValue(item) == selectedValue) {\n        return index;\n      }\n    }\n\n    return -1;\n  }\n\n  /**\n   * @ignore\n   */\n  private getSelectedKey(): unknown {\n    const item = this.selectedItems[0] ?? this.value;\n    if (item == null) {\n      return null;\n    }\n\n    return typeof item === 'object' ? this.getValue(item) : item;\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

@@ -170,6 +170,7 @@ class AXLoadingDialogService {
         };
         this.overlayService
             .create(AXLoadingDialogComponent, {
+            zIndexBase: 2000,
             inputs: {
                 data: options,
                 onClose: closeDialog,

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

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-loading-dialog.mjs","sources":["../../../../packages/components/loading-dialog/src/lib/loading-dialog.component.ts","../../../../packages/components/loading-dialog/src/lib/loading-dialog.component.html","../../../../packages/components/loading-dialog/src/lib/loading-dialog.module.ts","../../../../packages/components/loading-dialog/src/lib/loading-dialog.service.ts","../../../../packages/components/loading-dialog/src/acorex-components-loading-dialog.ts"],"sourcesContent":["import {\n  AXAutoFocusDirective,\n  AXComponent,\n  AXHotkeyDirective,\n  AXStyleColorType,\n  MXBaseComponent,\n} from '@acorex/cdk/common';\nimport { AXButtonComponent } from '@acorex/components/button';\nimport { AXDecoratorGenericComponent } from '@acorex/components/decorators';\nimport { AXLoadingComponent } from '@acorex/components/loading';\nimport { AXProgressBarComponent } from '@acorex/components/progress-bar';\nimport { AXTranslatorPipe } from '@acorex/core/translation';\nimport { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, WritableSignal, input, signal } from '@angular/core';\nimport { AXLoadingDialogButtonItem, AXLoadingDialogConfig } from './loading-dialog.class';\n\n/**\n * Represents a loading dialog component with custom styles and encapsulation.\n * @category components\n */\n@Component({\n  selector: 'ax-loading-dialog',\n  templateUrl: './loading-dialog.component.html',\n  styleUrls: ['./loading-dialog.component.compiled.css'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [\n    AXDecoratorGenericComponent,\n    AXProgressBarComponent,\n    AXButtonComponent,\n    AXHotkeyDirective,\n    AXAutoFocusDirective,\n    AXLoadingComponent,\n    AXTranslatorPipe,\n    AsyncPipe,\n  ],\n  providers: [{ provide: AXComponent, useExisting: AXLoadingDialogComponent }],\n})\nexport class AXLoadingDialogComponent extends MXBaseComponent implements OnInit {\n  /** Loading dialog configuration data */\n  data = input.required<AXLoadingDialogConfig>();\n\n  /** @internal Callback function to close the dialog */\n  onClose = input<() => void>();\n\n  /** @ignore */\n  protected progressText: WritableSignal<string> = signal('');\n\n  /** @ignore */\n  protected progressStatus: WritableSignal<string> = signal('');\n\n  /** @ignore */\n  protected progressColor: WritableSignal<AXStyleColorType> = signal('primary');\n\n  /** @ignore */\n  protected dialogTitle: WritableSignal<string> = signal('');\n\n  /** @ignore */\n  protected progressValue: WritableSignal<number> = signal(0);\n\n  override ngOnInit(): void {\n    super.ngOnInit();\n    // Initialize signals from input data\n    const config = this.data();\n    this.progressText.set(config.text ?? '');\n    this.progressStatus.set(config.status ?? '');\n    this.progressColor.set(config.progressColor ?? 'primary');\n    this.dialogTitle.set(config.title ?? '');\n    this.progressValue.set(config.progressValue ?? 0);\n  }\n\n  /**\n   * Closes the loading dialog.\n   *\n   * @returns void - No return value. The dialog is closed and control returns to the caller.\n   */\n  close() {\n    const closeCallback = this.onClose();\n    if (closeCallback) {\n      closeCallback();\n    }\n  }\n\n  /**\n   * Sets the displayed progress text inside the dialog.\n   *\n   * @param text The text to display under the progress bar.\n   * @returns void\n   */\n  setProgressText(text: string) {\n    this.progressText.set(text);\n  }\n\n  /**\n   * Sets the status text, typically representing the current step out of total steps (e.g., \"5/10\").\n   *\n   * @param status The status text to display.\n   * @returns void\n   */\n  setProgressStatus(status: string) {\n    this.progressStatus.set(status);\n  }\n\n  /**\n   * Sets the color used by the progress indicator.\n   *\n   * @param color The color token to apply to the progress UI.\n   * @returns void\n   */\n  setProgressColor(color: AXStyleColorType) {\n    this.progressColor.set(color);\n  }\n\n  /**\n   * Sets the dialog title text.\n   *\n   * @param text The title text to display at the top of the dialog.\n   * @returns void\n   */\n  setDialogTitle(text: string) {\n    this.dialogTitle.set(text);\n  }\n\n  /**\n   * Sets the numeric progress value.\n   *\n   * @param value A number in the range 0–100 representing the current progress.\n   * @returns void\n   */\n  setProgressValue(value: number) {\n    this.progressValue.set(value);\n  }\n\n  /** @ignore */\n  protected _handleButtonClick(button: AXLoadingDialogButtonItem) {\n    if (button.onClick) {\n      button.onClick({ source: button });\n    }\n  }\n\n  /** @ignore */\n  protected _hasAutoFocus(button: AXLoadingDialogButtonItem) {\n    const buttons = this.data().buttons;\n    if (!buttons || buttons.length === 0) return false;\n\n    const autoFocusItem = buttons.find((item) => item.autofocus === true);\n    if (autoFocusItem && autoFocusItem.text === button.text) {\n      return true;\n    }\n    if (!autoFocusItem) {\n      if (buttons.length > 0) {\n        buttons[0].autofocus = true;\n        return buttons[0].text === button.text;\n      }\n    }\n    return false;\n  }\n}\n","<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  <div class=\"button-wrapper\">\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        class=\"button-item\"\n      >\n        @if (button.loading) {\n          <ax-loading></ax-loading>\n        }\n      </ax-button>\n    }\n  </div>\n</ax-footer>\n","import { NgModule } from '@angular/core';\nimport { AXLoadingDialogComponent } from './loading-dialog.component';\n\n@NgModule({\n  imports: [AXLoadingDialogComponent],\n  exports: [AXLoadingDialogComponent],\n})\nexport class AXLoadingDialogModule {}\n","import { AXStyleColorType } from '@acorex/cdk/common';\nimport { AXOverlayService } from '@acorex/cdk/overlay';\nimport { ComponentRef, Injectable, inject } from '@angular/core';\nimport { AXLoadingDialogConfig, AXLoadingDialogInternalRef, AXLoadingDialogRef } from './loading-dialog.class';\nimport { AXLoadingDialogComponent } from './loading-dialog.component';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class AXLoadingDialogService {\n  private overlayService = inject(AXOverlayService);\n\n  /**\n   * Opens a loading dialog with the specified configuration.\n   *\n   * @param options Configuration for the loading dialog, including title, progress mode, and optional initial values.\n   * @returns AXLoadingDialogRef - A reference with helper methods to control the dialog lifecycle and UI (close, setProgressValue, setProgressText, setDialogTitle, setProgressColor, setProgressStatus).\n   */\n  show(options: AXLoadingDialogConfig): AXLoadingDialogRef {\n    let internalRef: AXLoadingDialogInternalRef;\n    let componentInstance: AXLoadingDialogComponent | null = null;\n\n    const closeDialog = () => {\n      if (internalRef) {\n        internalRef.overlayRef.dispose();\n      }\n    };\n\n    this.overlayService\n      .create<AXLoadingDialogComponent>(AXLoadingDialogComponent, {\n        inputs: {\n          data: options,\n          onClose: closeDialog,\n        },\n        backdrop: {\n          enabled: true,\n          background: true,\n          closeOnClick: false, // disableClose: true equivalent\n        },\n        panelClass: ['ax-loading-dialog-panel', 'animate-fadeIn'],\n      })\n      .then((overlayRef) => {\n        internalRef = {\n          overlayRef,\n          close: closeDialog,\n        };\n\n        // Get the component instance for method calls\n        if (overlayRef.instance instanceof ComponentRef) {\n          componentInstance = overlayRef.instance.instance as AXLoadingDialogComponent;\n        }\n      });\n\n    // Return the dialog ref with methods that will work once the component is created\n    return {\n      close: () => closeDialog(),\n      setProgressValue: (value: number) => componentInstance?.setProgressValue(value),\n      setDialogTitle: (text: string) => componentInstance?.setDialogTitle(text),\n      setProgressText: (text: string) => componentInstance?.setProgressText(text),\n      setProgressStatus: (status: string) => componentInstance?.setProgressStatus(status),\n      setProgressColor: (color: AXStyleColorType) => componentInstance?.setProgressColor(color),\n    };\n  }\n}\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-loading-dialog.mjs","sources":["../../../../packages/components/loading-dialog/src/lib/loading-dialog.component.ts","../../../../packages/components/loading-dialog/src/lib/loading-dialog.component.html","../../../../packages/components/loading-dialog/src/lib/loading-dialog.module.ts","../../../../packages/components/loading-dialog/src/lib/loading-dialog.service.ts","../../../../packages/components/loading-dialog/src/acorex-components-loading-dialog.ts"],"sourcesContent":["import {\n  AXAutoFocusDirective,\n  AXComponent,\n  AXHotkeyDirective,\n  AXStyleColorType,\n  MXBaseComponent,\n} from '@acorex/cdk/common';\nimport { AXButtonComponent } from '@acorex/components/button';\nimport { AXDecoratorGenericComponent } from '@acorex/components/decorators';\nimport { AXLoadingComponent } from '@acorex/components/loading';\nimport { AXProgressBarComponent } from '@acorex/components/progress-bar';\nimport { AXTranslatorPipe } from '@acorex/core/translation';\nimport { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, input, signal } from '@angular/core';\nimport { AXLoadingDialogButtonItem, AXLoadingDialogConfig } from './loading-dialog.class';\n\n/**\n * Represents a loading dialog component with custom styles and encapsulation.\n * @category components\n */\n@Component({\n  selector: 'ax-loading-dialog',\n  templateUrl: './loading-dialog.component.html',\n  styleUrls: ['./loading-dialog.component.compiled.css'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [\n    AXDecoratorGenericComponent,\n    AXProgressBarComponent,\n    AXButtonComponent,\n    AXHotkeyDirective,\n    AXAutoFocusDirective,\n    AXLoadingComponent,\n    AXTranslatorPipe,\n    AsyncPipe,\n  ],\n  providers: [{ provide: AXComponent, useExisting: AXLoadingDialogComponent }],\n})\nexport class AXLoadingDialogComponent extends MXBaseComponent implements OnInit {\n  /** Loading dialog configuration data */\n  data = input.required<AXLoadingDialogConfig>();\n\n  /** @internal Callback function to close the dialog */\n  onClose = input<() => void>();\n\n  /** @ignore */\n  protected progressText = signal('');\n\n  /** @ignore */\n  protected progressStatus = signal('');\n\n  /** @ignore */\n  protected progressColor = signal<AXStyleColorType>('primary');\n\n  /** @ignore */\n  protected dialogTitle = signal('');\n\n  /** @ignore */\n  protected progressValue = signal(0);\n\n  override ngOnInit(): void {\n    super.ngOnInit();\n    // Initialize signals from input data\n    const config = this.data();\n    this.progressText.set(config.text ?? '');\n    this.progressStatus.set(config.status ?? '');\n    this.progressColor.set(config.progressColor ?? 'primary');\n    this.dialogTitle.set(config.title ?? '');\n    this.progressValue.set(config.progressValue ?? 0);\n  }\n\n  /**\n   * Closes the loading dialog.\n   *\n   * @returns void - No return value. The dialog is closed and control returns to the caller.\n   */\n  close() {\n    const closeCallback = this.onClose();\n    if (closeCallback) {\n      closeCallback();\n    }\n  }\n\n  /**\n   * Sets the displayed progress text inside the dialog.\n   *\n   * @param text The text to display under the progress bar.\n   * @returns void\n   */\n  setProgressText(text: string) {\n    this.progressText.set(text);\n  }\n\n  /**\n   * Sets the status text, typically representing the current step out of total steps (e.g., \"5/10\").\n   *\n   * @param status The status text to display.\n   * @returns void\n   */\n  setProgressStatus(status: string) {\n    this.progressStatus.set(status);\n  }\n\n  /**\n   * Sets the color used by the progress indicator.\n   *\n   * @param color The color token to apply to the progress UI.\n   * @returns void\n   */\n  setProgressColor(color: AXStyleColorType) {\n    this.progressColor.set(color);\n  }\n\n  /**\n   * Sets the dialog title text.\n   *\n   * @param text The title text to display at the top of the dialog.\n   * @returns void\n   */\n  setDialogTitle(text: string) {\n    this.dialogTitle.set(text);\n  }\n\n  /**\n   * Sets the numeric progress value.\n   *\n   * @param value A number in the range 0–100 representing the current progress.\n   * @returns void\n   */\n  setProgressValue(value: number) {\n    this.progressValue.set(value);\n  }\n\n  /** @ignore */\n  protected _handleButtonClick(button: AXLoadingDialogButtonItem) {\n    if (button.onClick) {\n      button.onClick({ source: button });\n    }\n  }\n\n  /** @ignore */\n  protected _hasAutoFocus(button: AXLoadingDialogButtonItem) {\n    const buttons = this.data().buttons;\n    if (!buttons || buttons.length === 0) return false;\n\n    const autoFocusItem = buttons.find((item) => item.autofocus === true);\n    if (autoFocusItem && autoFocusItem.text === button.text) {\n      return true;\n    }\n    if (!autoFocusItem) {\n      if (buttons.length > 0) {\n        buttons[0].autofocus = true;\n        return buttons[0].text === button.text;\n      }\n    }\n    return false;\n  }\n}\n","<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  <div class=\"button-wrapper\">\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        class=\"button-item\"\n      >\n        @if (button.loading) {\n          <ax-loading></ax-loading>\n        }\n      </ax-button>\n    }\n  </div>\n</ax-footer>\n","import { NgModule } from '@angular/core';\nimport { AXLoadingDialogComponent } from './loading-dialog.component';\n\n@NgModule({\n  imports: [AXLoadingDialogComponent],\n  exports: [AXLoadingDialogComponent],\n})\nexport class AXLoadingDialogModule {}\n","import { AXStyleColorType } from '@acorex/cdk/common';\nimport { AXOverlayService } from '@acorex/cdk/overlay';\nimport { ComponentRef, Injectable, inject } from '@angular/core';\nimport { AXLoadingDialogConfig, AXLoadingDialogInternalRef, AXLoadingDialogRef } from './loading-dialog.class';\nimport { AXLoadingDialogComponent } from './loading-dialog.component';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class AXLoadingDialogService {\n  private overlayService = inject(AXOverlayService);\n\n  /**\n   * Opens a loading dialog with the specified configuration.\n   *\n   * @param options Configuration for the loading dialog, including title, progress mode, and optional initial values.\n   * @returns AXLoadingDialogRef - A reference with helper methods to control the dialog lifecycle and UI (close, setProgressValue, setProgressText, setDialogTitle, setProgressColor, setProgressStatus).\n   */\n  show(options: AXLoadingDialogConfig): AXLoadingDialogRef {\n    let internalRef: AXLoadingDialogInternalRef;\n    let componentInstance: AXLoadingDialogComponent | null = null;\n\n    const closeDialog = () => {\n      if (internalRef) {\n        internalRef.overlayRef.dispose();\n      }\n    };\n\n    this.overlayService\n      .create<AXLoadingDialogComponent>(AXLoadingDialogComponent, {\n        zIndexBase: 2000,\n        inputs: {\n          data: options,\n          onClose: closeDialog,\n        },\n        backdrop: {\n          enabled: true,\n          background: true,\n          closeOnClick: false, // disableClose: true equivalent\n        },\n        panelClass: ['ax-loading-dialog-panel', 'animate-fadeIn'],\n      })\n      .then((overlayRef) => {\n        internalRef = {\n          overlayRef,\n          close: closeDialog,\n        };\n\n        // Get the component instance for method calls\n        if (overlayRef.instance instanceof ComponentRef) {\n          componentInstance = overlayRef.instance.instance as AXLoadingDialogComponent;\n        }\n      });\n\n    // Return the dialog ref with methods that will work once the component is created\n    return {\n      close: () => closeDialog(),\n      setProgressValue: (value: number) => componentInstance?.setProgressValue(value),\n      setDialogTitle: (text: string) => componentInstance?.setDialogTitle(text),\n      setProgressText: (text: string) => componentInstance?.setProgressText(text),\n      setProgressStatus: (status: string) => componentInstance?.setProgressStatus(status),\n      setProgressColor: (color: AXStyleColorType) => componentInstance?.setProgressColor(color),\n    };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -105,7 +105,7 @@ class AXSelectBoxComponent extends classes(MXDropdownBoxBaseComponent, MXSelecti
         if (Array.isArray(v)) {
             this._listDataSource = convertArrayToDataSource(v, {
                 key: this.valueField,
-                pageSize: 10,
+                pageSize: v.length || 10,
             });
         }
         else {
@@ -183,7 +183,6 @@ class AXSelectBoxComponent extends classes(MXDropdownBoxBaseComponent, MXSelecti
     _handleOnOpenedEvent(e) {
         if (!this.renderList()) {
             this.renderList.set(true);
-            this.list?.render();
         }
         else if (!this._listDataSource.totalCount || this._listDataSource.totalCount == 0) {
             this.list?.refresh(false);
@@ -276,7 +275,7 @@ class AXSelectBoxComponent extends classes(MXDropdownBoxBaseComponent, MXSelecti
             this._dropdownWidth.set('100%');
         }
         else {
-            const hostWidth = Math.max(this.getHostElement().offsetWidth, Number(this.dropdownWidth()));
+            const hostWidth = Math.max(this.getHostElement().offsetWidth, Number(this.dropdownWidth()) || 0);
             const itemPx = typeof this.itemHeight() === 'number' ? this.itemHeight() : 40;
             const maxItems = Number(this.maxVisibleItems());
             this._dropdownWidth.set(`${hostWidth}px`);
@@ -296,8 +295,39 @@ class AXSelectBoxComponent extends classes(MXDropdownBoxBaseComponent, MXSelecti
             this.setDropdownSize(this._listDataSource.totalCount);
             this.updateDropdownPosition();
             this.list?.render();
+            if (!this.isItemTruncated()) {
+                setTimeout(() => {
+                    this._fitDropdownToContent();
+                    setTimeout(() => this._fitDropdownToContent(), 100);
+                });
+            }
         });
     }
+    _fitDropdownToContent() {
+        const panel = this.panel?.nativeElement;
+        if (!panel)
+            return;
+        const hostWidth = Math.max(this.getHostElement().offsetWidth, Number(this.dropdownWidth()) || 0);
+        let contentWidth = hostWidth;
+        panel.querySelectorAll('li.list-item').forEach((item) => {
+            const label = item.querySelector('.ax-label-container span');
+            if (label) {
+                const labelContainer = label.parentElement;
+                const horizontalPadding = labelContainer
+                    ? item.offsetWidth - labelContainer.clientWidth
+                    : 0;
+                contentWidth = Math.max(contentWidth, label.scrollWidth + horizontalPadding);
+            }
+            else {
+                contentWidth = Math.max(contentWidth, item.scrollWidth);
+            }
+        });
+        const nextWidth = `${Math.max(hostWidth, contentWidth)}px`;
+        if (this._dropdownWidth() !== nextWidth) {
+            this._dropdownWidth.set(nextWidth);
+            this.dropdown.updatePosition();
+        }
+    }
     internalValueChanged(value) {
         super.internalValueChanged(value);
         this.updateDropdownPosition();
@@ -395,7 +425,7 @@ class AXSelectBoxComponent extends classes(MXDropdownBoxBaseComponent, MXSelecti
                 useClass: MXSelectionBridgeService,
             },
             AXUnsubscriber,
-        ], queries: [{ propertyName: "searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "list", first: true, predicate: AXListComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box\n  [class.ax-state-multiple]=\"multiple\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  [disabled]=\"disabled\"\n  [look]=\"look\"\n  [popoverWidth]=\"dropdownWidth()\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div\n      class=\"ax-editor ax-chips-container ax-content ax-input\"\n      [class.ax-state-multiple]=\"multiple\"\n      [tabindex]=\"tabIndex\"\n    >\n      @if (selectedItems.length === 0) {\n        <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n          {{ placeholder | translate | async }}\n        </div>\n      }\n      @for (item of selectedItems; track $index) {\n        @if (selectedTemplate) {\n          <ng-template\n            [ngTemplateOutlet]=\"selectedTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n          ></ng-template>\n        } @else {\n          @if (multiple) {\n            <!-- <div class=\"bg-surface border-surface flex items-center justify-center gap-2 rounded-full border px-2 py-1\">\n              <ax-text>{{ getDisplayText(item) | translate | async }}</ax-text>\n              @if (!disabled && !readonly && multiple) {\n                <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"></span>\n              }\n            </div> -->\n            <ax-tag [text]=\"getDisplayText(item) | translate | async\" look=\"twotone\">\n              @if (!disabled && !readonly && multiple) {\n                <ax-suffix>\n                  <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"></span>\n                </ax-suffix>\n              }\n            </ax-tag>\n          } @else {\n            {{ getDisplayText(item) | translate | async }}\n          }\n        }\n      }\n    </div>\n    @if (selectedItems?.length && !disabled && !readonly) {\n      <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button-icon\">\n      @if (isLoading()) {\n        <ax-loading></ax-loading>\n      } @else {\n        <span\n          class=\"ax-icon\"\n          [ngClass]=\"{\n            'ax-icon-chevron-down': !isOpen,\n            'ax-icon-chevron-up': isOpen,\n          }\"\n        ></span>\n      }\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-template #search>\n      <ng-content select=\"ax-search-box\"> </ng-content>\n    </ng-template>\n  </ng-container>\n  <ng-container panel>\n    <div #panel class=\"ax-select-box-panel\" [style.min-width]=\"_dropdownWidth()\">\n      @if (dropdown.isActionsheetStyle) {\n        <ax-header class=\"ax-solid\">\n          <ax-title>{{ caption || placeholder || '@acorex:selectbox.popover.title' | translate | async }}</ax-title>\n          <ax-close-button [icon]=\"multiple ? 'ax-icon ax-icon-check' : 'ax-icon ax-icon-close'\"></ax-close-button>\n        </ax-header>\n      }\n      @if (searchBox && (!minRecordsForSearch || _listDataSource.totalCount >= minRecordsForSearch || searchValue())) {\n        <div class=\"ax-search-container\">\n          <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n        </div>\n      }\n      @if (renderList()) {\n        <ax-list\n          [name]=\"name\"\n          [ngModel]=\"value\"\n          [readonly]=\"readonly\"\n          [multiple]=\"multiple\"\n          [textField]=\"textField\"\n          [selectionMode]=\"'item'\"\n          [valueField]=\"valueField\"\n          [itemHeight]=\"itemHeight()\"\n          [itemTemplate]=\"itemTemplate\"\n          [textTemplate]=\"textTemplate\"\n          [dataSource]=\"_listDataSource\"\n          [style.height]=\"_dropdownHeight()\"\n          [loadingTemplate]=\"loadingTemplate\"\n          [isItemTruncated]=\"isItemTruncated()\"\n          [showItemTooltip]=\"showItemTooltip()\"\n          (onItemClick)=\"_handleItemClick($event)\"\n          [emptyTemplate]=\"emptyTemplate ?? empty\"\n          (onValueChanged)=\"_handleValueChanged($event)\"\n          (onItemSelected)=\"_handleItemSelected($event)\"\n        >\n        </ax-list>\n        <ng-template #empty>\n          {{ '@acorex:common.general.no-result-found' | translate | async }}\n        </ng-template>\n      }\n\n      @if (isLoading()) {\n        @if (loadingTemplate) {\n          <ng-template [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n        }\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\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-outline-style:solid;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial}}}@layer components{ax-select-box .ax-editor-container{padding-block:0}ax-select-box .ax-editor-container.ax-state-multiple{padding-inline:var(--spacing,.25rem)}ax-select-box .ax-editor-container.ax-state-multiple .ax-placeholder{padding-inline-start:calc(var(--spacing,.25rem) * 2)}ax-select-box .ax-editor-container .ax-input,ax-select-box .ax-editor-container .ax-editor{padding-block:var(--spacing,.25rem)}ax-select-box ax-dropdown-box.ax-state-multiple{--ax-comp-editor-space-start-size:0;height:auto!important}ax-select-box .ax-chips-container{justify-content:flex-start;align-items:center;gap:var(--ax-comp-select-box-chips-gap,.25rem);min-width:0;padding-top:var(--spacing,.25rem);outline-style:var(--tw-outline-style);-webkit-user-select:none;user-select:none;outline-width:0;outline-color:#0000;flex-wrap:wrap;flex:1;display:flex;cursor:pointer!important}ax-select-box .ax-chips-container .ax-selectbox-input{opacity:0;width:0}ax-select-box .ax-chips-container ax-tag ax-prefix,ax-select-box .ax-chips-container ax-tag ax-suffix{padding:0!important}.ax-select-box-panel{height:fit-content}.ax-select-box-panel .ax-select-box-loading-container{padding:calc(var(--spacing,.25rem) * 4);justify-content:center;align-items:center;display:flex}.ax-select-box-panel>ax-header .ax-icon-check{color:rgba(var(--ax-sys-color-primary-surface))}.ax-select-box-panel>ax-header.ax-solid{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-select-box-panel>ax-header.ax-solid ax-title{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-leading:calc(var(--spacing,.25rem) * 6);line-height:calc(var(--spacing,.25rem) * 6);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}@media(max-width:40rem){.ax-select-box-panel .list-item{padding:calc(var(--spacing,.25rem) * 4)}}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput", "popoverWidth"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "component", type: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onItemSelected", "onScrolledIndexChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXTagComponent, selector: "ax-tag", inputs: ["color", "look", "text"], outputs: ["onClick", "onDblClick", "onContextMenu"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "list", first: true, predicate: AXListComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box\n  [class.ax-state-multiple]=\"multiple\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  [disabled]=\"disabled\"\n  [look]=\"look\"\n  [popoverWidth]=\"dropdownWidth()\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div\n      class=\"ax-editor ax-chips-container ax-content ax-input\"\n      [class.ax-state-multiple]=\"multiple\"\n      [tabindex]=\"tabIndex\"\n    >\n      @if (selectedItems.length === 0) {\n        <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n          {{ placeholder | translate | async }}\n        </div>\n      }\n      @for (item of selectedItems; track $index) {\n        @if (selectedTemplate) {\n          <ng-template\n            [ngTemplateOutlet]=\"selectedTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n          ></ng-template>\n        } @else {\n          @if (multiple) {\n            <!-- <div class=\"bg-surface border-surface flex items-center justify-center gap-2 rounded-full border px-2 py-1\">\n              <ax-text>{{ getDisplayText(item) | translate | async }}</ax-text>\n              @if (!disabled && !readonly && multiple) {\n                <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"></span>\n              }\n            </div> -->\n            <ax-tag [text]=\"getDisplayText(item) | translate | async\" look=\"twotone\">\n              @if (!disabled && !readonly && multiple) {\n                <ax-suffix>\n                  <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"></span>\n                </ax-suffix>\n              }\n            </ax-tag>\n          } @else {\n            {{ getDisplayText(item) | translate | async }}\n          }\n        }\n      }\n    </div>\n    @if (selectedItems?.length && !disabled && !readonly) {\n      <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button-icon\">\n      @if (isLoading()) {\n        <ax-loading></ax-loading>\n      } @else {\n        <span\n          class=\"ax-icon\"\n          [ngClass]=\"{\n            'ax-icon-chevron-down': !isOpen,\n            'ax-icon-chevron-up': isOpen,\n          }\"\n        ></span>\n      }\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-template #search>\n      <ng-content select=\"ax-search-box\"> </ng-content>\n    </ng-template>\n  </ng-container>\n  <ng-container panel>\n    <div\n      #panel\n      class=\"ax-select-box-panel\"\n      [class.ax-no-truncate]=\"!isItemTruncated()\"\n      [style.min-width]=\"_dropdownWidth()\"\n    >\n      @if (dropdown.isActionsheetStyle) {\n        <ax-header class=\"ax-solid\">\n          <ax-title>{{ caption || placeholder || '@acorex:selectbox.popover.title' | translate | async }}</ax-title>\n          <ax-close-button [icon]=\"multiple ? 'ax-icon ax-icon-check' : 'ax-icon ax-icon-close'\"></ax-close-button>\n        </ax-header>\n      }\n      @if (searchBox && (!minRecordsForSearch || _listDataSource.totalCount >= minRecordsForSearch || searchValue())) {\n        <div class=\"ax-search-container\">\n          <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n        </div>\n      }\n      @if (renderList()) {\n        <ax-list\n          [name]=\"name\"\n          [ngModel]=\"value\"\n          [readonly]=\"readonly\"\n          [multiple]=\"multiple\"\n          [textField]=\"textField\"\n          [selectionMode]=\"'item'\"\n          [valueField]=\"valueField\"\n          [itemHeight]=\"itemHeight()\"\n          [itemTemplate]=\"itemTemplate\"\n          [textTemplate]=\"textTemplate\"\n          [dataSource]=\"_listDataSource\"\n          [style.height]=\"_dropdownHeight()\"\n          [loadingTemplate]=\"loadingTemplate\"\n          [isItemTruncated]=\"isItemTruncated()\"\n          [showItemTooltip]=\"showItemTooltip()\"\n          (onItemClick)=\"_handleItemClick($event)\"\n          [emptyTemplate]=\"emptyTemplate ?? empty\"\n          (onValueChanged)=\"_handleValueChanged($event)\"\n          (onItemSelected)=\"_handleItemSelected($event)\"\n        >\n        </ax-list>\n        <ng-template #empty>\n          {{ '@acorex:common.general.no-result-found' | translate | async }}\n        </ng-template>\n      }\n\n      @if (isLoading()) {\n        @if (loadingTemplate) {\n          <ng-template [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n        }\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\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-outline-style:solid;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial}}}@layer components{ax-select-box .ax-editor-container{padding-block:0}ax-select-box .ax-editor-container.ax-state-multiple{padding-inline:var(--spacing,.25rem)}ax-select-box .ax-editor-container.ax-state-multiple .ax-placeholder{padding-inline-start:calc(var(--spacing,.25rem) * 2)}ax-select-box .ax-editor-container .ax-input,ax-select-box .ax-editor-container .ax-editor{padding-block:var(--spacing,.25rem)}ax-select-box ax-dropdown-box.ax-state-multiple{--ax-comp-editor-space-start-size:0;height:auto!important}ax-select-box .ax-chips-container{justify-content:flex-start;align-items:center;gap:var(--ax-comp-select-box-chips-gap,.25rem);min-width:0;padding-top:var(--spacing,.25rem);outline-style:var(--tw-outline-style);-webkit-user-select:none;user-select:none;outline-width:0;outline-color:#0000;flex-wrap:wrap;flex:1;display:flex;cursor:pointer!important}ax-select-box .ax-chips-container .ax-selectbox-input{opacity:0;width:0}ax-select-box .ax-chips-container ax-tag ax-prefix,ax-select-box .ax-chips-container ax-tag ax-suffix{padding:0!important}.ax-select-box-panel{height:fit-content}.ax-select-box-panel.ax-no-truncate .ax-label-container span:not(.ax-truncated){white-space:nowrap}.ax-select-box-panel .ax-select-box-loading-container{padding:calc(var(--spacing,.25rem) * 4);justify-content:center;align-items:center;display:flex}.ax-select-box-panel>ax-header .ax-icon-check{color:rgba(var(--ax-sys-color-primary-surface))}.ax-select-box-panel>ax-header.ax-solid{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-select-box-panel>ax-header.ax-solid ax-title{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-leading:calc(var(--spacing,.25rem) * 6);line-height:calc(var(--spacing,.25rem) * 6);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}@media(max-width:40rem){.ax-select-box-panel .list-item{padding:calc(var(--spacing,.25rem) * 4)}}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput", "popoverWidth"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "component", type: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onItemSelected", "onScrolledIndexChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXTagComponent, selector: "ax-tag", inputs: ["color", "look", "text"], outputs: ["onClick", "onDblClick", "onContextMenu"] }, { 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.2.9", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
@@ -459,7 +489,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AsyncPipe,
                         AXTranslatorPipe,
                         AXTagComponent,
-                    ], template: "<ax-dropdown-box\n  [class.ax-state-multiple]=\"multiple\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  [disabled]=\"disabled\"\n  [look]=\"look\"\n  [popoverWidth]=\"dropdownWidth()\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div\n      class=\"ax-editor ax-chips-container ax-content ax-input\"\n      [class.ax-state-multiple]=\"multiple\"\n      [tabindex]=\"tabIndex\"\n    >\n      @if (selectedItems.length === 0) {\n        <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n          {{ placeholder | translate | async }}\n        </div>\n      }\n      @for (item of selectedItems; track $index) {\n        @if (selectedTemplate) {\n          <ng-template\n            [ngTemplateOutlet]=\"selectedTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n          ></ng-template>\n        } @else {\n          @if (multiple) {\n            <!-- <div class=\"bg-surface border-surface flex items-center justify-center gap-2 rounded-full border px-2 py-1\">\n              <ax-text>{{ getDisplayText(item) | translate | async }}</ax-text>\n              @if (!disabled && !readonly && multiple) {\n                <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"></span>\n              }\n            </div> -->\n            <ax-tag [text]=\"getDisplayText(item) | translate | async\" look=\"twotone\">\n              @if (!disabled && !readonly && multiple) {\n                <ax-suffix>\n                  <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"></span>\n                </ax-suffix>\n              }\n            </ax-tag>\n          } @else {\n            {{ getDisplayText(item) | translate | async }}\n          }\n        }\n      }\n    </div>\n    @if (selectedItems?.length && !disabled && !readonly) {\n      <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button-icon\">\n      @if (isLoading()) {\n        <ax-loading></ax-loading>\n      } @else {\n        <span\n          class=\"ax-icon\"\n          [ngClass]=\"{\n            'ax-icon-chevron-down': !isOpen,\n            'ax-icon-chevron-up': isOpen,\n          }\"\n        ></span>\n      }\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-template #search>\n      <ng-content select=\"ax-search-box\"> </ng-content>\n    </ng-template>\n  </ng-container>\n  <ng-container panel>\n    <div #panel class=\"ax-select-box-panel\" [style.min-width]=\"_dropdownWidth()\">\n      @if (dropdown.isActionsheetStyle) {\n        <ax-header class=\"ax-solid\">\n          <ax-title>{{ caption || placeholder || '@acorex:selectbox.popover.title' | translate | async }}</ax-title>\n          <ax-close-button [icon]=\"multiple ? 'ax-icon ax-icon-check' : 'ax-icon ax-icon-close'\"></ax-close-button>\n        </ax-header>\n      }\n      @if (searchBox && (!minRecordsForSearch || _listDataSource.totalCount >= minRecordsForSearch || searchValue())) {\n        <div class=\"ax-search-container\">\n          <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n        </div>\n      }\n      @if (renderList()) {\n        <ax-list\n          [name]=\"name\"\n          [ngModel]=\"value\"\n          [readonly]=\"readonly\"\n          [multiple]=\"multiple\"\n          [textField]=\"textField\"\n          [selectionMode]=\"'item'\"\n          [valueField]=\"valueField\"\n          [itemHeight]=\"itemHeight()\"\n          [itemTemplate]=\"itemTemplate\"\n          [textTemplate]=\"textTemplate\"\n          [dataSource]=\"_listDataSource\"\n          [style.height]=\"_dropdownHeight()\"\n          [loadingTemplate]=\"loadingTemplate\"\n          [isItemTruncated]=\"isItemTruncated()\"\n          [showItemTooltip]=\"showItemTooltip()\"\n          (onItemClick)=\"_handleItemClick($event)\"\n          [emptyTemplate]=\"emptyTemplate ?? empty\"\n          (onValueChanged)=\"_handleValueChanged($event)\"\n          (onItemSelected)=\"_handleItemSelected($event)\"\n        >\n        </ax-list>\n        <ng-template #empty>\n          {{ '@acorex:common.general.no-result-found' | translate | async }}\n        </ng-template>\n      }\n\n      @if (isLoading()) {\n        @if (loadingTemplate) {\n          <ng-template [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n        }\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\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-outline-style:solid;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial}}}@layer components{ax-select-box .ax-editor-container{padding-block:0}ax-select-box .ax-editor-container.ax-state-multiple{padding-inline:var(--spacing,.25rem)}ax-select-box .ax-editor-container.ax-state-multiple .ax-placeholder{padding-inline-start:calc(var(--spacing,.25rem) * 2)}ax-select-box .ax-editor-container .ax-input,ax-select-box .ax-editor-container .ax-editor{padding-block:var(--spacing,.25rem)}ax-select-box ax-dropdown-box.ax-state-multiple{--ax-comp-editor-space-start-size:0;height:auto!important}ax-select-box .ax-chips-container{justify-content:flex-start;align-items:center;gap:var(--ax-comp-select-box-chips-gap,.25rem);min-width:0;padding-top:var(--spacing,.25rem);outline-style:var(--tw-outline-style);-webkit-user-select:none;user-select:none;outline-width:0;outline-color:#0000;flex-wrap:wrap;flex:1;display:flex;cursor:pointer!important}ax-select-box .ax-chips-container .ax-selectbox-input{opacity:0;width:0}ax-select-box .ax-chips-container ax-tag ax-prefix,ax-select-box .ax-chips-container ax-tag ax-suffix{padding:0!important}.ax-select-box-panel{height:fit-content}.ax-select-box-panel .ax-select-box-loading-container{padding:calc(var(--spacing,.25rem) * 4);justify-content:center;align-items:center;display:flex}.ax-select-box-panel>ax-header .ax-icon-check{color:rgba(var(--ax-sys-color-primary-surface))}.ax-select-box-panel>ax-header.ax-solid{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-select-box-panel>ax-header.ax-solid ax-title{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-leading:calc(var(--spacing,.25rem) * 6);line-height:calc(var(--spacing,.25rem) * 6);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}@media(max-width:40rem){.ax-select-box-panel .list-item{padding:calc(var(--spacing,.25rem) * 4)}}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<ax-dropdown-box\n  [class.ax-state-multiple]=\"multiple\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  [disabled]=\"disabled\"\n  [look]=\"look\"\n  [popoverWidth]=\"dropdownWidth()\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div\n      class=\"ax-editor ax-chips-container ax-content ax-input\"\n      [class.ax-state-multiple]=\"multiple\"\n      [tabindex]=\"tabIndex\"\n    >\n      @if (selectedItems.length === 0) {\n        <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n          {{ placeholder | translate | async }}\n        </div>\n      }\n      @for (item of selectedItems; track $index) {\n        @if (selectedTemplate) {\n          <ng-template\n            [ngTemplateOutlet]=\"selectedTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n          ></ng-template>\n        } @else {\n          @if (multiple) {\n            <!-- <div class=\"bg-surface border-surface flex items-center justify-center gap-2 rounded-full border px-2 py-1\">\n              <ax-text>{{ getDisplayText(item) | translate | async }}</ax-text>\n              @if (!disabled && !readonly && multiple) {\n                <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"></span>\n              }\n            </div> -->\n            <ax-tag [text]=\"getDisplayText(item) | translate | async\" look=\"twotone\">\n              @if (!disabled && !readonly && multiple) {\n                <ax-suffix>\n                  <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"></span>\n                </ax-suffix>\n              }\n            </ax-tag>\n          } @else {\n            {{ getDisplayText(item) | translate | async }}\n          }\n        }\n      }\n    </div>\n    @if (selectedItems?.length && !disabled && !readonly) {\n      <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button-icon\">\n      @if (isLoading()) {\n        <ax-loading></ax-loading>\n      } @else {\n        <span\n          class=\"ax-icon\"\n          [ngClass]=\"{\n            'ax-icon-chevron-down': !isOpen,\n            'ax-icon-chevron-up': isOpen,\n          }\"\n        ></span>\n      }\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-template #search>\n      <ng-content select=\"ax-search-box\"> </ng-content>\n    </ng-template>\n  </ng-container>\n  <ng-container panel>\n    <div\n      #panel\n      class=\"ax-select-box-panel\"\n      [class.ax-no-truncate]=\"!isItemTruncated()\"\n      [style.min-width]=\"_dropdownWidth()\"\n    >\n      @if (dropdown.isActionsheetStyle) {\n        <ax-header class=\"ax-solid\">\n          <ax-title>{{ caption || placeholder || '@acorex:selectbox.popover.title' | translate | async }}</ax-title>\n          <ax-close-button [icon]=\"multiple ? 'ax-icon ax-icon-check' : 'ax-icon ax-icon-close'\"></ax-close-button>\n        </ax-header>\n      }\n      @if (searchBox && (!minRecordsForSearch || _listDataSource.totalCount >= minRecordsForSearch || searchValue())) {\n        <div class=\"ax-search-container\">\n          <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n        </div>\n      }\n      @if (renderList()) {\n        <ax-list\n          [name]=\"name\"\n          [ngModel]=\"value\"\n          [readonly]=\"readonly\"\n          [multiple]=\"multiple\"\n          [textField]=\"textField\"\n          [selectionMode]=\"'item'\"\n          [valueField]=\"valueField\"\n          [itemHeight]=\"itemHeight()\"\n          [itemTemplate]=\"itemTemplate\"\n          [textTemplate]=\"textTemplate\"\n          [dataSource]=\"_listDataSource\"\n          [style.height]=\"_dropdownHeight()\"\n          [loadingTemplate]=\"loadingTemplate\"\n          [isItemTruncated]=\"isItemTruncated()\"\n          [showItemTooltip]=\"showItemTooltip()\"\n          (onItemClick)=\"_handleItemClick($event)\"\n          [emptyTemplate]=\"emptyTemplate ?? empty\"\n          (onValueChanged)=\"_handleValueChanged($event)\"\n          (onItemSelected)=\"_handleItemSelected($event)\"\n        >\n        </ax-list>\n        <ng-template #empty>\n          {{ '@acorex:common.general.no-result-found' | translate | async }}\n        </ng-template>\n      }\n\n      @if (isLoading()) {\n        @if (loadingTemplate) {\n          <ng-template [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n        }\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\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-outline-style:solid;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial}}}@layer components{ax-select-box .ax-editor-container{padding-block:0}ax-select-box .ax-editor-container.ax-state-multiple{padding-inline:var(--spacing,.25rem)}ax-select-box .ax-editor-container.ax-state-multiple .ax-placeholder{padding-inline-start:calc(var(--spacing,.25rem) * 2)}ax-select-box .ax-editor-container .ax-input,ax-select-box .ax-editor-container .ax-editor{padding-block:var(--spacing,.25rem)}ax-select-box ax-dropdown-box.ax-state-multiple{--ax-comp-editor-space-start-size:0;height:auto!important}ax-select-box .ax-chips-container{justify-content:flex-start;align-items:center;gap:var(--ax-comp-select-box-chips-gap,.25rem);min-width:0;padding-top:var(--spacing,.25rem);outline-style:var(--tw-outline-style);-webkit-user-select:none;user-select:none;outline-width:0;outline-color:#0000;flex-wrap:wrap;flex:1;display:flex;cursor:pointer!important}ax-select-box .ax-chips-container .ax-selectbox-input{opacity:0;width:0}ax-select-box .ax-chips-container ax-tag ax-prefix,ax-select-box .ax-chips-container ax-tag ax-suffix{padding:0!important}.ax-select-box-panel{height:fit-content}.ax-select-box-panel.ax-no-truncate .ax-label-container span:not(.ax-truncated){white-space:nowrap}.ax-select-box-panel .ax-select-box-loading-container{padding:calc(var(--spacing,.25rem) * 4);justify-content:center;align-items:center;display:flex}.ax-select-box-panel>ax-header .ax-icon-check{color:rgba(var(--ax-sys-color-primary-surface))}.ax-select-box-panel>ax-header.ax-solid{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-select-box-panel>ax-header.ax-solid ax-title{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-leading:calc(var(--spacing,.25rem) * 6);line-height:calc(var(--spacing,.25rem) * 6);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}@media(max-width:40rem){.ax-select-box-panel .list-item{padding:calc(var(--spacing,.25rem) * 4)}}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.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 }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], dataSource: [{
                 type: Input
             }], placeholder: [{