import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { SelectionModel } from '@angular/cdk/collections';
import { CommonModule } from '@angular/common';
import { Component, forwardRef, Input, model, ViewChild } from '@angular/core';
import { FormsModule, NG_VALUE_ACCESSOR, 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 { DensityDirective, DisplayDensity } from '@metad/ocap-angular/core';
import { TranslateModule } from '@ngx-translate/core';
import get from 'lodash-es/get';
import { NgmSearchComponent } from '../../search/search.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@ngx-translate/core";
import * as i4 from "@angular/material/checkbox";
import * as i5 from "@angular/material/table";
import * as i6 from "@angular/material/paginator";
import * as i7 from "@angular/material/sort";
/**
 */
export class NgmSelectionTableComponent {
    constructor() {
        this.get = get;
        this.displayDensity = DisplayDensity.comfortable;
        this._multiple = false;
        this._grid = false;
        this.disabled = false;
        this.selection = new SelectionModel(false, []);
        this.dataSource = new MatTableDataSource([]);
        this.searchText = model('');
        /**
         * Invoked when the model has been changed
         */
        this.onChange = (_) => { };
        /**
         * Invoked when the model has been touched
         */
        this.onTouched = () => { };
    }
    get multiple() {
        return this._multiple;
    }
    set multiple(value) {
        this._multiple = coerceBooleanProperty(value);
    }
    get grid() {
        return this._grid;
    }
    set grid(value) {
        this._grid = coerceBooleanProperty(value);
    }
    ngOnInit() {
        this.dataSource.data = this.data || [];
        if (this.multiple) {
            this.selection = new SelectionModel(true, []);
        }
        this.displayedColumns = ['select', ...this.columns.map(({ value }) => value)];
        this.selection.changed.subscribe(() => {
            if (this.multiple) {
                this.onChange(this.selection.selected);
            }
            else {
                this.onChange(this.selection.selected[0]);
            }
        });
    }
    ngOnChanges({ data }) {
        if (data) {
            this.dataSource.data = data.currentValue || [];
        }
    }
    ngAfterViewInit() {
        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;
            }
        });
    }
    writeValue(obj) {
        this.selection.select(obj);
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    applyFilter(filterValue) {
        this.dataSource.filter = filterValue.trim().toLowerCase();
        if (this.dataSource.paginator) {
            this.dataSource.paginator.firstPage();
        }
    }
    _context(data, column) {
        return {
            ...data,
            $implicit: get(data, column.name)
        };
    }
    onChangeRow(row) {
        this.selection.toggle(row);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmSelectionTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NgmSelectionTableComponent, isStandalone: true, selector: "ngm-selection-table", inputs: { displayDensity: { classPropertyName: "displayDensity", publicName: "displayDensity", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchText: "searchTextChange" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => NgmSelectionTableComponent),
                multi: true
            }
        ], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ngm-search class=\"my-2\" [(ngModel)]=\"searchText\" (ngModelChange)=\"applyFilter($event)\"></ngm-search>\n\n<div class=\"overflow-auto\">\n    <table mat-table [dataSource]=\"dataSource\" matSort [displayDensity]=\"displayDensity\" [class.ngm-table-grid]=\"grid\">\n        \n        <!-- Checkbox Column -->\n        <ng-container matColumnDef=\"select\" sticky>\n            <th mat-header-cell *matHeaderCellDef class=\"text-center\">\n                {{ 'Ngm.Table.Select' | translate: {Default: \"Select\"} }}\n            </th>\n            <td mat-cell *matCellDef=\"let row\" >\n                <mat-checkbox class=\"mx-2\"\n                    [checked]=\"selection.isSelected(row)\"\n                    (change)=\"onChangeRow(row)\">\n                </mat-checkbox>\n            </td>\n        </ng-container>\n    \n      @for (column of columns; track column.value) {\n        <ng-container [matColumnDef]=\"column.value\" [sticky]=\"column.sticky\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                <div class=\"whitespace-nowrap\">{{column.label}}</div>\n            </th>\n            <td mat-cell *matCellDef=\"let element\">\n              @switch (column.type) {\n                @case ('boolean') {\n                  @if (element[column.value]) {\n                    <span>\u2705</span>\n                  }\n                }\n                @default {\n                  <div class=\"whitespace-nowrap\">\n                    @if (column.cellTemplate) {\n                      <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: _context(element, column)\"></ng-container>\n                    } @else {\n                      {{get(element, column.value)}}\n                    }\n                  </div>\n                }\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;\">\n        </tr>\n\n        <!-- Row shown when there is no matching data. -->\n        <tr class=\"mat-row\" *matNoDataRow>\n            <td class=\"mat-cell\" colspan=\"4\">\n                {{ 'Ngm.Table.NoData' | translate: {Default: \"No data\"} }}\n              @if (searchText()) {\n                <span>{{ 'Ngm.Table.MatchingFilter' | translate: {Default: 'matching the filter \"'+searchText()+'\"', value: searchText()} }}</span>\n              }\n            </td>\n        </tr>\n    </table>\n</div>\n\n<mat-paginator [pageSizeOptions]=\"[10, 20, 50, 100]\"></mat-paginator>\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden}table.mat-mdc-table{min-width:100%}.mat-mdc-paginator{border-top:1px solid var(--mat-table-row-item-outline-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.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: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i5.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i6.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: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: DensityDirective, selector: "[displayDensity]", inputs: ["displayDensity"] }, { kind: "component", type: NgmSearchComponent, selector: "ngm-search", inputs: ["formControl", "disabled", "displayDensity"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmSelectionTableComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'ngm-selection-table', imports: [
                        CommonModule,
                        FormsModule,
                        ReactiveFormsModule,
                        TranslateModule,
                        MatCheckboxModule,
                        MatTableModule,
                        MatPaginatorModule,
                        MatIconModule,
                        MatButtonModule,
                        MatSortModule,
                        MatInputModule,
                        DensityDirective,
                        NgmSearchComponent
                    ], providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NgmSelectionTableComponent),
                            multi: true
                        }
                    ], template: "<ngm-search class=\"my-2\" [(ngModel)]=\"searchText\" (ngModelChange)=\"applyFilter($event)\"></ngm-search>\n\n<div class=\"overflow-auto\">\n    <table mat-table [dataSource]=\"dataSource\" matSort [displayDensity]=\"displayDensity\" [class.ngm-table-grid]=\"grid\">\n        \n        <!-- Checkbox Column -->\n        <ng-container matColumnDef=\"select\" sticky>\n            <th mat-header-cell *matHeaderCellDef class=\"text-center\">\n                {{ 'Ngm.Table.Select' | translate: {Default: \"Select\"} }}\n            </th>\n            <td mat-cell *matCellDef=\"let row\" >\n                <mat-checkbox class=\"mx-2\"\n                    [checked]=\"selection.isSelected(row)\"\n                    (change)=\"onChangeRow(row)\">\n                </mat-checkbox>\n            </td>\n        </ng-container>\n    \n      @for (column of columns; track column.value) {\n        <ng-container [matColumnDef]=\"column.value\" [sticky]=\"column.sticky\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                <div class=\"whitespace-nowrap\">{{column.label}}</div>\n            </th>\n            <td mat-cell *matCellDef=\"let element\">\n              @switch (column.type) {\n                @case ('boolean') {\n                  @if (element[column.value]) {\n                    <span>\u2705</span>\n                  }\n                }\n                @default {\n                  <div class=\"whitespace-nowrap\">\n                    @if (column.cellTemplate) {\n                      <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: _context(element, column)\"></ng-container>\n                    } @else {\n                      {{get(element, column.value)}}\n                    }\n                  </div>\n                }\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;\">\n        </tr>\n\n        <!-- Row shown when there is no matching data. -->\n        <tr class=\"mat-row\" *matNoDataRow>\n            <td class=\"mat-cell\" colspan=\"4\">\n                {{ 'Ngm.Table.NoData' | translate: {Default: \"No data\"} }}\n              @if (searchText()) {\n                <span>{{ 'Ngm.Table.MatchingFilter' | translate: {Default: 'matching the filter \"'+searchText()+'\"', value: searchText()} }}</span>\n              }\n            </td>\n        </tr>\n    </table>\n</div>\n\n<mat-paginator [pageSizeOptions]=\"[10, 20, 50, 100]\"></mat-paginator>\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden}table.mat-mdc-table{min-width:100%}.mat-mdc-paginator{border-top:1px solid var(--mat-table-row-item-outline-color)}\n"] }]
        }], propDecorators: { displayDensity: [{
                type: Input
            }], data: [{
                type: Input
            }], columns: [{
                type: Input
            }], multiple: [{
                type: Input
            }], grid: [{
                type: Input
            }], disabled: [{
                type: Input
            }], paginator: [{
                type: ViewChild,
                args: [MatPaginator]
            }], sort: [{
                type: ViewChild,
                args: [MatSort]
            }] } });
//# sourceMappingURL=data:application/json;base64, 