ngx-opalbytes-components 1.27.0 → 1.29.0

package/src/lib/shared/components/breadcrumb/breadcrumb.html

@@ -0,0 +1,108 @@
+<ng-template #content let-item let-index="index">
+  @if (item.icon && iconPosition(item) === 'left') {
+    <ng-container *ngTemplateOutlet="icon; context: { $implicit: item }" />
+  }
+  @if (item.label) {
+    <span class="cao-breadcrumb__label">{{ item.label }}</span>
+  }
+  @if (item.icon && iconPosition(item) === 'right') {
+    <ng-container *ngTemplateOutlet="icon; context: { $implicit: item }" />
+  }
+  @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {
+    <span
+      class="cao-breadcrumb__badge"
+      [style.color]="item.badgeColor || null"
+      [style.background-color]="item.badgeBgColor || null"
+      [attr.data-cy]="item.dataCy ? item.dataCy + '-badge' : null">
+      {{ item.badge }}
+    </span>
+  }
+</ng-template>
+
+<ng-template #icon let-item>
+  <span class="cao-breadcrumb__icon" aria-hidden="true">
+    <cao-base-icon
+      [imgSource]="item.icon"
+      [isLucideIcon]="isLucide(item)"
+      [iconColor]="item.iconColor ?? ''"
+      [strokeWidthIcon]="item.iconStrokeWidth ?? 1.5"
+      [size]="item.iconSize ?? 16" />
+  </span>
+</ng-template>
+
+@if (allItems().length) {
+  <nav
+    class="cao-breadcrumb"
+    [attr.aria-label]="ariaLabel()"
+    [attr.data-cy]="dataCy() || null"
+    [style.--cao-breadcrumb-link-color]="linkColor() || null"
+    [style.--cao-breadcrumb-link-hover-color]="linkHoverColor() || null"
+    [style.--cao-breadcrumb-current-color]="currentColor() || null"
+    [style.--cao-breadcrumb-separator-color]="separatorColor() || null"
+    [style.--cao-breadcrumb-font-size]="fontSize() || null"
+    [style.--cao-breadcrumb-gap]="gap() || null">
+    <ol class="cao-breadcrumb__list">
+      @for (item of allItems(); track $index; let i = $index; let last = $last) {
+        <li
+          class="cao-breadcrumb__item"
+          [class.cao-breadcrumb__item--current]="last"
+          [class.cao-breadcrumb__item--disabled]="item.disabled"
+          [attr.data-cy]="item.dataCy || null">
+          @if (isInteractive(item, last)) {
+            @if (hasLink(item)) {
+              <a
+                class="cao-breadcrumb__action"
+                [routerLink]="item.link"
+                [queryParams]="item.queryParams"
+                [target]="item.target ?? '_self'"
+                [attr.aria-label]="item.ariaLabel || null"
+                (click)="onItemClick(item, i, $event)">
+                <ng-container *ngTemplateOutlet="content; context: { $implicit: item, index: i }" />
+              </a>
+            } @else if (item.href) {
+              <a
+                class="cao-breadcrumb__action"
+                [attr.href]="item.href"
+                [attr.target]="item.target || null"
+                [attr.rel]="item.target === '_blank' ? 'noopener noreferrer' : null"
+                [attr.aria-label]="item.ariaLabel || null"
+                (click)="onItemClick(item, i, $event)">
+                <ng-container *ngTemplateOutlet="content; context: { $implicit: item, index: i }" />
+              </a>
+            } @else {
+              <button
+                type="button"
+                class="cao-breadcrumb__action"
+                [attr.aria-label]="item.ariaLabel || null"
+                (click)="onItemClick(item, i, $event)">
+                <ng-container *ngTemplateOutlet="content; context: { $implicit: item, index: i }" />
+              </button>
+            }
+          } @else {
+            <span
+              class="cao-breadcrumb__text"
+              [attr.aria-current]="last ? 'page' : null"
+              [attr.aria-disabled]="item.disabled ? 'true' : null"
+              [attr.aria-label]="item.ariaLabel || null">
+              <ng-container *ngTemplateOutlet="content; context: { $implicit: item, index: i }" />
+            </span>
+          }
+        </li>
+
+        @if (!last) {
+          <li class="cao-breadcrumb__separator" role="presentation" aria-hidden="true">
+            @if (separatorIcon()) {
+              <cao-base-icon
+                [imgSource]="separatorIcon()"
+                [isLucideIcon]="isLucideSeparatorIcon()"
+                [strokeWidthIcon]="separatorIconStrokeWidth()"
+                [size]="separatorIconSize()" />
+            } @else {
+              {{ separator() }}
+            }
+          </li>
+        }
+      }
+    </ol>
+  </nav>
+}

package/src/lib/shared/components/breadcrumb/breadcrumb.model.ts

@@ -0,0 +1,54 @@
+import { Params } from '@angular/router';
+
+/** Posição do ícone em relação ao texto do item. */
+export type CaoBreadcrumbIconPosition = 'left' | 'right';
+
+/** Item do breadcrumb. */
+export interface ICaoBreadcrumbItem {
+  /** Texto exibido. Pode ser omitido em itens apenas com ícone (informe `ariaLabel`). */
+  label?: string;
+  /** Nome do ícone Lucide ou caminho/URL/data URI da imagem. */
+  icon?: string;
+  /** Define se `icon` é um ícone Lucide. Padrão: `true`. */
+  isLucideIcon?: boolean;
+  /** Posição do ícone em relação ao texto. Padrão: `'left'`. */
+  iconPosition?: CaoBreadcrumbIconPosition;
+  /** Cor do ícone (aplicada a ícones Lucide). */
+  iconColor?: string;
+  /** Tamanho do ícone em px. Padrão: `16`. */
+  iconSize?: number;
+  /** Espessura do traço do ícone Lucide. Padrão: `1.5`. */
+  iconStrokeWidth?: number;
+
+  /** Navegação interna via Angular Router (ex.: `'/clientes'` ou `['/clientes', 12]`). */
+  link?: string | unknown[];
+  /** Query params usados junto com `link`. */
+  queryParams?: Params;
+  /** Navegação externa via `href`. Ignorado se `link` estiver definido. */
+  href?: string;
+  /** `target` do link (ex.: `'_blank'`). */
+  target?: '_self' | '_blank' | '_parent' | '_top';
+  /** Callback executado ao clicar (item sem `link`/`href` vira um botão). */
+  command?: (event: ICaoBreadcrumbItemClickEvent) => void;
+
+  /** Texto/valor do badge exibido após o item. */
+  badge?: string | number;
+  /** Cor do texto do badge. */
+  badgeColor?: string;
+  /** Cor de fundo do badge. */
+  badgeBgColor?: string;
+
+  /** Desabilita a interação com o item. */
+  disabled?: boolean;
+  /** `aria-label` do item (recomendado para itens apenas com ícone). */
+  ariaLabel?: string;
+  /** Atributo `data-cy` para testes E2E. */
+  dataCy?: string;
+}
+
+/** Evento emitido ao clicar em um item. */
+export interface ICaoBreadcrumbItemClickEvent {
+  item: ICaoBreadcrumbItem;
+  index: number;
+  originalEvent: Event;
+}

package/src/lib/shared/components/breadcrumb/breadcrumb.spec.ts

@@ -0,0 +1,93 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+
+import { CaoBreadcrumbComponent } from './breadcrumb';
+import { ICaoBreadcrumbItem } from './breadcrumb.model';
+
+describe('CaoBreadcrumbComponent', () => {
+  let fixture: ComponentFixture<CaoBreadcrumbComponent>;
+  let el: HTMLElement;
+
+  const items: ICaoBreadcrumbItem[] = [
+    { label: 'Início', link: '/' },
+    { label: 'Clientes', href: 'https://example.com' },
+    { label: 'Detalhe', badge: 3 },
+  ];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CaoBreadcrumbComponent],
+      providers: [provideRouter([])],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CaoBreadcrumbComponent);
+    el = fixture.nativeElement;
+    fixture.componentRef.setInput('items', items);
+    fixture.detectChanges();
+  });
+
+  it('renderiza um item por entrada', () => {
+    expect(el.querySelectorAll('.cao-breadcrumb__item').length).toBe(3);
+  });
+
+  it('usa "/" como divisor padrão (n - 1 divisores)', () => {
+    const seps = el.querySelectorAll('.cao-breadcrumb__separator');
+    expect(seps.length).toBe(2);
+    expect(seps[0].textContent?.trim()).toBe('/');
+  });
+
+  it('aceita divisor de texto customizado', () => {
+    fixture.componentRef.setInput('separator', '>');
+    fixture.detectChanges();
+    expect(el.querySelector('.cao-breadcrumb__separator')?.textContent?.trim()).toBe('>');
+  });
+
+  it('marca o último item como página atual e sem link', () => {
+    const current = el.querySelector('.cao-breadcrumb__item--current .cao-breadcrumb__text');
+    expect(current?.getAttribute('aria-current')).toBe('page');
+    expect(el.querySelector('.cao-breadcrumb__item--current a')).toBeNull();
+  });
+
+  it('renderiza badge', () => {
+    expect(el.querySelector('.cao-breadcrumb__badge')?.textContent?.trim()).toBe('3');
+  });
+
+  it('inclui o item home como primeiro', () => {
+    fixture.componentRef.setInput('home', { label: 'Home', link: '/' });
+    fixture.detectChanges();
+    const first = el.querySelector('.cao-breadcrumb__item');
+    expect(first?.textContent).toContain('Home');
+    expect(el.querySelectorAll('.cao-breadcrumb__item').length).toBe(4);
+  });
+
+  it('emite itemClick e executa command', () => {
+    let commandCalled = false;
+    const emitted: unknown[] = [];
+    fixture.componentRef.setInput('items', [
+      { label: 'Ação', command: () => (commandCalled = true) },
+      { label: 'Atual' },
+    ]);
+    fixture.componentInstance.itemClick.subscribe((e) => emitted.push(e));
+    fixture.detectChanges();
+
+    el.querySelector<HTMLButtonElement>('button.cao-breadcrumb__action')?.click();
+
+    expect(commandCalled).toBe(true);
+    expect(emitted.length).toBe(1);
+  });
+
+  it('não torna interativo um item desabilitado', () => {
+    fixture.componentRef.setInput('items', [
+      { label: 'Bloqueado', link: '/x', disabled: true },
+      { label: 'Atual' },
+    ]);
+    fixture.detectChanges();
+    expect(el.querySelector('a, button')).toBeNull();
+  });
+
+  it('não renderiza nada sem itens', () => {
+    fixture.componentRef.setInput('items', []);
+    fixture.detectChanges();
+    expect(el.querySelector('nav')).toBeNull();
+  });
+});

package/src/lib/shared/components/breadcrumb/breadcrumb.stories.ts

