@po-ui/ng-components 21.11.0 → 21.12.0

package/fesm2022/po-ui-ng-components.mjs

@@ -15035,6 +15035,8 @@ const poChartDefaultHeight = 400;
  * | `--font-size-grid`                       | Tamanho da fonte usada nos valores dos eixos                            | `var(--font-size-xs)`                             |
  * | `--font-weight-grid`                     | Peso da fonte usada nos valores dos eixos                               | `var(--font-weight-normal)`                       |
  * | `--color-legend`                         | Cor da fonte da legenda                                                 | `var(--color-neutral-dark-70)`                    |
+ * | `--color-legend-scroll-icon-active`      | Cor do ícone de scroll da legenda no estado ativo, pro tipo `scroll`    | `var(--color-action-default)`                     |
+ * | `--color-legend-scroll-icon-inactive`    | Cor do ícone de scroll da legenda no estado inativo, pro tipo `scroll`  | `var(--color-action-disabled)`                    |
  * | `--border-radius-bar`                    | Tamanho da borda nos graficos `Bar` e `Column`                          | `var(--border-radius-none)`                       |
  * | `--border-color`                         | Cor da borda do gráfico nos Gráficos `Donut` e `Pie`                    | `var(--color-neutral-light-00)`                   |
  * | `--color-hightlight-value`               | Cor do valor de destaque nos Gráficos `Donut` e `Gauge`                 | `var(--color-neutral-dark-70)`                    |
