@po-ui/ng-components 19.11.0 → 19.12.0

package/lib/components/po-dynamic/po-dynamic-form/interfaces/po-dynamic-form-field.interface.d.ts

@@ -261,8 +261,8 @@ export interface PoDynamicFormField extends PoDynamicField {
      * `po-lookup` e `po-textarea` não é necessário passar a propriedade `requiredFieldErrorMessage`.
      *
      *
-     * **Componentes compatíveis:** `po-datepicker`, `po-input`, `po-number`, `po-decimal`, `po-password`, `po-datepicker-range`,
-     *  `po-select`, `po-checkbox-group`, `po-radio-group`, `po-multiselect`, `po-combo`, `po-lookup`, `po-textarea`.
+     * **Componentes compatíveis:**  `po-checkbox-group`, `po-combo`, `po-datepicker`, `po-datepicker-range`,
+     *  `po-decimal`, `po-input`, `po-lookup`, `po-multiselect`, `po-number`, `po-password`, `po-radio-group`, `po-select`, `po-switch`, `po-textarea`.
      */
     errorMessage?: string;
     /**
@@ -275,8 +275,8 @@ export interface PoDynamicFormField extends PoDynamicField {
      * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas
      * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo.
      *
-     * **Componentes compatíveis:** `po-datepicker`, `po-input`, `po-number`, `po-decimal`, `po-password`, `po-datepicker-range`,
-     *  `po-select`, `po-checkbox-group`, `po-radio-group`, `po-multiselect`, `po-combo`, `po-lookup`, `po-textarea`.
+     * **Componentes compatíveis:** `po-checkbox-group`, `po-combo`, `po-datepicker`, `po-datepicker-range`,
+     *  `po-decimal`, `po-input`, `po-lookup`, `po-multiselect`, `po-number`, `po-password`, `po-radio-group`, `po-select`, `po-switch`, `po-textarea`.
      *
      * @default `false`
      */
@@ -733,4 +733,14 @@ export interface PoDynamicFormField extends PoDynamicField {
      * @default `medium`
      */
     size?: string;
+    /**
+     * Define qual valor será considerado como inválido para exibir a mensagem da propriedade `p-field-error-message`.
+     *
+     * > Caso essa propriedade seja definida como `true`, a mensagem de erro será exibida quando o campo estiver ligado(on/true).
+     *
+     * **Componente compatível**: `po-switch`
+     *
+     * @default `false`
+     */
+    invalidValue?: boolean;
 }

package/lib/components/po-field/po-switch/po-switch.component.d.ts

@@ -1,4 +1,5 @@
-import { ChangeDetectorRef, ElementRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, Injector, OnDestroy } from '@angular/core';
+import { AbstractControl, ValidationErrors, Validator } from '@angular/forms';
 import { PoThemeService } from '../../../services';
 import { PoFieldModel } from '../po-field.model';
 import { PoSwitchLabelPosition } from './po-switch-label-position.enum';
@@ -78,9 +79,10 @@ import * as i0 from "@angular/core";
  *   <file name="sample-po-switch-order-reactive-form/sample-po-switch-order-reactive-form.component.ts"> </file>
  * </example>
  */
-export declare class PoSwitchComponent extends PoFieldModel<any> {
+export declare class PoSwitchComponent extends PoFieldModel<any> implements Validator, AfterViewInit, OnDestroy {
     protected poThemeService: PoThemeService;
-    private changeDetector;
+    private readonly changeDetector;
+    private readonly injector;
     switchContainer: ElementRef;
     id: string;
     value: boolean;
@@ -89,6 +91,7 @@ export declare class PoSwitchComponent extends PoFieldModel<any> {
     private _labelPosition;
     private _formatModel;
     private _size?;
+    private statusChangesSubscription;
     /**
      * @optional
      *
@@ -138,6 +141,41 @@ export declare class PoSwitchComponent extends PoFieldModel<any> {
      */
     set labelOn(label: string);
     get labelOn(): string;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Exibe a mensagem de erro configurada quando o campo estiver desligado(off/false).
+     *
+     *
+     */
+    fieldErrorMessage: string;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Limita a exibição da mensagem de erro a duas linhas e exibe um tooltip com o texto completo.
+     *
+     * > Caso essa propriedade seja definida como `true`, a mensagem de erro será limitada a duas linhas
+     * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo.
+     *
+     * @default `false`
+     */
+    errorLimit: boolean;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define qual valor será considerado como inválido para exibir a mensagem da propriedade `p-field-error-message`.
+     *
+     * > Caso essa propriedade seja definida como `true`, a mensagem de erro será exibida quando o campo estiver ligado(on/true).
+     *
+     * @default `false`
+     */
+    invalidValue: boolean;
     /**
      * @optional
      *
@@ -155,7 +193,11 @@ export declare class PoSwitchComponent extends PoFieldModel<any> {
      */
     set size(value: string);
     get size(): string;
-    constructor(poThemeService: PoThemeService, changeDetector: ChangeDetectorRef);
+    private readonly el;
+    private readonly injectOptions;
+    private control;
+    constructor(poThemeService: PoThemeService, changeDetector: ChangeDetectorRef, injector: Injector);
+    ngOnDestroy(): void;
     /**
      * Função que atribui foco ao componente.
      *
@@ -180,8 +222,13 @@ export declare class PoSwitchComponent extends PoFieldModel<any> {
     changeValue(value: any): void;
     eventClick(): void;
     onWriteValue(value: any): void;
+    validate(control: AbstractControl): ValidationErrors | null;
+    ngAfterViewInit(): void;
+    private setControl;
+    getErrorPattern(): string;
+    hasInvalidClass(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoSwitchComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PoSwitchComponent, "po-switch", never, { "value": { "alias": "p-value"; "required": false; }; "formatModel": { "alias": "p-format-model"; "required": false; }; "hideLabelStatus": { "alias": "p-hide-label-status"; "required": false; }; "labelPosition": { "alias": "p-label-position"; "required": false; }; "labelOff": { "alias": "p-label-off"; "required": false; }; "labelOn": { "alias": "p-label-on"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PoSwitchComponent, "po-switch", never, { "value": { "alias": "p-value"; "required": false; }; "formatModel": { "alias": "p-format-model"; "required": false; }; "hideLabelStatus": { "alias": "p-hide-label-status"; "required": false; }; "labelPosition": { "alias": "p-label-position"; "required": false; }; "labelOff": { "alias": "p-label-off"; "required": false; }; "labelOn": { "alias": "p-label-on"; "required": false; }; "fieldErrorMessage": { "alias": "p-field-error-message"; "required": false; }; "errorLimit": { "alias": "p-error-limit"; "required": false; }; "invalidValue": { "alias": "p-invalid-value"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; }, {}, never, never, false, never>;
     static ngAcceptInputType_value: any;
     static ngAcceptInputType_formatModel: any;
     static ngAcceptInputType_hideLabelStatus: any;

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

@@ -8,7 +8,7 @@ import * as i0 from "@angular/core";
  *
  * 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.
  *
- * > Para saber mais sobre como customizar as cores do tema padrão verifique o item [Customizando cores do tema padrão](https://po-ui.io/guides/colors-customization) na aba `Guias`.
+ * > 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`.
  *
  * > Obs.: Não está documentado aqui e não indicamos a customização das cores de 'feedback' por motivos de acessibilidade e usabilidade.
  */
@@ -75,38 +75,51 @@ export declare class PoThemeService {
      * A classe do tema é aplicada no HTML e pode ser formatada como `html[class*="-light-AA"]` para personalizações
      * em temas específicos.
      *
-     * @param {PoThemeActive} active - Objeto que define o tema ativo, com `type` e `a11y`.
+     * @param {PoThemeActive} active - Configuração do tema ativo:
      * @param {any} perComponent - Objeto contendo os estilos específicos para componentes a serem aplicados.
      * @param {any} onRoot - Objeto contendo tokens de estilo que serão aplicados diretamente no seletor `:root` do HTML.
+     * @param {string | Array<string>} [classPrefix] - Prefixo(s) de classe para direcionamento preciso.
      *
      * @example
+     * #### 1. Com prefixo único
+     * ```typescript
+     * setPerComponentAndOnRoot(
+     *   { type: 'dark', a11y: 'AA' },
+     *   { 'po-input': { background: '#222' } },
+     *   { '--text-color': '#fff' },
+     *   'myTheme'
+     * );
+     * ```
+     * **Saída:**
+     * ```css
+     * :root[class*="-dark-AA"][class*="myTheme"] {
+     *   --text-color: #fff;
+     *   po-input { background: #222; }
+     * }
+     * ```
+     *
+     * #### 2. Com múltiplos prefixos
+     * ```typescript
+     * setPerComponentAndOnRoot(
+     *   { type: 'light' },
+     *   null,
+     *   { '--primary': '#3e8ed0' },
+     *   ['myTheme', 'portal-v2']
+     * );
+     * ```
+     * **Saída:**
+     * ```css
+     * :root[class*="-light"][class*="myTheme"],
+     * :root[class*="-light"][class*="portal-v2"] {
+     *   --primary: #3e8ed0;
+     * }
+     * ```
+     *
+     * - Quando usado com array, gera um seletor CSS com múltiplos targets (separados por vírgula).
+     * - Mantém a especificidade original do tema (`[class*="-type-a11y"]`) combinada com cada prefixo.
      *
-     * // Exemplo de utilização com um tema ativo e tokens de estilo
-     * const themeActive = { type: 'light', a11y: 'AA' };
-     * const perComponentStyles = {
-     *   'po-listbox [hidden]': {
-     *     'display': 'flex !important'
-     *   }
-     * };
-     * const onRootStyles = {
-     *   '--font-family': 'Roboto',
-     *   '--background-color': '#fff'
-     * };
-     *
-     * this.setPerComponentAndOnRoot(themeActive, perComponentStyles, onRootStyles);
-     *
-     * // Resultado:
-     * // Gera e aplica os seguintes estilos no DOM
-     * // html[class*="-light-AA"]:root {
-     * //   --font-family: 'Roboto';
-     * //   --background-color: '#fff';
-     * //   po-listbox [hidden] {
-     * //     display: flex !important;
-     * //   }
-     * // }
-     *
-     */
-    setPerComponentAndOnRoot(active: PoThemeActive, perComponent: any, onRoot: any): void;
+     */
+    setPerComponentAndOnRoot(active: PoThemeActive, perComponent: any, onRoot: any, classPrefix?: string | Array<string>): void;
     /**
      * @docsPrivate
      *

package/package.json

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