mapa-library-ui 2.1.2 → 2.2.0

package/README.md

@@ -7,7 +7,7 @@ Construído com **ng-packagr** (Angular 20.3). Distribuído em **subpacotes** (_
 para que cada consumidor importe apenas o que usa.
 
 - Pacote npm: `mapa-library-ui`
-- Versão atual: **1.5.0**
+- Versão atual: **2.2.0**
 - Componentes: **standalone** (sem `NgModule`), prefixo de seletor `mapa-*`
 
 ---
@@ -34,7 +34,7 @@ fixa as versões. Garanta que o app já tenha (ou instale):
 "ng-apexcharts":       "^2.3.0",
 "ngx-mask":            "^20.0.3",
 "ngx-mat-select-search": "^8.0.4",
-"mapa-frontend-i18n":  "^2.0.0",
+"mapa-frontend-i18n":  "^2.2.0",
 "rxjs":                "^7.8.2",
 "ts-md5":              "^1.3.1"
 ```
@@ -113,7 +113,7 @@ setEnglish() {
 ```
 
 Os textos informados sofrem _merge_ sobre os defaults — você só precisa enviar as chaves que quer
-alterar. Grupos disponíveis: `common`, `filters`, `datepicker`, `capability`, `paginator`,
+alterar. Grupos disponíveis: `common`, `filters`, `datepicker`, `capability`, `report`, `paginator`,
 `warning`, `table`, `validation`.
 
 ---
@@ -128,12 +128,14 @@ com `includeSecondaries: true` no Module Federation.
 | `mapa-library-ui` | interfaces, `elements`, pipes, utils, helpers de i18n | Tipos e utilitários transversais (`TableColumn`, `DialogData`, `ElementOption`, `provideMapaUiTexts`, `MapaI18nService`, pipes de CPF/data…) |
 | `/authorize` | guard de rota | Guard de autorização (`canActivate`) |
 | `/benchmarking` | `<mapa-benchmark-chart>`, `<mapa-benchmark-indicator>` | Gráfico e indicador de benchmarking |
-| `/breadcrumb` | `<mapa-breadcrumb>` | Trilha de navegação |
-| `/button` | `<mapa-button>` | Botão (`color`, `disabled`, `clicked`) |
+| `/breadcrumb` | `<mapa-breadcrumb>` | Trilha de navegação (`items`, `separator`, `ariaLabel`) |
+| `/button` | `<mapa-button>` | Botão (`color`, `shape`, `fullWidth`, `disabled`, `clicked`) |
 | `/button-icon` | `<mapa-button-icon>` | Botão com ícone |
 | `/capability` | `<mapa-capability-*>` | Família de componentes de competências (comparativo, indicadores, intervalos, detalhe…) |
 | `/chart` | `<mapa-chart>` | Gráfico genérico (ApexCharts) |
 | `/checkbox` | `<mapa-checkbox>` | Checkbox |
+| `/classification-tag` | `<mapa-classification-tag>` | Classificação dinâmica com contraste e fallback neutro |
+| `/conclusion-card` | `<mapa-conclusion-card>` | Apresentação de conclusão, metadados e evento `edit` |
 | `/datepicker` | `<mapa-datepicker>` | Seletor de data nos modos `single`, `range` e `multiple` (via `element.mode`) |
 | `/dialog` | `<mapa-dialog>`, `openDialog()` | Diálogo + helper para abrir via `MatDialog` |
 | `/dropdown` | `<mapa-dropdown>` | Select com busca |
@@ -147,7 +149,17 @@ com `includeSecondaries: true` no Module Federation.
 | `/menu` | `<mapa-menu>`, `MenuItem`, `MenuActionEvent` | Menu de ações |
 | `/nav-list` | `<mapa-nav-list>` | Lista de navegação |
 | `/radio-button` | `<mapa-radio-button>` | Radio button |
+| `/report-group-profile` | `<mapa-report-group-profile-widget>` | Perfil de grupo: filtros no topo, pílula contínua por dimensão e legenda |
 | `/report-item` | `<mapa-report-item>` | Item de relatório |
+| `/report-ranking-table` | `<mapa-report-ranking-table-widget>` | Ranqueamento de dimensões com alternância de visão e ordenação |
+| `/report-legend` | `<mapa-report-legend>` | Legenda expansível de direções e faixas |
+| `/result-track` | `<mapa-result-track>` | Barra linear ou divergente com semântica de `meter` |
+| `/report-scale` | `<mapa-report-scale-widget>` | Escalas nos modos `summarized` e `detailed` |
+| `/report-indicators` | `<mapa-report-indicators-widget>` | Indicadores nos modos `list`, `chart` e `detailed` |
+| `/report-psychosocial` | `<mapa-report-psychosocial-widget>` | Média, fatores e dimensões psicossociais |
+| `/report-points` | `<mapa-report-points-widget>` | Pontos fortes e de atenção resumidos ou detalhados |
+| `/report-socioemotional` | `<mapa-report-socioemotional-widget>` | Competências, legendas, vulnerabilidades e gauge segmentado |
+| `/report-widgets` | todos os widgets acima | Subpath agregadora para composições de relatório |
 | `/scale` | `<mapa-scale>`, `<mapa-progressbar>`, `<mapa-details>` | Escala e barras de progresso |
 | `/scale-parameterization` | `<mapa-scale-parameterization>` | Parametrização de escalas |
 | `/services` | `LoaderService` | Serviços de infraestrutura (loader) |
@@ -163,6 +175,74 @@ com `includeSecondaries: true` no Module Federation.
 > [`package.json`](package.json). O surface público da raiz está em
 > [`src/public-api.ts`](src/public-api.ts).
 
+### Widgets de relatório
+
+Os widgets recebem contratos próprios (`MapaReportHeading`, grupos, dimensões,
+indicadores, pontos e classificações) exportados pela raiz. Eles não dependem de
+modelos ou serviços do projeto consumidor. Os modos são controláveis por
+`[(mode)]`, com os padrões `summarized` para escalas e pontos e `list` para
+indicadores.
+
+O tema pode ser ajustado no contêiner do relatório por meio dos tokens
+`--mapa-report-accent`, `--mapa-report-accent-soft`, `--mapa-report-surface`,
+`--mapa-report-surface-muted`, `--mapa-report-border`, `--mapa-report-text`,
+`--mapa-report-muted`, `--mapa-report-radius` e `--mapa-report-space`.
+
+#### Widgets de grupo (v2)
+
+`<mapa-report-group-profile-widget>` e `<mapa-report-ranking-table-widget>` são a
+versão nova dos widgets de grupo, para consumo pelo **mv-v2-frontend**. Os
+equivalentes antigos — `<mapa-capability-comparative>` e `<mapa-group-report>` —
+continuam intactos para o **mv-frontend**.
+
+**Perfil de grupo**
+
+```html
+<mapa-report-group-profile-widget [data]="profile" [heading]="heading">
+  <ng-container mapaReportGroupProfileFilters>
+    <mapa-dropdown [element]="groupDropdown" [formControl]="groupControl" />
+    <mapa-dropdown [element]="testDropdown" [formControl]="testControl" />
+    <mapa-dropdown [element]="scaleDropdown" [formControl]="scaleControl" />
+  </ng-container>
+</mapa-report-group-profile-widget>
+```
+
+- `heading` (`MapaReportHeading`) renderiza título e descrição **acima** dos filtros.
+- O conteúdo projetado com o atributo `mapaReportGroupProfileFilters` fica no
+  **topo**, em grid de até 3 colunas. Sem projeção o slot não ocupa espaço.
+- `data` (`MapaReportGroupProfileData`): cada dimensão vira uma **pílula contínua**
+  em que as fatias (`slices`) mudam de cor; os percentuais aparecem alinhados à
+  direita, acima da pílula. Fatias com `value: 0` são descartadas.
+- `slice.highlighted` marca a posição de uma pessoa dentro do grupo.
+- A **legenda** sai abaixo do gráfico, montada a partir das fatias efetivamente
+  desenhadas; use `legend` para sobrescrever ou `showLegend="false"` para ocultar.
+- Só existe **média do grupo** (`data.average`, controlada por `showAverage`).
+- `distributionLabel` e `averageLabel` são inputs com padrão pt-BR porque
+  `mapa-frontend-i18n` ainda não publica essas chaves.
+
+**Ranqueamento**
+
+```html
+<mapa-report-ranking-table-widget
+  [heading]="heading"
+  [views]="views"
+  [(view)]="view"
+  [showAverage]="true"
+  [note]="note"
+/>
+```
+
+- `views` (`MapaReportRankingView[]`) alimenta a alternância Grupo/Avaliados; o
+  switch só aparece quando mais de uma visão tem entradas, e a primeira coluna é
+  nomeada pela visão ativa (ou por `entryColumnLabel`).
+- Monta as colunas a partir das dimensões das entradas e ordena por
+  `classification.classificationId`, não pelo texto do chip.
+- As classificações usam `<mapa-classification-tag appearance="solid">` — o chip
+  é autocontido, sem depender de CSS do app consumidor.
+- `showScoreOnHover` (padrão `false`): com `true`, passar o mouse sobre a célula
+  troca o chip pela nota e pela direção. Desligado, a célula mostra só o chip.
+- `note` renderiza a nota de rodapé abaixo da tabela.
+
 ---
 
 ## Desenvolvimento

package/fesm2022/mapa-library-ui-src-lib-components-breadcrumb.mjs

@@ -6,14 +6,22 @@ import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 
 class MapaBreadcrumbComponent {
+    constructor() {
+        this.separator = '›';
+        this.ariaLabel = 'Breadcrumb';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaBreadcrumbComponent, isStandalone: true, selector: "mapa-breadcrumb", inputs: { items: "items" }, ngImport: i0, template: "<section class=\"mapa-breadcrumb\" *ngIf=\"items && items.length > 0\">\n  <span class=\"mapa-breadcrumb__item\" *ngFor=\"let item of items; let i = index\">\n    <a *ngIf=\"item.url; else common\" [href]=\"item.url\" [routerLink]=\"item.url\"\n      >{{ item.title }}</a\n    >\n    <ng-template #common>\n      <span\n        class=\"mapa-breadcrumb__item\"\n        [class.mapa-breadcrumb__item--highlight]=\"items.length === i + 1\"\n      >\n        {{ item.title }}</span\n      >\n    </ng-template>\n    <span class=\"mapa-breadcrumb__item--next\" *ngIf=\"i < items.length - 1\"\n      >></span\n    >\n  </span>\n</section>\n", styles: [".mapa-breadcrumb{display:flex;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);flex-direction:row;margin-bottom:32px}.mapa-breadcrumb__item{font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:#50575e}.mapa-breadcrumb__item a{text-decoration:none;color:#50575e}.mapa-breadcrumb__item--next{margin:0 6px}.mapa-breadcrumb__item--highlight{color:#ea561d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaBreadcrumbComponent, isStandalone: true, selector: "mapa-breadcrumb", inputs: { items: "items", separator: "separator", ariaLabel: "ariaLabel" }, ngImport: i0, template: "<nav\n  class=\"mapa-breadcrumb\"\n  *ngIf=\"items && items.length > 0\"\n  [attr.aria-label]=\"ariaLabel\"\n>\n  <ol class=\"mapa-breadcrumb__list\">\n    <li class=\"mapa-breadcrumb__item\" *ngFor=\"let item of items; let i = index\">\n      <a\n        *ngIf=\"item.url && i < items.length - 1; else common\"\n        [routerLink]=\"item.url\"\n      >\n        {{ item.title }}\n      </a>\n      <ng-template #common>\n        <span\n          [class.mapa-breadcrumb__item--highlight]=\"items.length === i + 1\"\n          [attr.aria-current]=\"items.length === i + 1 ? 'page' : null\"\n          >{{ item.title }}</span\n        >\n      </ng-template>\n      <span\n        class=\"mapa-breadcrumb__separator\"\n        *ngIf=\"i < items.length - 1\"\n        aria-hidden=\"true\"\n        >{{ separator }}</span\n      >\n    </li>\n  </ol>\n</nav>\n", styles: [".mapa-breadcrumb{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);margin-bottom:32px}.mapa-breadcrumb__list{align-items:center;display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}.mapa-breadcrumb__item{align-items:center;color:#657077;display:flex;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.mapa-breadcrumb__item a{text-decoration:none;color:inherit}.mapa-breadcrumb__item a:hover{color:#ff560b;text-decoration:underline;text-underline-offset:3px}.mapa-breadcrumb__item a:focus-visible{border-radius:3px;outline:2px solid #ff8a55;outline-offset:2px}.mapa-breadcrumb__item--highlight{color:#ff560b;font-weight:500}.mapa-breadcrumb__separator{color:#a7b0b5;margin:0 7px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-breadcrumb", imports: [CommonModule, RouterModule], standalone: true, template: "<section class=\"mapa-breadcrumb\" *ngIf=\"items && items.length > 0\">\n  <span class=\"mapa-breadcrumb__item\" *ngFor=\"let item of items; let i = index\">\n    <a *ngIf=\"item.url; else common\" [href]=\"item.url\" [routerLink]=\"item.url\"\n      >{{ item.title }}</a\n    >\n    <ng-template #common>\n      <span\n        class=\"mapa-breadcrumb__item\"\n        [class.mapa-breadcrumb__item--highlight]=\"items.length === i + 1\"\n      >\n        {{ item.title }}</span\n      >\n    </ng-template>\n    <span class=\"mapa-breadcrumb__item--next\" *ngIf=\"i < items.length - 1\"\n      >></span\n    >\n  </span>\n</section>\n", styles: [".mapa-breadcrumb{display:flex;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);flex-direction:row;margin-bottom:32px}.mapa-breadcrumb__item{font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:#50575e}.mapa-breadcrumb__item a{text-decoration:none;color:#50575e}.mapa-breadcrumb__item--next{margin:0 6px}.mapa-breadcrumb__item--highlight{color:#ea561d}\n"] }]
+            args: [{ selector: 'mapa-breadcrumb', imports: [CommonModule, RouterModule], standalone: true, template: "<nav\n  class=\"mapa-breadcrumb\"\n  *ngIf=\"items && items.length > 0\"\n  [attr.aria-label]=\"ariaLabel\"\n>\n  <ol class=\"mapa-breadcrumb__list\">\n    <li class=\"mapa-breadcrumb__item\" *ngFor=\"let item of items; let i = index\">\n      <a\n        *ngIf=\"item.url && i < items.length - 1; else common\"\n        [routerLink]=\"item.url\"\n      >\n        {{ item.title }}\n      </a>\n      <ng-template #common>\n        <span\n          [class.mapa-breadcrumb__item--highlight]=\"items.length === i + 1\"\n          [attr.aria-current]=\"items.length === i + 1 ? 'page' : null\"\n          >{{ item.title }}</span\n        >\n      </ng-template>\n      <span\n        class=\"mapa-breadcrumb__separator\"\n        *ngIf=\"i < items.length - 1\"\n        aria-hidden=\"true\"\n        >{{ separator }}</span\n      >\n    </li>\n  </ol>\n</nav>\n", styles: [".mapa-breadcrumb{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);margin-bottom:32px}.mapa-breadcrumb__list{align-items:center;display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}.mapa-breadcrumb__item{align-items:center;color:#657077;display:flex;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.mapa-breadcrumb__item a{text-decoration:none;color:inherit}.mapa-breadcrumb__item a:hover{color:#ff560b;text-decoration:underline;text-underline-offset:3px}.mapa-breadcrumb__item a:focus-visible{border-radius:3px;outline:2px solid #ff8a55;outline-offset:2px}.mapa-breadcrumb__item--highlight{color:#ff560b;font-weight:500}.mapa-breadcrumb__separator{color:#a7b0b5;margin:0 7px}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
+            }], separator: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
             }] } });
 
 /*

package/fesm2022/mapa-library-ui-src-lib-components-breadcrumb.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mapa-library-ui-src-lib-components-breadcrumb.mjs","sources":["../../../projects/mapa-library-ui/src/lib/components/breadcrumb/src/breadcrumb.component.ts","../../../projects/mapa-library-ui/src/lib/components/breadcrumb/src/breadcrumb.component.html","../../../projects/mapa-library-ui/src/lib/components/breadcrumb/public-api.ts","../../../projects/mapa-library-ui/src/breadcrumb.ts","../../../projects/mapa-library-ui/src/mapa-library-ui-src-lib-components-breadcrumb.ts"],"sourcesContent":["import { CommonModule } from \"@angular/common\";\nimport { Component, Input } from \"@angular/core\";\nimport { RouterModule } from \"@angular/router\";\nimport { Breadpiece } from \"../../../core/interfaces/bread-piece.interface\";\n\n@Component({\n  selector: \"mapa-breadcrumb\",\n  templateUrl: \"./breadcrumb.component.html\",\n  styleUrl: \"./breadcrumb.component.scss\",\n  imports: [CommonModule, RouterModule],\n  standalone: true,\n})\nexport class MapaBreadcrumbComponent {\n  @Input() items!: Breadpiece[];\n}\n\n","<section class=\"mapa-breadcrumb\" *ngIf=\"items && items.length > 0\">\n  <span class=\"mapa-breadcrumb__item\" *ngFor=\"let item of items; let i = index\">\n    <a *ngIf=\"item.url; else common\" [href]=\"item.url\" [routerLink]=\"item.url\"\n      >{{ item.title }}</a\n    >\n    <ng-template #common>\n      <span\n        class=\"mapa-breadcrumb__item\"\n        [class.mapa-breadcrumb__item--highlight]=\"items.length === i + 1\"\n      >\n        {{ item.title }}</span\n      >\n    </ng-template>\n    <span class=\"mapa-breadcrumb__item--next\" *ngIf=\"i < items.length - 1\"\n      >></span\n    >\n  </span>\n</section>\n","/*\n * Public API Surface of mapa-library-ui breadcrumb\n */\n\nexport * from './src/breadcrumb.component';\n","/*\n * Public API Surface of mapa-library-ui breadcrumb\n */\n\nexport * from './lib/components/breadcrumb/public-api';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './breadcrumb';\n"],"names":[],"mappings":";;;;;;;MAYa,uBAAuB,CAAA;+GAAvB,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZpC,4nBAkBA,EAAA,MAAA,EAAA,CAAA,2YAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDTY,YAAY,+PAAE,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAGzB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAPnC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,WAGlB,CAAC,YAAY,EAAE,YAAY,CAAC,cACzB,IAAI,EAAA,QAAA,EAAA,4nBAAA,EAAA,MAAA,EAAA,CAAA,2YAAA,CAAA,EAAA;;sBAGf;;;AEbH;;AAEG;;ACFH;;AAEG;;ACFH;;AAEG;;;;"}
+{"version":3,"file":"mapa-library-ui-src-lib-components-breadcrumb.mjs","sources":["../../../projects/mapa-library-ui/src/lib/components/breadcrumb/src/breadcrumb.component.ts","../../../projects/mapa-library-ui/src/lib/components/breadcrumb/src/breadcrumb.component.html","../../../projects/mapa-library-ui/src/lib/components/breadcrumb/public-api.ts","../../../projects/mapa-library-ui/src/breadcrumb.ts","../../../projects/mapa-library-ui/src/mapa-library-ui-src-lib-components-breadcrumb.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, Input } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { Breadpiece } from '../../../core/interfaces/bread-piece.interface';\n\n@Component({\n  selector: 'mapa-breadcrumb',\n  templateUrl: './breadcrumb.component.html',\n  styleUrl: './breadcrumb.component.scss',\n  imports: [CommonModule, RouterModule],\n  standalone: true,\n})\nexport class MapaBreadcrumbComponent {\n  @Input() items!: Breadpiece[];\n  @Input() separator = '›';\n  @Input() ariaLabel = 'Breadcrumb';\n}\n","<nav\n  class=\"mapa-breadcrumb\"\n  *ngIf=\"items && items.length > 0\"\n  [attr.aria-label]=\"ariaLabel\"\n>\n  <ol class=\"mapa-breadcrumb__list\">\n    <li class=\"mapa-breadcrumb__item\" *ngFor=\"let item of items; let i = index\">\n      <a\n        *ngIf=\"item.url && i < items.length - 1; else common\"\n        [routerLink]=\"item.url\"\n      >\n        {{ item.title }}\n      </a>\n      <ng-template #common>\n        <span\n          [class.mapa-breadcrumb__item--highlight]=\"items.length === i + 1\"\n          [attr.aria-current]=\"items.length === i + 1 ? 'page' : null\"\n          >{{ item.title }}</span\n        >\n      </ng-template>\n      <span\n        class=\"mapa-breadcrumb__separator\"\n        *ngIf=\"i < items.length - 1\"\n        aria-hidden=\"true\"\n        >{{ separator }}</span\n      >\n    </li>\n  </ol>\n</nav>\n","/*\n * Public API Surface of mapa-library-ui breadcrumb\n */\n\nexport * from './src/breadcrumb.component';\n","/*\n * Public API Surface of mapa-library-ui breadcrumb\n */\n\nexport * from './lib/components/breadcrumb/public-api';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './breadcrumb';\n"],"names":[],"mappings":";;;;;;;MAYa,uBAAuB,CAAA;AAPpC,IAAA,WAAA,GAAA;QASW,IAAA,CAAA,SAAS,GAAG,GAAG;QACf,IAAA,CAAA,SAAS,GAAG,YAAY;AAClC,IAAA;+GAJY,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZpC,41BA6BA,EAAA,MAAA,EAAA,CAAA,wtBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDpBY,YAAY,+PAAE,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAGzB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAPnC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,WAGlB,CAAC,YAAY,EAAE,YAAY,CAAC,cACzB,IAAI,EAAA,QAAA,EAAA,41BAAA,EAAA,MAAA,EAAA,CAAA,wtBAAA,CAAA,EAAA;;sBAGf;;sBACA;;sBACA;;;AEfH;;AAEG;;ACFH;;AAEG;;ACFH;;AAEG;;;;"}

package/fesm2022/mapa-library-ui-src-lib-components-button.mjs

@@ -3,21 +3,27 @@ import { EventEmitter, Output, Input, Component } from '@angular/core';
 
 class ButtonComponent {
     constructor() {
+        this.shape = 'pill';
+        this.fullWidth = false;
         this.clicked = new EventEmitter();
     }
     onClick() {
         this.clicked.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: ButtonComponent, isStandalone: true, selector: "mapa-button", inputs: { color: "color", disabled: "disabled" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>  ", styles: [".mapa-button{display:flex;padding:14px 42px;justify-content:center;align-items:center;gap:10px;border-radius:28px;border:none;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-weight:500;cursor:pointer;transform-origin:center;transition:transform .2s ease-in-out}.mapa-button:active{transform:scale(1.1)}.mapa-button:disabled{color:#dcdcde!important;background-color:transparent!important}.mapa-button.basic{color:#ea561d;background-color:transparent}.mapa-button.accent{border:2px solid #ea561d!important;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: ButtonComponent, isStandalone: true, selector: "mapa-button", inputs: { color: "color", disabled: "disabled", shape: "shape", fullWidth: "fullWidth" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [class.mapa-button--rounded]=\"shape === 'rounded'\"\n  [class.mapa-button--full-width]=\"fullWidth\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>\n", styles: [".mapa-button{display:flex;padding:14px 42px;justify-content:center;align-items:center;gap:10px;border-radius:28px;border:none;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-weight:500;cursor:pointer;transform-origin:center;transition:transform .2s ease-in-out}.mapa-button:active{transform:scale(.98)}.mapa-button:disabled{color:#aeb4b8;background-color:#f1f3f4;cursor:not-allowed}.mapa-button.basic{color:#ea561d;background-color:transparent}.mapa-button.accent{border:2px solid #ea561d;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}.mapa-button--rounded{border-radius:6px}.mapa-button--full-width{width:100%}.mapa-button:focus-visible{outline:3px solid rgba(255,86,11,.28);outline-offset:2px}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mapa-button', standalone: true, template: "<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>  ", styles: [".mapa-button{display:flex;padding:14px 42px;justify-content:center;align-items:center;gap:10px;border-radius:28px;border:none;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-weight:500;cursor:pointer;transform-origin:center;transition:transform .2s ease-in-out}.mapa-button:active{transform:scale(1.1)}.mapa-button:disabled{color:#dcdcde!important;background-color:transparent!important}.mapa-button.basic{color:#ea561d;background-color:transparent}.mapa-button.accent{border:2px solid #ea561d!important;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}\n"] }]
+            args: [{ selector: 'mapa-button', standalone: true, template: "<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [class.mapa-button--rounded]=\"shape === 'rounded'\"\n  [class.mapa-button--full-width]=\"fullWidth\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>\n", styles: [".mapa-button{display:flex;padding:14px 42px;justify-content:center;align-items:center;gap:10px;border-radius:28px;border:none;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-weight:500;cursor:pointer;transform-origin:center;transition:transform .2s ease-in-out}.mapa-button:active{transform:scale(.98)}.mapa-button:disabled{color:#aeb4b8;background-color:#f1f3f4;cursor:not-allowed}.mapa-button.basic{color:#ea561d;background-color:transparent}.mapa-button.accent{border:2px solid #ea561d;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}.mapa-button--rounded{border-radius:6px}.mapa-button--full-width{width:100%}.mapa-button:focus-visible{outline:3px solid rgba(255,86,11,.28);outline-offset:2px}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], disabled: [{
                 type: Input
+            }], shape: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
             }], clicked: [{
                 type: Output
             }] } });

package/fesm2022/mapa-library-ui-src-lib-components-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mapa-library-ui-src-lib-components-button.mjs","sources":["../../../projects/mapa-library-ui/src/lib/components/button/src/button.component.ts","../../../projects/mapa-library-ui/src/lib/components/button/src/button.component.html","../../../projects/mapa-library-ui/src/lib/components/button/public-api.ts","../../../projects/mapa-library-ui/src/button.ts","../../../projects/mapa-library-ui/src/mapa-library-ui-src-lib-components-button.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\n\n@Component({\n    selector: 'mapa-button',\n    templateUrl: './button.component.html',\n    styleUrl: './button.component.scss',\n    standalone: true\n})\nexport class ButtonComponent {\n  @Input() color: 'primary' | 'accent' | 'basic' | null | undefined;\n  @Input() disabled!: boolean;\n  @Output() clicked: EventEmitter<void> = new EventEmitter<void>();\n\n  onClick(): void {\n    this.clicked.emit();\n  }\n}\n","<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>  ","/*\n * Public API Surface of mapa-library-ui button\n */\n\nexport * from './src/button.component';\n","/*\n * Public API Surface of mapa-library-ui button\n */\n\nexport * from './lib/components/button/public-api';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './button';\n"],"names":[],"mappings":";;;MAQa,eAAe,CAAA;AAN5B,IAAA,WAAA,GAAA;AASY,QAAA,IAAA,CAAA,OAAO,GAAuB,IAAI,YAAY,EAAQ;AAKjE,IAAA;IAHC,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;IACrB;+GAPW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,0JCR5B,8PASW,EAAA,MAAA,EAAA,CAAA,6nBAAA,CAAA,EAAA,CAAA,CAAA;;4FDDE,eAAe,EAAA,UAAA,EAAA,CAAA;kBAN3B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,cAGX,IAAI,EAAA,QAAA,EAAA,8PAAA,EAAA,MAAA,EAAA,CAAA,6nBAAA,CAAA,EAAA;;sBAGjB;;sBACA;;sBACA;;;AEXH;;AAEG;;ACFH;;AAEG;;ACFH;;AAEG;;;;"}
+{"version":3,"file":"mapa-library-ui-src-lib-components-button.mjs","sources":["../../../projects/mapa-library-ui/src/lib/components/button/src/button.component.ts","../../../projects/mapa-library-ui/src/lib/components/button/src/button.component.html","../../../projects/mapa-library-ui/src/lib/components/button/public-api.ts","../../../projects/mapa-library-ui/src/button.ts","../../../projects/mapa-library-ui/src/mapa-library-ui-src-lib-components-button.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\n\n@Component({\n  selector: 'mapa-button',\n  templateUrl: './button.component.html',\n  styleUrl: './button.component.scss',\n  standalone: true,\n})\nexport class ButtonComponent {\n  @Input() color: 'primary' | 'accent' | 'basic' | null | undefined;\n  @Input() disabled!: boolean;\n  @Input() shape: 'pill' | 'rounded' = 'pill';\n  @Input() fullWidth = false;\n  @Output() clicked: EventEmitter<void> = new EventEmitter<void>();\n\n  onClick(): void {\n    this.clicked.emit();\n  }\n}\n","<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [class.mapa-button--rounded]=\"shape === 'rounded'\"\n  [class.mapa-button--full-width]=\"fullWidth\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>\n","/*\n * Public API Surface of mapa-library-ui button\n */\n\nexport * from './src/button.component';\n","/*\n * Public API Surface of mapa-library-ui button\n */\n\nexport * from './lib/components/button/public-api';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './button';\n"],"names":[],"mappings":";;;MAQa,eAAe,CAAA;AAN5B,IAAA,WAAA,GAAA;QASW,IAAA,CAAA,KAAK,GAAuB,MAAM;QAClC,IAAA,CAAA,SAAS,GAAG,KAAK;AAChB,QAAA,IAAA,CAAA,OAAO,GAAuB,IAAI,YAAY,EAAQ;AAKjE,IAAA;IAHC,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;IACrB;+GATW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,kMCR5B,uWAYA,EAAA,MAAA,EAAA,CAAA,8wBAAA,CAAA,EAAA,CAAA,CAAA;;4FDJa,eAAe,EAAA,UAAA,EAAA,CAAA;kBAN3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,cAGX,IAAI,EAAA,QAAA,EAAA,uWAAA,EAAA,MAAA,EAAA,CAAA,8wBAAA,CAAA,EAAA;;sBAGf;;sBACA;;sBACA;;sBACA;;sBACA;;;AEbH;;AAEG;;ACFH;;AAEG;;ACFH;;AAEG;;;;"}

