import { Component, HostBinding, HostListener, Input } from '@angular/core';
import * as i0 from "@angular/core";
const scrollbarHeight = 20; // account for scrollbar on non-touch devices
export class DataTableComponent {
    constructor(el) {
        this.el = el;
        this.minHeight = 100;
        this.nbRows = 20;
        this.small = false;
        this.height = '100%';
        this.width = '100%';
    }
    get isSmall() {
        return this.small;
    }
    onResize() {
        this.updateTableSize();
    }
    ngAfterViewInit() {
        this.updateTableSize();
    }
    ngOnChanges(changes) {
        if ('nbRows' in changes || 'height' in changes) {
            this.updateTableSize();
        }
    }
    get nbHeaders() {
        return this.el.nativeElement.querySelectorAll('.table thead tr').length;
    }
    get rowHeight() {
        return this.small ? 30 : 42;
    }
    updateTableSize() {
        let height = this.nbRows
            ? this.rowHeight * (this.nbHeaders + this.nbRows) + scrollbarHeight
            : this.el.nativeElement.offsetHeight;
        height = this.maxHeight ? Math.min(height, this.maxHeight) : height;
        height = this.minHeight ? Math.max(height, this.minHeight) : height;
        this.height = `${height}px`;
        this.width = `${this.el.nativeElement.offsetWidth}px`;
    }
}
DataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
DataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DataTableComponent, selector: "he-data-table", inputs: { minHeight: "minHeight", maxHeight: "maxHeight", nbRows: "nbRows", small: "small", height: "height", width: "width" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.is-small": "this.isSmall" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"data-table-holder\"\n  [style.height]=\"height\"\n  [style.width]=\"width\"\n>\n  <div class=\"data-table-content\"\n    [style.height]=\"height\"\n    [style.width]=\"width\"\n  >\n    <div class=\"table-container\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%;width:100%}:host *{box-sizing:border-box}:host .data-table-holder{overflow:hidden;position:relative;z-index:1}:host .data-table-content{position:absolute;top:0;left:0;z-index:1}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep .table-container{overflow:auto!important;width:100%;height:100%}:host ::ng-deep .table{width:100%}:host ::ng-deep .table th,:host ::ng-deep .table td{height:42px;white-space:nowrap}:host ::ng-deep .table th span:first-child,:host ::ng-deep .table td span:first-child{display:inline-block;max-width:100%}:host ::ng-deep .table th:not(.width-auto):not(.fixed-column),:host ::ng-deep .table td:not(.width-auto):not(.fixed-column){text-align:center}:host ::ng-deep .table thead tr th,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table .fixed-column{position:sticky}:host ::ng-deep .table thead tr th{border-bottom:0;box-shadow:inset 0 -2px #ededed;top:0;z-index:11}:host ::ng-deep .table thead tr th.has-border-right{box-shadow:inset 0 -2px #ededed,inset -2px 0 #ededed}:host ::ng-deep .table tbody tr td.has-border-right{box-shadow:inset -2px 0 #ededed}:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{border-right:0;box-shadow:inset -2px 0 #ededed;left:0;max-width:200px;z-index:12;width:200px}:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td.fixed-column{left:200px}:host ::ng-deep .table tbody tr td:first-child{z-index:10}:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column{box-shadow:inset 0 -2px #ededed,inset -2px 0 #ededed}:host ::ng-deep .table tbody tr{background-color:transparent!important}:host ::ng-deep .table thead tr+tr th{top:42px}:host ::ng-deep .table thead tr+tr+tr th{top:84px}:host ::ng-deep .table thead tr th,:host ::ng-deep .table tbody tr td{background-color:#fff}:host ::ng-deep .table.is-hoverable tbody tr:not(.is-selected):hover td{background-color:#fafafa}:host ::ng-deep .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover td{background-color:#fafafa}:host ::ng-deep .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover td:nth-child(even) td{background-color:#f5f5f5}:host ::ng-deep .table.is-striped tbody tr:not(.is-selected):nth-child(even) td{background-color:#fafafa}:host ::ng-deep .table.is-striped tbody td{border-bottom:0}:host ::ng-deep .table.is-narrow{font-size:12px}:host ::ng-deep .table.is-narrow th,:host ::ng-deep .table.is-narrow td{height:30px}:host ::ng-deep .table.is-narrow thead tr+tr th{top:30px}:host ::ng-deep .table.is-narrow thead tr+tr+tr th{top:60px}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DataTableComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'he-data-table',
                    templateUrl: './data-table.component.html',
                    styleUrls: ['./data-table.component.scss']
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { minHeight: [{
                type: Input
            }], maxHeight: [{
                type: Input
            }], nbRows: [{
                type: Input
            }], small: [{
                type: Input
            }], height: [{
                type: Input
            }], width: [{
                type: Input
            }], isSmall: [{
                type: HostBinding,
                args: ['class.is-small']
            }], onResize: [{
                type: HostListener,
                args: ['window:resize', []]
            }] } });
//# sourceMappingURL=data:application/json;base64, 