@po-ui/ng-components 21.11.0 → 21.12.0

package/lib/components/po-chart/interfaces/po-chart-options.interface.d.ts

@@ -122,6 +122,21 @@ export interface PoChartOptions {
      * @default `center`
      */
     legendPosition?: 'left' | 'center' | 'right';
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tipo da legenda.
+     *
+     * - `plain`: exibe todas as legendas de forma estática.
+     * - `scroll`: habilita rolagem quando a quantidade de legendas exceder o espaço disponível no gráfico.
+     *
+     * > Propriedade inválida para o gráfico do tipo `Gauge`.
+     *
+     * @default `plain`
+     */
+    legendType?: 'plain' | 'scroll';
     /**
      * @optional
      *

package/lib/components/po-chart/po-chart-base.component.d.ts

@@ -52,6 +52,8 @@ import { PoPopupAction } from '../po-popup';
  * | `--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)`                    |

package/lib/components/po-progress/enums/po-progress-shape.enum.d.ts

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

package/lib/components/po-progress/enums/po-progress-status.enum.d.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 declare enum PoProgressStatus {
     /** Define o status `default` para a barra de progresso. */

package/lib/components/po-progress/index.d.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';
 export * from './interfaces/';

package/lib/components/po-progress/po-progress-bar/po-progress-bar.component.d.ts

@@ -1,4 +1,5 @@
 export declare class PoProgressBarComponent {
+    ariaLabel?: string;
     indeterminate: boolean;
     value: number;
     get valueScale(): string;

package/lib/components/po-progress/po-progress-base.component.d.ts

@@ -25,9 +25,22 @@ import { PoProgressAction } from './interfaces';
  * | **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)`                   |
  *
  */
 export declare 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?: string;
     /**
      * @optional
      *
@@ -38,6 +51,8 @@ export declare 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: boolean;
@@ -47,6 +62,8 @@ export declare 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?: string;
     /**
@@ -57,6 +74,8 @@ export declare 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?: string | TemplateRef<void>;
     /**
@@ -76,6 +95,8 @@ export declare class PoProgressBaseComponent {
      * @description
      *
      * Texto principal que aparecerá abaixo da barra de progresso no lado esquerdo.
+     *
+     * > Não compatível com `p-shape="circle"`.
      */
     text?: string;
     /**
@@ -92,6 +113,8 @@ export declare 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
@@ -128,6 +151,8 @@ export declare 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:**
      *
@@ -168,6 +193,8 @@ export declare 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: EventEmitter<any>;
     /**
@@ -179,6 +206,8 @@ export declare 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: EventEmitter<any>;
     private _indeterminate?;
@@ -186,6 +215,43 @@ export declare class PoProgressBaseComponent {
     private _size;
     private _sizeActions;
     private _initialSizeActions;
+    /**
+     * @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: import("@angular/core").InputSignalWithTransform<string, string>;
+    /**
+     * @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: import("@angular/core").InputSignalWithTransform<number, number>;
     /**
      * @optional
      *
@@ -241,6 +307,8 @@ export declare 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);
@@ -252,6 +320,8 @@ export declare 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: boolean;

package/lib/components/po-progress/po-progress-circle/po-progress-circle.component.d.ts

@@ -0,0 +1,31 @@
+export declare class PoProgressCircleComponent {
+    indeterminate: import("@angular/core").InputSignalWithTransform<boolean, boolean>;
+    showPercentage: import("@angular/core").InputSignalWithTransform<boolean, boolean>;
+    size: import("@angular/core").InputSignalWithTransform<string, string>;
+    status: import("@angular/core").InputSignalWithTransform<string, string>;
+    ariaLabelInput: import("@angular/core").InputSignal<string>;
+    ariaLabel: import("@angular/core").Signal<string>;
+    value: import("@angular/core").InputSignal<number>;
+    radius: import("@angular/core").InputSignal<number>;
+    parentSize: import("@angular/core").InputSignal<number>;
+    strokeWidth: import("@angular/core").Signal<4 | 8>;
+    /**
+     * 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: import("@angular/core").Signal<number>;
+    hasCenterContent: import("@angular/core").Signal<boolean>;
+    effectiveRadius: import("@angular/core").Signal<number>;
+    viewBoxSize: import("@angular/core").Signal<number>;
+    center: import("@angular/core").Signal<number>;
+    circumference: import("@angular/core").Signal<number>;
+    dashOffset: import("@angular/core").Signal<number>;
+    naturalSize: import("@angular/core").Signal<string>;
+}

package/lib/components/po-progress/po-progress.component.d.ts

@@ -1,4 +1,4 @@
-import { OnInit } from '@angular/core';
+import { AfterViewInit, OnDestroy, OnInit } from '@angular/core';
 import { PoProgressBaseComponent } from './po-progress-base.component';
 /**
  * @docsExtends PoProgressBaseComponent
@@ -19,20 +19,37 @@ import { PoProgressBaseComponent } from './po-progress-base.component';
  *   <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>
+ *
  */
-export declare class PoProgressComponent extends PoProgressBaseComponent implements OnInit {
+export declare class PoProgressComponent extends PoProgressBaseComponent implements OnInit, AfterViewInit, OnDestroy {
     language: any;
     literals: any;
+    private readonly elementRef;
+    private resizeObserver?;
+    private observeTarget;
     get isAllowCancel(): boolean;
     get isAllowInfoError(): boolean;
     get isAllowRetry(): boolean;
     get statusClass(): string;
     private readonly poLanguageService;
     private readonly router;
+    parentSize: import("@angular/core").WritableSignal<number>;
     ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     emitCancellation(): void;
     emitRetry(): void;
     actionIsDisabled(action: any): any;
     callAction(): void;
     isActionVisible(action: any): any;
+    private hasExplicitHeight;
+    private hasAllocatedHeight;
+    private measureAndSetParentSize;
+    private findConstrainedAncestor;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@po-ui/ng-components",
-  "version": "21.11.0",
+  "version": "21.12.0",
   "description": "PO UI - Components",
   "author": "PO UI",
   "license": "MIT",
@@ -22,8 +22,8 @@
   },
   "dependencies": {
     "@angular/cdk": "~21.2.4",
-    "@po-ui/style": "21.11.0",
-    "@po-ui/ng-schematics": "21.11.0",
+    "@po-ui/style": "21.12.0",
+    "@po-ui/ng-schematics": "21.12.0",
     "echarts": "^5.6.0",
     "tslib": "^2.6.2"
   },
@@ -38,7 +38,7 @@
     "@angular/platform-browser-dynamic": "^21",
     "@angular/router": "^21",
     "@angular-devkit/schematics": "^21",
-    "@po-ui/style": "21.11.0",
+    "@po-ui/style": "21.12.0",
     "rxjs": "~7.8.1",
     "zone.js": "~0.15.0"
   },

package/schematics/ng-add/index.js

@@ -18,7 +18,7 @@ function default_1(options) {
 }
 function addPoPackageAndInstall() {
     return (tree, context) => {
-        (0, package_config_1.addPackageToPackageJson)(tree, '@po-ui/ng-components', '21.11.0');
+        (0, package_config_1.addPackageToPackageJson)(tree, '@po-ui/ng-components', '21.12.0');
         // install packages
         context.addTask(new tasks_1.NodePackageInstallTask());
     };

package/schematics/ng-update/v14/index.js

@@ -6,7 +6,7 @@ const tasks_1 = require("@angular-devkit/schematics/tasks");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.11.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.12.0', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v15/index.js

@@ -11,7 +11,7 @@ const changes_1 = require("./changes");
 const httpClientModuleName = 'HttpClientModule';
 const httpClientModuleSourcePath = '@angular/common/http';
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.11.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.12.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v16/index.js

@@ -6,7 +6,7 @@ const tasks_1 = require("@angular-devkit/schematics/tasks");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.11.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.12.0', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v17/index.js

@@ -6,7 +6,7 @@ const tasks_1 = require("@angular-devkit/schematics/tasks");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.11.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.12.0', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v18/index.js

@@ -40,11 +40,11 @@ function main(options) {
             configureNewIcon.toLowerCase() === 'y' ||
             configureNewIcon.toLowerCase() === 'sim' ||
             configureNewIcon.toLowerCase() === '') {
-            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.11.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.12.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
         }
         else {
             return (0, schematics_1.chain)([
-                (0, package_config_1.updatePackageJson)('21.11.0', changes_1.updateDepedenciesVersion),
+                (0, package_config_1.updatePackageJson)('21.12.0', changes_1.updateDepedenciesVersion),
                 addImportOnly(options, [IconsDictionaryName, poIconDictionary], poModuleSourcePath),
                 addProviderToAppModule(options, newProviderDictionary),
                 updateAppConfigFileRule(),

package/schematics/ng-update/v19/index.js

@@ -40,11 +40,11 @@ function main(options) {
             configureNewIcon.toLowerCase() === 'y' ||
             configureNewIcon.toLowerCase() === 'sim' ||
             configureNewIcon.toLowerCase() === '') {
-            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.11.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.12.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
         }
         else {
             return (0, schematics_1.chain)([
-                (0, package_config_1.updatePackageJson)('21.11.0', changes_1.updateDepedenciesVersion),
+                (0, package_config_1.updatePackageJson)('21.12.0', changes_1.updateDepedenciesVersion),
                 addImportOnly(options, [IconsDictionaryName, poIconDictionary], poModuleSourcePath),
                 addProviderToAppModule(options, newProviderDictionary),
                 updateAppConfigFileRule(),

package/schematics/ng-update/v2/index.js

@@ -10,7 +10,7 @@ const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function updateToV2() {
     return (0, schematics_1.chain)([
-        updatePackageJson('21.11.0', changes_1.dependeciesChanges),
+        updatePackageJson('21.12.0', changes_1.dependeciesChanges),
         (0, replace_1.replaceInFile)('tslint.json', changes_1.tsLintReplaces),
         (0, replace_1.replaceInFile)('angular.json', changes_1.angularJsonReplaces),
         createUpgradeRule(),

package/schematics/ng-update/v20/index.js

@@ -40,11 +40,11 @@ function main(options) {
             configureNewIcon.toLowerCase() === 'y' ||
             configureNewIcon.toLowerCase() === 'sim' ||
             configureNewIcon.toLowerCase() === '') {
-            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.11.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.12.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
         }
         else {
             return (0, schematics_1.chain)([
-                (0, package_config_1.updatePackageJson)('21.11.0', changes_1.updateDepedenciesVersion),
+                (0, package_config_1.updatePackageJson)('21.12.0', changes_1.updateDepedenciesVersion),
                 addImportOnly(options, [IconsDictionaryName, poIconDictionary], poModuleSourcePath),
                 addProviderToAppModule(options, newProviderDictionary),
                 updateAppConfigFileRule(),

package/schematics/ng-update/v21/index.js

@@ -9,7 +9,7 @@ const project_1 = require("@po-ui/ng-schematics/project");
 const changes_1 = require("./changes");
 function main() {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
-        return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.11.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+        return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.12.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
     });
 }
 function default_1() {

package/schematics/ng-update/v3/index.js

@@ -7,7 +7,7 @@ const project_1 = require("@po-ui/ng-schematics/project");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function updateToV3() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.11.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.12.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v4/index.js

@@ -7,7 +7,7 @@ const project_1 = require("@po-ui/ng-schematics/project");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.11.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.12.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v5/index.js

@@ -7,7 +7,7 @@ const project_1 = require("@po-ui/ng-schematics/project");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.11.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.12.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v6/index.js

@@ -6,7 +6,7 @@ const tasks_1 = require("@angular-devkit/schematics/tasks");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.11.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.12.0', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {