@po-ui/ng-components 20.6.0 → 20.8.0

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

@@ -105,6 +105,7 @@ export declare class PoBreadcrumbBaseComponent {
     protected clickoutListener: () => void;
     protected resizeListener: () => void;
     private _items;
+    private _size?;
     /**
      * @description
      *
@@ -117,6 +118,20 @@ export declare class PoBreadcrumbBaseComponent {
      */
     set items(items: Array<PoBreadcrumbItem>);
     get items(): Array<PoBreadcrumbItem>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tamanho do componente entre `small` ou `medium`.
+     *
+     * > 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).
+     *
+     * @default `medium`
+     */
+    set size(value: string);
+    get size(): string;
     private transformToArrayPopup;
     private transformArrayToActionPopUp;
 }

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

@@ -11,9 +11,10 @@ export interface PoChartSerie {
      * @description
      *
      * Determina a cor da série. As maneiras de customizar o *preset* padrão de cores são:
-     * * Hexadeximal, por exemplo `#c64840`;
-     * * RGB, como `rgb(0, 0, 165)`
+     * * Hexadecimal, por exemplo `#c64840`;
+     * * RGB, por exemplo `rgb(0, 0, 165)`
      * * O nome da cor, por exemplo `blue`;
+     * * Variáveis CSS, por exemplo `var(--color-01)`;
      * * Usando uma das cores do tema do PO:
      *   Valores válidos:
      *     - <span class="dot po-color-01"></span> `color-01`

package/lib/components/po-dropdown/po-dropdown-action.interface.d.ts

@@ -8,4 +8,14 @@ import { PoPopupAction } from '../po-popup/po-popup-action.interface';
  * @usedBy PoDropdownComponent
  */
 export interface PoDropdownAction extends PoPopupAction {
+    /**
+     * Array de ações (`PoDropdownAction`) usado para criar agrupadores de subitens.
+     *
+     * - Permite a criação de menus aninhados (submenus).
+     *
+     * > Boas práticas de desenvolvimento:
+     * Recomenda-se limitar a navegação a, no máximo, três níveis hierárquicos.
+     * Isso evita sobrecarga cognitiva, facilita a memorização da estrutura e garante uma melhor experiência de uso.
+     */
+    subItems?: Array<PoDropdownAction>;
 }

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

@@ -10,6 +10,11 @@ import { PoDropdownBaseComponent } from './po-dropdown-base.component';
  *  <file name="sample-po-dropdown-basic/sample-po-dropdown-basic.component.ts"> </file>
  * </example>
  *
+ * <example name="po-dropdown-subitems" title="PO Dropdown Subitems" >
+ *  <file name="sample-po-dropdown-subitems/sample-po-dropdown-subitems.component.html"> </file>
+ *  <file name="sample-po-dropdown-subitems/sample-po-dropdown-subitems.component.ts"> </file>
+ * </example>
+ *
  * <example name="po-dropdown-labs" title="PO Dropdown Labs" >
  *  <file name="sample-po-dropdown-labs/sample-po-dropdown-labs.component.html"> </file>
  *  <file name="sample-po-dropdown-labs/sample-po-dropdown-labs.component.ts"> </file>

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

@@ -8,6 +8,7 @@ import { PoProgressAction } from '../../../po-progress';
 import { ForceBooleanComponentEnum, ForceOptionComponentEnum } from '../../enums/po-dynamic-field-force-component.enum';
 import { Observable } from 'rxjs';
 import { PoDynamicField } from '../../po-dynamic-field.interface';
+import { PoHelperOptions } from '../../../po-helper';
 /**
  * @usedBy PoDynamicFormComponent, PoAdvancedFilterComponent, PoPageDynamicSearchComponent
  *
@@ -20,21 +21,23 @@ import { PoDynamicField } from '../../po-dynamic-field.interface';
 export interface PoDynamicFormField extends PoDynamicField {
     /**
      * Evento disparado ao clicar no ícone de ajuda adicional.
-     * Este evento ativa automaticamente a exibição do ícone de ajuda adicional ao `p-help`.
+     *
+     * > Essa propriedade está depreciada e será removida na versão 23.x.x. Recomendamos utilizar a propriedade p-helper que oferece mais recursos e flexibilidade.
      */
     additionalHelp?: Function;
     /**
-     * Exibe um ícone de ajuda adicional ao `p-help`, com o texto desta propriedade no tooltip.
-     * Se o evento `p-additional-help` estiver definido, o tooltip não será exibido.
+     * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`.
      * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.**
+     *
+     * > Essa propriedade está depreciada e será removida na versão 23.x.x. Recomendamos utilizar a propriedade p-helper que oferece mais recursos e flexibilidade.
      */
     additionalHelpTooltip?: string;
     /**
-     * Define que o `listbox` e/ou tooltip (`p-additional-help-tooltip` e/ou `p-error-limit`) serão incluídos no body da
+     * Define que o `listbox` e/ou popover (`p-helper` e/ou `p-error-limit`) serão incluídos no body da
      * página e não dentro do componente. Essa opção é necessária para cenários com containers que possuem scroll ou
      * overflow escondido, garantindo o posicionamento correto de ambos próximo ao elemento.
      *
-     * > Quando utilizado com `p-additional-help-tooltip`, leitores de tela como o NVDA podem não ler o conteúdo do tooltip.
+     * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover.
      */
     appendBox?: boolean;
     /**
@@ -155,6 +158,8 @@ export interface PoDynamicFormField extends PoDynamicField {
     disabled?: boolean;
     /** Texto de ajuda. */
     help?: string;
+    /** Texto simples que será apresentado como auxílio ao campo ou objeto com as definições do po-helper. */
+    helper?: string | PoHelperOptions;
     /** Texto exibido quando o valor do componente for *true*. */
     booleanTrue?: string;
     /** Texto exibido quando o valor do componente for *false*. */

package/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form.component.d.ts

@@ -80,7 +80,7 @@ export declare class PoDynamicFormComponent extends PoDynamicFormBaseComponent i
     getObjectValue(): Observable<any>;
     sendObjectValue(objectValue: any): void;
     /**
-     * Método que exibe `additionalHelpTooltip` ou executa a ação definida em `additionalHelp`.
+     * Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
      * Para isso, será necessário configurar uma tecla de atalho utilizando o evento `keydown`.
      *
      * ```
@@ -93,7 +93,7 @@ export declare class PoDynamicFormComponent extends PoDynamicFormBaseComponent i
      *    property: 'name',
      *    ...
      *    help: 'Mensagem de ajuda.',
-     *    additionalHelpTooltip: 'Mensagem de ajuda complementar.',
+     *    helper: 'Mensagem de ajuda complementar com o componente po-helper implementado.',
      *    keydown: this.onKeyDown.bind(this, 'name')
      *  },
      * ]

package/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view-base.component.d.ts

@@ -57,9 +57,24 @@ export declare class PoDynamicViewBaseComponent extends PoDynamicSharedBase {
      */
     load: string | Function;
     service: any;
+    private _componentsSize?;
     private _fields;
     private _showAllValue;
     private _value;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tamanho dos componentes no template entre `small` ou `medium`.
+     *
+     * > 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).
+     *
+     * @default `medium`
+     */
+    set componentsSize(value: string);
+    get componentsSize(): string;
     /**
      * @optional
      *

package/lib/components/po-field/po-checkbox/po-checkbox-base.component.d.ts

@@ -52,8 +52,7 @@ export declare abstract class PoCheckboxBaseComponent implements ControlValueAcc
      * @optional
      *
      * @description
-     * Exibe um ícone de ajuda adicional ao `p-help`, com o texto desta propriedade no tooltip.
-     * Se o evento `p-additional-help` estiver definido, o tooltip não será exibido.
+     * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`.
      * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.**
      * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela.
      *
@@ -65,11 +64,11 @@ export declare abstract class PoCheckboxBaseComponent implements ControlValueAcc
      *
      * @description
      *
-     * Define que o tooltip (`p-additional-help-tooltip`) será incluído no body da página e não dentro do componente. Essa
+     * Define que o popover (`p-helper`) será incluído no body da página e não dentro do componente. Essa
      * opção pode ser necessária em cenários com containers que possuem scroll ou overflow escondido, garantindo o
      * posicionamento correto do tooltip próximo ao elemento.
      *
-     * > Quando utilizado com `p-additional-help-tooltip`, leitores de tela como o NVDA podem não ler o conteúdo do tooltip.
+     * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover.
      *
      * @default `false`
      */
@@ -104,7 +103,6 @@ export declare abstract class PoCheckboxBaseComponent implements ControlValueAcc
      *
      * @description
      * Evento disparado ao clicar no ícone de ajuda adicional.
-     * Este evento ativa automaticamente a exibição do ícone de ajuda adicional ao `p-help`.
      *
      * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade.
      */
@@ -177,10 +175,10 @@ export declare abstract class PoCheckboxBaseComponent implements ControlValueAcc
      *
      * @description
      *
-     * Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label.
+     * Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`.
+     * > Para mais informações acesse: https://po-ui.io/documentation/po-helper.
      *
-     * > Caso o `p-label` não esteja definido, o componente po-helper não será exibido.
-     * Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado.
+     * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado.
      */
     poHelperComponent: import("@angular/core").InputSignal<string | PoHelperOptions>;
     /**

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

@@ -1,6 +1,6 @@
 import { AfterViewInit, ElementRef, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { PoCheckboxBaseComponent } from './po-checkbox-base.component';
-import { PoHelperComponent, PoHelperOptions } from '../../po-helper';
+import { PoHelperComponent } from '../../po-helper';
 /**
  * @docsExtends PoCheckboxBaseComponent
  *
@@ -24,7 +24,6 @@ import { PoHelperComponent, PoHelperOptions } from '../../po-helper';
 export declare class PoCheckboxComponent extends PoCheckboxBaseComponent implements AfterViewInit, OnChanges, OnInit {
     private readonly changeDetector;
     private _iconToken;
-    helperSettings: PoHelperOptions;
     showTip: boolean;
     checkboxLabel: ElementRef;
     labelEl: ElementRef<HTMLElement>;
@@ -58,20 +57,12 @@ export declare class PoCheckboxComponent extends PoCheckboxBaseComponent impleme
     getAdditionalHelpTooltip(): string;
     onKeyDown(event: KeyboardEvent, value: boolean | string): void;
     /**
-     * Método que exibe `p-additionalHelpTooltip` ou executa a ação definida em `p-additionalHelp`.
+     * Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
      * Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
      *
-     * > Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco e com label visível.
+     * > Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
      *
      * ```
-     * <po-checkbox
-     *  #checkbox
-     *  ...
-     *  p-additional-help-tooltip="Mensagem de ajuda complementar"
-     *  (p-keydown)="onKeyDown($event, checkbox)"
-     * ></po-checkbox>
-     * ```
-     * ```
      * //Exemplo com label e p-helper
      * <po-checkbox
      *  #checkbox

package/lib/components/po-field/po-checkbox-group/po-checkbox-group-base.component.d.ts

@@ -41,8 +41,7 @@ export declare class PoCheckboxGroupBaseComponent implements ControlValueAccesso
      * @optional
      *
      * @description
-     * Exibe um ícone de ajuda adicional ao `p-help`, com o texto desta propriedade no tooltip.
-     * Se o evento `p-additional-help` estiver definido, o tooltip não será exibido.
+     * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`.
      * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.**
      * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela.
      *
@@ -54,11 +53,11 @@ export declare class PoCheckboxGroupBaseComponent implements ControlValueAccesso
      *
      * @description
      *
-     * Define que o tooltip (`p-additional-help-tooltip` e/ou `p-error-limit`) será incluído no body da página e não
+     * Define que o popover (`p-helper` e/ou `p-error-limit`) será incluído no body da página e não
      * dentro do componente. Essa opção pode ser necessária em cenários com containers que possuem scroll ou overflow
      * escondido, garantindo o posicionamento correto do tooltip próximo ao elemento.
      *
-     * > Quando utilizado com `p-additional-help-tooltip`, leitores de tela como o NVDA podem não ler o conteúdo do tooltip.
+     * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover.
      *
      * @default `false`
      */
@@ -126,10 +125,10 @@ export declare class PoCheckboxGroupBaseComponent implements ControlValueAccesso
      *
      * @description
      *
-     * Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label.
+     * Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`.
+     * > Para mais informações acesse: https://po-ui.io/documentation/po-helper.
      *
-     * > Caso o `p-label` não esteja definido, o componente po-helper não será exibido.
-     * Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado.
+     * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado.
      */
     poHelperComponent: import("@angular/core").InputSignal<string | PoHelperOptions>;
     /**
@@ -168,7 +167,6 @@ export declare class PoCheckboxGroupBaseComponent implements ControlValueAccesso
      *
      * @description
      * Evento disparado ao clicar no ícone de ajuda adicional.
-     * Este evento ativa automaticamente a exibição do ícone de ajuda adicional ao `p-help`.
      *
      * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade.
      */

package/lib/components/po-field/po-checkbox-group/po-checkbox-group.component.d.ts

@@ -1,7 +1,8 @@
-import { AfterViewChecked, AfterViewInit, QueryList } from '@angular/core';
+import { AfterViewChecked, AfterViewInit, OnChanges, QueryList, SimpleChanges } from '@angular/core';
 import { PoCheckboxComponent } from '../po-checkbox/po-checkbox.component';
 import { PoCheckboxGroupOption } from './interfaces/po-checkbox-group-option.interface';
 import { PoCheckboxGroupBaseComponent } from './po-checkbox-group-base.component';
+import { PoHelperComponent } from '../../po-helper';
 /**
  * @docsExtends PoCheckboxGroupBaseComponent
  *
@@ -22,10 +23,12 @@ import { PoCheckboxGroupBaseComponent } from './po-checkbox-group-base.component
  *  <file name="sample-po-checkbox-group-password-policy/sample-po-checkbox-group-password-policy.component.ts"> </file>
  * </example>
  */
-export declare class PoCheckboxGroupComponent extends PoCheckboxGroupBaseComponent implements AfterViewChecked, AfterViewInit {
+export declare class PoCheckboxGroupComponent extends PoCheckboxGroupBaseComponent implements AfterViewChecked, AfterViewInit, OnChanges {
     private changeDetector;
     checkboxLabels: QueryList<PoCheckboxComponent>;
+    helperEl?: PoHelperComponent;
     private el;
+    ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewChecked(): void;
     ngAfterViewInit(): void;
     onBlur(checkbox: PoCheckboxComponent): void;
@@ -53,20 +56,12 @@ export declare class PoCheckboxGroupComponent extends PoCheckboxGroupBaseCompone
     hasInvalidClass(): any;
     onKeyDown(event: KeyboardEvent, option: PoCheckboxGroupOption, checkbox?: PoCheckboxComponent): void;
     /**
-     * Método que exibe `p-additionalHelpTooltip` ou executa a ação definida em `p-additionalHelp`.
+     * Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
      * Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
      *
-     * > Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco e com label visível.
+     * > Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
      *
      * ```
-     * <po-checkbox-group
-     *  #checkboxGroup
-     *  ...
-     *  p-additional-help-tooltip="Mensagem de ajuda complementar"
-     *  (p-keydown)="onKeyDown($event, checkboxGroup)"
-     * ></po-checkbox-group>
-     * ```
-     * ```
      * //Exemplo com p-label e p-helper
      * <po-checkbox-group
      *  #checkboxGroup

package/lib/components/po-field/po-combo/po-combo-base.component.d.ts

@@ -73,8 +73,7 @@ export declare abstract class PoComboBaseComponent implements ControlValueAccess
      * @optional
      *
      * @description
-     * Exibe um ícone de ajuda adicional ao `p-help`, com o texto desta propriedade no tooltip.
-     * Se o evento `p-additional-help` estiver definido, o tooltip não será exibido.
+     * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`.
      * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.**
      * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela.
      *
@@ -248,7 +247,6 @@ export declare abstract class PoComboBaseComponent implements ControlValueAccess
      *
      * @description
      * Evento disparado ao clicar no ícone de ajuda adicional.
-     * Este evento ativa automaticamente a exibição do ícone de ajuda adicional ao `p-help`.
      *
      * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade.
      */
@@ -335,10 +333,10 @@ export declare abstract class PoComboBaseComponent implements ControlValueAccess
      *
      * @description
      *
-     * Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label.
+     * Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`.
+     * > Para mais informações acesse: https://po-ui.io/documentation/po-helper.
      *
-     * > Caso o `p-label` não esteja definido, o componente po-helper não será exibido.
-     * Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado.
+     * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado.
      */
     poHelperComponent: import("@angular/core").InputSignal<string | PoHelperOptions>;
     /**
@@ -604,11 +602,11 @@ export declare abstract class PoComboBaseComponent implements ControlValueAccess
      *
      * @description
      *
-     * Define que o `listbox` e/ou tooltip (`p-additional-help-tooltip` e/ou `p-error-limit`) serão incluídos no body da
+     * Define que o `listbox` e/ou popover (`p-helper` e/ou `p-error-limit`) serão incluídos no body da
      * página e não dentro do componente. Essa opção pode ser necessária em cenários com containers que possuem scroll ou
      * overflow escondido,garantindo o posicionamento correto de ambos próximo ao elemento.
      *
-     * > Quando utilizado com `p-additional-help-tooltip`, leitores de tela como o NVDA podem não ler o conteúdo do tooltip.
+     * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover.
      *
      * @default `false`
      */

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

@@ -5,7 +5,7 @@ import { PoComboOption } from './interfaces/po-combo-option.interface';
 import { PoComboBaseComponent } from './po-combo-base.component';
 import { PoComboFilterService } from './po-combo-filter.service';
 import { PoComboOptionTemplateDirective } from './po-combo-option-template/po-combo-option-template.directive';
-import { PoHelperOptions } from '../../po-helper';
+import { PoHelperComponent } from '../../po-helper';
 /**
  * @docsExtends PoComboBaseComponent
  *
@@ -66,6 +66,7 @@ export declare class PoComboComponent extends PoComboBaseComponent implements Af
     iconElement: ElementRef;
     inputEl: ElementRef;
     poListbox: PoListBoxComponent;
+    helperEl?: PoHelperComponent;
     comboIcon: string;
     comboOpen: boolean;
     differ: any;
@@ -75,7 +76,6 @@ export declare class PoComboComponent extends PoComboBaseComponent implements Af
     shouldMarkLetters: boolean;
     infiniteLoading: boolean;
     containerWidth: number;
-    helperSettings: PoHelperOptions;
     private _isServerSearching;
     private lastKey;
     private clickoutListener;
@@ -131,18 +131,11 @@ export declare class PoComboComponent extends PoComboBaseComponent implements Af
     getInputValue(): any;
     setInputValue(value: string): void;
     /**
-     * Método que exibe `p-additionalHelpTooltip` ou executa a ação definida em `p-additionalHelp`.
+     * Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
      * Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
      *
-     * > Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco e com label visível.
-     * ```
-     * <po-combo
-     *  #combo
-     *  ...
-     *  p-additional-help-tooltip="Mensagem de ajuda complementar"
-     *  (p-keydown)="onKeyDown($event, combo)"
-     * ></po-combo>
-     * ```
+     * > Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
+     *
      * ```
      * // Exemplo com p-label e p-helper
      * <po-combo

package/lib/components/po-field/po-datepicker/po-datepicker-base.component.d.ts

@@ -87,8 +87,7 @@ export declare abstract class PoDatepickerBaseComponent implements ControlValueA
      * @optional
      *
      * @description
-     * Exibe um ícone de ajuda adicional ao `p-help`, com o texto desta propriedade no tooltip.
-     * Se o evento `p-additional-help` estiver definido, o tooltip não será exibido.
+     * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`.
      * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.**
      * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela.
      *
@@ -175,7 +174,6 @@ export declare abstract class PoDatepickerBaseComponent implements ControlValueA
      *
      * @description
      * Evento disparado ao clicar no ícone de ajuda adicional.
-     * Este evento ativa automaticamente a exibição do ícone de ajuda adicional ao `p-help`.
      *
      * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade.
      */
@@ -211,10 +209,10 @@ export declare abstract class PoDatepickerBaseComponent implements ControlValueA
      *
      * @description
      *
-     * Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label.
+     * Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`.
+     * > Para mais informações acesse: https://po-ui.io/documentation/po-helper.
      *
-     * > Caso o `p-label` não esteja definido, o componente po-helper não será exibido.
-     * Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado.
+     * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado.
      */
     poHelperComponent: import("@angular/core").InputSignal<string | PoHelperOptions>;
     /**
@@ -381,7 +379,7 @@ export declare abstract class PoDatepickerBaseComponent implements ControlValueA
      * página e não dentro do componente. Essa opção pode ser necessária em cenários com containers que possuem scroll ou
      * overflow escondido, garantindo o posicionamento correto de ambos próximo ao elemento.
      *
-     * > Quando utilizado com `p-additional-help-tooltip`, leitores de tela como o NVDA podem não ler o conteúdo do tooltip.
+     * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover.
      *
      * @default `false`
      */

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

@@ -1,8 +1,8 @@
-import { AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
+import { AfterViewInit, ElementRef, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
 import { PoButtonComponent } from '../../po-button/po-button.component';
 import { PoCalendarComponent } from '../../po-calendar/po-calendar.component';
 import { PoDatepickerBaseComponent } from './po-datepicker-base.component';
-import { PoHelperOptions } from '../../po-helper';
+import { PoHelperComponent } from '../../po-helper';
 /**
  * @docsExtends PoDatepickerBaseComponent
  *
@@ -28,13 +28,14 @@ import { PoHelperOptions } from '../../po-helper';
  *  <file name="sample-po-datepicker-airfare-reactive-form/sample-po-datepicker-airfare-reactive-form.component.ts"> </file>
  * </example>
  */
-export declare class PoDatepickerComponent extends PoDatepickerBaseComponent implements AfterViewInit, OnDestroy {
+export declare class PoDatepickerComponent extends PoDatepickerBaseComponent implements AfterViewInit, OnDestroy, OnChanges {
     private controlPosition;
     private renderer;
     calendar: PoCalendarComponent;
     dialogPicker: ElementRef;
     iconDatepicker: PoButtonComponent;
     inputEl: ElementRef;
+    helperEl?: PoHelperComponent;
     /** Rótulo do campo. */
     label?: string;
     /** Texto de apoio do campo. */
@@ -45,7 +46,6 @@ export declare class PoDatepickerComponent extends PoDatepickerBaseComponent imp
     id: string;
     visible: boolean;
     literals: any;
-    helperSettings: PoHelperOptions;
     eventListenerFunction: () => void;
     eventResizeListener: () => void;
     private clickListener;
@@ -59,6 +59,7 @@ export declare class PoDatepickerComponent extends PoDatepickerBaseComponent imp
     onKeyup($event: any): void;
     onKeydown($event?: any): void;
     ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     emitAdditionalHelp(): void;
     /**
@@ -93,20 +94,12 @@ export declare class PoDatepickerComponent extends PoDatepickerBaseComponent imp
     formatToDate(value: Date): string;
     refreshValue(value: Date): void;
     /**
-     * Método que exibe `p-additionalHelpTooltip` ou executa a ação definida em `p-additionalHelp`.
+     * Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
      * Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
      *
-     * > Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco e com label visível.
+     * > Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
      *
      * ```
-     * <po-datepicker
-     *  #datepicker
-     *  ...
-     *  p-additional-help-tooltip="Mensagem de ajuda complementar"
-     *  (p-keydown)="onKeyDown($event, datepicker)"
-     * ></po-datepicker>
-     * ```
-     * ```
      * // Exemplo com p-label e p-helper
      * <po-datepicker
      *  #datepicker

package/lib/components/po-field/po-datepicker-range/po-datepicker-range-base.component.d.ts

@@ -60,8 +60,7 @@ export declare abstract class PoDatepickerRangeBaseComponent implements ControlV
      * @optional
      *
      * @description
-     * Exibe um ícone de ajuda adicional ao `p-help`, com o texto desta propriedade no tooltip.
-     * Se o evento `p-additional-help` estiver definido, o tooltip não será exibido.
+     * Exibe um ícone de ajuda adicional, com o texto desta propriedade sendo passado para o popover do componente `po-helper`.
      * **Como boa prática, indica-se utilizar um texto com até 140 caracteres.**
      * > Requer um recuo mínimo de 8px se o componente estiver próximo à lateral da tela.
      *
@@ -77,7 +76,7 @@ export declare abstract class PoDatepickerRangeBaseComponent implements ControlV
      * página e não dentro do componente. Essa opção pode ser necessária em cenários com containers que possuem scroll ou
      * overflow escondido, garantindo o posicionamento correto de ambos próximo ao elemento.
      *
-     * > Quando utilizado com `p-additional-help-tooltip`, leitores de tela como o NVDA podem não ler o conteúdo do tooltip.
+     * > Quando utilizado com `p-helper`, leitores de tela como o NVDA podem não ler o conteúdo do popover.
      *
      * @default `false`
      */
@@ -143,7 +142,6 @@ export declare abstract class PoDatepickerRangeBaseComponent implements ControlV
      *
      * @description
      * Evento disparado ao clicar no ícone de ajuda adicional.
-     * Este evento ativa automaticamente a exibição do ícone de ajuda adicional ao `p-help`.
      *
      * > Essa propriedade está **depreciada** e será removida na versão `23.x.x`. Recomendamos utilizar a propriedade `p-helper` que oferece mais recursos e flexibilidade.
      */
@@ -168,10 +166,10 @@ export declare abstract class PoDatepickerRangeBaseComponent implements ControlV
      *
      * @description
      *
-     * Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label.
+     * Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`.
+     * > Para mais informações acesse: https://po-ui.io/documentation/po-helper.
      *
-     * > Caso o `p-label` não esteja definido, o componente po-helper não será exibido.
-     * Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado.
+     * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado.
      */
     poHelperComponent: import("@angular/core").InputSignal<string | PoHelperOptions>;
     /**

package/lib/components/po-field/po-datepicker-range/po-datepicker-range.component.d.ts

@@ -1,7 +1,7 @@
 import { AfterViewInit, ElementRef, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { PoDatepickerRange } from './interfaces/po-datepicker-range.interface';
 import { PoDatepickerRangeBaseComponent } from './po-datepicker-range-base.component';
-import { PoHelperOptions } from '../../po-helper';
+import { PoHelperComponent } from '../../po-helper';
 /**
  * @docsExtends PoDatepickerRangeBaseComponent
  *
@@ -39,8 +39,8 @@ export declare class PoDatepickerRangeComponent extends PoDatepickerRangeBaseCom
     startDateInput: ElementRef;
     iconCalendar: ElementRef;
     calendarPicker: ElementRef;
+    helperEl?: PoHelperComponent;
     isCalendarVisible: boolean;
-    helperSettings: PoHelperOptions;
     private clickListener;
     private eventResizeListener;
     private poDatepickerRangeElement;
@@ -94,20 +94,12 @@ export declare class PoDatepickerRangeComponent extends PoDatepickerRangeBaseCom
     resetDateRangeInputValidation(): void;
     showAdditionalHelpIcon(): boolean;
     /**
-     * Método que exibe `p-additionalHelpTooltip` ou executa a ação definida em `p-additionalHelp`.
+     * Método que exibe `p-helper` ou executa a ação definida em `p-helper{eventOnClick}` ou em `p-additionalHelp`.
      * Para isso, será necessário configurar uma tecla de atalho utilizando o evento `p-keydown`.
      *
-     * > Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco e com label visível.
+     * > Exibe ou oculta o conteúdo do componente `po-helper` quando o componente estiver com foco.
      *
      * ```
-     * <po-datepicker-range
-     *  #datepickerRange
-     *  ...
-     *  p-additional-help-tooltip="Mensagem de ajuda complementar"
-     *  (p-keydown)="onKeyDown($event, datepickerRange)"
-     * ></po-datepicker-range>
-     * ```
-     * ```
      * // Exemplo com p-label e p-helper
      * <po-datepicker-range
      *  #datepickerRange