@@ -0,0 +1,122 @@
+import { provideRouter } from '@angular/router';
+
+import { provideLucideIcons, LucideBuilding2, LucideChevronRight, LucideFolder, LucideHouse, LucideUser } from '@lucide/angular';
+import { applicationConfig, argsToTemplate, Meta, StoryObj } from '@storybook/angular-vite';
+
+import { CaoBreadcrumbComponent } from './breadcrumb';
+import { ICaoBreadcrumbItem } from './breadcrumb.model';
+
+/* eslint-disable @typescript-eslint/naming-convention */
+const STORY_ICONS = { LucideBuilding2, LucideChevronRight, LucideFolder, LucideHouse, LucideUser };
+/* eslint-enable @typescript-eslint/naming-convention */
+
+const IMG_ICON =
+    `data:image/svg+xml;utf8,${encodeURIComponent(
+        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#4f46e5"/><path d="M8 12l3 3 5-6" stroke="#fff" stroke-width="2" fill="none"/></svg>',
+    )}`;
+
+const basicItems: ICaoBreadcrumbItem[] = [
+    { label: 'Início', link: '/' },
+    { label: 'Clientes', link: '/clientes' },
+    { label: 'Maria Souza' },
+];
+
+const meta: Meta<CaoBreadcrumbComponent> = {
+    title: 'Componentes/Breadcrumb',
+    component: CaoBreadcrumbComponent,
+    tags: ['autodocs'],
+    decorators: [
+        applicationConfig({
+            providers: [
+                provideRouter([]),
+                provideLucideIcons(STORY_ICONS as never),
+            ],
+        }),
+    ],
+    render: (args) => ({ props: args, template: `<cao-breadcrumb ${argsToTemplate(args)} />` }),
+    argTypes: {
+        items: { control: 'object', description: 'Lista de itens (o último é a página atual).' },
+        home: { control: 'object', description: 'Item home opcional, exibido antes dos itens.' },
+        separator: { control: 'text', description: 'Texto do divisor. Padrão: "/".' },
+        separatorIcon: { control: 'text', description: 'Ícone do divisor (Lucide ou imagem). Sobrepõe `separator`.' },
+        isLucideSeparatorIcon: { control: 'boolean' },
+        separatorIconSize: { control: 'number' },
+        linkColor: { control: 'color' },
+        linkHoverColor: { control: 'color' },
+        currentColor: { control: 'color' },
+        separatorColor: { control: 'color' },
+        fontSize: { control: 'text' },
+        gap: { control: 'text' },
+        ariaLabel: { control: 'text' },
+        itemClick: { action: 'itemClick' },
+    },
+    args: { items: basicItems, separator: '/', ariaLabel: 'Breadcrumb' },
+};
+export default meta;
+
+type Story = StoryObj<CaoBreadcrumbComponent>;
+
+export const Default: Story = {};
+
+export const WithHome: Story = {
+    args: { home: { icon: 'house', ariaLabel: 'Início', link: '/' }, items: basicItems.slice(1) },
+};
+
+export const IconsLeftAndRight: Story = {
+    args: {
+        items: [
+            { label: 'Empresa', icon: 'building-2', iconPosition: 'left', link: '/empresa' },
+            { label: 'Projetos', icon: 'folder', iconPosition: 'right', link: '/projetos' },
+            { label: 'Perfil', icon: 'user', iconPosition: 'left' },
+        ],
+    },
+};
+
+export const ImageIcon: Story = {
+    args: {
+        items: [
+            { label: 'Início', icon: IMG_ICON, isLucideIcon: false, link: '/' },
+            { label: 'Relatórios', icon: IMG_ICON, isLucideIcon: false, iconPosition: 'right', link: '/relatorios' },
+            { label: 'Mensal' },
+        ],
+    },
+};
+
+export const WithBadges: Story = {
+    args: {
+        items: [
+            { label: 'Início', link: '/' },
+            { label: 'Pedidos', link: '/pedidos', badge: 12 },
+            { label: 'Pendentes', badge: 'novo', badgeBgColor: '#dcfce7', badgeColor: '#166534' },
+        ],
+    },
+};
+
+export const CustomTextSeparator: Story = { args: { separator: '>' } };
+
+export const IconSeparator: Story = {
+    args: { separatorIcon: 'chevron-right', isLucideSeparatorIcon: true, separatorColor: '#6b7280' },
+};
+
+export const ExternalLinkAndCommand: Story = {
+    args: {
+        items: [
+            { label: 'Docs', href: 'https://angular.dev', target: '_blank' },
+            { label: 'Ação customizada', command: () => console.warn('command executado') },
+            { label: 'Desabilitado', link: '/x', disabled: true },
+            { label: 'Atual' },
+        ],
+    },
+};
+
+export const Themed: Story = {
+    args: {
+        linkColor: '#0f766e',
+        linkHoverColor: '#134e4a',
+        currentColor: '#042f2e',
+        separatorColor: '#5eead4',
+        fontSize: '1rem',
+        gap: '12px',
+        separatorIcon: 'chevron-right',
+    },
+};