package/fesm2022/mapa-library-ui-src-lib-components-capability.mjs

@@ -17,21 +17,27 @@ import { MatExpansionModule } from '@angular/material/expansion';
 
 class ButtonComponent {
     constructor() {
+        this.shape = 'pill';
+        this.fullWidth = false;
         this.clicked = new EventEmitter();
     }
     onClick() {
         this.clicked.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: ButtonComponent, isStandalone: true, selector: "mapa-button", inputs: { color: "color", disabled: "disabled" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>  ", styles: [".mapa-button{display:flex;padding:14px 42px;justify-content:center;align-items:center;gap:10px;border-radius:28px;border:none;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-weight:500;cursor:pointer;transform-origin:center;transition:transform .2s ease-in-out}.mapa-button:active{transform:scale(1.1)}.mapa-button:disabled{color:#dcdcde!important;background-color:transparent!important}.mapa-button.basic{color:#ea561d;background-color:transparent}.mapa-button.accent{border:2px solid #ea561d!important;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: ButtonComponent, isStandalone: true, selector: "mapa-button", inputs: { color: "color", disabled: "disabled", shape: "shape", fullWidth: "fullWidth" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [class.mapa-button--rounded]=\"shape === 'rounded'\"\n  [class.mapa-button--full-width]=\"fullWidth\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>\n", styles: [".mapa-button{display:flex;padding:14px 42px;justify-content:center;align-items:center;gap:10px;border-radius:28px;border:none;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-weight:500;cursor:pointer;transform-origin:center;transition:transform .2s ease-in-out}.mapa-button:active{transform:scale(.98)}.mapa-button:disabled{color:#aeb4b8;background-color:#f1f3f4;cursor:not-allowed}.mapa-button.basic{color:#ea561d;background-color:transparent}.mapa-button.accent{border:2px solid #ea561d;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}.mapa-button--rounded{border-radius:6px}.mapa-button--full-width{width:100%}.mapa-button:focus-visible{outline:3px solid rgba(255,86,11,.28);outline-offset:2px}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mapa-button', standalone: true, template: "<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>  ", styles: [".mapa-button{display:flex;padding:14px 42px;justify-content:center;align-items:center;gap:10px;border-radius:28px;border:none;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-weight:500;cursor:pointer;transform-origin:center;transition:transform .2s ease-in-out}.mapa-button:active{transform:scale(1.1)}.mapa-button:disabled{color:#dcdcde!important;background-color:transparent!important}.mapa-button.basic{color:#ea561d;background-color:transparent}.mapa-button.accent{border:2px solid #ea561d!important;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}\n"] }]
+            args: [{ selector: 'mapa-button', standalone: true, template: "<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [class.mapa-button--rounded]=\"shape === 'rounded'\"\n  [class.mapa-button--full-width]=\"fullWidth\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>\n", styles: [".mapa-button{display:flex;padding:14px 42px;justify-content:center;align-items:center;gap:10px;border-radius:28px;border:none;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-weight:500;cursor:pointer;transform-origin:center;transition:transform .2s ease-in-out}.mapa-button:active{transform:scale(.98)}.mapa-button:disabled{color:#aeb4b8;background-color:#f1f3f4;cursor:not-allowed}.mapa-button.basic{color:#ea561d;background-color:transparent}.mapa-button.accent{border:2px solid #ea561d;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}.mapa-button--rounded{border-radius:6px}.mapa-button--full-width{width:100%}.mapa-button:focus-visible{outline:3px solid rgba(255,86,11,.28);outline-offset:2px}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], disabled: [{
                 type: Input
+            }], shape: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
             }], clicked: [{
                 type: Output
             }] } });
