@po-ui/ng-components 19.32.0 → 19.34.0

package/lib/services/po-theme/helpers/types/po-theme-dark-defaults-AA.constant.d.ts

@@ -53,6 +53,10 @@ declare const poThemeDefaultDarkValuesAA: {
         'po-select': {
             '--color-hover': string;
         };
+        '.po-listbox-group-header .po-tag': {
+            color: string;
+            'background-color': string;
+        };
     };
     onRoot: {
         '--color-caption-categorical-01': string;

package/lib/services/po-theme/helpers/types/po-theme-dark-defaults.constant.d.ts

@@ -72,6 +72,11 @@ declare const poThemeDefaultDarkValues: {
         'po-select': {
             '--color-hover': string;
         };
+        /** DROPDOWN */
+        '.po-listbox-group-header .po-tag': {
+            color: string;
+            'background-color': string;
+        };
     };
     onRoot: {
         '--color-neutral': string;

package/lib/services/po-theme/po-theme.module.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 /**
- * Módulo responsável por fornecer serviços relacionados ao tema PO.
+ * Módulo do serviço PoThemeService.
  */
 export declare class PoThemeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<PoThemeModule, never>;

package/lib/services/po-theme/po-theme.service.d.ts

@@ -1,4 +1,5 @@
 import { RendererFactory2 } from '@angular/core';
+import { PoDensityMode } from '../../enums/po-density-mode.enum';
 import { PoThemeA11yEnum } from './enum/po-theme-a11y.enum';
 import { PoThemeTypeEnum } from './enum/po-theme-type.enum';
 import { PoTheme, PoThemeActive } from './interfaces/po-theme.interface';
@@ -6,11 +7,20 @@ import * as i0 from "@angular/core";
 /**
  * @description
  *
- * O `PoThemeService` possibilita a personalização das cores do tema padrão do `PO-UI`, permitindo a alteração dos valores das variáveis de estilo usadas no CSS padrão.
+ * O serviço `PoThemeService` permite customizar as cores do tema padrão do `PO-UI` e definir o nível de acessibilidade
+ * mais adequado ao projeto.
  *
- * > Para saber mais sobre como customizar o tema padrão verifique o item [Customização de Temas usando o serviço PO-UI](guides/theme-service) na aba `Guias`.
+ * O nível **AAA** (padrão) garante maior contraste, áreas clicáveis amplas e espaçamentos maiores entre os elementos,
+ * enquanto o nível **AA** mantém a conformidade com as diretrizes de acessibilidade, mas com proporções mais equilibradas
+ * e contornos mais sutis.
  *
- * > Obs.: Não está documentado aqui e não indicamos a customização das cores de 'feedback' por motivos de acessibilidade e usabilidade.
+ * O serviço também possibilita configurar a **densidade de espaçamentos**, permitindo ajustar o espaço entre e dentro dos
+ * componentes. Essa configuração pode ser utilizada com qualquer nível de acessibilidade.
+ *
+ * > Observação: a customização das cores de `feedback` não é recomendada por motivos de acessibilidade e usabilidade.
+ *
+ * > Para saber mais sobre como customizar o tema padrão, consulte o item
+ * [Customização de Temas usando o serviço PO-UI](guides/theme-service) na aba `Guias`.
  */
 /**
  * @example
@@ -39,7 +49,8 @@ export declare class PoThemeService {
      * @param {PoTheme} themeConfig - Configuração de tema a ser aplicada ao componente.
      * @param {PoThemeTypeEnum} [themeType=PoThemeTypeEnum.light] - (Opcional) Tipo de tema, podendo ser 'light' (claro) ou 'dark' (escuro). O tema claro é o padrão.
      * @param {PoThemeA11yEnum} [a11yLevel=PoThemeA11yEnum.AAA] - (Opcional) Nível de acessibilidade dos componentes, podendo ser AA ou AAA. Padrão é AAA.
-     * @param {boolean} [persistPreference=true] - (Opcional) Define se a preferência de tema deve ser salva no localStorage para persistência. `true` para salvar, `false` para não salvar.
+     * @param {boolean} [persistPreference=true] - (Opcional) Define se a preferência de tema deve ser salva no
+     * localStorage para persistência. Por padrão é `true`, ou seja, a preferência será salva automaticamente.
      */
     setTheme(themeConfig: PoTheme, themeType?: PoThemeTypeEnum, a11yLevel?: PoThemeA11yEnum, persistPreference?: boolean): void;
     private setDataDefaultSizeHTML;
@@ -50,18 +61,35 @@ export declare class PoThemeService {
      */
     getA11yLevel(): PoThemeA11yEnum;
     /**
-     * Define o tamanho `small` como padrão para componentes de formulário que não possuem um tamanho definido.
-     * Essa configuração é aplicada globalmente apenas quando o nível de acessibilidade for `AA`.
-     * Caso contrário, o tamanho padrão será `medium`.
+     * Define o tamanho `small` como padrão para componentes de formulário que não possuem um tamanho definido. Essa
+     * configuração é aplicada globalmente apenas quando o nível de acessibilidade for `AA`. O valor definido é salvo no
+     * `localStorage` sob a chave `po-default-size`.
      *
      * > Para garantir que o tamanho `small` seja aplicado corretamente a todos os componentes, recomendamos
      * definir esta configuração **junto com o nível de acessibilidade `AA` na inicialização da aplicação**.
      * Se for aplicada em tempo de execução, será necessário recarregar a aplicação (`reload`)
      * para que os estilos sejam aplicados corretamente.
+     * > Para ajustar a densidade visual dos componentes agrupadores (como pages, container, etc.), utilize também
+     * o método `setDensityMode` conforme necessário.
      *
      * @param {boolean} enable Habilita ou desabilita o tamanho `small` globalmente.
      */
     setA11yDefaultSizeSmall(enable: boolean): boolean;
+    /**
+     * Retorna o modo de adensamento dos componentes agrupadores.
+     * Se não estiver configurado, retorna `medium` como padrão.
+     * @returns {PoDensityMode} O modo de adensamento, que pode ser `small` ou `medium`.
+     */
+    getDensityMode(): PoDensityMode;
+    /**
+     * Aplica o modo de adensamento compacto (`small`) ou espaçoso (`medium`) para os componentes agrupadores,
+     * independentemente do nível de acessibilidade. O valor definido é salvo no `localStorage` sob a chave
+     * `po-density-mode`.
+     *
+     * @param {'small' | 'medium'} mode Define o modo de densidade: `small` para compacto, `medium` para espaçoso.
+     * O valor padrão é `medium`.
+     */
+    setDensityMode(mode: string): void;
     /**
      * @docsPrivate
      * Retorna a preferência global de tamanho dos componentes.
@@ -143,11 +171,10 @@ export declare class PoThemeService {
     private applyThemeStyles;
     private changeThemeType;
     /**
-     * Persiste e define o tema do aplicativo com base nos dados armazenados.
-     *
-     * Este método recupera os dados do tema armazenados e os aplica ao aplicativo.
+     * Restaura e aplica as preferências visuais do usuário para o tema da aplicação, garantindo que essas preferências
+     * sejam persistidas no `localStorage` para uso em recarregamentos futuros.
      *
-     * @returns {PoTheme} Recupera o tema armazenado.
+     * @returns {PoTheme} O tema atualmente aplicado.
      */
     persistThemeActive(): PoTheme;
     private formatTheme;
@@ -169,6 +196,7 @@ export declare class PoThemeService {
     cleanThemeActive(persistPreference?: boolean): void;
     private getActiveTypeFromTheme;
     private getActiveA11yFromTheme;
+    private isValidA11yLevel;
     /**
      * @docsPrivate
      *

package/lib/utils/util.d.ts

@@ -1,6 +1,7 @@
-import { PoThemeService } from '../services/po-theme/po-theme.service';
-import { PoThemeA11yEnum } from '../services/po-theme/enum/po-theme-a11y.enum';
+import { PoDensityMode } from '../enums/po-density-mode.enum';
 import { ElementRef } from '@angular/core';
+import { PoThemeA11yEnum } from '../services/po-theme/enum/po-theme-a11y.enum';
+import { PoThemeService } from '../services/po-theme/po-theme.service';
 /**
  * Converte e formata os bytes em formato mais legível para o usuário.
  *
@@ -273,6 +274,12 @@ export declare function getA11yDefaultSize(): string;
  * @returns {PoThemeA11yEnum} O nível de acessibilidade, que pode ser `AA` ou `AAA`.
  */
 export declare function getA11yLevel(): PoThemeA11yEnum;
+/**
+ * Retorna o modo de adensamento dos componentes agrupadores.
+ * Se não estiver configurado, retorna `medium` como padrão.
+ * @returns {PoDensityMode} O modo de adensamento, que pode ser `small` ou `medium`.
+ */
+export declare function getDensityMode(): PoDensityMode;
 /**
  * Realiza a tradução das propriedades de ajuda dos componentes.
  * Type do Helper default é 'help' e size 'medium'.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@po-ui/ng-components",
-  "version": "19.32.0",
+  "version": "19.34.0",
   "description": "PO UI - Components",
   "author": "PO UI",
   "license": "MIT",
@@ -22,8 +22,8 @@
   },
   "dependencies": {
     "@angular/cdk": "~19.0.3",
-    "@po-ui/style": "19.32.0",
-    "@po-ui/ng-schematics": "19.32.0",
+    "@po-ui/style": "19.34.0",
+    "@po-ui/ng-schematics": "19.34.0",
     "echarts": "^5.6.0",
     "tslib": "^2.6.2"
   },
@@ -38,7 +38,7 @@
     "@angular/platform-browser-dynamic": "^19",
     "@angular/router": "^19",
     "@angular-devkit/schematics": "^19",
-    "@po-ui/style": "19.32.0",
+    "@po-ui/style": "19.34.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', '19.32.0');
+        (0, package_config_1.addPackageToPackageJson)(tree, '@po-ui/ng-components', '19.34.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)('19.32.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.34.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)('19.32.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.34.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)('19.32.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.34.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)('19.32.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.34.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)('19.32.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.34.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
         }
         else {
             return (0, schematics_1.chain)([
-                (0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion),
+                (0, package_config_1.updatePackageJson)('19.34.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)('19.32.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.34.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
         }
         else {
             return (0, schematics_1.chain)([
-                (0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion),
+                (0, package_config_1.updatePackageJson)('19.34.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('19.32.0', changes_1.dependeciesChanges),
+        updatePackageJson('19.34.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/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)('19.32.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.34.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)('19.32.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.34.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)('19.32.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.34.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)('19.32.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.34.0', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {