@po-ui/ng-components 19.33.0 → 19.35.0-beta.1

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

@@ -85,11 +85,12 @@ export declare class PoButtonBaseComponent {
      * @description
      * Ícone exibido ao lado esquerdo do label do botão.
      *
-     * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
+     * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons), conforme exemplo:
      * ```
      * <po-button p-icon="an an-user" p-label="PO button"></po-button>
      * ```
-     * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
+     * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, desde que a biblioteca
+     * esteja carregada no projeto:
      * ```
      * <po-button p-icon="fa fa-podcast" p-label="PO button"></po-button>
      * ```

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

@@ -11,6 +11,11 @@ import * as i0 from "@angular/core";
  *  <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-listbox/interfaces/po-listbox-literals.interface.d.ts

@@ -6,6 +6,8 @@
  * Interface para definição de literais utilizadas no `po-listbox`
  */
 export interface PoListBoxLiterals {
+    /** Texto do botão para voltar ao agrupador anterior. */
+    backToPreviousGroup?: string;
     /** Texto exibido quando não houver itens na lista */
     noItems?: string;
     /** Texto do *placeholder* do campo de busca. */

package/lib/components/po-listbox/po-item-list/po-item-list-base.component.d.ts

@@ -77,6 +77,7 @@ export declare class PoItemListBaseComponent {
      * Define um ícone que será exibido ao lado esquerdo do rótulo.
      */
     icon: string | TemplateRef<void>;
+    iconPosition: 'left' | 'right';
     /**
      * @optional
      *
@@ -107,7 +108,7 @@ export declare class PoItemListBaseComponent {
     keysLabel?: Array<string>;
     protected emitActiveTabs(tab: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoItemListBaseComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PoItemListBaseComponent, never, never, { "type": { "alias": "p-type"; "required": false; }; "visible": { "alias": "p-visible"; "required": false; }; "item": { "alias": "p-item"; "required": false; }; "label": { "alias": "p-label"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; "value": { "alias": "p-value"; "required": false; }; "danger": { "alias": "p-danger"; "required": false; }; "disabled": { "alias": "p-disabled"; "required": false; }; "selected": { "alias": "p-selected"; "required": false; }; "separator": { "alias": "p-separator"; "required": false; }; "icon": { "alias": "p-icon"; "required": false; }; "checkboxValue": { "alias": "p-checkbox-value"; "required": false; }; "fieldValue": { "alias": "p-field-value"; "required": false; }; "fieldLabel": { "alias": "p-field-label"; "required": false; }; "template": { "alias": "p-template"; "required": false; }; "templateContext": { "alias": "p-template-context"; "required": false; }; "searchValue": { "alias": "p-search-value"; "required": false; }; "filterMode": { "alias": "p-filter-mode"; "required": false; }; "isFiltering": { "alias": "p-filtering"; "required": false; }; "shouldMarkLetters": { "alias": "p-should-mark-letter"; "required": false; }; "compareCache": { "alias": "p-compare-cache"; "required": false; }; "comboService": { "alias": "p-combo-service"; "required": false; }; "isTabs": { "alias": "p-is-tabs"; "required": false; }; "tabHide": { "alias": "p-tab-hide"; "required": false; }; "activeTabs": { "alias": "p-active-tabs"; "required": false; }; "keysLabel": { "alias": "p-keys-label"; "required": false; }; }, { "clickItem": "p-click-item"; "checkboxItem": "p-selectcheckbox-item"; "comboItem": "p-selectcombo-item"; "tabsItem": "p-emit-item-tabs"; "activatedTab": "p-activated-tabs"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PoItemListBaseComponent, never, never, { "type": { "alias": "p-type"; "required": false; }; "visible": { "alias": "p-visible"; "required": false; }; "item": { "alias": "p-item"; "required": false; }; "label": { "alias": "p-label"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; "value": { "alias": "p-value"; "required": false; }; "danger": { "alias": "p-danger"; "required": false; }; "disabled": { "alias": "p-disabled"; "required": false; }; "selected": { "alias": "p-selected"; "required": false; }; "separator": { "alias": "p-separator"; "required": false; }; "icon": { "alias": "p-icon"; "required": false; }; "iconPosition": { "alias": "p-icon-position"; "required": false; }; "checkboxValue": { "alias": "p-checkbox-value"; "required": false; }; "fieldValue": { "alias": "p-field-value"; "required": false; }; "fieldLabel": { "alias": "p-field-label"; "required": false; }; "template": { "alias": "p-template"; "required": false; }; "templateContext": { "alias": "p-template-context"; "required": false; }; "searchValue": { "alias": "p-search-value"; "required": false; }; "filterMode": { "alias": "p-filter-mode"; "required": false; }; "isFiltering": { "alias": "p-filtering"; "required": false; }; "shouldMarkLetters": { "alias": "p-should-mark-letter"; "required": false; }; "compareCache": { "alias": "p-compare-cache"; "required": false; }; "comboService": { "alias": "p-combo-service"; "required": false; }; "isTabs": { "alias": "p-is-tabs"; "required": false; }; "tabHide": { "alias": "p-tab-hide"; "required": false; }; "activeTabs": { "alias": "p-active-tabs"; "required": false; }; "keysLabel": { "alias": "p-keys-label"; "required": false; }; }, { "clickItem": "p-click-item"; "checkboxItem": "p-selectcheckbox-item"; "comboItem": "p-selectcombo-item"; "tabsItem": "p-emit-item-tabs"; "activatedTab": "p-activated-tabs"; }, never, never, true, never>;
     static ngAcceptInputType_danger: any;
     static ngAcceptInputType_selected: any;
     static ngAcceptInputType_separator: any;

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

@@ -23,6 +23,7 @@ export declare class PoListBoxBaseComponent {
     private _literals;
     private language;
     private _size?;
+    listboxSubitems: boolean;
     visible: boolean;
     set type(value: string);
     get type(): PoItemListType;
@@ -33,18 +34,11 @@ export declare class PoListBoxBaseComponent {
     get isItemListGroup(): boolean;
     isTabs: boolean;
     param?: any;
-    selectItem: EventEmitter<any>;
-    closeEvent: EventEmitter<any>;
-    change: EventEmitter<any>;
-    selectCombo: EventEmitter<any>;
-    changeAll: EventEmitter<any>;
-    UpdateInfiniteScroll: EventEmitter<any>;
     checkboxAllValue: any;
     selectedOptions: Array<any>;
     selectedOption?: any;
     fieldValue: string;
     fieldLabel: string;
-    changeSearch: EventEmitter<any>;
     literalSearch?: any;
     fieldValueSearch: string;
     hideSearch?: boolean;
@@ -70,6 +64,13 @@ export declare class PoListBoxBaseComponent {
     footerActionListbox: boolean;
     placeholderListbox: string;
     separator: boolean;
+    changeSearch: EventEmitter<any>;
+    selectItem: EventEmitter<any>;
+    closeEvent: EventEmitter<any>;
+    change: EventEmitter<any>;
+    selectCombo: EventEmitter<any>;
+    changeAll: EventEmitter<any>;
+    UpdateInfiniteScroll: EventEmitter<any>;
     activatedTab: EventEmitter<any>;
     clickTab: EventEmitter<any>;
     changeStateTabs: EventEmitter<any>;
@@ -77,7 +78,7 @@ export declare class PoListBoxBaseComponent {
     footerActionListboxEvent: EventEmitter<any>;
     constructor(languageService: PoLanguageService);
     static ɵfac: i0.ɵɵFactoryDeclaration<PoListBoxBaseComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PoListBoxBaseComponent, never, never, { "visible": { "alias": "p-visible"; "required": false; }; "type": { "alias": "p-type"; "required": false; }; "items": { "alias": "p-items"; "required": false; }; "literals": { "alias": "p-literals"; "required": false; }; "isTabs": { "alias": "p-is-tabs"; "required": false; }; "param": { "alias": "p-param"; "required": false; }; "checkboxAllValue": { "alias": "p-checkboxAllValue"; "required": false; }; "selectedOptions": { "alias": "p-selected-options"; "required": false; }; "selectedOption": { "alias": "p-selected-option"; "required": false; }; "fieldValue": { "alias": "p-field-value"; "required": false; }; "fieldLabel": { "alias": "p-field-label"; "required": false; }; "literalSearch": { "alias": "p-literal-search"; "required": false; }; "fieldValueSearch": { "alias": "p-field-value-search"; "required": false; }; "hideSearch": { "alias": "p-hide-search"; "required": false; }; "hideSelectAll": { "alias": "p-hide-select-all"; "required": false; }; "multiselectTemplate": { "alias": "p-multiselect-template"; "required": false; }; "template": { "alias": "p-template"; "required": false; }; "placeholderSearch": { "alias": "p-placeholder-search"; "required": false; }; "searchValue": { "alias": "p-search-value"; "required": false; }; "isServerSearching": { "alias": "p-is-searching"; "required": false; }; "infiniteLoading": { "alias": "p-infinite-loading"; "required": false; }; "infiniteScroll": { "alias": "p-infinite-scroll"; "required": false; }; "cache": { "alias": "p-cache"; "required": false; }; "infiniteScrollDistance": { "alias": "p-infinite-scroll-distance"; "required": false; }; "filterMode": { "alias": "p-filter-mode"; "required": false; }; "isFiltering": { "alias": "p-filtering"; "required": false; }; "shouldMarkLetters": { "alias": "p-should-mark-letter"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; "compareCache": { "alias": "p-compare-cache"; "required": false; }; "comboService": { "alias": "p-combo-service"; "required": false; }; "containerWidth": { "alias": "p-container-width"; "required": false; }; "keysLabel": { "alias": "p-keys-label"; "required": false; }; "footerActionListbox": { "alias": "p-footer-action-listbox"; "required": false; }; "placeholderListbox": { "alias": "p-placeholder-listbox"; "required": false; }; "separator": { "alias": "p-separator"; "required": false; }; }, { "selectItem": "p-select-item"; "closeEvent": "p-close"; "change": "p-change"; "selectCombo": "p-selectcombo-item"; "changeAll": "p-change-all"; "UpdateInfiniteScroll": "p-update-infinite-scroll"; "changeSearch": "p-change-search"; "activatedTab": "p-activated-tabs"; "clickTab": "p-click-tabs"; "changeStateTabs": "p-change-state-tabs"; "clickItem": "p-click-item"; "footerActionListboxEvent": "p-footer-action-listbox-event"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PoListBoxBaseComponent, never, never, { "listboxSubitems": { "alias": "p-listbox-subitems"; "required": false; }; "visible": { "alias": "p-visible"; "required": false; }; "type": { "alias": "p-type"; "required": false; }; "items": { "alias": "p-items"; "required": false; }; "literals": { "alias": "p-literals"; "required": false; }; "isTabs": { "alias": "p-is-tabs"; "required": false; }; "param": { "alias": "p-param"; "required": false; }; "checkboxAllValue": { "alias": "p-checkboxAllValue"; "required": false; }; "selectedOptions": { "alias": "p-selected-options"; "required": false; }; "selectedOption": { "alias": "p-selected-option"; "required": false; }; "fieldValue": { "alias": "p-field-value"; "required": false; }; "fieldLabel": { "alias": "p-field-label"; "required": false; }; "literalSearch": { "alias": "p-literal-search"; "required": false; }; "fieldValueSearch": { "alias": "p-field-value-search"; "required": false; }; "hideSearch": { "alias": "p-hide-search"; "required": false; }; "hideSelectAll": { "alias": "p-hide-select-all"; "required": false; }; "multiselectTemplate": { "alias": "p-multiselect-template"; "required": false; }; "template": { "alias": "p-template"; "required": false; }; "placeholderSearch": { "alias": "p-placeholder-search"; "required": false; }; "searchValue": { "alias": "p-search-value"; "required": false; }; "isServerSearching": { "alias": "p-is-searching"; "required": false; }; "infiniteLoading": { "alias": "p-infinite-loading"; "required": false; }; "infiniteScroll": { "alias": "p-infinite-scroll"; "required": false; }; "cache": { "alias": "p-cache"; "required": false; }; "infiniteScrollDistance": { "alias": "p-infinite-scroll-distance"; "required": false; }; "filterMode": { "alias": "p-filter-mode"; "required": false; }; "isFiltering": { "alias": "p-filtering"; "required": false; }; "shouldMarkLetters": { "alias": "p-should-mark-letter"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; "compareCache": { "alias": "p-compare-cache"; "required": false; }; "comboService": { "alias": "p-combo-service"; "required": false; }; "containerWidth": { "alias": "p-container-width"; "required": false; }; "keysLabel": { "alias": "p-keys-label"; "required": false; }; "footerActionListbox": { "alias": "p-footer-action-listbox"; "required": false; }; "placeholderListbox": { "alias": "p-placeholder-listbox"; "required": false; }; "separator": { "alias": "p-separator"; "required": false; }; }, { "changeSearch": "p-change-search"; "selectItem": "p-select-item"; "closeEvent": "p-close"; "change": "p-change"; "selectCombo": "p-selectcombo-item"; "changeAll": "p-change-all"; "UpdateInfiniteScroll": "p-update-infinite-scroll"; "activatedTab": "p-activated-tabs"; "clickTab": "p-click-tabs"; "changeStateTabs": "p-change-state-tabs"; "clickItem": "p-click-item"; "footerActionListboxEvent": "p-footer-action-listbox-event"; }, never, never, true, never>;
     static ngAcceptInputType_visible: any;
     static ngAcceptInputType_isTabs: any;
     static ngAcceptInputType_isServerSearching: any;

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

@@ -1,26 +1,36 @@
-import { AfterViewInit, ElementRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { AfterViewInit, ElementRef, OnChanges, OnDestroy, OnInit, QueryList, SimpleChanges } from '@angular/core';
 import { PoListBoxBaseComponent } from './po-listbox-base.component';
 import { PoItemListOptionGroup } from './po-item-list/interfaces/po-item-list-option-group.interface';
 import { PoItemListOption } from './po-item-list/interfaces/po-item-list-option.interface';
 import { PoSearchListComponent } from './po-search-list/po-search-list.component';
+import { PoDropdownAction } from '../po-dropdown/po-dropdown-action.interface';
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
-export declare class PoListBoxComponent extends PoListBoxBaseComponent implements AfterViewInit, OnChanges, OnDestroy {
+export declare class PoListBoxComponent extends PoListBoxBaseComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
     element: ElementRef<any>;
+    currentItems: Array<PoDropdownAction>;
+    currentGroup: PoDropdownAction | null;
+    private readonly navigationStack;
     private readonly renderer;
     private readonly router;
     private readonly changeDetector;
     listbox: ElementRef;
     listboxItemList: ElementRef;
+    listboxGroupHeader: ElementRef;
     searchElement: PoSearchListComponent;
     popupHeaderContainer: ElementRef;
+    listboxItems: QueryList<ElementRef>;
     private scrollEvent$;
     private subscriptionScrollEvent;
     constructor();
+    ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnChanges(changes?: SimpleChanges): void;
     ngOnDestroy(): void;
-    onSelectItem(itemListAction: PoItemListOption | PoItemListOptionGroup | any): void | Promise<boolean>;
+    openGroup(group: PoDropdownAction, event?: MouseEvent | KeyboardEvent): void;
+    goBack(event: MouseEvent | KeyboardEvent): void;
+    onKeydownGoBack(event: KeyboardEvent): void;
+    onSelectItem(itemListAction: PoItemListOption | PoItemListOptionGroup | any, event?: MouseEvent | KeyboardEvent): void | Promise<boolean>;
     onSelectAllCheckboxKeyDown(event: KeyboardEvent): void;
     onKeyDown(itemListAction: PoItemListOption | PoItemListOptionGroup | any, event?: KeyboardEvent): void;
     checkboxClicked({ option, selected }: {
@@ -47,6 +57,7 @@ export declare class PoListBoxComponent extends PoListBoxBaseComponent implement
     private includeInfiniteScroll;
     protected returnBooleanValue(itemListAction: any, property: string): any;
     private setListBoxMaxHeight;
+    private setListBoxWidth;
     private openUrl;
     onClickTabs(tab: any): void;
     formatItemList(item: any): string;

package/lib/components/po-listbox/po-listbox.module.d.ts

@@ -6,9 +6,10 @@ import * as i4 from "@angular/common";
 import * as i5 from "../po-field/po-checkbox/po-checkbox.module";
 import * as i6 from "../po-icon/po-icon.module";
 import * as i7 from "../po-loading/po-loading.module";
-import * as i8 from "@angular/cdk/listbox";
+import * as i8 from "../po-tag/po-tag.module";
+import * as i9 from "@angular/cdk/listbox";
 export declare class PoListBoxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<PoListBoxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PoListBoxModule, [typeof i1.PoListBoxComponent, typeof i2.PoItemListComponent, typeof i3.PoSearchListComponent], [typeof i4.CommonModule, typeof i5.PoCheckboxModule, typeof i6.PoIconModule, typeof i7.PoLoadingModule, typeof i8.CdkListboxModule], [typeof i1.PoListBoxComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PoListBoxModule, [typeof i1.PoListBoxComponent, typeof i2.PoItemListComponent, typeof i3.PoSearchListComponent], [typeof i4.CommonModule, typeof i5.PoCheckboxModule, typeof i6.PoIconModule, typeof i7.PoLoadingModule, typeof i8.PoTagModule, typeof i9.CdkListboxModule], [typeof i1.PoListBoxComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<PoListBoxModule>;
 }

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

@@ -1,3 +1,4 @@
+import { TemplateRef } from '@angular/core';
 /**
  * @usedBy PoModalComponent
  *
@@ -16,6 +17,49 @@ export interface PoModalAction {
     danger?: boolean;
     /** Desabilita o botão impossibilitando que sua ação seja executada. */
     disabled?: boolean;
+    /**
+     * Ícone exibido ao lado esquerdo do label do botão.
+     *
+     * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons), conforme exemplo:
+     * ```
+     * modalAction: PoModalAction = {
+     *   action: () => {},
+     *   label: 'Botão com ícone PO',
+     *   icon: 'an an-user'
+     * };
+     * ```
+     * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, desde que a biblioteca
+     * esteja carregada no projeto:
+     * ```
+     * modalAction: PoModalAction = {
+     *   action: () => {},
+     *   label: 'Botão com ícone Font Awesome',
+     *   icon: 'fa fa-user'
+     * };
+     * ```
+     * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo:
+     * ```
+     * // Template HTML
+     * <ng-template #customIcon>
+     *   <span class="fa fa-user"></span>
+     * </ng-template>
+     *
+     * // Componente TypeScript
+     * @ViewChild('customIcon', { static: true }) customIcon: TemplateRef<void>;
+     *
+     * modalAction: PoModalAction = {
+     *   action: () => {},
+     *   label: 'Botão com ícone customizado',
+     * };
+     *
+     * // Atribuição do TemplateRef à propriedade icon após a inicialização da view
+     * ngAfterViewInit() {
+     *   this.modalAction.icon = this.customIcon;
+     * }
+     * ```
+     * > Para o ícone enquadrar corretamente, deve-se utilizar `font-size: inherit` caso o ícone utilizado não aplique-o.
+     */
+    icon?: string | TemplateRef<void>;
     /** Rótulo do botão. */
     label: string;
     /** Habilita um estado de carregamento ao botão, desabilitando-o e exibindo um ícone de carregamento à esquerda de seu rótulo. */

package/lib/components/po-page/interfaces/po-page-action.interface.d.ts

@@ -1,16 +1,17 @@
-import { PoPopupAction } from '../../po-popup/po-popup-action.interface';
+import { PoDropdownAction } from '../../po-dropdown';
 /**
  * @description
  * Interface para as ações dos componentes po-page-default e po-page-list.
  *
- * > As propriedades `selected`, `separator` e `type` serão vistas a partir da terceira ação e somente quando
- * definir quatro ações ou mais.
+ * > Quando o array de actions possui quatro ou mais registros, os dois últimos e os seguintes são automaticamente agrupados no po-dropdown.
+ * A partir desse ponto, as propriedades `selected`, `separator`, `type` e `subItems` passam a ter efeito apenas nas ações exibidas dentro do dropdown, ou seja, a partir da terceira ação.
+ * Dessa forma, o uso de subItems (agrupadores dentro do dropdown) só terá efeito quando houver pelo menos quatro ações definidas.
  *
- * @docsExtends PoPopupAction
+ * @docsExtends PoDropdownAction
  *
  * @ignoreExtendedDescription
  *
  * @usedBy PoPageDefaultComponent, PoPageListComponent
  */
-export interface PoPageAction extends PoPopupAction {
+export interface PoPageAction extends PoDropdownAction {
 }

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

@@ -7,11 +7,21 @@ import { TemplateRef } from '@angular/core';
  * Interface para lista de ações do componente.
  */
 export interface PoPopupAction {
-    /** Rótulo da ação. */
+    /**
+     * @description
+     *
+     * Rótulo da ação.
+     *
+     * No componente `po-dropdown`, a label também pode representar o agrupador de subitens.
+     */
     label: string;
     /**
+     * @description
+     *
      * Ação que será executada, sendo possível passar o nome ou a referência da função.
      *
+     * No componente `po-dropdown`, a action também pode ser executada para o agrupador de subitens.
+     *
      * > Para que a função seja executada no contexto do elemento filho o mesmo deve ser passado utilizando *bind*.
      *
      * Exemplo: `action: this.myFunction.bind(this)`
@@ -58,12 +68,20 @@ export interface PoPopupAction {
      * ```
      */
     icon?: string | TemplateRef<void>;
-    /** Atribui uma linha separadora acima do item. */
+    /**
+     * @description
+     *
+     * Atribui uma linha separadora acima do item.
+     *
+     * */
     separator?: boolean;
     /**
+     * @description
+     *
      * Função que deve retornar um booleano para habilitar ou desabilitar a ação para o registro selecionado.
      *
      * Também é possível informar diretamente um valor booleano que vai habilitar ou desabilitar a ação para todos os registros.
+     *
      */
     disabled?: boolean | Function;
     /**
@@ -76,9 +94,23 @@ export interface PoPopupAction {
      *  - `danger` - indicado para ações exclusivas (excluir, sair).
      */
     type?: string;
-    /** URL utilizada no redirecionamento das páginas. */
+    /**
+     * @description
+     *
+     * URL utilizada para redirecionamento das páginas.
+     *
+     * No componente `po-dropdown`, a url também pode ser configurada para o agrupador de subitens.
+     * Entretanto, quando a `url` é informada em um agrupador, o clique **não abrirá os subitens**, pois o item será
+     * tratado como um link e o redirecionamento terá prioridade sobre a exibição da lista.
+     *
+     */
     url?: string;
-    /** Define se a ação está selecionada. */
+    /**
+     * @description
+     *
+     * Define se a ação está selecionada.
+     *
+     */
     selected?: boolean;
     /**
      * @description

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

@@ -76,6 +76,7 @@ export declare class PoPopupBaseComponent {
     private _position?;
     private _size?;
     private _target;
+    listboxSubitems: boolean;
     /** Lista de ações que serão exibidas no componente. */
     set actions(value: Array<PoPopupAction>);
     get actions(): Array<PoPopupAction>;
@@ -207,5 +208,5 @@ export declare class PoPopupBaseComponent {
     closeEvent: EventEmitter<any>;
     clickItem: EventEmitter<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoPopupBaseComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PoPopupBaseComponent, never, never, { "actions": { "alias": "p-actions"; "required": false; }; "hideArrow": { "alias": "p-hide-arrow"; "required": false; }; "isCornerAlign": { "alias": "p-is-corner-align"; "required": false; }; "position": { "alias": "p-position"; "required": false; }; "customPositions": { "alias": "p-custom-positions"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; "target": { "alias": "p-target"; "required": false; }; }, { "closeEvent": "p-close"; "clickItem": "p-click-item"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PoPopupBaseComponent, never, never, { "listboxSubitems": { "alias": "p-listbox-subitems"; "required": false; }; "actions": { "alias": "p-actions"; "required": false; }; "hideArrow": { "alias": "p-hide-arrow"; "required": false; }; "isCornerAlign": { "alias": "p-is-corner-align"; "required": false; }; "position": { "alias": "p-position"; "required": false; }; "customPositions": { "alias": "p-custom-positions"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; "target": { "alias": "p-target"; "required": false; }; }, { "closeEvent": "p-close"; "clickItem": "p-click-item"; }, never, never, true, never>;
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@po-ui/ng-components",
-  "version": "19.33.0",
+  "version": "19.35.0-beta.1",
   "description": "PO UI - Components",
   "author": "PO UI",
   "license": "MIT",
@@ -22,8 +22,8 @@
   },
   "dependencies": {
     "@angular/cdk": "~19.0.3",
-    "@po-ui/style": "19.33.0",
-    "@po-ui/ng-schematics": "19.33.0",
+    "@po-ui/style": "19.35.0-beta.1",
+    "@po-ui/ng-schematics": "19.35.0-beta.1",
     "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.33.0",
+    "@po-ui/style": "19.35.0-beta.1",
     "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.33.0');
+        (0, package_config_1.addPackageToPackageJson)(tree, '@po-ui/ng-components', '19.35.0-beta.1');
         // 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.33.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.35.0-beta.1', 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.33.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.35.0-beta.1', 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.33.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.35.0-beta.1', 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.33.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.35.0-beta.1', 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.33.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.35.0-beta.1', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
         }
         else {
             return (0, schematics_1.chain)([
-                (0, package_config_1.updatePackageJson)('19.33.0', changes_1.updateDepedenciesVersion),
+                (0, package_config_1.updatePackageJson)('19.35.0-beta.1', 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.33.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.35.0-beta.1', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
         }
         else {
             return (0, schematics_1.chain)([
-                (0, package_config_1.updatePackageJson)('19.33.0', changes_1.updateDepedenciesVersion),
+                (0, package_config_1.updatePackageJson)('19.35.0-beta.1', 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.33.0', changes_1.dependeciesChanges),
+        updatePackageJson('19.35.0-beta.1', 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.33.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.35.0-beta.1', 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.33.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.35.0-beta.1', 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.33.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.35.0-beta.1', 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.33.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.35.0-beta.1', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {