import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { SelectionModel } from '@angular/cdk/collections';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, Injectable, Injector, afterNextRender, effect, inject, input, isSignal, output, runInInjectionContext, signal, viewChild } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatSort, MatSortModule } from '@angular/material/sort';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { DisplayDensity, OcapCoreModule } from '@metad/ocap-angular/core';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import get from 'lodash-es/get';
import { Subject } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/material/checkbox";
import * as i4 from "@angular/material/table";
import * as i5 from "@angular/material/paginator";
import * as i6 from "@angular/material/sort";
import * as i7 from "@angular/material/input";
import * as i8 from "@ngx-translate/core";
import * as i9 from "@metad/ocap-angular/core";
export class MyCustomPaginatorIntl {
    constructor() {
        this.#translateService = inject(TranslateService);
        this.changes = new Subject();
        this.#tranSub = this.#translateService
            .stream('Ngm.Table', {
            Default: {
                firstPageLabel: 'First page',
                itemsPerPageLabel: 'Items per page:',
                lastPageLabel: 'Last page',
                nextPageLabel: 'Next page',
                previousPageLabel: 'Previous page',
                rangeLabel0: 'Page 1 of 1',
                pageLabel: 'Page',
                ofLabel: 'of'
            }
        })
            .pipe(takeUntilDestroyed())
            .subscribe((table) => {
            if (table) {
                this.firstPageLabel = table.firstPageLabel;
                this.itemsPerPageLabel = table.itemsPerPageLabel;
                this.lastPageLabel = table.lastPageLabel;
                this.nextPageLabel = table.nextPageLabel;
                this.previousPageLabel = table.previousPageLabel;
                this.rangeLabel0 = table.rangeLabel0;
                this.pageLabel = table.pageLabel;
                this.ofLabel = table.ofLabel;
            }
        });
        // For internationalization, the `$localize` function from
        // the `@angular/localize` package can be used.
        this.firstPageLabel = `First page`;
        this.itemsPerPageLabel = `Items per page:`;
        this.lastPageLabel = `Last page`;
        // You can set labels to an arbitrary string too, or dynamically compute
        // it through other third-party internationalization libraries.
        this.nextPageLabel = 'Next page';
        this.previousPageLabel = 'Previous page';
        this.rangeLabel0 = `Page 1 of 1`;
        this.pageLabel = 'Page';
        this.ofLabel = 'of';
    }
    #translateService;
    #tranSub;
    getRangeLabel(page, pageSize, length) {
        if (length === 0) {
            return this.rangeLabel0;
        }
        const amountPages = Math.ceil(length / pageSize);
        return `${this.pageLabel} ${page + 1} ${this.ofLabel} ${amountPages}`;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MyCustomPaginatorIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MyCustomPaginatorIntl }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MyCustomPaginatorIntl, decorators: [{
            type: Injectable
        }] });
