ngx-opalbytes-components 1.26.0 → 1.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-opalbytes-components",
-  "version": "1.26.0",
+  "version": "1.28.0",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",

package/src/lib/shared/components/accordion/accordion.component.css

@@ -0,0 +1,30 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+:host(.cao-accordion--hidden) {
+  display: none;
+}
+
+/* Painéis unidos: o fundo do host aparece nos 1px de gap e funciona como divisória. */
+: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);
+}

package/src/lib/shared/components/accordion/accordion.component.html

@@ -0,0 +1 @@
+<ng-content />

package/src/lib/shared/components/accordion/accordion.component.spec.ts

@@ -0,0 +1,117 @@
+import { Component, input, viewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CaoAccordionComponent } from './accordion.component';
+import { CaoAccordionItemComponent } from '../accordion-item/accordion-item.component';
+
+
+@Component({
+  imports: [CaoAccordionItemComponent, CaoAccordionComponent],
+  template: `
+    <cao-accordion dataCy="acc" headerBgColor="#111111" [multi]="multi()">
+      <cao-accordion-item dataCy="one" label="Um">A</cao-accordion-item>
+      <cao-accordion-item dataCy="two" label="Dois">B</cao-accordion-item>
+      <cao-accordion-item dataCy="dis" label="Desabilitado" [isDisabled]="true">C</cao-accordion-item>
+      <cao-accordion-item dataCy="hid" label="Oculto" [isVisible]="false">D</cao-accordion-item>
+    </cao-accordion>
+  `,
+})
+class HostComponent {
+  readonly multi = input<boolean>(false);
+  readonly accordion = viewChild.required(CaoAccordionComponent);
+}
+
+describe('CaoAccordion', () => {
+  let fixture: ComponentFixture<HostComponent>;
+  let host: HTMLElement;
+
+  const header = (cy: string): HTMLButtonElement =>
+    host.querySelector<HTMLButtonElement>(`[data-cy="${cy}-header"]`) as HTMLButtonElement;
+
+  const click = async (cy: string): Promise<void> => {
+    header(cy).click();
+    fixture.detectChanges();
+    await fixture.whenStable();
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [HostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(HostComponent);
+    host = fixture.nativeElement as HTMLElement;
+    fixture.detectChanges();
+    await fixture.whenStable();
+  });
+
+  it('expõe data-cy no accordion, no item, no cabeçalho e no conteúdo', () => {
+    expect(host.querySelector('[data-cy="acc"]')).not.toBeNull();
+    expect(host.querySelector('[data-cy="one"]')).not.toBeNull();
+    expect(host.querySelector('[data-cy="one-header"]')).not.toBeNull();
+    expect(host.querySelector('[data-cy="one-content"]')).not.toBeNull();
+  });
+
+  it('expande e recolhe ao clicar no cabeçalho', async () => {
+    expect(header('one').getAttribute('aria-expanded')).toBe('false');
+    await click('one');
+    expect(header('one').getAttribute('aria-expanded')).toBe('true');
+    await click('one');
+    expect(header('one').getAttribute('aria-expanded')).toBe('false');
+  });
+
+  it('no modo único, expandir um item recolhe os demais', async () => {
+    await click('one');
+    await click('two');
+    expect(header('one').getAttribute('aria-expanded')).toBe('false');
+    expect(header('two').getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('no modo multi, mantém vários itens expandidos', async () => {
+    fixture.componentRef.setInput('multi', true);
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    await click('one');
+    await click('two');
+    expect(header('one').getAttribute('aria-expanded')).toBe('true');
+    expect(header('two').getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('não alterna item desabilitado', async () => {
+    expect(header('dis').disabled).toBe(true);
+    await click('dis');
+    expect(header('dis').getAttribute('aria-expanded')).toBe('false');
+  });
+
+  it('oculta o item quando isVisible é false', () => {
+    const item = host.querySelector('[data-cy="hid"]') as HTMLElement;
+    expect(item.classList.contains('cao-accordion-item--hidden')).toBe(true);
+  });
+
+  it('openAll/closeAll funcionam apenas conforme o modo', async () => {
+    const accordion = fixture.componentInstance.accordion();
+    accordion.openAll();
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(header('one').getAttribute('aria-expanded')).toBe('false');
+
+    fixture.componentRef.setInput('multi', true);
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    accordion.openAll();
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(header('one').getAttribute('aria-expanded')).toBe('true');
+    expect(header('two').getAttribute('aria-expanded')).toBe('true');
+
+    accordion.closeAll();
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(header('one').getAttribute('aria-expanded')).toBe('false');
+  });
+
+  it('aplica as cores como CSS custom properties', () => {
+    const acc = host.querySelector('[data-cy="acc"]') as HTMLElement;
+    expect(acc.style.getPropertyValue('--cao-accordion-header-bg')).toBe('#111111');
+  });
+});

package/src/lib/shared/components/accordion/accordion.component.ts

@@ -0,0 +1,195 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  forwardRef,
+  HostBinding,
+  HostListener,
+  inject,
+  input,
+} from '@angular/core';
+
+import {
+  CAO_ACCORDION,
+  CaoAccordionAlign,
+  CaoAccordionDisplayMode,
+  CaoAccordionTogglePosition,
+  ICaoAccordionHost,
+  ICaoAccordionItemRef,
+} from './accordion.token';
+
+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.
+ */
+@Component({
+  selector: 'cao-accordion',
+  templateUrl: './accordion.component.html',
+  styleUrl: './accordion.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{ provide: CAO_ACCORDION, useExisting: forwardRef(() => CaoAccordionComponent) }],
+})
+export class CaoAccordionComponent implements ICaoAccordionHost {
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly items = new Set<ICaoAccordionItemRef>();
+
+  // ----- Comportamento -----
+  /** Permite vários itens expandidos ao mesmo tempo. */
+  readonly multi = input<boolean>(false);
+  /** Oculta o ícone de expandir/recolher em todos os itens (cada item pode sobrescrever). */
+  readonly hideToggle = input<boolean>(false);
+  /** Exibe ou oculta o accordion inteiro. */
+  readonly isVisible = input<boolean>(true);
+  /** Atributo `data-cy` para testes E2E. */
+  readonly dataCy = input<string>('');
+
+  // ----- Posição / layout -----
+  readonly togglePosition = input<CaoAccordionTogglePosition>('after');
+  readonly headerAlign = input<CaoAccordionAlign>('start');
+  readonly contentAlign = input<CaoAccordionAlign>('start');
+  readonly displayMode = input<CaoAccordionDisplayMode>('default');
+
+  // ----- Cores -----
+  readonly headerBgColor = input<string>('');
+  readonly headerTextColor = input<string>('');
+  readonly headerHoverBgColor = input<string>('');
+  readonly headerActiveBgColor = input<string>('');
+  readonly activeColor = input<string>('');
+  readonly contentBgColor = input<string>('');
+  readonly contentTextColor = input<string>('');
+  readonly borderColor = input<string>('');
+  readonly disabledColor = input<string>('');
+  readonly focusRingColor = input<string>('');
+  readonly iconColor = input<string>('');
+
+  // ----- Dimensões / animação -----
+  readonly borderRadius = input<string>('');
+  readonly gap = input<string>('');
+  readonly headerPadding = input<string>('');
+  readonly contentPadding = input<string>('');
+  readonly animationDuration = input<string>('');
+
+  private readonly 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(),
+  }));
+
+  @HostBinding('style')
+  get styleBinding(): Record<string, string | null> {
+    return this.hostStyle();
+  }
+
+  @HostBinding('attr.data-cy')
+  get dataCyAttr(): string | null {
+    return this.dataCy() || null;
+  }
+
+  @HostBinding('class.cao-accordion--hidden')
+  get hiddenClass(): boolean {
+    return !this.isVisible();
+  }
+
+  @HostBinding('class.cao-accordion--default')
+  get defaultModeClass(): boolean {
+    return this.displayMode() === 'default';
+  }
+
+  @HostBinding('class.cao-accordion--flat')
+  get flatModeClass(): boolean {
+    return this.displayMode() === 'flat';
+  }
+
+  @HostBinding('class.cao-accordion--separated')
+  get separatedModeClass(): boolean {
+    return this.displayMode() === 'separated';
+  }
+
+  /** Expande todos os itens. Só tem efeito quando `multi` está ativo. */
+  openAll(): void {
+    if (!this.multi()) {
+      return;
+    }
+    this.items.forEach((item) => item.open());
+  }
+
+  /** Recolhe todos os itens. */
+  closeAll(): void {
+    this.items.forEach((item) => item.close());
+  }
+
+  register(item: ICaoAccordionItemRef): void {
+    this.items.add(item);
+  }
+
+  unregister(item: ICaoAccordionItemRef): void {
+    this.items.delete(item);
+  }
+
+  /** Chamado pelos itens ao expandir: no modo único, recolhe os demais. */
+  notifyOpened(item: ICaoAccordionItemRef): void {
+    if (this.multi()) {
+      return;
+    }
+    this.items.forEach((other) => {
+      if (other !== item && other.expanded()) {
+        other.close();
+      }
+    });
+  }
+
+  /** Navegação por teclado entre cabeçalhos: ↑ ↓ Home End. */
+  @HostListener('keydown', ['$event'])
+  protected onKeydown(event: KeyboardEvent): void {
+    const root = this.host.nativeElement;
+    const target = event.target as HTMLElement | null;
+
+    if (!target?.classList.contains('cao-accordion-item__header') || target.closest('cao-accordion') !== root) {
+      return;
+    }
+
+    const headers = Array.from(root.querySelectorAll<HTMLElement>(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: number;
+
+    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();
+  }
+}

package/src/lib/shared/components/accordion/accordion.token.ts

@@ -0,0 +1,40 @@
+import { InjectionToken, Signal } from '@angular/core';
+
+/** Posição do ícone de expandir/recolher em relação ao texto do cabeçalho. */
+export type CaoAccordionTogglePosition = 'before' | 'after';
+
+/** Alinhamento horizontal de texto (cabeçalho ou conteúdo). */
+export type CaoAccordionAlign = 'start' | 'center' | 'end';
+
+/**
+ * Modo de exibição do accordion.
+ * - `default`: painéis unidos dentro de um único contorno arredondado.
+ * - `flat`: painéis unidos, sem bordas laterais nem cantos arredondados.
+ * - `separated`: cada painel é um cartão independente, separado por `gap`.
+ */
+export type CaoAccordionDisplayMode = 'default' | 'flat' | 'separated';
+
+/** Contrato mínimo que um item precisa expor para ser controlado pelo accordion. */
+export interface ICaoAccordionItemRef {
+  readonly expanded: Signal<boolean>;
+  readonly isDisabled: Signal<boolean>;
+  open(): void;
+  close(): void;
+}
+
+/**
+ * Contrato do accordion consumido pelos itens.
+ * Existe para evitar import circular entre `accordion` e `accordion-item`.
+ */
+export interface ICaoAccordionHost {
+  readonly multi: Signal<boolean>;
+  readonly hideToggle: Signal<boolean>;
+  readonly togglePosition: Signal<CaoAccordionTogglePosition>;
+  readonly headerAlign: Signal<CaoAccordionAlign>;
+  readonly displayMode: Signal<CaoAccordionDisplayMode>;
+  register(item: ICaoAccordionItemRef): void;
+  unregister(item: ICaoAccordionItemRef): void;
+  notifyOpened(item: ICaoAccordionItemRef): void;
+}
+
+export const CAO_ACCORDION = new InjectionToken<ICaoAccordionHost>('CAO_ACCORDION');

package/src/lib/shared/components/accordion-item/accordion-item.component.css

@@ -0,0 +1,137 @@
+: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;
+}
+
+/* Cartão independente (modo `separated` ou item usado fora de um accordion). */
+: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, 250ms) ease,
+    color var(--cao-accordion-duration, 250ms) 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, 0.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: 0.8125rem;
+  font-weight: 400;
+  opacity: 0.75;
+}
+
+.cao-accordion-item__icon {
+  flex: 0 0 auto;
+  color: var(--cao-accordion-icon-color, currentColor);
+  transition: transform var(--cao-accordion-duration, 250ms) 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);
+}
+
+/* Painel: anima a altura via grid (0fr -> 1fr), sem medir o conteúdo em JS. */
+.cao-accordion-item__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  visibility: hidden;
+  transition:
+    grid-template-rows var(--cao-accordion-duration, 250ms) ease,
+    visibility var(--cao-accordion-duration, 250ms);
+}
+
+: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;
+  }
+}

