ngx-opalbytes-components 1.28.0 → 1.30.0

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';

package/src/lib/shared/components/progress-bar/progress-bar.css

@@ -0,0 +1,141 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.cao-progress-bar {
+  --_color: var(--cao-progress-bar-color, #4f46e5);
+  --_track: var(--cao-progress-bar-track-color, #e5e7eb);
+  --_buffer: var(--cao-progress-bar-buffer-color, color-mix(in srgb, var(--_color) 35%, transparent));
+  --_duration: var(--cao-progress-bar-duration, 2s);
+  --_text: var(--cao-progress-bar-text-color, #374151);
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.cao-progress-bar__track {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  border-radius: var(--cao-progress-bar-radius, 999px);
+  background-color: var(--_track);
+}
+
+.cao-progress-bar__fill,
+.cao-progress-bar__buffer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: inherit;
+  transition: width 250ms ease;
+}
+
+.cao-progress-bar__fill {
+  z-index: 1;
+  background-color: var(--_color);
+}
+
+.cao-progress-bar__buffer {
+  background-color: var(--_buffer);
+}
+
+.cao-progress-bar__dots {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-image: radial-gradient(circle closest-side, var(--_buffer) 0 70%, transparent 75%);
+  background-size: 8px 100%;
+  animation: cao-progress-bar-dots 600ms linear infinite;
+}
+
+.cao-progress-bar__inner {
+  position: absolute;
+  inset: 0;
+}
+
+.cao-progress-bar__inner--query {
+  transform: scaleX(-1);
+}
+
+.cao-progress-bar__bar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: var(--_color);
+  transform-origin: left center;
+  will-change: transform;
+}
+
+.cao-progress-bar__bar--primary {
+  animation: cao-progress-bar-primary var(--_duration) cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+
+.cao-progress-bar__bar--secondary {
+  animation: cao-progress-bar-secondary var(--_duration) cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+
+.cao-progress-bar__value {
+  flex: 0 0 auto;
+  min-width: 2.75em;
+  color: var(--_text);
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  text-align: right;
+}
+
+@keyframes cao-progress-bar-primary {
+  0% {
+    transform: translateX(-100%) scaleX(0.2);
+  }
+  40% {
+    transform: translateX(10%) scaleX(0.6);
+  }
+  100% {
+    transform: translateX(100%) scaleX(0.2);
+  }
+}
+
+@keyframes cao-progress-bar-secondary {
+  0% {
+    transform: translateX(-100%) scaleX(0.1);
+  }
+  50% {
+    transform: translateX(-100%) scaleX(0.1);
+  }
+  80% {
+    transform: translateX(40%) scaleX(0.4);
+  }
+  100% {
+    transform: translateX(100%) scaleX(0.1);
+  }
+}
+
+@keyframes cao-progress-bar-dots {
+  to {
+    background-position-x: -8px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cao-progress-bar__fill,
+  .cao-progress-bar__buffer {
+    transition: none;
+  }
+
+  .cao-progress-bar__bar--primary,
+  .cao-progress-bar__bar--secondary {
+    animation-duration: calc(var(--_duration) * 3);
+  }
+
+  .cao-progress-bar__dots {
+    animation: none;
+  }
+}

package/src/lib/shared/components/progress-bar/progress-bar.html

@@ -0,0 +1,39 @@
+<div
+  class="cao-progress-bar"
+  [style.--cao-progress-bar-color]="color() || null"
+  [style.--cao-progress-bar-track-color]="trackColor() || null"
+  [style.--cao-progress-bar-buffer-color]="bufferColor() || null"
+  [style.--cao-progress-bar-duration]="animationDuration() || null">
+  <div
+    class="cao-progress-bar__track"
+    role="progressbar"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    [attr.aria-valuenow]="ariaValueNow()"
+    [attr.aria-label]="ariaLabel() || null"
+    [attr.aria-labelledby]="ariaLabelledBy() || null"
+    [attr.data-cy]="dataCy() || null"
+    [style.height]="height()"
+    [style.border-radius]="borderRadius() || null">
+    @switch (mode()) {
+      @case ('determinate') {
+        <div class="cao-progress-bar__fill" [style.width.%]="clampedValue()"></div>
+      }
+      @case ('buffer') {
+        <div class="cao-progress-bar__dots" [style.left.%]="clampedBuffer()"></div>
+        <div class="cao-progress-bar__buffer" [style.width.%]="clampedBuffer()"></div>
+        <div class="cao-progress-bar__fill" [style.width.%]="clampedValue()"></div>
+      }
+      @default {
+        <div class="cao-progress-bar__inner" [class.cao-progress-bar__inner--query]="mode() === 'query'">
+          <div class="cao-progress-bar__bar cao-progress-bar__bar--primary"></div>
+          <div class="cao-progress-bar__bar cao-progress-bar__bar--secondary"></div>
+        </div>
+      }
+    }
+  </div>
+
+  @if (showValue() && hasValue()) {
+    <span class="cao-progress-bar__value" aria-hidden="true">{{ valueLabel() }}</span>
+  }
+</div>

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

@@ -0,0 +1,8 @@
+/**
+ * Modo da barra de progresso (mesmos modos do Angular Material).
+ * - `determinate`: progresso conhecido, controlado por `value`.
+ * - `indeterminate`: progresso desconhecido, animação contínua.
+ * - `buffer`: `value` + `bufferValue` (ex.: carregamento de mídia).
+ * - `query`: indeterminado com animação invertida (ex.: aguardando resposta antes de um determinate).
+ */
+export type CaoProgressBarMode = 'determinate' | 'indeterminate' | 'buffer' | 'query';

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

@@ -0,0 +1,94 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CaoProgressBarComponent } from './progress-bar';
+
+describe('CaoProgressBarComponent', () => {
+  let fixture: ComponentFixture<CaoProgressBarComponent>;
+  let el: HTMLElement;
+
+  const track = () => el.querySelector<HTMLElement>('[role="progressbar"]') as HTMLElement;
+  const fill = () => el.querySelector<HTMLElement>('.cao-progress-bar__fill') as HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [CaoProgressBarComponent] }).compileComponents();
+    fixture = TestBed.createComponent(CaoProgressBarComponent);
+    el = fixture.nativeElement;
+    fixture.detectChanges();
+  });
+
+  it('inicia no modo determinate com valor 0', () => {
+    expect(track().getAttribute('aria-valuenow')).toBe('0');
+    expect(fill().style.width).toBe('0%');
+  });
+
+  it('aplica o valor e os atributos ARIA', () => {
+    fixture.componentRef.setInput('value', 40);
+    fixture.detectChanges();
+    expect(fill().style.width).toBe('40%');
+    expect(track().getAttribute('aria-valuenow')).toBe('40');
+    expect(track().getAttribute('aria-valuemin')).toBe('0');
+    expect(track().getAttribute('aria-valuemax')).toBe('100');
+  });
+
+  it('limita o valor entre 0 e 100', () => {
+    fixture.componentRef.setInput('value', 150);
+    fixture.detectChanges();
+    expect(fill().style.width).toBe('100%');
+
+    fixture.componentRef.setInput('value', -10);
+    fixture.detectChanges();
+    expect(fill().style.width).toBe('0%');
+  });
+
+  it('aceita valor como string (numberAttribute)', () => {
+    fixture.componentRef.setInput('value', '25');
+    fixture.detectChanges();
+    expect(fill().style.width).toBe('25%');
+  });
+
+  it('modo indeterminate não define aria-valuenow e renderiza as duas barras', () => {
+    fixture.componentRef.setInput('mode', 'indeterminate');
+    fixture.detectChanges();
+    expect(track().hasAttribute('aria-valuenow')).toBe(false);
+    expect(el.querySelectorAll('.cao-progress-bar__bar').length).toBe(2);
+    expect(fill()).toBeNull();
+  });
+
+  it('modo query inverte a animação', () => {
+    fixture.componentRef.setInput('mode', 'query');
+    fixture.detectChanges();
+    expect(el.querySelector('.cao-progress-bar__inner--query')).not.toBeNull();
+  });
+
+  it('modo buffer renderiza buffer, pontos e progresso', () => {
+    fixture.componentRef.setInput('mode', 'buffer');
+    fixture.componentRef.setInput('value', 30);
+    fixture.componentRef.setInput('bufferValue', 60);
+    fixture.detectChanges();
+    expect(fill().style.width).toBe('30%');
+    expect(el.querySelector<HTMLElement>('.cao-progress-bar__buffer')?.style.width).toBe('60%');
+    expect(el.querySelector('.cao-progress-bar__dots')).not.toBeNull();
+    expect(track().getAttribute('aria-valuenow')).toBe('30');
+  });
+
+  it('exibe o percentual somente em modos com valor', () => {
+    fixture.componentRef.setInput('value', 60);
+    fixture.componentRef.setInput('showValue', true);
+    fixture.detectChanges();
+    expect(el.querySelector('.cao-progress-bar__value')?.textContent?.trim()).toBe('60%');
+
+    fixture.componentRef.setInput('mode', 'indeterminate');
+    fixture.detectChanges();
+    expect(el.querySelector('.cao-progress-bar__value')).toBeNull();
+  });
+
+  it('aplica aria-label, data-cy e altura', () => {
+    fixture.componentRef.setInput('ariaLabel', 'Carregando arquivo');
+    fixture.componentRef.setInput('dataCy', 'upload-progress');
+    fixture.componentRef.setInput('height', '10px');
+    fixture.detectChanges();
+    expect(track().getAttribute('aria-label')).toBe('Carregando arquivo');
+    expect(track().getAttribute('data-cy')).toBe('upload-progress');
+    expect(track().style.height).toBe('10px');
+  });
+});

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