@@ -16460,10 +16462,17 @@ class PoChartComponent extends PoChartBaseComponent {
     }
     setOptionLegend(options) {
         options.legend = {
+            type: this.options?.legendType || 'plain',
+            pageIconColor: this.options?.legendType === 'scroll'
+                ? this.getCSSVariable('--color-legend-scroll-icon-active', '.po-chart')
+                : '',
+            pageIconInactiveColor: this.options?.legendType === 'scroll'
+                ? this.getCSSVariable('--color-legend-scroll-icon-inactive', '.po-chart')
+                : '',
             show: true,
             selectedMode: !this.isTypeGauge,
             orient: 'horizontal',
-            left: this.options?.legendPosition || 'center',
+            left: this.options?.legendType === 'scroll' ? 32 : this.options?.legendPosition || 'center',
             top: this.options?.legendVerticalPosition || 'bottom',
             bottom: 0,
             padding: [0, 16, 0, 16],
@@ -25956,18 +25965,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
         }] });
 
 class PoProgressBarComponent {
+    ariaLabel;
     indeterminate;
     value;
     get valueScale() {
         return `${this.value / 100}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PoProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: PoProgressBarComponent, isStandalone: false, selector: "po-progress-bar", inputs: { indeterminate: ["p-indeterminate", "indeterminate"], value: ["p-value", "value"] }, ngImport: i0, template: "@if (!indeterminate) {\n  <div\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"value\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    aria-live=\"polite\"\n    class=\"po-progress-bar-default\"\n  >\n    <div class=\"po-progress-bar-element po-progress-bar-primary\"></div>\n    <div class=\"po-progress-bar-element po-progress-bar-secondary\" [style.left]=\"'-' + (100 - value) + '%'\"></div>\n  </div>\n}\n\n@if (indeterminate) {\n  <div class=\"po-progress-bar-indeterminate-track\">\n    <div class=\"po-progress-bar-indeterminate-track-bar\"></div>\n  </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: PoProgressBarComponent, isStandalone: false, selector: "po-progress-bar", inputs: { ariaLabel: ["p-aria-label", "ariaLabel"], indeterminate: ["p-indeterminate", "indeterminate"], value: ["p-value", "value"] }, ngImport: i0, template: "@if (!indeterminate) {\n  <div\n    role=\"progressbar\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-valuenow]=\"value\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    aria-live=\"polite\"\n    class=\"po-progress-bar-default\"\n  >\n    <div class=\"po-progress-bar-element po-progress-bar-primary\"></div>\n    <div class=\"po-progress-bar-element po-progress-bar-secondary\" [style.left]=\"'-' + (100 - value) + '%'\"></div>\n  </div>\n}\n\n@if (indeterminate) {\n  <div\n    class=\"po-progress-bar-indeterminate-track\"\n    role=\"progressbar\"\n    [attr.aria-label]=\"ariaLabel\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    aria-live=\"polite\"\n  >\n    <div class=\"po-progress-bar-indeterminate-track-bar\"></div>\n  </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PoProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (!indeterminate) {\n  <div\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"value\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    aria-live=\"polite\"\n    class=\"po-progress-bar-default\"\n  >\n    <div class=\"po-progress-bar-element po-progress-bar-primary\"></div>\n    <div class=\"po-progress-bar-element po-progress-bar-secondary\" [style.left]=\"'-' + (100 - value) + '%'\"></div>\n  </div>\n}\n\n@if (indeterminate) {\n  <div class=\"po-progress-bar-indeterminate-track\">\n    <div class=\"po-progress-bar-indeterminate-track-bar\"></div>\n  </div>\n}\n" }]
-        }], propDecorators: { indeterminate: [{
+            args: [{ selector: 'po-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (!indeterminate) {\n  <div\n    role=\"progressbar\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-valuenow]=\"value\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    aria-live=\"polite\"\n    class=\"po-progress-bar-default\"\n  >\n    <div class=\"po-progress-bar-element po-progress-bar-primary\"></div>\n    <div class=\"po-progress-bar-element po-progress-bar-secondary\" [style.left]=\"'-' + (100 - value) + '%'\"></div>\n  </div>\n}\n\n@if (indeterminate) {\n  <div\n    class=\"po-progress-bar-indeterminate-track\"\n    role=\"progressbar\"\n    [attr.aria-label]=\"ariaLabel\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    aria-live=\"polite\"\n  >\n    <div class=\"po-progress-bar-indeterminate-track-bar\"></div>\n  </div>\n}\n" }]
+        }], propDecorators: { ariaLabel: [{
+                type: Input,
+                args: ['p-aria-label']
+            }], indeterminate: [{
                 type: Input,
                 args: ['p-indeterminate']
             }], value: [{
@@ -25975,12 +25988,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 args: ['p-value']
             }] } });
 
+const CIRCLE_STROKE_MEDIUM = 4;
+const CIRCLE_STROKE_LARGE = 8;
+const CIRCLE_MIN_RADIUS_WITH_CENTER_CONTENT = 24;
+const CIRCLE_DEFAULT_RADIUS$1 = 45;
+class PoProgressCircleComponent {
+    indeterminate = input(false, { ...(ngDevMode ? { debugName: "indeterminate" } : /* istanbul ignore next */ {}), alias: 'p-indeterminate', transform: convertToBoolean });
+    showPercentage = input(false, { ...(ngDevMode ? { debugName: "showPercentage" } : /* istanbul ignore next */ {}), alias: 'p-show-percentage', transform: convertToBoolean });
+    size = input('large', { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), alias: 'p-size',
+        transform: (value) => (value === 'medium' ? 'medium' : 'large') });
+    status = input('default', { ...(ngDevMode ? { debugName: "status" } : /* istanbul ignore next */ {}), alias: 'p-status',
+        transform: (value) => (['default', 'success', 'error'].includes(value) ? value : 'default') });
+    ariaLabelInput = input('', { ...(ngDevMode ? { debugName: "ariaLabelInput" } : /* istanbul ignore next */ {}), alias: 'p-aria-label' });
+    ariaLabel = computed(() => {
+        const status = this.status() !== 'default' ? this.status() : '';
+        const custom = this.ariaLabelInput();
+        if (custom) {
+            return `${status} ${custom}`;
+        }
+        return status;
+    }, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    value = input(0, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), alias: 'p-value' });
+    // 0 = não informado pelo usuário (usa lógica automática)
+    radius = input(0, { ...(ngDevMode ? { debugName: "radius" } : /* istanbul ignore next */ {}), alias: 'p-radius' });
+    // Dimensão do container pai (fornecida pelo ResizeObserver do po-progress.component)
+    parentSize = input(0, { ...(ngDevMode ? { debugName: "parentSize" } : /* istanbul ignore next */ {}), alias: 'p-parent-size' });
+    strokeWidth = computed(() => (this.size() === 'medium' ? CIRCLE_STROKE_MEDIUM : CIRCLE_STROKE_LARGE), ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Raio base calculado de acordo com as regras de prioridade:
+     *
+     * 1. Se `radius > 0` (usuário informou radius explicitamente):
+     *    - Se o pai tem dimensão: limita ao máximo que cabe no pai (evita estouro)
+     *    - Se o pai não tem dimensão: usa o radius informado diretamente
+     *
+     * 2. Se `radius === 0` (usuário NÃO informou radius):
+     *    - Se o pai tem dimensão: ocupa o máximo disponível no pai
+     *    - Se o pai não tem dimensão: usa o default de 45
+     */
+    baseRadius = computed(() => {
+        const parentDimension = this.parentSize();
+        const userRadius = this.radius();
+        if (userRadius > 0) {
+            if (parentDimension > 0) {
+                const maxFitRadius = parentDimension / 2 - this.strokeWidth();
+                return Math.min(userRadius, Math.max(maxFitRadius, 0));
+            }
+            return userRadius;
+        }
+        if (parentDimension > 0) {
+            return parentDimension / 2 - this.strokeWidth();
+        }
+        return CIRCLE_DEFAULT_RADIUS$1;
+    }, ...(ngDevMode ? [{ debugName: "baseRadius" }] : /* istanbul ignore next */ []));
+    hasCenterContent = computed(() => !this.indeterminate() && (this.showPercentage() || this.status() === 'error'), ...(ngDevMode ? [{ debugName: "hasCenterContent" }] : /* istanbul ignore next */ []));
+    effectiveRadius = computed(() => this.hasCenterContent() ? Math.max(this.baseRadius(), CIRCLE_MIN_RADIUS_WITH_CENTER_CONTENT) : this.baseRadius(), ...(ngDevMode ? [{ debugName: "effectiveRadius" }] : /* istanbul ignore next */ []));
+    viewBoxSize = computed(() => (this.effectiveRadius() + this.strokeWidth()) * 2, ...(ngDevMode ? [{ debugName: "viewBoxSize" }] : /* istanbul ignore next */ []));
+    center = computed(() => this.effectiveRadius() + this.strokeWidth(), ...(ngDevMode ? [{ debugName: "center" }] : /* istanbul ignore next */ []));
+    circumference = computed(() => 2 * Math.PI * this.effectiveRadius(), ...(ngDevMode ? [{ debugName: "circumference" }] : /* istanbul ignore next */ []));
+    dashOffset = computed(() => {
+        const clampedValue = Math.max(0, Math.min(100, this.value() || 0));
+        return this.circumference() - (clampedValue / 100) * this.circumference();
+    }, ...(ngDevMode ? [{ debugName: "dashOffset" }] : /* istanbul ignore next */ []));
+    naturalSize = computed(() => {
+        const vb = this.viewBoxSize();
+        const ps = this.parentSize();
+        return ps > 0 && vb > ps ? `${ps}px` : `${vb}px`;
+    }, ...(ngDevMode ? [{ debugName: "naturalSize" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PoProgressCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: PoProgressCircleComponent, isStandalone: true, selector: "po-progress-circle", inputs: { indeterminate: { classPropertyName: "indeterminate", publicName: "p-indeterminate", isSignal: true, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: "showPercentage", publicName: "p-show-percentage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "p-status", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelInput: { classPropertyName: "ariaLabelInput", publicName: "p-aria-label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "p-value", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "p-radius", isSignal: true, isRequired: false, transformFunction: null }, parentSize: { classPropertyName: "parentSize", publicName: "p-parent-size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!indeterminate()) {\n  <div\n    class=\"po-progress-circle-svg-wrapper\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"value()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    aria-live=\"polite\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [style.max-height]=\"naturalSize()\"\n    [style.max-width]=\"naturalSize()\"\n  >\n    <svg\n      class=\"po-progress-circle-svg\"\n      [attr.viewBox]=\"'0 0 ' + viewBoxSize() + ' ' + viewBoxSize()\"\n      [attr.width]=\"viewBoxSize()\"\n      [attr.height]=\"viewBoxSize()\"\n    >\n      <circle\n        class=\"po-progress-circle-tray\"\n        [attr.cx]=\"center()\"\n        [attr.cy]=\"center()\"\n        [attr.r]=\"effectiveRadius()\"\n        fill=\"none\"\n      />\n\n      <circle\n        class=\"po-progress-circle-indicator\"\n        [attr.cx]=\"center()\"\n        [attr.cy]=\"center()\"\n        [attr.r]=\"effectiveRadius()\"\n        fill=\"none\"\n        [attr.stroke-dasharray]=\"circumference()\"\n        [attr.stroke-dashoffset]=\"dashOffset()\"\n      />\n    </svg>\n\n    @if (showPercentage() && status() !== 'error') {\n      <span class=\"po-progress-circle-info po-progress-circle-info-percentage\">{{ value() }}%</span>\n    }\n\n    @if (status() === 'error') {\n      <span class=\"po-progress-circle-info po-progress-circle-info-error po-progress-circle-info-error-{{ size() }}\">\n        <span class=\"an an-warning-circle\"></span>\n      </span>\n    }\n  </div>\n}\n\n@if (indeterminate()) {\n  <div\n    class=\"po-progress-circle-indeterminate\"\n    role=\"progressbar\"\n    [attr.aria-label]=\"ariaLabel()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    aria-live=\"polite\"\n  >\n    <div class=\"po-progress-circle-svg-wrapper\" [style.max-width]=\"naturalSize()\" [style.max-height]=\"naturalSize()\">\n      <svg\n        class=\"po-progress-circle-svg\"\n        [attr.viewBox]=\"'0 0 ' + viewBoxSize() + ' ' + viewBoxSize()\"\n        [attr.width]=\"viewBoxSize()\"\n        [attr.height]=\"viewBoxSize()\"\n      >\n        <circle\n          class=\"po-progress-circle-tray\"\n          [attr.cx]=\"center()\"\n          [attr.cy]=\"center()\"\n          [attr.r]=\"effectiveRadius()\"\n          fill=\"none\"\n        />\n\n        <circle\n          class=\"po-progress-circle-indicator\"\n          [attr.cx]=\"center()\"\n          [attr.cy]=\"center()\"\n          [attr.r]=\"effectiveRadius()\"\n          [attr.pathLength]=\"100\"\n          fill=\"none\"\n        />\n      </svg>\n    </div>\n  </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PoProgressCircleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'po-progress-circle', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@if (!indeterminate()) {\n  <div\n    class=\"po-progress-circle-svg-wrapper\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"value()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    aria-live=\"polite\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [style.max-height]=\"naturalSize()\"\n    [style.max-width]=\"naturalSize()\"\n  >\n    <svg\n      class=\"po-progress-circle-svg\"\n      [attr.viewBox]=\"'0 0 ' + viewBoxSize() + ' ' + viewBoxSize()\"\n      [attr.width]=\"viewBoxSize()\"\n      [attr.height]=\"viewBoxSize()\"\n    >\n      <circle\n        class=\"po-progress-circle-tray\"\n        [attr.cx]=\"center()\"\n        [attr.cy]=\"center()\"\n        [attr.r]=\"effectiveRadius()\"\n        fill=\"none\"\n      />\n\n      <circle\n        class=\"po-progress-circle-indicator\"\n        [attr.cx]=\"center()\"\n        [attr.cy]=\"center()\"\n        [attr.r]=\"effectiveRadius()\"\n        fill=\"none\"\n        [attr.stroke-dasharray]=\"circumference()\"\n        [attr.stroke-dashoffset]=\"dashOffset()\"\n      />\n    </svg>\n\n    @if (showPercentage() && status() !== 'error') {\n      <span class=\"po-progress-circle-info po-progress-circle-info-percentage\">{{ value() }}%</span>\n    }\n\n    @if (status() === 'error') {\n      <span class=\"po-progress-circle-info po-progress-circle-info-error po-progress-circle-info-error-{{ size() }}\">\n        <span class=\"an an-warning-circle\"></span>\n      </span>\n    }\n  </div>\n}\n\n@if (indeterminate()) {\n  <div\n    class=\"po-progress-circle-indeterminate\"\n    role=\"progressbar\"\n    [attr.aria-label]=\"ariaLabel()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    aria-live=\"polite\"\n  >\n    <div class=\"po-progress-circle-svg-wrapper\" [style.max-width]=\"naturalSize()\" [style.max-height]=\"naturalSize()\">\n      <svg\n        class=\"po-progress-circle-svg\"\n        [attr.viewBox]=\"'0 0 ' + viewBoxSize() + ' ' + viewBoxSize()\"\n        [attr.width]=\"viewBoxSize()\"\n        [attr.height]=\"viewBoxSize()\"\n      >\n        <circle\n          class=\"po-progress-circle-tray\"\n          [attr.cx]=\"center()\"\n          [attr.cy]=\"center()\"\n          [attr.r]=\"effectiveRadius()\"\n          fill=\"none\"\n        />\n\n        <circle\n          class=\"po-progress-circle-indicator\"\n          [attr.cx]=\"center()\"\n          [attr.cy]=\"center()\"\n          [attr.r]=\"effectiveRadius()\"\n          [attr.pathLength]=\"100\"\n          fill=\"none\"\n        />\n      </svg>\n    </div>\n  </div>\n}\n" }]
+        }], propDecorators: { indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-indeterminate", required: false }] }], showPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-show-percentage", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-status", required: false }] }], ariaLabelInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-aria-label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-value", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-radius", required: false }] }], parentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-parent-size", required: false }] }] } });
+
 /**
  * @usedBy PoProgressComponent
  *
  * @description
  *
- * *Enum* `PoProgressStatus` para os status de barra de progresso.
+ * Enum `PoProgressStatus` para os status de barra de progresso.
  */
 var PoProgressStatus;
 (function (PoProgressStatus) {
@@ -26011,6 +26098,21 @@ const poProgressLiterals = {
     }
 };
 
+/**
+ * @usedBy PoProgressComponent
+ *
+ * @description
+ *
+ * Enum `PoProgressShape` para definir o formato visual do componente de progresso.
+ */
+var PoProgressShape;
+(function (PoProgressShape) {
+    /** Formato barra de progresso (padrão). */
+    PoProgressShape["bar"] = "bar";
+    /** Formato circular de progresso. */
+    PoProgressShape["circle"] = "circle";
+})(PoProgressShape || (PoProgressShape = {}));
+
 /**
  * @usedBy PoProgressComponent
  *
@@ -26028,6 +26130,8 @@ var PoProgressSize;
 
 const poProgressMaxValue = 100;
 const poProgressMinValue = 0;
+const CIRCLE_DEFAULT_RADIUS = 0;
+const CIRCLE_MIN_RADIUS = 24;
 /**
  * @description
  *
@@ -26052,9 +26156,22 @@ 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)`                   |
  *
  */
 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.
+     */
+    ariaLabel;
     /**
      * @optional
      *
@@ -26065,6 +26182,8 @@ 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`
      */
     disabledCancel = false;
@@ -26074,6 +26193,8 @@ class PoProgressBaseComponent {
      * @description
      *
      * Informação adicional que aparecerá abaixo da barra de progresso ao lado direito.
+     *
+     * > Não compatível com `p-shape="circle"`.
      */
     info;
     /**
@@ -26084,6 +26205,8 @@ 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"`.
      */
     infoIcon;
     /**
@@ -26103,6 +26226,8 @@ class PoProgressBaseComponent {
      * @description
      *
      * Texto principal que aparecerá abaixo da barra de progresso no lado esquerdo.
+     *
+     * > Não compatível com `p-shape="circle"`.
      */
     text;
     /**
@@ -26119,6 +26244,8 @@ 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
@@ -26155,6 +26282,8 @@ 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:**
      *
@@ -26195,6 +26324,8 @@ 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"`.
      */
     cancel = new EventEmitter();
     /**
@@ -26206,6 +26337,8 @@ 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"`.
      */
     retry = new EventEmitter();
     _indeterminate;
@@ -26213,6 +26346,53 @@ class PoProgressBaseComponent {
     _size = 'large';
     _sizeActions = undefined;
     _initialSizeActions = 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(PoProgressShape.bar, { ...(ngDevMode ? { debugName: "shape" } : /* istanbul ignore next */ {}), alias: 'p-shape',
+        transform: (value) => (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(CIRCLE_DEFAULT_RADIUS, { ...(ngDevMode ? { debugName: "radius" } : /* istanbul ignore next */ {}), alias: 'p-radius',
+        transform: (value) => {
+            // 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
      *
@@ -26282,6 +26462,8 @@ 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) {
@@ -26298,6 +26480,8 @@ 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`
      */
     showPercentage = false;
@@ -26311,11 +26495,14 @@ class PoProgressBaseComponent {
         return value >= poProgressMinValue && value <= poProgressMaxValue;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PoProgressBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.10", type: PoProgressBaseComponent, isStandalone: true, inputs: { disabledCancel: ["p-disabled-cancel", "disabledCancel", convertToBoolean], info: ["p-info", "info"], infoIcon: ["p-info-icon", "infoIcon"], status: ["p-status", "status"], text: ["p-text", "text"], customAction: ["p-custom-action", "customAction"], indeterminate: ["p-indeterminate", "indeterminate"], value: ["p-value", "value"], size: ["p-size", "size"], sizeActions: ["p-size-actions", "sizeActions"], showPercentage: ["p-show-percentage", "showPercentage", convertToBoolean] }, outputs: { customActionClick: "p-custom-action-click", cancel: "p-cancel", retry: "p-retry" }, host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-size-actions": "this.sizeActions" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: PoProgressBaseComponent, isStandalone: true, inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "p-aria-label", isSignal: false, isRequired: false, transformFunction: null }, disabledCancel: { classPropertyName: "disabledCancel", publicName: "p-disabled-cancel", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, info: { classPropertyName: "info", publicName: "p-info", isSignal: false, isRequired: false, transformFunction: null }, infoIcon: { classPropertyName: "infoIcon", publicName: "p-info-icon", isSignal: false, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "p-status", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "p-text", isSignal: false, isRequired: false, transformFunction: null }, customAction: { classPropertyName: "customAction", publicName: "p-custom-action", isSignal: false, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "p-shape", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "p-radius", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "p-indeterminate", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "p-value", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null }, sizeActions: { classPropertyName: "sizeActions", publicName: "p-size-actions", isSignal: false, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: "showPercentage", publicName: "p-show-percentage", isSignal: false, isRequired: false, transformFunction: convertToBoolean } }, outputs: { customActionClick: "p-custom-action-click", cancel: "p-cancel", retry: "p-retry" }, host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-size-actions": "this.sizeActions" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PoProgressBaseComponent, decorators: [{
             type: Directive
-        }], propDecorators: { disabledCancel: [{
+        }], propDecorators: { ariaLabel: [{
+                type: Input,
+                args: ['p-aria-label']
+            }], disabledCancel: [{
                 type: Input,
                 args: [{ alias: 'p-disabled-cancel', transform: convertToBoolean }]
             }], info: [{
@@ -26342,7 +26529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
             }], retry: [{
                 type: Output,
                 args: ['p-retry']
-            }], indeterminate: [{
+            }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-shape", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-radius", required: false }] }], indeterminate: [{
                 type: Input,
                 args: ['p-indeterminate']
             }], value: [{
@@ -26384,10 +26571,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  *   <file name="sample-po-progress-publication/sample-po-progress-publication.component.html"> </file>
  *   <file name="sample-po-progress-publication/sample-po-progress-publication.component.ts"> </file>
  * </example>
+ *
+ * <example name="po-progress-circle" title="PO Progress Circle">
+ *   <file name="sample-po-progress-circle/sample-po-progress-circle.component.html"> </file>
+ *   <file name="sample-po-progress-circle/sample-po-progress-circle.component.ts"> </file>
+ *  <file name="sample-po-progress-circle/sample-po-progress-circle.component.css"> </file>
+ * </example>
+ *
  */
 class PoProgressComponent extends PoProgressBaseComponent {
     language;
     literals;
+    elementRef = inject(ElementRef);
+    resizeObserver;
+    observeTarget = null;
     get isAllowCancel() {
         return !!this.cancel.observers.length && this.status !== PoProgressStatus.Success;
     }
@@ -26408,11 +26605,44 @@ class PoProgressComponent extends PoProgressBaseComponent {
     }
     poLanguageService = inject(PoLanguageService);
     router = inject(Router);
+    parentSize = signal(0, ...(ngDevMode ? [{ debugName: "parentSize" }] : /* istanbul ignore next */ []));
     ngOnInit() {
         this.language = this.poLanguageService.getShortLanguage();
         this.literals = {
             ...poProgressLiterals[this.language]
         };
+        if (this.shape() === 'circle') {
+            const parent = this.elementRef.nativeElement.parentElement;
+            if (parent) {
+                if (this.hasAllocatedHeight(parent)) {
+                    this.measureAndSetParentSize(parent);
+                    this.observeTarget = parent;
+                }
+                else {
+                    const constrained = this.findConstrainedAncestor(parent);
+                    if (this.hasExplicitHeight(constrained)) {
+                        this.measureAndSetParentSize(constrained);
+                        this.observeTarget = constrained;
+                    }
+                }
+            }
+        }
+    }
+    ngAfterViewInit() {
+        if (this.shape() !== 'circle' || !this.observeTarget) {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(entries => {
+            const { width, height } = entries[0].contentRect;
+            const size = Math.min(width, height);
+            if (size > 0) {
+                this.parentSize.set(size);
+            }
+        });
+        this.resizeObserver.observe(this.observeTarget);
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
     }
     emitCancellation() {
         this.cancel.emit(this.status);
@@ -26435,12 +26665,51 @@ class PoProgressComponent extends PoProgressBaseComponent {
                 : true;
         }
     }
+    hasExplicitHeight(element) {
+        const h = element.style.height;
+        return !!h;
+    }
+    hasAllocatedHeight(element) {
+        const parent = element.parentElement;
+        if (!parent) {
+            return false;
+        }
+        return this.hasExplicitHeight(parent);
+    }
+    measureAndSetParentSize(element) {
+        const computedStyle = getComputedStyle(element);
+        const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
+        const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
+        const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
+        const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
+        const width = element.clientWidth - paddingLeft - paddingRight;
+        const height = element.clientHeight - paddingTop - paddingBottom;
+        const size = Math.min(width, height);
+        if (size > 0) {
+            this.parentSize.set(size);
+        }
+    }
+    findConstrainedAncestor(start) {
+        let element = start;
+        let depth = 0;
+        while (element && depth < 10) {
+            if (this.hasExplicitHeight(element)) {
+                return element;
+            }
+            if (!element.parentElement) {
+                break;
+            }
+            element = element.parentElement;
+            depth++;
+        }
+        return start;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PoProgressComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: PoProgressComponent, isStandalone: false, selector: "po-progress", usesInheritance: true, ngImport: i0, template: "<div class=\"po-progress\" [ngClass]=\"statusClass\">\n  @if (text) {\n    <div class=\"po-progress-description\">\n      <po-label [p-label]=\"text\"></po-label>\n    </div>\n  }\n\n  <po-progress-bar\n    class=\"po-progress-bar po-progress-bar-{{ size }}\"\n    [p-indeterminate]=\"indeterminate\"\n    [p-value]=\"value\"\n  >\n  </po-progress-bar>\n\n  <div class=\"po-progress-info\">\n    <div class=\"po-progress-info-left\">\n      @if (infoIcon) {\n        <po-icon [p-icon]=\"infoIcon\" [class.po-progress-info-icon-error]=\"status === 'error'\"></po-icon>\n      }\n      @if (isAllowInfoError) {\n        <po-icon p-icon=\"ICON_EXCLAMATION\" class=\"po-progress-info-icon-error\"></po-icon>\n      }\n      @if (info) {\n        <span class=\"po-progress-info-text\" [class.po-progress-info-text-error]=\"status === 'error'\">{{ info }}</span>\n      }\n    </div>\n    <div class=\"po-progress-info-right\">\n      @if (showPercentage && !indeterminate) {\n        <span>{{ value }}%</span>\n      }\n\n      @if (isAllowRetry) {\n        <po-button\n          p-icon=\"ICON_REFRESH\"\n          (p-click)=\"emitRetry()\"\n          [p-aria-label]=\"literals.retry\"\n          p-kind=\"tertiary\"\n          [p-size]=\"sizeActions\"\n        ></po-button>\n      }\n\n      @if (isActionVisible(customAction)) {\n        <po-button\n          class=\"po-progress-custom-button\"\n          [p-danger]=\"customAction.type === 'danger'\"\n          [p-disabled]=\"actionIsDisabled(customAction)\"\n          [p-label]=\"customAction.label || ''\"\n          [p-icon]=\"customAction.icon\"\n          [p-size]=\"sizeActions\"\n          (p-click)=\"callAction()\"\n        >\n        </po-button>\n      }\n\n      @if (isAllowCancel) {\n        <po-button\n          p-icon=\"ICON_CLOSE\"\n          (p-click)=\"emitCancellation()\"\n          p-kind=\"secondary\"\n          [p-disabled]=\"disabledCancel\"\n          [p-aria-label]=\"literals.cancel\"\n          [p-danger]=\"true\"\n          [p-size]=\"sizeActions\"\n        ></po-button>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoLabelComponent, selector: "po-label", inputs: ["p-disabled", "p-field", "p-for", "p-label", "p-requirement", "p-text-wrap"] }, { kind: "component", type: PoProgressBarComponent, selector: "po-progress-bar", inputs: ["p-indeterminate", "p-value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: PoProgressComponent, isStandalone: false, selector: "po-progress", usesInheritance: true, ngImport: i0, template: "<div class=\"po-progress\" [ngClass]=\"statusClass\">\n  @if (shape() === 'bar') {\n    @if (text) {\n      <div class=\"po-progress-description\">\n        <po-label [p-label]=\"text\"></po-label>\n      </div>\n    }\n    <po-progress-bar\n      class=\"po-progress-bar po-progress-bar-{{ size }}\"\n      [p-aria-label]=\"ariaLabel || text\"\n      [p-indeterminate]=\"indeterminate\"\n      [p-value]=\"value\"\n    >\n    </po-progress-bar>\n\n    <div class=\"po-progress-info\">\n      <div class=\"po-progress-info-left\">\n        @if (infoIcon) {\n          <po-icon [p-icon]=\"infoIcon\" [class.po-progress-info-icon-error]=\"status === 'error'\"></po-icon>\n        }\n        @if (isAllowInfoError) {\n          <po-icon p-icon=\"ICON_EXCLAMATION\" class=\"po-progress-info-icon-error\"></po-icon>\n        }\n        @if (info) {\n          <span class=\"po-progress-info-text\" [class.po-progress-info-text-error]=\"status === 'error'\">{{ info }}</span>\n        }\n      </div>\n\n      <div class=\"po-progress-info-right\">\n        @if (showPercentage && !indeterminate) {\n          <span>{{ value }}%</span>\n        }\n\n        @if (isAllowRetry) {\n          <po-button\n            p-icon=\"ICON_REFRESH\"\n            (p-click)=\"emitRetry()\"\n            [p-aria-label]=\"literals.retry\"\n            p-kind=\"tertiary\"\n            [p-size]=\"sizeActions\"\n          ></po-button>\n        }\n\n        @if (isActionVisible(customAction)) {\n          <po-button\n            class=\"po-progress-custom-button\"\n            [p-danger]=\"customAction.type === 'danger'\"\n            [p-disabled]=\"actionIsDisabled(customAction)\"\n            [p-label]=\"customAction.label || ''\"\n            [p-icon]=\"customAction.icon\"\n            [p-size]=\"sizeActions\"\n            (p-click)=\"callAction()\"\n          >\n          </po-button>\n        }\n\n        @if (isAllowCancel) {\n          <po-button\n            p-icon=\"ICON_CLOSE\"\n            (p-click)=\"emitCancellation()\"\n            p-kind=\"secondary\"\n            [p-disabled]=\"disabledCancel\"\n            [p-aria-label]=\"literals.cancel\"\n            [p-danger]=\"true\"\n            [p-size]=\"sizeActions\"\n          ></po-button>\n        }\n      </div>\n    </div>\n  }\n\n  @if (shape() === 'circle') {\n    <po-progress-circle\n      class=\"po-progress-circle po-progress-circle-{{ size }}\"\n      [p-aria-label]=\"ariaLabel || text\"\n      [p-indeterminate]=\"indeterminate\"\n      [p-value]=\"value\"\n      [p-size]=\"size\"\n      [p-status]=\"status\"\n      [p-show-percentage]=\"showPercentage\"\n      [p-radius]=\"radius()\"\n      [p-parent-size]=\"parentSize()\"\n    >\n    </po-progress-circle>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoLabelComponent, selector: "po-label", inputs: ["p-disabled", "p-field", "p-for", "p-label", "p-requirement", "p-text-wrap"] }, { kind: "component", type: PoProgressCircleComponent, selector: "po-progress-circle", inputs: ["p-indeterminate", "p-show-percentage", "p-size", "p-status", "p-aria-label", "p-value", "p-radius", "p-parent-size"] }, { kind: "component", type: PoProgressBarComponent, selector: "po-progress-bar", inputs: ["p-aria-label", "p-indeterminate", "p-value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PoProgressComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-progress', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"po-progress\" [ngClass]=\"statusClass\">\n  @if (text) {\n    <div class=\"po-progress-description\">\n      <po-label [p-label]=\"text\"></po-label>\n    </div>\n  }\n\n  <po-progress-bar\n    class=\"po-progress-bar po-progress-bar-{{ size }}\"\n    [p-indeterminate]=\"indeterminate\"\n    [p-value]=\"value\"\n  >\n  </po-progress-bar>\n\n  <div class=\"po-progress-info\">\n    <div class=\"po-progress-info-left\">\n      @if (infoIcon) {\n        <po-icon [p-icon]=\"infoIcon\" [class.po-progress-info-icon-error]=\"status === 'error'\"></po-icon>\n      }\n      @if (isAllowInfoError) {\n        <po-icon p-icon=\"ICON_EXCLAMATION\" class=\"po-progress-info-icon-error\"></po-icon>\n      }\n      @if (info) {\n        <span class=\"po-progress-info-text\" [class.po-progress-info-text-error]=\"status === 'error'\">{{ info }}</span>\n      }\n    </div>\n    <div class=\"po-progress-info-right\">\n      @if (showPercentage && !indeterminate) {\n        <span>{{ value }}%</span>\n      }\n\n      @if (isAllowRetry) {\n        <po-button\n          p-icon=\"ICON_REFRESH\"\n          (p-click)=\"emitRetry()\"\n          [p-aria-label]=\"literals.retry\"\n          p-kind=\"tertiary\"\n          [p-size]=\"sizeActions\"\n        ></po-button>\n      }\n\n      @if (isActionVisible(customAction)) {\n        <po-button\n          class=\"po-progress-custom-button\"\n          [p-danger]=\"customAction.type === 'danger'\"\n          [p-disabled]=\"actionIsDisabled(customAction)\"\n          [p-label]=\"customAction.label || ''\"\n          [p-icon]=\"customAction.icon\"\n          [p-size]=\"sizeActions\"\n          (p-click)=\"callAction()\"\n        >\n        </po-button>\n      }\n\n      @if (isAllowCancel) {\n        <po-button\n          p-icon=\"ICON_CLOSE\"\n          (p-click)=\"emitCancellation()\"\n          p-kind=\"secondary\"\n          [p-disabled]=\"disabledCancel\"\n          [p-aria-label]=\"literals.cancel\"\n          [p-danger]=\"true\"\n          [p-size]=\"sizeActions\"\n        ></po-button>\n      }\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'po-progress', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"po-progress\" [ngClass]=\"statusClass\">\n  @if (shape() === 'bar') {\n    @if (text) {\n      <div class=\"po-progress-description\">\n        <po-label [p-label]=\"text\"></po-label>\n      </div>\n    }\n    <po-progress-bar\n      class=\"po-progress-bar po-progress-bar-{{ size }}\"\n      [p-aria-label]=\"ariaLabel || text\"\n      [p-indeterminate]=\"indeterminate\"\n      [p-value]=\"value\"\n    >\n    </po-progress-bar>\n\n    <div class=\"po-progress-info\">\n      <div class=\"po-progress-info-left\">\n        @if (infoIcon) {\n          <po-icon [p-icon]=\"infoIcon\" [class.po-progress-info-icon-error]=\"status === 'error'\"></po-icon>\n        }\n        @if (isAllowInfoError) {\n          <po-icon p-icon=\"ICON_EXCLAMATION\" class=\"po-progress-info-icon-error\"></po-icon>\n        }\n        @if (info) {\n          <span class=\"po-progress-info-text\" [class.po-progress-info-text-error]=\"status === 'error'\">{{ info }}</span>\n        }\n      </div>\n\n      <div class=\"po-progress-info-right\">\n        @if (showPercentage && !indeterminate) {\n          <span>{{ value }}%</span>\n        }\n\n        @if (isAllowRetry) {\n          <po-button\n            p-icon=\"ICON_REFRESH\"\n            (p-click)=\"emitRetry()\"\n            [p-aria-label]=\"literals.retry\"\n            p-kind=\"tertiary\"\n            [p-size]=\"sizeActions\"\n          ></po-button>\n        }\n\n        @if (isActionVisible(customAction)) {\n          <po-button\n            class=\"po-progress-custom-button\"\n            [p-danger]=\"customAction.type === 'danger'\"\n            [p-disabled]=\"actionIsDisabled(customAction)\"\n            [p-label]=\"customAction.label || ''\"\n            [p-icon]=\"customAction.icon\"\n            [p-size]=\"sizeActions\"\n            (p-click)=\"callAction()\"\n          >\n          </po-button>\n        }\n\n        @if (isAllowCancel) {\n          <po-button\n            p-icon=\"ICON_CLOSE\"\n            (p-click)=\"emitCancellation()\"\n            p-kind=\"secondary\"\n            [p-disabled]=\"disabledCancel\"\n            [p-aria-label]=\"literals.cancel\"\n            [p-danger]=\"true\"\n            [p-size]=\"sizeActions\"\n          ></po-button>\n        }\n      </div>\n    </div>\n  }\n\n  @if (shape() === 'circle') {\n    <po-progress-circle\n      class=\"po-progress-circle po-progress-circle-{{ size }}\"\n      [p-aria-label]=\"ariaLabel || text\"\n      [p-indeterminate]=\"indeterminate\"\n      [p-value]=\"value\"\n      [p-size]=\"size\"\n      [p-status]=\"status\"\n      [p-show-percentage]=\"showPercentage\"\n      [p-radius]=\"radius()\"\n      [p-parent-size]=\"parentSize()\"\n    >\n    </po-progress-circle>\n  }\n</div>\n" }]
         }] });
 
 /**
@@ -26450,13 +26719,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  */
 class PoProgressModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PoProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: PoProgressModule, declarations: [PoProgressBarComponent, PoProgressComponent], imports: [CommonModule, PoButtonModule, PoIconModule, PoLabelModule], exports: [PoProgressComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: PoProgressModule, declarations: [PoProgressBarComponent, PoProgressComponent], imports: [CommonModule, PoButtonModule, PoIconModule, PoLabelModule, PoProgressCircleComponent], exports: [PoProgressComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PoProgressModule, imports: [CommonModule, PoButtonModule, PoIconModule, PoLabelModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PoProgressModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, PoButtonModule, PoIconModule, PoLabelModule],
+                    imports: [CommonModule, PoButtonModule, PoIconModule, PoLabelModule, PoProgressCircleComponent],
                     exports: [PoProgressComponent],
                     declarations: [PoProgressBarComponent, PoProgressComponent]
                 }]
@@ -66451,5 +66720,5 @@ function validateProperty(property, target) {
  * Generated bundle index. Do not edit.
  */
 
-export { AnimaliaIconDictionary, ForceBooleanComponentEnum, ForceOptionComponentEnum, I18N_CONFIG, InputBoolean, InputRequired, LOADING_ICON_COMPONENT, PO_CALENDAR_DEFAULT_RANGE_PRESETS, PO_CONTROL_POSITIONS, PoAccordionComponent, PoAccordionItemComponent, PoAccordionModule, PoActiveOverlayModule, PoActiveOverlayService, PoAvatarComponent, PoAvatarModule, PoBadgeComponent, PoBadgeModule, PoBreadcrumbComponent, PoBreadcrumbModule, PoButtonComponent, PoButtonGroupComponent, PoButtonGroupModule, PoButtonGroupToggle, PoButtonKind, PoButtonModule, PoButtonSize, PoButtonType, PoCalendarComponent, PoCalendarMode, PoCalendarModule, PoChartComponent, PoChartLabelFormat, PoChartModule, PoChartType, PoCheckboxComponent, PoCheckboxGroupComponent, PoCheckboxGroupModule, PoCheckboxModule, PoCheckboxSize, PoCleanComponent, PoCleanModule, PoColorPaletteModule, PoColorPaletteService, PoComboComponent, PoComboFilterMode, PoComboModule, PoComboOptionTemplateDirective, PoComponentInjectorModule, PoComponentInjectorService, PoComponentsModule, PoContainerComponent, PoContainerModule, PoContextMenuComponent, PoContextMenuModule, PoContextTabButtonComponent, PoContextTabsComponent, PoContextTabsModule, PoControlPositionModule, PoDateService, PoDateTimeModule, PoDatepickerComponent, PoDatepickerIsoFormat, PoDatepickerModule, PoDatepickerRangeComponent, PoDecimalComponent, PoDialogComponent, PoDialogModule, PoDialogService, PoDialogType, PoDirectivesModule, PoDisclaimerComponent, PoDisclaimerGroupComponent, PoDisclaimerGroupModule, PoDisclaimerModule, PoDividerComponent, PoDividerModule, PoDividerSize, PoDropdownComponent, PoDropdownModule, PoDynamicContainerComponent, PoDynamicFieldType, PoDynamicFormComponent, PoDynamicModule, PoDynamicSharedBase, PoDynamicViewComponent, PoEmailComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoFieldContainerModule, PoFieldModule, PoGaugeComponent, PoGaugeModule, PoGridComponent, PoGridModule, PoGuardsModule, PoHeaderComponent, PoHeaderModule, PoHelperComponent, PoHelperModule, PoHttpInterceptorModule, PoHttpInterceptorService, PoHttpRequestInterceptorService, PoHttpRequestModule, PoI18nModule, PoI18nPipe, PoI18nService, PoIconComponent, PoIconModule, PoImageComponent, PoImageModule, PoInfoComponent, PoInfoModule, PoInfoOrientation, PoInputComponent, PoInterceptorsModule, PoItemListComponent, PoLabelComponent, PoLabelModule, PoLanguageModule, PoLanguageService, PoLinkComponent, PoLinkModule, PoListBoxComponent, PoListBoxModule, PoListViewComponent, PoListViewContentTemplateDirective, PoListViewDetailTemplateDirective, PoListViewModule, PoLoadingComponent, PoLoadingIconComponent, PoLoadingModule, PoLoadingOverlayComponent, PoLoginComponent, PoLogoComponent, PoLogoModule, PoLookupComponent, PoLookupModalComponent, PoMask, PoMediaQueryModule, PoMediaQueryService, PoMenuComponent, PoMenuGlobalService, PoMenuHeaderTemplateDirective, PoMenuModule, PoMenuPanelComponent, PoMenuPanelModule, PoModalComponent, PoModalFooterComponent, PoModalModule, PoModule, PoMultiselectComponent, PoMultiselectFilterMode, PoMultiselectOptionTemplateDirective, PoNavbarComponent, PoNavbarModule, PoNotificationModule, PoNotificationService, PoNumberComponent, PoOverlayComponent, PoOverlayModule, PoPageDefaultComponent, PoPageDetailComponent, PoPageEditComponent, PoPageListComponent, PoPageModule, PoPageSlideComponent, PoPageSlideFooterComponent, PoPageSlideModule, PoPasswordComponent, PoPipesModule, PoPopoverComponent, PoPopoverModule, PoPopupComponent, PoPopupModule, PoProgressComponent, PoProgressModule, PoProgressSize, PoProgressStatus, PoRadioComponent, PoRadioGroupComponent, PoRadioGroupModule, PoRadioModule, PoRichTextComponent, PoRichTextToolbarActions, PoSearchComponent, PoSearchFilterMode, PoSearchListComponent, PoSearchModule, PoSelectComponent, PoServicesModule, PoSkeletonAnimation, PoSkeletonComponent, PoSkeletonModule, PoSkeletonSize, PoSkeletonType, PoSkeletonVariant, PoSlideComponent, PoSlideContentTemplateDirective, PoSlideModule, PoStepComponent, PoStepperComponent, PoStepperModule, PoStepperOrientation, PoStepperStatus, PoSwitchComponent, PoSwitchLabelPosition, PoSwitchModule, PoTabButtonComponent, PoTabComponent, PoTabDropdownComponent, PoTableCellTemplateDirective, PoTableColumnFrozenDirective, PoTableColumnSortType, PoTableColumnSpacing, PoTableColumnTemplateDirective, PoTableComponent, PoTableModule, PoTableRowTemplateArrowDirection, PoTableRowTemplateDirective, PoTabsComponent, PoTabsModule, PoTabsService, PoTagComponent, PoTagModule, PoTagOrientation, PoTagType, PoTextareaComponent, PoThemeA11yEnum, PoThemeModule, PoThemeService, PoThemeTypeEnum, PoTimeModule, PoTimePipe, PoTimepickerComponent, PoTimepickerModelFormat, PoTimepickerModule, PoTimerBaseComponent, PoTimerComponent, PoTimerFormat, PoTimerModule, PoToasterComponent, PoToasterMode, PoToasterModule, PoToasterOrientation, PoToasterType, PoToolbarComponent, PoToolbarModule, PoTooltipDirective, PoTooltipModule, PoTreeViewComponent, PoTreeViewModule, PoUploadComponent, PoUploadFile, PoUploadStatus, PoUrlComponent, PoWidgetComponent, PoWidgetModule, initializeLanguageDefault, mergePoI18nConfigs, poBreadcrumbLiterals, poChartLiteralsDefault, poDialogAlertLiteralsDefault, poDialogConfirmLiteralsDefault, poLanguageDefault, poLocaleDateSeparatorList, poLocaleDecimalSeparatorList, poLocaleDefault, poLocaleThousandSeparatorList, poLocales, poPageSlideLiteralsDefault, poTabsLiterals, poThemeDefault, poThemeDefaultAA, poThemeDefaultAAA, poThemeDefaultActions, poThemeDefaultActionsDark, poThemeDefaultBrands, poThemeDefaultBrandsDark, poThemeDefaultCategoricals, poThemeDefaultCategoricalsAA, poThemeDefaultCategoricalsDark, poThemeDefaultCategoricalsDarkAA, poThemeDefaultCategoricalsOverlayDark, poThemeDefaultCategoricalsOverlayDarkAA, poThemeDefaultDark, poThemeDefaultDarkValues, poThemeDefaultDarkValuesAA, poThemeDefaultFeedback, poThemeDefaultFeedbackDark, poThemeDefaultLight, poThemeDefaultLightValues, poThemeDefaultLightValuesAA, poThemeDefaultNeutrals, poThemeDefaultNeutralsDark, poThemeDefaultOverlayCategoricals, poThemeDefaultOverlayCategoricalsAA, poToasterLiterals, returnPoI18nService };
+export { AnimaliaIconDictionary, ForceBooleanComponentEnum, ForceOptionComponentEnum, I18N_CONFIG, InputBoolean, InputRequired, LOADING_ICON_COMPONENT, PO_CALENDAR_DEFAULT_RANGE_PRESETS, PO_CONTROL_POSITIONS, PoAccordionComponent, PoAccordionItemComponent, PoAccordionModule, PoActiveOverlayModule, PoActiveOverlayService, PoAvatarComponent, PoAvatarModule, PoBadgeComponent, PoBadgeModule, PoBreadcrumbComponent, PoBreadcrumbModule, PoButtonComponent, PoButtonGroupComponent, PoButtonGroupModule, PoButtonGroupToggle, PoButtonKind, PoButtonModule, PoButtonSize, PoButtonType, PoCalendarComponent, PoCalendarMode, PoCalendarModule, PoChartComponent, PoChartLabelFormat, PoChartModule, PoChartType, PoCheckboxComponent, PoCheckboxGroupComponent, PoCheckboxGroupModule, PoCheckboxModule, PoCheckboxSize, PoCleanComponent, PoCleanModule, PoColorPaletteModule, PoColorPaletteService, PoComboComponent, PoComboFilterMode, PoComboModule, PoComboOptionTemplateDirective, PoComponentInjectorModule, PoComponentInjectorService, PoComponentsModule, PoContainerComponent, PoContainerModule, PoContextMenuComponent, PoContextMenuModule, PoContextTabButtonComponent, PoContextTabsComponent, PoContextTabsModule, PoControlPositionModule, PoDateService, PoDateTimeModule, PoDatepickerComponent, PoDatepickerIsoFormat, PoDatepickerModule, PoDatepickerRangeComponent, PoDecimalComponent, PoDialogComponent, PoDialogModule, PoDialogService, PoDialogType, PoDirectivesModule, PoDisclaimerComponent, PoDisclaimerGroupComponent, PoDisclaimerGroupModule, PoDisclaimerModule, PoDividerComponent, PoDividerModule, PoDividerSize, PoDropdownComponent, PoDropdownModule, PoDynamicContainerComponent, PoDynamicFieldType, PoDynamicFormComponent, PoDynamicModule, PoDynamicSharedBase, PoDynamicViewComponent, PoEmailComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoFieldContainerModule, PoFieldModule, PoGaugeComponent, PoGaugeModule, PoGridComponent, PoGridModule, PoGuardsModule, PoHeaderComponent, PoHeaderModule, PoHelperComponent, PoHelperModule, PoHttpInterceptorModule, PoHttpInterceptorService, PoHttpRequestInterceptorService, PoHttpRequestModule, PoI18nModule, PoI18nPipe, PoI18nService, PoIconComponent, PoIconModule, PoImageComponent, PoImageModule, PoInfoComponent, PoInfoModule, PoInfoOrientation, PoInputComponent, PoInterceptorsModule, PoItemListComponent, PoLabelComponent, PoLabelModule, PoLanguageModule, PoLanguageService, PoLinkComponent, PoLinkModule, PoListBoxComponent, PoListBoxModule, PoListViewComponent, PoListViewContentTemplateDirective, PoListViewDetailTemplateDirective, PoListViewModule, PoLoadingComponent, PoLoadingIconComponent, PoLoadingModule, PoLoadingOverlayComponent, PoLoginComponent, PoLogoComponent, PoLogoModule, PoLookupComponent, PoLookupModalComponent, PoMask, PoMediaQueryModule, PoMediaQueryService, PoMenuComponent, PoMenuGlobalService, PoMenuHeaderTemplateDirective, PoMenuModule, PoMenuPanelComponent, PoMenuPanelModule, PoModalComponent, PoModalFooterComponent, PoModalModule, PoModule, PoMultiselectComponent, PoMultiselectFilterMode, PoMultiselectOptionTemplateDirective, PoNavbarComponent, PoNavbarModule, PoNotificationModule, PoNotificationService, PoNumberComponent, PoOverlayComponent, PoOverlayModule, PoPageDefaultComponent, PoPageDetailComponent, PoPageEditComponent, PoPageListComponent, PoPageModule, PoPageSlideComponent, PoPageSlideFooterComponent, PoPageSlideModule, PoPasswordComponent, PoPipesModule, PoPopoverComponent, PoPopoverModule, PoPopupComponent, PoPopupModule, PoProgressComponent, PoProgressModule, PoProgressShape, PoProgressSize, PoProgressStatus, PoRadioComponent, PoRadioGroupComponent, PoRadioGroupModule, PoRadioModule, PoRichTextComponent, PoRichTextToolbarActions, PoSearchComponent, PoSearchFilterMode, PoSearchListComponent, PoSearchModule, PoSelectComponent, PoServicesModule, PoSkeletonAnimation, PoSkeletonComponent, PoSkeletonModule, PoSkeletonSize, PoSkeletonType, PoSkeletonVariant, PoSlideComponent, PoSlideContentTemplateDirective, PoSlideModule, PoStepComponent, PoStepperComponent, PoStepperModule, PoStepperOrientation, PoStepperStatus, PoSwitchComponent, PoSwitchLabelPosition, PoSwitchModule, PoTabButtonComponent, PoTabComponent, PoTabDropdownComponent, PoTableCellTemplateDirective, PoTableColumnFrozenDirective, PoTableColumnSortType, PoTableColumnSpacing, PoTableColumnTemplateDirective, PoTableComponent, PoTableModule, PoTableRowTemplateArrowDirection, PoTableRowTemplateDirective, PoTabsComponent, PoTabsModule, PoTabsService, PoTagComponent, PoTagModule, PoTagOrientation, PoTagType, PoTextareaComponent, PoThemeA11yEnum, PoThemeModule, PoThemeService, PoThemeTypeEnum, PoTimeModule, PoTimePipe, PoTimepickerComponent, PoTimepickerModelFormat, PoTimepickerModule, PoTimerBaseComponent, PoTimerComponent, PoTimerFormat, PoTimerModule, PoToasterComponent, PoToasterMode, PoToasterModule, PoToasterOrientation, PoToasterType, PoToolbarComponent, PoToolbarModule, PoTooltipDirective, PoTooltipModule, PoTreeViewComponent, PoTreeViewModule, PoUploadComponent, PoUploadFile, PoUploadStatus, PoUrlComponent, PoWidgetComponent, PoWidgetModule, initializeLanguageDefault, mergePoI18nConfigs, poBreadcrumbLiterals, poChartLiteralsDefault, poDialogAlertLiteralsDefault, poDialogConfirmLiteralsDefault, poLanguageDefault, poLocaleDateSeparatorList, poLocaleDecimalSeparatorList, poLocaleDefault, poLocaleThousandSeparatorList, poLocales, poPageSlideLiteralsDefault, poTabsLiterals, poThemeDefault, poThemeDefaultAA, poThemeDefaultAAA, poThemeDefaultActions, poThemeDefaultActionsDark, poThemeDefaultBrands, poThemeDefaultBrandsDark, poThemeDefaultCategoricals, poThemeDefaultCategoricalsAA, poThemeDefaultCategoricalsDark, poThemeDefaultCategoricalsDarkAA, poThemeDefaultCategoricalsOverlayDark, poThemeDefaultCategoricalsOverlayDarkAA, poThemeDefaultDark, poThemeDefaultDarkValues, poThemeDefaultDarkValuesAA, poThemeDefaultFeedback, poThemeDefaultFeedbackDark, poThemeDefaultLight, poThemeDefaultLightValues, poThemeDefaultLightValuesAA, poThemeDefaultNeutrals, poThemeDefaultNeutralsDark, poThemeDefaultOverlayCategoricals, poThemeDefaultOverlayCategoricalsAA, poToasterLiterals, returnPoI18nService };
 //# sourceMappingURL=po-ui-ng-components.mjs.map