import { Component, TemplateRef, ContentChild, ContentChildren, QueryList, HostBinding } from '@angular/core';
import { Type } from '../../utils';
var TreeGridComponent = (function () {
    function TreeGridComponent() {
        this.gridType = 'grid';
        this.gridCols = 3;
        this.treeGridCols = 3;
        this.closed = true;
        this.needsDT = false;
        this.needsDD = false;
    }
    TreeGridComponent.prototype.ngAfterContentInit = function () {
        var _this = this;
        this.update();
        if (!!this.treeGrid.update) {
            this.treeGrid.update.subscribe(function () { return _this.update(); });
        }
    };
    TreeGridComponent.prototype.update = function () {
        var _a;
        if (!this.treeGrid.header) {
            this.treeGrid.header = this.header;
        }
        if (!this.treeGrid.contentTpls && !!this.contentTpls) {
            this.contentTpls._results.shift();
            this.treeGrid.contentTpls = this.contentTpls;
        }
        _a = this.treeGrid.build(this.id), this.head = _a[0], this.nodes = _a[1], this.elements = _a[2];
        if (this.head.length > 0 && !Type.isNull(this.head[0])) {
            if (this.head.length > 0) {
                this.needsDT = true;
                if (!this.head[0].hasOwnProperty('closed') || this.head[0].closed) {
                    this.closed = false;
                }
                this.toggleState();
            }
        }
        if (this.nodes.length > 0 || this.elements.length > 0) {
            this.needsDD = true;
        }
    };
    TreeGridComponent.prototype.toggleState = function () {
        this.closed = !this.closed;
        if (this.needsDT) {
            this.head[0].closed = this.closed;
        }
    };
    TreeGridComponent.decorators = [
        { type: Component, args: [{
                    selector: 'tree-grid',
                    inputs: [
                        'treeGrid: tree-grid',
                        'gridType: grid-type',
                        'gridCols: grid-columns',
                        'treeGridCols: tree-grid-columns',
                        'id: node-id'
                    ],
                    template: "\n    <div *ngIf=\"needsDT && needsDD\" class=\"grid-item\" (click)=\"toggleState()\">\n        <ng-template ngFor [ngForOf]=\"head\" [ngForTemplate]=\"treeGrid.header\"></ng-template>\n    </div>\n    <div *ngIf=\"needsDD\" class=\"grid-tree-item\"\n        [class.grid-tree-child]=\"needsDT\"\n        [class.closed]=\"closed\"\n        [style.columnCount]=\"treeGridCols\">\n\n        <tree-grid *ngFor=\"let nodeId of nodes\"\n            [tree-grid]=\"treeGrid\"\n            [node-id]=\"nodeId\"\n            [grid-type]=\"gridType\"\n            [grid-columns]=\"gridCols\"\n        ></tree-grid>\n        <grid\n            [grid-items]=\"elements\"\n            [grid-templates]=\"treeGrid.contentTpls\"\n            [grid-type]=\"gridType\"\n            [grid-columns]=\"gridCols\"\n        ></grid>\n    </div>\n  ",
                    styles: ["\n    ::-webkit-scrollbar{width:5px;height:4px}::-webkit-scrollbar-button{width:0px;height:0px}::-webkit-scrollbar-thumb{background:rgba(255,223,119,0.2)}::-webkit-scrollbar-track{background:rgba(17,17,17,0.3)}::-webkit-scrollbar-thumb:active{background:rgba(17,17,17,0.3)}::-webkit-scrollbar-thumb,::-webkit-scrollbar-track{border:none}::-webkit-scrollbar-track:hover,::-webkit-scrollbar-track:active,::-webkit-scrollbar-corner{background:transparent}o-dynamic-form-builder .dynamicform-container{height:100%}o-dynamic-form-builder .dynamicform-container .dropzone-container{height:95%;overflow:auto}:host .grid-item{display:inline-block;flex:1 1 auto;width:100%}:host .grid-tree-child{columns:5 24em;break-inside:avoid}:host.column,:host.column .grid-tree-item{display:flex;flex-direction:column}:host.row,:host.row .grid-tree-item{display:flex;flex-direction:row}:host.row .grid-item,:host.row .grid-tree-item .grid-item{width:initial}.grid-tree-child{transition:350ms;transition-timing-function:ease-in-out;background:rgba(0,0,0,0.1);overflow:auto;box-shadow:0.08em 0.16em 0.54em -0.16em black inset}.grid-tree-child.closed{max-height:0;overflow:hidden;box-shadow:0.3em 0.5em 1em -0.5em black inset}\n  "]
                },] },
    ];
    TreeGridComponent.propDecorators = {
        header: [{ type: ContentChild, args: [TemplateRef,] }],
        contentTpls: [{ type: ContentChildren, args: [TemplateRef,] }],
        gridType: [{ type: HostBinding, args: ['class',] }]
    };
    return TreeGridComponent;
}());
export { TreeGridComponent };
//# sourceMappingURL=tree-grid.component.js.map