ngx-opalbytes-components 1.27.0 → 1.28.0

package/README.md

@@ -232,7 +232,8 @@ src/
 └── lib/
     └── shared/
         └── components/
-        |   ├── autocomplete/
+        |   ├── accordion/
+        |   ├── accordion-item/
         |   ├── base-button/
         |   ├── base-icon/
         |   ├── base-input/
@@ -929,6 +930,205 @@ Um componente de alternância (toggle switch) que funciona com `ngModel` ou `for
 | `inputChange` | `EventEmitter<string>` | Emitido a cada mudança no input. |
 | `statusChanged` | `EventEmitter<CaoBaseToggleComponent>` | Emitido quando o toggle é alternado. |
 
+---
+### `CaoAccordionComponent` e `CaoAccordionItemComponent`
+
+Um accordion (painéis expansíveis) acessível e totalmente customizável, inspirado na API do `CdkAccordion`, mas **sem depender do `@angular/cdk`, do Angular Material ou de qualquer outra biblioteca externa** — usa apenas `@angular/core` e `@angular/common`. Cores, posições, textos e visibilidade são configuráveis por inputs ou por CSS custom properties. A animação de abrir/fechar é feita só com CSS e respeita `prefers-reduced-motion`.
+
+**Seletores:**
+- `<cao-accordion>` — container (controla modo único/múltiplo e o tema herdado pelos itens)
+- `<cao-accordion-item>` — painel individual (também pode ser usado isolado, como um cartão expansível)
+
+#### Atributos do `CaoAccordionComponent` (Inputs)
+
+| Atributo | Tipo | Padrão | Descrição |
+| --- | --- | --- | --- |
+| `multi` | `boolean` | `false` | Permite vários itens expandidos ao mesmo tempo. No modo único, expandir um item recolhe os demais. |
+| `displayMode` | `'default' \| 'flat' \| 'separated'` | `'default'` | `default`: painéis unidos em um único contorno arredondado; `flat`: unidos, sem bordas laterais/cantos; `separated`: cada painel é um cartão separado por `gap`. |
+| `hideToggle` | `boolean` | `false` | Oculta o ícone de expandir/recolher em todos os itens. |
+| `isVisible` | `boolean` | `true` | Exibe ou oculta o accordion inteiro. |
+| `togglePosition` | `'before' \| 'after'` | `'after'` | Posição do ícone em relação ao texto do cabeçalho. |
+| `headerAlign` | `'start' \| 'center' \| 'end'` | `'start'` | Alinhamento do texto do cabeçalho. |
+| `contentAlign` | `'start' \| 'center' \| 'end'` | `'start'` | Alinhamento do texto do conteúdo. |
+| `headerBgColor` | `string` | `#ffffff` | Cor de fundo do cabeçalho. |
+| `headerTextColor` | `string` | `#111827` | Cor do texto do cabeçalho. |
+| `headerHoverBgColor` | `string` | `#f3f4f6` | Cor de fundo do cabeçalho ao passar o mouse. |
+| `headerActiveBgColor` | `string` | cor do cabeçalho | Cor de fundo do cabeçalho do item expandido. |
+| `activeColor` | `string` | `#4f46e5` | Cor do texto/ícone do cabeçalho do item expandido. |
+| `contentBgColor` | `string` | `#ffffff` | Cor de fundo do conteúdo. |
+| `contentTextColor` | `string` | `#374151` | Cor do texto do conteúdo. |
+| `borderColor` | `string` | `#e5e7eb` | Cor das bordas e divisórias. |
+| `disabledColor` | `string` | `#9ca3af` | Cor do texto de itens desabilitados. |
+| `focusRingColor` | `string` | `rgba(79, 70, 229, 0.35)` | Cor do anel de foco do teclado. |
+| `iconColor` | `string` | `currentColor` | Cor do ícone de expandir/recolher. |
+| `borderRadius` | `string` | `8px` | Raio da borda. |
+| `gap` | `string` | `8px` | Espaçamento entre os itens (modo `separated`). |
+| `headerPadding` | `string` | `12px 16px` | Padding do cabeçalho. |
+| `contentPadding` | `string` | `16px` | Padding do conteúdo. |
+| `animationDuration` | `string` | `250ms` | Duração da animação. |
+| `dataCy` | `string` | `''` | Atributo `data-cy` para testes E2E. |
+
+#### Métodos do `CaoAccordionComponent`
+
+| Método | Descrição |
+| --- | --- |
+| `openAll()` | Expande todos os itens. Só tem efeito quando `multi` está ativo. |
+| `closeAll()` | Recolhe todos os itens. |
+
+#### Atributos do `CaoAccordionItemComponent` (Inputs)
+
+| Atributo | Tipo | Padrão | Descrição |
+| --- | --- | --- | --- |
+| `label` | `string` | `''` | Texto do cabeçalho. |
+| `description` | `string` | `''` | Texto secundário exibido abaixo do `label`. |
+| `expanded` | `boolean` | `false` | Estado de expansão. Suporta two-way binding: `[(expanded)]`. |
+| `isDisabled` | `boolean` | `false` | Desabilita a interação do usuário com o item. |
+| `isVisible` | `boolean` | `true` | Exibe ou oculta o item. |
+| `headingLevel` | `number` | `3` | Nível do heading (`aria-level`) do cabeçalho. |
+| `hideToggle` | `boolean` | herda do accordion | Oculta o ícone neste item. |
+| `togglePosition` | `'before' \| 'after'` | herda do accordion | Posição do ícone neste item. |
+| `headerAlign` | `'start' \| 'center' \| 'end'` | herda do accordion | Alinhamento do cabeçalho neste item. |
+| `headerBgColor` | `string` | herda do accordion | Cor de fundo do cabeçalho deste item. |
+| `headerTextColor` | `string` | herda do accordion | Cor do texto do cabeçalho deste item. |
+| `headerActiveBgColor` | `string` | herda do accordion | Cor de fundo do cabeçalho quando expandido. |
+| `activeColor` | `string` | herda do accordion | Cor do texto/ícone quando expandido. |
+| `contentBgColor` | `string` | herda do accordion | Cor de fundo do conteúdo. |
+| `contentTextColor` | `string` | herda do accordion | Cor do texto do conteúdo. |
+| `borderColor` | `string` | herda do accordion | Cor das bordas. |
+| `iconColor` | `string` | herda do accordion | Cor do ícone. |
+| `dataCy` | `string` | `''` | Atributo `data-cy` para testes E2E (veja abaixo). |
+
+#### Eventos do `CaoAccordionItemComponent` (Outputs)
+
+| Evento | Tipo | Descrição |
+| --- | --- | --- |
+| `opened` | `output<void>` | Emitido quando o item é expandido. |
+| `closed` | `output<void>` | Emitido quando o item é recolhido. |
+| `expandedChange` | `output<boolean>` | Emitido a cada mudança de estado (usado pelo `[(expanded)]`). |
+
+#### Métodos do `CaoAccordionItemComponent`
+
+| Método | Descrição |
+| --- | --- |
+| `toggle()` | Alterna o estado (ignorado se o item estiver desabilitado). |
+| `open()` | Expande o item. |
+| `close()` | Recolhe o item. |
+
+#### Projeção de conteúdo
+
+| Recurso | Descrição |
+| --- | --- |
+| Slot padrão (`<ng-content />`) | Conteúdo do painel. |
+| `[caoAccordionHeader]` | Conteúdo extra projetado no cabeçalho, abaixo do `label`/`description` (ex.: badges, status). |
+
+#### `data-cy` para testes E2E
+
+Ao informar `dataCy="faq"` em um item, são gerados automaticamente os seletores:
+
+| Elemento | Atributo |
+| --- | --- |
+| Item (host) | `data-cy="faq"` |
+| Botão do cabeçalho | `data-cy="faq-header"` |
+| Painel de conteúdo | `data-cy="faq-content"` |
+
+```typescript
+cy.get('[data-cy="faq-header"]').click();
+cy.get('[data-cy="faq-content"]').should('be.visible');
+```
+
+#### CSS Custom Properties
+
+Podem ser definidas globalmente, por accordion ou por item (têm precedência sobre os valores padrão, e os inputs equivalentes as definem automaticamente).
+
+| Propriedade | Padrão | Descrição |
+| --- | --- | --- |
+| `--cao-accordion-header-bg` | `#ffffff` | Fundo do cabeçalho. |
+| `--cao-accordion-header-text` | `#111827` | Texto do cabeçalho. |
+| `--cao-accordion-header-hover-bg` | `#f3f4f6` | Fundo do cabeçalho no hover. |
+| `--cao-accordion-header-active-bg` | `var(--cao-accordion-header-bg)` | Fundo do cabeçalho expandido. |
+| `--cao-accordion-active-color` | `#4f46e5` | Texto/ícone do cabeçalho expandido. |
+| `--cao-accordion-content-bg` | `#ffffff` | Fundo do conteúdo. |
+| `--cao-accordion-content-text` | `#374151` | Texto do conteúdo. |
+| `--cao-accordion-border-color` | `#e5e7eb` | Bordas e divisórias. |
+| `--cao-accordion-disabled-color` | `#9ca3af` | Texto desabilitado. |
+| `--cao-accordion-focus-ring` | `rgba(79, 70, 229, 0.35)` | Anel de foco. |
+| `--cao-accordion-icon-color` | `currentColor` | Cor do ícone. |
+| `--cao-accordion-radius` | `8px` | Raio da borda. |
+| `--cao-accordion-gap` | `8px` | Espaço entre itens (`separated`). |
+| `--cao-accordion-header-padding` | `12px 16px` | Padding do cabeçalho. |
+| `--cao-accordion-content-padding` | `16px` | Padding do conteúdo. |
+| `--cao-accordion-header-align` | `start` | Alinhamento do texto do cabeçalho. |
+| `--cao-accordion-content-align` | `start` | Alinhamento do texto do conteúdo. |
+| `--cao-accordion-duration` | `250ms` | Duração da animação. |
+
+**Exemplo básico:**
+
+```typescript
+import { Component } from '@angular/core';
+import { CaoAccordionComponent, CaoAccordionItemComponent } from 'ngx-opalbytes-components';
+
+@Component({
+  selector: 'app-faq',
+  imports: [CaoAccordionComponent, CaoAccordionItemComponent],
+  template: `
+    <cao-accordion dataCy="faq-accordion">
+      <cao-accordion-item label="Como funciona?" dataCy="faq-1" [expanded]="true">
+        Conteúdo da primeira pergunta.
+      </cao-accordion-item>
+      <cao-accordion-item label="Posso cancelar?" description="Sem multa" dataCy="faq-2">
+        Conteúdo da segunda pergunta.
+      </cao-accordion-item>
+    </cao-accordion>
+  `,
+})
+export class FaqComponent {}
+```
+
+**Exemplo com múltiplos itens abertos, cores, ícone antes do texto e controle externo:**
+
+```html
+<cao-accordion
+  #acc
+  [multi]="true"
+  displayMode="separated"
+  togglePosition="before"
+  headerAlign="center"
+  headerBgColor="#eef2ff"
+  headerTextColor="#312e81"
+  activeColor="#16a34a"
+  contentBgColor="#ffffff"
+  borderColor="#c7d2fe"
+  borderRadius="12px"
+  animationDuration="400ms"
+  dataCy="meu-accordion">
+
+  <cao-accordion-item label="Dados pessoais" [(expanded)]="dadosAbertos" (opened)="onAbriu()" (closed)="onFechou()">
+    ...
+  </cao-accordion-item>
+
+  <cao-accordion-item label="Pagamento" [isDisabled]="semPermissao" headerBgColor="#fef3c7">
+    <span caoAccordionHeader>Pendente</span>
+    ...
+  </cao-accordion-item>
+
+  <cao-accordion-item label="Somente admin" [isVisible]="ehAdmin" [hideToggle]="true">
+    ...
+  </cao-accordion-item>
+</cao-accordion>
+
+<cao-button buttonText="Abrir todos" (buttonClick)="acc.openAll()"></cao-button>
+<cao-button buttonText="Fechar todos" (buttonClick)="acc.closeAll()"></cao-button>
+```
+
+**Observações:**
+
+- Sem dependências externas: não usa `@angular/cdk`, `@angular/material`, `@lucide/angular` nem `ngx-mask`; o ícone é um SVG inline.
+- Acessibilidade: o cabeçalho é um `<button>` dentro de um `role="heading"`, com `aria-expanded`, `aria-controls` e painel `role="region"` com `aria-labelledby`. Painéis recolhidos ficam fora da ordem de tabulação e do leitor de tela.
+- Teclado: `Enter`/`Espaço` alternam o item; `↑`/`↓` movem o foco entre cabeçalhos; `Home`/`End` vão ao primeiro/último.
+- Itens definidos como `isDisabled` bloqueiam apenas a interação do usuário; `open()`, `close()` e `[expanded]` continuam funcionando programaticamente.
+- Os inputs do `<cao-accordion-item>` sobrescrevem os do `<cao-accordion>` apenas naquele item.
+- Fora de um `<cao-accordion>`, o item se comporta como um cartão expansível independente.
+
 ---
 
 ### `CaoSlideToggleComponent`

