feat(progress): implementa variação circular

- Implementa variação circular para o componente po-progress
- Cria nova propriedade p-shape para informar o tipo: bar ou circle
- Cria nova propriedade p-radius para ser utilizada com conjunto com o tipo circle

Fixes DTHFUI-12619

Author: deboraconstantino

projects/ui/src/lib/components/po-progress/enums/po-progress-shape.enum.ts

@@ -0,0 +1,13 @@
+/**
+ * @usedBy PoProgressComponent
+ *
+ * @description
+ *
+ * Enum `PoProgressShape` para definir o formato visual do componente de progresso.
+ */
+export enum PoProgressShape {
+  /** Formato barra de progresso (padrão). */
+  bar = 'bar',
+  /** Formato circular de progresso. */
+  circle = 'circle'
+}

projects/ui/src/lib/components/po-progress/enums/po-progress-status.enum.ts

@@ -3,7 +3,7 @@
  *
  * @description
  *
- * *Enum* `PoProgressStatus` para os status de barra de progresso.
+ * Enum `PoProgressStatus` para os status de barra de progresso.
  */
 export enum PoProgressStatus {
   /** Define o status `default` para a barra de progresso. */

projects/ui/src/lib/components/po-progress/index.ts

@@ -1,3 +1,4 @@
+export * from './enums/po-progress-shape.enum';
 export * from './enums/po-progress-status.enum';
 export * from './enums/po-progress-size.enum';
 

projects/ui/src/lib/components/po-progress/po-progress-bar/po-progress-bar.component.html

@@ -1,6 +1,7 @@
 @if (!indeterminate) {
   <div
     role="progressbar"
+    [attr.aria-label]="ariaLabel"
     [attr.aria-valuenow]="value"
     aria-valuemin="0"
     aria-valuemax="100"
@@ -13,7 +14,14 @@
 }
 
 @if (indeterminate) {
-  <div class="po-progress-bar-indeterminate-track">
+  <div
+    class="po-progress-bar-indeterminate-track"
+    role="progressbar"
+    [attr.aria-label]="ariaLabel"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    aria-live="polite"
+  >
     <div class="po-progress-bar-indeterminate-track-bar"></div>
   </div>
 }

projects/ui/src/lib/components/po-progress/po-progress-bar/po-progress-bar.component.ts

@@ -7,6 +7,8 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
   standalone: false
 })
 export class PoProgressBarComponent {
+  @Input('p-aria-label') ariaLabel?: string;
+
   @Input('p-indeterminate') indeterminate: boolean;
 
   @Input('p-value') value: number;

projects/ui/src/lib/components/po-progress/po-progress-base.component.spec.ts

@@ -1,14 +1,30 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
 import { PoThemeA11yEnum } from '../../services';
 import { expectPropertiesValues } from '../../util-test/util-expect.spec';
 import { convertToBoolean } from '../../utils/util';
 
 import { PoProgressBaseComponent } from './po-progress-base.component';
 
+@Component({
+  template: '',
+  standalone: false
+})
+class TestHostComponent extends PoProgressBaseComponent {}
+
 describe('PoProgressBaseComponent:', () => {
-  let component: PoProgressBaseComponent;
+  let component: TestHostComponent;
+  let fixture: ComponentFixture<TestHostComponent>;
 
   beforeEach(() => {
-    component = new PoProgressBaseComponent();
+    TestBed.configureTestingModule({
+      declarations: [TestHostComponent]
+    });
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
   });
 
   it('should be created', () => {
@@ -112,6 +128,84 @@ describe('PoProgressBaseComponent:', () => {
       expectPropertiesValues(component, 'value', validValues, 0);
     });
 
+    it('p-shape: should have default value as bar', () => {
+      expect(component.shape()).toBe('bar');
+    });
+
+    it('p-shape: should update with valid values', () => {
+      fixture.componentRef.setInput('p-shape', 'bar');
+      fixture.detectChanges();
+      expect(component.shape()).toBe('bar');
+
+      fixture.componentRef.setInput('p-shape', 'circle');
+      fixture.detectChanges();
+      expect(component.shape()).toBe('circle');
+    });
+
+    it('p-shape: should default to bar if has not valid values', () => {
+      fixture.componentRef.setInput('p-shape', 'square');
+      fixture.detectChanges();
+      expect(component.shape()).toBe('bar');
+
+      fixture.componentRef.setInput('p-shape', 'triangle');
+      fixture.detectChanges();
+      expect(component.shape()).toBe('bar');
+
+      fixture.componentRef.setInput('p-shape', 'hexagon');
+      fixture.detectChanges();
+      expect(component.shape()).toBe('bar');
+    });
+
+    it('p-radius: should have default value as 0', () => {
+      expect(component.radius()).toBe(0);
+    });
+
+    it('p-radius: should accept valid positive values', () => {
+      fixture.componentRef.setInput('p-radius', 30);
+      fixture.detectChanges();
+      expect(component.radius()).toBe(30);
+
+      fixture.componentRef.setInput('p-radius', 60);
+      fixture.detectChanges();
+      expect(component.radius()).toBe(60);
+    });
+
+    it('p-radius: should return 0 (default) for zero or negative values', () => {
+      fixture.componentRef.setInput('p-radius', 0);
+      fixture.detectChanges();
+      expect(component.radius()).toBe(0);
+
+      fixture.componentRef.setInput('p-radius', -10);
+      fixture.detectChanges();
+      expect(component.radius()).toBe(0);
+    });
+
+    it('p-radius: should apply minimum of 24 when value is positive but less than 24', () => {
+      fixture.componentRef.setInput('p-radius', 19);
+      fixture.detectChanges();
+      expect(component.radius()).toBe(24);
+
+      fixture.componentRef.setInput('p-radius', 1);
+      fixture.detectChanges();
+      expect(component.radius()).toBe(24);
+    });
+
+    it('p-radius: should convert string values to int', () => {
+      fixture.componentRef.setInput('p-radius', '50');
+      fixture.detectChanges();
+      expect(component.radius()).toBe(50);
+    });
+
+    it('p-radius: should return 0 for undefined or null values', () => {
+      fixture.componentRef.setInput('p-radius', undefined);
+      fixture.detectChanges();
+      expect(component.radius()).toBe(0);
+
+      fixture.componentRef.setInput('p-radius', null);
+      fixture.detectChanges();
+      expect(component.radius()).toBe(0);
+    });
+
     it('should update property `p-size` with valid values', () => {
       const validValues = ['large', 'medium'];
 

projects/ui/src/lib/components/po-progress/po-progress-base.component.ts

@@ -1,14 +1,17 @@
-import { Directive, EventEmitter, HostBinding, HostListener, Input, Output, TemplateRef } from '@angular/core';
+import { Directive, EventEmitter, HostBinding, HostListener, Input, Output, TemplateRef, input } from '@angular/core';
 
 import { convertToBoolean, convertToInt, getDefaultSizeFn, validateSizeFn } from '../../utils/util';
 
 import { PoFieldSize } from '../../enums/po-field-size.enum';
+import { PoProgressShape } from './enums/po-progress-shape.enum';
 import { PoProgressSize } from './enums/po-progress-size.enum';
 import { PoProgressStatus } from './enums/po-progress-status.enum';
 import { PoProgressAction } from './interfaces';
 
 const poProgressMaxValue = 100;
 const poProgressMinValue = 0;
+const CIRCLE_DEFAULT_RADIUS = 0;
+const CIRCLE_MIN_RADIUS = 24;
 
 /**
  * @description
@@ -34,10 +37,24 @@ const poProgressMinValue = 0;
  * | **po-progress-bar**                    |                                                       |                                                 |
  * | `--background-color-tray`              | Cor do background                                     | `var(--color-brand-01-lightest)`                |
  * | `--background-color-indicator`         | Cor do background do indicador                        | `var(--color-action-default)`                   |
+ * | **po-progress-circle**                 |                                                       |                                                 |
+ * | `--background-color-tray`              | Cor do background                                     | `var(--color-brand-01-lightest)`                |
+ * | `--background-color-indicator`         | Cor do background do indicador                        | `var(--color-action-default)`                   |
  *
  */
 @Directive()
 export class PoProgressBaseComponent {
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Define um nome acessível para o elemento com `role="progressbar"`.
+   *
+   * Quando não informado, o componente utiliza o valor de `p-text` como alternativa, se disponível.
+   */
+  @Input('p-aria-label') ariaLabel?: string;
+
   /**
    * @optional
    *
@@ -48,6 +65,8 @@ export class PoProgressBaseComponent {
    * > Se nenhuma função for passada para o evento `(p-cancel)` ou a barra de progresso estiver com o status `PoProgressStatus.Success`,
    * o ícone de cancelamento não será exibido.
    *
+   * > Não compatível com `p-shape="circle"`.
+   *
    * @default `false`
    */
   @Input({ alias: 'p-disabled-cancel', transform: convertToBoolean }) disabledCancel: boolean = false;
@@ -58,6 +77,8 @@ export class PoProgressBaseComponent {
    * @description
    *
    * Informação adicional que aparecerá abaixo da barra de progresso ao lado direito.
+   *
+   * > Não compatível com `p-shape="circle"`.
    */
   @Input('p-info') info?: string;
 
@@ -69,6 +90,8 @@ export class PoProgressBaseComponent {
    * Ícone que aparecerá ao lado do texto da propriedade `p-info`.
    *
    * Exemplo: `an an-check`.
+   *
+   * > Não compatível com `p-shape="circle"`.
    */
   @Input('p-info-icon') infoIcon?: string | TemplateRef<void>;
 
@@ -90,6 +113,8 @@ export class PoProgressBaseComponent {
    * @description
    *
    * Texto principal que aparecerá abaixo da barra de progresso no lado esquerdo.
+   *
+   * > Não compatível com `p-shape="circle"`.
    */
   @Input('p-text') text?: string;
 
@@ -107,6 +132,8 @@ export class PoProgressBaseComponent {
    * - **`disabled`**: Indica se o botão deve estar desabilitado (opcional).
    * - **`visible`**: Determina se o botão será exibido. Pode ser um valor booleano ou uma função que retorna um booleano (opcional).
    *
+   * > Não compatível com `p-shape="circle"`.
+   *
    * @example
    * **Exemplo de uso:**
    * ```html
@@ -144,6 +171,8 @@ export class PoProgressBaseComponent {
    * Evento emitido quando o botão definido em `p-custom-action` é clicado. Este evento retorna informações
    * relacionadas à barra de progresso ou ao arquivo/processo associado, permitindo executar ações específicas.
    *
+   * > Não compatível com `p-shape="circle"`.
+   *
    * @example
    * **Exemplo de uso:**
    *
@@ -185,6 +214,8 @@ export class PoProgressBaseComponent {
    *
    * > Se nenhuma função for passada para o evento ou a barra de progresso estiver com o status `PoProgressStatus.Success`,
    * o ícone de cancelamento não será exibido.
+   *
+   * > Não compatível com `p-shape="circle"`.
    */
   @Output('p-cancel') cancel: EventEmitter<any> = new EventEmitter();
 
@@ -197,6 +228,8 @@ export class PoProgressBaseComponent {
    *
    * > o ícone será exibido apenas se informar uma função neste evento e o status da barra de progresso for
    * `PoProgressStatus.Error`.
+   *
+   * > Não compatível com `p-shape="circle"`.
    */
   @Output('p-retry') retry: EventEmitter<any> = new EventEmitter();
 
@@ -206,6 +239,59 @@ export class PoProgressBaseComponent {
   private _sizeActions: string = undefined;
   private _initialSizeActions: string = undefined;
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Define o formato visual do componente de progresso.
+   *
+   * Valores válidos:
+   *  - `bar`: exibe o progresso em formato de barra.
+   *  - `circle`: exibe o progresso em formato circular.
+   *
+   * @example
+   * ```html
+   * <po-progress p-shape="circle" [p-value]="50"></po-progress>
+   * ```
+   *
+   * @default `bar`
+   */
+  shape = input<string, string>(PoProgressShape.bar, {
+    alias: 'p-shape',
+    transform: (value: string) => (PoProgressShape[value] ? PoProgressShape[value] : PoProgressShape.bar)
+  });
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Define o raio do círculo SVG em pixels. Permite ao usuário customizar o tamanho
+   * do indicador circular ao utilizar `p-shape="circle"`.
+   *
+   * > O valor mínimo aceito é **24**.
+   *
+   * > Quando não informado, o componente calcula o raio automaticamente a partir do container pai.
+   * Caso o container pai não possua dimensões definidas, o valor padrão de **45** será utilizado.
+   *
+   * > Não compatível com `p-shape="bar"`.
+   *
+   * @default `45` (automático)
+   */
+  radius = input<number, number>(CIRCLE_DEFAULT_RADIUS, {
+    alias: 'p-radius',
+    transform: (value: number) => {
+      // Se nenhum valor foi fornecido (undefined/null), retorna 0 para indicar "não informado"
+      if (value === undefined || value === null) {
+        return CIRCLE_DEFAULT_RADIUS;
+      }
+      const intValue = convertToInt(value, CIRCLE_DEFAULT_RADIUS);
+      // Quando o usuário informa um valor, aplica o mínimo de CIRCLE_MIN_RADIUS
+      return intValue > 0 ? Math.max(intValue, CIRCLE_MIN_RADIUS) : CIRCLE_DEFAULT_RADIUS;
+    }
+  });
+
   /**
    * @optional
    *
@@ -282,6 +368,8 @@ export class PoProgressBaseComponent {
    * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido.
    * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme).
    *
+   * > Não compatível com `p-shape="circle"`.
+   *
    * @default `medium`
    */
   set sizeActions(value: string) {
@@ -302,6 +390,8 @@ export class PoProgressBaseComponent {
    *
    * Ativa a exibição da porcentagem atual da barra de progresso.
    *
+   * > Se utilizada no `p-shape="circle"` e o status estiver como `error`, a porcentagem não será exibida.
+   *
    * @default `false`
    */
   @Input({ alias: 'p-show-percentage', transform: convertToBoolean }) showPercentage: boolean = false;