import * as i0 from '@angular/core';
import { Injectable, EventEmitter, inject, ElementRef, ChangeDetectorRef, Renderer2, booleanAttribute, numberAttribute, Output, ViewChild, ContentChildren, Input, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive, Pipe, input } from '@angular/core';
import * as i2 from '@angular/cdk/scrolling';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { BehaviorSubject, Subject, Subscription, debounceTime, takeUntil, skip, Observable, combineLatest, fromEvent, distinctUntilChanged } from 'rxjs';
import { NgTemplateOutlet } from '@angular/common';
import * as i1$2 from '@angular/forms';
import { FormsModule, ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';
import * as i3$2 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';
import * as i3 from '@eui/components/eui-skeleton';
import { EUI_SKELETON } from '@eui/components/eui-skeleton';
import * as i1$1 from '@eui/components/eui-input-checkbox';
import { EUI_INPUT_CHECKBOX } from '@eui/components/eui-input-checkbox';
import * as i2$1 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';
import * as i4 from '@eui/components/eui-input-text';
import { EUI_INPUT_TEXT } from '@eui/components/eui-input-text';
import * as i2$2 from '@eui/components/eui-button';
import { EUI_BUTTON } from '@eui/components/eui-button';
import { EUI_LIST } from '@eui/components/eui-list';
import * as i3$1 from '@eui/components/eui-icon-input';
import { EUI_ICON_INPUT } from '@eui/components/eui-icon-input';
import { EuiTemplateDirective } from '@eui/components/directives';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import { AnimationBuilder, style, animate } from '@angular/animations';

/**
 * Service to manage the selection state of rows in a table.
 * Allows tracking of selected rows and managing selection for individual and multiple rows.
 */
class EuiTableSelectableRowService {
    constructor() {
        /**
         * BehaviorSubject containing the selected rows.
         */
        this.selectedRows$ = new BehaviorSubject([]);
        /**
         * BehaviorSubject containing the state of whether all rows are selected.
         */
        this.isAllRowsSelected$ = new BehaviorSubject(false);
        this.lastSelectedRow = null;
        this.rows = [];
        this.propId = 'id';
    }
    /**
     * Observable stream of selected rows.
     */
    get selectedRows() {
        return this.selectedRows$.asObservable();
    }
    /**
     * Observable stream of whether all rows are selected.
     */
    get isAllRowsSelected() {
        return this.isAllRowsSelected$.asObservable();
    }
    /**
     * Sets the property name used to identify rows as unique.
     */
    setPropId(value) {
        this.propId = value;
    }
    /**
     * Gets the current property name used to identify rows.
     */
    getPropId() {
        return this.propId;
    }
    /**
     * Registers a row as selectable.
     *
     * @param row Row to register.
     */
    registerRow(row) {
        if (row && !this.rows.find((r) => r[this.propId] === row[this.propId])) {
            this.rows.push(row);
            if (this.rows.length > this.selectedRows$.value.length && this.isAllRowsSelected$.value) {
                this.isAllRowsSelected$.next(false);
            }
            if (this.rows.length <= this.selectedRows$.value.length && this.rows.every((r) => this.selectedRows$.value.includes(r))) {
                this.isAllRowsSelected$.next(true);
            }
        }
    }
    /**
     * Registers a set of rows as selectable.
     *
     * @param rows Set of rows to register.
     */
    registerRows(rows) {
        rows.forEach((row) => {
            this.registerRow(row);
        });
    }
    /**
     * Unregisters a row as selectable.
     *
     * @param row Row to unregister.
     */
    unregisterRow(row) {
        this.rows = this.rows.filter(r => r[this.propId] !== row[this.propId]);
    }
    /**
     * Unregisters all rows.
     */
    unregisterRows() {
        this.rows = [];
    }
    /**
     * Selects a row.
     *
     * @param row Row to select.
     */
    selectRow(row) {
        if (this.selectedRows$.value.indexOf(row) === -1) {
            this.selectedRows$.next([...this.selectedRows$.value, row]);
        }
        this.isAllRowsSelected$.next(this.selectedRows$.value.length === this.rows.length);
        this.lastSelectedRow = row;
    }
    /**
     * Selects a single row and replace existing one in selectedRows array.
     *
     * @param row Row to select.
     */
    selectSingleRow(row) {
        if (this.selectedRows$.value.indexOf(row) === -1) {
            this.selectedRows$.next([row]);
        }
        this.lastSelectedRow = row;
    }
    /**
     * Unselects a row.
     *
     * @param row Row to unselect.
     */
    unselectRow(row) {
        if (row && this.selectedRows$.value.find((r) => r[this.propId] === row[this.propId]) !== undefined) {
            const value = this.selectedRows$.value.filter((selected) => selected[this.propId] !== row[this.propId]);
            this.selectedRows$.next(value);
            this.isAllRowsSelected$.next(false);
        }
    }
    /**
     * Selects a set of rows.
     *
     * @param rows Rows to select.
     */
    selectRows(rows) {
        this.selectedRows$.next([...rows]);
        this.isAllRowsSelected$.next(this.rows.length > 0 && this.rows.length === this.selectedRows$.value.length);
        this.lastSelectedRow = rows[rows.length - 1];
    }
    /**
     * Select all rows.
     */
    selectAllRows() {
        this.selectedRows$.next([...this.rows]);
        this.isAllRowsSelected$.next(true);
        this.lastSelectedRow = this.rows[this.rows.length - 1];
    }
    /**
     * Unselect all rows.
     */
    unselectAllRows() {
        this.selectedRows$.next([]);
        this.isAllRowsSelected$.next(false);
        this.lastSelectedRow = null;
    }
    /**
     * Gets the list of registered rows.
     *
     * @returns The list of registered rows.
     */
    getRows() {
        return this.rows;
    }
    /**
     * Gets the last selected row.
     *
     * @returns The last selected row.
     */
    getLastSelectedRow() {
        return this.lastSelectedRow;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableSelectableRowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableSelectableRowService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableSelectableRowService, decorators: [{
            type: Injectable
        }] });

/**
 * Service to manage the sorting state of columns in a table.
 * Uses a `BehaviorSubject` to store and emit the current sorting values.
 */
class EuiTableSortService {
    constructor() {
        /**
         * BehaviorSubject containing the current sorting information.
         */
        this.sorts$ = new BehaviorSubject([]);
        this.isCurrentMultiSortable = false;
    }
    /**
     * Observable stream of sorting values.
     */
    get sorts() {
        return this.sorts$.asObservable();
    }
    /**
     * Sets the ordering order for a given column
     * @param sort The name of the column to sort.
     * @param order The sorting order (ascending, descending, none).
     * @param isMultiSortable Whether multi-sorting is allowed.
     */
    setSort(sort, order, isMultiSortable) {
        if (isMultiSortable && this.isCurrentMultiSortable) {
            let sortValues = this.sorts$.value;
            if (!order || order === 'none') {
                sortValues = this.sorts$.value.filter(s => s.sort !== sort);
                this.sorts$.next(sortValues);
            }
            else {
                if (this.sorts$.value.find(s => s.sort === sort)) {
                    sortValues = this.sorts$.value.map(s => s.sort == sort ? ({ ...s, order }) : s);
                    this.sorts$.next(sortValues);
                }
                else {
                    this.sorts$.next([...sortValues, { sort, order }]);
                }
            }
        }
        else {
            this.sorts$.next(sort && order && order !== 'none' ? [{ sort, order }] : []);
        }
        this.isCurrentMultiSortable = isMultiSortable;
    }
    /**
     * Sets the full list of sorting values.
     *
     * @param sorts The list of sorts to apply.
     */
    setSorts(sorts) {
        this.sorts$.next(sorts);
        this.isCurrentMultiSortable = sorts.length > 1;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableSortService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableSortService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableSortService, decorators: [{
            type: Injectable
        }] });

var ScrollinDirection;
(function (ScrollinDirection) {
    ScrollinDirection["UP"] = "UP";
    ScrollinDirection["DOWN"] = "DOWN";
})(ScrollinDirection || (ScrollinDirection = {}));
/**
 * @description
 * The `eui-table` component has been built to offer various requested features including fast performance and excellent level of control over tabular presentation of data.
 *
 * The eui-table is quite simple of usage and requires :
 *
 *     - rows : the data value input as an array of objects, usually fetched from a service (data payload),
 *     - view : this is the template for the presentation with its various options such as the search filter, the paginator, sortable columns, etc.
 */
class EuiTableComponent {
    constructor() {
        /**
         * Data to display in the table.
         *
         * @type {DATA[]} Generic type of data
         */
        this.data = [];
        /**
         * Unicity criteria of the data.
         *
         * @default 'id'
         */
        this.propId = 'id';
        /**
         * In combination with `isVirtualScroll`. Row height use by virtual scroll calculation.
         *
         * @default 41
         */
        this.itemSize = 41;
        /**
         * In combination with `isDataSelectable`. Rows to be selected by default.
         *
         * @type {DATA[]} Set of data to select.
         */
        this.preselectedRows = [];
        /**
         * Wheter the table uses virtual scroll to display data.
         *
         * `eui-table` selector needs to be used in order to make virtual scroll working properly.
         *
         * @default false
         */
        this.isVirtualScroll = false;
        /**
         * In combination with `isVirtualScroll`. Wheter the table caches the data when scroll.
         * Means that if a scroll level has already loads data, the `scrollChange` event won't be emitted.
         *
         * @default false
         */
        this.isVirtualScrollCache = false;
        /**
         * Wheter the table header is sticky.
         * In order to use eui-table sticky feature and control the scrolling overflow,
         * we recommend to wrap the table with the provided eui-table__scrollable-wrapper class and set your custom table width and/or height.
         *
         * @default false
         */
        this.hasStickyHeader = false;
        /**
         * Wheter the table footer is sticky.
         * In order to use eui-table sticky feature and control the scrolling overflow,
         * we recommend to wrap the table with the provided eui-table__scrollable-wrapper class and set your custom table width and/or height.
         *
         * @default false
         */
        this.hasStickyFooter = false;
        /**
         * Wheter the table col is sticky.
         * In order to use eui-table sticky feature and control the scrolling overflow,
         * we recommend to wrap the table with the provided eui-table__scrollable-wrapper class and set your custom table width and/or height.
         *
         * Only first or latest columns can be sticky.
         *
         * @default false
         */
        this.hasStickyCols = false;
        /**
         * Wheter the table is reponsive.
         *
         * @default false
         */
        this.isTableResponsive = false;
        /**
         * Wheter the table uses async data.
         * In this configuration, pagination, filtering and sorting are managed by the backend.
         *
         * When data are async, paginator and filter must not be bound to the eui-table component like in other sample.
         *
         * @default false
         */
        this.isAsync = false;
        /**
         * In combination with `isVirtualScroll`. Total length of data that are displayed in the table with virtual scroll.
         *
         * @default 0
         */
        this.virtualScrollAsyncItemsLength = 0;
        /**
         * In combination with `isVirtualScroll`. Nb of data items to load in the table.
         *
         * @default 50
         */
        this.virtualScrollNbRows = 50;
        /**
         * Wheter the cols can be reordered.
         *
         * @default false
         */
        this.isColsOrderable = false;
        /**
         * Wheter a loading spinner is displayed in the table.
         *
         * @default false
         */
        this.isLoading = false;
        /**
         * Wheter the 'select all' checkbox in the header will select ONLY items in the current page.
         *
         * If `false`, all items across the pages will be selected.
         *
         * @default true
         */
        this.isSelectOnlyVisibleRows = true;
        /**
         * Wheter the table has a fixed layout which forces a table to use fixed column widths, ignoring content size for faster and more predictable layout.
         *
         * @default false
         */
        this.isTableFixedLayout = false;
        /**
         * Whether the table use compact design.
         *
         * @default false
         */
        this.isTableCompact = false;
        this.loading = [];
        this.nbCols = [];
        this.dataRendered = [];
        this.cdkVirtualScrollViewportOverflowValue = 'auto';
        /**
         * In combination with `isVirtualScroll`. Event emitted when a scroll is done.
         */
        this.scrollChange = new EventEmitter();
        /**
         * In combination with `isDataSelectable` on a row. Event emitted when the selection changes with an array of data.
         */
        this.rowsSelect = new EventEmitter();
        /**
         * In combination with `isSortable` on the cols. Event emitted when the sort changes with the property displayed in the col and the order as `ASC` or `DESC`.
         */
        this.sortChange = new EventEmitter();
        this.destroy$ = new Subject();
        this.virtualScrollLastMultiple = 0;
        this.virtualScrollSpliceFrom = 0;
        this.scrolledIndex = 0;
        this.nbItemDisplayed = 0;
        this.dataSrc = [];
        this.page = 0;
        this.pageSize = 0;
        this.tableFeaturesHandlerSubscription = new Subscription();
        this.filteredData = [];
        this.elementRef = inject(ElementRef);
        this.cd = inject(ChangeDetectorRef);
        this.euiTableSelectableRowService = inject(EuiTableSelectableRowService);
        this.euiTableSortService = inject(EuiTableSortService);
        this.baseStatesDirective = inject(BaseStatesDirective);
        this.renderer = inject(Renderer2);
    }
    /**
     * @description
     * Computes and returns the CSS classes for the component based on its current state.
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-table-default eui-table'),
            this.isVirtualScroll ? 'eui-table--virtual-scroll' : '',
            this.hasStickyHeader ? 'eui-table--sticky eui-table--sticky-header' : '',
            this.hasStickyFooter ? 'eui-table--sticky eui-table--sticky-footer' : '',
            this.hasStickyCols ? 'eui-table--sticky eui-table--sticky-cols' : '',
            this.isTableResponsive ? 'eui-table-default--responsive' : '',
            this.isColsOrderable ? 'eui-table--cols-orderable' : '',
            this.isLoading ? 'eui-table--loading' : '',
            this.isTableFixedLayout ? 'eui-table--fixed-layout' : '',
            this.isTableCompact ? 'eui-table--compact' : '',
        ]
            .join(' ')
            .trim();
    }
    ngOnChanges(c) {
        if (!this.data) {
            this.data = [];
        }
        this.euiTableSelectableRowService.setPropId(this.propId);
        if (this.isVirtualScroll) {
            if (c.data && c.data.isFirstChange()) {
                this.dataRendered = [...c.data.currentValue, ...Array.from({ length: this.virtualScrollAsyncItemsLength - c.data.currentValue.length })];
                this.euiTableSelectableRowService.unregisterRows();
                this.euiTableSelectableRowService.registerRows(this.dataRendered);
            }
            if (c.data && !c.data.isFirstChange()) {
                if (this.isAsync) {
                    const source = [...this.dataRendered];
                    if (this.isVirtualScrollCache) {
                        this.dataRendered = [...source.slice(0, this.virtualScrollSpliceFrom), ...c.data.currentValue, ...source.slice(this.virtualScrollSpliceFrom + this.virtualScrollNbRows)];
                    }
                    else {
                        this.dataRendered = [
                            ...Array.from({ length: this.virtualScrollSpliceFrom - this.nbItemDisplayed }),
                            ...source.slice(this.virtualScrollSpliceFrom - this.nbItemDisplayed, this.virtualScrollSpliceFrom),
                            ...c.data.currentValue,
                            ...source.slice(this.virtualScrollSpliceFrom + this.virtualScrollNbRows, this.virtualScrollSpliceFrom + this.virtualScrollNbRows + this.nbItemDisplayed),
                            ...Array.from({ length: this.virtualScrollAsyncItemsLength - (this.virtualScrollSpliceFrom + this.virtualScrollNbRows + this.nbItemDisplayed) }),
                        ];
                    }
                    if (c && c.virtualScrollAsyncItemsLength) {
                        if (c.virtualScrollAsyncItemsLength.previousValue > c.virtualScrollAsyncItemsLength.currentValue) {
                            this.dataRendered = this.dataRendered.slice(0, c.virtualScrollAsyncItemsLength.currentValue);
                        }
                        else {
                            this.dataRendered = [...c.data.currentValue, ...Array.from({ length: this.virtualScrollAsyncItemsLength - c.data.currentValue.length })];
                        }
                    }
                    this.euiTableSelectableRowService.unregisterRows();
                    this.euiTableSelectableRowService.registerRows(this.dataRendered);
                    if (this.scrollingDirection === ScrollinDirection.DOWN) {
                        if ((this.hasUndefinedInRange(this.scrolledIndex, this.nbItemDisplayed, this.dataRendered) !== -1 ||
                            this.scrolledIndex === this.virtualScrollSpliceFrom &&
                                !this.dataRendered[this.scrolledIndex - 1]) &&
                            this.hasUndefinedInRange(this.scrolledIndex, this.nbItemDisplayed, this.dataRendered) !== this.dataRendered.length) {
                            // console.log('reposition down')
                            this.cdkVirtualScrollViewport.scrollToIndex(this.virtualScrollSpliceFrom + 1);
                        }
                    }
                    if (this.scrollingDirection === ScrollinDirection.UP) {
                        if (this.hasUndefinedInRange(this.scrolledIndex, this.nbItemDisplayed, this.dataRendered) !== -1) {
                            // console.log('reposition up')
                            this.cdkVirtualScrollViewport.scrollToIndex(this.virtualScrollSpliceFrom + 1);
                        }
                    }
                    this.stickyFeatureHandler();
                }
            }
        }
        else {
            if (c && c.data) {
                const lengthChanged = this.dataSrc.length !== c.data.currentValue.length;
                this.dataSrc = c.data.currentValue ? [...c.data.currentValue] : [];
                if (this.paginator && lengthChanged) {
                    this.paginator.goFirstPage({ emitEvent: !c.data.firstChange });
                }
                if (!this.isAsync && !c.data.isFirstChange()) {
                    this.tableFeaturesHandlerSubscription.unsubscribe();
                    this.tableFeaturesHandler();
                }
                this.euiTableSelectableRowService.registerRows(this.dataSrc);
            }
            if (c && c.paginator?.currentValue) {
                this.paginator.setLength(this.data.length);
                if (!c.paginator?.isFirstChange()) {
                    this.paginator.goFirstPage({ emitEvent: false });
                }
            }
            else {
                // this.data can be changed anytime, then this else can be executed at that time, testing this.paginator allows to make sure
                // the user wants to disable pagination or change the datasource
                if (!this.paginator) {
                    this.dataRendered = this.dataSrc;
                    this.page = 0;
                }
            }
        }
        if (c && c.preselectedRows && !c.preselectedRows.isFirstChange()) {
            this.euiTableSelectableRowService.selectRows(c.preselectedRows.currentValue);
        }
    }
    ngOnInit() {
        this.dataSrc = [...this.data];
    }
    ngAfterContentInit() {
        this.templates.forEach((item) => {
            if (item.getType() === 'header') {
                this.headerTemplate = item.template;
            }
            if (item.getType() === 'body') {
                this.bodyTemplate = item.template;
            }
            if (item.getType() === 'footer') {
                this.footerTemplate = item.template;
            }
            if (item.getType() === 'noData') {
                this.noDataTemplate = item.template;
            }
            if (item.getType() === 'caption') {
                this.captionTemplate = item.template;
            }
        });
    }
    ngAfterViewInit() {
        this.stickyFeatureHandler();
        if (this.isVirtualScroll) {
            this.cdkVirtualScrollViewport?.renderedRangeStream
                .pipe(debounceTime(500), takeUntil(this.destroy$))
                .subscribe((listRange) => {
                this.stickyFeatureHandler();
            });
            const theadElements = Array.from(this.theadRef.nativeElement.querySelectorAll('th'));
            this.nbCols = new Array(theadElements.length);
            this.cdkVirtualScrollViewport.scrolledIndexChange
                .pipe(debounceTime(500), takeUntil(this.destroy$), skip(1))
                .subscribe((scrolledIndex) => {
                if (this.isAsync) {
                    this.scrollingDirection = scrolledIndex > this.scrolledIndex ? ScrollinDirection.DOWN : ScrollinDirection.UP;
                    this.scrolledIndex = scrolledIndex;
                    this.cdkVirtualScrollViewport.setTotalContentSize(this.virtualScrollAsyncItemsLength * this.itemSize);
                    const scrollOffset = this.cdkVirtualScrollViewport.measureScrollOffset('top');
                    const endIndex = Math.ceil((scrollOffset + this.cdkVirtualScrollViewport.getViewportSize()) / this.itemSize);
                    this.nbItemDisplayed = endIndex - scrolledIndex;
                    const virtualScrollCurrentMultiple = Math.floor((scrolledIndex + this.nbItemDisplayed) / this.virtualScrollNbRows);
                    if (this.dataRendered[scrolledIndex] || (this.scrollingDirection === ScrollinDirection.UP && this.dataRendered[scrolledIndex - 1])) {
                        // console.log('virtualScrollCurrentMultiple', virtualScrollCurrentMultiple)
                        // console.log('this.virtualScrollLastMultiple', this.virtualScrollLastMultiple)
                        // console.log('virtualScrollCurrentMultiple > this.virtualScrollLastMultiple', virtualScrollCurrentMultiple > this.virtualScrollLastMultiple)
                        if (virtualScrollCurrentMultiple > this.virtualScrollLastMultiple) {
                            this.virtualScrollSpliceFrom = virtualScrollCurrentMultiple * this.virtualScrollNbRows;
                            this.scrollChange.emit({ start: virtualScrollCurrentMultiple * this.virtualScrollNbRows, end: this.virtualScrollNbRows });
                        }
                    }
                    else {
                        this.virtualScrollSpliceFrom = this.roundDown(scrolledIndex, this.virtualScrollNbRows);
                        this.scrollChange.emit({ start: this.virtualScrollSpliceFrom, end: this.virtualScrollNbRows });
                    }
                    this.virtualScrollLastMultiple = virtualScrollCurrentMultiple;
                }
            });
        }
        if (this.cdkVirtualScrollViewportElement) {
            this.cdkVirtualScrollViewportElement.nativeElement.style.height = this.cdkVirtualScrollViewport.elementRef.nativeElement.parentElement.clientHeight + 'px';
        }
        const mutationObservable = new Observable((observer) => {
            this.mutationObserver = new MutationObserver((mutations) => {
                const filteredMutations = mutations.filter((mutation) => {
                    return (mutation.target instanceof HTMLElement &&
                        mutation.target.tagName.toLowerCase() === 'th' &&
                        mutation.attributeName === 'style');
                });
                if (filteredMutations.length > 0) {
                    observer.next(filteredMutations);
                }
            });
            if (this.theadRef) {
                const config = { attributes: true, subtree: true, attributeFilter: ['style'] };
                this.mutationObserver.observe(this.theadRef.nativeElement, config);
            }
        });
        mutationObservable.pipe(debounceTime(250), takeUntil(this.destroy$)).subscribe((mutations) => {
            this.stickyFeatureHandler();
        });
        if (!this.isAsync && !this.isVirtualScroll) {
            this.tableFeaturesHandlerSubscription.unsubscribe();
            this.tableFeaturesHandler();
            if (this.preselectedRows) {
                setTimeout(() => {
                    this.euiTableSelectableRowService.selectRows(this.preselectedRows);
                });
            }
        }
        this.selectRowsFeatureHandler();
        this.sortFeatureHandler();
    }
    ngOnDestroy() {
        this.destroy$.next(true);
        this.destroy$.unsubscribe();
        this.mutationObserver?.disconnect();
        this.tableFeaturesHandlerSubscription.unsubscribe();
    }
    /**
     * Moves an element within the rendered data array.
     *
     * @param itemId - The identifier (default: id) of the element to move.
     * @param fromIndex - The current index of the element to move.
     * @param toIndex - The new desired position for the element.
     */
    moveItem(itemId, fromIndex, toIndex) {
        const itemPosition = this.dataRendered.findIndex(d => d && d[this.propId] === itemId);
        const move = toIndex - fromIndex;
        const source = [...this.dataRendered];
        const [elementToMove] = source.splice(itemPosition, 1);
        source.splice(itemPosition + move, 0, elementToMove);
        this.dataRendered = source;
    }
    /**
     * Select all rows
     */
    selectAllRows() {
        this.euiTableSelectableRowService.selectAllRows();
    }
    /**
     * Unselect all rows
     */
    unselectAllRows() {
        this.euiTableSelectableRowService.unselectAllRows();
    }
    /**
     * Return an array with the data matching the string filter
     * @returns
     */
    getFilteredData() {
        return this.filteredData;
    }
    /**
     * Sort the table's data.
     *
     * @param sorts An array of SortOrder. See {@link SortOrder}
     */
    setSort(sorts) {
        this.euiTableSortService.setSorts(sorts);
    }
    /**
     * Filters the table's data based on a string declared in `EuiTableFilterComponent`
     *
     * @param filter String to filter the data
     * @param r Array of data to filter
     * @returns The set of data matching the filter
     */
    filterData(filter, r) {
        const rows = filter ?
            r.filter((row) => {
                const matching = this.getProps(row, filter).filter((p) => p.match === true);
                return matching?.length > 0;
            }) : r;
        this.euiTableSelectableRowService.unregisterRows();
        this.euiTableSelectableRowService.registerRows(rows);
        this.filteredData = rows;
        return rows;
    }
    /**
     * Get the top position in px of the sticky header.
     */
    get stickyHeaderTopPosition() {
        if (!this.cdkVirtualScrollViewport || !this.cdkVirtualScrollViewport['_renderedContentOffset']) {
            return '0';
        }
        return (-this.cdkVirtualScrollViewport['_renderedContentOffset'] - 1) + 'px';
    }
    /**
     * Get the bottom position in px of the sticky footer.
     */
    get stickyFooterBottomPosition() {
        if (!this.cdkVirtualScrollViewport || !this.cdkVirtualScrollViewport['_renderedContentOffset']) {
            return '-1px';
        }
        return this.cdkVirtualScrollViewport['_renderedContentOffset'] - 1 + 'px';
    }
    /**
     * Get the width in px of the viewport in which the table is.
     */
    get cdkVirtualScrollViewportWidth() {
        return (this.elementRef.nativeElement?.parentElement?.clientWidth || 0) + 'px';
    }
    /**
     * Get the width, as a number, of the host element.
     */
    get hostWidth() {
        return this.elementRef.nativeElement.style.width;
    }
    trackByFn(index) {
        return index;
    }
    /**
     * Handles table features such as sorting, filtering, and pagination before rendering.
     */
    tableFeaturesHandler() {
        this.tableFeaturesHandlerSubscription = combineLatest(this.paginator ? this.paginator.page$ : new BehaviorSubject(null), this.filter ? this.filter.filter$ : new BehaviorSubject(null), this.euiTableSortService.sorts).pipe(takeUntil(this.destroy$)).subscribe(([pagination, filter, sorts]) => {
            let r = [...this.dataSrc];
            if (sorts.length > 0) {
                r = this.sortData(sorts, r);
            }
            r = this.filterData(filter, r);
            if (this.paginator) {
                this.paginator.setLength(r.length);
                const currentPagination = this.paginator.getCurrentPagination();
                r = this.paginateRows(currentPagination, r);
            }
            this.dataRendered = r;
            if (this.isSelectOnlyVisibleRows) {
                this.euiTableSelectableRowService.unselectAllRows();
                this.euiTableSelectableRowService.unregisterRows();
                this.euiTableSelectableRowService.registerRows(this.dataRendered);
            }
            this.cd.detectChanges();
            if (this.hasStickyCols) {
                this.stickyFeatureHandler();
            }
        });
    }
    /**
     * Sorts the data based on the sort, property and order, criterias.
     *
     * @param sortCriterias Array of sort criterias containing the property on which the sort will be performed and the order (`ASC` or `DESC`).
     * @param r Array of data to sort
     * @returns A sorted array
     */
    sortData(sortCriterias, r) {
        if (sortCriterias.every(criteria => criteria.order === null)) {
            return r.slice();
        }
        return r.sort((a, b) => {
            for (const criteria of sortCriterias) {
                const aValue = this.getObjProp(a, criteria.sort);
                const bValue = this.getObjProp(b, criteria.sort);
                if (aValue === bValue) {
                    continue;
                }
                if (aValue === null || aValue === undefined) {
                    return criteria.order === 'asc' ? -1 : 1;
                }
                if (bValue === null || bValue === undefined) {
                    return criteria.order === 'asc' ? 1 : -1;
                }
                if (typeof aValue === 'boolean' && typeof bValue === 'boolean') {
                    return criteria.order === 'asc' ? (aValue ? -1 : 1) : (bValue ? -1 : 1);
                }
                if (typeof aValue === 'number' && typeof bValue === 'number') {
                    return criteria.order === 'asc' ? aValue - bValue : bValue - aValue;
                }
                const aValueStr = typeof aValue === 'string' ? aValue.toLowerCase() : aValue;
                const bValueStr = typeof bValue === 'string' ? bValue.toLowerCase() : bValue;
                const comparison = criteria.order === 'asc' ? aValueStr.localeCompare(bValueStr) : bValueStr.localeCompare(aValueStr);
                if (comparison !== 0) {
                    return comparison;
                }
            }
            return 0;
        });
    }
    /**
     * Slices the data array based on the pagination event.
     *
     * @param pagination Object containing the page, the page size and the total number of pages.
     * @param r Array of data to paginate.
     * @returns The sliced array to render.
     */
    paginateRows(pagination, r) {
        this.page = pagination.page;
        this.pageSize = pagination.pageSize;
        return r.slice(this.page * this.pageSize, this.page * this.pageSize + this.pageSize);
    }
    /**
     * Round down the index to the nearest multiple of the number of rows.
     *
     * @param index Index of the current scroll level.
     * @param nbRows Number of rows to display.
     * @returns A rounded number.
     */
    roundDown(index, nbRows) {
        return Math.floor(index / nbRows) * nbRows;
    }
    /**
     * Checks if in the range of data to render some of them had already been loaded or not.
     *
     * @param startIndex Start index of the range to check
     * @param limit Number of item to check after the start index.
     * @param dataRendered Array of data to check
     * @returns The index of the first undefined item in the range or `-1` if not found.
     */
    hasUndefinedInRange(startIndex, limit, dataRendered) {
        for (let i = startIndex; i < startIndex + limit; i++) {
            if (dataRendered[i] === undefined) {
                return i;
            }
        }
        return -1;
    }
    /**
     * Calcultates the position of columns that are sticky.
     */
    stickyFeatureHandler() {
        setTimeout(() => {
            const containerWidth = this.elementRef.nativeElement?.parentElement?.clientWidth || 0;
            const processStickyItems = (items) => {
                items.forEach((item, i) => {
                    const isStickyFirstCol = item.offsetLeft + item.clientWidth < containerWidth;
                    const isStickyLastCol = item.offsetLeft + item.clientWidth > containerWidth;
                    const itemsSticky = isStickyFirstCol
                        ? items.filter((it) => it.offsetLeft + it.clientWidth < containerWidth)
                        : isStickyLastCol
                            ? items.filter((it) => it.offsetLeft + it.clientWidth > containerWidth)
                            : [];
                    itemsSticky.forEach((it, j) => {
                        const w = itemsSticky[j - 1]?.clientWidth;
                        const offset = isStickyFirstCol
                            ? parseInt(itemsSticky[j - 1]?.style.left, 10)
                            : parseInt(itemsSticky[j - 1]?.style.right, 10);
                        if (isStickyFirstCol) {
                            it.style.left = (j === 0 ? 0 : w + offset) + 'px';
                        }
                        else if (isStickyLastCol) {
                            it.style.right = (j === 0 ? 0 : w + offset) + 'px';
                        }
                        if (j + 1 === itemsSticky.length) {
                            this.renderer.addClass(it, `eui-table__col--sticky-shadowed-${isStickyFirstCol ? 'first' : 'last'}`);
                        }
                    });
                });
            };
            if (this.theadRef) {
                const thItems = Array.from(this.theadRef.nativeElement.querySelectorAll('.eui-table__col--sticky'));
                processStickyItems(thItems);
            }
            if (this.tbodyRef) {
                const bodyTrItems = Array.from(this.tbodyRef.nativeElement.querySelectorAll('tr'));
                bodyTrItems.forEach((tr) => {
                    const tdItems = Array.from(tr.querySelectorAll('.eui-table__col--sticky'));
                    processStickyItems(tdItems);
                });
            }
            if (this.tfootRef) {
                const tdItems = Array.from(this.tfootRef.nativeElement.querySelectorAll('.eui-table__col--sticky'));
                processStickyItems(tdItems);
            }
        }, 250);
    }
    /**
     * Handles the selection of rows.
     */
    selectRowsFeatureHandler() {
        this.euiTableSelectableRowService.selectedRows.pipe(skip(1), takeUntil(this.destroy$)).subscribe((selected) => {
            this.rowsSelect.emit(selected);
        });
    }
    /**
     * Handles the sorting of columns.
     */
    sortFeatureHandler() {
        this.euiTableSortService.sorts.pipe(skip(1), takeUntil(this.destroy$)).subscribe((sorts) => {
            this.sortChange.emit(sorts);
        });
    }
    /**
     * Get the properties of the object matching the filter string.
     *
     * @param row Row to extract the property from.
     * @param filter String to search in the properties.
     * @returns An array of properties matching the filter.
     */
    getProps(row, filter) {
        const isObject = (val) => val && typeof val === 'object';
        const addDelimiter = (a, b) => (a && a !== '0' ? `${a}.${b}` : b);
        const props = [];
        const paths = (pathObj, head = '') => {
            return Object.entries(pathObj).reduce((product, [key, value]) => {
                const fullPath = addDelimiter(head, key);
                const match = (v) => v && typeof v !== 'object' && v?.toString().toLowerCase().indexOf(filter?.trim().toLowerCase()) !== -1;
                if (key !== '0' && typeof value !== 'object') {
                    props.push({ key: addDelimiter(head, key), match: match(value), value });
                }
                return isObject(value) ? product.concat(paths(value, fullPath)) : product.concat(fullPath);
            }, []);
        };
        paths(row);
        return props;
    }
    /**
     * Get a property of an object based on the path.
     *
     * @param obj Row to extract the property from.
     * @param prop Path of the property to extract.
     * @returns The value of the property
     */
    getObjProp(obj, prop) {
        return prop ? prop.split('.').reduce((prev, curr) => (prev ? prev[curr] : null), obj || self) : null;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: EuiTableComponent, isStandalone: true, selector: "eui-table, table[euiTable]", inputs: { data: "data", propId: "propId", itemSize: "itemSize", paginator: "paginator", filter: "filter", preselectedRows: "preselectedRows", isVirtualScroll: ["isVirtualScroll", "isVirtualScroll", booleanAttribute], isVirtualScrollCache: ["isVirtualScrollCache", "isVirtualScrollCache", booleanAttribute], hasStickyHeader: ["hasStickyHeader", "hasStickyHeader", booleanAttribute], hasStickyFooter: ["hasStickyFooter", "hasStickyFooter", booleanAttribute], hasStickyCols: ["hasStickyCols", "hasStickyCols", booleanAttribute], isTableResponsive: ["isTableResponsive", "isTableResponsive", booleanAttribute], isAsync: ["isAsync", "isAsync", booleanAttribute], virtualScrollAsyncItemsLength: ["virtualScrollAsyncItemsLength", "virtualScrollAsyncItemsLength", numberAttribute], virtualScrollNbRows: ["virtualScrollNbRows", "virtualScrollNbRows", numberAttribute], isColsOrderable: ["isColsOrderable", "isColsOrderable", booleanAttribute], isLoading: ["isLoading", "isLoading", booleanAttribute], isSelectOnlyVisibleRows: ["isSelectOnlyVisibleRows", "isSelectOnlyVisibleRows", booleanAttribute], isTableFixedLayout: ["isTableFixedLayout", "isTableFixedLayout", booleanAttribute], isTableCompact: ["isTableCompact", "isTableCompact", booleanAttribute] }, outputs: { scrollChange: "scrollChange", rowsSelect: "rowsSelect", sortChange: "sortChange" }, host: { properties: { "class": "this.cssClasses" } }, providers: [EuiTableSelectableRowService, EuiTableSortService], queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: ["cdkVirtualScrollViewport"], descendants: true }, { propertyName: "cdkVirtualScrollViewportElement", first: true, predicate: ["cdkVirtualScrollViewportElement"], descendants: true, read: ElementRef }, { propertyName: "theadRef", first: true, predicate: ["theadRef"], descendants: true }, { propertyName: "tbodyRef", first: true, predicate: ["tbodyRef"], descendants: true }, { propertyName: "tfootRef", first: true, predicate: ["tfootRef"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.BaseStatesDirective }], ngImport: i0, template: "@if (isVirtualScroll) {\n    <cdk-virtual-scroll-viewport\n        #cdkVirtualScrollViewport\n        #cdkVirtualScrollViewportElement\n        class=\"eui-table__scroll-viewport\"\n        [itemSize]=\"itemSize\"\n        [style.overflow]=\"cdkVirtualScrollViewportOverflowValue\"\n        tabindex=\"0\">\n        <table class=\"{{ cssClasses }}\" [style.width]=\"hostWidth\">\n            @if (captionTemplate) {\n                <caption>\n                    <ng-template [ngTemplateOutlet]=\"captionTemplate\"></ng-template>\n                </caption>\n            }\n            @if (headerTemplate) {\n                <thead #theadRef [style.top]=\"stickyHeaderTopPosition\">\n                    <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n                </thead>\n            }\n            @if (bodyTemplate) {\n                <tbody #tbodyRef>\n                    <ng-container *cdkVirtualFor=\"let row of dataRendered; let i = index; trackBy: trackByFn\">\n                        @if (row) {\n                            <ng-template\n                                [ngTemplateOutlet]=\"bodyTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\">\n                            </ng-template>\n                        } @else {\n                            <ng-template [ngTemplateOutlet]=\"skeletonLoading\"></ng-template>\n                        }\n                    </ng-container>\n\n                    @if (noDataTemplate && (data?.length === 0 || dataRendered?.length === 0)) {\n                        <ng-template [ngTemplateOutlet]=\"noDataTemplate\"></ng-template>\n                    }\n                </tbody>\n            }\n            @if (footerTemplate) {\n                <tfoot #tfootRef [style.bottom]=\"stickyFooterBottomPosition\">\n                    <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n                </tfoot>\n            }\n        </table>\n    </cdk-virtual-scroll-viewport>\n} @else {\n    @if (captionTemplate) {\n        <caption>\n            <ng-template [ngTemplateOutlet]=\"captionTemplate\"></ng-template>\n        </caption>\n    }\n    @if (headerTemplate) {\n        <thead #theadRef>\n            <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n        </thead>\n    }\n    @if (bodyTemplate) {\n        <tbody #tbodyRef>\n            @for (row of dataRendered; let i = $index; track $index) {\n                <ng-container>\n                    <ng-template\n                        [ngTemplateOutlet]=\"bodyTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\">\n                    </ng-template>\n                </ng-container>\n            }\n            @if (noDataTemplate && (data?.length === 0 || dataRendered?.length === 0)) {\n                <ng-template [ngTemplateOutlet]=\"noDataTemplate\"></ng-template>\n            }\n        </tbody>\n    }\n    @if (footerTemplate) {\n        <tfoot #tfootRef>\n            <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n        </tfoot>\n    }\n}\n\n<ng-template #skeletonLoading>\n    <tr [style.height.px]=\"itemSize\">\n        @for (__ of nbCols; track $index) {\n            <td><eui-skeleton line euiRounded></eui-skeleton></td>\n        }\n    </tr>\n</ng-template>\n", styles: [".eui-21 .eui-table__scroll-viewport{min-height:100%;width:100%}.eui-21 .eui-table__scrollable-wrapper{overflow:auto}.eui-21 .eui-table__scrollable-wrapper::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-c-secondary-surface-light)}.eui-21 .eui-table__scrollable-wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-c-divider);border-radius:5rem}.eui-21 .eui-table__scrollable-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-secondary-surface)}.eui-21 .eui-table__scrollable-wrapper:focus::-webkit-scrollbar-thumb{outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-21 .eui-table__scrollable-wrapper:focus-visible::-webkit-scrollbar-thumb{outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-21 .eui-table__scrollable-wrapper::-webkit-scrollbar-track{background-color:var(--eui-c-secondary-surface-light);border-radius:0}@-moz-document url-prefix(){.eui-21 .eui-table__scrollable-wrapper{scrollbar-color:var(--eui-c-secondary-surface) var(--eui-c-secondary-surface-light);scrollbar-width:auto}}@-moz-document url-prefix(){.eui-21 .eui-table__scrollable-wrapper:focus,.eui-21 .eui-table__scrollable-wrapper:focus-visible{scrollbar-color:var(--eui-c-focus-visible) var(--eui-c-s-secondary-surface-light)}}.eui-21 .eui-table__orderable-cols-preview,.eui-21 .eui-table__orderable-rows-preview{display:none}.eui-21 .eui-table tr[euihighlighted]{z-index:var(--eui-zi-highlighted);position:relative}.eui-21 .eui-table--fixed-layout{table-layout:fixed;width:100%}.eui-21 .eui-table--compact thead tr th{padding:var(--eui-s-s)}.eui-21 .eui-table--compact tbody tr{height:calc(2 * var(--eui-s-m))}.eui-21 .eui-table--compact tbody tr td{padding:0 var(--eui-s-s)}.eui-21 .eui-table--highlighted{background-color:var(--eui-bc-wa-300);text-decoration:none}.eui-21 .eui-table--virtual-scroll{width:100%;height:100%}.eui-21 .eui-table--cols-orderable .cdk-drag-placeholder{background-color:var(--eui-c-surface-container);color:var(--eui-c-info);cursor:move;opacity:var(--eui-o-100)}.eui-21 .eui-table--cols-orderable tr{display:table-row}.eui-21 .eui-table--cols-orderable tr th.cdk-drag:not(.cdk-drag-disabled){cursor:move}.eui-21 .eui-table--loading:before{animation:.8s linear infinite spin;border:8px solid transparent;border-radius:50%;border-top-color:var(--eui-c-primary-base);content:\"\";display:block;height:80px;left:50%;margin:-40px 0 0 -40px;position:absolute;top:50%;width:80px;z-index:1000001}.eui-21 .eui-table--loading:after{background-color:#fff6;content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.eui-21 .eui-table--sticky{max-width:none!important}.eui-21 .eui-table--sticky-header thead{position:sticky;top:0;z-index:8}.eui-21 .eui-table--sticky-header thead th,.eui-21 .eui-table--sticky-header thead td{background-color:inherit}.eui-21 .eui-table--sticky-header.eui-table-sticky-col thead{z-index:9}.eui-21 .eui-table--sticky tbody tr:nth-of-type(odd) td{background-color:inherit}.eui-21 .eui-table--sticky tbody tr:nth-of-type(2n) td{background-color:inherit}.eui-21 .eui-table--sticky-footer tfoot{position:sticky;bottom:-1px;z-index:8}.eui-21 .eui-table--sticky-footer tfoot tr td{background-color:inherit}.eui-21 .eui-table--sticky-cols .eui-table__col--sticky{position:sticky;z-index:1}.eui-21 .eui-table__row--selected td{background-color:var(--eui-c-active-bg-light)}@media screen and (max-width:767px){.eui-21 .eui-table.eui-table-default--responsive{width:100%!important}.eui-21 .eui-table.eui-table-default--responsive thead,.eui-21 .eui-table.eui-table-default--responsive tbody,.eui-21 .eui-table.eui-table-default--responsive tfoot,.eui-21 .eui-table.eui-table-default--responsive th,.eui-21 .eui-table.eui-table-default--responsive td,.eui-21 .eui-table.eui-table-default--responsive tr{display:block}.eui-21 .eui-table.eui-table-default--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-21 .eui-table.eui-table-default--responsive tr{height:auto}.eui-21 .eui-table.eui-table-default--responsive td{border:var(--eui-bw-none);border-bottom:1px solid var(--eui-c-divider);padding-left:50%;position:relative;text-align:left!important;left:unset!important;right:unset!important}.eui-21 .eui-table.eui-table-default--responsive td:before{color:var(--eui-c-text-light);content:attr(data-col-label);left:var(--eui-s-xs);padding-right:var(--eui-s-xs);position:absolute;width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--eui-f-m-semi-bold)}.eui-21 .eui-table.eui-table-default--responsive tfoot tr td:empty{display:none!important}.eui-21 .eui-table .actionsColumn,.eui-21 .eui-table .actions-column{justify-content:flex-start;text-align:left;width:100%}.eui-21 .eui-table__sticky-container{height:auto;width:auto!important}.eui-21 .eui-table--sticky-cols th,.eui-21 .eui-table--sticky-cols td,.eui-21 .eui-table--sticky-cols th .eui-table__col--sticky,.eui-21 .eui-table--sticky-cols td .eui-table__col--sticky{width:auto;z-index:auto}.eui-21 .eui-table--sticky-cols th .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-21 .eui-table--sticky-cols th .eui-table__col--sticky.eui-table__col--sticky-shadowed-last,.eui-21 .eui-table--sticky-cols td .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-21 .eui-table--sticky-cols td .eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:none!important}.eui-21 .eui-table--sticky-cols tfoot tr td:empty{display:none!important}}.eui-21 .eui-table__filter{align-items:center;display:flex;justify-content:flex-end;position:relative}.eui-21 .eui-table__filter--responsive{width:100%}.eui-21 .eui-table__filter-input{padding-left:var(--eui-s-5xl)!important}.eui-21 .eui-table__filter-search-icon{left:var(--eui-s-xs);position:absolute;top:var(--eui-s-xs)}.eui-21 .eui-table__sortable-col-multisort-index{font:var(--eui-f-s)}.eui-21 .eui-table__sortable-col .eui-table__sortable-col-content{align-items:center;display:flex;vertical-align:middle;white-space:nowrap;justify-content:space-between}.eui-21 .eui-table__sortable-col .eui-table__sortable-col-content .eui-table__sortable-col-content-label{align-items:center;display:flex;-webkit-user-select:none;-ms-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: i3.EuiSkeletonComponent, selector: "eui-skeleton", inputs: ["circle", "line", "square", "rectangle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-table, table[euiTable]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        NgTemplateOutlet,
                        ScrollingModule,
                        FormsModule,
                        ReactiveFormsModule,
                        TranslateModule,
                        ...EUI_ICON,
                        ...EUI_SKELETON,
                        ...EUI_LIST,
                        ...EUI_ICON_INPUT,
                        ...EUI_BUTTON,
                        ...EUI_INPUT_TEXT,
                        ...EUI_INPUT_CHECKBOX,
                    ], providers: [EuiTableSelectableRowService, EuiTableSortService], hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [],
                        },
                    ], template: "@if (isVirtualScroll) {\n    <cdk-virtual-scroll-viewport\n        #cdkVirtualScrollViewport\n        #cdkVirtualScrollViewportElement\n        class=\"eui-table__scroll-viewport\"\n        [itemSize]=\"itemSize\"\n        [style.overflow]=\"cdkVirtualScrollViewportOverflowValue\"\n        tabindex=\"0\">\n        <table class=\"{{ cssClasses }}\" [style.width]=\"hostWidth\">\n            @if (captionTemplate) {\n                <caption>\n                    <ng-template [ngTemplateOutlet]=\"captionTemplate\"></ng-template>\n                </caption>\n            }\n            @if (headerTemplate) {\n                <thead #theadRef [style.top]=\"stickyHeaderTopPosition\">\n                    <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n                </thead>\n            }\n            @if (bodyTemplate) {\n                <tbody #tbodyRef>\n                    <ng-container *cdkVirtualFor=\"let row of dataRendered; let i = index; trackBy: trackByFn\">\n                        @if (row) {\n                            <ng-template\n                                [ngTemplateOutlet]=\"bodyTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\">\n                            </ng-template>\n                        } @else {\n                            <ng-template [ngTemplateOutlet]=\"skeletonLoading\"></ng-template>\n                        }\n                    </ng-container>\n\n                    @if (noDataTemplate && (data?.length === 0 || dataRendered?.length === 0)) {\n                        <ng-template [ngTemplateOutlet]=\"noDataTemplate\"></ng-template>\n                    }\n                </tbody>\n            }\n            @if (footerTemplate) {\n                <tfoot #tfootRef [style.bottom]=\"stickyFooterBottomPosition\">\n                    <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n                </tfoot>\n            }\n        </table>\n    </cdk-virtual-scroll-viewport>\n} @else {\n    @if (captionTemplate) {\n        <caption>\n            <ng-template [ngTemplateOutlet]=\"captionTemplate\"></ng-template>\n        </caption>\n    }\n    @if (headerTemplate) {\n        <thead #theadRef>\n            <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n        </thead>\n    }\n    @if (bodyTemplate) {\n        <tbody #tbodyRef>\n            @for (row of dataRendered; let i = $index; track $index) {\n                <ng-container>\n                    <ng-template\n                        [ngTemplateOutlet]=\"bodyTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\">\n                    </ng-template>\n                </ng-container>\n            }\n            @if (noDataTemplate && (data?.length === 0 || dataRendered?.length === 0)) {\n                <ng-template [ngTemplateOutlet]=\"noDataTemplate\"></ng-template>\n            }\n        </tbody>\n    }\n    @if (footerTemplate) {\n        <tfoot #tfootRef>\n            <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n        </tfoot>\n    }\n}\n\n<ng-template #skeletonLoading>\n    <tr [style.height.px]=\"itemSize\">\n        @for (__ of nbCols; track $index) {\n            <td><eui-skeleton line euiRounded></eui-skeleton></td>\n        }\n    </tr>\n</ng-template>\n", styles: [".eui-21 .eui-table__scroll-viewport{min-height:100%;width:100%}.eui-21 .eui-table__scrollable-wrapper{overflow:auto}.eui-21 .eui-table__scrollable-wrapper::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-c-secondary-surface-light)}.eui-21 .eui-table__scrollable-wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-c-divider);border-radius:5rem}.eui-21 .eui-table__scrollable-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-secondary-surface)}.eui-21 .eui-table__scrollable-wrapper:focus::-webkit-scrollbar-thumb{outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-21 .eui-table__scrollable-wrapper:focus-visible::-webkit-scrollbar-thumb{outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-21 .eui-table__scrollable-wrapper::-webkit-scrollbar-track{background-color:var(--eui-c-secondary-surface-light);border-radius:0}@-moz-document url-prefix(){.eui-21 .eui-table__scrollable-wrapper{scrollbar-color:var(--eui-c-secondary-surface) var(--eui-c-secondary-surface-light);scrollbar-width:auto}}@-moz-document url-prefix(){.eui-21 .eui-table__scrollable-wrapper:focus,.eui-21 .eui-table__scrollable-wrapper:focus-visible{scrollbar-color:var(--eui-c-focus-visible) var(--eui-c-s-secondary-surface-light)}}.eui-21 .eui-table__orderable-cols-preview,.eui-21 .eui-table__orderable-rows-preview{display:none}.eui-21 .eui-table tr[euihighlighted]{z-index:var(--eui-zi-highlighted);position:relative}.eui-21 .eui-table--fixed-layout{table-layout:fixed;width:100%}.eui-21 .eui-table--compact thead tr th{padding:var(--eui-s-s)}.eui-21 .eui-table--compact tbody tr{height:calc(2 * var(--eui-s-m))}.eui-21 .eui-table--compact tbody tr td{padding:0 var(--eui-s-s)}.eui-21 .eui-table--highlighted{background-color:var(--eui-bc-wa-300);text-decoration:none}.eui-21 .eui-table--virtual-scroll{width:100%;height:100%}.eui-21 .eui-table--cols-orderable .cdk-drag-placeholder{background-color:var(--eui-c-surface-container);color:var(--eui-c-info);cursor:move;opacity:var(--eui-o-100)}.eui-21 .eui-table--cols-orderable tr{display:table-row}.eui-21 .eui-table--cols-orderable tr th.cdk-drag:not(.cdk-drag-disabled){cursor:move}.eui-21 .eui-table--loading:before{animation:.8s linear infinite spin;border:8px solid transparent;border-radius:50%;border-top-color:var(--eui-c-primary-base);content:\"\";display:block;height:80px;left:50%;margin:-40px 0 0 -40px;position:absolute;top:50%;width:80px;z-index:1000001}.eui-21 .eui-table--loading:after{background-color:#fff6;content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.eui-21 .eui-table--sticky{max-width:none!important}.eui-21 .eui-table--sticky-header thead{position:sticky;top:0;z-index:8}.eui-21 .eui-table--sticky-header thead th,.eui-21 .eui-table--sticky-header thead td{background-color:inherit}.eui-21 .eui-table--sticky-header.eui-table-sticky-col thead{z-index:9}.eui-21 .eui-table--sticky tbody tr:nth-of-type(odd) td{background-color:inherit}.eui-21 .eui-table--sticky tbody tr:nth-of-type(2n) td{background-color:inherit}.eui-21 .eui-table--sticky-footer tfoot{position:sticky;bottom:-1px;z-index:8}.eui-21 .eui-table--sticky-footer tfoot tr td{background-color:inherit}.eui-21 .eui-table--sticky-cols .eui-table__col--sticky{position:sticky;z-index:1}.eui-21 .eui-table__row--selected td{background-color:var(--eui-c-active-bg-light)}@media screen and (max-width:767px){.eui-21 .eui-table.eui-table-default--responsive{width:100%!important}.eui-21 .eui-table.eui-table-default--responsive thead,.eui-21 .eui-table.eui-table-default--responsive tbody,.eui-21 .eui-table.eui-table-default--responsive tfoot,.eui-21 .eui-table.eui-table-default--responsive th,.eui-21 .eui-table.eui-table-default--responsive td,.eui-21 .eui-table.eui-table-default--responsive tr{display:block}.eui-21 .eui-table.eui-table-default--responsive thead tr{left:-9999px;position:absolute;top:-9999px}.eui-21 .eui-table.eui-table-default--responsive tr{height:auto}.eui-21 .eui-table.eui-table-default--responsive td{border:var(--eui-bw-none);border-bottom:1px solid var(--eui-c-divider);padding-left:50%;position:relative;text-align:left!important;left:unset!important;right:unset!important}.eui-21 .eui-table.eui-table-default--responsive td:before{color:var(--eui-c-text-light);content:attr(data-col-label);left:var(--eui-s-xs);padding-right:var(--eui-s-xs);position:absolute;width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--eui-f-m-semi-bold)}.eui-21 .eui-table.eui-table-default--responsive tfoot tr td:empty{display:none!important}.eui-21 .eui-table .actionsColumn,.eui-21 .eui-table .actions-column{justify-content:flex-start;text-align:left;width:100%}.eui-21 .eui-table__sticky-container{height:auto;width:auto!important}.eui-21 .eui-table--sticky-cols th,.eui-21 .eui-table--sticky-cols td,.eui-21 .eui-table--sticky-cols th .eui-table__col--sticky,.eui-21 .eui-table--sticky-cols td .eui-table__col--sticky{width:auto;z-index:auto}.eui-21 .eui-table--sticky-cols th .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-21 .eui-table--sticky-cols th .eui-table__col--sticky.eui-table__col--sticky-shadowed-last,.eui-21 .eui-table--sticky-cols td .eui-table__col--sticky.eui-table__col--sticky-shadowed-first,.eui-21 .eui-table--sticky-cols td .eui-table__col--sticky.eui-table__col--sticky-shadowed-last{box-shadow:none!important}.eui-21 .eui-table--sticky-cols tfoot tr td:empty{display:none!important}}.eui-21 .eui-table__filter{align-items:center;display:flex;justify-content:flex-end;position:relative}.eui-21 .eui-table__filter--responsive{width:100%}.eui-21 .eui-table__filter-input{padding-left:var(--eui-s-5xl)!important}.eui-21 .eui-table__filter-search-icon{left:var(--eui-s-xs);position:absolute;top:var(--eui-s-xs)}.eui-21 .eui-table__sortable-col-multisort-index{font:var(--eui-f-s)}.eui-21 .eui-table__sortable-col .eui-table__sortable-col-content{align-items:center;display:flex;vertical-align:middle;white-space:nowrap;justify-content:space-between}.eui-21 .eui-table__sortable-col .eui-table__sortable-col-content .eui-table__sortable-col-content-label{align-items:center;display:flex;-webkit-user-select:none;-ms-user-select:none;user-select:none}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], data: [{
                type: Input
            }], propId: [{
                type: Input
            }], itemSize: [{
                type: Input
            }], paginator: [{
                type: Input
            }], filter: [{
                type: Input
            }], preselectedRows: [{
                type: Input
            }], isVirtualScroll: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isVirtualScrollCache: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasStickyHeader: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasStickyFooter: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasStickyCols: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isTableResponsive: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isAsync: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], virtualScrollAsyncItemsLength: [{
                type: Input,
                args: [{ transform: numberAttribute }]
            }], virtualScrollNbRows: [{
                type: Input,
                args: [{ transform: numberAttribute }]
            }], isColsOrderable: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isLoading: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isSelectOnlyVisibleRows: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isTableFixedLayout: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isTableCompact: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], templates: [{
                type: ContentChildren,
                args: [EuiTemplateDirective]
            }], cdkVirtualScrollViewport: [{
                type: ViewChild,
                args: ['cdkVirtualScrollViewport', { static: false }]
            }], cdkVirtualScrollViewportElement: [{
                type: ViewChild,
                args: ['cdkVirtualScrollViewportElement', { static: false, read: ElementRef }]
            }], theadRef: [{
                type: ViewChild,
                args: ['theadRef']
            }], tbodyRef: [{
                type: ViewChild,
                args: ['tbodyRef']
            }], tfootRef: [{
                type: ViewChild,
                args: ['tfootRef']
            }], scrollChange: [{
                type: Output
            }], rowsSelect: [{
                type: Output
            }], sortChange: [{
                type: Output
            }] } });