package/fesm2022/ngx-opalbytes-components.mjs

@@ -1,7 +1,7 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, input, computed, forwardRef, HostListener, HostBinding, ChangeDetectionStrategy, Component, DestroyRef, model, output, effect, untracked, EventEmitter, Input, Output, ViewChild, ChangeDetectorRef, Renderer2, ViewContainerRef, ViewEncapsulation, NgModule, ContentChildren, Directive, TemplateRef, ContentChild, signal, PLATFORM_ID, ViewChildren, Optional, Inject, Injectable } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, NgTemplateOutlet, NgOptimizedImage } from '@angular/common';
-import * as i0 from '@angular/core';
-import { EventEmitter, Input, Output, Component, ViewChild, inject, ElementRef, ChangeDetectorRef, Renderer2, ViewContainerRef, forwardRef, HostListener, ChangeDetectionStrategy, ViewEncapsulation, NgModule, ContentChildren, Directive, TemplateRef, ContentChild, signal, PLATFORM_ID, ViewChildren, HostBinding, input, computed, Optional, Inject, Injectable, output, DestroyRef } from '@angular/core';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import { LucideDynamicIcon } from '@lucide/angular';
@@ -60,6 +60,297 @@ import { MatTreeModule } from '@angular/material/tree';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { SelectionModel } from '@angular/cdk/collections';
 
