import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormControl } from '@angular/forms';
import { startWith } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/form-field";
import * as i3 from "@angular/material/core";
import * as i4 from "@angular/material/select";
import * as i5 from "@angular/forms";
import * as i6 from "@angular/material/icon";
import * as i7 from "@angular/material/input";
import * as i8 from "@angular/material/button";
export class ColumnSelectorComponent {
    get availableColumns() {
        return this.columnConfigs;
    }
    get displayedColumns() {
        return this.columnConfigs.filter(column => column.isSelected ?? true);
    }
    get displayedColumnDefs() {
        return this.displayedColumns.map(column => column.def);
    }
    get filteredColumns() {
        return this.availableColumns.filter((column) => {
            if (this.search.value) {
                return column.label.toLowerCase().includes(this.search.value.toLowerCase());
            }
            return true;
        });
    }
    get sortedColumns() {
        let columns = this.filteredColumns.sort((a, b) => {
            if (a.label < b.label)
                return -1;
            if (a.label > b.label)
                return 1;
            return 0;
        });
        if (this.search.value) {
            columns = [...columns, ...this.selectedColumns];
        }
        return [...new Map(columns.map(column => [column.def, column])).values()];
    }
    constructor() {
        this.label = 'Columns';
        this.mode = 'selector';
        this.columnConfigs = [];
        this.selectedColumns = [];
        this.selectedColumnsChange = new EventEmitter();
        this.displayedColumnsChange = new EventEmitter();
        this.columnSelector = new FormControl([]);
        this.search = new FormControl('');
    }
    ngOnInit() {
        if (this.displayedColumns?.length > 0) {
            this.columnSelector.setValue(this.displayedColumnDefs, { emitEvent: false });
        }
        this.columnSelector.valueChanges
            .pipe(startWith(this.displayedColumnDefs))
            .subscribe((selectedColumns) => {
            this.selectedColumns = this.columnConfigs
                .filter(column => selectedColumns.includes(column.def));
            const columnDefs = this.selectedColumns.map(column => column.def);
            this.selectedColumnsChange.emit(this.selectedColumns);
            this.displayedColumnsChange.emit(columnDefs);
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ColumnSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ColumnSelectorComponent, selector: "app-column-selector", inputs: { label: "label", mode: "mode", columnConfigs: "columnConfigs", selectedColumns: "selectedColumns" }, outputs: { selectedColumnsChange: "selectedColumnsChange", displayedColumnsChange: "displayedColumnsChange" }, ngImport: i0, template: "<mat-form-field *ngIf=\"mode === 'selector'\">\n  <mat-label>{{ label }}</mat-label>\n  <mat-select [multiple]=\"true\" [formControl]=\"columnSelector\">\n    <mat-option class=\"text-capitalize\" *ngFor=\"let col of sortedColumns\" [value]=\"col.def\"\n      [disabled]=\"!(col?.isEditable ?? true)\">\n      {{ col.label }}\n    </mat-option>\n  </mat-select>\n</mat-form-field>\n\n<div *ngIf=\"mode === 'icon'\" style=\"height: 20px;\">\n  <button matTooltip=\"Column Selector\" type=\"button\" mat-icon-button (click)=\"select.open()\" class=\"column-button\">\n    <mat-icon class=\"relative-view-icon\">view_column</mat-icon>\n    <mat-select class=\"column-selector\" #select [formControl]=\"columnSelector\" multiple panelWidth=\"\">\n      <mat-form-field class=\"p-1 w-100\">\n        <input matInput [formControl]=\"search\" placeholder=\"Search\" (keydown)=\"$event.stopPropagation();\"\n          autocomplete=\"off\">\n        <button mat-icon-button matSuffix type=\"button\" *ngIf=\"search.value\" (click)=\"search.setValue('')\">\n          <mat-icon>clear</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-option *ngFor=\"let column of sortedColumns\" [value]=\"column.def\" class=\"text-capitalize\"\n        [disabled]=\"!(column?.isEditable ?? true)\">{{column?.label}}</mat-option>\n    </mat-select>\n  </button>\n</div>", styles: [".relative-view-icon{position:relative;right:10px;bottom:14px}.column-button{height:20px;width:20px;border:0;background:transparent}.column-selector{opacity:0;position:relative;bottom:50px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ColumnSelectorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-column-selector', template: "<mat-form-field *ngIf=\"mode === 'selector'\">\n  <mat-label>{{ label }}</mat-label>\n  <mat-select [multiple]=\"true\" [formControl]=\"columnSelector\">\n    <mat-option class=\"text-capitalize\" *ngFor=\"let col of sortedColumns\" [value]=\"col.def\"\n      [disabled]=\"!(col?.isEditable ?? true)\">\n      {{ col.label }}\n    </mat-option>\n  </mat-select>\n</mat-form-field>\n\n<div *ngIf=\"mode === 'icon'\" style=\"height: 20px;\">\n  <button matTooltip=\"Column Selector\" type=\"button\" mat-icon-button (click)=\"select.open()\" class=\"column-button\">\n    <mat-icon class=\"relative-view-icon\">view_column</mat-icon>\n    <mat-select class=\"column-selector\" #select [formControl]=\"columnSelector\" multiple panelWidth=\"\">\n      <mat-form-field class=\"p-1 w-100\">\n        <input matInput [formControl]=\"search\" placeholder=\"Search\" (keydown)=\"$event.stopPropagation();\"\n          autocomplete=\"off\">\n        <button mat-icon-button matSuffix type=\"button\" *ngIf=\"search.value\" (click)=\"search.setValue('')\">\n          <mat-icon>clear</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-option *ngFor=\"let column of sortedColumns\" [value]=\"column.def\" class=\"text-capitalize\"\n        [disabled]=\"!(column?.isEditable ?? true)\">{{column?.label}}</mat-option>\n    </mat-select>\n  </button>\n</div>", styles: [".relative-view-icon{position:relative;right:10px;bottom:14px}.column-button{height:20px;width:20px;border:0;background:transparent}.column-selector{opacity:0;position:relative;bottom:50px}\n"] }]
        }], ctorParameters: () => [], propDecorators: { label: [{
                type: Input
            }], mode: [{
                type: Input
            }], columnConfigs: [{
                type: Input
            }], selectedColumns: [{
                type: Input
            }], selectedColumnsChange: [{
                type: Output
            }], displayedColumnsChange: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 