ngx-opalbytes-components 1.28.0 → 1.30.0

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

@@ -0,0 +1,50 @@
+import { ChangeDetectionStrategy, Component, computed, input, numberAttribute } from '@angular/core';
+
+import { CaoProgressBarMode } from './progress-bar.model';
+
+const clampPercent = (value: number): number => Math.min(100, Math.max(0, Number.isFinite(value) ? value : 0));
+
+@Component({
+  selector: 'cao-progress-bar',
+  templateUrl: './progress-bar.html',
+  styleUrl: './progress-bar.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CaoProgressBarComponent {
+  /** Modo de exibição. Padrão: `'determinate'`. */
+  readonly mode = input<CaoProgressBarMode>('determinate');
+  /** Progresso de 0 a 100 (modos `determinate` e `buffer`). */
+  readonly value = input(0, { transform: numberAttribute });
+  /** Valor do buffer de 0 a 100 (modo `buffer`). */
+  readonly bufferValue = input(0, { transform: numberAttribute });
+
+  /** Cor da barra de progresso (qualquer cor CSS). */
+  readonly color = input<string>('');
+  /** Cor do trilho. */
+  readonly trackColor = input<string>('');
+  /** Cor do buffer (modo `buffer`). */
+  readonly bufferColor = input<string>('');
+  /** Altura da barra. */
+  readonly height = input<string>('4px');
+  /** Raio da borda. Padrão: totalmente arredondada. */
+  readonly borderRadius = input<string>('');
+  /** Duração do ciclo da animação nos modos indeterminado/query/buffer. */
+  readonly animationDuration = input<string>('');
+  /** Exibe o percentual ao lado da barra (modos `determinate` e `buffer`). */
+  readonly showValue = input<boolean>(false);
+
+  readonly ariaLabel = input<string>('');
+  readonly ariaLabelledBy = input<string>('');
+  readonly dataCy = input<string>('');
+
+  protected readonly clampedValue = computed<number>(() => clampPercent(this.value()));
+  protected readonly clampedBuffer = computed<number>(() => clampPercent(this.bufferValue()));
+
+  protected readonly hasValue = computed<boolean>(() => this.mode() === 'determinate' || this.mode() === 'buffer');
+
+  protected readonly ariaValueNow = computed<number | null>(() =>
+    this.hasValue() ? Math.round(this.clampedValue()) : null,
+  );
+
+  protected readonly valueLabel = computed<string>(() => `${Math.round(this.clampedValue())}%`);
+}

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

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

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

@@ -0,0 +1,90 @@
+:host {
+  display: inline-block;
+  line-height: 0;
+}
+
+.cao-progress-spinner {
+  --_color: var(--cao-progress-spinner-color, #4f46e5);
+  --_track: var(--cao-progress-spinner-track-color, transparent);
+  --_duration: var(--cao-progress-spinner-duration, 1.4s);
+  --_text: var(--cao-progress-spinner-text-color, #111827);
+  --_circ: var(--cao-progress-spinner-circumference, 0px);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cao-progress-spinner__svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.cao-progress-spinner__track {
+  stroke: var(--_track);
+}
+
+.cao-progress-spinner__indicator {
+  stroke: var(--_color);
+  transform: rotate(-90deg);
+  transform-origin: 50% 50%;
+  transition: stroke-dashoffset 300ms ease;
+}
+
+.cao-progress-spinner__value {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--_text);
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.cao-progress-spinner--indeterminate .cao-progress-spinner__svg {
+  animation: cao-progress-spinner-rotate var(--_duration) linear infinite;
+}
+
+.cao-progress-spinner--indeterminate .cao-progress-spinner__indicator {
+  animation: cao-progress-spinner-dash calc(var(--_duration) * 1.4) ease-in-out infinite;
+  transition: none;
+}
+
+@keyframes cao-progress-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes cao-progress-spinner-dash {
+  0% {
+    stroke-dashoffset: calc(var(--_circ) * 0.95);
+    transform: rotate(-90deg);
+  }
+  50% {
+    stroke-dashoffset: calc(var(--_circ) * 0.25);
+    transform: rotate(45deg);
+  }
+  100% {
+    stroke-dashoffset: calc(var(--_circ) * 0.95);
+    transform: rotate(270deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cao-progress-spinner__indicator {
+    transition: none;
+  }
+
+  .cao-progress-spinner--indeterminate .cao-progress-spinner__svg {
+    animation-duration: calc(var(--_duration) * 3);
+  }
+
+  .cao-progress-spinner--indeterminate .cao-progress-spinner__indicator {
+    animation-duration: calc(var(--_duration) * 4.2);
+  }
+}

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

@@ -0,0 +1,50 @@
+<div
+  class="cao-progress-spinner"
+  role="progressbar"
+  aria-valuemin="0"
+  aria-valuemax="100"
+  [class.cao-progress-spinner--determinate]="isDeterminate()"
+  [class.cao-progress-spinner--indeterminate]="!isDeterminate()"
+  [attr.aria-valuenow]="ariaValueNow()"
+  [attr.aria-label]="ariaLabel() || null"
+  [attr.aria-labelledby]="ariaLabelledBy() || null"
+  [attr.data-cy]="dataCy() || null"
+  [style.width.px]="size()"
+  [style.height.px]="size()"
+  [style.--cao-progress-spinner-color]="color() || null"
+  [style.--cao-progress-spinner-track-color]="trackColor() || null"
+  [style.--cao-progress-spinner-duration]="animationDuration() || null"
+  [style.--cao-progress-spinner-text-color]="textColor() || null"
+  [style.--cao-progress-spinner-circumference]="circumference() + 'px'">
+  <svg
+    class="cao-progress-spinner__svg"
+    focusable="false"
+    aria-hidden="true"
+    [attr.width]="size()"
+    [attr.height]="size()"
+    [attr.viewBox]="'0 0 ' + size() + ' ' + size()">
+    <circle
+      class="cao-progress-spinner__track"
+      fill="none"
+      [attr.cx]="center()"
+      [attr.cy]="center()"
+      [attr.r]="radius()"
+      [attr.stroke-width]="stroke()" />
+    <circle
+      class="cao-progress-spinner__indicator"
+      fill="none"
+      [attr.cx]="center()"
+      [attr.cy]="center()"
+      [attr.r]="radius()"
+      [attr.stroke-width]="stroke()"
+      [attr.stroke-linecap]="strokeLinecap()"
+      [attr.stroke-dasharray]="circumference()"
+      [attr.stroke-dashoffset]="dashOffset()" />
+  </svg>
+
+  @if (showValue() && isDeterminate()) {
+    <span class="cao-progress-spinner__value" aria-hidden="true" [style.font-size.px]="fontSize()">
+      {{ valueLabel() }}
+    </span>
+  }
+</div>

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

@@ -0,0 +1,8 @@
+/**
+ * Modo do spinner de progresso (mesmos modos do Angular Material).
+ * - `determinate`: progresso conhecido, controlado por `value`.
+ * - `indeterminate`: progresso desconhecido, animação contínua.
+ */
+export type CaoProgressSpinnerMode = 'determinate' | 'indeterminate';
+
+export type CaoProgressSpinnerLinecap = 'round' | 'butt' | 'square';

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

@@ -0,0 +1,85 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CaoProgressSpinnerComponent } from './progress-spinner';
+
+describe('CaoProgressSpinnerComponent', () => {
+  let fixture: ComponentFixture<CaoProgressSpinnerComponent>;
+  let el: HTMLElement;
+
+  const root = () => el.querySelector<HTMLElement>('[role="progressbar"]') as HTMLElement;
+  const indicator = () => el.querySelector<SVGCircleElement>('.cao-progress-spinner__indicator') as SVGCircleElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [CaoProgressSpinnerComponent] }).compileComponents();
+    fixture = TestBed.createComponent(CaoProgressSpinnerComponent);
+    el = fixture.nativeElement;
+    fixture.detectChanges();
+  });
+
+  it('inicia no modo indeterminate, sem aria-valuenow', () => {
+    expect(root().classList).toContain('cao-progress-spinner--indeterminate');
+    expect(root().hasAttribute('aria-valuenow')).toBe(false);
+    expect(indicator().hasAttribute('stroke-dashoffset')).toBe(false);
+  });
+
+  it('usa diâmetro padrão de 48px', () => {
+    expect(root().style.width).toBe('48px');
+    expect(el.querySelector('svg')?.getAttribute('viewBox')).toBe('0 0 48 48');
+  });
+
+  it('aplica diâmetro e espessura customizados', () => {
+    fixture.componentRef.setInput('diameter', 100);
+    fixture.componentRef.setInput('strokeWidth', 10);
+    fixture.detectChanges();
+    expect(root().style.width).toBe('100px');
+    expect(indicator().getAttribute('r')).toBe('45');
+    expect(indicator().getAttribute('stroke-width')).toBe('10');
+  });
+
+  it('calcula o stroke-dashoffset no modo determinate', () => {
+    fixture.componentRef.setInput('mode', 'determinate');
+    fixture.componentRef.setInput('value', 50);
+    fixture.detectChanges();
+
+    const circumference = 2 * Math.PI * ((48 - 4.8) / 2);
+    expect(Number(indicator().getAttribute('stroke-dasharray'))).toBeCloseTo(circumference, 2);
+    expect(Number(indicator().getAttribute('stroke-dashoffset'))).toBeCloseTo(circumference / 2, 2);
+    expect(root().getAttribute('aria-valuenow')).toBe('50');
+  });
+
+  it('limita o valor entre 0 e 100', () => {
+    fixture.componentRef.setInput('mode', 'determinate');
+    fixture.componentRef.setInput('value', 250);
+    fixture.detectChanges();
+    expect(root().getAttribute('aria-valuenow')).toBe('100');
+    expect(Number(indicator().getAttribute('stroke-dashoffset'))).toBeCloseTo(0, 2);
+  });
+
+  it('aceita value como string (numberAttribute)', () => {
+    fixture.componentRef.setInput('mode', 'determinate');
+    fixture.componentRef.setInput('value', '25');
+    fixture.detectChanges();
+    expect(root().getAttribute('aria-valuenow')).toBe('25');
+  });
+
+  it('exibe o percentual apenas no modo determinate', () => {
+    fixture.componentRef.setInput('showValue', true);
+    fixture.detectChanges();
+    expect(el.querySelector('.cao-progress-spinner__value')).toBeNull();
+
+    fixture.componentRef.setInput('mode', 'determinate');
+    fixture.componentRef.setInput('value', 75);
+    fixture.detectChanges();
+    expect(el.querySelector('.cao-progress-spinner__value')?.textContent?.trim()).toBe('75%');
+  });
+
+  it('aplica aria-label, data-cy e linecap', () => {
+    fixture.componentRef.setInput('ariaLabel', 'Carregando dados');
+    fixture.componentRef.setInput('dataCy', 'spinner');
+    fixture.componentRef.setInput('strokeLinecap', 'butt');
+    fixture.detectChanges();
+    expect(root().getAttribute('aria-label')).toBe('Carregando dados');
+    expect(root().getAttribute('data-cy')).toBe('spinner');
+    expect(indicator().getAttribute('stroke-linecap')).toBe('butt');
+  });
+});

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

@@ -0,0 +1,73 @@
+import { argsToTemplate, Meta, StoryObj } from '@storybook/angular-vite';
+
+import { CaoProgressSpinnerComponent } from './progress-spinner';
+
+const ROW = 'display:flex;gap:24px;align-items:center;flex-wrap:wrap';
+
+const meta: Meta<CaoProgressSpinnerComponent> = {
+  title: 'Componentes/Progress Spinner',
+  component: CaoProgressSpinnerComponent,
+  tags: ['autodocs'],
+  render: (args) => ({ props: args, template: `<cao-progress-spinner ${argsToTemplate(args)} />` }),
+  argTypes: {
+    mode: { control: 'inline-radio', options: ['determinate', 'indeterminate'] },
+    value: { control: { type: 'range', min: 0, max: 100, step: 1 } },
+    diameter: { control: { type: 'number', min: 8 } },
+    strokeWidth: { control: { type: 'number', min: 0 }, description: '0 = automático (10% do diâmetro).' },
+    strokeLinecap: { control: 'inline-radio', options: ['round', 'butt', 'square'] },
+    color: { control: 'color' },
+    trackColor: { control: 'color' },
+    textColor: { control: 'color' },
+    animationDuration: { control: 'text' },
+    showValue: { control: 'boolean' },
+    ariaLabel: { control: 'text' },
+  },
+  args: {
+    mode: 'indeterminate',
+    value: 65,
+    diameter: 48,
+    strokeWidth: 0,
+    strokeLinecap: 'round',
+    showValue: false,
+    ariaLabel: 'Carregando',
+  },
+};
+export default meta;
+
+type Story = StoryObj<CaoProgressSpinnerComponent>;
+
+export const Indeterminate: Story = {};
+
+export const Determinate: Story = { args: { mode: 'determinate', trackColor: '#e5e7eb' } };
+
+export const WithValue: Story = {
+  args: { mode: 'determinate', value: 72, diameter: 96, trackColor: '#e5e7eb', showValue: true },
+};
+
+export const CustomColors: Story = {
+  args: { mode: 'determinate', value: 60, diameter: 80, color: '#16a34a', trackColor: '#dcfce7', showValue: true },
+};
+
+export const Sizes: Story = {
+  render: () => ({
+    template: `
+      <div style="${ROW}">
+        <cao-progress-spinner [diameter]="16" ariaLabel="Muito pequeno" />
+        <cao-progress-spinner [diameter]="24" ariaLabel="Pequeno" />
+        <cao-progress-spinner [diameter]="48" ariaLabel="Médio" />
+        <cao-progress-spinner [diameter]="80" ariaLabel="Grande" />
+        <cao-progress-spinner [diameter]="120" [strokeWidth]="6" ariaLabel="Muito grande" />
+      </div>`,
+  }),
+};
+
+export const StrokeAndLinecap: Story = {
+  render: () => ({
+    template: `
+      <div style="${ROW}">
+        <cao-progress-spinner mode="determinate" [value]="70" [diameter]="64" [strokeWidth]="3" trackColor="#e5e7eb" />
+        <cao-progress-spinner mode="determinate" [value]="70" [diameter]="64" [strokeWidth]="10" trackColor="#e5e7eb" />
+        <cao-progress-spinner mode="determinate" [value]="70" [diameter]="64" [strokeWidth]="10" strokeLinecap="butt" trackColor="#e5e7eb" />
+      </div>`,
+  }),
+};

package/src/lib/shared/components/progress-spinner/progress-spinner.ts

@@ -0,0 +1,71 @@
+import { ChangeDetectionStrategy, Component, computed, input, numberAttribute } from '@angular/core';
+
+import { CaoProgressSpinnerLinecap, CaoProgressSpinnerMode } from './progress-spinner.model';
+
+const MIN_DIAMETER = 8;
+
+const clampPercent = (value: number): number => Math.min(100, Math.max(0, Number.isFinite(value) ? value : 0));
+
+@Component({
+  selector: 'cao-progress-spinner',
+  templateUrl: './progress-spinner.html',
+  styleUrl: './progress-spinner.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CaoProgressSpinnerComponent {
+  /** Modo de exibição. Padrão: `'indeterminate'`. */
+  readonly mode = input<CaoProgressSpinnerMode>('indeterminate');
+  /** Progresso de 0 a 100 (modo `determinate`). */
+  readonly value = input(0, { transform: numberAttribute });
+  /** Diâmetro em px. */
+  readonly diameter = input(48, { transform: numberAttribute });
+  /** Espessura do traço em px. `0` = automático (10% do diâmetro). */
+  readonly strokeWidth = input(0, { transform: numberAttribute });
+  /** Formato da ponta do traço. */
+  readonly strokeLinecap = input<CaoProgressSpinnerLinecap>('round');
+
+  /** Cor do indicador (qualquer cor CSS). */
+  readonly color = input<string>('');
+  /** Cor do trilho (círculo de fundo). Padrão: transparente. */
+  readonly trackColor = input<string>('');
+  /** Duração de uma volta completa no modo indeterminado. */
+  readonly animationDuration = input<string>('');
+  /** Exibe o percentual no centro (modo `determinate`). */
+  readonly showValue = input<boolean>(false);
+  /** Cor do percentual. */
+  readonly textColor = input<string>('');
+
+  readonly ariaLabel = input<string>('');
+  readonly ariaLabelledBy = input<string>('');
+  readonly dataCy = input<string>('');
+
+  protected readonly isDeterminate = computed<boolean>(() => this.mode() === 'determinate');
+
+  protected readonly size = computed<number>(() => {
+    const diameter = this.diameter();
+    return Number.isFinite(diameter) ? Math.max(MIN_DIAMETER, diameter) : 48;
+  });
+
+  protected readonly stroke = computed<number>(() => {
+    const width = this.strokeWidth();
+    const raw = width > 0 ? width : this.size() * 0.1;
+    return Math.min(Math.max(raw, 1), this.size() / 2);
+  });
+
+  protected readonly center = computed<number>(() => this.size() / 2);
+  protected readonly radius = computed<number>(() => (this.size() - this.stroke()) / 2);
+  protected readonly circumference = computed<number>(() => 2 * Math.PI * this.radius());
+
+  protected readonly clampedValue = computed<number>(() => clampPercent(this.value()));
+
+  protected readonly dashOffset = computed<number | null>(() =>
+    this.isDeterminate() ? this.circumference() * (1 - this.clampedValue() / 100) : null,
+  );
+
+  protected readonly ariaValueNow = computed<number | null>(() =>
+    this.isDeterminate() ? Math.round(this.clampedValue()) : null,
+  );
+
+  protected readonly valueLabel = computed<string>(() => `${Math.round(this.clampedValue())}%`);
+  protected readonly fontSize = computed<number>(() => Math.max(8, Math.round(this.size() * 0.24)));
+}