import { MXSelectionValueComponent, convertArrayToDataSource, AXListDataSource, AXComponent, AXFocusableComponent, AXValuableComponent, AX_SELECTION_DATA_TOKEN, MXSelectionBridgeService } from '@acorex/cdk/common';
import * as i1 from '@acorex/components/tooltip';
import { AXTooltipModule, AXTooltipDirective } from '@acorex/components/tooltip';
import { AXTranslatorPipe } from '@acorex/core/translation';
import { CdkVirtualScrollableElement, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
import { isPlatformBrowser, NgTemplateOutlet, AsyncPipe } from '@angular/common';
import * as i0 from '@angular/core';
import { input, signal, EventEmitter, computed, forwardRef, Optional, SkipSelf, HostListener, ViewChild, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

/**
 * provides a list control with various input options and events for user interaction.
 *
 * @category Components
 */
class AXListComponent extends MXSelectionValueComponent {
    constructor() {
        super(...arguments);
        /**
         * Determines if an item is truncated.
         *
         * @defaultValue true
         */
        this.isItemTruncated = input(true, ...(ngDevMode ? [{ debugName: "isItemTruncated" }] : []));
        /**
         * Determines if a tooltip is shown for an item.
         *
         * @defaultValue false
         */
        this.showItemTooltip = input(false, ...(ngDevMode ? [{ debugName: "showItemTooltip" }] : []));
        /**
         * Defines the data source for the list.
         *
         *  @defaultValue convertArrayToDataSource([])
         */
        this.dataSource = convertArrayToDataSource([]);
        /**
         *  @ignore
         */
        this.itemHeightSignal = signal(40, ...(ngDevMode ? [{ debugName: "itemHeightSignal" }] : []));
        /**
         * Emitted when the index of the scrolled item changes.
         *
         * @event
         */
        this.onScrolledIndexChanged = new EventEmitter();
        /**
         * Specifies whether the checkbox is enabled.
         *
         *  @defaultValue true
         */
        this.checkbox = true;
        /**
         *  @ignore
         */
        this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
        /**
         *  @ignore
         */
        this.hasItems = false;
        /**
         *  @ignore
         */
        this.lastIndex = 0;
        /**
         *  @ignore
         */
        this.postponeFocus = false;
        /**
         * Determines whether to show the empty template based on the presence of items and loading state.
         * @ignore
         */
        this.showEmptyTemplate = computed(() => this.isLoading() === false && this.emptyTemplate && this.hasItems === false, ...(ngDevMode ? [{ debugName: "showEmptyTemplate" }] : []));
    }
    /**
     * Sets the height of each item in the list.
     */
    set itemHeight(v) {
        this.itemHeightSignal.set(v);
    }
    trackByIdx(i) {
        return i;
    }
    /**
     *  @ignore
     */
    ngOnInit() {
        super.ngOnInit();
        this.listDataSource = new AXListDataSource({
            source: this.dataSource,
        });
        this.listDataSource.source.onLoadingChanged.subscribe((data) => {
            this.isLoading.set(data);
        });
        this.listDataSource.source.onChanged.subscribe((data) => {
            this.hasItems = data.totalCount > 0;
            setTimeout(() => {
                this.render();
            }, 100);
        });
    }
    /**
     *  @ignore
     */
    _handleOnItemClick(e, item) {
        if (this.readonly || this.disabled) {
            e.preventDefault();
            e.stopPropagation();
            return;
        }
        if (this.isItemDisabled(item)) {
            return;
        }
        this.toggleSelect(item);
        this.onItemClick.emit({
            component: this,
            item,
            htmlElement: e.target,
            isUserInteraction: true,
            nativeEvent: e,
        });
    }
    /**
     *  @ignore
     */
    _handleKeydown(e) {
        if ((e.code === 'ArrowDown' || e.code === 'ArrowUp') && this.hasItems) {
            this.focusItemByNav(e.key === 'ArrowDown' ? 1 : -1);
            e.preventDefault();
        }
        if ((e.code === 'Space' || e.code === 'Enter') && this.hasItems) {
            if (this.readonly || this.disabled) {
                e.preventDefault();
                e.stopPropagation();
                return;
            }
            if (isPlatformBrowser(this.platformID)) {
                const id = this.document.activeElement?.closest('li')?.dataset['id'];
                this.toggleSelect(id);
            }
            e.preventDefault();
            e.stopPropagation();
        }
    }
    /**
     *  @ignore
     */
    focusItemByNav(sign) {
        if (isPlatformBrowser(this.platformID)) {
            const list = this.getHostElement().querySelector('ul');
            const fn = (s) => list.querySelector(s);
            const itemDiv = this.document.activeElement?.closest('li') || fn(`li.ax-state-selected`) || fn(`li`);
            const next = (sign == 1 ? itemDiv.nextElementSibling : itemDiv.previousElementSibling);
            if (next) {
                next.focus();
            }
        }
    }
    /**
     *  @ignore
     */
    _handleOnscrolledIndexChange(e) {
        this.lastIndex = e;
        this.onScrolledIndexChanged.emit({
            component: this,
            index: this.lastIndex,
            isUserInteraction: true,
        });
    }
    /**
     * Retrieves an item from the data source based on the provided key.
     *
     * @param key The key used to identify the item.
     * @ignore
     */
    getItemByKey(key) {
        return this.dataSource.find(key);
    }
    /**
     * Renders the component by updating the viewport size, scrolling to the last index, and optionally focusing the element.
     */
    render() {
        this.viewport.checkViewportSize();
        this.viewport.scrollToIndex(this.lastIndex);
        if (this.postponeFocus) {
            this.postponeFocus = false;
            this.focus();
        }
    }
    /**
     * Refreshes the list by clearing the selection cache and reloading the data source.
     * @ignore
     */
    refresh(clearSelection = true) {
        if (clearSelection) {
            this.clearSelectionCache();
        }
        this.listDataSource.refresh();
    }
    /**
     * Scrolls the viewport to the specified item index.
     * @param index The index of the item to scroll to.
     * @ignore
     */
    scrollToIndex(index) {
        this.viewport.scrollToIndex(index);
    }
    /**
     * Sets focus to the first selectable list item. If no item is available, postpones focus.
     */
    focus() {
        const list = this.getHostElement().querySelector('ul');
        const focusable = list.querySelector('li.ax-state-selected') ?? list.querySelector('li.list-item');
        if (focusable) {
            focusable.focus();
        }
        else {
            this.postponeFocus = true;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AXListComponent, isStandalone: true, selector: "ax-list", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: false, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: false, isRequired: false, transformFunction: null }, textTemplate: { classPropertyName: "textTemplate", publicName: "textTemplate", isSignal: false, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, isItemTruncated: { classPropertyName: "isItemTruncated", publicName: "isItemTruncated", isSignal: true, isRequired: false, transformFunction: null }, showItemTooltip: { classPropertyName: "showItemTooltip", publicName: "showItemTooltip", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: false, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: false, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: false, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: false, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged", disabledChange: "disabledChange", readonlyChange: "readonlyChange", onBlur: "onBlur", onFocus: "onFocus", onItemClick: "onItemClick", onItemSelected: "onItemSelected", onScrolledIndexChanged: "onScrolledIndexChanged" }, host: { listeners: { "keydown": "_handleKeydown($event)" } }, providers: [
            { provide: AXComponent, useExisting: AXListComponent },
            { provide: AXFocusableComponent, useExisting: AXListComponent },
            { provide: AXValuableComponent, useExisting: AXListComponent },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => AXListComponent),
                multi: true,
            },
            {
                provide: AX_SELECTION_DATA_TOKEN,
                useFactory: (existingService) => {
                    return existingService || new MXSelectionBridgeService();
                },
                deps: [[new Optional(), new SkipSelf(), AX_SELECTION_DATA_TOKEN]],
            },
        ], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"list-container\" cdkVirtualScrollingElement [class.ax-height-auto]=\"showEmptyTemplate()\">\n  <ng-content select=\"ax-header\"></ng-content>\n  <cdk-virtual-scroll-viewport\n    [itemSize]=\"itemHeightSignal()\"\n    [style.--item-height]=\"itemHeightSignal() + 'px'\"\n    (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\"\n    [class.ax-truncated-container]=\"isItemTruncated()\"\n  >\n    <ul>\n      <!--  Item Template  -->\n      <ng-container *cdkVirtualFor=\"let item of listDataSource; let i = index; trackBy: trackByIdx\">\n        @if (item !== null && item !== undefined) {\n          <li\n            [class.ax-state-selected]=\"isItemSelected(item)\"\n            class=\"list-item\"\n            [class.ax-state-disabled]=\"isItemDisabled(item)\"\n            [attr.tabindex]=\"i\"\n            (click)=\"_handleOnItemClick($event, item)\"\n            [attr.data-id]=\"getValue(item)\"\n          >\n            <!--  Custom Item Template  -->\n            @if (itemTemplate) {\n              <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\">\n              </ng-container>\n            } @else {\n              <ng-container [ngTemplateOutlet]=\"defaultItemTpl\"></ng-container>\n            }\n            <!--  Default Item Template  -->\n            <ng-template #defaultItemTpl>\n              @if (item !== null && item !== undefined) {\n                <div class=\"ax-label-container\">\n                  @if (multiple && checkbox) {\n                    <input\n                      class=\"ax-checkbox\"\n                      type=\"checkbox\"\n                      [checked]=\"isItemSelected(item)\"\n                      [disabled]=\"isItemDisabled(item)\"\n                      tabindex=\"0\"\n                    />\n                  }\n\n                  <span\n                    [class.ax-checkbox-label]=\"multiple && checkbox\"\n                    [class.ax-truncated]=\"isItemTruncated()\"\n                    [axTooltip]=\"getDisplayText(item)\"\n                    [axTooltipDisabled]=\"!showItemTooltip()\"\n                  >\n                    {{ getDisplayText(item) | translate | async }}\n                  </span>\n                </div>\n                <!-- @if (isItemSelected(item)) {\n                  <i class=\"ax-icon ax-icon-check ax-selected-icon\"></i>\n                } -->\n              } @else {\n                <ng-container [ngTemplateOutlet]=\"loadingTpl\"> </ng-container>\n              }\n            </ng-template>\n          </li>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"loadingTpl\"> </ng-container>\n        }\n      </ng-container>\n    </ul>\n  </cdk-virtual-scroll-viewport>\n  <ng-content select=\"ax-footer\"></ng-content>\n</div>\n\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n  <!--  Custom Loading Template  -->\n  @if (loadingTemplate) {\n    <ng-container [ngTemplateOutlet]=\"loadingTemplate\"> </ng-container>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"defaultLoadingTpl\"> </ng-container>\n  }\n  <!--  Default Loading Template  -->\n  <ng-template #defaultLoadingTpl>\n    <li>{{ '@acorex:common.status.loading' | translate | async }}</li>\n  </ng-template>\n</ng-template>\n<!--  Empty Template  -->\n@if (showEmptyTemplate()) {\n  <div class=\"empty-container\">\n    <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\n  </div>\n}\n", styles: ["ax-list{--ax-comp-list-item-height: var(--ax-sys-size-base);--ax-comp-list-empty-container-height: var(--ax-sys-size-base)}ax-list{--ax-comp-list-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-list-item-header: var(--ax-sys-color-lighter-surface);--ax-comp-list-item-footer: var(--ax-sys-color-lighter-surface)}ax-list{display:block;height:100%;width:100%;font-size:var(--ax-comp-list-font-size, .875rem);line-height:var(--ax-comp-list-line-height, 1.25rem)}ax-list .list-container{display:flex;height:100%;flex-direction:column}ax-list .list-container.ax-height-auto{height:auto}ax-list ax-header{background-color:rgba(var(--ax-comp-list-item-header))}ax-list ax-footer{background-color:rgba(var(--ax-comp-list-item-footer))}ax-list .empty-container{display:flex;height:var(--ax-comp-list-empty-container-height);width:100%;align-items:center;justify-content:center;padding-left:var(--ax-comp-list-empty-container-padding-x, .75rem);padding-right:var(--ax-comp-list-empty-container-padding-x, .75rem)}ax-list .cdk-virtual-scroll-viewport.ax-truncated-container .cdk-virtual-scroll-content-wrapper{width:100%;min-width:unset}ax-list .cdk-virtual-scroll-viewport ul li{position:relative;display:flex;min-height:var(--ax-comp-list-item-height);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:space-between;padding-inline-end:var(--ax-comp-list-item-padding-e, 1rem);padding-inline-start:var(--ax-comp-list-item-padding-s, .75rem);font-size:var(--ax-comp-list-font-size, .875rem);line-height:var(--ax-comp-list-line-height, 1.25rem)}ax-list .cdk-virtual-scroll-viewport ul li:hover{background:rgba(var(--ax-comp-list-item-hover-bg-color, var(--ax-sys-color-surface)))}ax-list .cdk-virtual-scroll-viewport ul li:focus,ax-list .cdk-virtual-scroll-viewport ul li:focus-within,ax-list .cdk-virtual-scroll-viewport ul li:focus-visible{outline-width:var(--ax-comp-list-item-focus-outline-width, 2px);outline-offset:var(--ax-comp-list-item-focus-outline-offset, -4px);outline-color:rgba(var(--ax-comp-list-item-focus-outline-color, var(--ax-sys-color-primary-surface)))}ax-list .cdk-virtual-scroll-viewport ul li .ax-label-container{display:flex;align-items:center;width:100%}ax-list .cdk-virtual-scroll-viewport ul li .ax-checkbox-label{margin-inline-start:var(--ax-comp-list-checkbox-label-margin-s, .5rem)}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-selected{background-color:rgba(var(--ax-comp-list-item-selected-bg-color))}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-list-item-disabled-opacity, .5)}ax-list .cdk-virtual-scroll-viewport ul li .ax-truncated{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: CdkVirtualScrollableElement, selector: "[cdkVirtualScrollingElement]" }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: [
                        'id',
                        'name',
                        'disabled',
                        'readonly',
                        'valueField',
                        'textField',
                        'textTemplate',
                        'disabledField',
                        'multiple',
                        'selectionMode',
                    ], outputs: ['onValueChanged', 'disabledChange', 'readonlyChange', 'onBlur', 'onFocus', 'onItemClick', 'onItemSelected'], providers: [
                        { provide: AXComponent, useExisting: AXListComponent },
                        { provide: AXFocusableComponent, useExisting: AXListComponent },
                        { provide: AXValuableComponent, useExisting: AXListComponent },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => AXListComponent),
                            multi: true,
                        },
                        {
                            provide: AX_SELECTION_DATA_TOKEN,
                            useFactory: (existingService) => {
                                return existingService || new MXSelectionBridgeService();
                            },
                            deps: [[new Optional(), new SkipSelf(), AX_SELECTION_DATA_TOKEN]],
                        },
                    ], imports: [
                        CdkVirtualScrollableElement,
                        CdkVirtualScrollViewport,
                        CdkFixedSizeVirtualScroll,
                        CdkVirtualForOf,
                        NgTemplateOutlet,
                        AsyncPipe,
                        AXTranslatorPipe,
                        AXTooltipModule,
                        AXTooltipDirective,
                    ], template: "<div class=\"list-container\" cdkVirtualScrollingElement [class.ax-height-auto]=\"showEmptyTemplate()\">\n  <ng-content select=\"ax-header\"></ng-content>\n  <cdk-virtual-scroll-viewport\n    [itemSize]=\"itemHeightSignal()\"\n    [style.--item-height]=\"itemHeightSignal() + 'px'\"\n    (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\"\n    [class.ax-truncated-container]=\"isItemTruncated()\"\n  >\n    <ul>\n      <!--  Item Template  -->\n      <ng-container *cdkVirtualFor=\"let item of listDataSource; let i = index; trackBy: trackByIdx\">\n        @if (item !== null && item !== undefined) {\n          <li\n            [class.ax-state-selected]=\"isItemSelected(item)\"\n            class=\"list-item\"\n            [class.ax-state-disabled]=\"isItemDisabled(item)\"\n            [attr.tabindex]=\"i\"\n            (click)=\"_handleOnItemClick($event, item)\"\n            [attr.data-id]=\"getValue(item)\"\n          >\n            <!--  Custom Item Template  -->\n            @if (itemTemplate) {\n              <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\">\n              </ng-container>\n            } @else {\n              <ng-container [ngTemplateOutlet]=\"defaultItemTpl\"></ng-container>\n            }\n            <!--  Default Item Template  -->\n            <ng-template #defaultItemTpl>\n              @if (item !== null && item !== undefined) {\n                <div class=\"ax-label-container\">\n                  @if (multiple && checkbox) {\n                    <input\n                      class=\"ax-checkbox\"\n                      type=\"checkbox\"\n                      [checked]=\"isItemSelected(item)\"\n                      [disabled]=\"isItemDisabled(item)\"\n                      tabindex=\"0\"\n                    />\n                  }\n\n                  <span\n                    [class.ax-checkbox-label]=\"multiple && checkbox\"\n                    [class.ax-truncated]=\"isItemTruncated()\"\n                    [axTooltip]=\"getDisplayText(item)\"\n                    [axTooltipDisabled]=\"!showItemTooltip()\"\n                  >\n                    {{ getDisplayText(item) | translate | async }}\n                  </span>\n                </div>\n                <!-- @if (isItemSelected(item)) {\n                  <i class=\"ax-icon ax-icon-check ax-selected-icon\"></i>\n                } -->\n              } @else {\n                <ng-container [ngTemplateOutlet]=\"loadingTpl\"> </ng-container>\n              }\n            </ng-template>\n          </li>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"loadingTpl\"> </ng-container>\n        }\n      </ng-container>\n    </ul>\n  </cdk-virtual-scroll-viewport>\n  <ng-content select=\"ax-footer\"></ng-content>\n</div>\n\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n  <!--  Custom Loading Template  -->\n  @if (loadingTemplate) {\n    <ng-container [ngTemplateOutlet]=\"loadingTemplate\"> </ng-container>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"defaultLoadingTpl\"> </ng-container>\n  }\n  <!--  Default Loading Template  -->\n  <ng-template #defaultLoadingTpl>\n    <li>{{ '@acorex:common.status.loading' | translate | async }}</li>\n  </ng-template>\n</ng-template>\n<!--  Empty Template  -->\n@if (showEmptyTemplate()) {\n  <div class=\"empty-container\">\n    <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\n  </div>\n}\n", styles: ["ax-list{--ax-comp-list-item-height: var(--ax-sys-size-base);--ax-comp-list-empty-container-height: var(--ax-sys-size-base)}ax-list{--ax-comp-list-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-list-item-header: var(--ax-sys-color-lighter-surface);--ax-comp-list-item-footer: var(--ax-sys-color-lighter-surface)}ax-list{display:block;height:100%;width:100%;font-size:var(--ax-comp-list-font-size, .875rem);line-height:var(--ax-comp-list-line-height, 1.25rem)}ax-list .list-container{display:flex;height:100%;flex-direction:column}ax-list .list-container.ax-height-auto{height:auto}ax-list ax-header{background-color:rgba(var(--ax-comp-list-item-header))}ax-list ax-footer{background-color:rgba(var(--ax-comp-list-item-footer))}ax-list .empty-container{display:flex;height:var(--ax-comp-list-empty-container-height);width:100%;align-items:center;justify-content:center;padding-left:var(--ax-comp-list-empty-container-padding-x, .75rem);padding-right:var(--ax-comp-list-empty-container-padding-x, .75rem)}ax-list .cdk-virtual-scroll-viewport.ax-truncated-container .cdk-virtual-scroll-content-wrapper{width:100%;min-width:unset}ax-list .cdk-virtual-scroll-viewport ul li{position:relative;display:flex;min-height:var(--ax-comp-list-item-height);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:space-between;padding-inline-end:var(--ax-comp-list-item-padding-e, 1rem);padding-inline-start:var(--ax-comp-list-item-padding-s, .75rem);font-size:var(--ax-comp-list-font-size, .875rem);line-height:var(--ax-comp-list-line-height, 1.25rem)}ax-list .cdk-virtual-scroll-viewport ul li:hover{background:rgba(var(--ax-comp-list-item-hover-bg-color, var(--ax-sys-color-surface)))}ax-list .cdk-virtual-scroll-viewport ul li:focus,ax-list .cdk-virtual-scroll-viewport ul li:focus-within,ax-list .cdk-virtual-scroll-viewport ul li:focus-visible{outline-width:var(--ax-comp-list-item-focus-outline-width, 2px);outline-offset:var(--ax-comp-list-item-focus-outline-offset, -4px);outline-color:rgba(var(--ax-comp-list-item-focus-outline-color, var(--ax-sys-color-primary-surface)))}ax-list .cdk-virtual-scroll-viewport ul li .ax-label-container{display:flex;align-items:center;width:100%}ax-list .cdk-virtual-scroll-viewport ul li .ax-checkbox-label{margin-inline-start:var(--ax-comp-list-checkbox-label-margin-s, .5rem)}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-selected{background-color:rgba(var(--ax-comp-list-item-selected-bg-color))}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-list-item-disabled-opacity, .5)}ax-list .cdk-virtual-scroll-viewport ul li .ax-truncated{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
        }], propDecorators: { isItemTruncated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemTruncated", required: false }] }], showItemTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showItemTooltip", required: false }] }], dataSource: [{
                type: Input
            }], itemHeight: [{
                type: Input
            }], itemTemplate: [{
                type: Input
            }], emptyTemplate: [{
                type: Input
            }], loadingTemplate: [{
                type: Input
            }], onScrolledIndexChanged: [{
                type: Output
            }], checkbox: [{
                type: Input
            }], viewport: [{
                type: ViewChild,
                args: [CdkVirtualScrollViewport]
            }], _handleKeydown: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }] } });

class AXListModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: AXListModule, imports: [AXListComponent], exports: [AXListComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXListModule, imports: [AXListComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXListModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [AXListComponent],
                    exports: [AXListComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { AXListComponent, AXListModule };
//# sourceMappingURL=acorex-components-list.mjs.map
