import { Component, EventEmitter, Input, Output } from '@angular/core';
import { TreeViewService } from '../tree-view.service';
import * as i0 from "@angular/core";
import * as i1 from "../tree-view.service";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "../../input-forms/components/input-text/input-text.component";
import * as i5 from "../../input-forms/components/input-currency/input-currency.component";
import * as i6 from "../../input-forms/components/input-percent/input-percent.component";
import * as i7 from "../../input-forms/components/input-number/input-number.component";
import * as i8 from "../../input-forms/components/input-date/input-date.component";
export class TreeViewItemComponent {
    constructor(service) {
        this.service = service;
        this.showIcons = true;
        this.enableLabelLinkStyle = false;
        this.openned = false;
        this.expandedOnInit = false;
        this.rootItem = false;
        this.OnItemExpanded = new EventEmitter();
        this.OnItemClicked = new EventEmitter();
    }
    ngOnInit() {
        this.handleSelecionChanges();
        this.equalHeightStyle = this.columns != undefined && this.columns.length > 0;
        this.summarizedStyle = this.columns != undefined
            && this.columns.length > 0
            && this.row[this.collectionProperty]
            && this.row[this.collectionProperty].length > 0;
        if (this.expandedOnInit) {
            this.openned = true;
        }
    }
    Toogle() {
        this.openned = !this.openned;
        if (this.openned) {
            this.emitItemExpandedEvent(this.row);
        }
    }
    OnClick() {
        this.emitItemClickedEvent(this.row);
    }
    HandleSubItemExpanded(data) {
        this.emitItemExpandedEvent(data);
    }
    HandleSubItemClicked(data) {
        this.emitItemClickedEvent(data);
    }
    HandleColumnClick(column, row, currentData, rowIndex) {
        if (column.onClick) {
            column.onClick(row, currentData, rowIndex);
        }
    }
    emitItemExpandedEvent(data) {
        this.OnItemExpanded.emit(data);
    }
    emitItemClickedEvent(data) {
        this.OnItemClicked.emit(data);
    }
    handleSelecionChanges() {
        this.service.onSelecionChanged.subscribe(data => {
            this.active = this.idProperty && this.row[this.idProperty] == data[this.idProperty];
        });
    }
}
TreeViewItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeViewItemComponent, deps: [{ token: i1.TreeViewService }], target: i0.ɵɵFactoryTarget.Component });
TreeViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TreeViewItemComponent, selector: "[ui-tree-view-item]", inputs: { row: "row", idProperty: "idProperty", labelProperty: "labelProperty", collectionProperty: "collectionProperty", columns: "columns", showIcons: "showIcons", enableLabelLinkStyle: "enableLabelLinkStyle", normalItemIconClass: "normalItemIconClass", collapsableClosedItemIconClass: "collapsableClosedItemIconClass", collapsableOpennedItemIconClass: "collapsableOpennedItemIconClass", first: "first", last: "last", openned: "openned", expandedOnInit: "expandedOnInit", rootItem: "rootItem" }, outputs: { OnItemExpanded: "OnItemExpanded", OnItemClicked: "OnItemClicked" }, ngImport: i0, template: "<div class=\"item\" [ngClass]=\"{\n    'has-children': row[collectionProperty]?.length > 0,\n    'has-many-children': row[collectionProperty]?.length > 1,\n    'has-no-columns': !columns || columns.length == 0,\n    'has-no-icons': !showIcons,\n    'labels-as-link': enableLabelLinkStyle,\n    'active': active,\n    'first': first,\n    'last': last\n  }\">\n  <div class=\"d-flex align-items-center justify-content-between w-100\" \n    [ngClass]=\"{\n      'summarized-style': summarizedStyle, \n      'equal-height': equalHeightStyle,\n      'open': openned\n    }\">\n    <i class=\"mx-1 fa empty\" *ngIf=\"!row[collectionProperty] || row[collectionProperty].length == 0\"></i>\n    <i class=\"mx-1 fa toogler\" [ngClass]=\"{\n      'fa-plus-square-o': row[collectionProperty]?.length > 0 && !openned,\n      'fa-minus-square-o': row[collectionProperty]?.length > 0 && openned\n    }\" (click)=\"Toogle()\"></i>\n    <i class=\"mx-1 folder-item fa {{collapsableClosedItemIconClass}}\" *ngIf=\"row[collectionProperty]?.length > 0 && !openned && showIcons\"></i>\n    <i class=\"mx-1 folder-item fa {{collapsableOpennedItemIconClass}}\" *ngIf=\"row[collectionProperty]?.length > 0 && openned && showIcons\"></i>\n    <i class=\"mx-1 normal-item fa {{normalItemIconClass}}\" *ngIf=\"(!row[collectionProperty] || row[collectionProperty].length == 0) && showIcons\"></i>\n  \n    <label class=\"mb-0 mr-auto d-inline-block text-truncate\" (click)=\"OnClick()\">{{row[labelProperty]}}</label>\n  \n    <div class=\"columns d-flex align-items-center justify-content-between h-100\" *ngIf=\"columns?.length > 0\">\n      <div class=\"column {{column.dataClasses}}\" \n        *ngFor=\"let column of columns; let i = index;\" \n        [ngStyle]=\"{'width': column.width}\"\n        [ngClass]=\"{'text-center': column.dataAlignment == 1, 'text-right': column.dataAlignment == 2}\">\n  \n        <div *ngIf=\"!column.editable || row[collectionProperty]?.length > 0\" (click)=\"HandleColumnClick(column, row, row[column.data], i)\">          \n          <div *ngIf=\"!column.render && column.data\">\n            <span *ngIf=\"!column.dataType || column.dataType == 0\">{{row[column.data]}}</span>\n            <span *ngIf=\"column.dataType == 1\">{{row[column.data] | date:'short'}}</span>\n            <span *ngIf=\"column.dataType >= 2\">{{row[column.data] | number:'1.2-2'}}</span>\n          </div>\n          <span *ngIf=\"column.render\" [innerHtml]=\"column.render(row, row[column.data], i)\"></span>\n        </div>\n        \n        <div *ngIf=\"column.editable && (!row[collectionProperty] || row[collectionProperty].length == 0)\">\n          <input-text *ngIf=\"!column.dataType || column.dataType == 0\" [(ngModel)]=\"row[column.data]\"></input-text>\n          <input-date *ngIf=\"column.dataType == 1\" [(ngModel)]=\"row[column.data]\"></input-date>\n          <input-number *ngIf=\"column.dataType == 2\" [(ngModel)]=\"row[column.data]\"></input-number>\n          <input-currency *ngIf=\"column.dataType == 3\" [(ngModel)]=\"row[column.data]\"></input-currency>\n          <input-percent *ngIf=\"column.dataType == 4\" [(ngModel)]=\"row[column.data]\"></input-percent>\n        </div>\n      </div>\n    </div>\n  </div>\n  \n  <ul class=\"fadeInDown\" *ngIf=\"row[collectionProperty]?.length > 0 && openned\">\n    <li *ngFor=\"let subitem of row[collectionProperty]; let first = first; let last = last;\" \n      ui-tree-view-item\n      [row]=\"subitem\"\n      [columns]=\"columns\"\n      [idProperty]=\"idProperty\"\n      [labelProperty]=\"labelProperty\"\n      [collectionProperty]=\"collectionProperty\"\n      [showIcons]=\"showIcons\"\n      [enableLabelLinkStyle]=\"enableLabelLinkStyle\"\n      [normalItemIconClass]=\"normalItemIconClass\"\n      [collapsableClosedItemIconClass]=\"collapsableClosedItemIconClass\"\n      [collapsableOpennedItemIconClass]=\"collapsableOpennedItemIconClass\"\n      [first]=\"first\"\n      [last]=\"last\"\n      [expandedOnInit]=\"expandedOnInit\"\n      [showIcons]=\"showIcons\"\n      (OnItemExpanded)=\"HandleSubItemExpanded($event)\"\n      (OnItemClicked)=\"HandleSubItemClicked($event)\"\n      >\n    </li>\n  </ul>\n</div>\n", styles: ["@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-10%,0)}to{opacity:1;transform:translateZ(0)}}.fadeInDown{animation-name:fadeInDown;animation-duration:.35s;animation-fill-mode:both}i.folder-item{color:#ffb822}i.normal-item{color:#c1bfd0}i.fa.fa-plus-square-o,i.fa.fa-minus-square-o{background-color:#f0f0f0;z-index:11}i.fa.empty{width:7px}.item.has-no-columns i.fa.fa-plus-square-o,.item.has-no-columns i.fa.fa-minus-square-o{background-color:#fff}.toogler,.item.labels-as-link>div>label{cursor:pointer}.item>div>label{padding:0 4px}.item.active>div>label,.item.labels-as-link>div>label:hover{background-color:#666;color:#fff;border-radius:4px}.item.active>div>label{background-color:#09498e!important}.no-selection::selection{background:transparent}ul{position:relative;padding:0;margin:0 0 0 20px}ul li{position:relative;list-style:none!important}.columns .column{margin-left:5px}.item{position:relative;overflow:hidden}.item>div{position:relative;height:30px}.item>div.equal-height{height:45px}.item>div.summarized-style{background-color:#f0f0f0;border-bottom:1px solid #CCC}.item>div.summarized-style .columns .column{padding:0 13px}.item>div:before{content:\"\";position:absolute;top:0;bottom:0;left:9px;z-index:10;width:0;border-right:1px solid #CCC}.item.has-children.first>div:before{top:0}.item.last>div:before{bottom:22px}.item.has-children.last>div:before{bottom:17px}ul:before{content:\"\";position:absolute;top:0;bottom:0;left:-11px;z-index:10;width:0;border-right:1px solid #CCC}.item.has-children.last>ul:before{display:none}.item>div:after{content:\"\";position:absolute;top:calc(50% - 1px);left:9px;z-index:10;width:13px;border-bottom:1px solid #CCC}.item.has-no-columns.last>div:before{bottom:15px}.item.has-no-icons>div>label{margin-left:5px}.item.has-no-icons.has-children>div>label{margin-left:8px}@media (max-width: 860px){.columns{display:none!important}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.InputTextComponent, selector: "input-text", inputs: ["placeholder", "inputGroupPrepend", "inputGroupAppend", "maxlength"] }, { kind: "component", type: i5.InputCurrencyComponent, selector: "input-currency", inputs: ["showInputGroup", "placeholder", "precision"] }, { kind: "component", type: i6.InputPercentComponent, selector: "input-percent", inputs: ["showInputGroup", "inputGroupText", "placeholder", "precision"] }, { kind: "component", type: i7.InputNumberComponent, selector: "input-number", inputs: ["maxValue", "minValue"] }, { kind: "component", type: i8.InputDateComponent, selector: "input-date", inputs: ["placeholder", "minDate", "maxDate", "format", "showInputGroup", "inputGroupText", "placement", "theme"], outputs: ["onChange"] }, { kind: "component", type: TreeViewItemComponent, selector: "[ui-tree-view-item]", inputs: ["row", "idProperty", "labelProperty", "collectionProperty", "columns", "showIcons", "enableLabelLinkStyle", "normalItemIconClass", "collapsableClosedItemIconClass", "collapsableOpennedItemIconClass", "first", "last", "openned", "expandedOnInit", "rootItem"], outputs: ["OnItemExpanded", "OnItemClicked"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeViewItemComponent, decorators: [{
            type: Component,
            args: [{ selector: '[ui-tree-view-item]', template: "<div class=\"item\" [ngClass]=\"{\n    'has-children': row[collectionProperty]?.length > 0,\n    'has-many-children': row[collectionProperty]?.length > 1,\n    'has-no-columns': !columns || columns.length == 0,\n    'has-no-icons': !showIcons,\n    'labels-as-link': enableLabelLinkStyle,\n    'active': active,\n    'first': first,\n    'last': last\n  }\">\n  <div class=\"d-flex align-items-center justify-content-between w-100\" \n    [ngClass]=\"{\n      'summarized-style': summarizedStyle, \n      'equal-height': equalHeightStyle,\n      'open': openned\n    }\">\n    <i class=\"mx-1 fa empty\" *ngIf=\"!row[collectionProperty] || row[collectionProperty].length == 0\"></i>\n    <i class=\"mx-1 fa toogler\" [ngClass]=\"{\n      'fa-plus-square-o': row[collectionProperty]?.length > 0 && !openned,\n      'fa-minus-square-o': row[collectionProperty]?.length > 0 && openned\n    }\" (click)=\"Toogle()\"></i>\n    <i class=\"mx-1 folder-item fa {{collapsableClosedItemIconClass}}\" *ngIf=\"row[collectionProperty]?.length > 0 && !openned && showIcons\"></i>\n    <i class=\"mx-1 folder-item fa {{collapsableOpennedItemIconClass}}\" *ngIf=\"row[collectionProperty]?.length > 0 && openned && showIcons\"></i>\n    <i class=\"mx-1 normal-item fa {{normalItemIconClass}}\" *ngIf=\"(!row[collectionProperty] || row[collectionProperty].length == 0) && showIcons\"></i>\n  \n    <label class=\"mb-0 mr-auto d-inline-block text-truncate\" (click)=\"OnClick()\">{{row[labelProperty]}}</label>\n  \n    <div class=\"columns d-flex align-items-center justify-content-between h-100\" *ngIf=\"columns?.length > 0\">\n      <div class=\"column {{column.dataClasses}}\" \n        *ngFor=\"let column of columns; let i = index;\" \n        [ngStyle]=\"{'width': column.width}\"\n        [ngClass]=\"{'text-center': column.dataAlignment == 1, 'text-right': column.dataAlignment == 2}\">\n  \n        <div *ngIf=\"!column.editable || row[collectionProperty]?.length > 0\" (click)=\"HandleColumnClick(column, row, row[column.data], i)\">          \n          <div *ngIf=\"!column.render && column.data\">\n            <span *ngIf=\"!column.dataType || column.dataType == 0\">{{row[column.data]}}</span>\n            <span *ngIf=\"column.dataType == 1\">{{row[column.data] | date:'short'}}</span>\n            <span *ngIf=\"column.dataType >= 2\">{{row[column.data] | number:'1.2-2'}}</span>\n          </div>\n          <span *ngIf=\"column.render\" [innerHtml]=\"column.render(row, row[column.data], i)\"></span>\n        </div>\n        \n        <div *ngIf=\"column.editable && (!row[collectionProperty] || row[collectionProperty].length == 0)\">\n          <input-text *ngIf=\"!column.dataType || column.dataType == 0\" [(ngModel)]=\"row[column.data]\"></input-text>\n          <input-date *ngIf=\"column.dataType == 1\" [(ngModel)]=\"row[column.data]\"></input-date>\n          <input-number *ngIf=\"column.dataType == 2\" [(ngModel)]=\"row[column.data]\"></input-number>\n          <input-currency *ngIf=\"column.dataType == 3\" [(ngModel)]=\"row[column.data]\"></input-currency>\n          <input-percent *ngIf=\"column.dataType == 4\" [(ngModel)]=\"row[column.data]\"></input-percent>\n        </div>\n      </div>\n    </div>\n  </div>\n  \n  <ul class=\"fadeInDown\" *ngIf=\"row[collectionProperty]?.length > 0 && openned\">\n    <li *ngFor=\"let subitem of row[collectionProperty]; let first = first; let last = last;\" \n      ui-tree-view-item\n      [row]=\"subitem\"\n      [columns]=\"columns\"\n      [idProperty]=\"idProperty\"\n      [labelProperty]=\"labelProperty\"\n      [collectionProperty]=\"collectionProperty\"\n      [showIcons]=\"showIcons\"\n      [enableLabelLinkStyle]=\"enableLabelLinkStyle\"\n      [normalItemIconClass]=\"normalItemIconClass\"\n      [collapsableClosedItemIconClass]=\"collapsableClosedItemIconClass\"\n      [collapsableOpennedItemIconClass]=\"collapsableOpennedItemIconClass\"\n      [first]=\"first\"\n      [last]=\"last\"\n      [expandedOnInit]=\"expandedOnInit\"\n      [showIcons]=\"showIcons\"\n      (OnItemExpanded)=\"HandleSubItemExpanded($event)\"\n      (OnItemClicked)=\"HandleSubItemClicked($event)\"\n      >\n    </li>\n  </ul>\n</div>\n", styles: ["@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-10%,0)}to{opacity:1;transform:translateZ(0)}}.fadeInDown{animation-name:fadeInDown;animation-duration:.35s;animation-fill-mode:both}i.folder-item{color:#ffb822}i.normal-item{color:#c1bfd0}i.fa.fa-plus-square-o,i.fa.fa-minus-square-o{background-color:#f0f0f0;z-index:11}i.fa.empty{width:7px}.item.has-no-columns i.fa.fa-plus-square-o,.item.has-no-columns i.fa.fa-minus-square-o{background-color:#fff}.toogler,.item.labels-as-link>div>label{cursor:pointer}.item>div>label{padding:0 4px}.item.active>div>label,.item.labels-as-link>div>label:hover{background-color:#666;color:#fff;border-radius:4px}.item.active>div>label{background-color:#09498e!important}.no-selection::selection{background:transparent}ul{position:relative;padding:0;margin:0 0 0 20px}ul li{position:relative;list-style:none!important}.columns .column{margin-left:5px}.item{position:relative;overflow:hidden}.item>div{position:relative;height:30px}.item>div.equal-height{height:45px}.item>div.summarized-style{background-color:#f0f0f0;border-bottom:1px solid #CCC}.item>div.summarized-style .columns .column{padding:0 13px}.item>div:before{content:\"\";position:absolute;top:0;bottom:0;left:9px;z-index:10;width:0;border-right:1px solid #CCC}.item.has-children.first>div:before{top:0}.item.last>div:before{bottom:22px}.item.has-children.last>div:before{bottom:17px}ul:before{content:\"\";position:absolute;top:0;bottom:0;left:-11px;z-index:10;width:0;border-right:1px solid #CCC}.item.has-children.last>ul:before{display:none}.item>div:after{content:\"\";position:absolute;top:calc(50% - 1px);left:9px;z-index:10;width:13px;border-bottom:1px solid #CCC}.item.has-no-columns.last>div:before{bottom:15px}.item.has-no-icons>div>label{margin-left:5px}.item.has-no-icons.has-children>div>label{margin-left:8px}@media (max-width: 860px){.columns{display:none!important}}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.TreeViewService }]; }, propDecorators: { row: [{
                type: Input
            }], idProperty: [{
                type: Input
            }], labelProperty: [{
                type: Input
            }], collectionProperty: [{
                type: Input
            }], columns: [{
                type: Input
            }], showIcons: [{
                type: Input
            }], enableLabelLinkStyle: [{
                type: Input
            }], normalItemIconClass: [{
                type: Input
            }], collapsableClosedItemIconClass: [{
                type: Input
            }], collapsableOpennedItemIconClass: [{
                type: Input
            }], first: [{
                type: Input
            }], last: [{
                type: Input
            }], openned: [{
                type: Input
            }], expandedOnInit: [{
                type: Input
            }], rootItem: [{
                type: Input
            }], OnItemExpanded: [{
                type: Output
            }], OnItemClicked: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 