/**
 * @description
 * Component used internally by `eui-table` to add a 'select all' checkbox in the header of the table.
 */
class EuiTableSelectableHeaderComponent {
    constructor() {
        /**
         * Whether select all features are available in the header.
         *
         * @default false
         */
        this.isHeaderSelectable = true;
        this.isCheckedIndeterminate = false;
        this.isChecked = false;
        this.destroy$ = new Subject();
        this.euiDataTableSelectableRowService = inject(EuiTableSelectableRowService);
    }
    ngOnInit() {
        combineLatest([
            this.euiDataTableSelectableRowService.isAllRowsSelected,
            this.euiDataTableSelectableRowService.selectedRows,
        ]).pipe(takeUntil(this.destroy$)).subscribe(([allSelected, selectedRows]) => {
            this.isChecked = allSelected;
            this.isCheckedIndeterminate = !allSelected && selectedRows.length > 0;
        });
    }
    ngOnDestroy() {
        this.destroy$.next(true);
        this.destroy$.unsubscribe();
    }
    /**
     * Gets the `aria-label` attribute for the checkbox element.
     *
     * @default `Unchecked`
     */
    get ariaLabel() {
        if (!this.isChecked && !this.isCheckedIndeterminate) {
            return 'Unchecked';
        }
        if (this.isCheckedIndeterminate) {
            return 'Indeterminate';
        }
        if (this.isChecked && !this.isCheckedIndeterminate) {
            return 'Checked';
        }
    }
    /**
     * Handle the change of the selected status.
     *
     * @param e Change Event
     */
    toggleCheckedState(e) {
        this.isChecked = e.target.checked;
        if (this.isChecked) {
            this.euiDataTableSelectableRowService.selectAllRows();
        }
        else {
            this.euiDataTableSelectableRowService.unselectAllRows();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableSelectableHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: EuiTableSelectableHeaderComponent, isStandalone: true, selector: "tr[isHeaderSelectable]", inputs: { isHeaderSelectable: ["isHeaderSelectable", "isHeaderSelectable", booleanAttribute] }, ngImport: i0, template: "@if (isHeaderSelectable) {\n    <th class=\"eui-table__cell-select\">\n        <div class=\"eui-table__cell-select-checkbox-container\">\n            <input [attr.aria-label]=\"ariaLabel\" euiInputCheckBox [checked]=\"isChecked ? 'checked' : null\" [indeterminate]=\"isCheckedIndeterminate\" (click)=\"toggleCheckedState($event)\" />\n        </div>\n    </th>\n}\n<ng-content />\n", dependencies: [{ kind: "component", type: i1$1.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "checked"], outputs: ["indeterminateChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableSelectableHeaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'tr[isHeaderSelectable]', imports: [
                        ...EUI_INPUT_CHECKBOX,
                    ], template: "@if (isHeaderSelectable) {\n    <th class=\"eui-table__cell-select\">\n        <div class=\"eui-table__cell-select-checkbox-container\">\n            <input [attr.aria-label]=\"ariaLabel\" euiInputCheckBox [checked]=\"isChecked ? 'checked' : null\" [indeterminate]=\"isCheckedIndeterminate\" (click)=\"toggleCheckedState($event)\" />\n        </div>\n    </th>\n}\n<ng-content />\n" }]
        }], propDecorators: { isHeaderSelectable: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });

