import { ChangeDetectionStrategy, Component, Input, ContentChildren, ViewEncapsulation, Output, EventEmitter, ViewChild } from '@angular/core';
import { PrimeTemplate } from 'primeng/api';
import { SmzTreeComponent } from '../../../smz-trees/features/tree/tree.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "primeng/api";
import * as i3 from "../../../smz-trees/features/tree/tree.component";
import * as i4 from "../../../../common/directives/ng-clone/ng-clone.directive";
import * as i5 from "../../../smz-ui-block/smz-ui-block.directive";
import * as i6 from "../../../../common/directives/ng-var/ng-var.directive";
import * as i7 from "../../pipes/tree-items.pipe";
export class SmzTreeWithDetailsComponent {
    constructor(cdr) {
        this.cdr = cdr;
        this.selectionChange = new EventEmitter();
        this.detailsChange = new EventEmitter();
        this.contentTemplates = [];
    }
    ngOnInit() {
    }
    ngOnChanges(changes) {
    }
    resetSelection() {
        this.state.context.selectedNode = null;
        this.treeComponent.primeSelection = [];
        this.cdr.markForCheck();
    }
    ngAfterContentInit() {
        this.templates.forEach((item) => {
            const templateName = item.getType();
            if (templateName.includes('type')) {
                const type = templateName.split(':')[1];
                this.contentTemplates.push({
                    type,
                    template: item.template
                });
            }
            else {
                switch (templateName) {
                    case 'details':
                        this.detailsTemplate = item.template;
                        break;
                    case 'EmptySelection':
                        this.emptySelectionTemplate = item.template;
                        break;
                    case 'header':
                        this.headerTemplate = item.template;
                        break;
                    case 'toolbar':
                        this.toolbarTemplate = item.template;
                        break;
                }
            }
        });
    }
    selectionChanged(node) {
        // console.log('selectionChanged ::', node);
        this.state.context.selectedNode = null;
        if (this.state.tree.selectableTypes.some(x => x === node?.type)) {
            if (this.state.behavior.emitDetailsAfterCycle) {
                this.detailsChange.emit();
                this.cdr.markForCheck();
                setTimeout(() => {
                    this.state.context.selectedNode = node;
                    this.detailsChange.emit(node);
                    this.cdr.markForCheck();
                }, 0);
            }
            else {
                this.detailsChange.emit(node);
            }
        }
        this.selectionChange.emit(node);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: SmzTreeWithDetailsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: SmzTreeWithDetailsComponent, selector: "smz-ui-tree-with-details", inputs: { state: "state" }, outputs: { selectionChange: "selectionChange", detailsChange: "detailsChange" }, host: { classAttribute: "absolute inset-0" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "treeComponent", first: true, predicate: SmzTreeComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"state != null\" class=\"grid grid-nogutter items-start justify-start h-full\" [ngClass]=\"state?.styleClass?.content\">\r\n\r\n  <ng-container *ngClone=\"state.items$ | async as items\">\r\n\r\n  <!-- TREE -->\r\n  <div class=\"h-full col p-0\">\r\n    <div smzUiBlock #treeContainer [component]=\"treeContainer\" class=\"h-full w-full rounded p-2 bg-surface-a text-text-color border border-solid border-surface-d\">\r\n\r\n      <div class=\"h-full\">\r\n          <ng-container *ngVar=\"items | treeItems : state as treeItems\">\r\n            <smz-ui-tree #treeComponent [items]=\"treeItems\" [state]=\"state.tree.state\" (selectionChange)=\"selectionChanged($event)\" [styleClass]=\"state.tree.styleClass\">\r\n\r\n              <ng-container *ngIf=\"headerTemplate != null\">\r\n                <ng-template pTemplate=\"header\">\r\n                  <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: state, component: treeContainer, items: treeItems }\"></ng-container>\r\n                </ng-template>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"toolbarTemplate != null\">\r\n                <ng-template pTemplate=\"toolbar\">\r\n                  <ng-container *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: state, component: treeContainer, items: treeItems }\"></ng-container>\r\n                </ng-template>\r\n              </ng-container>\r\n\r\n              <ng-container *ngFor=\"let content of contentTemplates\">\r\n                <ng-template let-node [pTemplate]=\"'type:' + content.type\">\r\n                    <ng-container *ngTemplateOutlet=\"content.template; context: { $implicit: node }\"></ng-container>\r\n                </ng-template>\r\n              </ng-container>\r\n\r\n            </smz-ui-tree>\r\n          </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- DETAILS -->\r\n  <div class=\"h-full col-12\" [ngClass]=\"state.layout.detailsStyleClass\">\r\n    <div class=\"h-full items-stretch flex-col grid justify-start grid-nogutter rounded w-full overflow-y-auto bg-surface-a text-text-color border border-solid border-surface-d\">\r\n\r\n    <!-- CONTE\u00DADO -->\r\n    <ng-container *ngIf=\"state.context.selectedNode != null; else noSelectionTemplate\">\r\n\r\n      <ng-container *ngIf=\"detailsTemplate != null\">\r\n        <ng-container *ngTemplateOutlet=\"detailsTemplate; context: { $implicit: state.context.selectedNode, type: state.context.selectedNode?.type }\"></ng-container>\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n    <ng-template #noSelectionTemplate>\r\n\r\n      <ng-container *ngIf=\"items != null\">\r\n        <ng-container *ngIf=\"emptySelectionTemplate != null; else defaultEmptySelectionTemplate\">\r\n          <ng-container *ngTemplateOutlet=\"emptySelectionTemplate; context: { $implicit: state.context.selectedNode, type: state.context.selectedNode?.type }\"></ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template #defaultEmptySelectionTemplate>\r\n          <div class=\"grid grid-nogutter items-center justify-center p-4 flex-col flex-grow mt-10\">\r\n            <i class=\"fas fa-info-circle text-5xl text-yellow-500 mb-4\"></i>\r\n            <div class=\"text-lg\">Nenhum item selecionado.</div>\r\n          </div>\r\n        </ng-template>\r\n      </ng-container>\r\n\r\n    </ng-template>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</ng-container>\r\n\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.SmzTreeComponent, selector: "smz-ui-tree", inputs: ["state", "items", "loading", "styleClass", "inlineStyle", "appendTo", "selection", "selectionKey"], outputs: ["selectedNodes", "selectionChange", "parentChange", "reorder", "blockedDrop", "nodeExpanded", "nodeCollapsed", "treeExpanded", "nodeDropped"] }, { kind: "directive", type: i4.NgCloneDirective, selector: "[ngClone]", inputs: ["ngClone"] }, { kind: "directive", type: i5.SmzUiBlockDirective, selector: "[smzUiBlock]", inputs: ["component"] }, { kind: "directive", type: i6.NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.TreeItemsPipe, name: "treeItems" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: SmzTreeWithDetailsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'smz-ui-tree-with-details', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'absolute inset-0' }, template: "<div *ngIf=\"state != null\" class=\"grid grid-nogutter items-start justify-start h-full\" [ngClass]=\"state?.styleClass?.content\">\r\n\r\n  <ng-container *ngClone=\"state.items$ | async as items\">\r\n\r\n  <!-- TREE -->\r\n  <div class=\"h-full col p-0\">\r\n    <div smzUiBlock #treeContainer [component]=\"treeContainer\" class=\"h-full w-full rounded p-2 bg-surface-a text-text-color border border-solid border-surface-d\">\r\n\r\n      <div class=\"h-full\">\r\n          <ng-container *ngVar=\"items | treeItems : state as treeItems\">\r\n            <smz-ui-tree #treeComponent [items]=\"treeItems\" [state]=\"state.tree.state\" (selectionChange)=\"selectionChanged($event)\" [styleClass]=\"state.tree.styleClass\">\r\n\r\n              <ng-container *ngIf=\"headerTemplate != null\">\r\n                <ng-template pTemplate=\"header\">\r\n                  <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: state, component: treeContainer, items: treeItems }\"></ng-container>\r\n                </ng-template>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"toolbarTemplate != null\">\r\n                <ng-template pTemplate=\"toolbar\">\r\n                  <ng-container *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: state, component: treeContainer, items: treeItems }\"></ng-container>\r\n                </ng-template>\r\n              </ng-container>\r\n\r\n              <ng-container *ngFor=\"let content of contentTemplates\">\r\n                <ng-template let-node [pTemplate]=\"'type:' + content.type\">\r\n                    <ng-container *ngTemplateOutlet=\"content.template; context: { $implicit: node }\"></ng-container>\r\n                </ng-template>\r\n              </ng-container>\r\n\r\n            </smz-ui-tree>\r\n          </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- DETAILS -->\r\n  <div class=\"h-full col-12\" [ngClass]=\"state.layout.detailsStyleClass\">\r\n    <div class=\"h-full items-stretch flex-col grid justify-start grid-nogutter rounded w-full overflow-y-auto bg-surface-a text-text-color border border-solid border-surface-d\">\r\n\r\n    <!-- CONTE\u00DADO -->\r\n    <ng-container *ngIf=\"state.context.selectedNode != null; else noSelectionTemplate\">\r\n\r\n      <ng-container *ngIf=\"detailsTemplate != null\">\r\n        <ng-container *ngTemplateOutlet=\"detailsTemplate; context: { $implicit: state.context.selectedNode, type: state.context.selectedNode?.type }\"></ng-container>\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n    <ng-template #noSelectionTemplate>\r\n\r\n      <ng-container *ngIf=\"items != null\">\r\n        <ng-container *ngIf=\"emptySelectionTemplate != null; else defaultEmptySelectionTemplate\">\r\n          <ng-container *ngTemplateOutlet=\"emptySelectionTemplate; context: { $implicit: state.context.selectedNode, type: state.context.selectedNode?.type }\"></ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template #defaultEmptySelectionTemplate>\r\n          <div class=\"grid grid-nogutter items-center justify-center p-4 flex-col flex-grow mt-10\">\r\n            <i class=\"fas fa-info-circle text-5xl text-yellow-500 mb-4\"></i>\r\n            <div class=\"text-lg\">Nenhum item selecionado.</div>\r\n          </div>\r\n        </ng-template>\r\n      </ng-container>\r\n\r\n    </ng-template>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</ng-container>\r\n\r\n</div>" }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { treeComponent: [{
                type: ViewChild,
                args: [SmzTreeComponent]
            }], templates: [{
                type: ContentChildren,
                args: [PrimeTemplate]
            }], state: [{
                type: Input
            }], selectionChange: [{
                type: Output
            }], detailsChange: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 