export class NgmTableComponent {
    #injector;
    #searchValueSub;
    constructor() {
        this.#injector = inject(Injector);
        this.isSignal = isSignal;
        /**
        |--------------------------------------------------------------------------
        | Inputs and Outputs
        |--------------------------------------------------------------------------
        */
        this.data = input([]);
        this.columns = input(null);
        this.paging = input(false, {
            transform: coerceBooleanProperty
        });
        this.pageSizeOptions = input([20, 50, 100]);
        this.grid = input(false, {
            transform: coerceBooleanProperty
        });
        this.selectable = input(false, {
            transform: coerceBooleanProperty
        });
        this.displayDensity = input(DisplayDensity.compact);
        /**
         * A cell or row was selected.
         */
        this.rowSelectionChanging = output();
        /**
        |--------------------------------------------------------------------------
        | Child Components
        |--------------------------------------------------------------------------
        */
        this.paginator = viewChild(MatPaginator);
        this.sort = viewChild(MatSort);
        /**
        |--------------------------------------------------------------------------
        | Signals
        |--------------------------------------------------------------------------
        */
        this.displayedColumns = signal([]);
        this.dataSource = new MatTableDataSource();
        this.searchControl = new FormControl('');
        this.searchingColumn = '';
        this.selection = new SelectionModel(true, []);
        this.#searchValueSub = this.searchControl.valueChanges.subscribe((value) => {
            this.dataSource.filter = value;
        });
        this.selection.changed.subscribe(() => this.rowSelectionChanging.emit(this.selection.selected));
        afterNextRender(() => {
            this.dataSource.paginator = this.paginator();
            this.dataSource.sort = this.sort();
            // If the user changes the sort order, reset back to the first page.
            this.sort()?.sortChange.subscribe((sort) => {
                if (this.paginator()) {
                    this.paginator().pageIndex = 0;
                }
            });
            this.dataSource.filterPredicate = (data, filter) => {
                // Transform the data into a lowercase string of all property values.
                const dataStr = ('' + data[this.searchingColumn]).toLowerCase();
                // Transform the filter by converting it to lowercase and removing whitespace.
                const transformedFilter = filter.trim().toLowerCase();
                return dataStr.indexOf(transformedFilter) != -1;
            };
            runInInjectionContext(this.#injector, () => {
                effect(() => {
                    this.dataSource.data = this.data();
                }, { allowSignalWrites: true });
            });
        });
        effect(() => {
            const columns = this.columns();
            if (columns) {
                this.displayedColumns.set(columns.map(({ name }) => name));
                if (this.selectable()) {
                    this.displayedColumns.update((columns) => {
                        columns.unshift('select');
                        return [...columns];
                    });
                }
            }
        }, { allowSignalWrites: true });
    }
    _context(data, column) {
        return {
            ...data,
            $implicit: get(data, column.name)
        };
    }
    getValue(row, name) {
        return get(row, name);
    }
    escapeSearching(event) {
        if (event.key === 'Escape') {
            this.searchingColumn = '';
            this.searchControl.setValue('');
        }
    }
    /** Whether the number of selected elements matches the total number of rows. */
    isAllSelected() {
        const numSelected = this.selection.selected.length;
        const numRows = this.dataSource.data.length;
        return numSelected === numRows;
    }
    /** Selects all rows if they are not all selected; otherwise clear selection. */
    toggleAllRows() {
        if (this.isAllSelected()) {
            this.selection.clear();
            return;
        }
        this.selection.select(...this.dataSource.data);
    }
    /** The label for the checkbox on the passed row */
    checkboxLabel(row) {
        if (!row) {
            return `${this.isAllSelected() ? 'deselect' : 'select'} all`;
        }
        return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NgmTableComponent, isStandalone: true, selector: "ngm-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, paging: { classPropertyName: "paging", publicName: "paging", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, displayDensity: { classPropertyName: "displayDensity", publicName: "displayDensity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowSelectionChanging: "rowSelectionChanging" }, host: { classAttribute: "ngm-table" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ngm-table__container flex-1 h-full flex flex-col overflow-auto\">\n  <table mat-table [dataSource]=\"dataSource\" matSort\n    class=\"min-w-full\" [ngClass]=\"{grid: grid()}\"\n    [displayDensity]=\"displayDensity()\"\n    >\n\n    <!-- Checkbox Column -->\n    <ng-container matColumnDef=\"select\">\n      <th mat-header-cell *matHeaderCellDef>\n        <mat-checkbox class=\"mx-2\"\n          (change)=\"$event ? toggleAllRows() : null\"\n          [checked]=\"selection.hasValue() && isAllSelected()\"\n          [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n          [aria-label]=\"checkboxLabel()\">\n        </mat-checkbox>\n      </th>\n      <td mat-cell *matCellDef=\"let row\">\n        <mat-checkbox class=\"mx-2\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"$event ? selection.toggle(row) : null\"\n          [checked]=\"selection.isSelected(row)\"\n          [aria-label]=\"checkboxLabel(row)\">\n        </mat-checkbox>\n      </td>\n    </ng-container>\n\n      <!-- Columns -->\n    @for (column of columns(); track column.name) {\n      <ng-container [matColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <div class=\"ngm-header-cell flex-1 flex justify-between items-center whitespace-nowrap\">\n            <span>\n            {{column.caption || column.name}}\n            </span>\n\n            <div class=\"searchable flex-1 flex justify-between items-center\" [class.searching]=\"searchingColumn===column.name\">\n              <input matInput placeholder=\"{{ 'PAC.KEY_WORDS.SEARCH' | translate: {Default: 'Search'} }}\" type=\"text\" class=\"flex-1 text-left text-sm\"\n                value=\"\" [formControl]=\"searchControl\"\n                (click)=\"$event.stopPropagation();\"\n                (keyup)=\"escapeSearching($event)\">\n              <span role=\"img\" aria-label=\"search\" class=\"searchable-icon\"\n                (click)=\"$event.stopPropagation();searchingColumn=searchingColumn===column.name?null:column.name\">\n                <svg viewBox=\"64 64 896 896\" focusable=\"false\" class=\"\" data-icon=\"search\" width=\"1em\" height=\"1em\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z\"></path></svg>\n              </span>\n            </div>\n            \n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let data\" [style.max-width]=\"column.width\">\n          @if (isSignal(column.cellTemplate)) {\n            <ng-container *ngTemplateOutlet=\"column.cellTemplate(); context: _context(data, column)\"></ng-container>\n          } @else if(column.cellTemplate) {\n            <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: _context(data, column)\"></ng-container>\n          } @else {\n            {{ column.pipe ? column.pipe(getValue(data, column.name)) : getValue(data, column.name) }}\n          }\n        </td>\n      </ng-container>\n    }\n    \n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky:true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns();\"></tr>\n  </table>\n</div>\n\n@if (paging()) {\n  <mat-paginator [displayDensity]=\"displayDensity()\" [pageSizeOptions]=\"pageSizeOptions()\" showFirstLastButtons></mat-paginator>\n}\n", styles: [":host{display:flex;flex-direction:column}:host ::ng-deep .cdk-header-cell .searchable-icon{opacity:0;transition:all .2s}:host ::ng-deep .cdk-header-cell:hover .searchable-icon{opacity:1}:host ::ng-deep .cdk-header-cell .searchable{margin-left:.5rem}:host ::ng-deep .cdk-header-cell .searchable .mat-mdc-input-element{width:0;max-width:0;overflow:hidden;text-align:left}:host ::ng-deep .cdk-header-cell .searchable.searching{border-radius:.375rem;background-color:#0000001a}:is(.dark :host ::ng-deep .cdk-header-cell .searchable.searching){background-color:#ffffff1a}:host ::ng-deep .cdk-header-cell .searchable.searching .mat-mdc-input-element{width:100px;max-width:unset;outline:none}:host ::ng-deep .cdk-cell.mat-mdc-table-sticky{background-color:var(--color-components-panel-bg)}.searchable .mat-mdc-input-element{background-color:transparent}.mat-mdc-cell,.mat-mdc-header-cell{white-space:nowrap}.mat-mdc-cell.number,.mat-mdc-header-cell.number{text-align:right}.mat-mdc-paginator{border-top:1px solid var(--mat-table-row-item-outline-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i6.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: 
                //OCAP Modules
                OcapCoreModule }, { kind: "directive", type: i9.DensityDirective, selector: "[displayDensity]", inputs: ["displayDensity"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmTableComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngm-table', host: {
                        class: 'ngm-table'
                    }, imports: [
                        CommonModule,
                        DragDropModule,
                        FormsModule,
                        ReactiveFormsModule,
                        MatCheckboxModule,
                        MatTableModule,
                        MatPaginatorModule,
                        MatIconModule,
                        MatButtonModule,
                        MatSortModule,
                        MatInputModule,
                        TranslateModule,
                        //OCAP Modules
                        OcapCoreModule,
                        // NgmSearchComponent
                    ], template: "<div class=\"ngm-table__container flex-1 h-full flex flex-col overflow-auto\">\n  <table mat-table [dataSource]=\"dataSource\" matSort\n    class=\"min-w-full\" [ngClass]=\"{grid: grid()}\"\n    [displayDensity]=\"displayDensity()\"\n    >\n\n    <!-- Checkbox Column -->\n    <ng-container matColumnDef=\"select\">\n      <th mat-header-cell *matHeaderCellDef>\n        <mat-checkbox class=\"mx-2\"\n          (change)=\"$event ? toggleAllRows() : null\"\n          [checked]=\"selection.hasValue() && isAllSelected()\"\n          [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n          [aria-label]=\"checkboxLabel()\">\n        </mat-checkbox>\n      </th>\n      <td mat-cell *matCellDef=\"let row\">\n        <mat-checkbox class=\"mx-2\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"$event ? selection.toggle(row) : null\"\n          [checked]=\"selection.isSelected(row)\"\n          [aria-label]=\"checkboxLabel(row)\">\n        </mat-checkbox>\n      </td>\n    </ng-container>\n\n      <!-- Columns -->\n    @for (column of columns(); track column.name) {\n      <ng-container [matColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <div class=\"ngm-header-cell flex-1 flex justify-between items-center whitespace-nowrap\">\n            <span>\n            {{column.caption || column.name}}\n            </span>\n\n            <div class=\"searchable flex-1 flex justify-between items-center\" [class.searching]=\"searchingColumn===column.name\">\n              <input matInput placeholder=\"{{ 'PAC.KEY_WORDS.SEARCH' | translate: {Default: 'Search'} }}\" type=\"text\" class=\"flex-1 text-left text-sm\"\n                value=\"\" [formControl]=\"searchControl\"\n                (click)=\"$event.stopPropagation();\"\n                (keyup)=\"escapeSearching($event)\">\n              <span role=\"img\" aria-label=\"search\" class=\"searchable-icon\"\n                (click)=\"$event.stopPropagation();searchingColumn=searchingColumn===column.name?null:column.name\">\n                <svg viewBox=\"64 64 896 896\" focusable=\"false\" class=\"\" data-icon=\"search\" width=\"1em\" height=\"1em\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z\"></path></svg>\n              </span>\n            </div>\n            \n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let data\" [style.max-width]=\"column.width\">\n          @if (isSignal(column.cellTemplate)) {\n            <ng-container *ngTemplateOutlet=\"column.cellTemplate(); context: _context(data, column)\"></ng-container>\n          } @else if(column.cellTemplate) {\n            <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: _context(data, column)\"></ng-container>\n          } @else {\n            {{ column.pipe ? column.pipe(getValue(data, column.name)) : getValue(data, column.name) }}\n          }\n        </td>\n      </ng-container>\n    }\n    \n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky:true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns();\"></tr>\n  </table>\n</div>\n\n@if (paging()) {\n  <mat-paginator [displayDensity]=\"displayDensity()\" [pageSizeOptions]=\"pageSizeOptions()\" showFirstLastButtons></mat-paginator>\n}\n", styles: [":host{display:flex;flex-direction:column}:host ::ng-deep .cdk-header-cell .searchable-icon{opacity:0;transition:all .2s}:host ::ng-deep .cdk-header-cell:hover .searchable-icon{opacity:1}:host ::ng-deep .cdk-header-cell .searchable{margin-left:.5rem}:host ::ng-deep .cdk-header-cell .searchable .mat-mdc-input-element{width:0;max-width:0;overflow:hidden;text-align:left}:host ::ng-deep .cdk-header-cell .searchable.searching{border-radius:.375rem;background-color:#0000001a}:is(.dark :host ::ng-deep .cdk-header-cell .searchable.searching){background-color:#ffffff1a}:host ::ng-deep .cdk-header-cell .searchable.searching .mat-mdc-input-element{width:100px;max-width:unset;outline:none}:host ::ng-deep .cdk-cell.mat-mdc-table-sticky{background-color:var(--color-components-panel-bg)}.searchable .mat-mdc-input-element{background-color:transparent}.mat-mdc-cell,.mat-mdc-header-cell{white-space:nowrap}.mat-mdc-cell.number,.mat-mdc-header-cell.number{text-align:right}.mat-mdc-paginator{border-top:1px solid var(--mat-table-row-item-outline-color)}\n"] }]
        }], ctorParameters: () => [] });
//# sourceMappingURL=data:application/json;base64, 