keevo-components 1.8.348 → 1.8.350

package/fesm2022/keevo-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewChild, Injectable, Directive, Pipe, ViewChildren, ContentChildren, forwardRef, signal, model, effect, HostListener, NgModule, computed, input, viewChild, inject, contentChildren, ChangeDetectionStrategy, HostBinding, Injector } from '@angular/core';
+import { EventEmitter, Component, Input, Output, ViewChild, Injectable, Directive, Pipe, ViewChildren, ContentChildren, forwardRef, signal, model, effect, HostListener, NgModule, computed, input, viewChild, inject, contentChildren, ViewContainerRef, ChangeDetectionStrategy, HostBinding, Injector } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass } from '@angular/common';
 import * as i1$1 from 'primeng/button';
@@ -14,7 +14,7 @@ import * as i2 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 import * as i2$1 from '@angular/forms';
 import { FormGroup, NgControl, FormControlName, FormGroupDirective, NG_VALUE_ACCESSOR, Validators, FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
-import { Subject, finalize, combineLatest, filter, debounceTime, of, BehaviorSubject, takeUntil, timer } from 'rxjs';
+import { Subject, finalize, combineLatest, filter, debounceTime, of, BehaviorSubject, fromEvent, takeUntil, timer } from 'rxjs';
 import * as i1$3 from 'primeng/dynamicdialog';
 import { DynamicDialogModule, DialogService, DynamicDialogRef, DynamicDialogConfig } from 'primeng/dynamicdialog';
 import * as i1$2 from 'primeng/api';
@@ -118,6 +118,7 @@ import Quill from 'quill';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import { OrgChart } from 'd3-org-chart';
 import * as d3 from 'd3';
+import { OrganizationChartModule } from 'primeng/organizationchart';
 import { AutoCompleteModule } from 'primeng/autocomplete';
 import * as vkbeautify from 'vkbeautify';
 import * as i1$7 from '@angular/platform-browser';
@@ -4115,8 +4116,9 @@ class SimpleComponent {
         this.startY = 0;
         //? Fator de escala da imagem e zoom
         this.scaleFactorReadOnly = computed(() => {
-            return Math.min(this.scaleFactor(), 3);
+            return Math.min(this.scaleFactor(), this.scaleFactorInicial() + 5);
         });
+        this.scaleFactorInicial = signal(null);
         this.scaleFactor = signal(null);
         this.scaleFactorModel = 0;
         this.imageX = 0;
@@ -4184,11 +4186,14 @@ class SimpleComponent {
         //? Proporção da imagem
         this.widthTela = signal(0);
         this.heigthTela = signal(0);
+        //#endregion
+        //#region handlers de eventos
+        this.comparadorOnZoomChange = this.scaleFactorInicial();
         this.atualizaTamanhoTela();
     }
     setScaleFactorModel(valor) {
-        this.scaleFactorModel = valor;
-        this.scaleFactor.set(this.scaleFactorModel);
+        this.scaleFactorModel = valor - this.scaleFactorInicial();
+        this.scaleFactor.set(valor);
     }
     onWindowResize() {
         this.atualizaTamanhoTela();
@@ -4228,8 +4233,8 @@ class SimpleComponent {
         //? Ajusta possição e zoom inicial
         if (this._variaviesDialog()?.indCircle) {
             const scaleFactor = (this.radius() * 2) / Math.min(imageWidth, imageHeight);
+            this.scaleFactorInicial.set(scaleFactor);
             this.setScaleFactorModel(scaleFactor);
-            this.scaleFactor.set(scaleFactor);
         }
         else {
             const scaleFactor = this.cutHeight() === this.cutWidth()
@@ -4239,8 +4244,8 @@ class SimpleComponent {
                 : this.cutHeight() > this.cutWidth()
                     ? this.cutHeight() / imageHeight
                     : this.cutWidth() / imageWidth;
+            this.scaleFactorInicial.set(scaleFactor);
             this.setScaleFactorModel(scaleFactor);
-            this.scaleFactor.set(scaleFactor);
         }
         this.imageX = Math.max((this.canvas().width - imageWidth * this.scaleFactorReadOnly()) / 2, this.xMin());
         this.imageY = Math.max((this.canvasHeight() - imageHeight * this.scaleFactorReadOnly()) / 2, this.yMin());
@@ -4330,13 +4335,12 @@ class SimpleComponent {
             }
         }
     }
-    //#endregion
-    //#region handlers de eventos
     onZoomChange(e) {
-        const prevZoom = this.scaleFactorReadOnly();
+        const prevZoom = this.comparadorOnZoomChange;
         const zoomValue = e.value;
+        this.comparadorOnZoomChange = e.value;
         const direction = prevZoom < zoomValue ? 'up' : 'down';
-        this.ajustarZoom(direction);
+        this.ajustarZoom(direction, e.value);
     }
     initializeMouseWheel(canvas, ctx, img) {
         canvas.onwheel = (e) => {
@@ -4346,10 +4350,12 @@ class SimpleComponent {
             this.ajustarZoom(direction);
         };
     }
-    ajustarZoom(direction) {
+    ajustarZoom(direction, value) {
         const prevScaleFactor = this.scaleFactorReadOnly();
-        const delta = direction == 'down' ? -0.01 : 0.01;
-        let scaleFactor = Math.min((prevScaleFactor + (delta * 1.2)), 3);
+        const delta = direction == 'down' ? -0.015 : 0.015;
+        let scaleFactor = prevScaleFactor + (delta * 1.4);
+        if (value)
+            scaleFactor = value + this.scaleFactorInicial();
         const newHeight = this._Image().height * scaleFactor;
         const newWidth = this._Image().width * scaleFactor;
         if (this._variaviesDialog()?.indCircle) {
@@ -4546,7 +4552,7 @@ class SimpleComponent {
 
         <div class="w-full mt-2">
           <kv-label label="Zoom" style="text-align: left;" />
-          <p-slider [(ngModel)]="this.scaleFactorModel" [step]="0.000001"  [max]="3"  (onChange)="onZoomChange($event)"></p-slider>
+          <p-slider [(ngModel)]="this.scaleFactorModel" [step]="0.0001"  [max]="5"  (onChange)="onZoomChange($event)"></p-slider>
         </div>
 
           <div class="button-container">
@@ -4571,7 +4577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
 
         <div class="w-full mt-2">
           <kv-label label="Zoom" style="text-align: left;" />
-          <p-slider [(ngModel)]="this.scaleFactorModel" [step]="0.000001"  [max]="3"  (onChange)="onZoomChange($event)"></p-slider>
+          <p-slider [(ngModel)]="this.scaleFactorModel" [step]="0.0001"  [max]="5"  (onChange)="onZoomChange($event)"></p-slider>
         </div>
 
           <div class="button-container">
@@ -6092,124 +6098,265 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                 }]
         }] });
 
+class OrgChartService {
+    constructor() {
+        this.nodeAddSubject = new Subject();
+        this.nodeAdd$ = this.nodeAddSubject.asObservable();
+        this.nodeRemoveSubject = new Subject();
+        this.nodeRemove$ = this.nodeRemoveSubject.asObservable();
+        this.nodeRemove = new EventEmitter();
+        this.nodeClick = new EventEmitter();
+    }
+    adicionarNode(node) {
+        this.nodeAddSubject.next(node);
+    }
+    removerNode(id) {
+        this.nodeRemoveSubject.next(id);
+    }
+    setNodeExpanded(orgSource, nodeId, expanded) {
+        const nodeIndex = orgSource.findIndex((item) => item.id === nodeId);
+        if (nodeIndex !== -1) {
+            const updatedNode = {
+                ...orgSource[nodeIndex],
+                _expanded: true,
+                expanded
+            };
+            return [
+                ...orgSource.slice(0, nodeIndex),
+                updatedNode,
+                ...orgSource.slice(nodeIndex + 1)
+            ];
+        }
+        else {
+            return orgSource;
+        }
+    }
+    modificarCampDataNode(orgSource, nodeId, field, value) {
+        const nodeIndex = orgSource.findIndex((item) => item.id === nodeId);
+        if (nodeIndex !== -1) {
+            const updatedNode = {
+                ...orgSource[nodeIndex],
+                data: {
+                    ...orgSource[nodeIndex].data,
+                    [field]: value
+                }
+            };
+            return [
+                ...orgSource.slice(0, nodeIndex),
+                updatedNode,
+                ...orgSource.slice(nodeIndex + 1)
+            ];
+        }
+        return orgSource;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: OrgChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: OrgChartService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: OrgChartService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class KvOrgchartComponent {
-    constructor(renderer) {
-        this.renderer = renderer;
-        this.generateTemplate = (data, node, nodes, index) => '';
-        this.templateFuncion = false;
-        this.corDeFundo = 'red';
+    constructor(cdr, service) {
+        this.cdr = cdr;
+        this.service = service;
+        this.dataSource = model(null);
+        //#region Emissores de evento
+        this.onNodeClick = new EventEmitter();
+        // #endregion
         this.compact = true;
         this.mostraMenu = false;
     }
+    //#region Iniciar OrgChart e Atualização de dados
     ngOnInit() {
+        this.iniciarHandlersDeEventos();
     }
     ngAfterViewInit() {
         if (!this.chart) {
             this.chart = new OrgChart();
         }
-        this.updateChart();
+        this.iniciarChart();
     }
-    ngOnChanges() {
-        this.updateChart();
-    }
-    updateChart() {
-        if (!this.dataSource) {
-            return;
-        }
-        if (!this.chart) {
+    iniciarChart() {
+        if (!this.dataSource() || !this.chart) {
             return;
         }
         const chartContainer = this.chartContainer.nativeElement;
         this.chart
+            .createZoom(() => {
+            return d3.zoom().filter((e) => {
+                const element = e.srcElement;
+                if (element.classList.contains('no-zoom')) {
+                    return false;
+                }
+                return true;
+            });
+        })
             .container(chartContainer)
-            .data(this.dataSource)
+            .data(this.dataSource())
             .nodeWidth(() => this.config.cardWidht)
-            .nodeHeight(() => this.config.cardHeight)
+            .nodeHeight((d) => {
+            return d.data.expanded && this.config.cardExpandedHeight
+                ? this.config.cardExpandedHeight
+                : this.config.cardHeight;
+        })
             .compact(false)
             .buttonContent(({ node, state }) => {
-            return `<div style="color:#FFFFFF; border-radius:100%;font-size:5px;margin:auto auto;background-color:#64748B;"> 
-            <span>
-            ${node.children && node.children.length > 0
+            return `<div style="color:#FFFFFF; border-radius:100%;font-size:5px;margin:auto auto;background-color:#64748B;">
+          <span>
+          ${node.children && node.children.length > 0
                 ? `<i class="material-symbols-outlined">
-keyboard_arrow_up
-</i>`
+              keyboard_arrow_up
+              </i>`
                 : `<i class="material-symbols-outlined">
-keyboard_arrow_down
-</i>`}
-            </span>
-          </div>`;
-        })
-            .nodeUpdate(function (d) {
+              keyboard_arrow_down
+            </i>`}
+          </span>
+            </div>`;
         })
             .linkUpdate((node, index, nodes) => {
             d3.select(nodes[index])
                 .attr('stroke-width', this.config.conectionWidth || '2px')
-                .style('stroke', this.config.connectionColor || '#d6d6d6').style('backgroundColor', 'red');
+                .style('stroke', this.config.connectionColor || '#d6d6d6');
         })
             .nodeContent((d) => {
-            if (!this.templateFuncion) {
-                if (d.data.template) {
-                    const jsTemplate = this.stringToTemplateLiteral(d.data.template);
-                    var templateConverter = new Function('data', 'return' + jsTemplate);
-                    var x = templateConverter(d.data.data);
-                }
-                else {
-                    const jsTemplate = this.stringToTemplateLiteral(this.config.templateItem);
-                    var templateConverter = new Function('data', 'return' + jsTemplate);
-                    var x = templateConverter(d.data.data);
-                }
-            }
-            else {
-                var x = this.generateTemplate(d);
-            }
+            const node = {
+                data: d.data.data,
+                children: d.children,
+                id: d.data.id,
+                parentId: d.data.parentId,
+                expanded: d.data.expanded,
+                orgConfig: d.orgConfig,
+            };
+            const x = this.renderNodeTemplate(node);
             return x;
+        })
+            .nodeUpdate(function (d) {
+            d.data.orgConfig.clicks.forEach((click) => {
+                d3.select(this)
+                    .select(click)
+                    .on('click', (e, d) => {
+                    const dados = d;
+                    const node = {
+                        data: dados.data.data,
+                        children: dados.children,
+                        id: dados.data.id,
+                        parentId: dados.data.parentId,
+                        expanded: dados.data.expanded,
+                        orgConfig: dados.orgConfig,
+                    };
+                    window.dispatchEvent(new CustomEvent('KvOrgChart_NodeClick', {
+                        detail: {
+                            node,
+                            seletor: click,
+                        },
+                    }));
+                });
+            });
         })
             .defaultFont('Roboto')
             .render();
         this.chart.expandAll();
     }
-    stringToTemplateLiteral(string) {
-        const convertedTemplate = string.replace(/\{\{([^}]*)\}\}/g, '${$1}');
-        return '`' + convertedTemplate + '`';
+    ngOnChanges(changes) {
+        if (changes['dataSource']) {
+            this.iniciarChart();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvOrgchartComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: KvOrgchartComponent, selector: "kv-orgchart", inputs: { dataSource: "dataSource", config: "config", template: "template", nodeTemplate: "nodeTemplate", generateTemplate: "generateTemplate", templateFuncion: "templateFuncion", corDeFundo: "corDeFundo" }, viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #chartContainer id=\"chartContainer\" [ngClass]=\"{'backGround': true}\">\r\n\r\n\r\n  <div class=\"div-botoes w-full flex gap-1\" >\r\n\r\n\r\n    <span *ngIf=\"!mostraMenu\" class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n    (click)=\"mostraMenu = !mostraMenu\" pTooltip=\"Expandir menu\">menu</span>\r\n\r\n\r\n\r\n    <span *ngIf=\"mostraMenu\" class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n    (click)=\"mostraMenu = !mostraMenu\" pTooltip=\"Recolher menu\">menu_open</span>\r\n\r\n    <div *ngIf=\"mostraMenu\">\r\n      <span class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n      (click)=\"chart.zoomIn()\" pTooltip=\"Zoom +\">zoom_in</span>\r\n    <span class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n      (click)=\"chart.zoomOut()\" pTooltip=\"Zoom -\">zoom_out</span>\r\n\r\n    <span class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n      (click)=\"chart.collapseAll()\" pTooltip=\"Recolher\">expand_less</span>\r\n\r\n    <span class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n      (click)=\"chart.expandAll()\" pTooltip=\"Expandir\">expand_more</span>\r\n\r\n\r\n    <!-- <span class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n      (click)=\"compactSwap()\" pTooltip=\"Compactar\">cached</span> -->\r\n\r\n    <span class=\"material-icons surface-300 shadow-4 p-1 m-2 border-circle cursor-pointer\"\r\n      (click)=\"chart.fit().render()\" pTooltip=\"Centralizar\">\r\n      filter_center_focus\r\n    </span>\r\n\r\n    <span class=\"material-icons surface-300 shadow-4 p-1 m-2 border-circle cursor-pointer\"\r\n      (click)=\"chart.fullscreen('#chartContainer')\" pTooltip=\"Tela cheia\" >\r\n      fullscreen\r\n    </span>\r\n\r\n    </div>\r\n\r\n\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://fonts.googleapis.com/icon?family=Material+Icons\"\r\n/>\r\n\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0\"\r\n/>\r\n", styles: ["#chartContainer{height:100%;overflow:hidden}:host ::ng-deep #chartContainer svg.svg-chart-container{height:100%!important;position:relative;width:100%;top:-56px;z-index:0;background-color:#fff}.div-botoes{z-index:1;width:100%;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
+    //#endregion
+    // #region Renderização de template
+    renderNodeTemplate(node) {
+        this.viewContainerRef.clear();
+        const view = this.viewContainerRef.createEmbeddedView(this.nodeTemplate, {
+            node: node,
+        });
+        this.cdr.detectChanges();
+        return view.rootNodes[0].outerHTML;
+    }
+    iniciarHandlersDeEventos() {
+        this.nodeClickSubscription = fromEvent(window, 'KvOrgChart_NodeClick').subscribe((event) => {
+            this.emitirClick(event.detail.node, event.detail.seletor);
+        });
+        this.nodeAddSubscription = this.service.nodeAdd$.subscribe((node) => {
+            this.adicionarNode(node);
+        });
+        this.nodeRemoveSubscription = this.service.nodeRemove$.subscribe((id) => {
+            this.removerNode(id);
+        });
+    }
+    ngOnDestroy() {
+        this.nodeClickSubscription.unsubscribe();
+        this.nodeAddSubscription.unsubscribe();
+        this.nodeRemoveSubscription.unsubscribe();
+    }
+    emitirClick(node, seletorCss) {
+        const event = {
+            node: node,
+            seletorCss: seletorCss ?? '',
+        };
+        this.onNodeClick.emit(event);
+    }
+    adicionarNode(node) {
+        const arr = [...this.dataSource(), node];
+        this.dataSource.set(arr);
+        this.iniciarChart();
+    }
+    removerNode(id) {
+        const indPai = this.dataSource().some((x) => x.parentId == id);
+        if (indPai) {
+            alert('Não é possível remover um nó que possui filhos');
+        }
+        else {
+            const arr = this.dataSource().filter((x) => x.id != id);
+            this.dataSource.set(arr);
+            this.iniciarChart();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvOrgchartComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: OrgChartService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.8", type: KvOrgchartComponent, selector: "kv-orgchart", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dataSource: "dataSourceChange", onNodeClick: "onNodeClick" }, viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true }, { propertyName: "viewContainerRef", first: true, predicate: ["nodeTemplate"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div #chartContainer id=\"chartContainer\" [ngClass]=\"{'backGround': true}\">\r\n\r\n\r\n  <div class=\"div-botoes w-full flex gap-1\" >\r\n\r\n\r\n    <span *ngIf=\"!mostraMenu\" class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n    (click)=\"mostraMenu = !mostraMenu\" pTooltip=\"Expandir menu\">menu</span>\r\n\r\n\r\n\r\n    <span *ngIf=\"mostraMenu\" class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n    (click)=\"mostraMenu = !mostraMenu\" pTooltip=\"Recolher menu\">menu_open</span>\r\n\r\n    <div *ngIf=\"mostraMenu\">\r\n      <span class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n      (click)=\"chart.zoomIn()\" pTooltip=\"Zoom +\">zoom_in</span>\r\n    <span class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n      (click)=\"chart.zoomOut()\" pTooltip=\"Zoom -\">zoom_out</span>\r\n\r\n    <span class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n      (click)=\"chart.collapseAll()\" pTooltip=\"Recolher\">expand_less</span>\r\n\r\n    <span class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n      (click)=\"chart.expandAll()\" pTooltip=\"Expandir\">expand_more</span>\r\n\r\n\r\n    <span class=\"material-icons surface-300 shadow-4 p-1 m-2 border-circle cursor-pointer\"\r\n      (click)=\"chart.fit().render()\" pTooltip=\"Centralizar\">\r\n      filter_center_focus\r\n    </span>\r\n\r\n    <span class=\"material-icons surface-300 shadow-4 p-1 m-2 border-circle cursor-pointer\"\r\n      (click)=\"chart.fullscreen('#chartContainer')\" pTooltip=\"Tela cheia\" >\r\n      fullscreen\r\n    </span>\r\n\r\n    </div>\r\n\r\n\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://fonts.googleapis.com/icon?family=Material+Icons\"\r\n/>\r\n\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0\"\r\n/>\r\n\r\n<div style=\"display: none;\">\r\n  <ng-template #nodeTemplate let-node>\r\n    <div class=\"node-content\">\r\n      erro\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n", styles: ["#chartContainer{height:100%;overflow:hidden}:host ::ng-deep #chartContainer svg.svg-chart-container{height:100%!important;position:relative;width:100%;top:-56px;z-index:0;background-color:#fff}.div-botoes{z-index:1;width:100%;position:relative}:host ::ng-deep .p-organizationChart{overflow:hidden}svg{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvOrgchartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kv-orgchart', template: "<div #chartContainer id=\"chartContainer\" [ngClass]=\"{'backGround': true}\">\r\n\r\n\r\n  <div class=\"div-botoes w-full flex gap-1\" >\r\n\r\n\r\n    <span *ngIf=\"!mostraMenu\" class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n    (click)=\"mostraMenu = !mostraMenu\" pTooltip=\"Expandir menu\">menu</span>\r\n\r\n\r\n\r\n    <span *ngIf=\"mostraMenu\" class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n    (click)=\"mostraMenu = !mostraMenu\" pTooltip=\"Recolher menu\">menu_open</span>\r\n\r\n    <div *ngIf=\"mostraMenu\">\r\n      <span class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n      (click)=\"chart.zoomIn()\" pTooltip=\"Zoom +\">zoom_in</span>\r\n    <span class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n      (click)=\"chart.zoomOut()\" pTooltip=\"Zoom -\">zoom_out</span>\r\n\r\n    <span class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n      (click)=\"chart.collapseAll()\" pTooltip=\"Recolher\">expand_less</span>\r\n\r\n    <span class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n      (click)=\"chart.expandAll()\" pTooltip=\"Expandir\">expand_more</span>\r\n\r\n\r\n    <!-- <span class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n      (click)=\"compactSwap()\" pTooltip=\"Compactar\">cached</span> -->\r\n\r\n    <span class=\"material-icons surface-300 shadow-4 p-1 m-2 border-circle cursor-pointer\"\r\n      (click)=\"chart.fit().render()\" pTooltip=\"Centralizar\">\r\n      filter_center_focus\r\n    </span>\r\n\r\n    <span class=\"material-icons surface-300 shadow-4 p-1 m-2 border-circle cursor-pointer\"\r\n      (click)=\"chart.fullscreen('#chartContainer')\" pTooltip=\"Tela cheia\" >\r\n      fullscreen\r\n    </span>\r\n\r\n    </div>\r\n\r\n\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://fonts.googleapis.com/icon?family=Material+Icons\"\r\n/>\r\n\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0\"\r\n/>\r\n", styles: ["#chartContainer{height:100%;overflow:hidden}:host ::ng-deep #chartContainer svg.svg-chart-container{height:100%!important;position:relative;width:100%;top:-56px;z-index:0;background-color:#fff}.div-botoes{z-index:1;width:100%;position:relative}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { chartContainer: [{
+            args: [{ selector: 'kv-orgchart', template: "<div #chartContainer id=\"chartContainer\" [ngClass]=\"{'backGround': true}\">\r\n\r\n\r\n  <div class=\"div-botoes w-full flex gap-1\" >\r\n\r\n\r\n    <span *ngIf=\"!mostraMenu\" class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n    (click)=\"mostraMenu = !mostraMenu\" pTooltip=\"Expandir menu\">menu</span>\r\n\r\n\r\n\r\n    <span *ngIf=\"mostraMenu\" class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n    (click)=\"mostraMenu = !mostraMenu\" pTooltip=\"Recolher menu\">menu_open</span>\r\n\r\n    <div *ngIf=\"mostraMenu\">\r\n      <span class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n      (click)=\"chart.zoomIn()\" pTooltip=\"Zoom +\">zoom_in</span>\r\n    <span class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n      (click)=\"chart.zoomOut()\" pTooltip=\"Zoom -\">zoom_out</span>\r\n\r\n    <span class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n      (click)=\"chart.collapseAll()\" pTooltip=\"Recolher\">expand_less</span>\r\n\r\n    <span class=\"surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer\"\r\n      (click)=\"chart.expandAll()\" pTooltip=\"Expandir\">expand_more</span>\r\n\r\n\r\n    <span class=\"material-icons surface-300 shadow-4 p-1 m-2 border-circle cursor-pointer\"\r\n      (click)=\"chart.fit().render()\" pTooltip=\"Centralizar\">\r\n      filter_center_focus\r\n    </span>\r\n\r\n    <span class=\"material-icons surface-300 shadow-4 p-1 m-2 border-circle cursor-pointer\"\r\n      (click)=\"chart.fullscreen('#chartContainer')\" pTooltip=\"Tela cheia\" >\r\n      fullscreen\r\n    </span>\r\n\r\n    </div>\r\n\r\n\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://fonts.googleapis.com/icon?family=Material+Icons\"\r\n/>\r\n\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0\"\r\n/>\r\n\r\n<div style=\"display: none;\">\r\n  <ng-template #nodeTemplate let-node>\r\n    <div class=\"node-content\">\r\n      erro\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n", styles: ["#chartContainer{height:100%;overflow:hidden}:host ::ng-deep #chartContainer svg.svg-chart-container{height:100%!important;position:relative;width:100%;top:-56px;z-index:0;background-color:#fff}.div-botoes{z-index:1;width:100%;position:relative}:host ::ng-deep .p-organizationChart{overflow:hidden}svg{width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: OrgChartService }], propDecorators: { config: [{
+                type: Input
+            }], chartContainer: [{
                 type: ViewChild,
                 args: ['chartContainer']
-            }], dataSource: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], template: [{
-                type: Input
+            }], viewContainerRef: [{
+                type: ViewChild,
+                args: ['nodeTemplate', { read: ViewContainerRef }]
             }], nodeTemplate: [{
                 type: Input
-            }], generateTemplate: [{
-                type: Input
-            }], templateFuncion: [{
-                type: Input
-            }], corDeFundo: [{
-                type: Input
+            }], onNodeClick: [{
+                type: Output
             }] } });
 
 class KvOrgchartModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvOrgchartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: KvOrgchartModule, declarations: [KvOrgchartComponent], imports: [CommonModule,
-            PrimeNgModule], exports: [KvOrgchartComponent] }); }
+            PrimeNgModule,
+            kvErrorModule,
+            PrimeNgModule,
+            OrganizationChartModule], exports: [KvOrgchartComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvOrgchartModule, imports: [CommonModule,
-            PrimeNgModule] }); }
+            PrimeNgModule,
+            kvErrorModule,
+            PrimeNgModule,
+            OrganizationChartModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvOrgchartModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
-                        PrimeNgModule
+                        PrimeNgModule,
+                        kvErrorModule,
+                        PrimeNgModule,
+                        OrganizationChartModule
                     ],
                     declarations: [KvOrgchartComponent],
                     exports: [KvOrgchartComponent]
@@ -8991,5 +9138,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseApiService, BaseChartComponent, BaseComponent, BaseComponentButton, BaseComponentCrud, BaseComponentCrudForm, BaseComponentCrudList, BaseComponentDropDown, BaseComponentDropDownExternal, BaseComponentInput, BaseComponentMultiSelect, BasecomponentTable, BreadcrumbsService, CapitalizePipe, ChatService, ComponentProviders, ComponentService, CpfCnpjPipe, DocsService, DragDirective, DynamicInputDirective, FormService, ImageCutterService, ImagensService, KeevoComponentsModule, KeevoValidators, KvAvatarComponent, KvAvatarModule, KvButtonComponent, KvButtonModule, KvButtonPersonalizeComponent, KvButtonPopupComponent, KvButtonSecondaryComponent, KvButtonSuccessComponent, KvButtonsModule, KvCarouselComponent, KvCarouselModule, KvChartComponent, KvChartModule, KvCheckComponent, KvDropdownComponent, KvEditorComponent, KvErrorComponent, KvFileUploadComponent, KvFileUploadModule, KvFileViewerComponent, KvFileViewerModule, KvFilterCardComponent, KvFilterCardModule, KvFilterFieldsetComponent, KvFilterFieldsetModule, KvGIconComponent, KvGIconModule, KvHomeCardComponent, KvHomeCardModule, KvImageUploadComponent, KvImageUploadModule, KvInputCalendarComponent, KvInputMaskComponent, KvInputNumberComponent, KvInputPasswordComponent, KvInputTextCheckboxComponent, KvInputTextComponent, KvInputTextareaComponent, KvInputTimeComponent, KvInputsModule, KvLayoutComponent, KvLayoutModule, KvLoaderComponent, KvLoaderModule, KvLoaderService, KvLoginComponent, KvLoginModule, KvModalComponent, KvModalModule, KvMultiSelectComponent, KvOrgchartComponent, KvOrgchartModule, KvPageFormComponent, KvPageFormModule, KvPageStepperComponent, KvPageStepperodule, KvPickListComponent, KvPickListModule, KvProgressBarModule, KvRadioGroupComponent, KvReportComponent, KvReportModule, KvSelectButtonComponent, KvSelectButtonsComponent, KvStepperComponent, KvStepperModule, KvSwitchComponent, KvTableComponent, KvTableEditComponent, KvTableEditModule, KvTableExpandableComponent, KvTableExpandableModule, KvTableModule, KvTreeViewComponent, KvTreetableComponent, KvTreetableModule, KvWorkspaceModule, KvtreeViewModule, MaskPipe, NotificationService, ObjectService, PeriodosChart, PipesModule, PrimeNgModule, ProgressBarComponent, TablePaginate, TelefonePipe, TemplateDirective, TranslatePrimeng, WorkspaceComponent, getOrExecute, kvErrorModule, loading, mapToMenuItem };
+export { BaseApiService, BaseChartComponent, BaseComponent, BaseComponentButton, BaseComponentCrud, BaseComponentCrudForm, BaseComponentCrudList, BaseComponentDropDown, BaseComponentDropDownExternal, BaseComponentInput, BaseComponentMultiSelect, BasecomponentTable, BreadcrumbsService, CapitalizePipe, ChatService, ComponentProviders, ComponentService, CpfCnpjPipe, DocsService, DragDirective, DynamicInputDirective, FormService, ImageCutterService, ImagensService, KeevoComponentsModule, KeevoValidators, KvAvatarComponent, KvAvatarModule, KvButtonComponent, KvButtonModule, KvButtonPersonalizeComponent, KvButtonPopupComponent, KvButtonSecondaryComponent, KvButtonSuccessComponent, KvButtonsModule, KvCarouselComponent, KvCarouselModule, KvChartComponent, KvChartModule, KvCheckComponent, KvDropdownComponent, KvEditorComponent, KvErrorComponent, KvFileUploadComponent, KvFileUploadModule, KvFileViewerComponent, KvFileViewerModule, KvFilterCardComponent, KvFilterCardModule, KvFilterFieldsetComponent, KvFilterFieldsetModule, KvGIconComponent, KvGIconModule, KvHomeCardComponent, KvHomeCardModule, KvImageUploadComponent, KvImageUploadModule, KvInputCalendarComponent, KvInputMaskComponent, KvInputNumberComponent, KvInputPasswordComponent, KvInputTextCheckboxComponent, KvInputTextComponent, KvInputTextareaComponent, KvInputTimeComponent, KvInputsModule, KvLayoutComponent, KvLayoutModule, KvLoaderComponent, KvLoaderModule, KvLoaderService, KvLoginComponent, KvLoginModule, KvModalComponent, KvModalModule, KvMultiSelectComponent, KvOrgchartComponent, KvOrgchartModule, KvPageFormComponent, KvPageFormModule, KvPageStepperComponent, KvPageStepperodule, KvPickListComponent, KvPickListModule, KvProgressBarModule, KvRadioGroupComponent, KvReportComponent, KvReportModule, KvSelectButtonComponent, KvSelectButtonsComponent, KvStepperComponent, KvStepperModule, KvSwitchComponent, KvTableComponent, KvTableEditComponent, KvTableEditModule, KvTableExpandableComponent, KvTableExpandableModule, KvTableModule, KvTreeViewComponent, KvTreetableComponent, KvTreetableModule, KvWorkspaceModule, KvtreeViewModule, MaskPipe, NotificationService, ObjectService, OrgChartService, PeriodosChart, PipesModule, PrimeNgModule, ProgressBarComponent, TablePaginate, TelefonePipe, TemplateDirective, TranslatePrimeng, WorkspaceComponent, getOrExecute, kvErrorModule, loading, mapToMenuItem };
 //# sourceMappingURL=keevo-components.mjs.map