+const CAO_ACCORDION = new InjectionToken('CAO_ACCORDION');
+
+const HEADER_SELECTOR = '.cao-accordion-item__header:not(:disabled)';
+/**
+ * Container de `<cao-accordion-item>`. Controla o modo de expansão (único ou múltiplo),
+ * a navegação por teclado e o tema (cores, posições e visibilidade) herdado pelos itens.
+ */
+class CaoAccordionComponent {
+    host = inject(ElementRef);
+    items = new Set();
+    // ----- Comportamento -----
+    /** Permite vários itens expandidos ao mesmo tempo. */
+    multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : []));
+    /** Oculta o ícone de expandir/recolher em todos os itens (cada item pode sobrescrever). */
+    hideToggle = input(false, ...(ngDevMode ? [{ debugName: "hideToggle" }] : []));
+    /** Exibe ou oculta o accordion inteiro. */
+    isVisible = input(true, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+    /** Atributo `data-cy` para testes E2E. */
+    dataCy = input('', ...(ngDevMode ? [{ debugName: "dataCy" }] : []));
+    // ----- Posição / layout -----
+    togglePosition = input('after', ...(ngDevMode ? [{ debugName: "togglePosition" }] : []));
+    headerAlign = input('start', ...(ngDevMode ? [{ debugName: "headerAlign" }] : []));
+    contentAlign = input('start', ...(ngDevMode ? [{ debugName: "contentAlign" }] : []));
+    displayMode = input('default', ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
+    // ----- Cores -----
+    headerBgColor = input('', ...(ngDevMode ? [{ debugName: "headerBgColor" }] : []));
+    headerTextColor = input('', ...(ngDevMode ? [{ debugName: "headerTextColor" }] : []));
+    headerHoverBgColor = input('', ...(ngDevMode ? [{ debugName: "headerHoverBgColor" }] : []));
+    headerActiveBgColor = input('', ...(ngDevMode ? [{ debugName: "headerActiveBgColor" }] : []));
+    activeColor = input('', ...(ngDevMode ? [{ debugName: "activeColor" }] : []));
+    contentBgColor = input('', ...(ngDevMode ? [{ debugName: "contentBgColor" }] : []));
+    contentTextColor = input('', ...(ngDevMode ? [{ debugName: "contentTextColor" }] : []));
+    borderColor = input('', ...(ngDevMode ? [{ debugName: "borderColor" }] : []));
+    disabledColor = input('', ...(ngDevMode ? [{ debugName: "disabledColor" }] : []));
+    focusRingColor = input('', ...(ngDevMode ? [{ debugName: "focusRingColor" }] : []));
+    iconColor = input('', ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
+    // ----- Dimensões / animação -----
+    borderRadius = input('', ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
+    gap = input('', ...(ngDevMode ? [{ debugName: "gap" }] : []));
+    headerPadding = input('', ...(ngDevMode ? [{ debugName: "headerPadding" }] : []));
+    contentPadding = input('', ...(ngDevMode ? [{ debugName: "contentPadding" }] : []));
+    animationDuration = input('', ...(ngDevMode ? [{ debugName: "animationDuration" }] : []));
+    hostStyle = computed(() => ({
+        '--cao-accordion-header-bg': this.headerBgColor() || null,
+        '--cao-accordion-header-text': this.headerTextColor() || null,
+        '--cao-accordion-header-hover-bg': this.headerHoverBgColor() || null,
+        '--cao-accordion-header-active-bg': this.headerActiveBgColor() || null,
+        '--cao-accordion-active-color': this.activeColor() || null,
+        '--cao-accordion-content-bg': this.contentBgColor() || null,
+        '--cao-accordion-content-text': this.contentTextColor() || null,
+        '--cao-accordion-border-color': this.borderColor() || null,
+        '--cao-accordion-disabled-color': this.disabledColor() || null,
+        '--cao-accordion-focus-ring': this.focusRingColor() || null,
+        '--cao-accordion-icon-color': this.iconColor() || null,
+        '--cao-accordion-radius': this.borderRadius() || null,
+        '--cao-accordion-gap': this.gap() || null,
+        '--cao-accordion-header-padding': this.headerPadding() || null,
+        '--cao-accordion-content-padding': this.contentPadding() || null,
+        '--cao-accordion-duration': this.animationDuration() || null,
+        '--cao-accordion-content-align': this.contentAlign(),
+    }), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
+    get styleBinding() {
+        return this.hostStyle();
+    }
+    get dataCyAttr() {
+        return this.dataCy() || null;
+    }
+    get hiddenClass() {
+        return !this.isVisible();
+    }
+    get defaultModeClass() {
+        return this.displayMode() === 'default';
+    }
+    get flatModeClass() {
+        return this.displayMode() === 'flat';
+    }
+    get separatedModeClass() {
+        return this.displayMode() === 'separated';
+    }
+    /** Expande todos os itens. Só tem efeito quando `multi` está ativo. */
+    openAll() {
+        if (!this.multi()) {
+            return;
+        }
+        this.items.forEach((item) => item.open());
+    }
+    /** Recolhe todos os itens. */
+    closeAll() {
+        this.items.forEach((item) => item.close());
+    }
+    register(item) {
+        this.items.add(item);
+    }
+    unregister(item) {
+        this.items.delete(item);
+    }
+    /** Chamado pelos itens ao expandir: no modo único, recolhe os demais. */
+    notifyOpened(item) {
+        if (this.multi()) {
+            return;
+        }
+        this.items.forEach((other) => {
+            if (other !== item && other.expanded()) {
+                other.close();
+            }
+        });
+    }
+    /** Navegação por teclado entre cabeçalhos: ↑ ↓ Home End. */
+    onKeydown(event) {
+        const root = this.host.nativeElement;
+        const target = event.target;
+        if (!target?.classList.contains('cao-accordion-item__header') || target.closest('cao-accordion') !== root) {
+            return;
+        }
+        const headers = Array.from(root.querySelectorAll(HEADER_SELECTOR)).filter((header) => header.closest('cao-accordion') === root && !header.closest('.cao-accordion-item--hidden'));
+        const current = headers.indexOf(target);
+        const last = headers.length - 1;
+        let next;
+        switch (event.key) {
+            case 'ArrowDown':
+                next = current >= last ? 0 : current + 1;
+                break;
+            case 'ArrowUp':
+                next = current <= 0 ? last : current - 1;
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = last;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        headers[next]?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: CaoAccordionComponent, isStandalone: true, selector: "cao-accordion", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, hideToggle: { classPropertyName: "hideToggle", publicName: "hideToggle", isSignal: true, isRequired: false, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null }, togglePosition: { classPropertyName: "togglePosition", publicName: "togglePosition", isSignal: true, isRequired: false, transformFunction: null }, headerAlign: { classPropertyName: "headerAlign", publicName: "headerAlign", isSignal: true, isRequired: false, transformFunction: null }, contentAlign: { classPropertyName: "contentAlign", publicName: "contentAlign", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, headerBgColor: { classPropertyName: "headerBgColor", publicName: "headerBgColor", isSignal: true, isRequired: false, transformFunction: null }, headerTextColor: { classPropertyName: "headerTextColor", publicName: "headerTextColor", isSignal: true, isRequired: false, transformFunction: null }, headerHoverBgColor: { classPropertyName: "headerHoverBgColor", publicName: "headerHoverBgColor", isSignal: true, isRequired: false, transformFunction: null }, headerActiveBgColor: { classPropertyName: "headerActiveBgColor", publicName: "headerActiveBgColor", isSignal: true, isRequired: false, transformFunction: null }, activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null }, contentBgColor: { classPropertyName: "contentBgColor", publicName: "contentBgColor", isSignal: true, isRequired: false, transformFunction: null }, contentTextColor: { classPropertyName: "contentTextColor", publicName: "contentTextColor", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, disabledColor: { classPropertyName: "disabledColor", publicName: "disabledColor", isSignal: true, isRequired: false, transformFunction: null }, focusRingColor: { classPropertyName: "focusRingColor", publicName: "focusRingColor", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, headerPadding: { classPropertyName: "headerPadding", publicName: "headerPadding", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "style": "this.styleBinding", "attr.data-cy": "this.dataCyAttr", "class.cao-accordion--hidden": "this.hiddenClass", "class.cao-accordion--default": "this.defaultModeClass", "class.cao-accordion--flat": "this.flatModeClass", "class.cao-accordion--separated": "this.separatedModeClass" } }, providers: [{ provide: CAO_ACCORDION, useExisting: forwardRef(() => CaoAccordionComponent) }], ngImport: i0, template: "<ng-content />", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%}:host(.cao-accordion--hidden){display:none}:host(.cao-accordion--default){gap:1px;background:var(--cao-accordion-border-color, #e5e7eb);border:1px solid var(--cao-accordion-border-color, #e5e7eb);border-radius:var(--cao-accordion-radius, 8px);overflow:hidden}:host(.cao-accordion--flat){gap:1px;background:var(--cao-accordion-border-color, #e5e7eb);border-top:1px solid var(--cao-accordion-border-color, #e5e7eb);border-bottom:1px solid var(--cao-accordion-border-color, #e5e7eb)}:host(.cao-accordion--separated){gap:var(--cao-accordion-gap, 8px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cao-accordion', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: CAO_ACCORDION, useExisting: forwardRef(() => CaoAccordionComponent) }], template: "<ng-content />", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%}:host(.cao-accordion--hidden){display:none}:host(.cao-accordion--default){gap:1px;background:var(--cao-accordion-border-color, #e5e7eb);border:1px solid var(--cao-accordion-border-color, #e5e7eb);border-radius:var(--cao-accordion-radius, 8px);overflow:hidden}:host(.cao-accordion--flat){gap:1px;background:var(--cao-accordion-border-color, #e5e7eb);border-top:1px solid var(--cao-accordion-border-color, #e5e7eb);border-bottom:1px solid var(--cao-accordion-border-color, #e5e7eb)}:host(.cao-accordion--separated){gap:var(--cao-accordion-gap, 8px)}\n"] }]
+        }], propDecorators: { multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], hideToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideToggle", required: false }] }], isVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisible", required: false }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }], togglePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "togglePosition", required: false }] }], headerAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerAlign", required: false }] }], contentAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentAlign", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], headerBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerBgColor", required: false }] }], headerTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTextColor", required: false }] }], headerHoverBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHoverBgColor", required: false }] }], headerActiveBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActiveBgColor", required: false }] }], activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], contentBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentBgColor", required: false }] }], contentTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTextColor", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], disabledColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledColor", required: false }] }], focusRingColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusRingColor", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], headerPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerPadding", required: false }] }], contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPadding", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], styleBinding: [{
+                type: HostBinding,
+                args: ['style']
+            }], dataCyAttr: [{
+                type: HostBinding,
+                args: ['attr.data-cy']
+            }], hiddenClass: [{
+                type: HostBinding,
+                args: ['class.cao-accordion--hidden']
+            }], defaultModeClass: [{
+                type: HostBinding,
+                args: ['class.cao-accordion--default']
+            }], flatModeClass: [{
+                type: HostBinding,
+                args: ['class.cao-accordion--flat']
+            }], separatedModeClass: [{
+                type: HostBinding,
+                args: ['class.cao-accordion--separated']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+let nextId = 0;
+/**
+ * Item do accordion. Pode ser usado dentro de `<cao-accordion>` ou isolado (como um cartão expansível).
+ * Os inputs de cor/posição, quando informados, sobrescrevem os valores definidos no accordion.
+ */
+class CaoAccordionItemComponent {
+    accordion = inject(CAO_ACCORDION, { optional: true });
+    destroyRef = inject(DestroyRef);
+    previousExpanded = null;
+    headerId = `cao-accordion-header-${nextId}`;
+    panelId = `cao-accordion-panel-${nextId++}`;
+    // ----- Conteúdo -----
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
+    /** Nível do heading (aria-level) do cabeçalho. */
+    headingLevel = input(3, ...(ngDevMode ? [{ debugName: "headingLevel" }] : []));
+    // ----- Estado -----
+    /** Estado de expansão. Suporta two-way binding: `[(expanded)]`. */
+    expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    /** Exibe ou oculta o item. */
+    isVisible = input(true, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+    dataCy = input('', ...(ngDevMode ? [{ debugName: "dataCy" }] : []));
+    // ----- Posição (sobrescreve o accordion quando informado) -----
+    hideToggle = input(undefined, ...(ngDevMode ? [{ debugName: "hideToggle" }] : []));
+    togglePosition = input(undefined, ...(ngDevMode ? [{ debugName: "togglePosition" }] : []));
+    headerAlign = input(undefined, ...(ngDevMode ? [{ debugName: "headerAlign" }] : []));
+    // ----- Cores (sobrescrevem o accordion quando informadas) -----
+    headerBgColor = input('', ...(ngDevMode ? [{ debugName: "headerBgColor" }] : []));
+    headerTextColor = input('', ...(ngDevMode ? [{ debugName: "headerTextColor" }] : []));
+    headerActiveBgColor = input('', ...(ngDevMode ? [{ debugName: "headerActiveBgColor" }] : []));
+    activeColor = input('', ...(ngDevMode ? [{ debugName: "activeColor" }] : []));
+    contentBgColor = input('', ...(ngDevMode ? [{ debugName: "contentBgColor" }] : []));
+    contentTextColor = input('', ...(ngDevMode ? [{ debugName: "contentTextColor" }] : []));
+    borderColor = input('', ...(ngDevMode ? [{ debugName: "borderColor" }] : []));
+    iconColor = input('', ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
+    // ----- Eventos -----
+    opened = output();
+    closed = output();
+    toggleHidden = computed(() => this.hideToggle() ?? this.accordion?.hideToggle() ?? false, ...(ngDevMode ? [{ debugName: "toggleHidden" }] : []));
+    togglePos = computed(() => this.togglePosition() ?? this.accordion?.togglePosition() ?? 'after', ...(ngDevMode ? [{ debugName: "togglePos" }] : []));
+    align = computed(() => this.headerAlign() ?? this.accordion?.headerAlign() ?? 'start', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    isCard = computed(() => (this.accordion?.displayMode() ?? 'separated') === 'separated', ...(ngDevMode ? [{ debugName: "isCard" }] : []));
+    headerDataCy = computed(() => (this.dataCy() ? `${this.dataCy()}-header` : null), ...(ngDevMode ? [{ debugName: "headerDataCy" }] : []));
+    panelDataCy = computed(() => (this.dataCy() ? `${this.dataCy()}-content` : null), ...(ngDevMode ? [{ debugName: "panelDataCy" }] : []));
+    hostStyle = computed(() => ({
+        '--cao-accordion-header-bg': this.headerBgColor() || null,
+        '--cao-accordion-header-text': this.headerTextColor() || null,
+        '--cao-accordion-header-active-bg': this.headerActiveBgColor() || null,
+        '--cao-accordion-active-color': this.activeColor() || null,
+        '--cao-accordion-content-bg': this.contentBgColor() || null,
+        '--cao-accordion-content-text': this.contentTextColor() || null,
+        '--cao-accordion-border-color': this.borderColor() || null,
+        '--cao-accordion-icon-color': this.iconColor() || null,
+        '--cao-accordion-header-align': this.align(),
+    }), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
+    get styleBinding() {
+        return this.hostStyle();
+    }
+    get dataCyAttr() {
+        return this.dataCy() || null;
+    }
+    get hiddenClass() {
+        return !this.isVisible();
+    }
+    get expandedClass() {
+        return this.expanded();
+    }
+    get cardClass() {
+        return this.isCard();
+    }
+    constructor() {
+        this.accordion?.register(this);
+        this.destroyRef.onDestroy(() => this.accordion?.unregister(this));
+        effect(() => {
+            const isExpanded = this.expanded();
+            untracked(() => this.handleExpandedChange(isExpanded));
+        });
+    }
+    /** Alterna o estado (ignorado quando o item está desabilitado). */
+    toggle() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.expanded.update((value) => !value);
+    }
+    open() {
+        this.expanded.set(true);
+    }
+    close() {
+        this.expanded.set(false);
+    }
+    handleExpandedChange(isExpanded) {
+        if (isExpanded) {
+            this.accordion?.notifyOpened(this);
+        }
+        if (this.previousExpanded !== null && this.previousExpanded !== isExpanded) {
+            const event = isExpanded ? this.opened : this.closed;
+            event.emit();
+        }
+        this.previousExpanded = isExpanded;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoAccordionItemComponent, isStandalone: true, selector: "cao-accordion-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null }, hideToggle: { classPropertyName: "hideToggle", publicName: "hideToggle", isSignal: true, isRequired: false, transformFunction: null }, togglePosition: { classPropertyName: "togglePosition", publicName: "togglePosition", isSignal: true, isRequired: false, transformFunction: null }, headerAlign: { classPropertyName: "headerAlign", publicName: "headerAlign", isSignal: true, isRequired: false, transformFunction: null }, headerBgColor: { classPropertyName: "headerBgColor", publicName: "headerBgColor", isSignal: true, isRequired: false, transformFunction: null }, headerTextColor: { classPropertyName: "headerTextColor", publicName: "headerTextColor", isSignal: true, isRequired: false, transformFunction: null }, headerActiveBgColor: { classPropertyName: "headerActiveBgColor", publicName: "headerActiveBgColor", isSignal: true, isRequired: false, transformFunction: null }, activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null }, contentBgColor: { classPropertyName: "contentBgColor", publicName: "contentBgColor", isSignal: true, isRequired: false, transformFunction: null }, contentTextColor: { classPropertyName: "contentTextColor", publicName: "contentTextColor", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", opened: "opened", closed: "closed" }, host: { properties: { "style": "this.styleBinding", "attr.data-cy": "this.dataCyAttr", "class.cao-accordion-item--hidden": "this.hiddenClass", "class.cao-accordion-item--expanded": "this.expandedClass", "class.cao-accordion-item--card": "this.cardClass" } }, ngImport: i0, template: "<div class=\"cao-accordion-item\">\n  <div class=\"cao-accordion-item__heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\n    <button\n      type=\"button\"\n      class=\"cao-accordion-item__header\"\n      [class.cao-accordion-item__header--toggle-before]=\"togglePos() === 'before'\"\n      [id]=\"headerId\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"expanded()\"\n      [attr.aria-controls]=\"panelId\"\n      [attr.data-cy]=\"headerDataCy()\"\n      (click)=\"toggle()\">\n      <span class=\"cao-accordion-item__text\">\n        <span class=\"cao-accordion-item__label\">{{ label() }}</span>\n        @if (description()) {\n          <span class=\"cao-accordion-item__description\">{{ description() }}</span>\n        }\n        <ng-content select=\"[caoAccordionHeader]\" />\n      </span>\n\n      @if (!toggleHidden()) {\n        <svg\n          class=\"cao-accordion-item__icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"20\"\n          height=\"20\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n          focusable=\"false\">\n          <path d=\"m6 9 6 6 6-6\" />\n        </svg>\n      }\n    </button>\n  </div>\n\n  <div\n    class=\"cao-accordion-item__panel\"\n    role=\"region\"\n    [id]=\"panelId\"\n    [attr.aria-labelledby]=\"headerId\"\n    [attr.data-cy]=\"panelDataCy()\">\n    <div class=\"cao-accordion-item__panel-inner\">\n      <div class=\"cao-accordion-item__content\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n</div>", styles: [":host{display:block;box-sizing:border-box;min-width:0}:host(.cao-accordion-item--hidden){display:none}.cao-accordion-item{background:var(--cao-accordion-content-bg, #ffffff);color:var(--cao-accordion-content-text, #374151);overflow:hidden}:host(.cao-accordion-item--card) .cao-accordion-item{border:1px solid var(--cao-accordion-border-color, #e5e7eb);border-radius:var(--cao-accordion-radius, 8px)}.cao-accordion-item__heading{margin:0}.cao-accordion-item__header{display:flex;align-items:center;gap:12px;box-sizing:border-box;width:100%;min-height:48px;margin:0;padding:var(--cao-accordion-header-padding, 12px 16px);border:0;border-radius:0;background:var(--cao-accordion-header-bg, #ffffff);color:var(--cao-accordion-header-text, #111827);font:inherit;text-align:start;cursor:pointer;transition:background-color var(--cao-accordion-duration, .25s) ease,color var(--cao-accordion-duration, .25s) ease}.cao-accordion-item__header:hover:not(:disabled){background:var(--cao-accordion-header-hover-bg, #f3f4f6)}.cao-accordion-item__header:focus-visible{outline:2px solid var(--cao-accordion-focus-ring, rgba(79, 70, 229, .35));outline-offset:-2px}.cao-accordion-item__header:disabled{color:var(--cao-accordion-disabled-color, #9ca3af);cursor:not-allowed}:host(.cao-accordion-item--expanded) .cao-accordion-item__header{background:var(--cao-accordion-header-active-bg, var(--cao-accordion-header-bg, #ffffff));color:var(--cao-accordion-active-color, #4f46e5)}:host(.cao-accordion-item--expanded) .cao-accordion-item__header:disabled{color:var(--cao-accordion-disabled-color, #9ca3af)}.cao-accordion-item__text{display:flex;flex:1 1 auto;flex-direction:column;gap:2px;min-width:0;text-align:var(--cao-accordion-header-align, start)}.cao-accordion-item__label{font-weight:600;overflow-wrap:anywhere}.cao-accordion-item__description{font-size:.8125rem;font-weight:400;opacity:.75}.cao-accordion-item__icon{flex:0 0 auto;color:var(--cao-accordion-icon-color, currentColor);transition:transform var(--cao-accordion-duration, .25s) ease}.cao-accordion-item__header--toggle-before .cao-accordion-item__icon{order:-1}:host(.cao-accordion-item--expanded) .cao-accordion-item__icon{transform:rotate(180deg)}.cao-accordion-item__panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--cao-accordion-duration, .25s) ease,visibility var(--cao-accordion-duration, .25s)}:host(.cao-accordion-item--expanded) .cao-accordion-item__panel{grid-template-rows:1fr;visibility:visible}.cao-accordion-item__panel-inner{min-height:0;overflow:hidden}.cao-accordion-item__content{padding:var(--cao-accordion-content-padding, 16px);border-top:1px solid var(--cao-accordion-border-color, #e5e7eb);text-align:var(--cao-accordion-content-align, start)}@media(prefers-reduced-motion:reduce){.cao-accordion-item__header,.cao-accordion-item__icon,.cao-accordion-item__panel{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cao-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cao-accordion-item\">\n  <div class=\"cao-accordion-item__heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\n    <button\n      type=\"button\"\n      class=\"cao-accordion-item__header\"\n      [class.cao-accordion-item__header--toggle-before]=\"togglePos() === 'before'\"\n      [id]=\"headerId\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"expanded()\"\n      [attr.aria-controls]=\"panelId\"\n      [attr.data-cy]=\"headerDataCy()\"\n      (click)=\"toggle()\">\n      <span class=\"cao-accordion-item__text\">\n        <span class=\"cao-accordion-item__label\">{{ label() }}</span>\n        @if (description()) {\n          <span class=\"cao-accordion-item__description\">{{ description() }}</span>\n        }\n        <ng-content select=\"[caoAccordionHeader]\" />\n      </span>\n\n      @if (!toggleHidden()) {\n        <svg\n          class=\"cao-accordion-item__icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"20\"\n          height=\"20\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n          focusable=\"false\">\n          <path d=\"m6 9 6 6 6-6\" />\n        </svg>\n      }\n    </button>\n  </div>\n\n  <div\n    class=\"cao-accordion-item__panel\"\n    role=\"region\"\n    [id]=\"panelId\"\n    [attr.aria-labelledby]=\"headerId\"\n    [attr.data-cy]=\"panelDataCy()\">\n    <div class=\"cao-accordion-item__panel-inner\">\n      <div class=\"cao-accordion-item__content\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n</div>", styles: [":host{display:block;box-sizing:border-box;min-width:0}:host(.cao-accordion-item--hidden){display:none}.cao-accordion-item{background:var(--cao-accordion-content-bg, #ffffff);color:var(--cao-accordion-content-text, #374151);overflow:hidden}:host(.cao-accordion-item--card) .cao-accordion-item{border:1px solid var(--cao-accordion-border-color, #e5e7eb);border-radius:var(--cao-accordion-radius, 8px)}.cao-accordion-item__heading{margin:0}.cao-accordion-item__header{display:flex;align-items:center;gap:12px;box-sizing:border-box;width:100%;min-height:48px;margin:0;padding:var(--cao-accordion-header-padding, 12px 16px);border:0;border-radius:0;background:var(--cao-accordion-header-bg, #ffffff);color:var(--cao-accordion-header-text, #111827);font:inherit;text-align:start;cursor:pointer;transition:background-color var(--cao-accordion-duration, .25s) ease,color var(--cao-accordion-duration, .25s) ease}.cao-accordion-item__header:hover:not(:disabled){background:var(--cao-accordion-header-hover-bg, #f3f4f6)}.cao-accordion-item__header:focus-visible{outline:2px solid var(--cao-accordion-focus-ring, rgba(79, 70, 229, .35));outline-offset:-2px}.cao-accordion-item__header:disabled{color:var(--cao-accordion-disabled-color, #9ca3af);cursor:not-allowed}:host(.cao-accordion-item--expanded) .cao-accordion-item__header{background:var(--cao-accordion-header-active-bg, var(--cao-accordion-header-bg, #ffffff));color:var(--cao-accordion-active-color, #4f46e5)}:host(.cao-accordion-item--expanded) .cao-accordion-item__header:disabled{color:var(--cao-accordion-disabled-color, #9ca3af)}.cao-accordion-item__text{display:flex;flex:1 1 auto;flex-direction:column;gap:2px;min-width:0;text-align:var(--cao-accordion-header-align, start)}.cao-accordion-item__label{font-weight:600;overflow-wrap:anywhere}.cao-accordion-item__description{font-size:.8125rem;font-weight:400;opacity:.75}.cao-accordion-item__icon{flex:0 0 auto;color:var(--cao-accordion-icon-color, currentColor);transition:transform var(--cao-accordion-duration, .25s) ease}.cao-accordion-item__header--toggle-before .cao-accordion-item__icon{order:-1}:host(.cao-accordion-item--expanded) .cao-accordion-item__icon{transform:rotate(180deg)}.cao-accordion-item__panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--cao-accordion-duration, .25s) ease,visibility var(--cao-accordion-duration, .25s)}:host(.cao-accordion-item--expanded) .cao-accordion-item__panel{grid-template-rows:1fr;visibility:visible}.cao-accordion-item__panel-inner{min-height:0;overflow:hidden}.cao-accordion-item__content{padding:var(--cao-accordion-content-padding, 16px);border-top:1px solid var(--cao-accordion-border-color, #e5e7eb);text-align:var(--cao-accordion-content-align, start)}@media(prefers-reduced-motion:reduce){.cao-accordion-item__header,.cao-accordion-item__icon,.cao-accordion-item__panel{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], isVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisible", required: false }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }], hideToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideToggle", required: false }] }], togglePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "togglePosition", required: false }] }], headerAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerAlign", required: false }] }], headerBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerBgColor", required: false }] }], headerTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTextColor", required: false }] }], headerActiveBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActiveBgColor", required: false }] }], activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], contentBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentBgColor", required: false }] }], contentTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTextColor", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], styleBinding: [{
+                type: HostBinding,
+                args: ['style']
+            }], dataCyAttr: [{
+                type: HostBinding,
+                args: ['attr.data-cy']
+            }], hiddenClass: [{
+                type: HostBinding,
+                args: ['class.cao-accordion-item--hidden']
+            }], expandedClass: [{
+                type: HostBinding,
+                args: ['class.cao-accordion-item--expanded']
+            }], cardClass: [{
+                type: HostBinding,
+                args: ['class.cao-accordion-item--card']
+            }] } });
+
 class CaoBaseButtonComponent {
     buttonClick = new EventEmitter();
     buttonText = "Clique!";
@@ -4511,5 +4802,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoBaseToggleComponent, CaoBaseWidgetComponent, CaoCardComponent, CaoCheckboxComponent, CaoDropDownComponent, CaoError, CaoFormField, CaoHint, CaoKpi, CaoRadioButtonComponent, CaoRadioGroupComponent, CaoSkeletonComponent, CaoSlideToggleComponent, CaoTabGroup, CaoTabPanel, CaoWidgetService, DEFAULT_ERROR_STATE_MATCHER, ErrorStateMatcher, Footer, LinksButton, Paginator, ShowOnDirtyErrorStateMatcher, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
+export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CAO_ACCORDION, CaoAccordionComponent, CaoAccordionItemComponent, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoBaseToggleComponent, CaoBaseWidgetComponent, CaoCardComponent, CaoCheckboxComponent, CaoDropDownComponent, CaoError, CaoFormField, CaoHint, CaoKpi, CaoRadioButtonComponent, CaoRadioGroupComponent, CaoSkeletonComponent, CaoSlideToggleComponent, CaoTabGroup, CaoTabPanel, CaoWidgetService, DEFAULT_ERROR_STATE_MATCHER, ErrorStateMatcher, Footer, LinksButton, Paginator, ShowOnDirtyErrorStateMatcher, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
 //# sourceMappingURL=ngx-opalbytes-components.mjs.map