ngx-opalbytes-components 1.29.0 → 1.30.0

package/package.json

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

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

@@ -35,4 +35,7 @@ export * from "./radio/radio-group.component"
 export * from "./radio/radio-button.component"
 export * from "./checkbox/checkbox.component"
 export * from "./footer/footer"
-export * from "./breadcrumb/breadcrumb"
+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();
+  });
+});

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

@@ -0,0 +1,312 @@
+import { ConnectedOverlayPositionChange, Overlay, OverlayRef, ConnectedPosition } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  ElementRef,
+  TemplateRef,
+  ViewContainerRef,
+  booleanAttribute,
+  inject,
+  input,
+  numberAttribute,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+
+import { Subscription } from 'rxjs';
+
+import { CaoPopoverAlign, CaoPopoverPosition, CaoPopoverTarget, ICaoPopoverShowOptions } from './popover.model';
+
+export const CAO_POPOVER_POSITION_PREFIX = 'cao-popover-pos-';
+
+const OPPOSITE: Record<CaoPopoverPosition, CaoPopoverPosition> = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left',
+};
+
+const PERPENDICULAR: Record<CaoPopoverPosition, CaoPopoverPosition[]> = {
+  top: ['right', 'left'],
+  bottom: ['right', 'left'],
+  left: ['bottom', 'top'],
+  right: ['bottom', 'top'],
+};
+
+function toConnectedPosition(position: CaoPopoverPosition, align: CaoPopoverAlign, offset: number): ConnectedPosition {
+  const panelClass = `${CAO_POPOVER_POSITION_PREFIX}${position}`;
+
+  if (position === 'top' || position === 'bottom') {
+    return {
+      originX: align,
+      originY: position === 'bottom' ? 'bottom' : 'top',
+      overlayX: align,
+      overlayY: position === 'bottom' ? 'top' : 'bottom',
+      offsetY: position === 'bottom' ? offset : -offset,
+      panelClass,
+    };
+  }
+
+  const vertical = align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center';
+  return {
+    originX: position === 'right' ? 'end' : 'start',
+    originY: vertical,
+    overlayX: position === 'right' ? 'start' : 'end',
+    overlayY: vertical,
+    offsetX: position === 'right' ? offset : -offset,
+    panelClass,
+  };
+}
+
+/** Posição preferida seguida das alternativas (oposta e perpendiculares) usadas quando não há espaço. */
+export function buildPopoverPositions(
+  position: CaoPopoverPosition,
+  align: CaoPopoverAlign,
+  offset: number,
+): ConnectedPosition[] {
+  const order = [position, OPPOSITE[position], ...PERPENDICULAR[position]];
+  return order.map((item) => toConnectedPosition(item, align, offset));
+}
+
+const FOCUSABLE_SELECTOR =
+  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+let nextId = 0;
+
+@Component({
+  selector: 'cao-popover',
+  templateUrl: './popover.html',
+  imports: [CommonModule],
+  styleUrl: './popover.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  exportAs: 'caoPopover',
+})
+export class CaoPopoverComponent {
+  private readonly overlay = inject(Overlay);
+  private readonly viewContainerRef = inject(ViewContainerRef);
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly panelTemplate = viewChild.required<TemplateRef<unknown>>('panelTemplate');
+
+  private overlayRef: OverlayRef | null = null;
+  private origin: HTMLElement | null = null;
+  private subscriptions = new Subscription();
+  private focusMoved = false;
+  private readonly openState = signal(false);
+
+  protected readonly panelId = `cao-popover-${nextId++}`;
+  protected readonly placement = signal<CaoPopoverPosition>('bottom');
+
+  /** Lado do elemento de origem em que o popover aparece. Se não houver espaço, o CDK escolhe outro lado. */
+  readonly position = input<CaoPopoverPosition>('bottom');
+  /** Alinhamento em relação ao elemento de origem. */
+  readonly align = input<CaoPopoverAlign>('center');
+  /** Distância (px) entre a origem e o popover. */
+  readonly offset = input(10, { transform: numberAttribute });
+  /** Exibe a seta apontando para a origem. */
+  readonly showArrow = input(true, { transform: booleanAttribute });
+  /** Fecha ao clicar fora do popover. */
+  readonly dismissable = input(true, { transform: booleanAttribute });
+  /** Fecha ao pressionar `Esc`. */
+  readonly closeOnEscape = input(true, { transform: booleanAttribute });
+  /** Exibe o botão de fechar no canto superior direito. */
+  readonly showCloseIcon = input(false, { transform: booleanAttribute });
+  /** Move o foco para o primeiro elemento focável do popover ao abrir (e devolve à origem ao fechar). */
+  readonly focusOnShow = input(true, { transform: booleanAttribute });
+
+  /** Largura fixa do popover (ex.: `'320px'`). */
+  readonly width = input<string>('');
+  /** Largura máxima. */
+  readonly maxWidth = input<string>('360px');
+  readonly bgColor = input<string>('');
+  readonly textColor = input<string>('');
+  readonly borderColor = input<string>('');
+  readonly borderRadius = input<string>('');
+  readonly padding = input<string>('');
+  /** Classe(s) CSS adicionais aplicadas ao painel do popover. */
+  readonly styleClass = input<string>('');
+  /** Classe(s) CSS adicionais aplicadas ao painel do overlay (CDK). */
+  readonly panelClass = input<string | string[]>('');
+
+  readonly role = input<string>('dialog');
+  readonly ariaLabel = input<string>('');
+  readonly ariaLabelledBy = input<string>('');
+  readonly closeAriaLabel = input<string>('Fechar');
+  readonly dataCy = input<string>('');
+
+  /** Emitido após o popover ser aberto. */
+  readonly shown = output<void>();
+  /** Emitido após o popover ser fechado. */
+  readonly hidden = output<void>();
+  /** Emitido quando o ponteiro entra/sai do painel (usado pelo gatilho `hover`). */
+  readonly panelHoverChange = output<boolean>();
+
+  /** `true` enquanto o popover está aberto. */
+  readonly isOpen = this.openState.asReadonly();
+
+  constructor() {
+    this.destroyRef.onDestroy(() => this.dispose());
+  }
+
+  /** Abre o popover se estiver fechado (ou aberto em outra origem); fecha se já estiver aberto na mesma origem. */
+  toggle(event?: Event | null, target?: CaoPopoverTarget, options: ICaoPopoverShowOptions = {}): void {
+    const origin = this.resolveOrigin(event, target);
+    if (!origin) {
+      return;
+    }
+    if (this.openState() && this.origin === origin) {
+      this.hide();
+      return;
+    }
+    this.show(event, origin, options);
+  }
+
+  /** Abre o popover ancorado em `target` (ou em `event.currentTarget`). */
+  show(event?: Event | null, target?: CaoPopoverTarget, options: ICaoPopoverShowOptions = {}): void {
+    const origin = this.resolveOrigin(event, target);
+    if (!origin) {
+      return;
+    }
+    if (this.openState()) {
+      if (this.origin === origin) {
+        return;
+      }
+      this.close(false);
+    }
+
+    this.origin = origin;
+    this.placement.set(this.position());
+
+    const positionStrategy = this.overlay
+      .position()
+      .flexibleConnectedTo(origin)
+      .withPositions(buildPopoverPositions(this.position(), this.align(), this.offset()))
+      .withFlexibleDimensions(false)
+      .withPush(false)
+      .withViewportMargin(8);
+
+    const overlayRef = this.overlay.create({
+      positionStrategy,
+      scrollStrategy: this.overlay.scrollStrategies.reposition(),
+      panelClass: this.panelClass(),
+    });
+    this.overlayRef = overlayRef;
+
+    this.subscriptions.add(positionStrategy.positionChanges.subscribe((change) => this.onPositionChange(change)));
+    this.subscriptions.add(
+      overlayRef.outsidePointerEvents().subscribe((event) => {
+        if (this.dismissable() && !this.origin?.contains(event.target as Node)) {
+          this.close(false);
+        }
+      }),
+    );
+    this.subscriptions.add(
+      overlayRef.keydownEvents().subscribe((event) => {
+        if (event.key === 'Escape' && this.closeOnEscape()) {
+          event.preventDefault();
+          this.close(true);
+        }
+      }),
+    );
+
+    overlayRef.attach(new TemplatePortal(this.panelTemplate(), this.viewContainerRef));
+    this.openState.set(true);
+    this.setOriginAria(origin, true);
+
+    if (options.focus ?? this.focusOnShow()) {
+      this.focusPanel(overlayRef.overlayElement);
+    }
+    this.shown.emit();
+  }
+
+  /** Fecha o popover. */
+  hide(): void {
+    this.close(true);
+  }
+
+  /** Recalcula a posição (útil se a origem mudou de lugar ou o conteúdo mudou de tamanho). */
+  reposition(): void {
+    this.overlayRef?.updatePosition();
+  }
+
+  /** Indica se o nó está dentro do painel do popover aberto. */
+  containsNode(node: Node | null | undefined): boolean {
+    return !!node && !!this.overlayRef?.overlayElement.contains(node);
+  }
+
+  protected onCloseClick(): void {
+    this.close(true);
+  }
+
+  private close(restoreFocus: boolean): void {
+    const overlayRef = this.overlayRef;
+    if (!overlayRef) {
+      return;
+    }
+    const origin = this.origin;
+    const shouldRestoreFocus = restoreFocus && this.focusMoved;
+
+    this.overlayRef = null;
+    this.origin = null;
+    this.focusMoved = false;
+    this.subscriptions.unsubscribe();
+    this.subscriptions = new Subscription();
+    overlayRef.dispose();
+
+    this.openState.set(false);
+    this.setOriginAria(origin, false);
+    if (shouldRestoreFocus) {
+      origin?.focus({ preventScroll: true });
+    }
+    this.hidden.emit();
+  }
+
+  private dispose(): void {
+    this.subscriptions.unsubscribe();
+    this.overlayRef?.dispose();
+    this.overlayRef = null;
+    this.origin = null;
+  }
+
+  private onPositionChange(change: ConnectedOverlayPositionChange): void {
+    const panelClass = change.connectionPair.panelClass;
+    const value = Array.isArray(panelClass) ? panelClass[0] : panelClass;
+    if (typeof value === 'string' && value.startsWith(CAO_POPOVER_POSITION_PREFIX)) {
+      this.placement.set(value.slice(CAO_POPOVER_POSITION_PREFIX.length) as CaoPopoverPosition);
+    }
+  }
+
+  private resolveOrigin(event?: Event | null, target?: CaoPopoverTarget): HTMLElement | null {
+    if (target) {
+      return target instanceof ElementRef ? target.nativeElement : target;
+    }
+    return (event?.currentTarget ?? event?.target ?? null) as HTMLElement | null;
+  }
+
+  private focusPanel(overlayElement: HTMLElement): void {
+    const panel = overlayElement.querySelector<HTMLElement>('.cao-popover');
+    const target = panel?.querySelector<HTMLElement>(`.cao-popover__content ${FOCUSABLE_SELECTOR}`) ?? panel;
+    if (target) {
+      target.focus({ preventScroll: true });
+      this.focusMoved = true;
+    }
+  }
+
+  private setOriginAria(origin: HTMLElement | null, open: boolean): void {
+    if (!origin) {
+      return;
+    }
+    origin.setAttribute('aria-expanded', String(open));
+    if (open) {
+      if (this.role() === 'dialog') {
+        origin.setAttribute('aria-haspopup', 'dialog');
+      }
+      origin.setAttribute('aria-controls', this.panelId);
+    } else {
+      origin.removeAttribute('aria-controls');
+    }
+  }
+}

package/src/lib/shared/components/progress-bar/index.ts

@@ -0,0 +1,2 @@
+export * from './progress-bar';
+export * from './progress-bar.model';