import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, EventEmitter, inject, Injector, Input, Output, TemplateRef, } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { PaginationService } from 'ngx-pagination';
import { Subject } from 'rxjs';
import { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
import { BulkActionMenuComponent } from '../bulk-action-menu/bulk-action-menu.component';
import { FilterPresetService } from '../data-table-filter-presets/filter-preset.service';
import { DataTable2ColumnComponent } from './data-table-column.component';
import { DataTableCustomComponentService, } from './data-table-custom-component.service';
import { DataTableCustomFieldColumnComponent } from './data-table-custom-field-column.component';
import { DataTable2SearchComponent } from './data-table-search.component';
import * as i0 from "@angular/core";
import * as i1 from "../../../providers/local-storage/local-storage.service";
import * as i2 from "../../../data/providers/data.service";
import * as i3 from "@clr/angular";
import * as i4 from "@angular/common";
import * as i5 from "../items-per-page-controls/items-per-page-controls.component";
import * as i6 from "../pagination-controls/pagination-controls.component";
import * as i7 from "../form-field/form-field-control.directive";
import * as i8 from "../empty-placeholder/empty-placeholder.component";
import * as i9 from "../ui-extension-point/ui-extension-point.component";
import * as i10 from "../data-table-filters/data-table-filters.component";
import * as i11 from "../data-table-column-picker/data-table-column-picker.component";
import * as i12 from "../data-table-filter-presets/data-table-filter-presets.component";
import * as i13 from "../data-table-filter-presets/add-filter-preset-button.component";
import * as i14 from "ngx-pagination";
import * as i15 from "@ngx-translate/core";
/**
 * @description
 * A table for displaying PaginatedList results. It is designed to be used inside components which
 * extend the {@link BaseListComponent} or {@link TypedBaseListComponent} class.
 *
 * @example
 * ```html
 * <vdr-data-table-2
 *     id="product-review-list"
 *     [items]="items$ | async"
 *     [itemsPerPage]="itemsPerPage$ | async"
 *     [totalItems]="totalItems$ | async"
 *     [currentPage]="currentPage$ | async"
 *     [filters]="filters"
 *     (pageChange)="setPageNumber($event)"
 *     (itemsPerPageChange)="setItemsPerPage($event)"
 * >
 *     <vdr-bulk-action-menu
 *         locationId="product-review-list"
 *         [hostComponent]="this"
 *         [selectionManager]="selectionManager"
 *     />
 *     <vdr-dt2-search
 *         [searchTermControl]="searchTermControl"
 *         searchTermPlaceholder="Filter by title"
 *     />
 *     <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
 *         <ng-template let-review="item">
 *             {{ review.id }}
 *         </ng-template>
 *     </vdr-dt2-column>
 *     <vdr-dt2-column
 *         [heading]="'common.created-at' | translate"
 *         [hiddenByDefault]="true"
 *         [sort]="sorts.get('createdAt')"
 *     >
 *         <ng-template let-review="item">
 *             {{ review.createdAt | localeDate : 'short' }}
 *         </ng-template>
 *     </vdr-dt2-column>
 *     <vdr-dt2-column
 *         [heading]="'common.updated-at' | translate"
 *         [hiddenByDefault]="true"
 *         [sort]="sorts.get('updatedAt')"
 *     >
 *         <ng-template let-review="item">
 *             {{ review.updatedAt | localeDate : 'short' }}
 *         </ng-template>
 *     </vdr-dt2-column>
 *     <vdr-dt2-column [heading]="'common.name' | translate" [optional]="false" [sort]="sorts.get('name')">
 *         <ng-template let-review="item">
 *             <a class="button-ghost" [routerLink]="['./', review.id]"
 *                 ><span>{{ review.name }}</span>
 *                 <clr-icon shape="arrow right"></clr-icon>
 *             </a>
 *         </ng-template>
 *     </vdr-dt2-column>
 * </vdr-data-table-2>
 * ```
 *
 * @docsCategory components
 */
export class DataTable2Component {
    constructor(changeDetectorRef, localStorageService, dataService) {
        this.changeDetectorRef = changeDetectorRef;
        this.localStorageService = localStorageService;
        this.dataService = dataService;
        this.activeIndex = -1;
        this.pageChange = new EventEmitter();
        this.itemsPerPageChange = new EventEmitter();
        this.injector = inject(Injector);
        this.route = inject(ActivatedRoute);
        this.filterPresetService = inject(FilterPresetService);
        this.dataTableCustomComponentService = inject(DataTableCustomComponentService);
        this.customComponents = new Map();
        // This is used to apply a `user-select: none` CSS rule to the table,
        // which allows shift-click multi-row selection
        this.disableSelect = false;
        this.showSearchFilterRow = false;
        this.destroy$ = new Subject();
        this.shiftDownHandler = (event) => {
            if (event.shiftKey && !this.disableSelect) {
                this.disableSelect = true;
                this.changeDetectorRef.markForCheck();
            }
        };
        this.shiftUpHandler = (event) => {
            if (this.disableSelect) {
                this.disableSelect = false;
                this.changeDetectorRef.markForCheck();
            }
        };
        this.uiLanguage$ = this.dataService.client
            .uiState()
            .stream$.pipe(map(({ uiState }) => uiState.language));
    }
    get selectionManager() {
        return this.bulkActionMenuComponent?.selectionManager;
    }
    get allColumns() {
        return [...(this.columns ?? []), ...(this.customFieldColumns ?? [])];
    }
    get visibleSortedColumns() {
        return this.sortedColumns.filter(c => c.visible);
    }
    get sortedColumns() {
        const columns = this.allColumns;
        const dataTableConfig = this.getDataTableConfig();
        for (const [id, index] of Object.entries(dataTableConfig[this.id].order)) {
            const column = columns.find(c => c.id === id);
            const currentIndex = columns.findIndex(c => c.id === id);
            if (currentIndex !== -1 && column) {
                columns.splice(currentIndex, 1);
                columns.splice(index, 0, column);
            }
        }
        return columns;
    }
    ngOnChanges(changes) {
        if (changes.items) {
            this.currentStart = this.itemsPerPage * (this.currentPage - 1);
            this.currentEnd = this.currentStart + changes.items.currentValue?.length;
            this.selectionManager?.setCurrentItems(this.items);
        }
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
        if (this.selectionManager) {
            document.removeEventListener('keydown', this.shiftDownHandler);
            document.removeEventListener('keyup', this.shiftUpHandler);
        }
    }
    ngAfterContentInit() {
        this.rowTemplate = this.templateRefs.last;
        const dataTableConfig = this.getDataTableConfig();
        if (!this.id) {
            console.warn(`No id was assigned to the data table component`);
        }
        const updateColumnVisibility = () => {
            dataTableConfig[this.id].visibility = this.allColumns
                .filter(c => (c.visible && c.hiddenByDefault) || (!c.visible && !c.hiddenByDefault))
                .map(c => c.id);
            this.localStorageService.set('dataTableConfig', dataTableConfig);
        };
        this.allColumns.forEach(column => {
            if (dataTableConfig?.[this.id]?.visibility.includes(column.id)) {
                column.setVisibility(column.hiddenByDefault);
            }
            column.onColumnChange(updateColumnVisibility);
            const config = this.dataTableCustomComponentService.getCustomComponentsFor(this.id, column.id);
            if (config) {
                const injector = Injector.create({
                    parent: this.injector,
                    providers: config.providers ?? [],
                });
                this.customComponents.set(column.id, { config, injector });
            }
        });
        if (this.selectionManager) {
            document.addEventListener('keydown', this.shiftDownHandler, { passive: true });
            document.addEventListener('keyup', this.shiftUpHandler, { passive: true });
            this.bulkActionMenuComponent.onClearSelection(() => {
                this.changeDetectorRef.markForCheck();
            });
            this.selectionManager.setCurrentItems(this.items);
        }
        this.showSearchFilterRow =
            !!this.filters?.activeFilters.length ||
                (dataTableConfig?.[this.id]?.showSearchFilterRow ?? false);
        this.columns.changes.subscribe(() => {
            this.changeDetectorRef.markForCheck();
        });
        this.selectionManager?.selectionChanges$
            .pipe(takeUntil(this.destroy$))
            .subscribe(() => this.changeDetectorRef.markForCheck());
        if (this.selectionManager) {
            this.dataService.client
                .userStatus()
                .mapStream(({ userStatus }) => userStatus.activeChannelId)
                .pipe(distinctUntilChanged(), takeUntil(this.destroy$))
                .subscribe(() => {
                this.selectionManager?.clearSelection();
            });
        }
    }
    onColumnReorder(event) {
        const naturalIndex = this.allColumns.findIndex(c => c.id === event.column.id);
        const dataTableConfig = this.getDataTableConfig();
        if (naturalIndex === event.newIndex) {
            delete dataTableConfig[this.id].order[event.column.id];
        }
        else {
            dataTableConfig[this.id].order[event.column.id] = event.newIndex;
        }
        this.localStorageService.set('dataTableConfig', dataTableConfig);
    }
    onColumnsReset() {
        const dataTableConfig = this.getDataTableConfig();
        dataTableConfig[this.id].order = {};
        dataTableConfig[this.id].visibility = [];
        this.localStorageService.set('dataTableConfig', dataTableConfig);
    }
    toggleSearchFilterRow() {
        this.showSearchFilterRow = !this.showSearchFilterRow;
        const dataTableConfig = this.getDataTableConfig();
        dataTableConfig[this.id].showSearchFilterRow = this.showSearchFilterRow;
        this.localStorageService.set('dataTableConfig', dataTableConfig);
    }
    trackByFn(index, item) {
        if (item.id != null) {
            return item.id;
        }
        else {
            return index;
        }
    }
    onToggleAllClick() {
        this.selectionManager?.toggleSelectAll();
    }
    onRowClick(item, event) {
        this.selectionManager?.toggleSelection(item, event);
    }
    getDataTableConfig() {
        const dataTableConfig = this.localStorageService.get('dataTableConfig') ?? {};
        if (!dataTableConfig[this.id]) {
            dataTableConfig[this.id] = {
                visibility: [],
                order: {},
                showSearchFilterRow: false,
                filterPresets: [],
            };
        }
        return dataTableConfig;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTable2Component, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.LocalStorageService }, { token: i2.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTable2Component, selector: "vdr-data-table-2", inputs: { id: "id", items: "items", itemsPerPage: "itemsPerPage", currentPage: "currentPage", totalItems: "totalItems", emptyStateLabel: "emptyStateLabel", filters: "filters", activeIndex: "activeIndex" }, outputs: { pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange" }, providers: [PaginationService, FilterPresetService], queries: [{ propertyName: "searchComponent", first: true, predicate: DataTable2SearchComponent, descendants: true }, { propertyName: "bulkActionMenuComponent", first: true, predicate: BulkActionMenuComponent, descendants: true }, { propertyName: "customSearchTemplate", first: true, predicate: ["vdrDt2CustomSearch"], descendants: true }, { propertyName: "columns", predicate: DataTable2ColumnComponent }, { propertyName: "customFieldColumns", predicate: DataTableCustomFieldColumnComponent }, { propertyName: "templateRefs", predicate: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<vdr-data-table-filter-presets\n    *ngIf=\"filters\"\n    [filters]=\"filters\"\n    [dataTableId]=\"id\"\n></vdr-data-table-filter-presets>\n<div class=\"table-wrapper\">\n    <div class=\"bulk-actions\">\n        <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\n    </div>\n    <table class=\"\" [class.no-select]=\"disableSelect\">\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\n            <tr class=\"heading-row\">\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\n                    <input\n                        type=\"checkbox\"\n                        clrCheckbox\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\n                        (change)=\"onToggleAllClick()\"\n                    />\n                </th>\n                <th\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\n                    [class.expand]=\"column.expand\"\n                >\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\n                        <vdr-ui-extension-point\n                            [locationId]=\"id\"\n                            [metadata]=\"column.id\"\n                            api=\"dataTable\"\n                            [topPx]=\"-6\"\n                            [leftPx]=\"-24\"\n                            display=\"block\"\n                        >\n                            <span>{{ column.heading }}</span>\n                        </vdr-ui-extension-point>\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\n                            </button>\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\n                        </div>\n                    </div>\n                </th>\n                <th>\n                    <div class=\"column-picker\">\n                        <vdr-data-table-colum-picker\n                            [uiLanguage]=\"uiLanguage$ | async\"\n                            [columns]=\"sortedColumns\"\n                            (reorder)=\"onColumnReorder($event)\"\n                            (resetColumns)=\"onColumnsReset()\"\n                        ></vdr-data-table-colum-picker>\n                    </div>\n                </th>\n            </tr>\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\n                <th\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\n                    class=\"filter-row\"\n                    [class.active]=\"showSearchFilterRow\"\n                >\n                    <button\n                        class=\"button-ghost toggle-search-filter-row\"\n                        [class.active]=\"showSearchFilterRow\"\n                        (click)=\"toggleSearchFilterRow()\"\n                        [title]=\"'common.search-and-filter-list' | translate\"\n                    >\n                        <clr-icon shape=\"search\"></clr-icon>\n                    </button>\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\n                        <ng-container *ngIf=\"filters\">\n                            <div class=\"filters\">\n                                <vdr-data-table-filters\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\n                                    [filterWithValue]=\"activeFilter\"\n                                    [filters]=\"filters\"\n                                    class=\"mt-1\"\n                                ></vdr-data-table-filters>\n                                <vdr-data-table-filters\n                                    *ngIf=\"filters.length\"\n                                    [filters]=\"filters\"\n                                    class=\"mt-1\"\n                                ></vdr-data-table-filters>\n                                <vdr-add-filter-preset-button\n                                    [filters]=\"filters\"\n                                    [dataTableId]=\"id\"\n                                ></vdr-add-filter-preset-button>\n                            </div>\n                        </ng-container>\n                    </div>\n                </th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr\n                *ngFor=\"\n                    let item of items\n                        | paginate\n                            : {\n                                  id: id,\n                                  itemsPerPage: itemsPerPage,\n                                  currentPage: currentPage,\n                                  totalItems: totalItems\n                              };\n                    index as i;\n                    trackBy: trackByFn\n                \"\n            >\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\n                    <input\n                        type=\"checkbox\"\n                        clrCheckbox\n                        [checked]=\"selectionManager?.isSelected(item)\"\n                        (click)=\"onRowClick(item, $event)\"\n                    />\n                </td>\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\n                        <ng-container\n                            *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\n                        >\n                            <ng-container\n                                *ngComponentOutlet=\"\n                                    componentConfig.config.component;\n                                    inputs: { rowItem: item };\n                                    injector: componentConfig.injector\n                                \"\n                            ></ng-container>\n                        </ng-container>\n                        <ng-template #defaultComponent>\n                            <ng-container\n                                *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\n                            ></ng-container>\n                        </ng-template>\n                    </div>\n                </td>\n                <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\n            </tr>\n            <ng-container>\n                <tr *ngIf=\"!items?.length\">\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\n                        <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\n                    </td>\n                </tr>\n            </ng-container>\n        </tbody>\n    </table>\n</div>\n<div class=\"table-footer\">\n    <vdr-items-per-page-controls\n        *ngIf=\"totalItems\"\n        [itemsPerPage]=\"itemsPerPage\"\n        (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\n    ></vdr-items-per-page-controls>\n    <div *ngIf=\"totalItems\" class=\"total-items-count\">\n        {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\n    </div>\n\n    <vdr-pagination-controls\n        *ngIf=\"totalItems\"\n        [id]=\"id\"\n        [currentPage]=\"currentPage\"\n        [itemsPerPage]=\"itemsPerPage\"\n        [totalItems]=\"totalItems\"\n        (pageChange)=\"pageChange.emit($event)\"\n    ></vdr-pagination-controls>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n"], dependencies: [{ kind: "directive", type: i3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i6.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: i7.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i8.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: i9.UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }, { kind: "component", type: i10.DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: i11.DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "component", type: i12.DataTableFilterPresetsComponent, selector: "vdr-data-table-filter-presets", inputs: ["dataTableId", "filters"] }, { kind: "component", type: i13.AddFilterPresetButtonComponent, selector: "vdr-add-filter-preset-button", inputs: ["dataTableId", "filters"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i14.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i15.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTable2Component, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-data-table-2', changeDetection: ChangeDetectionStrategy.OnPush, providers: [PaginationService, FilterPresetService], template: "<vdr-data-table-filter-presets\n    *ngIf=\"filters\"\n    [filters]=\"filters\"\n    [dataTableId]=\"id\"\n></vdr-data-table-filter-presets>\n<div class=\"table-wrapper\">\n    <div class=\"bulk-actions\">\n        <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\n    </div>\n    <table class=\"\" [class.no-select]=\"disableSelect\">\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\n            <tr class=\"heading-row\">\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\n                    <input\n                        type=\"checkbox\"\n                        clrCheckbox\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\n                        (change)=\"onToggleAllClick()\"\n                    />\n                </th>\n                <th\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\n                    [class.expand]=\"column.expand\"\n                >\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\n                        <vdr-ui-extension-point\n                            [locationId]=\"id\"\n                            [metadata]=\"column.id\"\n                            api=\"dataTable\"\n                            [topPx]=\"-6\"\n                            [leftPx]=\"-24\"\n                            display=\"block\"\n                        >\n                            <span>{{ column.heading }}</span>\n                        </vdr-ui-extension-point>\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\n                            </button>\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\n                        </div>\n                    </div>\n                </th>\n                <th>\n                    <div class=\"column-picker\">\n                        <vdr-data-table-colum-picker\n                            [uiLanguage]=\"uiLanguage$ | async\"\n                            [columns]=\"sortedColumns\"\n                            (reorder)=\"onColumnReorder($event)\"\n                            (resetColumns)=\"onColumnsReset()\"\n                        ></vdr-data-table-colum-picker>\n                    </div>\n                </th>\n            </tr>\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\n                <th\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\n                    class=\"filter-row\"\n                    [class.active]=\"showSearchFilterRow\"\n                >\n                    <button\n                        class=\"button-ghost toggle-search-filter-row\"\n                        [class.active]=\"showSearchFilterRow\"\n                        (click)=\"toggleSearchFilterRow()\"\n                        [title]=\"'common.search-and-filter-list' | translate\"\n                    >\n                        <clr-icon shape=\"search\"></clr-icon>\n                    </button>\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\n                        <ng-container *ngIf=\"filters\">\n                            <div class=\"filters\">\n                                <vdr-data-table-filters\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\n                                    [filterWithValue]=\"activeFilter\"\n                                    [filters]=\"filters\"\n                                    class=\"mt-1\"\n                                ></vdr-data-table-filters>\n                                <vdr-data-table-filters\n                                    *ngIf=\"filters.length\"\n                                    [filters]=\"filters\"\n                                    class=\"mt-1\"\n                                ></vdr-data-table-filters>\n                                <vdr-add-filter-preset-button\n                                    [filters]=\"filters\"\n                                    [dataTableId]=\"id\"\n                                ></vdr-add-filter-preset-button>\n                            </div>\n                        </ng-container>\n                    </div>\n                </th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr\n                *ngFor=\"\n                    let item of items\n                        | paginate\n                            : {\n                                  id: id,\n                                  itemsPerPage: itemsPerPage,\n                                  currentPage: currentPage,\n                                  totalItems: totalItems\n                              };\n                    index as i;\n                    trackBy: trackByFn\n                \"\n            >\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\n                    <input\n                        type=\"checkbox\"\n                        clrCheckbox\n                        [checked]=\"selectionManager?.isSelected(item)\"\n                        (click)=\"onRowClick(item, $event)\"\n                    />\n                </td>\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\n                        <ng-container\n                            *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\n                        >\n                            <ng-container\n                                *ngComponentOutlet=\"\n                                    componentConfig.config.component;\n                                    inputs: { rowItem: item };\n                                    injector: componentConfig.injector\n                                \"\n                            ></ng-container>\n                        </ng-container>\n                        <ng-template #defaultComponent>\n                            <ng-container\n                                *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\n                            ></ng-container>\n                        </ng-template>\n                    </div>\n                </td>\n                <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\n            </tr>\n            <ng-container>\n                <tr *ngIf=\"!items?.length\">\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\n                        <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\n                    </td>\n                </tr>\n            </ng-container>\n        </tbody>\n    </table>\n</div>\n<div class=\"table-footer\">\n    <vdr-items-per-page-controls\n        *ngIf=\"totalItems\"\n        [itemsPerPage]=\"itemsPerPage\"\n        (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\n    ></vdr-items-per-page-controls>\n    <div *ngIf=\"totalItems\" class=\"total-items-count\">\n        {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\n    </div>\n\n    <vdr-pagination-controls\n        *ngIf=\"totalItems\"\n        [id]=\"id\"\n        [currentPage]=\"currentPage\"\n        [itemsPerPage]=\"itemsPerPage\"\n        [totalItems]=\"totalItems\"\n        (pageChange)=\"pageChange.emit($event)\"\n    ></vdr-pagination-controls>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.LocalStorageService }, { type: i2.DataService }]; }, propDecorators: { id: [{
                type: Input
            }], items: [{
                type: Input
            }], itemsPerPage: [{
                type: Input
            }], currentPage: [{
                type: Input
            }], totalItems: [{
                type: Input
            }], emptyStateLabel: [{
                type: Input
            }], filters: [{
                type: Input
            }], activeIndex: [{
                type: Input
            }], pageChange: [{
                type: Output
            }], itemsPerPageChange: [{
                type: Output
            }], columns: [{
                type: ContentChildren,
                args: [DataTable2ColumnComponent]
            }], customFieldColumns: [{
                type: ContentChildren,
                args: [DataTableCustomFieldColumnComponent]
            }], searchComponent: [{
                type: ContentChild,
                args: [DataTable2SearchComponent]
            }], bulkActionMenuComponent: [{
                type: ContentChild,
                args: [BulkActionMenuComponent]
            }], customSearchTemplate: [{
                type: ContentChild,
                args: ['vdrDt2CustomSearch']
            }], templateRefs: [{
                type: ContentChildren,
                args: [TemplateRef]
            }] } });
//# sourceMappingURL=data:application/json;base64, 