keevo-components 2.0.172 → 2.0.174

package/fesm2022/keevo-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewChild, Injectable, signal, Directive, Pipe, ViewChildren, ContentChildren, forwardRef, viewChild, input, model, output, effect, computed, HostListener, TemplateRef, ContentChild, NgModule, untracked, inject, ChangeDetectionStrategy, ViewContainerRef, HostBinding, contentChildren, Injector } from '@angular/core';
+import { EventEmitter, Component, Input, Output, ViewChild, Injectable, signal, Directive, Pipe, ViewChildren, ContentChildren, forwardRef, viewChild, input, model, output, effect, computed, HostListener, TemplateRef, ContentChild, NgModule, untracked, inject, ChangeDetectionStrategy, ViewContainerRef, HostBinding, contentChildren, Injector, ChangeDetectorRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass, DatePipe } from '@angular/common';
 import * as i1$1 from 'primeng/button';
@@ -13282,41 +13282,91 @@ class NoArvoreComponent {
     constructor() {
         this.noPlano = input.required();
         this.noAlternado = new EventEmitter();
+        this.actionExecuted = new EventEmitter();
+        this._cachedItems = null;
+        this._lastActionsLength = -1;
+        this._lastActionsLabels = '';
+        this._cachedStyles = {};
+    }
+    ngOnDestroy() {
+        this._cachedItems = null;
+        this._cachedStyles = {};
+        this._lastActionsLength = -1;
+        this._lastActionsLabels = '';
     }
     get items() {
-        return this.noPlano().dadosOriginais.actions || [];
+        const actionsOriginais = this.noPlano().dadosOriginais.actions || [];
+        const currentLength = actionsOriginais.length;
+        const currentLabels = actionsOriginais.map(a => a.label).join('|');
+        if (this._lastActionsLength !== currentLength || this._lastActionsLabels !== currentLabels) {
+            this._cachedItems = actionsOriginais.map(action => ({
+                ...action,
+                command: undefined
+            }));
+            this._lastActionsLength = currentLength;
+            this._lastActionsLabels = currentLabels;
+        }
+        return this._cachedItems || [];
+    }
+    getOriginalCommand(actionLabel) {
+        const actionsOriginais = this.noPlano().dadosOriginais.actions || [];
+        const action = actionsOriginais.find(a => a.label === actionLabel);
+        return action?.command;
     }
     alternarExpansao() {
         this.noAlternado.emit(this.noPlano());
     }
+    onActionClick(item, event) {
+        this.actionExecuted.emit(this.noPlano());
+        const originalCommand = this.getOriginalCommand(item.label);
+        if (originalCommand) {
+            originalCommand(event);
+        }
+        event.stopPropagation();
+        event.preventDefault();
+    }
     ehNoPai() {
         const no = this.noPlano().dadosOriginais;
         return !!(no.filhos && no.filhos.length > 0);
     }
     obterEstilosIcone(no) {
+        const cacheKey = `${no.rotulo}:${!!no.filhos?.length}:${no.ativo}:${no.cor}`;
+        if (this._cachedStyles[cacheKey]) {
+            return this._cachedStyles[cacheKey];
+        }
         const pai = no.filhos && no.filhos.length > 0;
         const corPadrao = '#2f80ed';
         const corFinal = no.cor || corPadrao;
+        let estilos;
         if (no.ativo === false) {
-            return pai
+            estilos = pai
                 ? { 'background-color': '#f2f2f2', 'color': '#bdbdbd' }
                 : { 'background-color': 'transparent', 'color': '#bdbdbd' };
         }
-        return pai
-            ? { 'background-color': corFinal, 'color': 'white' }
-            : { 'background-color': 'transparent', 'color': corFinal };
+        else {
+            estilos = pai
+                ? { 'background-color': corFinal, 'color': 'white' }
+                : { 'background-color': 'transparent', 'color': corFinal };
+        }
+        if (Object.keys(this._cachedStyles).length < 100) {
+            this._cachedStyles[cacheKey] = estilos;
+        }
+        return estilos;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: NoArvoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: NoArvoreComponent, isStandalone: true, selector: "no-arvore", inputs: { noPlano: { classPropertyName: "noPlano", publicName: "noPlano", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { noAlternado: "noAlternado" }, ngImport: i0, template: "<li \n  class=\"no-container\"\n  [class.inativo]=\"noPlano().dadosOriginais.ativo === false\">\n\n  <div class=\"linhas-guia\">\n    @for(i of [].constructor(noPlano().nivel); track i) {\n      <div class=\"linha-vertical\"></div>\n    }\n  </div>\n\n  <div \n    class=\"no-conteudo\" \n    [class.is-last-child]=\"noPlano().isLast\"\n    (click)=\"alternarExpansao()\">\n\n    <div class=\"container-icone\" [ngStyle]=\"obterEstilosIcone(noPlano().dadosOriginais)\">\n      <span class=\"material-symbols-outlined text-lg no-icone\">\n        {{ noPlano().dadosOriginais.icone }}\n      </span>\n    </div>\n\n    <span \n      class=\"no-rotulo\"\n      [class.font-bold]=\"ehNoPai()\"\n      [class.text-500]=\"ehNoPai()\">\n      {{ noPlano().dadosOriginais.rotulo }}\n    </span>\n\n    @if (items.length > 0) {\n      <span\n        class=\"material-symbols-outlined flex text-lg ml-2 cursor-pointer icone-arrow\"\n        (click)=\"$event.stopPropagation()\"\n        (click)=\"menu.toggle($event)\"\n      >\n        more_horiz\n      </span>\n\n      <p-tieredMenu\n        #menu\n        [popup]=\"true\"\n        [model]=\"items\"\n        appendTo=\"body\"\n      >\n        <ng-template let-item pTemplate=\"item\">\n          <div\n            [pTooltip]=\"item.tooltip\"\n            tooltipPosition=\"left\"\n            class=\"cursor-pointer\"\n          >\n            <span class=\"text-xs\">\n              {{ item.label }}\n            </span>\n          </div>\n        </ng-template>\n      </p-tieredMenu>\n    }\n    \n  </div>\n  \n  \n</li>\n\n", styles: [":host{--ident-size: 2rem;--line-color: #e0e0e0;--line-width: 1px}.no-container{display:flex;align-items:stretch;position:relative}.linhas-guia{display:flex;flex-shrink:0;position:relative}.linha-vertical{width:var(--ident-size);position:relative}.linha-vertical:before{content:\"\";position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%);width:var(--line-width);background-color:var(--line-color)}.no-conteudo{display:flex;align-items:center;cursor:pointer;position:relative;padding:4px 4px 4px 0}.no-conteudo:before{content:\"\";position:absolute;left:calc(var(--ident-size) / -2);top:50%;width:calc(var(--ident-size) / 2);height:var(--line-width);background-color:var(--line-color)}.no-conteudo:hover{background-color:#0000000a;border-radius:4px}.is-last-child~.linhas-guia .linha-vertical:last-child:before,.is-last-child .linhas-guia .linha-vertical:last-child:before{height:50%}:host:first-child .no-conteudo:before,:host:first-child .linhas-guia{display:none}.no-seta{transition:transform .25s ease-in-out;color:#555;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:24px}.no-seta.rotacionado{transform:rotate(0)}.no-seta:not(.rotacionado){transform:rotate(-90deg)}.container-icone{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:3px;margin-right:8px;flex-shrink:0}.container-icone .no-icone{font-size:18px}.no-rotulo{font-family:system-ui,sans-serif;color:#333}.inativo .no-rotulo,.inativo .no-seta{color:#bdbdbd}.icone-arrow{font-weight:500;color:rgb(var(--kv-color-system),.75);transition:all .4s;height:15px;opacity:0;transition:opacity .2s ease,transform .2s ease;padding:1px}.icone-arrow:hover{background:#0000001a;border-radius:4px}.no-conteudo:hover .icone-arrow{opacity:1}::ng-deep .p-tieredmenu{padding:.5rem!important}::ng-deep .p-tieredmenu .p-tieredmenu-root-list{font-size:.75rem!important}::ng-deep .p-tieredmenu .p-menuitem>.p-menuitem-content{padding:.5rem}::ng-deep p-tieredmenusub .p-disabled *:active{pointer-events:none!important;font-size:.75rem!important;padding:.5rem!important}::ng-deep .p-disabled *{pointer-events:auto!important}.icon-more{font-weight:500;font-size:1.4rem!important;color:rgb(var(--kv-color-system),.75);transition:all .4s}.icon-more:hover,.icon-more:focus{color:#5e5e5e;transition:color .3s,transform .3s;background-color:#eaeaea;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TieredMenuModule }, { kind: "component", type: i13.TieredMenu, selector: "p-tieredMenu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "autoDisplay", "showTransitionOptions", "hideTransitionOptions", "id", "ariaLabel", "ariaLabelledBy", "disabled", "tabindex"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i2$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: NoArvoreComponent, isStandalone: true, selector: "no-arvore", inputs: { noPlano: { classPropertyName: "noPlano", publicName: "noPlano", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { noAlternado: "noAlternado", actionExecuted: "actionExecuted" }, ngImport: i0, template: "<li \n  class=\"no-container\"\n  [class.inativo]=\"noPlano().dadosOriginais.ativo === false\">\n\n  <div class=\"linhas-guia\">\n    @for(i of [].constructor(noPlano().nivel); track i) {\n      <div class=\"linha-vertical\"></div>\n    }\n  </div>\n\n  <div \n    class=\"no-conteudo\" \n    [class.is-last-child]=\"noPlano().isLast\"\n    (click)=\"alternarExpansao()\">\n\n    <div class=\"container-icone\" [ngStyle]=\"obterEstilosIcone(noPlano().dadosOriginais)\">\n      <span class=\"material-symbols-outlined text-lg no-icone\">\n        {{ noPlano().dadosOriginais.icone }}\n      </span>\n    </div>\n\n    <span \n      class=\"no-rotulo\"\n      [class.font-bold]=\"ehNoPai()\"\n      [class.text-500]=\"ehNoPai()\">\n      {{ noPlano().dadosOriginais.rotulo }}\n    </span>\n\n    @if (items.length > 0) {\n      <span\n        class=\"material-symbols-outlined flex text-lg ml-2 cursor-pointer icone-arrow\"\n        (click)=\"$event.stopPropagation()\"\n        (click)=\"menu.toggle($event)\"\n      >\n        more_horiz\n      </span>\n\n      <p-tieredMenu\n        #menu\n        [popup]=\"true\"\n        [model]=\"items\"\n        appendTo=\"body\"\n      >\n        <ng-template let-item pTemplate=\"item\">\n          <div\n            [pTooltip]=\"item.tooltip\"\n            tooltipPosition=\"left\"\n            class=\"cursor-pointer\"\n            (click)=\"onActionClick(item, $event)\"\n          >\n            <span class=\"text-xs\">\n              {{ item.label }}\n            </span>\n          </div>\n        </ng-template>\n      </p-tieredMenu>\n    }\n    \n  </div>\n  \n  \n</li>\n\n", styles: [":host{--ident-size: 2rem;--line-color: #e0e0e0;--line-width: 1px}.no-container{display:flex;align-items:stretch;position:relative}.linhas-guia{display:flex;flex-shrink:0;position:relative}.linha-vertical{width:var(--ident-size);position:relative}.linha-vertical:before{content:\"\";position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%);width:var(--line-width);background-color:var(--line-color)}.no-conteudo{display:flex;align-items:center;cursor:pointer;position:relative;padding:4px 4px 4px 0}.no-conteudo:before{content:\"\";position:absolute;left:calc(var(--ident-size) / -2);top:50%;width:calc(var(--ident-size) / 2);height:var(--line-width);background-color:var(--line-color)}.no-conteudo:hover{background-color:#0000000a;border-radius:4px}.is-last-child~.linhas-guia .linha-vertical:last-child:before,.is-last-child .linhas-guia .linha-vertical:last-child:before{height:50%}:host:first-child .no-conteudo:before,:host:first-child .linhas-guia{display:none}.no-seta{transition:transform .25s ease-in-out;color:#555;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:24px}.no-seta.rotacionado{transform:rotate(0)}.no-seta:not(.rotacionado){transform:rotate(-90deg)}.container-icone{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:3px;margin-right:8px;flex-shrink:0}.container-icone .no-icone{font-size:18px}.no-rotulo{font-family:system-ui,sans-serif;color:#333}.inativo .no-rotulo,.inativo .no-seta{color:#bdbdbd}.icone-arrow{font-weight:500;color:rgb(var(--kv-color-system),.75);transition:all .4s;height:15px;opacity:0;transition:opacity .2s ease,transform .2s ease;padding:1px}.icone-arrow:hover{background:#0000001a;border-radius:4px}.no-conteudo:hover .icone-arrow{opacity:1}::ng-deep .p-tieredmenu{padding:.5rem!important}::ng-deep .p-tieredmenu .p-tieredmenu-root-list{font-size:.75rem!important}::ng-deep .p-tieredmenu .p-menuitem>.p-menuitem-content{padding:.5rem}::ng-deep p-tieredmenusub .p-disabled *:active{pointer-events:none!important;font-size:.75rem!important;padding:.5rem!important}::ng-deep .p-disabled *{pointer-events:auto!important}.icon-more{font-weight:500;font-size:1.4rem!important;color:rgb(var(--kv-color-system),.75);transition:all .4s}.icon-more:hover,.icon-more:focus{color:#5e5e5e;transition:color .3s,transform .3s;background-color:#eaeaea;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TieredMenuModule }, { kind: "component", type: i13.TieredMenu, selector: "p-tieredMenu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "autoDisplay", "showTransitionOptions", "hideTransitionOptions", "id", "ariaLabel", "ariaLabelledBy", "disabled", "tabindex"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i2$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TooltipModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: NoArvoreComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'no-arvore', imports: [
                         CommonModule,
-                        TieredMenuModule
-                    ], template: "<li \n  class=\"no-container\"\n  [class.inativo]=\"noPlano().dadosOriginais.ativo === false\">\n\n  <div class=\"linhas-guia\">\n    @for(i of [].constructor(noPlano().nivel); track i) {\n      <div class=\"linha-vertical\"></div>\n    }\n  </div>\n\n  <div \n    class=\"no-conteudo\" \n    [class.is-last-child]=\"noPlano().isLast\"\n    (click)=\"alternarExpansao()\">\n\n    <div class=\"container-icone\" [ngStyle]=\"obterEstilosIcone(noPlano().dadosOriginais)\">\n      <span class=\"material-symbols-outlined text-lg no-icone\">\n        {{ noPlano().dadosOriginais.icone }}\n      </span>\n    </div>\n\n    <span \n      class=\"no-rotulo\"\n      [class.font-bold]=\"ehNoPai()\"\n      [class.text-500]=\"ehNoPai()\">\n      {{ noPlano().dadosOriginais.rotulo }}\n    </span>\n\n    @if (items.length > 0) {\n      <span\n        class=\"material-symbols-outlined flex text-lg ml-2 cursor-pointer icone-arrow\"\n        (click)=\"$event.stopPropagation()\"\n        (click)=\"menu.toggle($event)\"\n      >\n        more_horiz\n      </span>\n\n      <p-tieredMenu\n        #menu\n        [popup]=\"true\"\n        [model]=\"items\"\n        appendTo=\"body\"\n      >\n        <ng-template let-item pTemplate=\"item\">\n          <div\n            [pTooltip]=\"item.tooltip\"\n            tooltipPosition=\"left\"\n            class=\"cursor-pointer\"\n          >\n            <span class=\"text-xs\">\n              {{ item.label }}\n            </span>\n          </div>\n        </ng-template>\n      </p-tieredMenu>\n    }\n    \n  </div>\n  \n  \n</li>\n\n", styles: [":host{--ident-size: 2rem;--line-color: #e0e0e0;--line-width: 1px}.no-container{display:flex;align-items:stretch;position:relative}.linhas-guia{display:flex;flex-shrink:0;position:relative}.linha-vertical{width:var(--ident-size);position:relative}.linha-vertical:before{content:\"\";position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%);width:var(--line-width);background-color:var(--line-color)}.no-conteudo{display:flex;align-items:center;cursor:pointer;position:relative;padding:4px 4px 4px 0}.no-conteudo:before{content:\"\";position:absolute;left:calc(var(--ident-size) / -2);top:50%;width:calc(var(--ident-size) / 2);height:var(--line-width);background-color:var(--line-color)}.no-conteudo:hover{background-color:#0000000a;border-radius:4px}.is-last-child~.linhas-guia .linha-vertical:last-child:before,.is-last-child .linhas-guia .linha-vertical:last-child:before{height:50%}:host:first-child .no-conteudo:before,:host:first-child .linhas-guia{display:none}.no-seta{transition:transform .25s ease-in-out;color:#555;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:24px}.no-seta.rotacionado{transform:rotate(0)}.no-seta:not(.rotacionado){transform:rotate(-90deg)}.container-icone{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:3px;margin-right:8px;flex-shrink:0}.container-icone .no-icone{font-size:18px}.no-rotulo{font-family:system-ui,sans-serif;color:#333}.inativo .no-rotulo,.inativo .no-seta{color:#bdbdbd}.icone-arrow{font-weight:500;color:rgb(var(--kv-color-system),.75);transition:all .4s;height:15px;opacity:0;transition:opacity .2s ease,transform .2s ease;padding:1px}.icone-arrow:hover{background:#0000001a;border-radius:4px}.no-conteudo:hover .icone-arrow{opacity:1}::ng-deep .p-tieredmenu{padding:.5rem!important}::ng-deep .p-tieredmenu .p-tieredmenu-root-list{font-size:.75rem!important}::ng-deep .p-tieredmenu .p-menuitem>.p-menuitem-content{padding:.5rem}::ng-deep p-tieredmenusub .p-disabled *:active{pointer-events:none!important;font-size:.75rem!important;padding:.5rem!important}::ng-deep .p-disabled *{pointer-events:auto!important}.icon-more{font-weight:500;font-size:1.4rem!important;color:rgb(var(--kv-color-system),.75);transition:all .4s}.icon-more:hover,.icon-more:focus{color:#5e5e5e;transition:color .3s,transform .3s;background-color:#eaeaea;border-radius:50%}\n"] }]
+                        TieredMenuModule,
+                        TooltipModule
+                    ], template: "<li \n  class=\"no-container\"\n  [class.inativo]=\"noPlano().dadosOriginais.ativo === false\">\n\n  <div class=\"linhas-guia\">\n    @for(i of [].constructor(noPlano().nivel); track i) {\n      <div class=\"linha-vertical\"></div>\n    }\n  </div>\n\n  <div \n    class=\"no-conteudo\" \n    [class.is-last-child]=\"noPlano().isLast\"\n    (click)=\"alternarExpansao()\">\n\n    <div class=\"container-icone\" [ngStyle]=\"obterEstilosIcone(noPlano().dadosOriginais)\">\n      <span class=\"material-symbols-outlined text-lg no-icone\">\n        {{ noPlano().dadosOriginais.icone }}\n      </span>\n    </div>\n\n    <span \n      class=\"no-rotulo\"\n      [class.font-bold]=\"ehNoPai()\"\n      [class.text-500]=\"ehNoPai()\">\n      {{ noPlano().dadosOriginais.rotulo }}\n    </span>\n\n    @if (items.length > 0) {\n      <span\n        class=\"material-symbols-outlined flex text-lg ml-2 cursor-pointer icone-arrow\"\n        (click)=\"$event.stopPropagation()\"\n        (click)=\"menu.toggle($event)\"\n      >\n        more_horiz\n      </span>\n\n      <p-tieredMenu\n        #menu\n        [popup]=\"true\"\n        [model]=\"items\"\n        appendTo=\"body\"\n      >\n        <ng-template let-item pTemplate=\"item\">\n          <div\n            [pTooltip]=\"item.tooltip\"\n            tooltipPosition=\"left\"\n            class=\"cursor-pointer\"\n            (click)=\"onActionClick(item, $event)\"\n          >\n            <span class=\"text-xs\">\n              {{ item.label }}\n            </span>\n          </div>\n        </ng-template>\n      </p-tieredMenu>\n    }\n    \n  </div>\n  \n  \n</li>\n\n", styles: [":host{--ident-size: 2rem;--line-color: #e0e0e0;--line-width: 1px}.no-container{display:flex;align-items:stretch;position:relative}.linhas-guia{display:flex;flex-shrink:0;position:relative}.linha-vertical{width:var(--ident-size);position:relative}.linha-vertical:before{content:\"\";position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%);width:var(--line-width);background-color:var(--line-color)}.no-conteudo{display:flex;align-items:center;cursor:pointer;position:relative;padding:4px 4px 4px 0}.no-conteudo:before{content:\"\";position:absolute;left:calc(var(--ident-size) / -2);top:50%;width:calc(var(--ident-size) / 2);height:var(--line-width);background-color:var(--line-color)}.no-conteudo:hover{background-color:#0000000a;border-radius:4px}.is-last-child~.linhas-guia .linha-vertical:last-child:before,.is-last-child .linhas-guia .linha-vertical:last-child:before{height:50%}:host:first-child .no-conteudo:before,:host:first-child .linhas-guia{display:none}.no-seta{transition:transform .25s ease-in-out;color:#555;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:24px}.no-seta.rotacionado{transform:rotate(0)}.no-seta:not(.rotacionado){transform:rotate(-90deg)}.container-icone{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:3px;margin-right:8px;flex-shrink:0}.container-icone .no-icone{font-size:18px}.no-rotulo{font-family:system-ui,sans-serif;color:#333}.inativo .no-rotulo,.inativo .no-seta{color:#bdbdbd}.icone-arrow{font-weight:500;color:rgb(var(--kv-color-system),.75);transition:all .4s;height:15px;opacity:0;transition:opacity .2s ease,transform .2s ease;padding:1px}.icone-arrow:hover{background:#0000001a;border-radius:4px}.no-conteudo:hover .icone-arrow{opacity:1}::ng-deep .p-tieredmenu{padding:.5rem!important}::ng-deep .p-tieredmenu .p-tieredmenu-root-list{font-size:.75rem!important}::ng-deep .p-tieredmenu .p-menuitem>.p-menuitem-content{padding:.5rem}::ng-deep p-tieredmenusub .p-disabled *:active{pointer-events:none!important;font-size:.75rem!important;padding:.5rem!important}::ng-deep .p-disabled *{pointer-events:auto!important}.icon-more{font-weight:500;font-size:1.4rem!important;color:rgb(var(--kv-color-system),.75);transition:all .4s}.icon-more:hover,.icon-more:focus{color:#5e5e5e;transition:color .3s,transform .3s;background-color:#eaeaea;border-radius:50%}\n"] }]
         }], propDecorators: { noAlternado: [{
                 type: Output
+            }], actionExecuted: [{
+                type: Output
             }] } });
 
 class KvTreeEnvironmentComponent {
@@ -13329,19 +13379,34 @@ class KvTreeEnvironmentComponent {
         this.showButtonCollapsed = input(true);
         this.showAddButton = input(true);
         this.onAddClick = new EventEmitter();
+        this.onSelectedItem = new EventEmitter();
+        this.cdr = inject(ChangeDetectorRef);
         this.mapaDeExpansao = new Map();
+        this._cachedDados = null;
+        this._dadosHash = null;
+        this._cachedListaPlana = null;
+        this._listaPlanaHash = null;
         this.listaPlana = signal([]);
         this.iconCollapsed = signal('collapse_all');
         this.collapsedAll = signal(true);
+        this.selectedItem = signal(null);
         effect(() => {
             const estrutura = this.estruturaArvore();
             const dados = this.dadosArvore();
             const simples = this.nosSimples();
             const arvore = this.arvoreDeDados();
-            const temDados = estrutura.length > 0 || dados.length > 0 || simples.length > 0 || arvore.length > 0;
-            if (temDados) {
-                this.gerarListaPlana();
-                this.atualizarEstadoCollapseButton();
+            const dadosHash = this.criarHashDados(estrutura, dados, simples, arvore);
+            if (this._dadosHash !== dadosHash) {
+                this._dadosHash = dadosHash;
+                this.invalidarCache();
+                const temDados = estrutura.length > 0 || dados.length > 0 || simples.length > 0 || arvore.length > 0;
+                if (temDados) {
+                    this.gerarListaPlanaOtimizada();
+                    this.atualizarEstadoCollapseButton();
+                }
+                else {
+                    this.listaPlana.set([]);
+                }
             }
         }, { allowSignalWrites: true });
     }
@@ -13354,25 +13419,86 @@ class KvTreeEnvironmentComponent {
             return;
         const estadoAtual = this.mapaDeExpansao.get(noPlano.dadosOriginais.rotulo) ?? false;
         this.mapaDeExpansao.set(noPlano.dadosOriginais.rotulo, !estadoAtual);
-        this.gerarListaPlana();
-        this.atualizarEstadoCollapseButton();
+        this.forcarAtualizacaoLista();
     }
-    gerarListaPlana() {
-        const dados = this.obterDados();
-        const novaListaPlana = this.transformarParaListaPlana(dados);
+    forcarAtualizacaoLista() {
+        this._cachedListaPlana = null;
+        this._listaPlanaHash = null;
+        const dados = this.obterDadosOtimizado();
+        const novaListaPlana = this.transformarParaListaPlanaOtimizada(dados);
         this.listaPlana.set(novaListaPlana);
+        this.cdr.detectChanges();
+        setTimeout(() => {
+            const expansaoHash = Array.from(this.mapaDeExpansao.entries())
+                .sort(([a], [b]) => a.localeCompare(b))
+                .map(([k, v]) => `${k}:${v}`)
+                .join(',');
+            this._listaPlanaHash = `${this._dadosHash}:${expansaoHash}`;
+            this._cachedListaPlana = novaListaPlana;
+            this.cdr.detectChanges();
+            this.atualizarEstadoCollapseButton();
+        }, 0);
     }
-    obterDados() {
+    criarHashDados(estrutura, dados, simples, arvore) {
+        const estruturaHash = `e:${estrutura.length}:${estrutura.map(e => `${e.id}:${e.label}`).join(',')}`;
+        const dadosHash = `d:${dados.length}:${dados.map(d => `${d.id}`).join(',')}`;
+        const simplesHash = `s:${simples.length}:${simples.map(s => s.key).join(',')}`;
+        const arvoreHash = `a:${arvore.length}:${arvore.map(a => a.rotulo).join(',')}`;
+        return `${estruturaHash}|${dadosHash}|${simplesHash}|${arvoreHash}`;
+    }
+    invalidarCache() {
+        this._cachedDados = null;
+        this._cachedListaPlana = null;
+        this._listaPlanaHash = null;
+    }
+    gerarListaPlanaOtimizada() {
+        const dados = this.obterDadosOtimizado();
+        const expansaoHash = Array.from(this.mapaDeExpansao.entries())
+            .sort(([a], [b]) => a.localeCompare(b))
+            .map(([k, v]) => `${k}:${v}`)
+            .join(',');
+        const listaPlanaHash = `${this._dadosHash}:${expansaoHash}`;
+        if (this._listaPlanaHash === listaPlanaHash && this._cachedListaPlana) {
+            this.listaPlana.set(this._cachedListaPlana);
+            return;
+        }
+        const novaListaPlana = this.transformarParaListaPlanaOtimizada(dados);
+        this._cachedListaPlana = novaListaPlana;
+        this._listaPlanaHash = listaPlanaHash;
+        this.listaPlana.set(novaListaPlana);
+    }
+    onActionExecuted(noPlano) {
+        const dados = noPlano.dadosOriginais;
+        this.selectedItem.set(dados);
+        this.onSelectedItem.emit(dados);
+    }
+    gerarListaPlana() {
+        this.gerarListaPlanaOtimizada();
+    }
+    obterDadosOtimizado() {
+        if (this._cachedDados && this._dadosHash) {
+            return this._cachedDados;
+        }
         const estrutura = this.estruturaArvore();
         const dados = this.dadosArvore();
+        let resultado;
         if (estrutura && estrutura.length > 0) {
-            return this.combinarEstruturaComDados(estrutura, dados || []);
+            resultado = this.combinarEstruturaComDados(estrutura, dados || []);
         }
-        const nosSimples = this.nosSimples();
-        if (nosSimples && nosSimples.length > 0) {
-            return this.converterSimplesParaCompleto(nosSimples);
+        else {
+            const nosSimples = this.nosSimples();
+            if (nosSimples && nosSimples.length > 0) {
+                resultado = this.converterSimplesParaCompleto(nosSimples);
+            }
+            else {
+                resultado = this.arvoreDeDados();
+            }
         }
-        return this.arvoreDeDados();
+        this._cachedDados = resultado;
+        return resultado;
+    }
+    obterDados() {
+        return this.obterDadosOtimizado();
     }
     converterSimplesParaCompleto(nosSimples) {
         const mapa = new Map();
@@ -13406,21 +13532,26 @@ class KvTreeEnvironmentComponent {
         return raiz;
     }
     transformarParaListaPlana(nodes, nivel = 0) {
-        let lista = [];
+        return this.transformarParaListaPlanaOtimizada(nodes, nivel);
+    }
+    transformarParaListaPlanaOtimizada(nodes, nivel = 0) {
+        const lista = [];
         nodes.forEach((node, index) => {
             const rotulo = node.rotulo;
             const estaExpandido = this.mapaDeExpansao.get(rotulo) ?? (node.estaExpandido ?? false);
+            const temFilhos = !!(node.filhos && node.filhos.length > 0);
             const noPlano = {
                 id: rotulo,
                 nivel: nivel,
-                expansivel: !!node.filhos && node.filhos.length > 0,
+                expansivel: temFilhos,
                 estaExpandido: estaExpandido,
                 isLast: index === nodes.length - 1,
                 dadosOriginais: node
             };
             lista.push(noPlano);
-            if (estaExpandido && node.filhos) {
-                lista = lista.concat(this.transformarParaListaPlana(node.filhos, nivel + 1));
+            if (estaExpandido && temFilhos) {
+                const filhosPlanos = this.transformarParaListaPlanaOtimizada(node.filhos, nivel + 1);
+                lista.push(...filhosPlanos);
             }
         });
         return lista;
@@ -13431,27 +13562,40 @@ class KvTreeEnvironmentComponent {
     executeCollapsed() {
         const todosColapsados = this.collapsedAll();
         if (todosColapsados) {
-            this.expandirTodos();
+            this.expandirTodosOtimizado();
         }
         else {
-            this.colapsarTodos();
+            this.colapsarTodosOtimizado();
         }
-        this.gerarListaPlana();
-        this.atualizarEstadoCollapseButton();
+        this.forcarAtualizacaoLista();
     }
     expandirTodos() {
-        this.percorrerTodosNos(this.obterDados(), (node) => {
+        this.expandirTodosOtimizado();
+    }
+    colapsarTodos() {
+        this.colapsarTodosOtimizado();
+    }
+    expandirTodosOtimizado() {
+        const dados = this.obterDadosOtimizado();
+        const stack = [...dados];
+        while (stack.length > 0) {
+            const node = stack.pop();
             if (node.filhos && node.filhos.length > 0) {
                 this.mapaDeExpansao.set(node.rotulo, true);
+                stack.push(...node.filhos);
             }
-        });
+        }
     }
-    colapsarTodos() {
-        this.percorrerTodosNos(this.obterDados(), (node) => {
+    colapsarTodosOtimizado() {
+        const dados = this.obterDadosOtimizado();
+        const stack = [...dados];
+        while (stack.length > 0) {
+            const node = stack.pop();
             if (node.filhos && node.filhos.length > 0) {
                 this.mapaDeExpansao.set(node.rotulo, false);
+                stack.push(...node.filhos);
             }
-        });
+        }
     }
     percorrerTodosNos(nodes, callback) {
         nodes.forEach(node => {
@@ -13498,7 +13642,8 @@ class KvTreeEnvironmentComponent {
                 ativo: dado?.ativo ?? true,
                 estaExpandido: est.estaExpandido,
                 filhos: [],
-                actions: est.actions
+                actions: est.actions,
+                data: est.data
             };
             mapaEstrutura.set(est.id, no);
         });
@@ -13519,8 +13664,14 @@ class KvTreeEnvironmentComponent {
     executeAdd() {
         this.onAddClick.emit();
     }
+    ngOnDestroy() {
+        this._cachedDados = null;
+        this._cachedListaPlana = null;
+        this._dadosHash = '';
+        this._listaPlanaHash = '';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvTreeEnvironmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.8", type: KvTreeEnvironmentComponent, isStandalone: true, selector: "kv-tree-environment", inputs: { arvoreDeDados: { classPropertyName: "arvoreDeDados", publicName: "arvoreDeDados", isSignal: true, isRequired: false, transformFunction: null }, nosSimples: { classPropertyName: "nosSimples", publicName: "nosSimples", isSignal: true, isRequired: false, transformFunction: null }, estruturaArvore: { classPropertyName: "estruturaArvore", publicName: "estruturaArvore", isSignal: true, isRequired: false, transformFunction: null }, dadosArvore: { classPropertyName: "dadosArvore", publicName: "dadosArvore", isSignal: true, isRequired: false, transformFunction: null }, configuracao: { classPropertyName: "configuracao", publicName: "configuracao", isSignal: true, isRequired: false, transformFunction: null }, showButtonCollapsed: { classPropertyName: "showButtonCollapsed", publicName: "showButtonCollapsed", isSignal: true, isRequired: false, transformFunction: null }, showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAddClick: "onAddClick" }, ngImport: i0, template: "<div class=\"grid-container h-full\">\n  <span \n    class=\"material-symbols-outlined text-sm text-500 mx-1 p-1 cursor-pointer hover:surface-300\"\n    style=\"border-radius: 4px; margin-top: 12px;\" \n    (click)=\"executeCollapsed()\"\n    [pTooltip]=\"collapsedAll() ? 'Expandir tudo' : 'Recolher tudo'\"\n  >\n    {{ iconCollapsed() }}\n  </span>\n  <cdk-virtual-scroll-viewport class=\"h-full w-full\" itemSize=\"40\">\n    \n    <ul class=\"lista-arvore-virtual pr-2 py-2\">\n      <no-arvore \n        *cdkVirtualFor=\"let no of listaPlana(); trackBy: trackByNode\" \n        [noPlano]=\"no\"\n        (noAlternado)=\"alternarNo($event)\" />\n    </ul>\n\n  </cdk-virtual-scroll-viewport>\n</div>", styles: [".grid-container{display:grid;grid-template-columns:auto 1fr;align-items:start}.lista-arvore-virtual{list-style:none;padding:0;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NoArvoreComponent, selector: "no-arvore", inputs: ["noPlano"], outputs: ["noAlternado"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$8.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$8.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$8.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: PrimeNgModule }, { kind: "directive", type: i2$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.8", type: KvTreeEnvironmentComponent, isStandalone: true, selector: "kv-tree-environment", inputs: { arvoreDeDados: { classPropertyName: "arvoreDeDados", publicName: "arvoreDeDados", isSignal: true, isRequired: false, transformFunction: null }, nosSimples: { classPropertyName: "nosSimples", publicName: "nosSimples", isSignal: true, isRequired: false, transformFunction: null }, estruturaArvore: { classPropertyName: "estruturaArvore", publicName: "estruturaArvore", isSignal: true, isRequired: false, transformFunction: null }, dadosArvore: { classPropertyName: "dadosArvore", publicName: "dadosArvore", isSignal: true, isRequired: false, transformFunction: null }, configuracao: { classPropertyName: "configuracao", publicName: "configuracao", isSignal: true, isRequired: false, transformFunction: null }, showButtonCollapsed: { classPropertyName: "showButtonCollapsed", publicName: "showButtonCollapsed", isSignal: true, isRequired: false, transformFunction: null }, showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAddClick: "onAddClick", onSelectedItem: "onSelectedItem" }, ngImport: i0, template: "<div class=\"grid-container h-full\">\n  <span \n    class=\"material-symbols-outlined text-sm text-500 mx-1 p-1 cursor-pointer hover:surface-300\"\n    style=\"border-radius: 4px; margin-top: 12px;\" \n    (click)=\"executeCollapsed()\"\n    [pTooltip]=\"collapsedAll() ? 'Expandir tudo' : 'Recolher tudo'\"\n  >\n    {{ iconCollapsed() }}\n  </span>\n  <cdk-virtual-scroll-viewport class=\"h-full w-full\" itemSize=\"40\">\n    \n    <ul class=\"lista-arvore-virtual pr-2 py-2\">\n      <no-arvore \n        *cdkVirtualFor=\"let no of listaPlana(); trackBy: trackByNode\" \n        [noPlano]=\"no\"\n        (noAlternado)=\"alternarNo($event)\"\n        (actionExecuted)=\"onActionExecuted($event)\" />\n    </ul>\n\n  </cdk-virtual-scroll-viewport>\n</div>", styles: [".grid-container{display:grid;grid-template-columns:auto 1fr;align-items:start}.lista-arvore-virtual{list-style:none;padding:0;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NoArvoreComponent, selector: "no-arvore", inputs: ["noPlano"], outputs: ["noAlternado", "actionExecuted"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$8.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$8.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$8.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: PrimeNgModule }, { kind: "directive", type: i2$3.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: KvTreeEnvironmentComponent, decorators: [{
             type: Component,
@@ -13529,9 +13680,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                         NoArvoreComponent,
                         ScrollingModule,
                         PrimeNgModule
-                    ], template: "<div class=\"grid-container h-full\">\n  <span \n    class=\"material-symbols-outlined text-sm text-500 mx-1 p-1 cursor-pointer hover:surface-300\"\n    style=\"border-radius: 4px; margin-top: 12px;\" \n    (click)=\"executeCollapsed()\"\n    [pTooltip]=\"collapsedAll() ? 'Expandir tudo' : 'Recolher tudo'\"\n  >\n    {{ iconCollapsed() }}\n  </span>\n  <cdk-virtual-scroll-viewport class=\"h-full w-full\" itemSize=\"40\">\n    \n    <ul class=\"lista-arvore-virtual pr-2 py-2\">\n      <no-arvore \n        *cdkVirtualFor=\"let no of listaPlana(); trackBy: trackByNode\" \n        [noPlano]=\"no\"\n        (noAlternado)=\"alternarNo($event)\" />\n    </ul>\n\n  </cdk-virtual-scroll-viewport>\n</div>", styles: [".grid-container{display:grid;grid-template-columns:auto 1fr;align-items:start}.lista-arvore-virtual{list-style:none;padding:0;margin:0}\n"] }]
+                    ], template: "<div class=\"grid-container h-full\">\n  <span \n    class=\"material-symbols-outlined text-sm text-500 mx-1 p-1 cursor-pointer hover:surface-300\"\n    style=\"border-radius: 4px; margin-top: 12px;\" \n    (click)=\"executeCollapsed()\"\n    [pTooltip]=\"collapsedAll() ? 'Expandir tudo' : 'Recolher tudo'\"\n  >\n    {{ iconCollapsed() }}\n  </span>\n  <cdk-virtual-scroll-viewport class=\"h-full w-full\" itemSize=\"40\">\n    \n    <ul class=\"lista-arvore-virtual pr-2 py-2\">\n      <no-arvore \n        *cdkVirtualFor=\"let no of listaPlana(); trackBy: trackByNode\" \n        [noPlano]=\"no\"\n        (noAlternado)=\"alternarNo($event)\"\n        (actionExecuted)=\"onActionExecuted($event)\" />\n    </ul>\n\n  </cdk-virtual-scroll-viewport>\n</div>", styles: [".grid-container{display:grid;grid-template-columns:auto 1fr;align-items:start}.lista-arvore-virtual{list-style:none;padding:0;margin:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onAddClick: [{
                 type: Output
+            }], onSelectedItem: [{
+                type: Output
             }] } });
 
 /*