ngx-opalbytes-components 1.28.0 → 1.30.0

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

@@ -34,4 +34,8 @@ 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"
+export * from "./progress-bar/progress-bar"
+export * from "./progress-spinner/progress-spinner"
+export * from "./popover/popover"

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

@@ -0,0 +1,3 @@
+export * from "./popover"
+export * from "./popover.model"
+export * from "./popover"

package/src/lib/shared/components/popover/popover.css

@@ -0,0 +1,149 @@
+:host {
+  display: contents;
+}
+
+.cao-popover {
+  --_bg: var(--cao-popover-bg, #ffffff);
+  --_text: var(--cao-popover-text, #111827);
+  --_border: var(--cao-popover-border-color, #e5e7eb);
+  --_radius: var(--cao-popover-radius, 8px);
+  --_padding: var(--cao-popover-padding, 12px 16px);
+  --_shadow: var(--cao-popover-shadow, 0 10px 25px -5px rgba(17, 24, 39, 0.15), 0 4px 10px -6px rgba(17, 24, 39, 0.12));
+  --_focus: var(--cao-popover-focus-ring, rgba(79, 70, 229, 0.35));
+  --_arrow-size: 10px;
+  --_arrow-offset: 16px;
+
+  position: relative;
+  box-sizing: border-box;
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius);
+  background-color: var(--_bg);
+  box-shadow: var(--_shadow);
+  color: var(--_text);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  outline: none;
+  animation: cao-popover-in 150ms ease-out;
+}
+
+.cao-popover:focus-visible {
+  box-shadow: var(--_shadow), 0 0 0 3px var(--_focus);
+}
+
+.cao-popover__content {
+  padding: var(--_padding);
+  overflow-wrap: anywhere;
+}
+
+.cao-popover__content--with-close {
+  padding-right: 40px;
+}
+
+.cao-popover__close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: #6b7280;
+  cursor: pointer;
+}
+
+.cao-popover__close:hover {
+  background-color: #f3f4f6;
+  color: #111827;
+}
+
+.cao-popover__close:focus-visible {
+  outline: 2px solid var(--_focus);
+  outline-offset: 1px;
+}
+
+/* Seta */
+.cao-popover__arrow {
+  position: absolute;
+  width: var(--_arrow-size);
+  height: var(--_arrow-size);
+  background-color: var(--_bg);
+  transform: rotate(45deg);
+}
+
+.cao-popover--bottom .cao-popover__arrow {
+  top: calc(var(--_arrow-size) / -2 - 1px);
+  border-top: 1px solid var(--_border);
+  border-left: 1px solid var(--_border);
+}
+
+.cao-popover--top .cao-popover__arrow {
+  bottom: calc(var(--_arrow-size) / -2 - 1px);
+  border-right: 1px solid var(--_border);
+  border-bottom: 1px solid var(--_border);
+}
+
+.cao-popover--right .cao-popover__arrow {
+  left: calc(var(--_arrow-size) / -2 - 1px);
+  border-bottom: 1px solid var(--_border);
+  border-left: 1px solid var(--_border);
+}
+
+.cao-popover--left .cao-popover__arrow {
+  right: calc(var(--_arrow-size) / -2 - 1px);
+  border-top: 1px solid var(--_border);
+  border-right: 1px solid var(--_border);
+}
+
+/* Posição da seta ao longo da borda (topo/base) */
+.cao-popover--top.cao-popover--align-center .cao-popover__arrow,
+.cao-popover--bottom.cao-popover--align-center .cao-popover__arrow {
+  left: calc(50% - var(--_arrow-size) / 2);
+}
+
+.cao-popover--top.cao-popover--align-start .cao-popover__arrow,
+.cao-popover--bottom.cao-popover--align-start .cao-popover__arrow {
+  left: var(--_arrow-offset);
+}
+
+.cao-popover--top.cao-popover--align-end .cao-popover__arrow,
+.cao-popover--bottom.cao-popover--align-end .cao-popover__arrow {
+  right: var(--_arrow-offset);
+}
+
+/* Posição da seta ao longo da borda (esquerda/direita) */
+.cao-popover--left.cao-popover--align-center .cao-popover__arrow,
+.cao-popover--right.cao-popover--align-center .cao-popover__arrow {
+  top: calc(50% - var(--_arrow-size) / 2);
+}
+
+.cao-popover--left.cao-popover--align-start .cao-popover__arrow,
+.cao-popover--right.cao-popover--align-start .cao-popover__arrow {
+  top: var(--_arrow-offset);
+}
+
+.cao-popover--left.cao-popover--align-end .cao-popover__arrow,
+.cao-popover--right.cao-popover--align-end .cao-popover__arrow {
+  bottom: var(--_arrow-offset);
+}
+
+@keyframes cao-popover-in {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cao-popover {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,44 @@
+<ng-template #panelTemplate>
+  <div
+    [ngClass]="'cao-popover'"
+    tabindex="-1"
+    [id]="panelId"
+    [class]="styleClass()"
+    [class.cao-popover--top]="placement() === 'top'"
+    [class.cao-popover--bottom]="placement() === 'bottom'"
+    [class.cao-popover--left]="placement() === 'left'"
+    [class.cao-popover--right]="placement() === 'right'"
+    [class.cao-popover--align-start]="align() === 'start'"
+    [class.cao-popover--align-center]="align() === 'center'"
+    [class.cao-popover--align-end]="align() === 'end'"
+    [class.cao-popover--no-arrow]="!showArrow()"
+    [attr.role]="role() || null"
+    [attr.aria-label]="ariaLabel() || null"
+    [attr.aria-labelledby]="ariaLabelledBy() || null"
+    [attr.data-cy]="dataCy() || null"
+    [style.width]="width() || null"
+    [style.max-width]="maxWidth() || null"
+    [style.--cao-popover-bg]="bgColor() || null"
+    [style.--cao-popover-text]="textColor() || null"
+    [style.--cao-popover-border-color]="borderColor() || null"
+    [style.--cao-popover-radius]="borderRadius() || null"
+    [style.--cao-popover-padding]="padding() || null"
+    (mouseenter)="panelHoverChange.emit(true)"
+    (mouseleave)="panelHoverChange.emit(false)">
+    @if (showArrow()) {
+      <span class="cao-popover__arrow" aria-hidden="true"></span>
+    }
+
+    <div class="cao-popover__content" [class.cao-popover__content--with-close]="showCloseIcon()">
+      <ng-content />
+    </div>
+
+    @if (showCloseIcon()) {
+      <button type="button" class="cao-popover__close" [attr.aria-label]="closeAriaLabel()" (click)="onCloseClick()">
+        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false">
+          <path d="M6 6l12 12M18 6L6 18" />
+        </svg>
+      </button>
+    }
+  </div>
+</ng-template>

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

@@ -0,0 +1,19 @@
+import { ElementRef } from '@angular/core';
+
+/** Lado do elemento de origem em que o popover é exibido. */
+export type CaoPopoverPosition = 'top' | 'bottom' | 'left' | 'right';
+
+/** Alinhamento do popover em relação ao elemento de origem. */
+export type CaoPopoverAlign = 'start' | 'center' | 'end';
+
+/** Evento que aciona o popover quando usado com `CaoPopoverTriggerDirective`. */
+export type CaoPopoverTrigger = 'click' | 'hover' | 'focus';
+
+/** Elemento de origem (âncora) do popover. */
+export type CaoPopoverTarget = HTMLElement | ElementRef<HTMLElement> | null | undefined;
+
+export interface ICaoPopoverShowOptions {
+  /** Move o foco para dentro do popover ao abrir. Padrão: valor de `focusOnShow`. */
+  focus?: boolean;
+}
+

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

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CaoPopoverComponent } from './popover';
+
+describe('CaoPopover', () => {
+  let component: CaoPopoverComponent;
+  let fixture: ComponentFixture<CaoPopoverComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CaoPopoverComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CaoPopoverComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});