@praxisui/dynamic-form 1.0.0-beta.13 → 1.0.0-beta.14

package/fesm2022/praxisui-dynamic-form.mjs

@@ -4485,6 +4485,9 @@ class CanvasToolbarComponent {
     selectPath = new EventEmitter();
     /** Emite quando o usuário solicita fechar a toolbar (ESC). */
     requestClose = new EventEmitter();
+    /** Estado interno para animar o fechamento. */
+    closing = false;
+    closeAnimMs = 140; // manter em sincronia com o SCSS
     // Quick actions for field-level metadata
     toggleReadonly = new EventEmitter();
     toggleRequired = new EventEmitter();
@@ -4537,18 +4540,27 @@ class CanvasToolbarComponent {
         const d = this.selectedElement?.data || {};
         return d.disabled ? 'toggle_on' : 'toggle_off';
     }
-    /** Fecha a toolbar com a tecla ESC quando o componente está visível. */
+    /** Fecha a toolbar com a tecla ESC quando o componente está visível (com animação). */
     onGlobalKeydown(ev) {
         if (ev.key === 'Escape' || ev.key === 'Esc') {
-            this.requestClose.emit();
+            this.triggerClose();
         }
     }
+    /** Inicia animação de saída e emite o evento ao final. */
+    triggerClose() {
+        if (this.closing)
+            return;
+        this.closing = true;
+        setTimeout(() => {
+            this.requestClose.emit();
+        }, this.closeAnimMs);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CanvasToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: CanvasToolbarComponent, isStandalone: true, selector: "praxis-canvas-toolbar", inputs: { selectedElement: "selectedElement" }, outputs: { editMetadata: "editMetadata", delete: "delete", moveUp: "moveUp", moveDown: "moveDown", selectPath: "selectPath", requestClose: "requestClose", toggleReadonly: "toggleReadonly", toggleRequired: "toggleRequired", toggleHidden: "toggleHidden", toggleDisabled: "toggleDisabled" }, host: { listeners: { "document:keydown": "onGlobalKeydown($event)" } }, ngImport: i0, template: "<div class=\"canvas-toolbar-container\" role=\"toolbar\" aria-label=\"Toolbar de configura\u00E7\u00E3o do canvas\">\n  <!-- Bot\u00E3o discreto para fechar a toolbar -->\n  <button\n    type=\"button\"\n    class=\"toolbar-close\"\n    mat-icon-button\n    (click)=\"requestClose.emit()\"\n    matTooltip=\"Fechar\"\n    [matTooltipShowDelay]=\"300\"\n    aria-label=\"Fechar toolbar\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n  <!-- Breadcrumb em linha superior, discreto -->\n  <div class=\"breadcrumb-row\">\n    <div class=\"pfx-breadcrumb\" role=\"navigation\" aria-label=\"Caminho do formul\u00E1rio\">\n      @for (part of selectedElement?.path; track part.type + part.name; let i = $index; let isLast = $last) {\n        @if (!isLast) {\n          <button\n            type=\"button\"\n            class=\"pfx-bc is-link breadcrumb-link\"\n            (click)=\"selectPath.emit(part)\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            [attr.aria-current]=\"null\"\n          >\n            {{ part.name }}\n          </button>\n        } @else {\n          <span\n            class=\"pfx-bc is-active breadcrumb-current\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            aria-current=\"page\"\n          >\n            {{ part.name }}\n          </span>\n        }\n      }\n    </div>\n  </div>\n\n  <!-- Barra de a\u00E7\u00F5es separada em grupos l\u00F3gicos -->\n  <div class=\"actions-row\">\n    @if (isSection) {\n      <div class=\"action-group group-move\" aria-label=\"Mover\">\n        <button type=\"button\" mat-icon-button (click)=\"moveUp.emit()\" matTooltip=\"Mover para cima\" [matTooltipShowDelay]=\"300\" aria-label=\"Mover para cima\">\n          <mat-icon>arrow_upward</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"moveDown.emit()\" matTooltip=\"Mover para baixo\" [matTooltipShowDelay]=\"300\" aria-label=\"Mover para baixo\">\n          <mat-icon>arrow_downward</mat-icon>\n        </button>\n      </div>\n    }\n\n    <!-- Configura\u00E7\u00E3o para qualquer elemento selecionado (se\u00E7\u00E3o/linha/coluna/campo) -->\n    @if (selectedLastType && selectedLastType !== 'actions') {\n      <div class=\"action-group group-config\" aria-label=\"Configura\u00E7\u00E3o\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"editMetadata.emit()\"\n          [matTooltip]=\"configTooltip\"\n          [matTooltipShowDelay]=\"300\"\n          [attr.aria-label]=\"configTooltip\"\n        >\n          <mat-icon>tune</mat-icon>\n        </button>\n      </div>\n    }\n\n    @if (isField) {\n      <!-- Visibilidade e estados -->\n      <div class=\"action-group group-visibility\" aria-label=\"Visibilidade e estados\">\n        <button type=\"button\" mat-icon-button (click)=\"toggleReadonly.emit()\" matTooltip=\"Alternar somente leitura\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar somente leitura\">\n          <mat-icon>{{ readonlyIcon }}</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"toggleHidden.emit()\" matTooltip=\"Alternar visibilidade\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar visibilidade\">\n          <mat-icon>{{ visibilityIcon }}</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"toggleDisabled.emit()\" matTooltip=\"Alternar desabilitado\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar desabilitado\">\n          <mat-icon>{{ disabledIcon }}</mat-icon>\n        </button>\n      </div>\n\n      <!-- Valida\u00E7\u00E3o / Obrigat\u00F3rio -->\n      <div class=\"action-group group-validation\" aria-label=\"Valida\u00E7\u00E3o\">\n        <button type=\"button\" mat-icon-button (click)=\"toggleRequired.emit()\" matTooltip=\"Alternar obrigat\u00F3rio\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar obrigat\u00F3rio\">\n          <mat-icon>{{ requiredIcon }}</mat-icon>\n        </button>\n      </div>\n    }\n\n    <!-- A\u00E7\u00E3o destrutiva isolada -->\n    <div class=\"action-group group-danger\" aria-label=\"A\u00E7\u00F5es perigosas\">\n      <button type=\"button\" mat-icon-button color=\"warn\" (click)=\"delete.emit()\" matTooltip=\"Remover\" [matTooltipShowDelay]=\"300\" aria-label=\"Remover\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:absolute;top:0;left:0;z-index:2001;pointer-events:none;--canvas-primary: var( --mat-sys-primary, var(--md-sys-color-primary, var(--sicoob-primary-default, #3f51b5)) );--canvas-surface: var( --mat-sys-surface, var(--md-sys-color-surface, var(--sicoob-bg-elev-1, var(--md-sys-color-surface))) );--canvas-on-surface: var( --mat-sys-on-surface, var(--md-sys-color-on-surface, var(--sicoob-text-high, #1f1f1f)) );--canvas-error: var( --mat-sys-error, var(--md-sys-color-error, var(--sicoob-error-default, #b00020)) );--canvas-border-color: var(--pfx-surface-border, rgba(0,0,0,.08));--primary: var(--mat-sys-primary, var(--md-sys-color-primary, var(--canvas-primary)));--on-primary: var(--mat-sys-on-primary, var(--md-sys-color-on-primary, #fff));--surface: var(--mat-sys-surface, var(--md-sys-color-surface, var(--canvas-surface)));--surface-variant: var( --mat-sys-surface-variant, color-mix(in srgb, var(--canvas-primary) 6%, var(--canvas-surface)) );--on-surface-variant: var( --mat-sys-on-surface-variant, color-mix(in srgb, var(--canvas-on-surface) 86%, transparent) );--bc-h: 28px;--bc-aw: 18px;--bc-divider: color-mix(in srgb, var(--canvas-on-surface) 14%, transparent);--bc-bg: var(--surface-variant);--bc-fg: var(--on-surface-variant);--bc-active-bg: var(--primary);--bc-active-fg: var(--on-primary);--bc-label-inset: 24px;--bc-bg-tone-1: var(--bc-bg);--bc-bg-tone-2: color-mix(in srgb, var(--bc-bg) 88%, var(--canvas-on-surface) 12%)}.canvas-toolbar-container{display:grid;grid-template-rows:auto auto;align-items:stretch;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--canvas-on-surface);border-radius:10px;box-shadow:0 6px 16px #0000002e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;pointer-events:all;transform:translateY(-100%);margin-top:-6px;position:relative;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 100%);overflow:hidden;animation:toolbarIn .14s ease-out}.toolbar-close{position:absolute;top:2px;right:2px;z-index:3;--mdc-icon-button-state-layer-size: 28px;width:28px;height:28px;color:var(--mat-sys-on-surface, var(--md-sys-color-on-surface))}.toolbar-close .mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)){.canvas-toolbar-container{border:2px solid transparent;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 100%) padding-box,var(--p-primary-gradient, linear-gradient(90deg, color-mix(in srgb, var(--mat-sys-primary) 75%, var(--mat-sys-tertiary) 25%), var(--mat-sys-tertiary))) border-box}.canvas-toolbar-container:after{display:none}}.canvas-toolbar-container:after{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--p-primary-gradient, linear-gradient(90deg, color-mix(in srgb, var(--mat-sys-primary) 75%, var(--mat-sys-tertiary) 25%), var(--mat-sys-tertiary)));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@keyframes toolbarIn{0%{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}to{opacity:1;transform:translateY(-100%) scale(1)}}.breadcrumb-row{display:flex;align-items:center;min-height:22px;padding-block:2px;padding-inline:8px calc(8px + var(--bc-aw, 18px));border-bottom:0;background:var(--surface)}.breadcrumb-bar{display:flex;align-items:center;white-space:nowrap}.breadcrumb-separator{display:none}.actions-row{display:flex;align-items:center;padding:4px;gap:6px;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 80%)}.action-group{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:6px;background:color-mix(in srgb,var(--canvas-primary) 3%,transparent);border:0}.pfx-breadcrumb{display:flex;align-items:center;white-space:nowrap;font-size:.85rem;line-height:1}.pfx-bc{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:max-content;height:var(--bc-h, 28px);padding-inline:16px 14px;padding-inline-start:calc(var(--bc-label-inset, 24px) + var(--bc-aw, 18px));margin-inline-end:calc(-1 * var(--bc-aw, 18px));--bc-bg-local: var(--bc-bg, var(--surface-variant));background:var(--bc-bg-local);color:var(--bc-fg, var(--on-surface-variant));border:0;border-radius:6px 0 0 6px;box-shadow:none!important;outline:0;background-clip:padding-box;cursor:default}.pfx-bc:after{content:\"\";position:absolute;top:0;bottom:0;right:calc(-1 * var(--bc-aw, 18px));border-top:calc(var(--bc-h, 28px) / 2) solid transparent;border-bottom:calc(var(--bc-h, 28px) / 2) solid transparent;border-left:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(-1px);pointer-events:none}.pfx-bc:before{display:none}.pfx-bc.is-link{cursor:pointer}.pfx-bc.is-link:hover{background:var(--surface)}.pfx-bc.is-link:hover:after{border-left-color:var(--surface)}.pfx-bc.is-active{background:var(--bc-active-bg, var(--primary));color:var(--bc-active-fg, var(--on-primary));cursor:default;font-weight:600;margin-inline-end:0;border-radius:6px 0 0 6px}.pfx-bc.is-active:after{border-left-color:var(--bc-active-bg, var(--primary))}.pfx-bc:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 35%,transparent)}.pfx-bc:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px;padding-inline-start:16px}.pfx-bc:not(.is-active):nth-child(odd){--bc-bg-local: var(--bc-bg-tone-1)}.pfx-bc:not(.is-active):nth-child(2n){--bc-bg-local: var(--bc-bg-tone-2)}[dir=rtl] .pfx-bc{margin-inline-end:0;margin-inline-start:calc(-1 * var(--bc-aw, 18px))}[dir=rtl] .pfx-bc.is-active{margin-inline-start:0}[dir=rtl] .pfx-bc:after{right:auto;left:calc(-1 * var(--bc-aw, 18px));border-left:0;border-right:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(1px)}[dir=rtl] .pfx-bc.is-active:after{border-right-color:var(--bc-active-bg, var(--primary))}[dir=rtl] .pfx-bc:before{right:auto;left:calc(-1px - var(--bc-aw, 18px))}.action-group+.action-group{margin-left:4px}.group-danger{margin-left:8px;background:color-mix(in srgb,var(--canvas-error) 10%,transparent);border-color:color-mix(in srgb,var(--canvas-error) 16%,transparent)}.actions-row button{width:32px;height:32px;line-height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--canvas-on-surface)}.actions-row mat-icon{font-size:18px;width:18px;height:18px;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: CanvasToolbarComponent, isStandalone: true, selector: "praxis-canvas-toolbar", inputs: { selectedElement: "selectedElement" }, outputs: { editMetadata: "editMetadata", delete: "delete", moveUp: "moveUp", moveDown: "moveDown", selectPath: "selectPath", requestClose: "requestClose", toggleReadonly: "toggleReadonly", toggleRequired: "toggleRequired", toggleHidden: "toggleHidden", toggleDisabled: "toggleDisabled" }, host: { listeners: { "document:keydown": "onGlobalKeydown($event)" } }, ngImport: i0, template: "<div class=\"canvas-toolbar-container\" [class.closing]=\"closing\" role=\"toolbar\" aria-label=\"Toolbar de configura\u00E7\u00E3o do canvas\">\n  <!-- Bot\u00E3o discreto para fechar a toolbar -->\n  <button\n    type=\"button\"\n    class=\"toolbar-close\"\n    mat-icon-button\n    (click)=\"triggerClose()\"\n    matTooltip=\"Fechar\"\n    [matTooltipShowDelay]=\"300\"\n    aria-label=\"Fechar toolbar\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n  <div class=\"toolbar-surface\">\n  <!-- Breadcrumb em linha superior, discreto -->\n  <div class=\"breadcrumb-row\">\n    <div class=\"pfx-breadcrumb\" role=\"navigation\" aria-label=\"Caminho do formul\u00E1rio\">\n      @for (part of selectedElement?.path; track part.type + part.name; let i = $index; let isLast = $last) {\n        @if (!isLast) {\n          <button\n            type=\"button\"\n            class=\"pfx-bc is-link breadcrumb-link\"\n            (click)=\"selectPath.emit(part)\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            [attr.aria-current]=\"null\"\n          >\n            {{ part.name }}\n          </button>\n        } @else {\n          <span\n            class=\"pfx-bc is-active breadcrumb-current\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            aria-current=\"page\"\n          >\n            {{ part.name }}\n          </span>\n        }\n      }\n    </div>\n  </div>\n\n  <!-- Barra de a\u00E7\u00F5es separada em grupos l\u00F3gicos -->\n  <div class=\"actions-row\">\n    @if (isSection) {\n      <div class=\"action-group group-move\" aria-label=\"Mover\">\n        <button type=\"button\" mat-icon-button (click)=\"moveUp.emit()\" matTooltip=\"Mover para cima\" [matTooltipShowDelay]=\"300\" aria-label=\"Mover para cima\">\n          <mat-icon>arrow_upward</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"moveDown.emit()\" matTooltip=\"Mover para baixo\" [matTooltipShowDelay]=\"300\" aria-label=\"Mover para baixo\">\n          <mat-icon>arrow_downward</mat-icon>\n        </button>\n      </div>\n    }\n\n    <!-- Configura\u00E7\u00E3o para qualquer elemento selecionado (se\u00E7\u00E3o/linha/coluna/campo) -->\n    @if (selectedLastType && selectedLastType !== 'actions') {\n      <div class=\"action-group group-config\" aria-label=\"Configura\u00E7\u00E3o\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"editMetadata.emit()\"\n          [matTooltip]=\"configTooltip\"\n          [matTooltipShowDelay]=\"300\"\n          [attr.aria-label]=\"configTooltip\"\n        >\n          <mat-icon>tune</mat-icon>\n        </button>\n      </div>\n    }\n\n    @if (isField) {\n      <!-- Visibilidade e estados -->\n      <div class=\"action-group group-visibility\" aria-label=\"Visibilidade e estados\">\n        <button type=\"button\" mat-icon-button (click)=\"toggleReadonly.emit()\" matTooltip=\"Alternar somente leitura\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar somente leitura\">\n          <mat-icon>{{ readonlyIcon }}</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"toggleHidden.emit()\" matTooltip=\"Alternar visibilidade\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar visibilidade\">\n          <mat-icon>{{ visibilityIcon }}</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"toggleDisabled.emit()\" matTooltip=\"Alternar desabilitado\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar desabilitado\">\n          <mat-icon>{{ disabledIcon }}</mat-icon>\n        </button>\n      </div>\n\n      <!-- Valida\u00E7\u00E3o / Obrigat\u00F3rio -->\n      <div class=\"action-group group-validation\" aria-label=\"Valida\u00E7\u00E3o\">\n        <button type=\"button\" mat-icon-button (click)=\"toggleRequired.emit()\" matTooltip=\"Alternar obrigat\u00F3rio\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar obrigat\u00F3rio\">\n          <mat-icon>{{ requiredIcon }}</mat-icon>\n        </button>\n      </div>\n    }\n\n    <!-- A\u00E7\u00E3o destrutiva isolada -->\n    <div class=\"action-group group-danger\" aria-label=\"A\u00E7\u00F5es perigosas\">\n      <button type=\"button\" mat-icon-button color=\"warn\" (click)=\"delete.emit()\" matTooltip=\"Remover\" [matTooltipShowDelay]=\"300\" aria-label=\"Remover\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:absolute;top:0;left:0;z-index:2001;pointer-events:none;--canvas-primary: var( --mat-sys-primary, var(--md-sys-color-primary, var(--sicoob-primary-default, #3f51b5)) );--canvas-surface: var( --mat-sys-surface, var(--md-sys-color-surface, var(--sicoob-bg-elev-1, var(--md-sys-color-surface))) );--canvas-on-surface: var( --mat-sys-on-surface, var(--md-sys-color-on-surface, var(--sicoob-text-high, #1f1f1f)) );--canvas-error: var( --mat-sys-error, var(--md-sys-color-error, var(--sicoob-error-default, #b00020)) );--canvas-border-color: var(--pfx-surface-border, rgba(0,0,0,.08));--primary: var(--mat-sys-primary, var(--md-sys-color-primary, var(--canvas-primary)));--on-primary: var(--mat-sys-on-primary, var(--md-sys-color-on-primary, #fff));--surface: var(--mat-sys-surface, var(--md-sys-color-surface, var(--canvas-surface)));--surface-variant: var( --mat-sys-surface-variant, color-mix(in srgb, var(--canvas-primary) 6%, var(--canvas-surface)) );--on-surface-variant: var( --mat-sys-on-surface-variant, color-mix(in srgb, var(--canvas-on-surface) 86%, transparent) );--bc-h: 28px;--bc-aw: 18px;--bc-divider: color-mix(in srgb, var(--canvas-on-surface) 14%, transparent);--bc-bg: var(--surface-variant);--bc-fg: var(--on-surface-variant);--bc-active-bg: var(--primary);--bc-active-fg: var(--on-primary);--bc-label-inset: 24px;--bc-bg-tone-1: var(--bc-bg);--bc-bg-tone-2: color-mix(in srgb, var(--bc-bg) 88%, var(--canvas-on-surface) 12%)}.canvas-toolbar-container{display:grid;grid-template-rows:auto auto;align-items:stretch;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--canvas-on-surface);border-radius:10px;box-shadow:0 6px 16px #0000002e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;pointer-events:all;transform:translateY(-100%);margin-top:-6px;position:relative;overflow:visible;animation:toolbarIn .14s ease-out}.toolbar-surface{display:grid;grid-template-rows:auto auto;border-radius:inherit;overflow:hidden;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 100%)}.canvas-toolbar-container.closing{pointer-events:none;animation:toolbarOut .14s ease-in forwards}.toolbar-close{--p-close-size: 36px;--p-close-icon: 20px;position:absolute;top:-18px;right:-18px;z-index:10;width:var(--p-close-size);height:var(--p-close-size);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;pointer-events:auto;background:color-mix(in srgb,var(--canvas-surface) 88%,var(--canvas-on-surface) 12%);border:1px solid color-mix(in srgb,var(--canvas-on-surface) 24%,transparent);box-shadow:0 1px 2px #0000004d;color:var(--mat-sys-on-surface, var(--md-sys-color-on-surface));--mdc-icon-button-state-layer-size: calc(var(--p-close-size) + 4px);opacity:0;pointer-events:none;transition:background-color .15s ease,box-shadow .15s ease,transform .06s ease,opacity .12s ease}.canvas-toolbar-container:hover .toolbar-close,.canvas-toolbar-container:focus-within .toolbar-close,.toolbar-close:focus-visible,.canvas-toolbar-container.closing .toolbar-close{opacity:1;pointer-events:auto}.toolbar-close:hover{background:color-mix(in srgb,var(--canvas-surface) 96%,var(--canvas-on-surface) 4%);box-shadow:0 2px 6px #00000047}.toolbar-close:active{transform:scale(.98)}.toolbar-close:focus-visible{outline:2px solid var(--mat-sys-primary, var(--md-sys-color-primary));outline-offset:2px}.toolbar-close .mat-icon{width:var(--p-close-icon);height:var(--p-close-icon);font-size:var(--p-close-icon);line-height:var(--p-close-icon)}@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)){.canvas-toolbar-container{border:2px solid transparent;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 100%) padding-box,var(--p-primary-gradient, linear-gradient(90deg, color-mix(in srgb, var(--mat-sys-primary) 75%, var(--mat-sys-tertiary) 25%), var(--mat-sys-tertiary))) border-box}.canvas-toolbar-container:after{display:none}}.canvas-toolbar-container:after{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--p-primary-gradient, linear-gradient(90deg, color-mix(in srgb, var(--mat-sys-primary) 75%, var(--mat-sys-tertiary) 25%), var(--mat-sys-tertiary)));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@keyframes toolbarIn{0%{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}to{opacity:1;transform:translateY(-100%) scale(1)}}@keyframes toolbarOut{0%{opacity:1;transform:translateY(-100%) scale(1)}to{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}}.breadcrumb-row{display:flex;align-items:center;min-height:22px;padding-block:2px;padding-inline:8px calc(8px + var(--bc-aw, 18px));border-bottom:0;background:var(--surface)}.breadcrumb-bar{display:flex;align-items:center;white-space:nowrap}.breadcrumb-separator{display:none}.actions-row{display:flex;align-items:center;padding:4px;gap:6px;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 80%)}.action-group{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:6px;background:color-mix(in srgb,var(--canvas-primary) 3%,transparent);border:0}.pfx-breadcrumb{display:flex;align-items:center;white-space:nowrap;font-size:.85rem;line-height:1}.pfx-bc{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:max-content;height:var(--bc-h, 28px);padding-inline:16px 14px;padding-inline-start:calc(var(--bc-label-inset, 24px) + var(--bc-aw, 18px));margin-inline-end:calc(-1 * var(--bc-aw, 18px));--bc-bg-local: var(--bc-bg, var(--surface-variant));background:var(--bc-bg-local);color:var(--bc-fg, var(--on-surface-variant));border:0;border-radius:6px 0 0 6px;box-shadow:none!important;outline:0;background-clip:padding-box;cursor:default}.pfx-bc:after{content:\"\";position:absolute;top:0;bottom:0;right:calc(-1 * var(--bc-aw, 18px));border-top:calc(var(--bc-h, 28px) / 2) solid transparent;border-bottom:calc(var(--bc-h, 28px) / 2) solid transparent;border-left:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(-1px);pointer-events:none}.pfx-bc:before{display:none}.pfx-bc.is-link{cursor:pointer}.pfx-bc.is-link:hover{background:var(--surface)}.pfx-bc.is-link:hover:after{border-left-color:var(--surface)}.pfx-bc.is-active{background:var(--bc-active-bg, var(--primary));color:var(--bc-active-fg, var(--on-primary));cursor:default;font-weight:600;margin-inline-end:0;border-radius:6px 0 0 6px}.pfx-bc.is-active:after{border-left-color:var(--bc-active-bg, var(--primary))}.pfx-bc:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 35%,transparent)}.pfx-bc:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px;padding-inline-start:16px}.pfx-bc:not(.is-active):nth-child(odd){--bc-bg-local: var(--bc-bg-tone-1)}.pfx-bc:not(.is-active):nth-child(2n){--bc-bg-local: var(--bc-bg-tone-2)}[dir=rtl] .pfx-bc{margin-inline-end:0;margin-inline-start:calc(-1 * var(--bc-aw, 18px))}[dir=rtl] .pfx-bc.is-active{margin-inline-start:0}[dir=rtl] .pfx-bc:after{right:auto;left:calc(-1 * var(--bc-aw, 18px));border-left:0;border-right:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(1px)}[dir=rtl] .pfx-bc.is-active:after{border-right-color:var(--bc-active-bg, var(--primary))}[dir=rtl] .pfx-bc:before{right:auto;left:calc(-1px - var(--bc-aw, 18px))}.action-group+.action-group{margin-left:4px}.group-danger{margin-left:8px;background:color-mix(in srgb,var(--canvas-error) 10%,transparent);border-color:color-mix(in srgb,var(--canvas-error) 16%,transparent)}.actions-row button{width:32px;height:32px;line-height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--canvas-on-surface)}.actions-row mat-icon{font-size:18px;width:18px;height:18px;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CanvasToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-canvas-toolbar', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule], template: "<div class=\"canvas-toolbar-container\" role=\"toolbar\" aria-label=\"Toolbar de configura\u00E7\u00E3o do canvas\">\n  <!-- Bot\u00E3o discreto para fechar a toolbar -->\n  <button\n    type=\"button\"\n    class=\"toolbar-close\"\n    mat-icon-button\n    (click)=\"requestClose.emit()\"\n    matTooltip=\"Fechar\"\n    [matTooltipShowDelay]=\"300\"\n    aria-label=\"Fechar toolbar\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n  <!-- Breadcrumb em linha superior, discreto -->\n  <div class=\"breadcrumb-row\">\n    <div class=\"pfx-breadcrumb\" role=\"navigation\" aria-label=\"Caminho do formul\u00E1rio\">\n      @for (part of selectedElement?.path; track part.type + part.name; let i = $index; let isLast = $last) {\n        @if (!isLast) {\n          <button\n            type=\"button\"\n            class=\"pfx-bc is-link breadcrumb-link\"\n            (click)=\"selectPath.emit(part)\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            [attr.aria-current]=\"null\"\n          >\n            {{ part.name }}\n          </button>\n        } @else {\n          <span\n            class=\"pfx-bc is-active breadcrumb-current\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            aria-current=\"page\"\n          >\n            {{ part.name }}\n          </span>\n        }\n      }\n    </div>\n  </div>\n\n  <!-- Barra de a\u00E7\u00F5es separada em grupos l\u00F3gicos -->\n  <div class=\"actions-row\">\n    @if (isSection) {\n      <div class=\"action-group group-move\" aria-label=\"Mover\">\n        <button type=\"button\" mat-icon-button (click)=\"moveUp.emit()\" matTooltip=\"Mover para cima\" [matTooltipShowDelay]=\"300\" aria-label=\"Mover para cima\">\n          <mat-icon>arrow_upward</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"moveDown.emit()\" matTooltip=\"Mover para baixo\" [matTooltipShowDelay]=\"300\" aria-label=\"Mover para baixo\">\n          <mat-icon>arrow_downward</mat-icon>\n        </button>\n      </div>\n    }\n\n    <!-- Configura\u00E7\u00E3o para qualquer elemento selecionado (se\u00E7\u00E3o/linha/coluna/campo) -->\n    @if (selectedLastType && selectedLastType !== 'actions') {\n      <div class=\"action-group group-config\" aria-label=\"Configura\u00E7\u00E3o\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"editMetadata.emit()\"\n          [matTooltip]=\"configTooltip\"\n          [matTooltipShowDelay]=\"300\"\n          [attr.aria-label]=\"configTooltip\"\n        >\n          <mat-icon>tune</mat-icon>\n        </button>\n      </div>\n    }\n\n    @if (isField) {\n      <!-- Visibilidade e estados -->\n      <div class=\"action-group group-visibility\" aria-label=\"Visibilidade e estados\">\n        <button type=\"button\" mat-icon-button (click)=\"toggleReadonly.emit()\" matTooltip=\"Alternar somente leitura\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar somente leitura\">\n          <mat-icon>{{ readonlyIcon }}</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"toggleHidden.emit()\" matTooltip=\"Alternar visibilidade\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar visibilidade\">\n          <mat-icon>{{ visibilityIcon }}</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"toggleDisabled.emit()\" matTooltip=\"Alternar desabilitado\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar desabilitado\">\n          <mat-icon>{{ disabledIcon }}</mat-icon>\n        </button>\n      </div>\n\n      <!-- Valida\u00E7\u00E3o / Obrigat\u00F3rio -->\n      <div class=\"action-group group-validation\" aria-label=\"Valida\u00E7\u00E3o\">\n        <button type=\"button\" mat-icon-button (click)=\"toggleRequired.emit()\" matTooltip=\"Alternar obrigat\u00F3rio\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar obrigat\u00F3rio\">\n          <mat-icon>{{ requiredIcon }}</mat-icon>\n        </button>\n      </div>\n    }\n\n    <!-- A\u00E7\u00E3o destrutiva isolada -->\n    <div class=\"action-group group-danger\" aria-label=\"A\u00E7\u00F5es perigosas\">\n      <button type=\"button\" mat-icon-button color=\"warn\" (click)=\"delete.emit()\" matTooltip=\"Remover\" [matTooltipShowDelay]=\"300\" aria-label=\"Remover\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:absolute;top:0;left:0;z-index:2001;pointer-events:none;--canvas-primary: var( --mat-sys-primary, var(--md-sys-color-primary, var(--sicoob-primary-default, #3f51b5)) );--canvas-surface: var( --mat-sys-surface, var(--md-sys-color-surface, var(--sicoob-bg-elev-1, var(--md-sys-color-surface))) );--canvas-on-surface: var( --mat-sys-on-surface, var(--md-sys-color-on-surface, var(--sicoob-text-high, #1f1f1f)) );--canvas-error: var( --mat-sys-error, var(--md-sys-color-error, var(--sicoob-error-default, #b00020)) );--canvas-border-color: var(--pfx-surface-border, rgba(0,0,0,.08));--primary: var(--mat-sys-primary, var(--md-sys-color-primary, var(--canvas-primary)));--on-primary: var(--mat-sys-on-primary, var(--md-sys-color-on-primary, #fff));--surface: var(--mat-sys-surface, var(--md-sys-color-surface, var(--canvas-surface)));--surface-variant: var( --mat-sys-surface-variant, color-mix(in srgb, var(--canvas-primary) 6%, var(--canvas-surface)) );--on-surface-variant: var( --mat-sys-on-surface-variant, color-mix(in srgb, var(--canvas-on-surface) 86%, transparent) );--bc-h: 28px;--bc-aw: 18px;--bc-divider: color-mix(in srgb, var(--canvas-on-surface) 14%, transparent);--bc-bg: var(--surface-variant);--bc-fg: var(--on-surface-variant);--bc-active-bg: var(--primary);--bc-active-fg: var(--on-primary);--bc-label-inset: 24px;--bc-bg-tone-1: var(--bc-bg);--bc-bg-tone-2: color-mix(in srgb, var(--bc-bg) 88%, var(--canvas-on-surface) 12%)}.canvas-toolbar-container{display:grid;grid-template-rows:auto auto;align-items:stretch;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--canvas-on-surface);border-radius:10px;box-shadow:0 6px 16px #0000002e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;pointer-events:all;transform:translateY(-100%);margin-top:-6px;position:relative;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 100%);overflow:hidden;animation:toolbarIn .14s ease-out}.toolbar-close{position:absolute;top:2px;right:2px;z-index:3;--mdc-icon-button-state-layer-size: 28px;width:28px;height:28px;color:var(--mat-sys-on-surface, var(--md-sys-color-on-surface))}.toolbar-close .mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)){.canvas-toolbar-container{border:2px solid transparent;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 100%) padding-box,var(--p-primary-gradient, linear-gradient(90deg, color-mix(in srgb, var(--mat-sys-primary) 75%, var(--mat-sys-tertiary) 25%), var(--mat-sys-tertiary))) border-box}.canvas-toolbar-container:after{display:none}}.canvas-toolbar-container:after{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--p-primary-gradient, linear-gradient(90deg, color-mix(in srgb, var(--mat-sys-primary) 75%, var(--mat-sys-tertiary) 25%), var(--mat-sys-tertiary)));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@keyframes toolbarIn{0%{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}to{opacity:1;transform:translateY(-100%) scale(1)}}.breadcrumb-row{display:flex;align-items:center;min-height:22px;padding-block:2px;padding-inline:8px calc(8px + var(--bc-aw, 18px));border-bottom:0;background:var(--surface)}.breadcrumb-bar{display:flex;align-items:center;white-space:nowrap}.breadcrumb-separator{display:none}.actions-row{display:flex;align-items:center;padding:4px;gap:6px;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 80%)}.action-group{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:6px;background:color-mix(in srgb,var(--canvas-primary) 3%,transparent);border:0}.pfx-breadcrumb{display:flex;align-items:center;white-space:nowrap;font-size:.85rem;line-height:1}.pfx-bc{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:max-content;height:var(--bc-h, 28px);padding-inline:16px 14px;padding-inline-start:calc(var(--bc-label-inset, 24px) + var(--bc-aw, 18px));margin-inline-end:calc(-1 * var(--bc-aw, 18px));--bc-bg-local: var(--bc-bg, var(--surface-variant));background:var(--bc-bg-local);color:var(--bc-fg, var(--on-surface-variant));border:0;border-radius:6px 0 0 6px;box-shadow:none!important;outline:0;background-clip:padding-box;cursor:default}.pfx-bc:after{content:\"\";position:absolute;top:0;bottom:0;right:calc(-1 * var(--bc-aw, 18px));border-top:calc(var(--bc-h, 28px) / 2) solid transparent;border-bottom:calc(var(--bc-h, 28px) / 2) solid transparent;border-left:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(-1px);pointer-events:none}.pfx-bc:before{display:none}.pfx-bc.is-link{cursor:pointer}.pfx-bc.is-link:hover{background:var(--surface)}.pfx-bc.is-link:hover:after{border-left-color:var(--surface)}.pfx-bc.is-active{background:var(--bc-active-bg, var(--primary));color:var(--bc-active-fg, var(--on-primary));cursor:default;font-weight:600;margin-inline-end:0;border-radius:6px 0 0 6px}.pfx-bc.is-active:after{border-left-color:var(--bc-active-bg, var(--primary))}.pfx-bc:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 35%,transparent)}.pfx-bc:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px;padding-inline-start:16px}.pfx-bc:not(.is-active):nth-child(odd){--bc-bg-local: var(--bc-bg-tone-1)}.pfx-bc:not(.is-active):nth-child(2n){--bc-bg-local: var(--bc-bg-tone-2)}[dir=rtl] .pfx-bc{margin-inline-end:0;margin-inline-start:calc(-1 * var(--bc-aw, 18px))}[dir=rtl] .pfx-bc.is-active{margin-inline-start:0}[dir=rtl] .pfx-bc:after{right:auto;left:calc(-1 * var(--bc-aw, 18px));border-left:0;border-right:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(1px)}[dir=rtl] .pfx-bc.is-active:after{border-right-color:var(--bc-active-bg, var(--primary))}[dir=rtl] .pfx-bc:before{right:auto;left:calc(-1px - var(--bc-aw, 18px))}.action-group+.action-group{margin-left:4px}.group-danger{margin-left:8px;background:color-mix(in srgb,var(--canvas-error) 10%,transparent);border-color:color-mix(in srgb,var(--canvas-error) 16%,transparent)}.actions-row button{width:32px;height:32px;line-height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--canvas-on-surface)}.actions-row mat-icon{font-size:18px;width:18px;height:18px;line-height:1}\n"] }]
+            args: [{ selector: 'praxis-canvas-toolbar', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule], template: "<div class=\"canvas-toolbar-container\" [class.closing]=\"closing\" role=\"toolbar\" aria-label=\"Toolbar de configura\u00E7\u00E3o do canvas\">\n  <!-- Bot\u00E3o discreto para fechar a toolbar -->\n  <button\n    type=\"button\"\n    class=\"toolbar-close\"\n    mat-icon-button\n    (click)=\"triggerClose()\"\n    matTooltip=\"Fechar\"\n    [matTooltipShowDelay]=\"300\"\n    aria-label=\"Fechar toolbar\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n  <div class=\"toolbar-surface\">\n  <!-- Breadcrumb em linha superior, discreto -->\n  <div class=\"breadcrumb-row\">\n    <div class=\"pfx-breadcrumb\" role=\"navigation\" aria-label=\"Caminho do formul\u00E1rio\">\n      @for (part of selectedElement?.path; track part.type + part.name; let i = $index; let isLast = $last) {\n        @if (!isLast) {\n          <button\n            type=\"button\"\n            class=\"pfx-bc is-link breadcrumb-link\"\n            (click)=\"selectPath.emit(part)\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            [attr.aria-current]=\"null\"\n          >\n            {{ part.name }}\n          </button>\n        } @else {\n          <span\n            class=\"pfx-bc is-active breadcrumb-current\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            aria-current=\"page\"\n          >\n            {{ part.name }}\n          </span>\n        }\n      }\n    </div>\n  </div>\n\n  <!-- Barra de a\u00E7\u00F5es separada em grupos l\u00F3gicos -->\n  <div class=\"actions-row\">\n    @if (isSection) {\n      <div class=\"action-group group-move\" aria-label=\"Mover\">\n        <button type=\"button\" mat-icon-button (click)=\"moveUp.emit()\" matTooltip=\"Mover para cima\" [matTooltipShowDelay]=\"300\" aria-label=\"Mover para cima\">\n          <mat-icon>arrow_upward</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"moveDown.emit()\" matTooltip=\"Mover para baixo\" [matTooltipShowDelay]=\"300\" aria-label=\"Mover para baixo\">\n          <mat-icon>arrow_downward</mat-icon>\n        </button>\n      </div>\n    }\n\n    <!-- Configura\u00E7\u00E3o para qualquer elemento selecionado (se\u00E7\u00E3o/linha/coluna/campo) -->\n    @if (selectedLastType && selectedLastType !== 'actions') {\n      <div class=\"action-group group-config\" aria-label=\"Configura\u00E7\u00E3o\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"editMetadata.emit()\"\n          [matTooltip]=\"configTooltip\"\n          [matTooltipShowDelay]=\"300\"\n          [attr.aria-label]=\"configTooltip\"\n        >\n          <mat-icon>tune</mat-icon>\n        </button>\n      </div>\n    }\n\n    @if (isField) {\n      <!-- Visibilidade e estados -->\n      <div class=\"action-group group-visibility\" aria-label=\"Visibilidade e estados\">\n        <button type=\"button\" mat-icon-button (click)=\"toggleReadonly.emit()\" matTooltip=\"Alternar somente leitura\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar somente leitura\">\n          <mat-icon>{{ readonlyIcon }}</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"toggleHidden.emit()\" matTooltip=\"Alternar visibilidade\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar visibilidade\">\n          <mat-icon>{{ visibilityIcon }}</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"toggleDisabled.emit()\" matTooltip=\"Alternar desabilitado\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar desabilitado\">\n          <mat-icon>{{ disabledIcon }}</mat-icon>\n        </button>\n      </div>\n\n      <!-- Valida\u00E7\u00E3o / Obrigat\u00F3rio -->\n      <div class=\"action-group group-validation\" aria-label=\"Valida\u00E7\u00E3o\">\n        <button type=\"button\" mat-icon-button (click)=\"toggleRequired.emit()\" matTooltip=\"Alternar obrigat\u00F3rio\" [matTooltipShowDelay]=\"300\" aria-label=\"Alternar obrigat\u00F3rio\">\n          <mat-icon>{{ requiredIcon }}</mat-icon>\n        </button>\n      </div>\n    }\n\n    <!-- A\u00E7\u00E3o destrutiva isolada -->\n    <div class=\"action-group group-danger\" aria-label=\"A\u00E7\u00F5es perigosas\">\n      <button type=\"button\" mat-icon-button color=\"warn\" (click)=\"delete.emit()\" matTooltip=\"Remover\" [matTooltipShowDelay]=\"300\" aria-label=\"Remover\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:absolute;top:0;left:0;z-index:2001;pointer-events:none;--canvas-primary: var( --mat-sys-primary, var(--md-sys-color-primary, var(--sicoob-primary-default, #3f51b5)) );--canvas-surface: var( --mat-sys-surface, var(--md-sys-color-surface, var(--sicoob-bg-elev-1, var(--md-sys-color-surface))) );--canvas-on-surface: var( --mat-sys-on-surface, var(--md-sys-color-on-surface, var(--sicoob-text-high, #1f1f1f)) );--canvas-error: var( --mat-sys-error, var(--md-sys-color-error, var(--sicoob-error-default, #b00020)) );--canvas-border-color: var(--pfx-surface-border, rgba(0,0,0,.08));--primary: var(--mat-sys-primary, var(--md-sys-color-primary, var(--canvas-primary)));--on-primary: var(--mat-sys-on-primary, var(--md-sys-color-on-primary, #fff));--surface: var(--mat-sys-surface, var(--md-sys-color-surface, var(--canvas-surface)));--surface-variant: var( --mat-sys-surface-variant, color-mix(in srgb, var(--canvas-primary) 6%, var(--canvas-surface)) );--on-surface-variant: var( --mat-sys-on-surface-variant, color-mix(in srgb, var(--canvas-on-surface) 86%, transparent) );--bc-h: 28px;--bc-aw: 18px;--bc-divider: color-mix(in srgb, var(--canvas-on-surface) 14%, transparent);--bc-bg: var(--surface-variant);--bc-fg: var(--on-surface-variant);--bc-active-bg: var(--primary);--bc-active-fg: var(--on-primary);--bc-label-inset: 24px;--bc-bg-tone-1: var(--bc-bg);--bc-bg-tone-2: color-mix(in srgb, var(--bc-bg) 88%, var(--canvas-on-surface) 12%)}.canvas-toolbar-container{display:grid;grid-template-rows:auto auto;align-items:stretch;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--canvas-on-surface);border-radius:10px;box-shadow:0 6px 16px #0000002e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;pointer-events:all;transform:translateY(-100%);margin-top:-6px;position:relative;overflow:visible;animation:toolbarIn .14s ease-out}.toolbar-surface{display:grid;grid-template-rows:auto auto;border-radius:inherit;overflow:hidden;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 100%)}.canvas-toolbar-container.closing{pointer-events:none;animation:toolbarOut .14s ease-in forwards}.toolbar-close{--p-close-size: 36px;--p-close-icon: 20px;position:absolute;top:-18px;right:-18px;z-index:10;width:var(--p-close-size);height:var(--p-close-size);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;pointer-events:auto;background:color-mix(in srgb,var(--canvas-surface) 88%,var(--canvas-on-surface) 12%);border:1px solid color-mix(in srgb,var(--canvas-on-surface) 24%,transparent);box-shadow:0 1px 2px #0000004d;color:var(--mat-sys-on-surface, var(--md-sys-color-on-surface));--mdc-icon-button-state-layer-size: calc(var(--p-close-size) + 4px);opacity:0;pointer-events:none;transition:background-color .15s ease,box-shadow .15s ease,transform .06s ease,opacity .12s ease}.canvas-toolbar-container:hover .toolbar-close,.canvas-toolbar-container:focus-within .toolbar-close,.toolbar-close:focus-visible,.canvas-toolbar-container.closing .toolbar-close{opacity:1;pointer-events:auto}.toolbar-close:hover{background:color-mix(in srgb,var(--canvas-surface) 96%,var(--canvas-on-surface) 4%);box-shadow:0 2px 6px #00000047}.toolbar-close:active{transform:scale(.98)}.toolbar-close:focus-visible{outline:2px solid var(--mat-sys-primary, var(--md-sys-color-primary));outline-offset:2px}.toolbar-close .mat-icon{width:var(--p-close-icon);height:var(--p-close-icon);font-size:var(--p-close-icon);line-height:var(--p-close-icon)}@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)){.canvas-toolbar-container{border:2px solid transparent;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 100%) padding-box,var(--p-primary-gradient, linear-gradient(90deg, color-mix(in srgb, var(--mat-sys-primary) 75%, var(--mat-sys-tertiary) 25%), var(--mat-sys-tertiary))) border-box}.canvas-toolbar-container:after{display:none}}.canvas-toolbar-container:after{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--p-primary-gradient, linear-gradient(90deg, color-mix(in srgb, var(--mat-sys-primary) 75%, var(--mat-sys-tertiary) 25%), var(--mat-sys-tertiary)));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@keyframes toolbarIn{0%{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}to{opacity:1;transform:translateY(-100%) scale(1)}}@keyframes toolbarOut{0%{opacity:1;transform:translateY(-100%) scale(1)}to{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}}.breadcrumb-row{display:flex;align-items:center;min-height:22px;padding-block:2px;padding-inline:8px calc(8px + var(--bc-aw, 18px));border-bottom:0;background:var(--surface)}.breadcrumb-bar{display:flex;align-items:center;white-space:nowrap}.breadcrumb-separator{display:none}.actions-row{display:flex;align-items:center;padding:4px;gap:6px;background:linear-gradient(0deg,color-mix(in srgb,var(--canvas-primary) 5%,var(--canvas-surface)) 0%,var(--canvas-surface) 80%)}.action-group{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:6px;background:color-mix(in srgb,var(--canvas-primary) 3%,transparent);border:0}.pfx-breadcrumb{display:flex;align-items:center;white-space:nowrap;font-size:.85rem;line-height:1}.pfx-bc{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:max-content;height:var(--bc-h, 28px);padding-inline:16px 14px;padding-inline-start:calc(var(--bc-label-inset, 24px) + var(--bc-aw, 18px));margin-inline-end:calc(-1 * var(--bc-aw, 18px));--bc-bg-local: var(--bc-bg, var(--surface-variant));background:var(--bc-bg-local);color:var(--bc-fg, var(--on-surface-variant));border:0;border-radius:6px 0 0 6px;box-shadow:none!important;outline:0;background-clip:padding-box;cursor:default}.pfx-bc:after{content:\"\";position:absolute;top:0;bottom:0;right:calc(-1 * var(--bc-aw, 18px));border-top:calc(var(--bc-h, 28px) / 2) solid transparent;border-bottom:calc(var(--bc-h, 28px) / 2) solid transparent;border-left:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(-1px);pointer-events:none}.pfx-bc:before{display:none}.pfx-bc.is-link{cursor:pointer}.pfx-bc.is-link:hover{background:var(--surface)}.pfx-bc.is-link:hover:after{border-left-color:var(--surface)}.pfx-bc.is-active{background:var(--bc-active-bg, var(--primary));color:var(--bc-active-fg, var(--on-primary));cursor:default;font-weight:600;margin-inline-end:0;border-radius:6px 0 0 6px}.pfx-bc.is-active:after{border-left-color:var(--bc-active-bg, var(--primary))}.pfx-bc:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 35%,transparent)}.pfx-bc:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px;padding-inline-start:16px}.pfx-bc:not(.is-active):nth-child(odd){--bc-bg-local: var(--bc-bg-tone-1)}.pfx-bc:not(.is-active):nth-child(2n){--bc-bg-local: var(--bc-bg-tone-2)}[dir=rtl] .pfx-bc{margin-inline-end:0;margin-inline-start:calc(-1 * var(--bc-aw, 18px))}[dir=rtl] .pfx-bc.is-active{margin-inline-start:0}[dir=rtl] .pfx-bc:after{right:auto;left:calc(-1 * var(--bc-aw, 18px));border-left:0;border-right:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(1px)}[dir=rtl] .pfx-bc.is-active:after{border-right-color:var(--bc-active-bg, var(--primary))}[dir=rtl] .pfx-bc:before{right:auto;left:calc(-1px - var(--bc-aw, 18px))}.action-group+.action-group{margin-left:4px}.group-danger{margin-left:8px;background:color-mix(in srgb,var(--canvas-error) 10%,transparent);border-color:color-mix(in srgb,var(--canvas-error) 16%,transparent)}.actions-row button{width:32px;height:32px;line-height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--canvas-on-surface)}.actions-row mat-icon{font-size:18px;width:18px;height:18px;line-height:1}\n"] }]
         }], propDecorators: { selectedElement: [{
                 type: Input
             }], editMetadata: [{