structra-ui 0.1.30 → 0.1.32

package/README.md

@@ -1,59 +1,61 @@
 # structra-ui
 
-Biblioteca **Angular** da stack **Structra** para interfaces consistentes: componentes, layout de formulários e padrões de UI reutilizáveis entre produtos.
+Biblioteca **Angular 21** da Structra: componentes, formulários e padrões de UI reutilizáveis.
 
-**Documentação e exemplos:** [StructraLab](https://structralab.com/)
+**Exemplos ao vivo:** [StructraLab](https://structralab.com/)
 
 ## Instalação
 
-Com **npm 7 ou superior**, um comando instala a lib e resolve os **peer dependencies** obrigatórios na raiz do projeto (Angular, Material, CDK, Router, AG Grid, RxJS, Zone.js):
+**Com npm 7 ou superior** (recomendado): um comando instala a lib e, em geral, os **peer dependencies** na raiz do projeto.
 
 ```bash
 npm install structra-ui
 ```
 
-Se usar **npm 6 ou anterior**, instale explicitamente os mesmos pacotes e versões indicados em `peerDependencies` no `package.json` do npm.
+Com **npm 6** (ou se os peers não forem instalados), instala explicitamente o que falta. O mínimo extra em relação a uma app Angular 21 típica costuma ser **AG Grid** e **Material/CDK/Router**, se ainda não existirem:
 
-**Compatibilidade**
-
-- **Angular 21** (`^21.2.7` nos peers): sem suporte para Angular 22.
-- **Material e CDK** obrigatórios; **Router** obrigatório; **AG Grid** obrigatório; **RxJS** e **Zone.js** obrigatórios — nada é opcional no `package.json` da lib.
+```bash
+npm install structra-ui ag-grid-community ag-grid-angular @angular/material @angular/cdk @angular/router
+```
 
-## Estilos globais (automático)
+Versões: segue as gamas em `peerDependencies` do `package.json` publicado (Angular **21.2.x**, AG Grid **35.x**, etc.).
 
-**Não precisa** de adicionar nada ao `angular.json` → `styles` por causa da Structra: ao fazer `import { … } from 'structra-ui'`, o bundle publicado (`fesm2022/structra-ui.mjs`) inclui no topo `import '../structra-ui.css'`, e o **Angular Application builder** segue esse import e injeta o tema (tokens, Material, AG Grid, CDK, etc.) na app.
+## AG Grid (grelhas)
 
-Requisitos no projeto destino:
+Os componentes de **grelha** da lib dependem de **`ag-grid-community`** e **`ag-grid-angular`**. Sem estes pacotes, o build ou o runtime podem falhar ao usar esses componentes.
 
-1. **`npm run lib:build`** no monorepo antes de publicar (não publique só `ng build structra-ui`), senão o `.css` e o patch ao `.mjs` não existem.
-2. O pacote em `node_modules/structra-ui/` tem de conter **`structra-ui.css`**, a pasta **`webfonts/`** (Font Awesome 6 offline) e `fesm2022/structra-ui.mjs`. Os ícones usam classes `fa-solid …` com fontes locais — **sem CDN**.
+Além disso, o AG Grid 33+ exige **registar os módulos Community uma vez** na aplicação, antes de montar qualquer grelha. Exemplo mínimo (por exemplo em `main.ts`, antes de `bootstrapApplication`):
 
-**Opcional (duplicar tema):** só se quiseres carregar o CSS **antes** de qualquer import TypeScript da lib, podes ainda listar em `angular.json` → `styles` o `node_modules/structra-ui/structra-ui.css` ou a ponte `structra-ui.scss` — não é obrigatório para «funcionar».
+```ts
+import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
 
-**`import 'structra-ui/styles'`** em `main.ts` também funciona (export `./styles` → mesmo CSS), mas **não é necessário** se já importas componentes ou símbolos de `'structra-ui'`.
+ModuleRegistry.registerModules([AllCommunityModule]);
+```
 
-**Atenção:** `import type { … } from 'structra-ui'` é apagado em compile-time e **não** executa o módulo — o tema **não** carrega. Garante pelo menos um `import { … }` em runtime ou `import 'structra-ui/styles'`.
+## Estilos globais
 
-**AG Grid 35+:** registe os módulos Community uma vez na app (ex. `ModuleRegistry.registerModules([AllCommunityModule])` em `main.ts`).
+Ao importar algo de `structra-ui` em runtime (por exemplo `import { TextFieldComponent } from 'structra-ui'`), o tema global (Material, tokens, AG Grid, ícones, Roboto, etc.) entra pelo ficheiro publicado `structra-ui.css`. Não é obrigatório repetir isso no `angular.json` → `styles`.
 
-**Importar componentes:** `import { TextFieldComponent } from 'structra-ui';` e use em `imports: [TextFieldComponent, …]` do `@Component`. No `tsconfig.json` da app, prefira `"moduleResolution": "bundler"` ou `"node16"` para o Node resolver o campo `exports` do pacote.
+**Nota:** `import type { … } from 'structra-ui'` não carrega o CSS do tema — usa um import de valor ou `import 'structra-ui/styles'`.
 
-## Build do pacote
+## Build do pacote (mantenedores do monorepo)
 
-A entrada publicada é **`src/structra-public-api.ts`** na raiz do monorepo (ver `ng-package.json`). O comando:
+Na raiz do repositório `web-components`:
 
 ```bash
 npm run lib:build
 ```
 
-Gera `dist/structra-ui/` (JavaScript com import do tema + tipos + **`structra-ui.css`** + **`structra-ui.scss`** ponte). **Não use só `ng build structra-ui`** para publicar: o `npm run lib:build` corre o ng-packagr e depois gera o CSS, a ponte SCSS e **injeta** `import '../structra-ui.css'` no FESM.
+Gera `dist/structra-ui/` pronto para `npm pack` / `npm publish`. Não uses só `ng build structra-ui` para publicar: o tema global completa-se nesse script.
 
-## Uso
+## Uso rápido
 
 ```ts
-import { STRUCTRA_UI, BaseButtonComponent } from 'structra-ui';
+import { TextFieldComponent } from 'structra-ui';
 ```
 
+No `tsconfig` da app, convém `moduleResolution` `bundler` ou `node16` para resolver bem o campo `exports` do npm.
+
 ## Licença
 
 MIT

package/fesm2022/structra-ui.mjs

@@ -7505,11 +7505,11 @@ class AppDialogComponent {
         el.title = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AppDialogComponent, isStandalone: true, selector: "app-dialog", inputs: { open: ["open", "open", booleanAttribute], dialogHeading: ["title", "dialogHeading"], description: "description", ariaLabel: "ariaLabel", size: "size", allowOverlayDismiss: ["allowOverlayDismiss", "allowOverlayDismiss", booleanAttribute], showCloseButton: ["showCloseButton", "showCloseButton", booleanAttribute] }, outputs: { openChange: "openChange" }, host: { listeners: { "document:keydown": "onDocumentKeydown($event)" }, properties: { "class": "this.hostThemeClasses", "attr.title": "this.hostTitleAttr" } }, usesOnChanges: true, ngImport: i0, template: "@if (open) {\r\n  <div\r\n    class=\"app-dialog-backdrop\"\r\n    role=\"presentation\"\r\n    tabindex=\"-1\"\r\n    (click)=\"onBackdropClick()\"\r\n  ></div>\r\n  <div class=\"app-dialog-stage\" aria-hidden=\"false\">\r\n    <div\r\n      class=\"app-dialog-panel\"\r\n      [class.app-dialog-panel--sm]=\"size === LibDialogSize.Sm\"\r\n      [class.app-dialog-panel--md]=\"size === LibDialogSize.Md\"\r\n      [class.app-dialog-panel--lg]=\"size === LibDialogSize.Lg\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      [attr.aria-labelledby]=\"\r\n        dialogHeading.trim() ? titleId : description.trim() ? descriptionId : null\r\n      \"\r\n      [attr.aria-label]=\"!dialogHeading.trim() && !description.trim() ? ariaLabel : null\"\r\n      [attr.aria-describedby]=\"\r\n        dialogHeading.trim() && description.trim() ? descriptionId : null\r\n      \"\r\n      cdkTrapFocus\r\n      [cdkTrapFocusAutoCapture]=\"true\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      @if (dialogHeading.trim()) {\r\n        <header class=\"app-dialog-header\">\r\n          <h2 class=\"app-dialog-title\" [id]=\"titleId\">{{ dialogHeading }}</h2>\r\n          @if (showCloseButton) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"app-dialog-close\"\r\n              aria-label=\"Fechar di\u00E1logo\"\r\n              (click)=\"requestClose()\"\r\n            >\r\n              <span aria-hidden=\"true\">&times;</span>\r\n            </button>\r\n          }\r\n        </header>\r\n      }\r\n      @if (description.trim()) {\r\n        <p class=\"app-dialog-description\" [id]=\"descriptionId\">{{ description }}</p>\r\n      }\r\n      <div class=\"app-dialog-body\">\r\n        <ng-content />\r\n      </div>\r\n      <footer class=\"app-dialog-footer\">\r\n        <ng-content select=\"[appDialogFooter]\" />\r\n      </footer>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.app-dialog-backdrop{position:fixed;inset:0;z-index:var(--app-z-dialog, 1200);background:#1a2f456b;backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05);pointer-events:auto}.app-dialog-stage{position:fixed;inset:0;z-index:calc(var(--app-z-dialog, 1200) + 1);display:flex;align-items:center;justify-content:center;padding:min(1.5rem,4vw);box-sizing:border-box;pointer-events:none;background:transparent}.app-dialog-panel{position:relative;z-index:0;display:flex;flex-direction:column;max-height:min(88vh,40rem);width:100%;pointer-events:auto;overflow:hidden;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;box-sizing:border-box;border-radius:10px;border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12));background:var(--app-color-surface, #fff);box-shadow:0 4px 6px -1px #00000014,0 12px 28px -8px #1a2f452e;outline:none;animation:app-lib-dialog-panel-in .28s cubic-bezier(.22,1,.36,1) both}.app-dialog-panel--sm{max-width:min(28rem,94vw)}.app-dialog-panel--md{max-width:min(40rem,94vw)}.app-dialog-panel--lg{max-width:min(56rem,96vw)}@media(prefers-reduced-motion:reduce){.app-dialog-panel{animation:none}}.app-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:1rem 1rem .65rem;border-bottom:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));flex:0 0 auto}.app-dialog-title{margin:0;font-size:1.05rem;font-weight:600;line-height:1.3;color:var(--app-color-text-primary, #1a2f45)}.app-dialog-description{margin:0;padding:.65rem 1rem;font-size:.88rem;line-height:1.45;color:var(--app-color-text-secondary, #5a7fa3);flex:0 0 auto}.app-dialog-close{flex:0 0 auto;width:2rem;height:2rem;margin:0;padding:0;border:1px solid var(--app-color-border, #d4d4d4);border-radius:6px;background:var(--app-color-surface-alt, #fff);color:var(--app-color-text-secondary, #5a7fa3);font-size:1.35rem;line-height:1;cursor:pointer}.app-dialog-close:hover{background:var(--app-color-hover-bg, rgba(43, 127, 217, .08))}.app-dialog-close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}.app-dialog-body{padding:1rem;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;font-size:.9rem;line-height:1.5;color:var(--app-color-text-primary, #1a2f45)}.app-dialog-footer{flex:0 0 auto;padding:.65rem 1rem 1rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.app-dialog-footer:empty{display:none;padding:0;border:none}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AppDialogComponent, isStandalone: true, selector: "app-dialog", inputs: { open: ["open", "open", booleanAttribute], dialogHeading: ["title", "dialogHeading"], description: "description", ariaLabel: "ariaLabel", size: "size", allowOverlayDismiss: ["allowOverlayDismiss", "allowOverlayDismiss", booleanAttribute], showCloseButton: ["showCloseButton", "showCloseButton", booleanAttribute] }, outputs: { openChange: "openChange" }, host: { listeners: { "document:keydown": "onDocumentKeydown($event)" }, properties: { "class": "this.hostThemeClasses", "attr.title": "this.hostTitleAttr" } }, usesOnChanges: true, ngImport: i0, template: "@if (open) {\r\n  <div\r\n    class=\"app-dialog-backdrop\"\r\n    role=\"presentation\"\r\n    tabindex=\"-1\"\r\n    (click)=\"onBackdropClick()\"\r\n  ></div>\r\n  <div class=\"app-dialog-stage\" aria-hidden=\"false\">\r\n    <div\r\n      class=\"app-dialog-panel\"\r\n      [class.app-dialog-panel--sm]=\"size === LibDialogSize.Sm\"\r\n      [class.app-dialog-panel--md]=\"size === LibDialogSize.Md\"\r\n      [class.app-dialog-panel--lg]=\"size === LibDialogSize.Lg\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      [attr.aria-labelledby]=\"\r\n        dialogHeading.trim() ? titleId : description.trim() ? descriptionId : null\r\n      \"\r\n      [attr.aria-label]=\"!dialogHeading.trim() && !description.trim() ? ariaLabel : null\"\r\n      [attr.aria-describedby]=\"\r\n        dialogHeading.trim() && description.trim() ? descriptionId : null\r\n      \"\r\n      cdkTrapFocus\r\n      [cdkTrapFocusAutoCapture]=\"true\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      @if (dialogHeading.trim()) {\r\n        <header class=\"app-dialog-header\">\r\n          <h2 class=\"app-dialog-title\" [id]=\"titleId\">{{ dialogHeading }}</h2>\r\n          @if (showCloseButton) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"app-dialog-close\"\r\n              aria-label=\"Fechar di\u00E1logo\"\r\n              (click)=\"requestClose()\"\r\n            >\r\n              <span aria-hidden=\"true\">&times;</span>\r\n            </button>\r\n          }\r\n        </header>\r\n      }\r\n      @if (description.trim()) {\r\n        <p class=\"app-dialog-description\" [id]=\"descriptionId\">{{ description }}</p>\r\n      }\r\n      <div class=\"app-dialog-body\">\r\n        <ng-content />\r\n      </div>\r\n      <footer class=\"app-dialog-footer\">\r\n        <ng-content select=\"[appDialogFooter]\" />\r\n      </footer>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.app-dialog-backdrop{position:fixed;inset:0;z-index:var(--app-z-dialog, 1200);background:#1a2f456b;backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05);pointer-events:auto}.app-dialog-stage{position:fixed;inset:0;z-index:calc(var(--app-z-dialog, 1200) + 1);display:flex;align-items:center;justify-content:center;padding:min(1.5rem,4vw);box-sizing:border-box;pointer-events:none;background:transparent}.app-dialog-panel{position:relative;z-index:0;display:flex;flex-direction:column;max-height:min(88vh,40rem);width:100%;pointer-events:auto;overflow:hidden;font-family:inherit;box-sizing:border-box;border-radius:10px;border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12));background:var(--app-color-surface, #fff);box-shadow:0 4px 6px -1px #00000014,0 12px 28px -8px #1a2f452e;outline:none;animation:app-lib-dialog-panel-in .28s cubic-bezier(.22,1,.36,1) both}.app-dialog-panel--sm{max-width:min(28rem,94vw)}.app-dialog-panel--md{max-width:min(40rem,94vw)}.app-dialog-panel--lg{max-width:min(56rem,96vw)}@media(prefers-reduced-motion:reduce){.app-dialog-panel{animation:none}}.app-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:1rem 1rem .65rem;border-bottom:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));flex:0 0 auto}.app-dialog-title{margin:0;font-size:1.05rem;font-weight:600;line-height:1.3;color:var(--app-color-text-primary, #1a2f45)}.app-dialog-description{margin:0;padding:.65rem 1rem;font-size:.88rem;line-height:1.45;color:var(--app-color-text-secondary, #5a7fa3);flex:0 0 auto}.app-dialog-close{flex:0 0 auto;width:2rem;height:2rem;margin:0;padding:0;border:1px solid var(--app-color-border, #d4d4d4);border-radius:6px;background:var(--app-color-surface-alt, #fff);color:var(--app-color-text-secondary, #5a7fa3);font-size:1.35rem;line-height:1;cursor:pointer}.app-dialog-close:hover{background:var(--app-color-hover-bg, rgba(43, 127, 217, .08))}.app-dialog-close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}.app-dialog-body{padding:1rem;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;font-size:.9rem;line-height:1.5;color:var(--app-color-text-primary, #1a2f45)}.app-dialog-footer{flex:0 0 auto;padding:.65rem 1rem 1rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.app-dialog-footer:empty{display:none;padding:0;border:none}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-dialog', imports: [CdkTrapFocus], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open) {\r\n  <div\r\n    class=\"app-dialog-backdrop\"\r\n    role=\"presentation\"\r\n    tabindex=\"-1\"\r\n    (click)=\"onBackdropClick()\"\r\n  ></div>\r\n  <div class=\"app-dialog-stage\" aria-hidden=\"false\">\r\n    <div\r\n      class=\"app-dialog-panel\"\r\n      [class.app-dialog-panel--sm]=\"size === LibDialogSize.Sm\"\r\n      [class.app-dialog-panel--md]=\"size === LibDialogSize.Md\"\r\n      [class.app-dialog-panel--lg]=\"size === LibDialogSize.Lg\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      [attr.aria-labelledby]=\"\r\n        dialogHeading.trim() ? titleId : description.trim() ? descriptionId : null\r\n      \"\r\n      [attr.aria-label]=\"!dialogHeading.trim() && !description.trim() ? ariaLabel : null\"\r\n      [attr.aria-describedby]=\"\r\n        dialogHeading.trim() && description.trim() ? descriptionId : null\r\n      \"\r\n      cdkTrapFocus\r\n      [cdkTrapFocusAutoCapture]=\"true\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      @if (dialogHeading.trim()) {\r\n        <header class=\"app-dialog-header\">\r\n          <h2 class=\"app-dialog-title\" [id]=\"titleId\">{{ dialogHeading }}</h2>\r\n          @if (showCloseButton) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"app-dialog-close\"\r\n              aria-label=\"Fechar di\u00E1logo\"\r\n              (click)=\"requestClose()\"\r\n            >\r\n              <span aria-hidden=\"true\">&times;</span>\r\n            </button>\r\n          }\r\n        </header>\r\n      }\r\n      @if (description.trim()) {\r\n        <p class=\"app-dialog-description\" [id]=\"descriptionId\">{{ description }}</p>\r\n      }\r\n      <div class=\"app-dialog-body\">\r\n        <ng-content />\r\n      </div>\r\n      <footer class=\"app-dialog-footer\">\r\n        <ng-content select=\"[appDialogFooter]\" />\r\n      </footer>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.app-dialog-backdrop{position:fixed;inset:0;z-index:var(--app-z-dialog, 1200);background:#1a2f456b;backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05);pointer-events:auto}.app-dialog-stage{position:fixed;inset:0;z-index:calc(var(--app-z-dialog, 1200) + 1);display:flex;align-items:center;justify-content:center;padding:min(1.5rem,4vw);box-sizing:border-box;pointer-events:none;background:transparent}.app-dialog-panel{position:relative;z-index:0;display:flex;flex-direction:column;max-height:min(88vh,40rem);width:100%;pointer-events:auto;overflow:hidden;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;box-sizing:border-box;border-radius:10px;border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12));background:var(--app-color-surface, #fff);box-shadow:0 4px 6px -1px #00000014,0 12px 28px -8px #1a2f452e;outline:none;animation:app-lib-dialog-panel-in .28s cubic-bezier(.22,1,.36,1) both}.app-dialog-panel--sm{max-width:min(28rem,94vw)}.app-dialog-panel--md{max-width:min(40rem,94vw)}.app-dialog-panel--lg{max-width:min(56rem,96vw)}@media(prefers-reduced-motion:reduce){.app-dialog-panel{animation:none}}.app-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:1rem 1rem .65rem;border-bottom:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));flex:0 0 auto}.app-dialog-title{margin:0;font-size:1.05rem;font-weight:600;line-height:1.3;color:var(--app-color-text-primary, #1a2f45)}.app-dialog-description{margin:0;padding:.65rem 1rem;font-size:.88rem;line-height:1.45;color:var(--app-color-text-secondary, #5a7fa3);flex:0 0 auto}.app-dialog-close{flex:0 0 auto;width:2rem;height:2rem;margin:0;padding:0;border:1px solid var(--app-color-border, #d4d4d4);border-radius:6px;background:var(--app-color-surface-alt, #fff);color:var(--app-color-text-secondary, #5a7fa3);font-size:1.35rem;line-height:1;cursor:pointer}.app-dialog-close:hover{background:var(--app-color-hover-bg, rgba(43, 127, 217, .08))}.app-dialog-close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}.app-dialog-body{padding:1rem;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;font-size:.9rem;line-height:1.5;color:var(--app-color-text-primary, #1a2f45)}.app-dialog-footer{flex:0 0 auto;padding:.65rem 1rem 1rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.app-dialog-footer:empty{display:none;padding:0;border:none}\n"] }]
+            args: [{ selector: 'app-dialog', imports: [CdkTrapFocus], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open) {\r\n  <div\r\n    class=\"app-dialog-backdrop\"\r\n    role=\"presentation\"\r\n    tabindex=\"-1\"\r\n    (click)=\"onBackdropClick()\"\r\n  ></div>\r\n  <div class=\"app-dialog-stage\" aria-hidden=\"false\">\r\n    <div\r\n      class=\"app-dialog-panel\"\r\n      [class.app-dialog-panel--sm]=\"size === LibDialogSize.Sm\"\r\n      [class.app-dialog-panel--md]=\"size === LibDialogSize.Md\"\r\n      [class.app-dialog-panel--lg]=\"size === LibDialogSize.Lg\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      [attr.aria-labelledby]=\"\r\n        dialogHeading.trim() ? titleId : description.trim() ? descriptionId : null\r\n      \"\r\n      [attr.aria-label]=\"!dialogHeading.trim() && !description.trim() ? ariaLabel : null\"\r\n      [attr.aria-describedby]=\"\r\n        dialogHeading.trim() && description.trim() ? descriptionId : null\r\n      \"\r\n      cdkTrapFocus\r\n      [cdkTrapFocusAutoCapture]=\"true\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      @if (dialogHeading.trim()) {\r\n        <header class=\"app-dialog-header\">\r\n          <h2 class=\"app-dialog-title\" [id]=\"titleId\">{{ dialogHeading }}</h2>\r\n          @if (showCloseButton) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"app-dialog-close\"\r\n              aria-label=\"Fechar di\u00E1logo\"\r\n              (click)=\"requestClose()\"\r\n            >\r\n              <span aria-hidden=\"true\">&times;</span>\r\n            </button>\r\n          }\r\n        </header>\r\n      }\r\n      @if (description.trim()) {\r\n        <p class=\"app-dialog-description\" [id]=\"descriptionId\">{{ description }}</p>\r\n      }\r\n      <div class=\"app-dialog-body\">\r\n        <ng-content />\r\n      </div>\r\n      <footer class=\"app-dialog-footer\">\r\n        <ng-content select=\"[appDialogFooter]\" />\r\n      </footer>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.app-dialog-backdrop{position:fixed;inset:0;z-index:var(--app-z-dialog, 1200);background:#1a2f456b;backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05);pointer-events:auto}.app-dialog-stage{position:fixed;inset:0;z-index:calc(var(--app-z-dialog, 1200) + 1);display:flex;align-items:center;justify-content:center;padding:min(1.5rem,4vw);box-sizing:border-box;pointer-events:none;background:transparent}.app-dialog-panel{position:relative;z-index:0;display:flex;flex-direction:column;max-height:min(88vh,40rem);width:100%;pointer-events:auto;overflow:hidden;font-family:inherit;box-sizing:border-box;border-radius:10px;border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12));background:var(--app-color-surface, #fff);box-shadow:0 4px 6px -1px #00000014,0 12px 28px -8px #1a2f452e;outline:none;animation:app-lib-dialog-panel-in .28s cubic-bezier(.22,1,.36,1) both}.app-dialog-panel--sm{max-width:min(28rem,94vw)}.app-dialog-panel--md{max-width:min(40rem,94vw)}.app-dialog-panel--lg{max-width:min(56rem,96vw)}@media(prefers-reduced-motion:reduce){.app-dialog-panel{animation:none}}.app-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:1rem 1rem .65rem;border-bottom:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));flex:0 0 auto}.app-dialog-title{margin:0;font-size:1.05rem;font-weight:600;line-height:1.3;color:var(--app-color-text-primary, #1a2f45)}.app-dialog-description{margin:0;padding:.65rem 1rem;font-size:.88rem;line-height:1.45;color:var(--app-color-text-secondary, #5a7fa3);flex:0 0 auto}.app-dialog-close{flex:0 0 auto;width:2rem;height:2rem;margin:0;padding:0;border:1px solid var(--app-color-border, #d4d4d4);border-radius:6px;background:var(--app-color-surface-alt, #fff);color:var(--app-color-text-secondary, #5a7fa3);font-size:1.35rem;line-height:1;cursor:pointer}.app-dialog-close:hover{background:var(--app-color-hover-bg, rgba(43, 127, 217, .08))}.app-dialog-close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}.app-dialog-body{padding:1rem;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;font-size:.9rem;line-height:1.5;color:var(--app-color-text-primary, #1a2f45)}.app-dialog-footer{flex:0 0 auto;padding:.65rem 1rem 1rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.app-dialog-footer:empty{display:none;padding:0;border:none}\n"] }]
         }], propDecorators: { hostThemeClasses: [{
                 type: HostBinding,
                 args: ['class']