/**
 * @description
 * Component used internally by `eui-table` to make a row selectable.
 */
class EuiTableSelectableRowComponent {
    constructor() {
        /**
         * Wheter only one row is selectable.
         *
         * @default false
         */
        this.isSingleSelectable = false;
        /**
         * Wheter the row is selected.
         *
         * @default false
         */
        this.isChecked = false;
        /**
         * Wheter the selection can be done with the keyboard.
         *
         * @default false
         */
        this.isKeyboardSelectable = false;
        this.propId = 'id';
        this.destroy$ = new Subject();
        this.euiDataTableSelectableRowService = inject(EuiTableSelectableRowService);
        this.elementRef = inject(ElementRef);
    }
    /**
     * @description
     * Computes and returns the CSS classes for the component based on its current state.
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses() {
        return [
            'eui-table__row',
            this.isDataSelectable ? 'eui-table__row--selectable' : '',
            this.isChecked ? 'eui-table__row--selected' : '',
        ]
            .join(' ')
            .trim();
    }
    ngOnChanges(c) {
        if (c && c.isChecked) {
            if (c.isChecked.currentValue) {
                this.euiDataTableSelectableRowService.selectRow(this.isDataSelectable);
            }
            else {
                this.euiDataTableSelectableRowService.unselectRow(this.isDataSelectable);
            }
        }
        const selected = this.euiDataTableSelectableRowService.selectedRows$.getValue();
        this.isChecked = selected.some((s) => s[this.propId] === this.isDataSelectable?.[this.propId]);
    }
    ngOnInit() {
        if (this.isKeyboardSelectable && this.isDataSelectable) {
            fromEvent(this.elementRef.nativeElement, 'click').pipe(takeUntil(this.destroy$)).subscribe((event) => {
                if (event.ctrlKey) {
                    if (!this.isChecked) {
                        this.euiDataTableSelectableRowService.selectRow(this.isDataSelectable);
                    }
                    else {
                        this.euiDataTableSelectableRowService.unselectRow(this.isDataSelectable);
                    }
                }
                else if (event.shiftKey) {
                    const rows = this.euiDataTableSelectableRowService.getRows();
                    const lastSelectedRow = this.euiDataTableSelectableRowService.getLastSelectedRow();
                    const lastSelectedRowPosition = rows.indexOf(lastSelectedRow);
                    const position = rows.indexOf(this.isDataSelectable);
                    const range = lastSelectedRowPosition > position
                        ? rows.slice(position, lastSelectedRowPosition + 1)
                        : rows.slice(lastSelectedRowPosition, position + 1);
                    this.euiDataTableSelectableRowService.selectRows(range);
                    window.getSelection()?.empty();
                }
                else {
                    this.euiDataTableSelectableRowService.selectRows([this.isDataSelectable]);
                }
            });
        }
        this.propId = this.euiDataTableSelectableRowService.getPropId();
        this.euiDataTableSelectableRowService.selectedRows.pipe(takeUntil(this.destroy$)).subscribe((selected) => {
            this.isChecked = selected.find((s) => s[this.propId] === this.isDataSelectable?.[this.propId]) !== undefined;
        });
    }
    ngOnDestroy() {
        this.destroy$.next(true);
        this.destroy$.unsubscribe();
    }
    /**
     * Handle the change of the selected status.
     *
     * @param e Change Event
     */
    toggleCheckedState(e) {
        this.isChecked = e.target.checked;
        if (this.isChecked) {
            if (this.isSingleSelectable) {
                this.euiDataTableSelectableRowService.selectSingleRow(this.isDataSelectable);
            }
            else {
                this.euiDataTableSelectableRowService.selectRow(this.isDataSelectable);
            }
            this.euiDataTableSelectableRowService.selectRow(this.isDataSelectable);
        }
        else {
            this.euiDataTableSelectableRowService.unselectRow(this.isDataSelectable);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableSelectableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: EuiTableSelectableRowComponent, isStandalone: true, selector: "tr[isDataSelectable]", inputs: { isDataSelectable: "isDataSelectable", isSingleSelectable: ["isSingleSelectable", "isSingleSelectable", booleanAttribute], isChecked: ["isChecked", "isChecked", booleanAttribute], isKeyboardSelectable: ["isKeyboardSelectable", "isKeyboardSelectable", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, usesOnChanges: true, ngImport: i0, template: "@if (isDataSelectable) {\n    <td class=\"eui-table__cell-select\">\n        <div class=\"eui-table__cell-select-checkbox-container\">\n            <input\n                euiInputCheckBox\n                [attr.aria-label]=\"isChecked ? 'default checkbox checked' : 'default checkbox unchecked'\"\n                [(ngModel)]=\"isChecked\"\n                (change)=\"toggleCheckedState($event)\" />\n        </div>\n    </td>\n}\n<ng-content />\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$1.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "checked"], outputs: ["indeterminateChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableSelectableRowComponent, decorators: [{
            type: Component,
            args: [{ selector: 'tr[isDataSelectable]', imports: [
                        FormsModule,
                        ...EUI_INPUT_CHECKBOX,
                    ], template: "@if (isDataSelectable) {\n    <td class=\"eui-table__cell-select\">\n        <div class=\"eui-table__cell-select-checkbox-container\">\n            <input\n                euiInputCheckBox\n                [attr.aria-label]=\"isChecked ? 'default checkbox checked' : 'default checkbox unchecked'\"\n                [(ngModel)]=\"isChecked\"\n                (change)=\"toggleCheckedState($event)\" />\n        </div>\n    </td>\n}\n<ng-content />\n" }]
        }], propDecorators: { isDataSelectable: [{
                type: Input
            }], isSingleSelectable: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isChecked: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isKeyboardSelectable: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], cssClasses: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Directive used to activate the sticky feature on a column of the table.
 */
class EuiTableStickyColDirective {
    constructor() {
        this.class = 'eui-table__col--sticky';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableStickyColDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.5", type: EuiTableStickyColDirective, isStandalone: true, selector: "th[isStickyCol], td[isStickyCol]", host: { properties: { "class": "this.class" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableStickyColDirective, decorators: [{
            type: Directive,
            args: [{
                    // eslint-disable-next-line @angular-eslint/directive-selector
                    selector: 'th[isStickyCol], td[isStickyCol]',
                }]
        }], propDecorators: { class: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Component used with `eui-table` to add a filter feature to the table.
 */
class EuiTableFilterComponent {
    constructor() {
        /**
         * Event emitted when the value of the input changes.
         */
        this.filterChange = new EventEmitter();
        this.filter$ = new BehaviorSubject(null);
        this.form = new FormGroup({
            filter: new FormControl(null),
        });
        this.destroy$ = new Subject();
    }
    /**
     * @description
     * Computes and returns the CSS classes for the component based on its current state.
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses() {
        return [
            'eui-table__filter',
        ]
            .join(' ')
            .trim();
    }
    ngOnInit() {
        this.form.get('filter').valueChanges.pipe(debounceTime(500), distinctUntilChanged(), takeUntil(this.destroy$)).subscribe((value) => {
            this.setFilter(value);
        });
    }
    ngOnDestroy() {
        this.destroy$.next(true);
        this.destroy$.unsubscribe();
    }
    /**
     * Set the filter value and emit the change event.
     *
     * @param value Value of the input.
     */
    setFilter(value) {
        this.filter$.next(value);
        this.filterChange.emit(value);
        this.form.get('filter').setValue(value);
    }
    /**
     * Reset the filter and emit the change event.
     */
    resetFilter() {
        this.setFilter(null);
        this.form.reset();
        this.filterInput.nativeElement.focus();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: EuiTableFilterComponent, isStandalone: true, selector: "eui-table-filter", inputs: { placeholder: "placeholder" }, outputs: { filterChange: "filterChange" }, host: { properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"eui-table__filter\">\n    <form [formGroup]=\"form\">\n        <eui-icon-input>\n            <eui-icon-svg icon=\"eui-search\" fillColor=\"secondary\"></eui-icon-svg>\n            <input #filterInput\n                euiClearable\n                euiInputText\n                class=\"eui-table__filter-input\"\n                formControlName=\"filter\"\n                [attr.aria-label]=\"form.get('filter').value ? form.get('filter').value : placeholder\"\n                placeholder=\"{{ placeholder }}\" />\n        </eui-icon-input>\n    </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i3$1.EuiIconInputComponent, selector: "eui-icon-input", inputs: ["euiIconPositionStart", "euiIconPositionEnd"] }, { kind: "component", type: i4.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableFilterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-table-filter', encapsulation: ViewEncapsulation.None, imports: [
                        ReactiveFormsModule,
                        ...EUI_ICON,
                        ...EUI_ICON_INPUT,
                        ...EUI_INPUT_TEXT,
                    ], template: "<div class=\"eui-table__filter\">\n    <form [formGroup]=\"form\">\n        <eui-icon-input>\n            <eui-icon-svg icon=\"eui-search\" fillColor=\"secondary\"></eui-icon-svg>\n            <input #filterInput\n                euiClearable\n                euiInputText\n                class=\"eui-table__filter-input\"\n                formControlName=\"filter\"\n                [attr.aria-label]=\"form.get('filter').value ? form.get('filter').value : placeholder\"\n                placeholder=\"{{ placeholder }}\" />\n        </eui-icon-input>\n    </form>\n</div>\n" }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], placeholder: [{
                type: Input
            }], filterChange: [{
                type: Output
            }], filterInput: [{
                type: ViewChild,
                args: ['filterInput', { read: ElementRef }]
            }] } });

/**
 * @description
 * Pipe used to highlight the matching string in the data of the table when used with filter feature.
 *
 * @example
 * ```
 * <td><span [innerHTML]="row.year | euiTableHighlight: strFilter"></span></td>
 *
 * strFilter = '19'
 * ```
 */
class EuiTableHighlightPipe {
    /**
     * Wrap a matching string with a span element with a class name in the data of the table
     *
     * @param value Data displayed in a cell.
     * @param strFilter Search string to highlight.
     * @param className CSS class to add to the span element. Default: 'eui-table--highlighted'
     * @returns
     */
    transform(value, strFilter, className = 'eui-table--highlighted') {
        if (!value)
            return '';
        if (!strFilter || strFilter.length === 0)
            return value;
        const generateVariants = (str) => {
            const variants = new Set([str]);
            for (let j = 1; j <= 3; j++) {
                for (const separator of ['.', ',', ' ']) {
                    let newVariant = str;
                    let i = j;
                    while (i < newVariant.length) {
                        newVariant = newVariant.slice(0, i) + separator + newVariant.slice(i);
                        i += 4;
                    }
                    variants.add(newVariant);
                }
            }
            return Array.from(variants);
        };
        const isNumber = (str) => !isNaN(Number(str)) && str.trim() !== '';
        const variants = isNumber(strFilter) ? generateVariants(strFilter) : [strFilter];
        const regex = new RegExp(`(${variants.map(v => v.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})`, 'gi');
        return value.toString().replace(regex, `<span class="${className}">$1</span>`);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: EuiTableHighlightPipe, isStandalone: true, name: "euiTableHighlight" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableHighlightPipe, decorators: [{
            type: Pipe,
            args: [{
                    name: 'euiTableHighlight',
                }]
        }] });

/**
 * @description
 * Component used internally by `eui-table` to make a column sortable.
 */
class EuiTableSortableColComponent {
    constructor() {
        this.sortOn = input(...(ngDevMode ? [undefined, { debugName: "sortOn" }] : []));
        this.sortOrder = input('asc', ...(ngDevMode ? [{ debugName: "sortOrder" }] : []));
        /**
         * Whether the column is sorted by default.
         *
         * @default false
         */
        this.defaultOrder = false;
        /**
         * Whether the sort is disabled on the column.
         *
         * @default false
         */
        this.sortDisabled = false;
        /**
         * Whether the sorting of the column can be cumulated with the one of other column.
         *
         * @default false
         */
        this.isMultiSortable = false;
        this.order = 'none';
        this.isSorted = false;
        this.sortedIndex = null;
        this.destroy$ = new Subject();
        this.euiTableSortService = inject(EuiTableSortService);
    }
    /**
     * @description
     * Computes and returns the CSS classes for the component based on its current state.
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses() {
        return ['eui-table__sortable-col', this.sortDisabled ? 'eui-table__sortable-col--disabled' : ''].join(' ').trim();
    }
    ngOnInit() {
        this.euiTableSortService.sorts.pipe(takeUntil(this.destroy$)).subscribe((sorts) => {
            const isSorted = sorts.find(s => s.sort === this.sortOn());
            this.isSorted = isSorted !== undefined;
            if (this.isSorted) {
                this.order = isSorted.order;
                if (sorts.length > 1) {
                    this.sortedIndex = sorts.findIndex(s => s.sort === this.sortOn()) + 1;
                }
                else {
                    this.sortedIndex = null;
                }
            }
            else {
                this.order = 'none';
                this.sortedIndex = null;
            }
        });
        if (this.defaultOrder) {
            this.order = this.sortOrder();
            this.euiTableSortService.setSort(this.sortOn(), this.order, this.isMultiSortable);
        }
    }
    ngOnDestroy() {
        this.destroy$.next(true);
        this.destroy$.unsubscribe();
    }
    /**
     * Handles the click event on the sortable column.
     */
    changeSort() {
        if (!this.sortDisabled) {
            if (this.order === 'asc') {
                this.order = 'desc';
            }
            else if (this.order === 'desc') {
                this.order = 'none';
            }
            else if (this.order === 'none') {
                this.order = 'asc';
            }
            this.euiTableSortService.setSort(this.sortOn(), this.order, this.isMultiSortable);
        }
    }
    /**
     * Handles the click event on the dropdown item when the column is multi-sortable.
     * @param order An array of SortOrder. See {@link SortOrder}
     */
    onDropdownItemClick(order) {
        this.euiTableSortService.setSort(this.sortOn(), order, this.isMultiSortable);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableSortableColComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: EuiTableSortableColComponent, isStandalone: true, selector: "th[isSortable]", inputs: { sortOn: { classPropertyName: "sortOn", publicName: "sortOn", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, defaultOrder: { classPropertyName: "defaultOrder", publicName: "defaultOrder", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sortDisabled: { classPropertyName: "sortDisabled", publicName: "sortDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, isMultiSortable: { classPropertyName: "isMultiSortable", publicName: "isMultiSortable", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, host: { properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "euiDropdown", first: true, predicate: ["euiDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"eui-table__sortable-col-content\">\n    <div class=\"eui-table__sortable-col-content-label\">\n        <ng-content></ng-content>\n\n        <button class=\"eui-u-ml-xs\" euiButton euiIconButton euiBasicButton (click)=\"changeSort()\" [attr.aria-label]=\" 'Click to sort ' + (isSorted ? (order === 'asc' ? 'descending' : 'none') : 'ascending')\">\n            @if (order === 'none' && !sortDisabled) {\n                <eui-icon-svg class=\"sort-icon\" icon=\"eui-arrows-down-up\" fillColor=\"secondary-light\" />\n            }\n            @if (order === 'asc' && isSorted && !sortDisabled) {\n                <eui-icon-svg class=\"sort-icon\" icon=\"eui-arrow-up\" fillColor=\"primary\" [aria-label]=\"'eui.euitable.ASCENDING-ICON' | translate\" />\n            }\n            @if (order === 'desc' && isSorted && !sortDisabled) {\n                <eui-icon-svg class=\"sort-icon\" icon=\"eui-arrow-down\" fillColor=\"primary\" [aria-label]=\"'eui.euitable.DESCENDING-ICON' | translate\" />\n            }\n        </button>\n        @if (sortedIndex && !sortDisabled) {\n            <button euiSizeS euiButton euiBasicButton (click)=\"changeSort()\">\n                <span class=\"eui-table__sortable-col-multisort-index\">{{ sortedIndex }}</span>\n            </button>\n        }\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: i2$1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableSortableColComponent, decorators: [{
            type: Component,
            args: [{ selector: 'th[isSortable]', imports: [
                        TranslateModule,
                        ...EUI_ICON,
                        ...EUI_BUTTON,
                    ], template: "<div class=\"eui-table__sortable-col-content\">\n    <div class=\"eui-table__sortable-col-content-label\">\n        <ng-content></ng-content>\n\n        <button class=\"eui-u-ml-xs\" euiButton euiIconButton euiBasicButton (click)=\"changeSort()\" [attr.aria-label]=\" 'Click to sort ' + (isSorted ? (order === 'asc' ? 'descending' : 'none') : 'ascending')\">\n            @if (order === 'none' && !sortDisabled) {\n                <eui-icon-svg class=\"sort-icon\" icon=\"eui-arrows-down-up\" fillColor=\"secondary-light\" />\n            }\n            @if (order === 'asc' && isSorted && !sortDisabled) {\n                <eui-icon-svg class=\"sort-icon\" icon=\"eui-arrow-up\" fillColor=\"primary\" [aria-label]=\"'eui.euitable.ASCENDING-ICON' | translate\" />\n            }\n            @if (order === 'desc' && isSorted && !sortDisabled) {\n                <eui-icon-svg class=\"sort-icon\" icon=\"eui-arrow-down\" fillColor=\"primary\" [aria-label]=\"'eui.euitable.DESCENDING-ICON' | translate\" />\n            }\n        </button>\n        @if (sortedIndex && !sortDisabled) {\n            <button euiSizeS euiButton euiBasicButton (click)=\"changeSort()\">\n                <span class=\"eui-table__sortable-col-multisort-index\">{{ sortedIndex }}</span>\n            </button>\n        }\n    </div>\n</div>\n" }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], sortOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOn", required: false }] }], sortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOrder", required: false }] }], defaultOrder: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], sortDisabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isMultiSortable: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiDropdown: [{
                type: ViewChild,
                args: ['euiDropdown']
            }] } });

/**
 * @description
 * Directive used to activate the expandable feature on a row of the table.
 */
class EuiTableExpandableRowDirective {
    constructor() {
        this.string = 'eui-table-expandable-row';
        this.el = inject(ElementRef);
        this.animationBuilder = inject(AnimationBuilder);
    }
    get isOpen() {
        return true;
    }
    ngOnInit() {
        const animation = this.animationBuilder.build([
            style({ opacity: 0 }),
            animate('250ms', style({ opacity: 1 })),
        ]);
        this.animationPlayer = animation.create(this.el.nativeElement);
        this.animationPlayer.play();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableExpandableRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.5", type: EuiTableExpandableRowDirective, isStandalone: true, selector: "tr[isExpandableRow]", host: { properties: { "class": "this.string" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiTableExpandableRowDirective, decorators: [{
            type: Directive,
            args: [{
                    // eslint-disable-next-line @angular-eslint/directive-selector
                    selector: 'tr[isExpandableRow]',
                }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

const EUI_TABLE = [
    EuiTableComponent,
    EuiTableSelectableHeaderComponent,
    EuiTableSelectableRowComponent,
    EuiTableStickyColDirective,
    EuiTableFilterComponent,
    EuiTableHighlightPipe,
    EuiTableSortableColComponent,
    EuiTableExpandableRowDirective,
    EuiTemplateDirective,
];

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

export { EUI_TABLE, EuiTableComponent, EuiTableExpandableRowDirective, EuiTableFilterComponent, EuiTableHighlightPipe, EuiTableSelectableHeaderComponent, EuiTableSelectableRowComponent, EuiTableSortableColComponent, EuiTableStickyColDirective, ScrollinDirection };
//# sourceMappingURL=eui-components-eui-table.mjs.map
