@po-ui/ng-components 20.7.0 → 20.9.0

package/index.d.ts

@@ -10,7 +10,7 @@ import { Router } from '@angular/router';
 import * as i3$1 from '@angular/forms';
 import { ControlValueAccessor, AbstractControl, Validator, ValidationErrors, NgForm } from '@angular/forms';
 import * as i3 from '@angular/cdk/overlay';
-import * as i8 from '@angular/cdk/listbox';
+import * as i9 from '@angular/cdk/listbox';
 import * as _po_ui_ng_components from '@po-ui/ng-components';
 import { HttpHeaders, HttpClient, HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse, HttpErrorResponse } from '@angular/common/http';
 import * as i19 from '@angular/cdk/drag-drop';
@@ -1795,6 +1795,7 @@ declare class PoItemListBaseComponent {
      * Define um ícone que será exibido ao lado esquerdo do rótulo.
      */
     icon: string | TemplateRef<void>;
+    iconPosition: 'left' | 'right';
     /**
      * @optional
      *
@@ -1825,7 +1826,7 @@ 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;
@@ -1859,6 +1860,8 @@ declare class PoItemListComponent extends PoItemListBaseComponent implements OnC
  * Interface para definição de literais utilizadas no `po-listbox`
  */
 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. */
@@ -1922,6 +1925,7 @@ declare class PoListBoxBaseComponent {
     private _literals;
     private language;
     private _size?;
+    listboxSubitems: boolean;
     visible: boolean;
     set type(value: string);
     get type(): PoItemListType;
@@ -1932,18 +1936,11 @@ 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;
@@ -1969,6 +1966,13 @@ 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>;
@@ -1976,7 +1980,7 @@ 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;
@@ -1985,22 +1989,183 @@ declare class PoListBoxBaseComponent {
     static ngAcceptInputType_cache: any;
 }
 
-declare class PoListBoxComponent extends PoListBoxBaseComponent implements AfterViewInit, OnChanges, OnDestroy {
+/**
+ * @usedBy PoPopupComponent, PoWidgetComponent
+ *
+ * @description
+ *
+ * Interface para lista de ações do componente.
+ */
+interface PoPopupAction {
+    /**
+     * @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)`
+     */
+    action?: Function;
+    /**
+     * @description
+     *
+     * Define um ícone que será exibido ao lado esquerdo do rótulo.
+     *
+     * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
+     * ```
+     * <po-component
+     *  [p-property]="[{ label: 'PHOSPHOR ICON', icon: 'an an-newspaper' }]">
+     * </po-component>
+     * ```
+     *
+     * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma:
+     * ```
+     * <po-component
+     *  [p-property]="[{ label: 'FA ICON', icon: 'fa fa-icon-podcast' }]">
+     * </po-component>
+     * ```
+     *
+     * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo:
+     * component.html:
+     * ```
+     * <ng-template #iconTemplate>
+     *   <ion-icon name="heart"></ion-icon>
+     * </ng-template>
+     *
+     * <po-component [p-property]="myProperty"></po-component>
+     * ```
+     * component.ts:
+     * ```
+     * @ViewChild('iconTemplate', { static: true } ) iconTemplate : TemplateRef<void>;
+     *
+     * myProperty = [
+     *  {
+     *    label: 'FA ICON',
+     *    icon: this.iconTemplate
+     *  }
+     * ];
+     * ```
+     */
+    icon?: string | TemplateRef<void>;
+    /**
+     * @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;
+    /**
+     * @description
+     *
+     * Define a cor do item, sendo `default` o padrão.
+     *
+     * Valores válidos:
+     *  - `default`
+     *  - `danger` - indicado para ações exclusivas (excluir, sair).
+     */
+    type?: string;
+    /**
+     * @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;
+    /**
+     * @description
+     *
+     * Define se a ação está selecionada.
+     *
+     */
+    selected?: boolean;
+    /**
+     * @description
+     *
+     * Define se a ação será visível.
+     *
+     * > Caso o valor não seja especificado a ação será visível.
+     *
+     * Opções para tornar a ação visível ou não:
+     *
+     *  - Função que deve retornar um booleano.
+     *
+     *  - Informar diretamente um valor booleano.
+     *
+     */
+    visible?: boolean | Function;
+    $id?: string;
+}
+
+/**
+ * @description
+ * Interface do componente po-dropdown
+ *
+ * @docsExtends PoPopupAction
+ *
+ * @usedBy PoDropdownComponent
+ */
+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>;
+}
+
+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 }: {
@@ -2027,6 +2192,7 @@ declare class PoListBoxComponent extends PoListBoxBaseComponent implements After
     private includeInfiniteScroll;
     protected returnBooleanValue(itemListAction: any, property: string): any;
     private setListBoxMaxHeight;
+    private setListBoxWidth;
     private openUrl;
     onClickTabs(tab: any): void;
     formatItemList(item: any): string;
@@ -3736,109 +3902,10 @@ declare class PoCheckboxModule {
 
 declare class PoListBoxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<PoListBoxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PoListBoxModule, [typeof PoListBoxComponent, typeof PoItemListComponent, typeof PoSearchListComponent], [typeof i2.CommonModule, typeof PoCheckboxModule, typeof PoIconModule, typeof PoLoadingModule, typeof i8.CdkListboxModule], [typeof PoListBoxComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PoListBoxModule, [typeof PoListBoxComponent, typeof PoItemListComponent, typeof PoSearchListComponent], [typeof i2.CommonModule, typeof PoCheckboxModule, typeof PoIconModule, typeof PoLoadingModule, typeof PoTagModule, typeof i9.CdkListboxModule], [typeof PoListBoxComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<PoListBoxModule>;
 }
 
-/**
- * @usedBy PoPopupComponent, PoWidgetComponent
- *
- * @description
- *
- * Interface para lista de ações do componente.
- */
-interface PoPopupAction {
-    /** Rótulo da ação. */
-    label: string;
-    /**
-     * Ação que será executada, sendo possível passar o nome ou a referência da função.
-     *
-     * > 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)`
-     */
-    action?: Function;
-    /**
-     * @description
-     *
-     * Define um ícone que será exibido ao lado esquerdo do rótulo.
-     *
-     * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
-     * ```
-     * <po-component
-     *  [p-property]="[{ label: 'PHOSPHOR ICON', icon: 'an an-newspaper' }]">
-     * </po-component>
-     * ```
-     *
-     * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma:
-     * ```
-     * <po-component
-     *  [p-property]="[{ label: 'FA ICON', icon: 'fa fa-icon-podcast' }]">
-     * </po-component>
-     * ```
-     *
-     * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo:
-     * component.html:
-     * ```
-     * <ng-template #iconTemplate>
-     *   <ion-icon name="heart"></ion-icon>
-     * </ng-template>
-     *
-     * <po-component [p-property]="myProperty"></po-component>
-     * ```
-     * component.ts:
-     * ```
-     * @ViewChild('iconTemplate', { static: true } ) iconTemplate : TemplateRef<void>;
-     *
-     * myProperty = [
-     *  {
-     *    label: 'FA ICON',
-     *    icon: this.iconTemplate
-     *  }
-     * ];
-     * ```
-     */
-    icon?: string | TemplateRef<void>;
-    /** Atribui uma linha separadora acima do item. */
-    separator?: boolean;
-    /**
-     * 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;
-    /**
-     * @description
-     *
-     * Define a cor do item, sendo `default` o padrão.
-     *
-     * Valores válidos:
-     *  - `default`
-     *  - `danger` - indicado para ações exclusivas (excluir, sair).
-     */
-    type?: string;
-    /** URL utilizada no redirecionamento das páginas. */
-    url?: string;
-    /** Define se a ação está selecionada. */
-    selected?: boolean;
-    /**
-     * @description
-     *
-     * Define se a ação será visível.
-     *
-     * > Caso o valor não seja especificado a ação será visível.
-     *
-     * Opções para tornar a ação visível ou não:
-     *
-     *  - Função que deve retornar um booleano.
-     *
-     *  - Informar diretamente um valor booleano.
-     *
-     */
-    visible?: boolean | Function;
-    $id?: string;
-}
-
 /**
  * @description
  *
@@ -3914,6 +3981,7 @@ 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>;
@@ -4045,7 +4113,7 @@ 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>;
 }
 
 /**
@@ -9504,17 +9572,6 @@ declare class PoSwitchModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<PoSwitchModule>;
 }
 
-/**
- * @description
- * Interface do componente po-dropdown
- *
- * @docsExtends PoPopupAction
- *
- * @usedBy PoDropdownComponent
- */
-interface PoDropdownAction extends PoPopupAction {
-}
-
 /**
  * @description
  *
@@ -9626,6 +9683,11 @@ declare class PoDropdownBaseComponent {
  *  <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>
@@ -26171,16 +26233,17 @@ declare class PoPageContentComponent extends PoPageContentBaseComponent implemen
  * @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
  */
-interface PoPageAction extends PoPopupAction {
+interface PoPageAction extends PoDropdownAction {
 }
 
 /**
@@ -31042,6 +31105,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;
@@ -31142,6 +31210,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/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-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

@@ -76,6 +76,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
      *

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

@@ -22,6 +22,7 @@ export declare class PoListBoxBaseComponent {
     private _literals;
     private language;
     private _size?;
+    listboxSubitems: boolean;
     visible: boolean;
     set type(value: string);
     get type(): PoItemListType;
@@ -32,18 +33,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;
@@ -69,6 +63,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>;

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

@@ -1,25 +1,35 @@
-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';
-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 }: {
@@ -46,6 +56,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-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 {
 }