structra-ui 0.1.69 → 0.1.71

package/fesm2022/structra-ui.mjs

@@ -5653,25 +5653,35 @@ class FormGroupComponent {
         }
     }
     /**
-     * Após expandir, desloca a vista até ao grupo com scroll nativo suave, só o necessário
-     * (`block: 'nearest'`). Executa após pintar o corpo expandido.
+     * `block: 'start'` aproxima o grupo ao bordo superior (mais do que o `nearest`), mas o
+     * `scroll-margin-top` no :host (CSS) cria respiro para ainda se ver o contexto de cima
+     * (separador, outra aba) sem ir ao cimo absoluto. Dois `rAF` pós-`markForCheck` (incl. aninhados).
      */
     scheduleScrollIntoView() {
         if (this.scrollIntoViewCoalesce) {
             return;
         }
         this.scrollIntoViewCoalesce = true;
+        const reduced = this.prefersReducedMotion();
         queueMicrotask(() => {
             requestAnimationFrame(() => {
-                this.scrollIntoViewCoalesce = false;
-                this.hostRef.nativeElement.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'nearest',
-                    inline: 'nearest',
+                requestAnimationFrame(() => {
+                    this.scrollIntoViewCoalesce = false;
+                    this.hostRef.nativeElement.scrollIntoView({
+                        behavior: reduced ? 'auto' : 'smooth',
+                        block: 'start',
+                        inline: 'nearest',
+                    });
                 });
             });
         });
     }