package/src/lib/shared/components/breadcrumb/breadcrumb.ts

@@ -0,0 +1,72 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+import { ICaoBreadcrumbItem, ICaoBreadcrumbItemClickEvent } from './breadcrumb.model';
+import { CaoBaseIcon } from '../base-icon/base-icon';
+
+@Component({
+  selector: 'cao-breadcrumb',
+  imports: [NgTemplateOutlet, RouterLink, CaoBaseIcon],
+  templateUrl: './breadcrumb.html',
+  styleUrl: './breadcrumb.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CaoBreadcrumbComponent {
+  /** Itens do breadcrumb. O último item é tratado como página atual. */
+  readonly items = input<ICaoBreadcrumbItem[]>([]);
+  /** Item "home" opcional, sempre exibido como primeiro item. */
+  readonly home = input<ICaoBreadcrumbItem | undefined>(undefined);
+
+  /** Texto do divisor. Padrão: `'/'`. Ignorado se `separatorIcon` for informado. */
+  readonly separator = input<string>('/');
+  /** Ícone do divisor (nome Lucide ou imagem). Tem prioridade sobre `separator`. */
+  readonly separatorIcon = input<string>('');
+  readonly isLucideSeparatorIcon = input<boolean>(true);
+  readonly separatorIconSize = input<number>(14);
+  readonly separatorIconStrokeWidth = input<number>(1.5);
+
+  readonly linkColor = input<string>('');
+  readonly linkHoverColor = input<string>('');
+  readonly currentColor = input<string>('');
+  readonly separatorColor = input<string>('');
+  readonly fontSize = input<string>('');
+  readonly gap = input<string>('');
+
+  readonly ariaLabel = input<string>('Breadcrumb');
+  readonly dataCy = input<string>('');
+
+  /** Emitido ao clicar em qualquer item interativo. */
+  readonly itemClick = output<ICaoBreadcrumbItemClickEvent>();
+
+  protected readonly allItems = computed<ICaoBreadcrumbItem[]>(() => {
+    const home = this.home();
+    return home ? [home, ...this.items()] : this.items();
+  });
+
+  protected isInteractive(item: ICaoBreadcrumbItem, isLast: boolean): boolean {
+    return !isLast && !item.disabled && (this.hasLink(item) || !!item.href || !!item.command);
+  }
+
+  protected hasLink(item: ICaoBreadcrumbItem): boolean {
+    return item.link !== undefined && item.link !== null;
+  }
+
+  protected onItemClick(item: ICaoBreadcrumbItem, index: number, event: Event): void {
+    if (item.disabled) {
+      event.preventDefault();
+      return;
+    }
+    const payload: ICaoBreadcrumbItemClickEvent = { item, index, originalEvent: event };
+    item.command?.(payload);
+    this.itemClick.emit(payload);
+  }
+
+  protected iconPosition(item: ICaoBreadcrumbItem): 'left' | 'right' {
+    return item.iconPosition ?? 'left';
+  }
+
+  protected isLucide(item: ICaoBreadcrumbItem): boolean {
+    return item.isLucideIcon ?? true;
+  }
+}

package/src/lib/shared/components/breadcrumb/index.ts

@@ -0,0 +1,2 @@
+export * from "./breadcrumb"
+export * from "./breadcrumb.model"

package/src/lib/shared/components/index.ts

@@ -1,3 +1,6 @@
+export * from './accordion/accordion.component'
+export * from './accordion/accordion.token'
+export * from './accordion-item/accordion-item.component'
 export * from './base-button/base-button.component'
 export * from './base-input/base-input'
 export * from './base-time-range/base-time-range'
@@ -31,4 +34,5 @@ export * from "./slide-toggle/slide-toggle.component"
 export * from "./radio/radio-group.component"
 export * from "./radio/radio-button.component"
 export * from "./checkbox/checkbox.component"
-export * from "./footer/footer"
+export * from "./footer/footer"
+export * from "./breadcrumb/breadcrumb"