@@ -64,6 +70,9 @@ function formatPaginatorShowingRange(page, pageSize, length) {
     const itemLabel = safeLength === 1 ? 'item' : 'itens';
     return `Mostrando ${startIndex + 1} - ${endIndex} de ${safeLength} ${itemLabel}`;
 }
+function formatItemCount(count) {
+    return `${count} ${count === 1 ? 'item' : 'itens'}`;
+}
 const DEFAULT_MAPA_UI_TEXTS = {
     common: {
         selectAll: 'Selecionar todos',
@@ -90,6 +99,41 @@ const DEFAULT_MAPA_UI_TEXTS = {
         negativeDirectionLabel: 'Direção Negativa |',
         positiveDirectionLabel: 'Direção Positiva |',
     },
+    report: {
+        summarized: 'Resumida',
+        detailed: 'Detalhada',
+        list: 'Lista',
+        chart: 'Gráfico',
+        viewModeLabel: 'Modo de visualização',
+        readingInformationTitle: 'Informações de leitura',
+        dimensionTitle: 'Dimensão',
+        conceptTitle: 'Conceito',
+        classificationTitle: 'Classificação',
+        resultReadingTitle: 'Leitura do resultado',
+        resultTitle: 'Resultado',
+        globalAverageTitle: 'Média global',
+        factorsTitle: 'Fatores relativos à organização e ao trabalho',
+        strongPointsTitle: 'Pontos fortes',
+        attentionPointsTitle: 'Pontos de atenção',
+        vulnerabilitiesTitle: 'Vulnerabilidades socioemocionais',
+        positiveDirectionLabel: 'Direção positiva',
+        negativeDirectionLabel: 'Direção negativa',
+        lowerIntensityLabel: 'Menos intensamente',
+        higherIntensityLabel: 'Mais intensamente',
+        noClassification: 'Sem classificação',
+        emptyState: 'Não há resultados disponíveis para esta seção.',
+        interpretationTitle: 'Interpretação',
+        detailedListLabel: 'Lista detalhada',
+        groupAverageTitle: 'Média geral do grupo',
+        groupDistributionLabel: 'Distribuição do grupo',
+        overallPercentageTitle: '% Geral',
+        scaleConceptTitle: 'Conceito da escala',
+        psychosocialFactorsTitle: 'Fatores psicossociais',
+        editConclusionLabel: 'Editar conclusão',
+        meterLabel: (name, value) => `${name}: ${value}%`,
+        gaugeLabel: (name, value) => `${name}: ${value}%`,
+        itemCountLabel: formatItemCount,
+    },
     paginator: {
         itemsPerPage: 'Itens por página',
         nextPage: 'Próxima página',
@@ -133,6 +177,7 @@ function mergeMapaUiTexts(customTexts) {
         filters: { ...defaults.filters, ...(customTexts?.filters ?? {}) },
         datepicker: { ...defaults.datepicker, ...(customTexts?.datepicker ?? {}) },
         capability: { ...defaults.capability, ...(customTexts?.capability ?? {}) },
+        report: { ...defaults.report, ...(customTexts?.report ?? {}) },
         paginator: { ...defaults.paginator, ...(customTexts?.paginator ?? {}) },
         warning: { ...defaults.warning, ...(customTexts?.warning ?? {}) },
         table: { ...defaults.table, ...(customTexts?.table ?? {}) },
@@ -572,7 +617,7 @@ class MapaDropdownComponent {
                 useExisting: forwardRef(() => MapaDropdownComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"mapa-dropdown\"\n  [class.mapa-dropdown--open]=\"isOpen()\"\n  [class.mapa-dropdown--invalid]=\"shouldShowError()\"\n  [class.mapa-dropdown--disabled]=\"isDisabled()\"\n  [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n  [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n  [class.mapa-dropdown--tag]=\"border === 'tag'\"\n>\n  @if (element.label) {\n    <label class=\"mapa-dropdown__label\" [attr.for]=\"element.key || null\">\n      {{ element.label }}\n    </label>\n  }\n\n  <div class=\"mapa-dropdown__field-row\">\n    <button\n      #triggerButton\n      cdkOverlayOrigin\n      #origin=\"cdkOverlayOrigin\"\n      class=\"mapa-dropdown__trigger\"\n      [class.mapa-dropdown__trigger--clearable]=\"hasValue() && element.clearValue\"\n      [id]=\"element.key || null\"\n      type=\"button\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggleDropdown()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      aria-haspopup=\"listbox\"\n    >\n      <span\n        class=\"mapa-dropdown__trigger-text\"\n        [class.mapa-dropdown__trigger-text--placeholder]=\"!hasValue()\"\n        [innerHTML]=\"selectedLabel() | safeHtml\"\n      ></span>\n      @if (hasValue() && !isDisabled() && element.clearValue) {\n        <span\n          class=\"mapa-dropdown__clear\"\n          role=\"button\"\n          aria-label=\"Limpar\"\n          (click)=\"clearValue($event)\"\n        >\n          &times;\n        </span>\n      }\n    </button>\n\n    @if (element.actionButton) {\n      <mapa-button\n        class=\"mapa-dropdown__action\"\n        color=\"basic\"\n        (clicked)=\"element.actionButton.action.emit(true)\"\n      >\n        {{ element.actionButton.label }}\n      </mapa-button>\n    }\n  </div>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n    cdkConnectedOverlayPanelClass=\"mapa-dropdown__overlay-pane\"\n    (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n  >\n    <div class=\"mapa-dropdown__panel\">\n      @if (hasSearch()) {\n        <input\n          #searchInput\n          class=\"mapa-dropdown__search-input\"\n          type=\"text\"\n          [formControl]=\"searchControl!\"\n          [placeholder]=\"searchPlaceholder()\"\n        />\n      }\n\n      <div class=\"mapa-dropdown__options\" role=\"listbox\">\n        @if (isMultiple() && visibleOptions().length) {\n          <button\n            class=\"mapa-dropdown__option mapa-dropdown__option--select-all\"\n            type=\"button\"\n            (click)=\"toggleSelectAll()\"\n          >\n            <input\n              class=\"mapa-dropdown__checkbox\"\n              type=\"checkbox\"\n              [checked]=\"isAllSelected()\"\n              [indeterminate]=\"isIndeterminate()\"\n              (click)=\"$event.stopPropagation(); toggleSelectAll()\"\n            />\n            {{ selectAllLabel }}\n          </button>\n        }\n\n        @if (hasGroups()) {\n          @for (group of filteredGroups(); track group.label) {\n            <div class=\"mapa-dropdown__group\" role=\"group\">\n              <p class=\"mapa-dropdown__group-label\">{{ group.label }}</p>\n              @for (option of group.options; track option.key) {\n                <button\n                  class=\"mapa-dropdown__option\"\n                  [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n                  [style.padding-left.px]=\"optionPadding(option)\"\n                  type=\"button\"\n                  (click)=\"selectOption(option)\"\n                >\n                  @if (isMultiple()) {\n                    <input\n                      class=\"mapa-dropdown__checkbox\"\n                      type=\"checkbox\"\n                      [checked]=\"isOptionSelected(option)\"\n                      (click)=\"$event.stopPropagation(); selectOption(option)\"\n                    />\n                  }\n                  <span [innerHTML]=\"option.value | safeHtml\"></span>\n                </button>\n              }\n            </div>\n          }\n        } @else {\n          @for (option of filteredOptions(); track option.key) {\n            <button\n              class=\"mapa-dropdown__option\"\n              [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n              [style.padding-left.px]=\"optionPadding(option)\"\n              type=\"button\"\n              (click)=\"selectOption(option)\"\n            >\n              @if (isMultiple()) {\n                <input\n                  class=\"mapa-dropdown__checkbox\"\n                  type=\"checkbox\"\n                  [checked]=\"isOptionSelected(option)\"\n                  (click)=\"$event.stopPropagation(); selectOption(option)\"\n                />\n              }\n              <span [innerHTML]=\"option.value | safeHtml\"></span>\n            </button>\n          }\n        }\n\n        @if (!visibleOptions().length) {\n          <p class=\"mapa-dropdown__empty-state\">\n            {{ emptyStateLabel() }}\n          </p>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  @if (shouldShowError()) {\n    <p class=\"mapa-dropdown__error\">\n      <mapa-form-errors\n        [control]=\"formControl\"\n        [errors]=\"element.errors\"\n      ></mapa-form-errors>\n    </p>\n  } @else if (element.hint) {\n    <p class=\"mapa-dropdown__hint\">{{ element.hint }}</p>\n  }\n</div>\n", styles: [":host{position:relative;display:inline-block;width:310px;max-width:100%;min-width:0;box-sizing:border-box}.mapa-dropdown{width:100%}.mapa-dropdown__label{display:inline-block;margin-bottom:8px;color:var(--mapa-color-ink, #1a1a1a);font-family:var(--mapa-font-heading, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.mapa-dropdown__field-row{display:flex;align-items:center;gap:24px;min-width:0}.mapa-dropdown__trigger,.mapa-dropdown__search-input,.mapa-dropdown__option{width:100%;min-height:48px;padding:12px 16px;border:0;background:var(--mapa-color-surface, #ffffff);color:var(--mapa-color-ink, #1a1a1a);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:16px;line-height:24px}.mapa-dropdown__trigger:focus,.mapa-dropdown__search-input:focus,.mapa-dropdown__option:focus{outline:none}.mapa-dropdown__trigger::placeholder,.mapa-dropdown__search-input::placeholder,.mapa-dropdown__option::placeholder{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__trigger{position:relative;display:flex;flex:1 1 auto;align-items:center;min-width:0;padding-right:46px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.mapa-dropdown__trigger--clearable{padding-right:70px}.mapa-dropdown__trigger:after{content:\"\";position:absolute;top:50%;right:18px;width:9px;height:9px;border-right:2px solid var(--mapa-color-ink, #1a1a1a);border-bottom:2px solid var(--mapa-color-ink, #1a1a1a);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;pointer-events:none}.mapa-dropdown__trigger:disabled{background:var(--mapa-color-disabled-surface, #f6f7f7);color:var(--mapa-color-muted, #555555);cursor:not-allowed}.mapa-dropdown__trigger:disabled:after{opacity:.5}.mapa-dropdown--open .mapa-dropdown__trigger,.mapa-dropdown__trigger:focus{border-color:var(--mapa-color-accent, #ff560b);box-shadow:0 0 0 3px #ff560b1f}.mapa-dropdown--open .mapa-dropdown__trigger:after{transform:translateY(-20%) rotate(-135deg)}.mapa-dropdown--highlight .mapa-dropdown__trigger{border:2px solid #eedb2a;border-radius:16px}.mapa-dropdown--tag .mapa-dropdown__trigger{border-radius:16px}.mapa-dropdown__trigger-text{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__trigger-text--placeholder{color:var(--mapa-color-muted, #CFC4C7)}.mapa-dropdown__clear{position:absolute;top:50%;right:40px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:var(--mapa-color-muted, #555555);font-size:16px;line-height:1;cursor:pointer}.mapa-dropdown__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__action{flex:none}.mapa-dropdown__checkbox{flex:none;width:16px;height:16px;margin-right:12px;accent-color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__panel{width:100%;overflow:hidden;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08))}.mapa-dropdown__search-input{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}.mapa-dropdown__options{max-height:240px;overflow-y:auto;background:var(--mapa-color-surface, #ffffff)}.mapa-dropdown__group-label{margin:0;padding:10px 16px 6px;color:var(--mapa-color-muted, #555555);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.mapa-dropdown__option{display:flex;align-items:center;min-height:44px;text-align:left;cursor:pointer;transition:background-color .2s ease,color .2s ease}.mapa-dropdown__option:hover{background:#ff560b14}.mapa-dropdown__option--selected{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__option--select-all{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));font-weight:600}.mapa-dropdown__empty-state{margin:0;padding:14px 16px;color:var(--mapa-color-muted, #555555);font-size:14px;line-height:20px}.mapa-dropdown--invalid .mapa-dropdown__trigger{border-color:#b54242;box-shadow:0 0 0 3px #b542421f}.mapa-dropdown__hint,.mapa-dropdown__error{display:block;margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}.mapa-dropdown__hint{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__error{color:#b54242}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"mapa-dropdown\"\n  [class.mapa-dropdown--open]=\"isOpen()\"\n  [class.mapa-dropdown--invalid]=\"shouldShowError()\"\n  [class.mapa-dropdown--disabled]=\"isDisabled()\"\n  [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n  [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n  [class.mapa-dropdown--tag]=\"border === 'tag'\"\n>\n  @if (element.label) {\n    <label class=\"mapa-dropdown__label\" [attr.for]=\"element.key || null\">\n      {{ element.label }}\n    </label>\n  }\n\n  <div class=\"mapa-dropdown__field-row\">\n    <button\n      #triggerButton\n      cdkOverlayOrigin\n      #origin=\"cdkOverlayOrigin\"\n      class=\"mapa-dropdown__trigger\"\n      [class.mapa-dropdown__trigger--clearable]=\"hasValue() && element.clearValue\"\n      [id]=\"element.key || null\"\n      type=\"button\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggleDropdown()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      aria-haspopup=\"listbox\"\n    >\n      <span\n        class=\"mapa-dropdown__trigger-text\"\n        [class.mapa-dropdown__trigger-text--placeholder]=\"!hasValue()\"\n        [innerHTML]=\"selectedLabel() | safeHtml\"\n      ></span>\n      @if (hasValue() && !isDisabled() && element.clearValue) {\n        <span\n          class=\"mapa-dropdown__clear\"\n          role=\"button\"\n          aria-label=\"Limpar\"\n          (click)=\"clearValue($event)\"\n        >\n          &times;\n        </span>\n      }\n    </button>\n\n    @if (element.actionButton) {\n      <mapa-button\n        class=\"mapa-dropdown__action\"\n        color=\"basic\"\n        (clicked)=\"element.actionButton.action.emit(true)\"\n      >\n        {{ element.actionButton.label }}\n      </mapa-button>\n    }\n  </div>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n    cdkConnectedOverlayPanelClass=\"mapa-dropdown__overlay-pane\"\n    (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n  >\n    <div class=\"mapa-dropdown__panel\">\n      @if (hasSearch()) {\n        <input\n          #searchInput\n          class=\"mapa-dropdown__search-input\"\n          type=\"text\"\n          [formControl]=\"searchControl!\"\n          [placeholder]=\"searchPlaceholder()\"\n        />\n      }\n\n      <div class=\"mapa-dropdown__options\" role=\"listbox\">\n        @if (isMultiple() && visibleOptions().length) {\n          <button\n            class=\"mapa-dropdown__option mapa-dropdown__option--select-all\"\n            type=\"button\"\n            (click)=\"toggleSelectAll()\"\n          >\n            <input\n              class=\"mapa-dropdown__checkbox\"\n              type=\"checkbox\"\n              [checked]=\"isAllSelected()\"\n              [indeterminate]=\"isIndeterminate()\"\n              (click)=\"$event.stopPropagation(); toggleSelectAll()\"\n            />\n            {{ selectAllLabel }}\n          </button>\n        }\n\n        @if (hasGroups()) {\n          @for (group of filteredGroups(); track group.label) {\n            <div class=\"mapa-dropdown__group\" role=\"group\">\n              <p class=\"mapa-dropdown__group-label\">{{ group.label }}</p>\n              @for (option of group.options; track option.key) {\n                <button\n                  class=\"mapa-dropdown__option\"\n                  [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n                  [style.padding-left.px]=\"optionPadding(option)\"\n                  type=\"button\"\n                  (click)=\"selectOption(option)\"\n                >\n                  @if (isMultiple()) {\n                    <input\n                      class=\"mapa-dropdown__checkbox\"\n                      type=\"checkbox\"\n                      [checked]=\"isOptionSelected(option)\"\n                      (click)=\"$event.stopPropagation(); selectOption(option)\"\n                    />\n                  }\n                  <span [innerHTML]=\"option.value | safeHtml\"></span>\n                </button>\n              }\n            </div>\n          }\n        } @else {\n          @for (option of filteredOptions(); track option.key) {\n            <button\n              class=\"mapa-dropdown__option\"\n              [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n              [style.padding-left.px]=\"optionPadding(option)\"\n              type=\"button\"\n              (click)=\"selectOption(option)\"\n            >\n              @if (isMultiple()) {\n                <input\n                  class=\"mapa-dropdown__checkbox\"\n                  type=\"checkbox\"\n                  [checked]=\"isOptionSelected(option)\"\n                  (click)=\"$event.stopPropagation(); selectOption(option)\"\n                />\n              }\n              <span [innerHTML]=\"option.value | safeHtml\"></span>\n            </button>\n          }\n        }\n\n        @if (!visibleOptions().length) {\n          <p class=\"mapa-dropdown__empty-state\">\n            {{ emptyStateLabel() }}\n          </p>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  @if (shouldShowError()) {\n    <p class=\"mapa-dropdown__error\">\n      <mapa-form-errors\n        [control]=\"formControl\"\n        [errors]=\"element.errors\"\n      ></mapa-form-errors>\n    </p>\n  } @else if (element.hint) {\n    <p class=\"mapa-dropdown__hint\">{{ element.hint }}</p>\n  }\n</div>\n", styles: [":host{position:relative;display:inline-block;width:310px;max-width:100%;min-width:0;box-sizing:border-box}.mapa-dropdown{width:100%}.mapa-dropdown__label{display:inline-block;margin-bottom:8px;color:var(--mapa-color-ink, #1a1a1a);font-family:var(--mapa-font-heading, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.mapa-dropdown__field-row{display:flex;align-items:center;gap:24px;min-width:0}.mapa-dropdown__trigger,.mapa-dropdown__search-input,.mapa-dropdown__option{width:100%;min-height:48px;padding:12px 16px;border:0;background:var(--mapa-color-surface, #ffffff);color:var(--mapa-color-ink, #1a1a1a);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:16px;line-height:24px}.mapa-dropdown__trigger:focus,.mapa-dropdown__search-input:focus,.mapa-dropdown__option:focus{outline:none}.mapa-dropdown__trigger::placeholder,.mapa-dropdown__search-input::placeholder,.mapa-dropdown__option::placeholder{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__trigger{position:relative;display:flex;flex:1 1 auto;align-items:center;min-width:0;padding-right:46px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.mapa-dropdown__trigger--clearable{padding-right:70px}.mapa-dropdown__trigger:after{content:\"\";position:absolute;top:50%;right:18px;width:9px;height:9px;border-right:2px solid var(--mapa-color-ink, #1a1a1a);border-bottom:2px solid var(--mapa-color-ink, #1a1a1a);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;pointer-events:none}.mapa-dropdown__trigger:disabled{background:var(--mapa-color-disabled-surface, #f6f7f7);color:var(--mapa-color-muted, #555555);cursor:not-allowed}.mapa-dropdown__trigger:disabled:after{opacity:.5}.mapa-dropdown--open .mapa-dropdown__trigger,.mapa-dropdown__trigger:focus{border-color:var(--mapa-color-accent, #ff560b);box-shadow:0 0 0 3px #ff560b1f}.mapa-dropdown--open .mapa-dropdown__trigger:after{transform:translateY(-20%) rotate(-135deg)}.mapa-dropdown--highlight .mapa-dropdown__trigger{border:2px solid #eedb2a;border-radius:16px}.mapa-dropdown--tag .mapa-dropdown__trigger{border-radius:16px}.mapa-dropdown__trigger-text{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__trigger-text--placeholder{color:var(--mapa-color-muted, #CFC4C7)}.mapa-dropdown__clear{position:absolute;top:50%;right:40px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:var(--mapa-color-muted, #555555);font-size:16px;line-height:1;cursor:pointer}.mapa-dropdown__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__action{flex:none}.mapa-dropdown__checkbox{flex:none;width:16px;height:16px;margin-right:12px;accent-color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__panel{width:100%;overflow:hidden;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08))}.mapa-dropdown__search-input{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}.mapa-dropdown__options{max-height:240px;overflow-y:auto;background:var(--mapa-color-surface, #ffffff)}.mapa-dropdown__group-label{margin:0;padding:10px 16px 6px;color:var(--mapa-color-muted, #555555);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.mapa-dropdown__option{display:flex;align-items:center;min-height:44px;text-align:left;cursor:pointer;transition:background-color .2s ease,color .2s ease}.mapa-dropdown__option:hover{background:#ff560b14}.mapa-dropdown__option--selected{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__option--select-all{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));font-weight:600}.mapa-dropdown__empty-state{margin:0;padding:14px 16px;color:var(--mapa-color-muted, #555555);font-size:14px;line-height:20px}.mapa-dropdown--invalid .mapa-dropdown__trigger{border-color:#b54242;box-shadow:0 0 0 3px #b542421f}.mapa-dropdown__hint,.mapa-dropdown__error{display:block;margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}.mapa-dropdown__hint{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__error{color:#b54242}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled", "shape", "fullWidth"], outputs: ["clicked"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDropdownComponent, decorators: [{
             type: Component,