+    prefersReducedMotion() {
+        if (typeof globalThis.matchMedia !== 'function') {
+            return false;
+        }
+        return globalThis.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
     ngDoCheck() {
         if (!this.formGroupPath?.trim()) {
             return;
@@ -5684,11 +5694,11 @@ class FormGroupComponent {
         this.prevRootFormSubmitted = submitted;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FormGroupComponent, isStandalone: true, selector: "app-form-group", inputs: { titulo: "titulo", subtitulo: "subtitulo", collapsible: ["collapsible", "collapsible", booleanAttribute], foldable: ["foldable", "foldable", booleanAttribute], collapsed: ["collapsed", "collapsed", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], dense: ["dense", "dense", booleanAttribute], canMoveUp: ["canMoveUp", "canMoveUp", booleanAttribute], canMoveDown: ["canMoveDown", "canMoveDown", booleanAttribute], showHeader: ["showHeader", "showHeader", booleanAttribute], showDivider: ["showDivider", "showDivider", booleanAttribute], variant: "variant", destroyOnCollapse: ["destroyOnCollapse", "destroyOnCollapse", booleanAttribute], skipBodyChildStacking: ["skipBodyChildStacking", "skipBodyChildStacking", booleanAttribute], groupInvalid: ["groupInvalid", "groupInvalid", booleanAttribute], formGroupPath: "formGroupPath", uxSubmittedPass: ["uxSubmittedPass", "uxSubmittedPass", booleanAttribute] }, outputs: { collapsedChange: "collapsedChange", moveUp: "moveUp", moveDown: "moveDown" }, host: { properties: { "class": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: "@if (showHeaderBar) {\n  <div\n    class=\"form-group__header\"\n    [class.form-group__header--single-line]=\"!subtitulo.trim()\"\n    [class.form-group__header--interactive]=\"headerIsInteractive\"\n    [attr.role]=\"headerIsInteractive ? 'button' : null\"\n    [attr.tabindex]=\"headerIsInteractive ? 0 : null\"\n    [attr.aria-expanded]=\"headerIsInteractive ? !isCollapsed : null\"\n    [attr.aria-disabled]=\"disabled ? true : null\"\n    (click)=\"onHeaderClick()\"\n    (keydown)=\"onHeaderKeydown($event)\"\n  >\n    <div\n      class=\"form-group__header-main\"\n      [class.form-group__header-main--single-line]=\"!subtitulo.trim()\"\n    >\n      <span\n        class=\"form-group__chevron\"\n        [class.form-group__chevron--locked]=\"!collapsible || !foldable\"\n        aria-hidden=\"true\"\n      >\n        @if (collapsible && foldable && isCollapsed) {\n          <svg class=\"form-group__icon-svg\" viewBox=\"0 0 320 512\" aria-hidden=\"true\" focusable=\"false\">\n            <path\n              fill=\"currentColor\"\n              d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\n            />\n          </svg>\n        } @else {\n          <svg class=\"form-group__icon-svg\" viewBox=\"0 0 512 512\" aria-hidden=\"true\" focusable=\"false\">\n            <path\n              fill=\"currentColor\"\n              d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"\n            />\n          </svg>\n        }\n      </span>\n      <div class=\"form-group__titles\">\n        @if (titulo.trim()) {\n          <h3 class=\"form-group__title\">{{ titulo }}</h3>\n        }\n        @if (subtitulo.trim()) {\n          <p class=\"form-group__subtitle\">{{ subtitulo }}</p>\n        }\n      </div>\n    </div>\n    <div class=\"form-group__header-trailing\">\n      <span\n        class=\"form-group__invalid-flag\"\n        [class.form-group__invalid-flag--visible]=\"invalidFlagVisible\"\n        [attr.role]=\"invalidFlagVisible ? 'img' : null\"\n        [attr.aria-label]=\"invalidFlagVisible ? 'Existem erros de valida\u00E7\u00E3o neste grupo' : null\"\n        [attr.aria-hidden]=\"invalidFlagVisible ? null : 'true'\"\n        [attr.title]=\"invalidFlagVisible ? 'Existem erros de valida\u00E7\u00E3o neste grupo' : null\"\n      >\n        <svg class=\"form-group__icon-svg form-group__icon-svg--warning\" viewBox=\"0 0 512 512\" aria-hidden=\"true\" focusable=\"false\">\n          <path\n            fill=\"currentColor\"\n            d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"\n          />\n        </svg>\n      </span>\n      @if (canMoveUp || canMoveDown) {\n        <div class=\"form-group__reorder\" (click)=\"$event.stopPropagation()\">\n          @if (canMoveUp) {\n            <button\n              type=\"button\"\n              class=\"form-group__reorder-btn\"\n              [disabled]=\"disabled\"\n              aria-label=\"Mover grupo para cima\"\n              (click)=\"onMoveUpClick($event)\"\n            >\n              <svg class=\"form-group__icon-svg\" viewBox=\"0 0 384 512\" aria-hidden=\"true\" focusable=\"false\">\n                <path\n                  fill=\"currentColor\"\n                  d=\"M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z\"\n                />\n              </svg>\n            </button>\n          }\n          @if (canMoveDown) {\n            <button\n              type=\"button\"\n              class=\"form-group__reorder-btn\"\n              [disabled]=\"disabled\"\n              aria-label=\"Mover grupo para baixo\"\n              (click)=\"onMoveDownClick($event)\"\n            >\n              <svg class=\"form-group__icon-svg\" viewBox=\"0 0 384 512\" aria-hidden=\"true\" focusable=\"false\">\n                <path\n                  fill=\"currentColor\"\n                  d=\"M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\"\n                />\n              </svg>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n}\n\n@if (renderBodyInDom) {\n  <div class=\"form-group__body\" [class.form-group__body--collapsed-hidden]=\"bodyVisuallyHidden\">\n    <div\n      class=\"form-group__body-stack\"\n      [class.form-group__body-stack--neutral]=\"skipBodyChildStacking\"\n    >\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box;margin:0;scroll-margin-top:.75rem;scroll-margin-bottom:.5rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle){border:1px solid var(--app-color-border, #e8eaed);border-radius:12px;background:var(--app-color-surface, #fff);padding:0;overflow:hidden;transition:border-color .28s ease,box-shadow .28s ease}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed{border-color:var(--app-color-border, #e4e6ea);box-shadow:none}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded{border-color:var(--app-color-border-strong, #d4dce8);box-shadow:0 1px 2px var(--app-color-border-subtle, rgba(22, 40, 72, .05)),0 4px 18px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07))}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle) .form-group__header{margin:0;padding:.65rem 1rem .75rem;border-radius:0}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle) .form-group__header.form-group__header--single-line{padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed .form-group__header{padding-bottom:.7rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed .form-group__header.form-group__header--single-line{padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header{margin-bottom:0;padding-bottom:.65rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header.form-group__header--single-line{margin-bottom:0;padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__body{padding:.9rem 1rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header{margin-bottom:0;padding-bottom:.5rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header.form-group__header--single-line{margin-bottom:0;padding:.55rem .85rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__body{padding:.7rem .85rem}.form-group__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin:0 0 1rem;padding:.35rem 0;border-radius:8px;outline:none}.form-group__header--interactive{cursor:pointer;user-select:none;-webkit-user-select:none}.form-group__header--interactive:hover:not([aria-disabled=true]){background:var(--app-color-group-header-hover, rgba(43, 127, 217, .06))}.form-group__header--interactive:focus-visible{box-shadow:0 0 0 2px var(--app-color-focus-ring, rgba(43, 127, 217, .25))}.form-group__header--single-line{align-items:center}.form-group__header-main{display:flex;align-items:flex-start;gap:.5rem;min-width:0;flex:1}.form-group__header-main--single-line{align-items:center}.form-group__header-main--single-line .form-group__title{margin-bottom:0}.form-group__header-main--single-line .form-group__chevron{margin-top:0}.form-group__chevron{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-top:.1rem;flex-shrink:0;color:var(--ui-field-float-prefix-color, #5a7fa3);font-size:.75rem}.form-group__icon-svg{display:block;width:1em;height:1em;flex-shrink:0}.form-group__icon-svg--warning{width:1.05em;height:1.05em}.form-group__chevron--locked{color:var(--ui-form-group-chevron-locked, #9aa3ad)}.form-group__titles{min-width:0;flex:1}.form-group__header--single-line .form-group__titles{display:flex;align-items:center}.form-group__title{margin:0 0 .2rem;font-size:1.05rem;font-weight:600;line-height:1.35;color:var(--ui-field-label-color, #1a1a1a)}.form-group__subtitle{margin:0;font-size:.85rem;line-height:1.4;color:var(--app-color-text-muted, #525252)}.form-group__header-trailing{display:flex;flex-shrink:0;align-items:flex-start;gap:.35rem}.form-group__header--single-line .form-group__header-trailing{align-items:center}.form-group__header--single-line .form-group__invalid-flag{margin-top:0}.form-group__invalid-flag{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-top:.1rem;font-size:1.05rem;line-height:1;color:var(--app-color-error, #c62828);cursor:inherit;opacity:0;visibility:hidden;pointer-events:none;transform:scale(.92);transition:opacity .22s ease,visibility .22s ease,transform .22s ease}.form-group__invalid-flag--visible{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}.form-group__reorder{display:flex;flex-shrink:0;gap:.25rem;align-items:center}.form-group__reorder-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color, #5a7fa3);cursor:pointer;transition:background .15s ease,color .15s ease}.form-group__reorder-btn:hover:not(:disabled){background:var(--app-color-hover-bg-strong, rgba(90, 127, 163, .12));color:var(--ui-field-float-label-top-color, #4a6d8c)}.form-group__reorder-btn:disabled{cursor:not-allowed;opacity:.45}.form-group__body{display:flex;flex-direction:column;gap:1.25rem;min-width:0;transition:opacity .18s ease}.form-group__body-stack{display:flex;flex-direction:column;gap:inherit;min-width:0;width:100%}.form-group__body-stack--neutral{display:block;gap:unset}:host ::ng-deep .form-group__body-stack:not(.form-group__body-stack--neutral)>*{display:flex;flex-direction:column;gap:inherit;min-width:0}.form-group__body--collapsed-hidden{display:none}:host.form-group--dense .form-group__header{margin-bottom:.65rem;padding-block:.2rem}:host.form-group--dense .form-group__title{font-size:1rem}:host.form-group--dense .form-group__body{gap:.5rem}:host.form-group--disabled{opacity:.72;pointer-events:none}:host.form-group--disabled .form-group__reorder{pointer-events:none}:host.form-group--outlined{padding:1rem 1rem 1.25rem;border:1px solid var(--ui-field-float-border, #b6cce5);border-radius:var(--ui-field-float-border-radius, 14px);background:var(--ui-field-float-bg, #f3f7fb)}:host.form-group--subtle{padding:.75rem .85rem 1rem;border-radius:10px;background:var(--app-color-background, #fafafa)}:host.form-group--divider:not(.form-group--outlined):not(.form-group--subtle):not(.form-group--default) .form-group__header{border-bottom:1px solid var(--app-color-border, #e5e5e5);padding-bottom:.65rem;margin-bottom:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FormGroupComponent, isStandalone: true, selector: "app-form-group", inputs: { titulo: "titulo", subtitulo: "subtitulo", collapsible: ["collapsible", "collapsible", booleanAttribute], foldable: ["foldable", "foldable", booleanAttribute], collapsed: ["collapsed", "collapsed", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], dense: ["dense", "dense", booleanAttribute], canMoveUp: ["canMoveUp", "canMoveUp", booleanAttribute], canMoveDown: ["canMoveDown", "canMoveDown", booleanAttribute], showHeader: ["showHeader", "showHeader", booleanAttribute], showDivider: ["showDivider", "showDivider", booleanAttribute], variant: "variant", destroyOnCollapse: ["destroyOnCollapse", "destroyOnCollapse", booleanAttribute], skipBodyChildStacking: ["skipBodyChildStacking", "skipBodyChildStacking", booleanAttribute], groupInvalid: ["groupInvalid", "groupInvalid", booleanAttribute], formGroupPath: "formGroupPath", uxSubmittedPass: ["uxSubmittedPass", "uxSubmittedPass", booleanAttribute] }, outputs: { collapsedChange: "collapsedChange", moveUp: "moveUp", moveDown: "moveDown" }, host: { properties: { "class": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: "@if (showHeaderBar) {\n  <div\n    class=\"form-group__header\"\n    [class.form-group__header--single-line]=\"!subtitulo.trim()\"\n    [class.form-group__header--interactive]=\"headerIsInteractive\"\n    [attr.role]=\"headerIsInteractive ? 'button' : null\"\n    [attr.tabindex]=\"headerIsInteractive ? 0 : null\"\n    [attr.aria-expanded]=\"headerIsInteractive ? !isCollapsed : null\"\n    [attr.aria-disabled]=\"disabled ? true : null\"\n    (click)=\"onHeaderClick()\"\n    (keydown)=\"onHeaderKeydown($event)\"\n  >\n    <div\n      class=\"form-group__header-main\"\n      [class.form-group__header-main--single-line]=\"!subtitulo.trim()\"\n    >\n      <span\n        class=\"form-group__chevron\"\n        [class.form-group__chevron--locked]=\"!collapsible || !foldable\"\n        aria-hidden=\"true\"\n      >\n        @if (collapsible && foldable && isCollapsed) {\n          <svg class=\"form-group__icon-svg\" viewBox=\"0 0 320 512\" aria-hidden=\"true\" focusable=\"false\">\n            <path\n              fill=\"currentColor\"\n              d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\n            />\n          </svg>\n        } @else {\n          <svg class=\"form-group__icon-svg\" viewBox=\"0 0 512 512\" aria-hidden=\"true\" focusable=\"false\">\n            <path\n              fill=\"currentColor\"\n              d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"\n            />\n          </svg>\n        }\n      </span>\n      <div class=\"form-group__titles\">\n        @if (titulo.trim()) {\n          <h3 class=\"form-group__title\">{{ titulo }}</h3>\n        }\n        @if (subtitulo.trim()) {\n          <p class=\"form-group__subtitle\">{{ subtitulo }}</p>\n        }\n      </div>\n    </div>\n    <div class=\"form-group__header-trailing\">\n      <span\n        class=\"form-group__invalid-flag\"\n        [class.form-group__invalid-flag--visible]=\"invalidFlagVisible\"\n        [attr.role]=\"invalidFlagVisible ? 'img' : null\"\n        [attr.aria-label]=\"invalidFlagVisible ? 'Existem erros de valida\u00E7\u00E3o neste grupo' : null\"\n        [attr.aria-hidden]=\"invalidFlagVisible ? null : 'true'\"\n        [attr.title]=\"invalidFlagVisible ? 'Existem erros de valida\u00E7\u00E3o neste grupo' : null\"\n      >\n        <svg class=\"form-group__icon-svg form-group__icon-svg--warning\" viewBox=\"0 0 512 512\" aria-hidden=\"true\" focusable=\"false\">\n          <path\n            fill=\"currentColor\"\n            d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"\n          />\n        </svg>\n      </span>\n      @if (canMoveUp || canMoveDown) {\n        <div class=\"form-group__reorder\" (click)=\"$event.stopPropagation()\">\n          @if (canMoveUp) {\n            <button\n              type=\"button\"\n              class=\"form-group__reorder-btn\"\n              [disabled]=\"disabled\"\n              aria-label=\"Mover grupo para cima\"\n              (click)=\"onMoveUpClick($event)\"\n            >\n              <svg class=\"form-group__icon-svg\" viewBox=\"0 0 384 512\" aria-hidden=\"true\" focusable=\"false\">\n                <path\n                  fill=\"currentColor\"\n                  d=\"M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z\"\n                />\n              </svg>\n            </button>\n          }\n          @if (canMoveDown) {\n            <button\n              type=\"button\"\n              class=\"form-group__reorder-btn\"\n              [disabled]=\"disabled\"\n              aria-label=\"Mover grupo para baixo\"\n              (click)=\"onMoveDownClick($event)\"\n            >\n              <svg class=\"form-group__icon-svg\" viewBox=\"0 0 384 512\" aria-hidden=\"true\" focusable=\"false\">\n                <path\n                  fill=\"currentColor\"\n                  d=\"M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\"\n                />\n              </svg>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n}\n\n@if (renderBodyInDom) {\n  <div class=\"form-group__body\" [class.form-group__body--collapsed-hidden]=\"bodyVisuallyHidden\">\n    <div\n      class=\"form-group__body-stack\"\n      [class.form-group__body-stack--neutral]=\"skipBodyChildStacking\"\n    >\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box;margin:0;scroll-margin-top:1.25rem;scroll-margin-bottom:.5rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle){border:1px solid var(--app-color-border, #e8eaed);border-radius:12px;background:var(--app-color-surface, #fff);padding:0;overflow:hidden;transition:border-color .28s ease,box-shadow .28s ease}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed{border-color:var(--app-color-border, #e4e6ea);box-shadow:none}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded{border-color:var(--app-color-border-strong, #d4dce8);box-shadow:0 1px 2px var(--app-color-border-subtle, rgba(22, 40, 72, .05)),0 4px 18px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07))}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle) .form-group__header{margin:0;padding:.65rem 1rem .75rem;border-radius:0}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle) .form-group__header.form-group__header--single-line{padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed .form-group__header{padding-bottom:.7rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed .form-group__header.form-group__header--single-line{padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header{margin-bottom:0;padding-bottom:.65rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header.form-group__header--single-line{margin-bottom:0;padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__body{padding:.9rem 1rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header{margin-bottom:0;padding-bottom:.5rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header.form-group__header--single-line{margin-bottom:0;padding:.55rem .85rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__body{padding:.7rem .85rem}.form-group__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin:0 0 1rem;padding:.35rem 0;border-radius:8px;outline:none}.form-group__header--interactive{cursor:pointer;user-select:none;-webkit-user-select:none}.form-group__header--interactive:hover:not([aria-disabled=true]){background:var(--app-color-group-header-hover, rgba(43, 127, 217, .06))}.form-group__header--interactive:focus-visible{box-shadow:0 0 0 2px var(--app-color-focus-ring, rgba(43, 127, 217, .25))}.form-group__header--single-line{align-items:center}.form-group__header-main{display:flex;align-items:flex-start;gap:.5rem;min-width:0;flex:1}.form-group__header-main--single-line{align-items:center}.form-group__header-main--single-line .form-group__title{margin-bottom:0}.form-group__header-main--single-line .form-group__chevron{margin-top:0}.form-group__chevron{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-top:.1rem;flex-shrink:0;color:var(--ui-field-float-prefix-color, #5a7fa3);font-size:.75rem}.form-group__icon-svg{display:block;width:1em;height:1em;flex-shrink:0}.form-group__icon-svg--warning{width:1.05em;height:1.05em}.form-group__chevron--locked{color:var(--ui-form-group-chevron-locked, #9aa3ad)}.form-group__titles{min-width:0;flex:1}.form-group__header--single-line .form-group__titles{display:flex;align-items:center}.form-group__title{margin:0 0 .2rem;font-size:1.05rem;font-weight:600;line-height:1.35;color:var(--ui-field-label-color, #1a1a1a)}.form-group__subtitle{margin:0;font-size:.85rem;line-height:1.4;color:var(--app-color-text-muted, #525252)}.form-group__header-trailing{display:flex;flex-shrink:0;align-items:flex-start;gap:.35rem}.form-group__header--single-line .form-group__header-trailing{align-items:center}.form-group__header--single-line .form-group__invalid-flag{margin-top:0}.form-group__invalid-flag{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-top:.1rem;font-size:1.05rem;line-height:1;color:var(--app-color-error, #c62828);cursor:inherit;opacity:0;visibility:hidden;pointer-events:none;transform:scale(.92);transition:opacity .22s ease,visibility .22s ease,transform .22s ease}.form-group__invalid-flag--visible{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}.form-group__reorder{display:flex;flex-shrink:0;gap:.25rem;align-items:center}.form-group__reorder-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color, #5a7fa3);cursor:pointer;transition:background .15s ease,color .15s ease}.form-group__reorder-btn:hover:not(:disabled){background:var(--app-color-hover-bg-strong, rgba(90, 127, 163, .12));color:var(--ui-field-float-label-top-color, #4a6d8c)}.form-group__reorder-btn:disabled{cursor:not-allowed;opacity:.45}.form-group__body{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.form-group__body-stack{display:flex;flex-direction:column;gap:inherit;min-width:0;width:100%}.form-group__body-stack--neutral{display:block;gap:unset}:host ::ng-deep .form-group__body-stack:not(.form-group__body-stack--neutral)>*{display:flex;flex-direction:column;gap:inherit;min-width:0}.form-group__body--collapsed-hidden{display:none}:host.form-group--dense .form-group__header{margin-bottom:.65rem;padding-block:.2rem}:host.form-group--dense .form-group__title{font-size:1rem}:host.form-group--dense .form-group__body{gap:.5rem}:host.form-group--disabled{opacity:.72;pointer-events:none}:host.form-group--disabled .form-group__reorder{pointer-events:none}:host.form-group--outlined{padding:1rem 1rem 1.25rem;border:1px solid var(--ui-field-float-border, #b6cce5);border-radius:var(--ui-field-float-border-radius, 14px);background:var(--ui-field-float-bg, #f3f7fb)}:host.form-group--subtle{padding:.75rem .85rem 1rem;border-radius:10px;background:var(--app-color-background, #fafafa)}:host.form-group--divider:not(.form-group--outlined):not(.form-group--subtle):not(.form-group--default) .form-group__header{border-bottom:1px solid var(--app-color-border, #e5e5e5);padding-bottom:.65rem;margin-bottom:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-form-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showHeaderBar) {\n  <div\n    class=\"form-group__header\"\n    [class.form-group__header--single-line]=\"!subtitulo.trim()\"\n    [class.form-group__header--interactive]=\"headerIsInteractive\"\n    [attr.role]=\"headerIsInteractive ? 'button' : null\"\n    [attr.tabindex]=\"headerIsInteractive ? 0 : null\"\n    [attr.aria-expanded]=\"headerIsInteractive ? !isCollapsed : null\"\n    [attr.aria-disabled]=\"disabled ? true : null\"\n    (click)=\"onHeaderClick()\"\n    (keydown)=\"onHeaderKeydown($event)\"\n  >\n    <div\n      class=\"form-group__header-main\"\n      [class.form-group__header-main--single-line]=\"!subtitulo.trim()\"\n    >\n      <span\n        class=\"form-group__chevron\"\n        [class.form-group__chevron--locked]=\"!collapsible || !foldable\"\n        aria-hidden=\"true\"\n      >\n        @if (collapsible && foldable && isCollapsed) {\n          <svg class=\"form-group__icon-svg\" viewBox=\"0 0 320 512\" aria-hidden=\"true\" focusable=\"false\">\n            <path\n              fill=\"currentColor\"\n              d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\n            />\n          </svg>\n        } @else {\n          <svg class=\"form-group__icon-svg\" viewBox=\"0 0 512 512\" aria-hidden=\"true\" focusable=\"false\">\n            <path\n              fill=\"currentColor\"\n              d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"\n            />\n          </svg>\n        }\n      </span>\n      <div class=\"form-group__titles\">\n        @if (titulo.trim()) {\n          <h3 class=\"form-group__title\">{{ titulo }}</h3>\n        }\n        @if (subtitulo.trim()) {\n          <p class=\"form-group__subtitle\">{{ subtitulo }}</p>\n        }\n      </div>\n    </div>\n    <div class=\"form-group__header-trailing\">\n      <span\n        class=\"form-group__invalid-flag\"\n        [class.form-group__invalid-flag--visible]=\"invalidFlagVisible\"\n        [attr.role]=\"invalidFlagVisible ? 'img' : null\"\n        [attr.aria-label]=\"invalidFlagVisible ? 'Existem erros de valida\u00E7\u00E3o neste grupo' : null\"\n        [attr.aria-hidden]=\"invalidFlagVisible ? null : 'true'\"\n        [attr.title]=\"invalidFlagVisible ? 'Existem erros de valida\u00E7\u00E3o neste grupo' : null\"\n      >\n        <svg class=\"form-group__icon-svg form-group__icon-svg--warning\" viewBox=\"0 0 512 512\" aria-hidden=\"true\" focusable=\"false\">\n          <path\n            fill=\"currentColor\"\n            d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"\n          />\n        </svg>\n      </span>\n      @if (canMoveUp || canMoveDown) {\n        <div class=\"form-group__reorder\" (click)=\"$event.stopPropagation()\">\n          @if (canMoveUp) {\n            <button\n              type=\"button\"\n              class=\"form-group__reorder-btn\"\n              [disabled]=\"disabled\"\n              aria-label=\"Mover grupo para cima\"\n              (click)=\"onMoveUpClick($event)\"\n            >\n              <svg class=\"form-group__icon-svg\" viewBox=\"0 0 384 512\" aria-hidden=\"true\" focusable=\"false\">\n                <path\n                  fill=\"currentColor\"\n                  d=\"M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z\"\n                />\n              </svg>\n            </button>\n          }\n          @if (canMoveDown) {\n            <button\n              type=\"button\"\n              class=\"form-group__reorder-btn\"\n              [disabled]=\"disabled\"\n              aria-label=\"Mover grupo para baixo\"\n              (click)=\"onMoveDownClick($event)\"\n            >\n              <svg class=\"form-group__icon-svg\" viewBox=\"0 0 384 512\" aria-hidden=\"true\" focusable=\"false\">\n                <path\n                  fill=\"currentColor\"\n                  d=\"M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\"\n                />\n              </svg>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n}\n\n@if (renderBodyInDom) {\n  <div class=\"form-group__body\" [class.form-group__body--collapsed-hidden]=\"bodyVisuallyHidden\">\n    <div\n      class=\"form-group__body-stack\"\n      [class.form-group__body-stack--neutral]=\"skipBodyChildStacking\"\n    >\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box;margin:0;scroll-margin-top:.75rem;scroll-margin-bottom:.5rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle){border:1px solid var(--app-color-border, #e8eaed);border-radius:12px;background:var(--app-color-surface, #fff);padding:0;overflow:hidden;transition:border-color .28s ease,box-shadow .28s ease}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed{border-color:var(--app-color-border, #e4e6ea);box-shadow:none}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded{border-color:var(--app-color-border-strong, #d4dce8);box-shadow:0 1px 2px var(--app-color-border-subtle, rgba(22, 40, 72, .05)),0 4px 18px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07))}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle) .form-group__header{margin:0;padding:.65rem 1rem .75rem;border-radius:0}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle) .form-group__header.form-group__header--single-line{padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed .form-group__header{padding-bottom:.7rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed .form-group__header.form-group__header--single-line{padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header{margin-bottom:0;padding-bottom:.65rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header.form-group__header--single-line{margin-bottom:0;padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__body{padding:.9rem 1rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header{margin-bottom:0;padding-bottom:.5rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header.form-group__header--single-line{margin-bottom:0;padding:.55rem .85rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__body{padding:.7rem .85rem}.form-group__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin:0 0 1rem;padding:.35rem 0;border-radius:8px;outline:none}.form-group__header--interactive{cursor:pointer;user-select:none;-webkit-user-select:none}.form-group__header--interactive:hover:not([aria-disabled=true]){background:var(--app-color-group-header-hover, rgba(43, 127, 217, .06))}.form-group__header--interactive:focus-visible{box-shadow:0 0 0 2px var(--app-color-focus-ring, rgba(43, 127, 217, .25))}.form-group__header--single-line{align-items:center}.form-group__header-main{display:flex;align-items:flex-start;gap:.5rem;min-width:0;flex:1}.form-group__header-main--single-line{align-items:center}.form-group__header-main--single-line .form-group__title{margin-bottom:0}.form-group__header-main--single-line .form-group__chevron{margin-top:0}.form-group__chevron{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-top:.1rem;flex-shrink:0;color:var(--ui-field-float-prefix-color, #5a7fa3);font-size:.75rem}.form-group__icon-svg{display:block;width:1em;height:1em;flex-shrink:0}.form-group__icon-svg--warning{width:1.05em;height:1.05em}.form-group__chevron--locked{color:var(--ui-form-group-chevron-locked, #9aa3ad)}.form-group__titles{min-width:0;flex:1}.form-group__header--single-line .form-group__titles{display:flex;align-items:center}.form-group__title{margin:0 0 .2rem;font-size:1.05rem;font-weight:600;line-height:1.35;color:var(--ui-field-label-color, #1a1a1a)}.form-group__subtitle{margin:0;font-size:.85rem;line-height:1.4;color:var(--app-color-text-muted, #525252)}.form-group__header-trailing{display:flex;flex-shrink:0;align-items:flex-start;gap:.35rem}.form-group__header--single-line .form-group__header-trailing{align-items:center}.form-group__header--single-line .form-group__invalid-flag{margin-top:0}.form-group__invalid-flag{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-top:.1rem;font-size:1.05rem;line-height:1;color:var(--app-color-error, #c62828);cursor:inherit;opacity:0;visibility:hidden;pointer-events:none;transform:scale(.92);transition:opacity .22s ease,visibility .22s ease,transform .22s ease}.form-group__invalid-flag--visible{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}.form-group__reorder{display:flex;flex-shrink:0;gap:.25rem;align-items:center}.form-group__reorder-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color, #5a7fa3);cursor:pointer;transition:background .15s ease,color .15s ease}.form-group__reorder-btn:hover:not(:disabled){background:var(--app-color-hover-bg-strong, rgba(90, 127, 163, .12));color:var(--ui-field-float-label-top-color, #4a6d8c)}.form-group__reorder-btn:disabled{cursor:not-allowed;opacity:.45}.form-group__body{display:flex;flex-direction:column;gap:1.25rem;min-width:0;transition:opacity .18s ease}.form-group__body-stack{display:flex;flex-direction:column;gap:inherit;min-width:0;width:100%}.form-group__body-stack--neutral{display:block;gap:unset}:host ::ng-deep .form-group__body-stack:not(.form-group__body-stack--neutral)>*{display:flex;flex-direction:column;gap:inherit;min-width:0}.form-group__body--collapsed-hidden{display:none}:host.form-group--dense .form-group__header{margin-bottom:.65rem;padding-block:.2rem}:host.form-group--dense .form-group__title{font-size:1rem}:host.form-group--dense .form-group__body{gap:.5rem}:host.form-group--disabled{opacity:.72;pointer-events:none}:host.form-group--disabled .form-group__reorder{pointer-events:none}:host.form-group--outlined{padding:1rem 1rem 1.25rem;border:1px solid var(--ui-field-float-border, #b6cce5);border-radius:var(--ui-field-float-border-radius, 14px);background:var(--ui-field-float-bg, #f3f7fb)}:host.form-group--subtle{padding:.75rem .85rem 1rem;border-radius:10px;background:var(--app-color-background, #fafafa)}:host.form-group--divider:not(.form-group--outlined):not(.form-group--subtle):not(.form-group--default) .form-group__header{border-bottom:1px solid var(--app-color-border, #e5e5e5);padding-bottom:.65rem;margin-bottom:1rem}\n"] }]
+            args: [{ selector: 'app-form-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showHeaderBar) {\n  <div\n    class=\"form-group__header\"\n    [class.form-group__header--single-line]=\"!subtitulo.trim()\"\n    [class.form-group__header--interactive]=\"headerIsInteractive\"\n    [attr.role]=\"headerIsInteractive ? 'button' : null\"\n    [attr.tabindex]=\"headerIsInteractive ? 0 : null\"\n    [attr.aria-expanded]=\"headerIsInteractive ? !isCollapsed : null\"\n    [attr.aria-disabled]=\"disabled ? true : null\"\n    (click)=\"onHeaderClick()\"\n    (keydown)=\"onHeaderKeydown($event)\"\n  >\n    <div\n      class=\"form-group__header-main\"\n      [class.form-group__header-main--single-line]=\"!subtitulo.trim()\"\n    >\n      <span\n        class=\"form-group__chevron\"\n        [class.form-group__chevron--locked]=\"!collapsible || !foldable\"\n        aria-hidden=\"true\"\n      >\n        @if (collapsible && foldable && isCollapsed) {\n          <svg class=\"form-group__icon-svg\" viewBox=\"0 0 320 512\" aria-hidden=\"true\" focusable=\"false\">\n            <path\n              fill=\"currentColor\"\n              d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\n            />\n          </svg>\n        } @else {\n          <svg class=\"form-group__icon-svg\" viewBox=\"0 0 512 512\" aria-hidden=\"true\" focusable=\"false\">\n            <path\n              fill=\"currentColor\"\n              d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"\n            />\n          </svg>\n        }\n      </span>\n      <div class=\"form-group__titles\">\n        @if (titulo.trim()) {\n          <h3 class=\"form-group__title\">{{ titulo }}</h3>\n        }\n        @if (subtitulo.trim()) {\n          <p class=\"form-group__subtitle\">{{ subtitulo }}</p>\n        }\n      </div>\n    </div>\n    <div class=\"form-group__header-trailing\">\n      <span\n        class=\"form-group__invalid-flag\"\n        [class.form-group__invalid-flag--visible]=\"invalidFlagVisible\"\n        [attr.role]=\"invalidFlagVisible ? 'img' : null\"\n        [attr.aria-label]=\"invalidFlagVisible ? 'Existem erros de valida\u00E7\u00E3o neste grupo' : null\"\n        [attr.aria-hidden]=\"invalidFlagVisible ? null : 'true'\"\n        [attr.title]=\"invalidFlagVisible ? 'Existem erros de valida\u00E7\u00E3o neste grupo' : null\"\n      >\n        <svg class=\"form-group__icon-svg form-group__icon-svg--warning\" viewBox=\"0 0 512 512\" aria-hidden=\"true\" focusable=\"false\">\n          <path\n            fill=\"currentColor\"\n            d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"\n          />\n        </svg>\n      </span>\n      @if (canMoveUp || canMoveDown) {\n        <div class=\"form-group__reorder\" (click)=\"$event.stopPropagation()\">\n          @if (canMoveUp) {\n            <button\n              type=\"button\"\n              class=\"form-group__reorder-btn\"\n              [disabled]=\"disabled\"\n              aria-label=\"Mover grupo para cima\"\n              (click)=\"onMoveUpClick($event)\"\n            >\n              <svg class=\"form-group__icon-svg\" viewBox=\"0 0 384 512\" aria-hidden=\"true\" focusable=\"false\">\n                <path\n                  fill=\"currentColor\"\n                  d=\"M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z\"\n                />\n              </svg>\n            </button>\n          }\n          @if (canMoveDown) {\n            <button\n              type=\"button\"\n              class=\"form-group__reorder-btn\"\n              [disabled]=\"disabled\"\n              aria-label=\"Mover grupo para baixo\"\n              (click)=\"onMoveDownClick($event)\"\n            >\n              <svg class=\"form-group__icon-svg\" viewBox=\"0 0 384 512\" aria-hidden=\"true\" focusable=\"false\">\n                <path\n                  fill=\"currentColor\"\n                  d=\"M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\"\n                />\n              </svg>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n}\n\n@if (renderBodyInDom) {\n  <div class=\"form-group__body\" [class.form-group__body--collapsed-hidden]=\"bodyVisuallyHidden\">\n    <div\n      class=\"form-group__body-stack\"\n      [class.form-group__body-stack--neutral]=\"skipBodyChildStacking\"\n    >\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box;margin:0;scroll-margin-top:1.25rem;scroll-margin-bottom:.5rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle){border:1px solid var(--app-color-border, #e8eaed);border-radius:12px;background:var(--app-color-surface, #fff);padding:0;overflow:hidden;transition:border-color .28s ease,box-shadow .28s ease}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed{border-color:var(--app-color-border, #e4e6ea);box-shadow:none}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded{border-color:var(--app-color-border-strong, #d4dce8);box-shadow:0 1px 2px var(--app-color-border-subtle, rgba(22, 40, 72, .05)),0 4px 18px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07))}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle) .form-group__header{margin:0;padding:.65rem 1rem .75rem;border-radius:0}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle) .form-group__header.form-group__header--single-line{padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed .form-group__header{padding-bottom:.7rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsible.form-group--collapsed .form-group__header.form-group__header--single-line{padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header{margin-bottom:0;padding-bottom:.65rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header.form-group__header--single-line{margin-bottom:0;padding:.7rem 1rem}:host.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__body{padding:.9rem 1rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header{margin-bottom:0;padding-bottom:.5rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header.form-group__header--single-line{margin-bottom:0;padding:.55rem .85rem}:host.form-group--dense.form-group--default:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__body{padding:.7rem .85rem}.form-group__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin:0 0 1rem;padding:.35rem 0;border-radius:8px;outline:none}.form-group__header--interactive{cursor:pointer;user-select:none;-webkit-user-select:none}.form-group__header--interactive:hover:not([aria-disabled=true]){background:var(--app-color-group-header-hover, rgba(43, 127, 217, .06))}.form-group__header--interactive:focus-visible{box-shadow:0 0 0 2px var(--app-color-focus-ring, rgba(43, 127, 217, .25))}.form-group__header--single-line{align-items:center}.form-group__header-main{display:flex;align-items:flex-start;gap:.5rem;min-width:0;flex:1}.form-group__header-main--single-line{align-items:center}.form-group__header-main--single-line .form-group__title{margin-bottom:0}.form-group__header-main--single-line .form-group__chevron{margin-top:0}.form-group__chevron{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-top:.1rem;flex-shrink:0;color:var(--ui-field-float-prefix-color, #5a7fa3);font-size:.75rem}.form-group__icon-svg{display:block;width:1em;height:1em;flex-shrink:0}.form-group__icon-svg--warning{width:1.05em;height:1.05em}.form-group__chevron--locked{color:var(--ui-form-group-chevron-locked, #9aa3ad)}.form-group__titles{min-width:0;flex:1}.form-group__header--single-line .form-group__titles{display:flex;align-items:center}.form-group__title{margin:0 0 .2rem;font-size:1.05rem;font-weight:600;line-height:1.35;color:var(--ui-field-label-color, #1a1a1a)}.form-group__subtitle{margin:0;font-size:.85rem;line-height:1.4;color:var(--app-color-text-muted, #525252)}.form-group__header-trailing{display:flex;flex-shrink:0;align-items:flex-start;gap:.35rem}.form-group__header--single-line .form-group__header-trailing{align-items:center}.form-group__header--single-line .form-group__invalid-flag{margin-top:0}.form-group__invalid-flag{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-top:.1rem;font-size:1.05rem;line-height:1;color:var(--app-color-error, #c62828);cursor:inherit;opacity:0;visibility:hidden;pointer-events:none;transform:scale(.92);transition:opacity .22s ease,visibility .22s ease,transform .22s ease}.form-group__invalid-flag--visible{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}.form-group__reorder{display:flex;flex-shrink:0;gap:.25rem;align-items:center}.form-group__reorder-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color, #5a7fa3);cursor:pointer;transition:background .15s ease,color .15s ease}.form-group__reorder-btn:hover:not(:disabled){background:var(--app-color-hover-bg-strong, rgba(90, 127, 163, .12));color:var(--ui-field-float-label-top-color, #4a6d8c)}.form-group__reorder-btn:disabled{cursor:not-allowed;opacity:.45}.form-group__body{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.form-group__body-stack{display:flex;flex-direction:column;gap:inherit;min-width:0;width:100%}.form-group__body-stack--neutral{display:block;gap:unset}:host ::ng-deep .form-group__body-stack:not(.form-group__body-stack--neutral)>*{display:flex;flex-direction:column;gap:inherit;min-width:0}.form-group__body--collapsed-hidden{display:none}:host.form-group--dense .form-group__header{margin-bottom:.65rem;padding-block:.2rem}:host.form-group--dense .form-group__title{font-size:1rem}:host.form-group--dense .form-group__body{gap:.5rem}:host.form-group--disabled{opacity:.72;pointer-events:none}:host.form-group--disabled .form-group__reorder{pointer-events:none}:host.form-group--outlined{padding:1rem 1rem 1.25rem;border:1px solid var(--ui-field-float-border, #b6cce5);border-radius:var(--ui-field-float-border-radius, 14px);background:var(--ui-field-float-bg, #f3f7fb)}:host.form-group--subtle{padding:.75rem .85rem 1rem;border-radius:10px;background:var(--app-color-background, #fafafa)}:host.form-group--divider:not(.form-group--outlined):not(.form-group--subtle):not(.form-group--default) .form-group__header{border-bottom:1px solid var(--app-color-border, #e5e5e5);padding-bottom:.65rem;margin-bottom:1rem}\n"] }]
         }], propDecorators: { titulo: [{
                 type: Input,
                 args: [{ required: true }]