import { Component, ContentChildren, EventEmitter, Input, Output, } from '@angular/core';
import { EvoTableColumnComponent } from '../evo-table-column/evo-table-column.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class EvoTableRowClickEvent {
}
export class EvoTableComponent {
    constructor() {
        this.filteredColumns = [];
        this.showHeader = true;
        this.stripe = false;
        this.rowClick = new EventEmitter();
        this.states = {
            isRowClickable: false,
        };
    }
    ngOnChanges(changes) {
        if ('visibleColumns' in changes) {
            this.filterColumns();
        }
    }
    ngOnInit() {
        this.states.isRowClickable = this.rowClick.observers.length > 0;
    }
    ngAfterContentInit() {
        this.filteredColumns = this.columns;
        this.filterColumns();
    }
    getRowClasses() {
        return {
            'striped': this.stripe,
        };
    }
    onRowClick(rowIndex, item, event) {
        this.rowClick.emit({
            payload: { rowIndex, item },
            event: event,
        });
    }
    filterColumns() {
        if (this.visibleColumns && this.columns) {
            this.filteredColumns = this.columns.filter(col => this.visibleColumns.includes(col.prop));
        }
    }
}
EvoTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
EvoTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EvoTableComponent, selector: "evo-table", inputs: { data: "data", showHeader: "showHeader", stripe: "stripe", visibleColumns: "visibleColumns", rowClasses: "rowClasses" }, outputs: { rowClick: "rowClick" }, queries: [{ propertyName: "columns", predicate: EvoTableColumnComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"evo-table\"\n     [ngClass]=\"{'evo-table_row-clickable': states.isRowClickable}\"\n>\n    <div class=\"evo-table__row evo-table__row_head mobile-hide\" *ngIf=\"showHeader\">\n        <div class=\"evo-table__cell evo-table__cell_head\"\n             *ngFor=\"let column of filteredColumns\" [ngClass]=\"column.className\">\n            <ng-container *ngIf=\"column.header as header else label\">\n                <ng-container *ngTemplateOutlet=\"header; context: { label: column.label }\"></ng-container>\n            </ng-container>\n            <ng-template #label>{{ column.label }}</ng-template>\n        </div>\n    </div>\n\n    <div class=\"evo-table__row\"\n         [ngClass]=\"rowClasses\"\n         *ngFor=\"let item of data; let row = index\"\n         (click)=\"onRowClick(row, item, $event)\">\n        <div class=\"evo-table__cell\"\n             *ngFor=\"let column of filteredColumns; let col = index\" [ngClass]=\"column.className\">\n\n            <div class=\"evo-table__label mobile-show\" *ngIf=\"column.label\">\n                <ng-container *ngIf=\"column.header as header else mobileLabel\">\n                    <ng-container *ngTemplateOutlet=\"header; context: { label: column.label }\"></ng-container>\n                </ng-container>\n                <ng-template #mobileLabel>{{ column.label }}</ng-template>\n            </div>\n\n\n            <div class=\"evo-table__data\"\n                 *ngIf=\"column.content as content else prop\">\n                <ng-container *ngTemplateOutlet=\"content; context: { row: row, col: col, item: item }\"></ng-container>\n            </div>\n\n            <ng-template #prop>\n                {{ column.formatter(row, col, column.prop !== undefined ? item[column.prop] : item, item) }}\n            </ng-template>\n        </div>\n    </div>\n</div>\n", styles: [".evo-table{color:#212121}@media (min-width: 768px){.evo-table{display:table;width:100%}}.evo-table__row{padding:8px}.evo-table__row:nth-child(2n){background-color:#f4f6f8}@media (min-width: 768px){.evo-table__row{display:table-row}.evo-table__row:hover{background-color:#fff8e6}.evo-table__row_head:hover{background:none}}.evo-table__cell{margin-bottom:20px}.evo-table__cell:last-child{margin-bottom:0}@media (min-width: 768px){.evo-table__cell{display:table-cell;height:48px;padding:0 8px;vertical-align:middle}}.evo-table__cell_head{height:auto;padding-top:0;padding-bottom:16px;font-weight:600;white-space:nowrap}@media (min-width: 768px){.evo-table__cell.text-right{text-align:right}}@media (min-width: 768px){.evo-table__cell.text-center{text-align:center}}.evo-table__sort{position:relative;display:inline-block;padding-right:20px;vertical-align:top;cursor:pointer}.evo-table__sort_up:after,.evo-table__sort_down:after{content:\"\";position:absolute;right:0;border:5px solid transparent}.evo-table__sort_up:after{top:4px;border-bottom-color:#212121}.evo-table__sort_down:after{top:8px;border-top-color:#212121}.evo-table__label{margin-bottom:4px;font-weight:600}.evo-table_row-clickable .evo-table__row{cursor:pointer}:host(.evo-table_mobile) .evo-table__row{padding:0}@media (min-width: 768px){:host(.evo-table_mobile) .evo-table__row{display:table-row}:host(.evo-table_mobile) .evo-table__row:hover{background-color:#fff8e6}:host(.evo-table_mobile) .evo-table__row_head:hover{background:none}}:host(.evo-table_mobile) .evo-table__cell{display:flex;margin-bottom:0;padding:13px 8px}@media (min-width: 768px){:host(.evo-table_mobile) .evo-table__cell{display:table-cell;height:52px;padding:11px 16px;vertical-align:middle}}:host(.evo-table_mobile) .evo-table__label{width:50%;margin-bottom:0}@media (min-width: 768px){:host(.evo-table_mobile) .evo-table__label{width:auto;margin-bottom:4px}}:host(.evo-table_mobile-align_right) .evo-table__cell{justify-content:space-between}:host(.evo-table_mobile_short) .evo-table{display:table;width:100%}:host(.evo-table_mobile_short) .evo-table__row{display:table-row;padding:16px}:host(.evo-table_mobile_short) .evo-table__row:nth-child(2n){background-color:#f4f6f8}:host(.evo-table_mobile_short) .evo-table__row:hover{background-color:#fff8e6}:host(.evo-table_mobile_short) .evo-table__row_head:hover{background:none}:host(.evo-table_mobile_short) .evo-table__cell{display:table-cell;height:52px;padding:11px 16px;vertical-align:middle}:host(.evo-table_mobile_short) .evo-table__cell_head{height:auto;padding-top:0;padding-bottom:16px;font-weight:600;white-space:nowrap;border-top:none}:host(.evo-table_with-title) .evo-table__cell{font-weight:400}:host(.evo-table_with-title) .evo-table__cell:first-child{font-weight:600}@media (min-width: 768px){:host(.evo-table_with-title) .evo-table__cell:first-child{font-weight:400}}:host(.evo-table_with-title) .evo-table__cell:first-child .evo-table__label{display:none}:host(.evo-table_with-title) .evo-table__label{font-weight:400}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoTableComponent, decorators: [{
            type: Component,
            args: [{ selector: 'evo-table', template: "<div class=\"evo-table\"\n     [ngClass]=\"{'evo-table_row-clickable': states.isRowClickable}\"\n>\n    <div class=\"evo-table__row evo-table__row_head mobile-hide\" *ngIf=\"showHeader\">\n        <div class=\"evo-table__cell evo-table__cell_head\"\n             *ngFor=\"let column of filteredColumns\" [ngClass]=\"column.className\">\n            <ng-container *ngIf=\"column.header as header else label\">\n                <ng-container *ngTemplateOutlet=\"header; context: { label: column.label }\"></ng-container>\n            </ng-container>\n            <ng-template #label>{{ column.label }}</ng-template>\n        </div>\n    </div>\n\n    <div class=\"evo-table__row\"\n         [ngClass]=\"rowClasses\"\n         *ngFor=\"let item of data; let row = index\"\n         (click)=\"onRowClick(row, item, $event)\">\n        <div class=\"evo-table__cell\"\n             *ngFor=\"let column of filteredColumns; let col = index\" [ngClass]=\"column.className\">\n\n            <div class=\"evo-table__label mobile-show\" *ngIf=\"column.label\">\n                <ng-container *ngIf=\"column.header as header else mobileLabel\">\n                    <ng-container *ngTemplateOutlet=\"header; context: { label: column.label }\"></ng-container>\n                </ng-container>\n                <ng-template #mobileLabel>{{ column.label }}</ng-template>\n            </div>\n\n\n            <div class=\"evo-table__data\"\n                 *ngIf=\"column.content as content else prop\">\n                <ng-container *ngTemplateOutlet=\"content; context: { row: row, col: col, item: item }\"></ng-container>\n            </div>\n\n            <ng-template #prop>\n                {{ column.formatter(row, col, column.prop !== undefined ? item[column.prop] : item, item) }}\n            </ng-template>\n        </div>\n    </div>\n</div>\n", styles: [".evo-table{color:#212121}@media (min-width: 768px){.evo-table{display:table;width:100%}}.evo-table__row{padding:8px}.evo-table__row:nth-child(2n){background-color:#f4f6f8}@media (min-width: 768px){.evo-table__row{display:table-row}.evo-table__row:hover{background-color:#fff8e6}.evo-table__row_head:hover{background:none}}.evo-table__cell{margin-bottom:20px}.evo-table__cell:last-child{margin-bottom:0}@media (min-width: 768px){.evo-table__cell{display:table-cell;height:48px;padding:0 8px;vertical-align:middle}}.evo-table__cell_head{height:auto;padding-top:0;padding-bottom:16px;font-weight:600;white-space:nowrap}@media (min-width: 768px){.evo-table__cell.text-right{text-align:right}}@media (min-width: 768px){.evo-table__cell.text-center{text-align:center}}.evo-table__sort{position:relative;display:inline-block;padding-right:20px;vertical-align:top;cursor:pointer}.evo-table__sort_up:after,.evo-table__sort_down:after{content:\"\";position:absolute;right:0;border:5px solid transparent}.evo-table__sort_up:after{top:4px;border-bottom-color:#212121}.evo-table__sort_down:after{top:8px;border-top-color:#212121}.evo-table__label{margin-bottom:4px;font-weight:600}.evo-table_row-clickable .evo-table__row{cursor:pointer}:host(.evo-table_mobile) .evo-table__row{padding:0}@media (min-width: 768px){:host(.evo-table_mobile) .evo-table__row{display:table-row}:host(.evo-table_mobile) .evo-table__row:hover{background-color:#fff8e6}:host(.evo-table_mobile) .evo-table__row_head:hover{background:none}}:host(.evo-table_mobile) .evo-table__cell{display:flex;margin-bottom:0;padding:13px 8px}@media (min-width: 768px){:host(.evo-table_mobile) .evo-table__cell{display:table-cell;height:52px;padding:11px 16px;vertical-align:middle}}:host(.evo-table_mobile) .evo-table__label{width:50%;margin-bottom:0}@media (min-width: 768px){:host(.evo-table_mobile) .evo-table__label{width:auto;margin-bottom:4px}}:host(.evo-table_mobile-align_right) .evo-table__cell{justify-content:space-between}:host(.evo-table_mobile_short) .evo-table{display:table;width:100%}:host(.evo-table_mobile_short) .evo-table__row{display:table-row;padding:16px}:host(.evo-table_mobile_short) .evo-table__row:nth-child(2n){background-color:#f4f6f8}:host(.evo-table_mobile_short) .evo-table__row:hover{background-color:#fff8e6}:host(.evo-table_mobile_short) .evo-table__row_head:hover{background:none}:host(.evo-table_mobile_short) .evo-table__cell{display:table-cell;height:52px;padding:11px 16px;vertical-align:middle}:host(.evo-table_mobile_short) .evo-table__cell_head{height:auto;padding-top:0;padding-bottom:16px;font-weight:600;white-space:nowrap;border-top:none}:host(.evo-table_with-title) .evo-table__cell{font-weight:400}:host(.evo-table_with-title) .evo-table__cell:first-child{font-weight:600}@media (min-width: 768px){:host(.evo-table_with-title) .evo-table__cell:first-child{font-weight:400}}:host(.evo-table_with-title) .evo-table__cell:first-child .evo-table__label{display:none}:host(.evo-table_with-title) .evo-table__label{font-weight:400}\n"] }]
        }], propDecorators: { data: [{
                type: Input
            }], showHeader: [{
                type: Input
            }], stripe: [{
                type: Input
            }], visibleColumns: [{
                type: Input
            }], rowClasses: [{
                type: Input
            }], rowClick: [{
                type: Output
            }], columns: [{
                type: ContentChildren,
                args: [EvoTableColumnComponent]
            }] } });
//# sourceMappingURL=data:application/json;base64, 