@@ -0,0 +1,53 @@
+import { argsToTemplate, Meta, StoryObj } from '@storybook/angular-vite';
+
+import { CaoProgressBarComponent } from './progress-bar';
+
+const meta: Meta<CaoProgressBarComponent> = {
+  title: 'Componentes/Progress Bar',
+  component: CaoProgressBarComponent,
+  tags: ['autodocs'],
+  render: (args) => ({ props: args, template: `<cao-progress-bar ${argsToTemplate(args)} />` }),
+  argTypes: {
+    mode: { control: 'inline-radio', options: ['determinate', 'indeterminate', 'buffer', 'query'] },
+    value: { control: { type: 'range', min: 0, max: 100, step: 1 } },
+    bufferValue: { control: { type: 'range', min: 0, max: 100, step: 1 } },
+    color: { control: 'color' },
+    trackColor: { control: 'color' },
+    bufferColor: { control: 'color' },
+    height: { control: 'text' },
+    borderRadius: { control: 'text' },
+    animationDuration: { control: 'text' },
+    showValue: { control: 'boolean' },
+    ariaLabel: { control: 'text' },
+  },
+  args: { mode: 'determinate', value: 40, bufferValue: 70, height: '4px', showValue: false, ariaLabel: 'Progresso' },
+};
+export default meta;
+
+type Story = StoryObj<CaoProgressBarComponent>;
+
+export const Determinate: Story = {};
+
+export const Indeterminate: Story = { args: { mode: 'indeterminate' } };
+
+export const Buffer: Story = { args: { mode: 'buffer', value: 30, bufferValue: 65 } };
+
+export const Query: Story = { args: { mode: 'query' } };
+
+export const WithValue: Story = { args: { value: 72, showValue: true, height: '8px' } };
+
+export const CustomColors: Story = {
+  args: { value: 60, color: '#16a34a', trackColor: '#dcfce7', height: '10px', showValue: true },
+};
+
+export const Heights: Story = {
+  render: () => ({
+    template: `
+      <div style="display:flex;flex-direction:column;gap:16px;max-width:480px">
+        <cao-progress-bar [value]="60" height="2px" ariaLabel="Fino" />
+        <cao-progress-bar [value]="60" height="6px" ariaLabel="Médio" />
+        <cao-progress-bar [value]="60" height="14px" ariaLabel="Grosso" />
+        <cao-progress-bar [value]="60" height="14px" borderRadius="2px" ariaLabel="Quadrado" />
+      </div>`,
+  }),
+};