package/src/lib/shared/components/accordion-item/accordion-item.component.html

@@ -0,0 +1,52 @@
+<div class="cao-accordion-item">
+  <div class="cao-accordion-item__heading" role="heading" [attr.aria-level]="headingLevel()">
+    <button
+      type="button"
+      class="cao-accordion-item__header"
+      [class.cao-accordion-item__header--toggle-before]="togglePos() === 'before'"
+      [id]="headerId"
+      [disabled]="isDisabled()"
+      [attr.aria-expanded]="expanded()"
+      [attr.aria-controls]="panelId"
+      [attr.data-cy]="headerDataCy()"
+      (click)="toggle()">
+      <span class="cao-accordion-item__text">
+        <span class="cao-accordion-item__label">{{ label() }}</span>
+        @if (description()) {
+          <span class="cao-accordion-item__description">{{ description() }}</span>
+        }
+        <ng-content select="[caoAccordionHeader]" />
+      </span>
+
+      @if (!toggleHidden()) {
+        <svg
+          class="cao-accordion-item__icon"
+          viewBox="0 0 24 24"
+          width="20"
+          height="20"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          focusable="false">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      }
+    </button>
+  </div>
+
+  <div
+    class="cao-accordion-item__panel"
+    role="region"
+    [id]="panelId"
+    [attr.aria-labelledby]="headerId"
+    [attr.data-cy]="panelDataCy()">
+    <div class="cao-accordion-item__panel-inner">
+      <div class="cao-accordion-item__content">
+        <ng-content />
+      </div>
+    </div>
+  </div>
+</div>