structra-ui 0.1.60 → 0.1.61

package/fesm2022/structra-ui.mjs

@@ -5576,6 +5576,11 @@ class FormGroupComponent {
             }
             parts.push(this.collapsedInternal ? 'form-group--collapsed' : 'form-group--expanded');
         }
+        else {
+            /* Sem colapso: o corpo está sempre “aberto” — `form-group--expanded` liga a moldura/padding
+             * iguais ao grupo colapsável expandido (bordas cinza na lib e no consumo npm). */
+            parts.push('form-group--expanded');
+        }
         return parts.join(' ');
     }
     get showHeaderBar() {
@@ -5585,6 +5590,7 @@ class FormGroupComponent {
         return (this.titulo.trim().length > 0 ||
             this.subtitulo.trim().length > 0 ||
             this.collapsible ||
+            !this.collapsible /* seta + moldura com `collapsible=false` (prod/npm sem depender de FA) */ ||
             this.canMoveUp ||
             this.canMoveDown ||
             this.invalidFlagVisible);
@@ -5678,11 +5684,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) {\r\n  <div\r\n    class=\"form-group__header\"\r\n    [class.form-group__header--interactive]=\"headerIsInteractive\"\r\n    [attr.role]=\"headerIsInteractive ? 'button' : null\"\r\n    [attr.tabindex]=\"headerIsInteractive ? 0 : null\"\r\n    [attr.aria-expanded]=\"headerIsInteractive ? !isCollapsed : null\"\r\n    [attr.aria-disabled]=\"disabled ? true : null\"\r\n    (click)=\"onHeaderClick()\"\r\n    (keydown)=\"onHeaderKeydown($event)\"\r\n  >\r\n    <div class=\"form-group__header-main\">\r\n      @if (collapsible && !disabled) {\r\n        <span\r\n          class=\"form-group__chevron\"\r\n          [class.form-group__chevron--locked]=\"!foldable\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          <i\r\n            class=\"fa-solid\"\r\n            [class.fa-chevron-right]=\"foldable && isCollapsed\"\r\n            [class.fa-chevron-down]=\"!foldable || !isCollapsed\"\r\n          ></i>\r\n        </span>\r\n      }\r\n      <div class=\"form-group__titles\">\r\n        @if (titulo.trim()) {\r\n          <h3 class=\"form-group__title\">{{ titulo }}</h3>\r\n        }\r\n        @if (subtitulo.trim()) {\r\n          <p class=\"form-group__subtitle\">{{ subtitulo }}</p>\r\n        }\r\n      </div>\r\n    </div>\r\n    <div class=\"form-group__header-trailing\">\r\n      <span\r\n        class=\"form-group__invalid-flag\"\r\n        [class.form-group__invalid-flag--visible]=\"invalidFlagVisible\"\r\n        [attr.role]=\"invalidFlagVisible ? 'img' : null\"\r\n        [attr.aria-label]=\"invalidFlagVisible ? 'Existem erros de valida\u00E7\u00E3o neste grupo' : null\"\r\n        [attr.aria-hidden]=\"invalidFlagVisible ? null : 'true'\"\r\n        [attr.title]=\"invalidFlagVisible ? 'Existem erros de valida\u00E7\u00E3o neste grupo' : null\"\r\n      >\r\n        <i class=\"fa-solid fa-triangle-exclamation\" aria-hidden=\"true\"></i>\r\n      </span>\r\n      @if (canMoveUp || canMoveDown) {\r\n        <div class=\"form-group__reorder\" (click)=\"$event.stopPropagation()\">\r\n          @if (canMoveUp) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"form-group__reorder-btn\"\r\n              [disabled]=\"disabled\"\r\n              aria-label=\"Mover grupo para cima\"\r\n              (click)=\"onMoveUpClick($event)\"\r\n            >\r\n              <i class=\"fa-solid fa-arrow-up\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          }\r\n          @if (canMoveDown) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"form-group__reorder-btn\"\r\n              [disabled]=\"disabled\"\r\n              aria-label=\"Mover grupo para baixo\"\r\n              (click)=\"onMoveDownClick($event)\"\r\n            >\r\n              <i class=\"fa-solid fa-arrow-down\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n\r\n@if (renderBodyInDom) {\r\n  <div class=\"form-group__body\" [class.form-group__body--collapsed-hidden]=\"bodyVisuallyHidden\">\r\n    <div\r\n      class=\"form-group__body-stack\"\r\n      [class.form-group__body-stack--neutral]=\"skipBodyChildStacking\"\r\n    >\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box;scroll-margin-top:.75rem;scroll-margin-bottom:.5rem}:host.form-group--collapsible: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--collapsible:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsed{border-color:var(--app-color-border, #e4e6ea);box-shadow:none}:host.form-group--collapsible: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--collapsible:not(.form-group--outlined):not(.form-group--subtle) .form-group__header{margin:0;padding:.65rem 1rem .75rem;border-radius:0}:host.form-group--collapsible:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsed .form-group__header{padding-bottom:.7rem}:host.form-group--collapsible:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header{margin-bottom:0;padding-bottom:.65rem}:host.form-group--collapsible:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__body{padding:.9rem 1rem}:host.form-group--dense.form-group--collapsible: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--collapsible: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-main{display:flex;align-items:flex-start;gap:.5rem;min-width:0;flex:1}.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__chevron--locked{color:var(--ui-form-group-chevron-locked, #9aa3ad)}.form-group__titles{min-width:0;flex:1}.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__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:.75rem;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--collapsible) .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--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 class=\"form-group__header-main\">\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;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--collapsible.form-group--collapsed .form-group__header{padding-bottom:.7rem}: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__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__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-main{display:flex;align-items:flex-start;gap:.5rem;min-width:0;flex:1}.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__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__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:.75rem;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 }); }
 }
 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) {\r\n  <div\r\n    class=\"form-group__header\"\r\n    [class.form-group__header--interactive]=\"headerIsInteractive\"\r\n    [attr.role]=\"headerIsInteractive ? 'button' : null\"\r\n    [attr.tabindex]=\"headerIsInteractive ? 0 : null\"\r\n    [attr.aria-expanded]=\"headerIsInteractive ? !isCollapsed : null\"\r\n    [attr.aria-disabled]=\"disabled ? true : null\"\r\n    (click)=\"onHeaderClick()\"\r\n    (keydown)=\"onHeaderKeydown($event)\"\r\n  >\r\n    <div class=\"form-group__header-main\">\r\n      @if (collapsible && !disabled) {\r\n        <span\r\n          class=\"form-group__chevron\"\r\n          [class.form-group__chevron--locked]=\"!foldable\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          <i\r\n            class=\"fa-solid\"\r\n            [class.fa-chevron-right]=\"foldable && isCollapsed\"\r\n            [class.fa-chevron-down]=\"!foldable || !isCollapsed\"\r\n          ></i>\r\n        </span>\r\n      }\r\n      <div class=\"form-group__titles\">\r\n        @if (titulo.trim()) {\r\n          <h3 class=\"form-group__title\">{{ titulo }}</h3>\r\n        }\r\n        @if (subtitulo.trim()) {\r\n          <p class=\"form-group__subtitle\">{{ subtitulo }}</p>\r\n        }\r\n      </div>\r\n    </div>\r\n    <div class=\"form-group__header-trailing\">\r\n      <span\r\n        class=\"form-group__invalid-flag\"\r\n        [class.form-group__invalid-flag--visible]=\"invalidFlagVisible\"\r\n        [attr.role]=\"invalidFlagVisible ? 'img' : null\"\r\n        [attr.aria-label]=\"invalidFlagVisible ? 'Existem erros de valida\u00E7\u00E3o neste grupo' : null\"\r\n        [attr.aria-hidden]=\"invalidFlagVisible ? null : 'true'\"\r\n        [attr.title]=\"invalidFlagVisible ? 'Existem erros de valida\u00E7\u00E3o neste grupo' : null\"\r\n      >\r\n        <i class=\"fa-solid fa-triangle-exclamation\" aria-hidden=\"true\"></i>\r\n      </span>\r\n      @if (canMoveUp || canMoveDown) {\r\n        <div class=\"form-group__reorder\" (click)=\"$event.stopPropagation()\">\r\n          @if (canMoveUp) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"form-group__reorder-btn\"\r\n              [disabled]=\"disabled\"\r\n              aria-label=\"Mover grupo para cima\"\r\n              (click)=\"onMoveUpClick($event)\"\r\n            >\r\n              <i class=\"fa-solid fa-arrow-up\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          }\r\n          @if (canMoveDown) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"form-group__reorder-btn\"\r\n              [disabled]=\"disabled\"\r\n              aria-label=\"Mover grupo para baixo\"\r\n              (click)=\"onMoveDownClick($event)\"\r\n            >\r\n              <i class=\"fa-solid fa-arrow-down\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n\r\n@if (renderBodyInDom) {\r\n  <div class=\"form-group__body\" [class.form-group__body--collapsed-hidden]=\"bodyVisuallyHidden\">\r\n    <div\r\n      class=\"form-group__body-stack\"\r\n      [class.form-group__body-stack--neutral]=\"skipBodyChildStacking\"\r\n    >\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box;scroll-margin-top:.75rem;scroll-margin-bottom:.5rem}:host.form-group--collapsible: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--collapsible:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsed{border-color:var(--app-color-border, #e4e6ea);box-shadow:none}:host.form-group--collapsible: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--collapsible:not(.form-group--outlined):not(.form-group--subtle) .form-group__header{margin:0;padding:.65rem 1rem .75rem;border-radius:0}:host.form-group--collapsible:not(.form-group--outlined):not(.form-group--subtle).form-group--collapsed .form-group__header{padding-bottom:.7rem}:host.form-group--collapsible:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__header{margin-bottom:0;padding-bottom:.65rem}:host.form-group--collapsible:not(.form-group--outlined):not(.form-group--subtle).form-group--expanded .form-group__body{padding:.9rem 1rem}:host.form-group--dense.form-group--collapsible: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--collapsible: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-main{display:flex;align-items:flex-start;gap:.5rem;min-width:0;flex:1}.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__chevron--locked{color:var(--ui-form-group-chevron-locked, #9aa3ad)}.form-group__titles{min-width:0;flex:1}.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__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:.75rem;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--collapsible) .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--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 class=\"form-group__header-main\">\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;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--collapsible.form-group--collapsed .form-group__header{padding-bottom:.7rem}: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__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__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-main{display:flex;align-items:flex-start;gap:.5rem;min-width:0;flex:1}.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__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__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:.75rem;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"] }]
         }], propDecorators: { titulo: [{
                 type: Input,
                 args: [{ required: true }]