@po-ui/ng-components 20.7.0 → 20.9.0

package/fesm2022/po-ui-ng-components.mjs

@@ -8,7 +8,7 @@ import { trigger, transition, style, animate, group, query, animateChild, state,
 import { Subject, filter, fromEvent, debounceTime, Subscription, switchMap, isObservable, of, ReplaySubject, timer, throwError, Observable, map as map$1, catchError as catchError$1, startWith, delay as delay$1 } from 'rxjs';
 import * as i1$1 from '@angular/router';
 import { RouterModule, Router, NavigationEnd, NavigationCancel } from '@angular/router';
-import * as i2$1 from '@angular/cdk/listbox';
+import * as i4 from '@angular/cdk/listbox';
 import { CdkListboxModule } from '@angular/cdk/listbox';
 import * as i1$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS, Validators, NgControl, NgForm, ControlContainer } from '@angular/forms';
@@ -4555,6 +4555,8 @@ class PoPopupBaseComponent {
     _position = poPopupDefaultPosition;
     _size = undefined;
     _target;
+    // Indica se há um listbox com subitens
+    listboxSubitems = false;
     /** Lista de ações que serão exibidas no componente. */
     set actions(value) {
         this._actions = Array.isArray(value) ? value : [];
@@ -4715,11 +4717,14 @@ class PoPopupBaseComponent {
     closeEvent = new EventEmitter();
     clickItem = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoPopupBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: PoPopupBaseComponent, isStandalone: true, inputs: { actions: ["p-actions", "actions"], hideArrow: ["p-hide-arrow", "hideArrow"], isCornerAlign: ["p-is-corner-align", "isCornerAlign"], position: ["p-position", "position"], customPositions: ["p-custom-positions", "customPositions"], size: ["p-size", "size"], target: ["p-target", "target"] }, outputs: { closeEvent: "p-close", clickItem: "p-click-item" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: PoPopupBaseComponent, isStandalone: true, inputs: { listboxSubitems: ["p-listbox-subitems", "listboxSubitems"], actions: ["p-actions", "actions"], hideArrow: ["p-hide-arrow", "hideArrow"], isCornerAlign: ["p-is-corner-align", "isCornerAlign"], position: ["p-position", "position"], customPositions: ["p-custom-positions", "customPositions"], size: ["p-size", "size"], target: ["p-target", "target"] }, outputs: { closeEvent: "p-close", clickItem: "p-click-item" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoPopupBaseComponent, decorators: [{
             type: Directive
-        }], propDecorators: { actions: [{
+        }], propDecorators: { listboxSubitems: [{
+                type: Input,
+                args: ['p-listbox-subitems']
+            }], actions: [{
                 type: Input,
                 args: ['p-actions']
             }], hideArrow: [{
@@ -4768,15 +4773,19 @@ var PoItemListFilterMode;
 
 const poListBoxLiteralsDefault = {
     en: {
+        backToPreviousGroup: 'Go back to the previous list',
         noItems: 'No items found'
     },
     es: {
+        backToPreviousGroup: 'Volver a la lista anterior',
         noItems: 'No se encontraron artículos'
     },
     pt: {
+        backToPreviousGroup: 'Voltar para a lista anterior',
         noItems: 'Nenhum item encontrado'
     },
     ru: {
+        backToPreviousGroup: 'Вернуться к предыдущему списку',
         noItems: 'ничего не найдено'
     }
 };
@@ -4790,6 +4799,7 @@ class PoListBoxBaseComponent {
     _literals;
     language = poLocaleDefault;
     _size = undefined;
+    listboxSubitems = false;
     visible = false;
     set type(value) {
         this._type = PoItemListType[value] ?? 'action';
@@ -4824,16 +4834,6 @@ class PoListBoxBaseComponent {
     isTabs = false;
     // parâmetro que pode ser passado para o popup ao clicar em um item
     param;
-    selectItem = new EventEmitter();
-    closeEvent = new EventEmitter();
-    // MULTISELECT PROPERTIES
-    //output para evento do checkbox
-    change = new EventEmitter();
-    //output para evento do checkbox
-    selectCombo = new EventEmitter();
-    //output para evento do checkbox de selecionar todos
-    changeAll = new EventEmitter();
-    UpdateInfiniteScroll = new EventEmitter();
     //valor do checkbox de selecionar todos
     checkboxAllValue;
     // Propriedade que recebe a lista de opções selecionadas.
@@ -4842,8 +4842,6 @@ class PoListBoxBaseComponent {
     selectedOption;
     fieldValue = 'value';
     fieldLabel = 'label';
-    // Evento disparado a cada tecla digitada na pesquisa.
-    changeSearch = new EventEmitter();
     // Propriedade que recebe as literais definidas no componente `po-multiselect`.
     literalSearch;
     // Propriedade que recebe o valor de comparação de pesquisa
@@ -4882,6 +4880,18 @@ class PoListBoxBaseComponent {
     placeholderListbox;
     // Define se haverá ou não um separador entre todos os itens do listbox
     separator = false;
+    // Evento disparado a cada tecla digitada na pesquisa.
+    changeSearch = new EventEmitter();
+    selectItem = new EventEmitter();
+    closeEvent = new EventEmitter();
+    // MULTISELECT PROPERTIES
+    //output para evento do checkbox
+    change = new EventEmitter();
+    //output para evento do checkbox
+    selectCombo = new EventEmitter();
+    //output para evento do checkbox de selecionar todos
+    changeAll = new EventEmitter();
+    UpdateInfiniteScroll = new EventEmitter();
     // Evento disparado quando uma tab é ativada
     activatedTab = new EventEmitter();
     // Evento disparado no click de uma aba do tabs
@@ -4894,11 +4904,14 @@ class PoListBoxBaseComponent {
         this.language = languageService.getShortLanguage();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoListBoxBaseComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.7", type: PoListBoxBaseComponent, isStandalone: true, inputs: { visible: ["p-visible", "visible", convertToBoolean], type: ["p-type", "type"], items: ["p-items", "items"], literals: ["p-literals", "literals"], isTabs: ["p-is-tabs", "isTabs", convertToBoolean], param: ["p-param", "param"], checkboxAllValue: ["p-checkboxAllValue", "checkboxAllValue"], selectedOptions: ["p-selected-options", "selectedOptions"], selectedOption: ["p-selected-option", "selectedOption"], fieldValue: ["p-field-value", "fieldValue"], fieldLabel: ["p-field-label", "fieldLabel"], literalSearch: ["p-literal-search", "literalSearch"], fieldValueSearch: ["p-field-value-search", "fieldValueSearch"], hideSearch: ["p-hide-search", "hideSearch"], hideSelectAll: ["p-hide-select-all", "hideSelectAll"], multiselectTemplate: ["p-multiselect-template", "multiselectTemplate"], template: ["p-template", "template"], placeholderSearch: ["p-placeholder-search", "placeholderSearch"], searchValue: ["p-search-value", "searchValue"], isServerSearching: ["p-is-searching", "isServerSearching", convertToBoolean], infiniteLoading: ["p-infinite-loading", "infiniteLoading", convertToBoolean], infiniteScroll: ["p-infinite-scroll", "infiniteScroll", convertToBoolean], cache: ["p-cache", "cache", convertToBoolean], infiniteScrollDistance: ["p-infinite-scroll-distance", "infiniteScrollDistance"], filterMode: ["p-filter-mode", "filterMode"], isFiltering: ["p-filtering", "isFiltering"], shouldMarkLetters: ["p-should-mark-letter", "shouldMarkLetters"], size: ["p-size", "size"], compareCache: ["p-compare-cache", "compareCache"], comboService: ["p-combo-service", "comboService"], containerWidth: ["p-container-width", "containerWidth"], keysLabel: ["p-keys-label", "keysLabel"], footerActionListbox: ["p-footer-action-listbox", "footerActionListbox"], placeholderListbox: ["p-placeholder-listbox", "placeholderListbox"], separator: ["p-separator", "separator"] }, outputs: { 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" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.7", type: PoListBoxBaseComponent, isStandalone: true, inputs: { listboxSubitems: ["p-listbox-subitems", "listboxSubitems"], visible: ["p-visible", "visible", convertToBoolean], type: ["p-type", "type"], items: ["p-items", "items"], literals: ["p-literals", "literals"], isTabs: ["p-is-tabs", "isTabs", convertToBoolean], param: ["p-param", "param"], checkboxAllValue: ["p-checkboxAllValue", "checkboxAllValue"], selectedOptions: ["p-selected-options", "selectedOptions"], selectedOption: ["p-selected-option", "selectedOption"], fieldValue: ["p-field-value", "fieldValue"], fieldLabel: ["p-field-label", "fieldLabel"], literalSearch: ["p-literal-search", "literalSearch"], fieldValueSearch: ["p-field-value-search", "fieldValueSearch"], hideSearch: ["p-hide-search", "hideSearch"], hideSelectAll: ["p-hide-select-all", "hideSelectAll"], multiselectTemplate: ["p-multiselect-template", "multiselectTemplate"], template: ["p-template", "template"], placeholderSearch: ["p-placeholder-search", "placeholderSearch"], searchValue: ["p-search-value", "searchValue"], isServerSearching: ["p-is-searching", "isServerSearching", convertToBoolean], infiniteLoading: ["p-infinite-loading", "infiniteLoading", convertToBoolean], infiniteScroll: ["p-infinite-scroll", "infiniteScroll", convertToBoolean], cache: ["p-cache", "cache", convertToBoolean], infiniteScrollDistance: ["p-infinite-scroll-distance", "infiniteScrollDistance"], filterMode: ["p-filter-mode", "filterMode"], isFiltering: ["p-filtering", "isFiltering"], shouldMarkLetters: ["p-should-mark-letter", "shouldMarkLetters"], size: ["p-size", "size"], compareCache: ["p-compare-cache", "compareCache"], comboService: ["p-combo-service", "comboService"], containerWidth: ["p-container-width", "containerWidth"], keysLabel: ["p-keys-label", "keysLabel"], footerActionListbox: ["p-footer-action-listbox", "footerActionListbox"], placeholderListbox: ["p-placeholder-listbox", "placeholderListbox"], separator: ["p-separator", "separator"] }, outputs: { 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" }, host: { properties: { "attr.p-size": "this.size" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoListBoxBaseComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: PoLanguageService }], propDecorators: { visible: [{
+        }], ctorParameters: () => [{ type: PoLanguageService }], propDecorators: { listboxSubitems: [{
+                type: Input,
+                args: ['p-listbox-subitems']
+            }], visible: [{
                 type: Input,
                 args: [{ alias: 'p-visible', transform: convertToBoolean }]
             }], type: [{
@@ -4916,24 +4929,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }], param: [{
                 type: Input,
                 args: ['p-param']
-            }], selectItem: [{
-                type: Output,
-                args: ['p-select-item']
-            }], closeEvent: [{
-                type: Output,
-                args: ['p-close']
-            }], change: [{
-                type: Output,
-                args: ['p-change']
-            }], selectCombo: [{
-                type: Output,
-                args: ['p-selectcombo-item']
-            }], changeAll: [{
-                type: Output,
-                args: ['p-change-all']
-            }], UpdateInfiniteScroll: [{
-                type: Output,
-                args: ['p-update-infinite-scroll']
             }], checkboxAllValue: [{
                 type: Input,
                 args: ['p-checkboxAllValue']
@@ -4949,9 +4944,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }], fieldLabel: [{
                 type: Input,
                 args: ['p-field-label']
-            }], changeSearch: [{
-                type: Output,
-                args: ['p-change-search']
             }], literalSearch: [{
                 type: Input,
                 args: ['p-literal-search']
@@ -5001,6 +4993,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                 type: Input,
                 args: ['p-should-mark-letter']
             }], size: [{
+                type: HostBinding,
+                args: ['attr.p-size']
+            }, {
                 type: Input,
                 args: ['p-size']
             }], compareCache: [{
@@ -5024,6 +5019,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }], separator: [{
                 type: Input,
                 args: ['p-separator']
+            }], changeSearch: [{
+                type: Output,
+                args: ['p-change-search']
+            }], selectItem: [{
+                type: Output,
+                args: ['p-select-item']
+            }], closeEvent: [{
+                type: Output,
+                args: ['p-close']
+            }], change: [{
+                type: Output,
+                args: ['p-change']
+            }], selectCombo: [{
+                type: Output,
+                args: ['p-selectcombo-item']
+            }], changeAll: [{
+                type: Output,
+                args: ['p-change-all']
+            }], UpdateInfiniteScroll: [{
+                type: Output,
+                args: ['p-update-infinite-scroll']
             }], activatedTab: [{
                 type: Output,
                 args: ['p-activated-tabs']
@@ -5521,6 +5537,8 @@ class PoItemListBaseComponent {
      * Define um ícone que será exibido ao lado esquerdo do rótulo.
      */
     icon;
+    // Define a posição do ícone: 'left' (padrão) ou 'right'.
+    iconPosition = 'left';
     /**
      * @optional
      *
@@ -5566,7 +5584,7 @@ class PoItemListBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoItemListBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.7", type: PoItemListBaseComponent, isStandalone: true, inputs: { type: ["p-type", "type"], visible: ["p-visible", "visible"], item: ["p-item", "item"], label: ["p-label", "label"], size: ["p-size", "size"], value: ["p-value", "value"], danger: ["p-danger", "danger", convertToBoolean], disabled: ["p-disabled", "disabled"], selected: ["p-selected", "selected", convertToBoolean], separator: ["p-separator", "separator", convertToBoolean], icon: ["p-icon", "icon"], checkboxValue: ["p-checkbox-value", "checkboxValue"], fieldValue: ["p-field-value", "fieldValue"], fieldLabel: ["p-field-label", "fieldLabel"], template: ["p-template", "template"], templateContext: ["p-template-context", "templateContext"], searchValue: ["p-search-value", "searchValue"], filterMode: ["p-filter-mode", "filterMode"], isFiltering: ["p-filtering", "isFiltering"], shouldMarkLetters: ["p-should-mark-letter", "shouldMarkLetters"], compareCache: ["p-compare-cache", "compareCache"], comboService: ["p-combo-service", "comboService"], isTabs: ["p-is-tabs", "isTabs"], tabHide: ["p-tab-hide", "tabHide"], activeTabs: ["p-active-tabs", "activeTabs"], keysLabel: ["p-keys-label", "keysLabel"] }, outputs: { clickItem: "p-click-item", checkboxItem: "p-selectcheckbox-item", comboItem: "p-selectcombo-item", tabsItem: "p-emit-item-tabs", activatedTab: "p-activated-tabs" }, host: { properties: { "attr.p-type": "this.type" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.7", type: PoItemListBaseComponent, isStandalone: true, inputs: { type: ["p-type", "type"], visible: ["p-visible", "visible"], item: ["p-item", "item"], label: ["p-label", "label"], size: ["p-size", "size"], value: ["p-value", "value"], danger: ["p-danger", "danger", convertToBoolean], disabled: ["p-disabled", "disabled"], selected: ["p-selected", "selected", convertToBoolean], separator: ["p-separator", "separator", convertToBoolean], icon: ["p-icon", "icon"], iconPosition: ["p-icon-position", "iconPosition"], checkboxValue: ["p-checkbox-value", "checkboxValue"], fieldValue: ["p-field-value", "fieldValue"], fieldLabel: ["p-field-label", "fieldLabel"], template: ["p-template", "template"], templateContext: ["p-template-context", "templateContext"], searchValue: ["p-search-value", "searchValue"], filterMode: ["p-filter-mode", "filterMode"], isFiltering: ["p-filtering", "isFiltering"], shouldMarkLetters: ["p-should-mark-letter", "shouldMarkLetters"], compareCache: ["p-compare-cache", "compareCache"], comboService: ["p-combo-service", "comboService"], isTabs: ["p-is-tabs", "isTabs"], tabHide: ["p-tab-hide", "tabHide"], activeTabs: ["p-active-tabs", "activeTabs"], keysLabel: ["p-keys-label", "keysLabel"] }, outputs: { clickItem: "p-click-item", checkboxItem: "p-selectcheckbox-item", comboItem: "p-selectcombo-item", tabsItem: "p-emit-item-tabs", activatedTab: "p-activated-tabs" }, host: { properties: { "attr.p-type": "this.type", "attr.p-size": "this.size" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoItemListBaseComponent, decorators: [{
             type: Directive
@@ -5586,6 +5604,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                 type: Input,
                 args: ['p-label']
             }], size: [{
+                type: HostBinding,
+                args: ['attr.p-size']
+            }, {
                 type: Input,
                 args: ['p-size']
             }], value: [{
@@ -5606,6 +5627,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }], icon: [{
                 type: Input,
                 args: ['p-icon']
+            }], iconPosition: [{
+                type: Input,
+                args: ['p-icon-position']
             }], clickItem: [{
                 type: Output,
                 args: ['p-click-item']
@@ -8030,11 +8054,11 @@ class PoItemListComponent extends PoItemListBaseComponent {
         return value.replace(/</g, '&lt;').replace(/>/g, '&gt;');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoItemListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoItemListComponent, isStandalone: false, selector: "po-item-list", viewQueries: [{ propertyName: "itemList", first: true, predicate: ["itemList"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container (keydown)=\"onCheckboxItemEmit($event)\">\n  @switch (type) {\n    @default {\n      <div\n        #itemList\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__disabled]=\"disabled || !visible\"\n        [class.po-item-list__selected]=\"(selected || activeTabs) && !disabled\"\n        [class.po-item-list__hidden]=\"tabHide\"\n        [attr.aria-disabled]=\"disabled || !visible\"\n        [attr.aria-label]=\"label\"\n        [class.po-item-list__danger]=\"danger\"\n        class=\"po-item-list po-item-list__action\"\n      >\n        @if (icon) {\n          <po-icon class=\"po-popup-icon-item\" [p-icon]=\"icon\"></po-icon>\n        }\n        <span class=\"po-item-list-label\">{{ label }}</span>\n      </div>\n    }\n    @case ('option') {\n      <div\n        #itemList\n        class=\"po-item-list po-item-list__option\"\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__selected]=\"selected && !disabled\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        (click)=\"onComboItem(item, $event)\"\n      >\n        @if (!template) {\n          @switch (keysLabel.length) {\n            @case (0) {\n              <span class=\"po-item-list-label\" [innerHTML]=\"getLabelFormatted(label)\"></span>\n            }\n\n            @case (1) {\n              <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n            }\n\n            @case (2) {\n              <div class=\"po-item-list-label po-item-list-label-group\">\n                <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n                <span class=\"po-item-list-sublabel\">{{ item[keysLabel[1]] }}</span>\n              </div>\n            }\n\n            @default {\n              <div class=\"po-item-list-label po-item-list-label-group\">\n                <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n                <span class=\"po-item-list-sublabel\">{{ item[keysLabel[1]] }} - {{ item[keysLabel[2]] }}</span>\n              </div>\n            }\n          }\n        }\n\n        <ng-template\n          [ngTemplateOutlet]=\"template?.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"\n        >\n        </ng-template>\n      </div>\n    }\n    @case ('check') {\n      <div\n        class=\"po-item-list po-item-list__check\"\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__selected]=\"selected && !disabled\"\n        [class.po-item-list__disabled]=\"disabled\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        (click)=\"onCheckboxItem()\"\n        (keydown)=\"onCheckboxItemEmit($event)\"\n        (keyup)=\"onCheckboxItemEmit($event)\"\n      >\n        <po-checkbox\n          [p-disabled-tabindex]=\"true\"\n          [p-checkboxValue]=\"checkboxValue === null ? 'mixed' : checkboxValue\"\n          [p-disabled]=\"disabled\"\n          [p-size]=\"size\"\n        ></po-checkbox>\n        @if (!template) {\n          <span class=\"po-item-list__label\">{{ label }}</span>\n        }\n        <ng-template\n          [ngTemplateOutlet]=\"template?.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"\n        >\n        </ng-template>\n      </div>\n    }\n  }\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoCheckboxComponent, selector: "po-checkbox" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoItemListComponent, isStandalone: false, selector: "po-item-list", viewQueries: [{ propertyName: "itemList", first: true, predicate: ["itemList"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container (keydown)=\"onCheckboxItemEmit($event)\">\n  @switch (type) {\n    @default {\n      <div\n        #itemList\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__disabled]=\"disabled || !visible\"\n        [class.po-item-list__selected]=\"(selected || activeTabs) && !disabled\"\n        [class.po-item-list__hidden]=\"tabHide\"\n        [attr.aria-disabled]=\"disabled || !visible\"\n        [attr.aria-label]=\"label\"\n        [class.po-item-list__danger]=\"danger\"\n        class=\"po-item-list po-item-list__action\"\n      >\n        @if (icon && iconPosition === 'left') {\n          <po-icon\n            class=\"po-popup-icon-item po-field-icon\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            [p-icon]=\"icon\"\n          ></po-icon>\n        }\n        <span class=\"po-item-list-label\">{{ label }}</span>\n\n        @if (icon && iconPosition === 'right') {\n          <po-icon class=\"po-popup-icon-item-right po-field-icon\" [p-icon]=\"icon\"></po-icon>\n        }\n      </div>\n    }\n    @case ('option') {\n      <div\n        #itemList\n        class=\"po-item-list po-item-list__option\"\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__selected]=\"selected && !disabled\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        (click)=\"onComboItem(item, $event)\"\n      >\n        @if (!template) {\n          @switch (keysLabel.length) {\n            @case (0) {\n              <span class=\"po-item-list-label\" [innerHTML]=\"getLabelFormatted(label)\"></span>\n            }\n\n            @case (1) {\n              <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n            }\n\n            @case (2) {\n              <div class=\"po-item-list-label po-item-list-label-group\">\n                <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n                <span class=\"po-item-list-sublabel\">{{ item[keysLabel[1]] }}</span>\n              </div>\n            }\n\n            @default {\n              <div class=\"po-item-list-label po-item-list-label-group\">\n                <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n                <span class=\"po-item-list-sublabel\">{{ item[keysLabel[1]] }} - {{ item[keysLabel[2]] }}</span>\n              </div>\n            }\n          }\n        }\n\n        <ng-template\n          [ngTemplateOutlet]=\"template?.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"\n        >\n        </ng-template>\n      </div>\n    }\n    @case ('check') {\n      <div\n        class=\"po-item-list po-item-list__check\"\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__selected]=\"selected && !disabled\"\n        [class.po-item-list__disabled]=\"disabled\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        (click)=\"onCheckboxItem()\"\n        (keydown)=\"onCheckboxItemEmit($event)\"\n        (keyup)=\"onCheckboxItemEmit($event)\"\n      >\n        <po-checkbox\n          [p-disabled-tabindex]=\"true\"\n          [p-checkboxValue]=\"checkboxValue === null ? 'mixed' : checkboxValue\"\n          [p-disabled]=\"disabled\"\n          [p-size]=\"size\"\n        ></po-checkbox>\n        @if (!template) {\n          <span class=\"po-item-list__label\">{{ label }}</span>\n        }\n        <ng-template\n          [ngTemplateOutlet]=\"template?.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"\n        >\n        </ng-template>\n      </div>\n    }\n  }\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoCheckboxComponent, selector: "po-checkbox" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoItemListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-item-list', standalone: false, template: "<ng-container (keydown)=\"onCheckboxItemEmit($event)\">\n  @switch (type) {\n    @default {\n      <div\n        #itemList\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__disabled]=\"disabled || !visible\"\n        [class.po-item-list__selected]=\"(selected || activeTabs) && !disabled\"\n        [class.po-item-list__hidden]=\"tabHide\"\n        [attr.aria-disabled]=\"disabled || !visible\"\n        [attr.aria-label]=\"label\"\n        [class.po-item-list__danger]=\"danger\"\n        class=\"po-item-list po-item-list__action\"\n      >\n        @if (icon) {\n          <po-icon class=\"po-popup-icon-item\" [p-icon]=\"icon\"></po-icon>\n        }\n        <span class=\"po-item-list-label\">{{ label }}</span>\n      </div>\n    }\n    @case ('option') {\n      <div\n        #itemList\n        class=\"po-item-list po-item-list__option\"\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__selected]=\"selected && !disabled\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        (click)=\"onComboItem(item, $event)\"\n      >\n        @if (!template) {\n          @switch (keysLabel.length) {\n            @case (0) {\n              <span class=\"po-item-list-label\" [innerHTML]=\"getLabelFormatted(label)\"></span>\n            }\n\n            @case (1) {\n              <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n            }\n\n            @case (2) {\n              <div class=\"po-item-list-label po-item-list-label-group\">\n                <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n                <span class=\"po-item-list-sublabel\">{{ item[keysLabel[1]] }}</span>\n              </div>\n            }\n\n            @default {\n              <div class=\"po-item-list-label po-item-list-label-group\">\n                <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n                <span class=\"po-item-list-sublabel\">{{ item[keysLabel[1]] }} - {{ item[keysLabel[2]] }}</span>\n              </div>\n            }\n          }\n        }\n\n        <ng-template\n          [ngTemplateOutlet]=\"template?.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"\n        >\n        </ng-template>\n      </div>\n    }\n    @case ('check') {\n      <div\n        class=\"po-item-list po-item-list__check\"\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__selected]=\"selected && !disabled\"\n        [class.po-item-list__disabled]=\"disabled\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        (click)=\"onCheckboxItem()\"\n        (keydown)=\"onCheckboxItemEmit($event)\"\n        (keyup)=\"onCheckboxItemEmit($event)\"\n      >\n        <po-checkbox\n          [p-disabled-tabindex]=\"true\"\n          [p-checkboxValue]=\"checkboxValue === null ? 'mixed' : checkboxValue\"\n          [p-disabled]=\"disabled\"\n          [p-size]=\"size\"\n        ></po-checkbox>\n        @if (!template) {\n          <span class=\"po-item-list__label\">{{ label }}</span>\n        }\n        <ng-template\n          [ngTemplateOutlet]=\"template?.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"\n        >\n        </ng-template>\n      </div>\n    }\n  }\n</ng-container>\n" }]
+            args: [{ selector: 'po-item-list', standalone: false, template: "<ng-container (keydown)=\"onCheckboxItemEmit($event)\">\n  @switch (type) {\n    @default {\n      <div\n        #itemList\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__disabled]=\"disabled || !visible\"\n        [class.po-item-list__selected]=\"(selected || activeTabs) && !disabled\"\n        [class.po-item-list__hidden]=\"tabHide\"\n        [attr.aria-disabled]=\"disabled || !visible\"\n        [attr.aria-label]=\"label\"\n        [class.po-item-list__danger]=\"danger\"\n        class=\"po-item-list po-item-list__action\"\n      >\n        @if (icon && iconPosition === 'left') {\n          <po-icon\n            class=\"po-popup-icon-item po-field-icon\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            [p-icon]=\"icon\"\n          ></po-icon>\n        }\n        <span class=\"po-item-list-label\">{{ label }}</span>\n\n        @if (icon && iconPosition === 'right') {\n          <po-icon class=\"po-popup-icon-item-right po-field-icon\" [p-icon]=\"icon\"></po-icon>\n        }\n      </div>\n    }\n    @case ('option') {\n      <div\n        #itemList\n        class=\"po-item-list po-item-list__option\"\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__selected]=\"selected && !disabled\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        (click)=\"onComboItem(item, $event)\"\n      >\n        @if (!template) {\n          @switch (keysLabel.length) {\n            @case (0) {\n              <span class=\"po-item-list-label\" [innerHTML]=\"getLabelFormatted(label)\"></span>\n            }\n\n            @case (1) {\n              <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n            }\n\n            @case (2) {\n              <div class=\"po-item-list-label po-item-list-label-group\">\n                <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n                <span class=\"po-item-list-sublabel\">{{ item[keysLabel[1]] }}</span>\n              </div>\n            }\n\n            @default {\n              <div class=\"po-item-list-label po-item-list-label-group\">\n                <span class=\"po-item-list-label\">{{ item[keysLabel[0]] }}</span>\n                <span class=\"po-item-list-sublabel\">{{ item[keysLabel[1]] }} - {{ item[keysLabel[2]] }}</span>\n              </div>\n            }\n          }\n        }\n\n        <ng-template\n          [ngTemplateOutlet]=\"template?.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"\n        >\n        </ng-template>\n      </div>\n    }\n    @case ('check') {\n      <div\n        class=\"po-item-list po-item-list__check\"\n        [class.po-item-list__separator]=\"separator\"\n        [class.po-item-list__selected]=\"selected && !disabled\"\n        [class.po-item-list__disabled]=\"disabled\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        (click)=\"onCheckboxItem()\"\n        (keydown)=\"onCheckboxItemEmit($event)\"\n        (keyup)=\"onCheckboxItemEmit($event)\"\n      >\n        <po-checkbox\n          [p-disabled-tabindex]=\"true\"\n          [p-checkboxValue]=\"checkboxValue === null ? 'mixed' : checkboxValue\"\n          [p-disabled]=\"disabled\"\n          [p-size]=\"size\"\n        ></po-checkbox>\n        @if (!template) {\n          <span class=\"po-item-list__label\">{{ label }}</span>\n        }\n        <ng-template\n          [ngTemplateOutlet]=\"template?.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"\n        >\n        </ng-template>\n      </div>\n    }\n  }\n</ng-container>\n" }]
         }], propDecorators: { itemList: [{
                 type: ViewChild,
                 args: ['itemList', { static: true }]
@@ -8141,27 +8165,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
 
 class PoListBoxComponent extends PoListBoxBaseComponent {
     element = inject(ElementRef);
+    currentItems = [];
+    currentGroup = null;
+    navigationStack = [];
     renderer = inject(Renderer2);
     router = inject(Router);
     changeDetector = inject(ChangeDetectorRef);
     listbox;
     listboxItemList;
+    listboxGroupHeader;
     searchElement;
     popupHeaderContainer;
+    listboxItems;
     scrollEvent$;
     subscriptionScrollEvent;
     constructor() {
         const languageService = inject(PoLanguageService);
         super(languageService);
     }
+    ngOnInit() {
+        if (this.listboxSubitems) {
+            this.currentItems = this.items;
+        }
+    }
     ngAfterViewInit() {
         this.setListBoxMaxHeight();
+        this.setListBoxWidth();
         this.listboxItemList?.nativeElement.focus();
+        if (this.listboxSubitems) {
+            requestAnimationFrame(() => {
+                const firstItem = this.listboxItems?.first.nativeElement;
+                if (firstItem) {
+                    firstItem.focus();
+                    setTimeout(() => {
+                        firstItem.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
+                    }, 0);
+                }
+            });
+        }
         this.changeDetector.detectChanges();
     }
     ngOnChanges(changes) {
         if (changes?.items) {
             this.setListBoxMaxHeight();
+            this.setListBoxWidth();
         }
         if (this.visible && this.infiniteScroll) {
             this.checkInfiniteScroll();
@@ -8172,7 +8219,55 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
             this.subscriptionScrollEvent.unsubscribe();
         }
     }
-    onSelectItem(itemListAction) {
+    openGroup(group, event) {
+        event?.stopPropagation();
+        this.navigationStack.push({
+            group: this.currentGroup,
+            items: this.currentItems
+        });
+        this.currentGroup = group;
+        this.currentItems = group.subItems || [];
+        requestAnimationFrame(() => {
+            const firstItem = this.listboxGroupHeader?.nativeElement;
+            if (firstItem) {
+                firstItem.focus();
+                setTimeout(() => {
+                    firstItem.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
+                }, 0);
+            }
+        });
+    }
+    goBack(event) {
+        event?.stopPropagation();
+        const previous = this.navigationStack.pop();
+        if (previous) {
+            this.currentGroup = previous.group;
+            this.currentItems = previous.items;
+        }
+        else {
+            this.currentGroup = null;
+            this.currentItems = this.items;
+        }
+        this.clickItem.emit({ goBack: true });
+        requestAnimationFrame(() => {
+            const firstItem = this.listboxItems?.first?.nativeElement;
+            if (firstItem) {
+                firstItem.focus();
+                setTimeout(() => {
+                    firstItem.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
+                }, 0);
+            }
+        });
+    }
+    onKeydownGoBack(event) {
+        if (event.key === 'Enter') {
+            this.goBack(event);
+        }
+        if (event?.code === 'Escape' || event.code === 'Tab') {
+            this.closeEvent.emit();
+        }
+    }
+    onSelectItem(itemListAction, event) {
         const isDisabled = itemListAction.hasOwnProperty('disabled') &&
             itemListAction.disabled !== null &&
             itemListAction.disabled !== undefined
@@ -8186,12 +8281,18 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
         if (this.isTabs && !itemListAction.disabled && !itemListAction.hide) {
             this.onClickTabs(itemListAction);
         }
-        if (itemListAction && itemListAction.action && !isDisabled && isVisible) {
+        if (itemListAction?.action && !isDisabled && isVisible) {
             itemListAction.action(this.param || itemListAction);
         }
-        if (itemListAction && itemListAction.url && !isDisabled && isVisible) {
+        if (itemListAction?.url && !isDisabled && isVisible) {
             return this.openUrl(itemListAction.url);
         }
+        if (itemListAction?.subItems?.length) {
+            this.openGroup(itemListAction, event);
+        }
+        else if (this.listboxSubitems) {
+            this.closeEvent.emit();
+        }
         if (!isDisabled) {
             this.clickItem.emit(itemListAction);
         }
@@ -8202,7 +8303,7 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
         }
     }
     onKeyDown(itemListAction, event) {
-        event.preventDefault();
+        event?.preventDefault();
         if ((event && event.code === 'Enter') || event.code === 'Space') {
             if (itemListAction.type === 'footerAction') {
                 this.handleFooterActionListbox();
@@ -8324,9 +8425,10 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
             : itemListAction[property];
     }
     setListBoxMaxHeight() {
+        const dropdownMaxHeight = 400;
         const itemsLength = this.items.length;
         const hasPopupHeaderContainer = this.popupHeaderContainer?.nativeElement?.children?.length > 0;
-        if (itemsLength > 6) {
+        if (!this.listboxSubitems && itemsLength > 6) {
             if (this.type === 'check' && !this.hideSearch) {
                 this.renderer.setStyle(this.listbox.nativeElement, 'maxHeight', `${44 * 6 - 44 / 3 + 60}px`);
             }
@@ -8338,6 +8440,17 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
                 this.renderer.setStyle(this.listbox.nativeElement, 'maxHeight', `${44 * 6 - 44 / 3}px`);
             }
         }
+        if (this.listboxSubitems) {
+            this.renderer.setStyle(this.listbox.nativeElement, 'maxHeight', `${dropdownMaxHeight}px`);
+        }
+    }
+    setListBoxWidth() {
+        const dropdownMinWidth = 240;
+        const dropdownMaxWidth = 340;
+        if (this.listboxSubitems && this.items) {
+            this.renderer.setStyle(this.listbox.nativeElement, 'minWidth', `${dropdownMinWidth}px`);
+            this.renderer.setStyle(this.listbox.nativeElement, 'maxWidth', `${dropdownMaxWidth}px`);
+        }
     }
     openUrl(url) {
         if (isExternalLink(url)) {
@@ -8370,23 +8483,29 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
         this.closeEvent.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoListBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoListBoxComponent, isStandalone: false, selector: "po-listbox", viewQueries: [{ propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true, static: true }, { propertyName: "listboxItemList", first: true, predicate: ["listboxItemList"], descendants: true }, { propertyName: "searchElement", first: true, predicate: ["searchElement"], descendants: true }, { propertyName: "popupHeaderContainer", first: true, predicate: ["popupHeaderContainer"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  #listbox\n  class=\"po-listbox\"\n  [class.po-listbox-check]=\"type === 'check' || type === 'option'\"\n  [attr.data-type]=\"type\"\n  [attr.p-size]=\"size\"\n  [hidden]=\"visible\"\n>\n  <div #popupHeaderContainer>\n    <ng-content select=\"[p-popup-header-template]\"></ng-content>\n  </div>\n\n  @if (!hideSearch && type === 'check') {\n    <po-search-list\n      #searchElement\n      (p-change)=\"callChangeSearch($event)\"\n      [p-literals]=\"literalSearch\"\n      [p-field-value]=\"fieldValueSearch\"\n      [p-placeholder]=\"placeholderSearch\"\n      [p-size]=\"size\"\n    ></po-search-list>\n  }\n\n  @if (checkTemplate()) {\n    <ul #listboxItemList cdkListbox [cdkListboxMultiple]=\"type === 'check'\" class=\"po-listbox-list\">\n      @if (type === 'check' && items.length && !searchElement?.inputValue && !hideSelectAll) {\n        <li\n          cdkOption=\"selectAll\"\n          [attr.aria-checked]=\"checkboxAllValue === null ? 'mixed' : checkboxAllValue\"\n          class=\"po-listbox-item-type-check\"\n          (click)=\"changeAll.emit()\"\n          (keydown)=\"changeAllEmit($event)\"\n          (keydown)=\"onSelectAllCheckboxKeyDown($event)\"\n        >\n          <po-item-list\n            [p-selected]=\"checkboxAllValue\"\n            p-type=\"check\"\n            [p-label]=\"literals.selectAll\"\n            p-value=\"selectAll\"\n            [p-checkbox-value]=\"checkboxAllValue\"\n            [p-size]=\"size\"\n          >\n          </po-item-list>\n        </li>\n      }\n      @for (item of items; track item) {\n        <li\n          [class.po-listbox-item]=\"visible\"\n          [class.po-listbox-item-type-check]=\"type === 'check'\"\n          [cdkOption]=\"item[fieldLabel]\"\n          [cdkOptionDisabled]=\"\n            returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n          \"\n          [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n          (click)=\"onSelectItem(item)\"\n          (keydown)=\"onKeyDown(item, $event)\"\n        >\n          @if (item.options) {\n            <label class=\"po-combo-item-title\">\n              {{ item.label }}\n            </label>\n          }\n          @if (returnBooleanValue(item, 'visible') !== false && !item.options) {\n            <po-item-list\n              [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n              [p-visible]=\"returnBooleanValue(item, 'visible')\"\n              [p-checkbox-value]=\"isSelectedItem(item)\"\n              [attr.data-item-list]=\"formatItemList(item)\"\n              [p-label]=\"item[fieldLabel]\"\n              [p-value]=\"item[fieldValue]\"\n              [p-selected]=\"isSelectedItem(item) || item.selected\"\n              [p-active-tabs]=\"item.active\"\n              [p-separator]=\"item.separator || separator\"\n              [p-danger]=\"item.danger || item.type === 'danger'\"\n              [p-icon]=\"item.icon\"\n              [p-type]=\"type\"\n              [p-item]=\"item\"\n              [p-tab-hide]=\"item.hide\"\n              [p-is-tabs]=\"isTabs\"\n              [p-field-value]=\"fieldValue\"\n              [p-field-label]=\"fieldLabel\"\n              [p-template]=\"template\"\n              [p-template-context]=\"item\"\n              (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n              (p-selectcombo-item)=\"optionClicked(item)\"\n              (p-emit-item-tabs)=\"onSelectTabs($event)\"\n              (p-activated-tabs)=\"onActivatedTabs($event)\"\n              [p-search-value]=\"searchValue\"\n              [p-filter-mode]=\"filterMode\"\n              [p-filtering]=\"isFiltering\"\n              [p-size]=\"size\"\n              [p-should-mark-letter]=\"shouldMarkLetters\"\n              [p-compare-cache]=\"compareCache\"\n              [p-combo-service]=\"comboService\"\n              [p-keys-label]=\"keysLabel\"\n            ></po-item-list>\n          }\n        </li>\n      }\n\n      @if (footerActionListbox) {\n        @if (placeholderListbox) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ placeholderListbox }}</span>\n          </div>\n        }\n\n        @if (!placeholderListbox && !items.length) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ literals.noItems }}</span>\n          </div>\n        }\n\n        <li\n          class=\"po-listbox-item\"\n          (click)=\"handleFooterActionListbox()\"\n          (keydown)=\"onKeyDown({ type: 'footerAction' }, $event)\"\n          cdkOption=\"footerActionListbox\"\n        >\n          <po-item-list [p-label]=\"literals.footerActionListbox\" p-separator [p-size]=\"size\" />\n        </li>\n      }\n    </ul>\n  } @else {\n    @if (!items.length && !isServerSearching && type !== 'action' && !footerActionListbox) {\n      <div class=\"po-listbox-container-no-data po-text-center\">\n        <span> {{ literals.noItems }}</span>\n      </div>\n    }\n  }\n\n  @if (isServerSearching && type !== 'action') {\n    <div [class.po-listbox-container-loading-default]=\"!infiniteLoading\">\n      <po-loading-overlay [p-size]=\"getSizeLoading()\" [p-text]=\"getTextLoading()\"></po-loading-overlay>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PoLoadingOverlayComponent, selector: "po-loading-overlay" }, { kind: "directive", type: i2$1.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i2$1.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: PoItemListComponent, selector: "po-item-list" }, { kind: "component", type: PoSearchListComponent, selector: "po-search-list", inputs: ["p-literals", "p-field-value", "p-size", "p-placeholder"], outputs: ["p-change"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoListBoxComponent, isStandalone: false, selector: "po-listbox", viewQueries: [{ propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true, static: true }, { propertyName: "listboxItemList", first: true, predicate: ["listboxItemList"], descendants: true }, { propertyName: "listboxGroupHeader", first: true, predicate: ["listboxGroupHeader"], descendants: true }, { propertyName: "searchElement", first: true, predicate: ["searchElement"], descendants: true }, { propertyName: "popupHeaderContainer", first: true, predicate: ["popupHeaderContainer"], descendants: true }, { propertyName: "listboxItems", predicate: ["listboxItem"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  #listbox\n  class=\"po-listbox\"\n  [class.po-listbox-check]=\"type === 'check' || type === 'option'\"\n  [attr.data-type]=\"type\"\n  [attr.p-size]=\"size\"\n  [hidden]=\"visible\"\n>\n  <div #popupHeaderContainer>\n    <ng-content select=\"[p-popup-header-template]\"></ng-content>\n  </div>\n\n  @if (!hideSearch && type === 'check') {\n    <po-search-list\n      #searchElement\n      (p-change)=\"callChangeSearch($event)\"\n      [p-literals]=\"literalSearch\"\n      [p-field-value]=\"fieldValueSearch\"\n      [p-placeholder]=\"placeholderSearch\"\n      [p-size]=\"size\"\n    ></po-search-list>\n  }\n\n  @if (checkTemplate() && !listboxSubitems) {\n    <ul #listboxItemList cdkListbox [cdkListboxMultiple]=\"type === 'check'\" class=\"po-listbox-list\">\n      @if (type === 'check' && items.length && !searchElement?.inputValue && !hideSelectAll) {\n        <li\n          cdkOption=\"selectAll\"\n          [attr.aria-checked]=\"checkboxAllValue === null ? 'mixed' : checkboxAllValue\"\n          class=\"po-listbox-item-type-check\"\n          (click)=\"changeAll.emit()\"\n          (keydown)=\"changeAllEmit($event)\"\n          (keydown)=\"onSelectAllCheckboxKeyDown($event)\"\n        >\n          <po-item-list\n            [p-selected]=\"checkboxAllValue\"\n            p-type=\"check\"\n            [p-label]=\"literals.selectAll\"\n            p-value=\"selectAll\"\n            [p-checkbox-value]=\"checkboxAllValue\"\n            [p-size]=\"size\"\n          >\n          </po-item-list>\n        </li>\n      }\n      @for (item of items; track item) {\n        <li\n          [class.po-listbox-item]=\"visible\"\n          [class.po-listbox-item-type-check]=\"type === 'check'\"\n          [cdkOption]=\"item[fieldLabel]\"\n          [cdkOptionDisabled]=\"\n            returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n          \"\n          [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n          (click)=\"onSelectItem(item)\"\n          (keydown)=\"onKeyDown(item, $event)\"\n        >\n          @if (item.options) {\n            <label class=\"po-combo-item-title\">\n              {{ item.label }}\n            </label>\n          }\n          @if (returnBooleanValue(item, 'visible') !== false) {\n            <po-item-list\n              [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n              [p-visible]=\"returnBooleanValue(item, 'visible')\"\n              [p-checkbox-value]=\"isSelectedItem(item)\"\n              [attr.data-item-list]=\"formatItemList(item)\"\n              [p-label]=\"item[fieldLabel]\"\n              [p-value]=\"item[fieldValue]\"\n              [p-selected]=\"isSelectedItem(item) || item.selected\"\n              [p-active-tabs]=\"item.active\"\n              [p-separator]=\"item.separator || separator\"\n              [p-danger]=\"item.danger || item.type === 'danger'\"\n              [p-icon]=\"item.icon\"\n              [p-type]=\"type\"\n              [p-item]=\"item\"\n              [p-tab-hide]=\"item.hide\"\n              [p-is-tabs]=\"isTabs\"\n              [p-field-value]=\"fieldValue\"\n              [p-field-label]=\"fieldLabel\"\n              [p-template]=\"template\"\n              [p-template-context]=\"item\"\n              (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n              (p-selectcombo-item)=\"optionClicked(item)\"\n              (p-emit-item-tabs)=\"onSelectTabs($event)\"\n              (p-activated-tabs)=\"onActivatedTabs($event)\"\n              [p-search-value]=\"searchValue\"\n              [p-filter-mode]=\"filterMode\"\n              [p-filtering]=\"isFiltering\"\n              [p-size]=\"size\"\n              [p-should-mark-letter]=\"shouldMarkLetters\"\n              [p-compare-cache]=\"compareCache\"\n              [p-combo-service]=\"comboService\"\n              [p-keys-label]=\"keysLabel\"\n            ></po-item-list>\n          }\n        </li>\n      }\n\n      @if (footerActionListbox) {\n        @if (placeholderListbox) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ placeholderListbox }}</span>\n          </div>\n        }\n\n        @if (!placeholderListbox && !items.length) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ literals.noItems }}</span>\n          </div>\n        }\n\n        <li\n          class=\"po-listbox-item\"\n          (click)=\"handleFooterActionListbox()\"\n          (keydown)=\"onKeyDown({ type: 'footerAction' }, $event)\"\n          cdkOption=\"footerActionListbox\"\n        >\n          <po-item-list [p-label]=\"literals.footerActionListbox\" p-separator [p-size]=\"size\" />\n        </li>\n      }\n    </ul>\n  } @else {\n    @if (!items.length && !isServerSearching && type !== 'action' && !footerActionListbox) {\n      <div class=\"po-listbox-container-no-data po-text-center\">\n        <span> {{ literals.noItems }}</span>\n      </div>\n    }\n  }\n\n  @if (listboxSubitems) {\n    <ul cdkListbox class=\"po-listbox-list po-listbox-dropdown\">\n      @if (!currentGroup) {\n        @for (item of currentItems; track item) {\n          <li\n            #listboxItem\n            [class.po-listbox-item]=\"visible\"\n            [cdkOption]=\"item[fieldLabel]\"\n            [cdkOptionDisabled]=\"returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false\"\n            [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n            (click)=\"onSelectItem(item, $event)\"\n            (keydown)=\"onKeyDown(item, $event)\"\n          >\n            @if (item.subItems?.length) {\n              <po-item-list\n                [p-label]=\"item.label\"\n                [p-item]=\"item\"\n                [p-separator]=\"item.separator || separator\"\n                [p-icon]=\"'po-icon-arrow-right'\"\n                [p-icon-position]=\"'right'\"\n              >\n              </po-item-list>\n            } @else if (!item.subItems?.length && returnBooleanValue(item, 'visible') !== false) {\n              <po-item-list\n                class=\"po-listbox-item-sub\"\n                [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n                [p-visible]=\"returnBooleanValue(item, 'visible')\"\n                [p-label]=\"item[fieldLabel]\"\n                [p-item]=\"item\"\n                [p-icon]=\"item.icon\"\n                [p-separator]=\"item.separator || separator\"\n                [p-danger]=\"item.type === 'danger'\"\n                [p-selected]=\"isSelectedItem(item) || item.selected\"\n              >\n              </po-item-list>\n            }\n          </li>\n        }\n      }\n\n      @if (currentGroup) {\n        <li\n          #listboxGroupHeader\n          class=\"po-listbox-group-header\"\n          [cdkOption]=\"'back-option'\"\n          [attr.aria-label]=\"literals?.backToPreviousGroup\"\n          (click)=\"goBack($event)\"\n          (keydown)=\"onKeydownGoBack($event)\"\n        >\n          <po-icon class=\"po-field-icon\" [p-icon]=\"'po-icon-arrow-left'\"></po-icon>\n          <po-tag [p-value]=\"currentGroup.label\"></po-tag>\n        </li>\n\n        @for (subItem of currentItems; track subItem.label) {\n          @if (subItem.subItems?.length) {\n            <li\n              [cdkOption]=\"subItem[fieldLabel]\"\n              (click)=\"onSelectItem(subItem, $event)\"\n              (keydown)=\"onKeyDown(subItem, $event)\"\n            >\n              <po-item-list\n                [p-label]=\"subItem.label\"\n                [p-item]=\"subItem\"\n                [p-separator]=\"subItem.separator || separator\"\n                [p-icon]=\"'po-icon-arrow-right'\"\n                [p-icon-position]=\"'right'\"\n              >\n              </po-item-list>\n            </li>\n          } @else if (!subItem.subItems?.length && returnBooleanValue(subItem, 'visible') !== false) {\n            <li\n              [cdkOption]=\"subItem[fieldLabel]\"\n              (click)=\"onSelectItem(subItem, $event)\"\n              (keydown)=\"onKeyDown(subItem, $event)\"\n            >\n              <po-item-list\n                class=\"po-listbox-item-sub\"\n                [p-disabled]=\"returnBooleanValue(subItem, 'disabled')\"\n                [p-visible]=\"returnBooleanValue(subItem, 'visible')\"\n                [p-label]=\"subItem[fieldLabel]\"\n                [p-item]=\"subItem\"\n                [p-icon]=\"subItem.icon\"\n                [p-separator]=\"subItem.separator || separator\"\n                [p-danger]=\"subItem.type === 'danger'\"\n                [p-selected]=\"isSelectedItem(subItem) || subItem.selected\"\n              >\n              </po-item-list>\n            </li>\n          }\n        }\n      }\n    </ul>\n  }\n\n  @if (isServerSearching && type !== 'action') {\n    <div [class.po-listbox-container-loading-default]=\"!infiniteLoading\">\n      <po-loading-overlay [p-size]=\"getSizeLoading()\" [p-text]=\"getTextLoading()\"></po-loading-overlay>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoLoadingOverlayComponent, selector: "po-loading-overlay" }, { kind: "component", type: PoTagComponent, selector: "po-tag" }, { kind: "directive", type: i4.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i4.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: PoItemListComponent, selector: "po-item-list" }, { kind: "component", type: PoSearchListComponent, selector: "po-search-list", inputs: ["p-literals", "p-field-value", "p-size", "p-placeholder"], outputs: ["p-change"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoListBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-listbox', standalone: false, template: "<div\n  #listbox\n  class=\"po-listbox\"\n  [class.po-listbox-check]=\"type === 'check' || type === 'option'\"\n  [attr.data-type]=\"type\"\n  [attr.p-size]=\"size\"\n  [hidden]=\"visible\"\n>\n  <div #popupHeaderContainer>\n    <ng-content select=\"[p-popup-header-template]\"></ng-content>\n  </div>\n\n  @if (!hideSearch && type === 'check') {\n    <po-search-list\n      #searchElement\n      (p-change)=\"callChangeSearch($event)\"\n      [p-literals]=\"literalSearch\"\n      [p-field-value]=\"fieldValueSearch\"\n      [p-placeholder]=\"placeholderSearch\"\n      [p-size]=\"size\"\n    ></po-search-list>\n  }\n\n  @if (checkTemplate()) {\n    <ul #listboxItemList cdkListbox [cdkListboxMultiple]=\"type === 'check'\" class=\"po-listbox-list\">\n      @if (type === 'check' && items.length && !searchElement?.inputValue && !hideSelectAll) {\n        <li\n          cdkOption=\"selectAll\"\n          [attr.aria-checked]=\"checkboxAllValue === null ? 'mixed' : checkboxAllValue\"\n          class=\"po-listbox-item-type-check\"\n          (click)=\"changeAll.emit()\"\n          (keydown)=\"changeAllEmit($event)\"\n          (keydown)=\"onSelectAllCheckboxKeyDown($event)\"\n        >\n          <po-item-list\n            [p-selected]=\"checkboxAllValue\"\n            p-type=\"check\"\n            [p-label]=\"literals.selectAll\"\n            p-value=\"selectAll\"\n            [p-checkbox-value]=\"checkboxAllValue\"\n            [p-size]=\"size\"\n          >\n          </po-item-list>\n        </li>\n      }\n      @for (item of items; track item) {\n        <li\n          [class.po-listbox-item]=\"visible\"\n          [class.po-listbox-item-type-check]=\"type === 'check'\"\n          [cdkOption]=\"item[fieldLabel]\"\n          [cdkOptionDisabled]=\"\n            returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n          \"\n          [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n          (click)=\"onSelectItem(item)\"\n          (keydown)=\"onKeyDown(item, $event)\"\n        >\n          @if (item.options) {\n            <label class=\"po-combo-item-title\">\n              {{ item.label }}\n            </label>\n          }\n          @if (returnBooleanValue(item, 'visible') !== false && !item.options) {\n            <po-item-list\n              [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n              [p-visible]=\"returnBooleanValue(item, 'visible')\"\n              [p-checkbox-value]=\"isSelectedItem(item)\"\n              [attr.data-item-list]=\"formatItemList(item)\"\n              [p-label]=\"item[fieldLabel]\"\n              [p-value]=\"item[fieldValue]\"\n              [p-selected]=\"isSelectedItem(item) || item.selected\"\n              [p-active-tabs]=\"item.active\"\n              [p-separator]=\"item.separator || separator\"\n              [p-danger]=\"item.danger || item.type === 'danger'\"\n              [p-icon]=\"item.icon\"\n              [p-type]=\"type\"\n              [p-item]=\"item\"\n              [p-tab-hide]=\"item.hide\"\n              [p-is-tabs]=\"isTabs\"\n              [p-field-value]=\"fieldValue\"\n              [p-field-label]=\"fieldLabel\"\n              [p-template]=\"template\"\n              [p-template-context]=\"item\"\n              (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n              (p-selectcombo-item)=\"optionClicked(item)\"\n              (p-emit-item-tabs)=\"onSelectTabs($event)\"\n              (p-activated-tabs)=\"onActivatedTabs($event)\"\n              [p-search-value]=\"searchValue\"\n              [p-filter-mode]=\"filterMode\"\n              [p-filtering]=\"isFiltering\"\n              [p-size]=\"size\"\n              [p-should-mark-letter]=\"shouldMarkLetters\"\n              [p-compare-cache]=\"compareCache\"\n              [p-combo-service]=\"comboService\"\n              [p-keys-label]=\"keysLabel\"\n            ></po-item-list>\n          }\n        </li>\n      }\n\n      @if (footerActionListbox) {\n        @if (placeholderListbox) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ placeholderListbox }}</span>\n          </div>\n        }\n\n        @if (!placeholderListbox && !items.length) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ literals.noItems }}</span>\n          </div>\n        }\n\n        <li\n          class=\"po-listbox-item\"\n          (click)=\"handleFooterActionListbox()\"\n          (keydown)=\"onKeyDown({ type: 'footerAction' }, $event)\"\n          cdkOption=\"footerActionListbox\"\n        >\n          <po-item-list [p-label]=\"literals.footerActionListbox\" p-separator [p-size]=\"size\" />\n        </li>\n      }\n    </ul>\n  } @else {\n    @if (!items.length && !isServerSearching && type !== 'action' && !footerActionListbox) {\n      <div class=\"po-listbox-container-no-data po-text-center\">\n        <span> {{ literals.noItems }}</span>\n      </div>\n    }\n  }\n\n  @if (isServerSearching && type !== 'action') {\n    <div [class.po-listbox-container-loading-default]=\"!infiniteLoading\">\n      <po-loading-overlay [p-size]=\"getSizeLoading()\" [p-text]=\"getTextLoading()\"></po-loading-overlay>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'po-listbox', standalone: false, template: "<div\n  #listbox\n  class=\"po-listbox\"\n  [class.po-listbox-check]=\"type === 'check' || type === 'option'\"\n  [attr.data-type]=\"type\"\n  [attr.p-size]=\"size\"\n  [hidden]=\"visible\"\n>\n  <div #popupHeaderContainer>\n    <ng-content select=\"[p-popup-header-template]\"></ng-content>\n  </div>\n\n  @if (!hideSearch && type === 'check') {\n    <po-search-list\n      #searchElement\n      (p-change)=\"callChangeSearch($event)\"\n      [p-literals]=\"literalSearch\"\n      [p-field-value]=\"fieldValueSearch\"\n      [p-placeholder]=\"placeholderSearch\"\n      [p-size]=\"size\"\n    ></po-search-list>\n  }\n\n  @if (checkTemplate() && !listboxSubitems) {\n    <ul #listboxItemList cdkListbox [cdkListboxMultiple]=\"type === 'check'\" class=\"po-listbox-list\">\n      @if (type === 'check' && items.length && !searchElement?.inputValue && !hideSelectAll) {\n        <li\n          cdkOption=\"selectAll\"\n          [attr.aria-checked]=\"checkboxAllValue === null ? 'mixed' : checkboxAllValue\"\n          class=\"po-listbox-item-type-check\"\n          (click)=\"changeAll.emit()\"\n          (keydown)=\"changeAllEmit($event)\"\n          (keydown)=\"onSelectAllCheckboxKeyDown($event)\"\n        >\n          <po-item-list\n            [p-selected]=\"checkboxAllValue\"\n            p-type=\"check\"\n            [p-label]=\"literals.selectAll\"\n            p-value=\"selectAll\"\n            [p-checkbox-value]=\"checkboxAllValue\"\n            [p-size]=\"size\"\n          >\n          </po-item-list>\n        </li>\n      }\n      @for (item of items; track item) {\n        <li\n          [class.po-listbox-item]=\"visible\"\n          [class.po-listbox-item-type-check]=\"type === 'check'\"\n          [cdkOption]=\"item[fieldLabel]\"\n          [cdkOptionDisabled]=\"\n            returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n          \"\n          [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n          (click)=\"onSelectItem(item)\"\n          (keydown)=\"onKeyDown(item, $event)\"\n        >\n          @if (item.options) {\n            <label class=\"po-combo-item-title\">\n              {{ item.label }}\n            </label>\n          }\n          @if (returnBooleanValue(item, 'visible') !== false) {\n            <po-item-list\n              [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n              [p-visible]=\"returnBooleanValue(item, 'visible')\"\n              [p-checkbox-value]=\"isSelectedItem(item)\"\n              [attr.data-item-list]=\"formatItemList(item)\"\n              [p-label]=\"item[fieldLabel]\"\n              [p-value]=\"item[fieldValue]\"\n              [p-selected]=\"isSelectedItem(item) || item.selected\"\n              [p-active-tabs]=\"item.active\"\n              [p-separator]=\"item.separator || separator\"\n              [p-danger]=\"item.danger || item.type === 'danger'\"\n              [p-icon]=\"item.icon\"\n              [p-type]=\"type\"\n              [p-item]=\"item\"\n              [p-tab-hide]=\"item.hide\"\n              [p-is-tabs]=\"isTabs\"\n              [p-field-value]=\"fieldValue\"\n              [p-field-label]=\"fieldLabel\"\n              [p-template]=\"template\"\n              [p-template-context]=\"item\"\n              (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n              (p-selectcombo-item)=\"optionClicked(item)\"\n              (p-emit-item-tabs)=\"onSelectTabs($event)\"\n              (p-activated-tabs)=\"onActivatedTabs($event)\"\n              [p-search-value]=\"searchValue\"\n              [p-filter-mode]=\"filterMode\"\n              [p-filtering]=\"isFiltering\"\n              [p-size]=\"size\"\n              [p-should-mark-letter]=\"shouldMarkLetters\"\n              [p-compare-cache]=\"compareCache\"\n              [p-combo-service]=\"comboService\"\n              [p-keys-label]=\"keysLabel\"\n            ></po-item-list>\n          }\n        </li>\n      }\n\n      @if (footerActionListbox) {\n        @if (placeholderListbox) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ placeholderListbox }}</span>\n          </div>\n        }\n\n        @if (!placeholderListbox && !items.length) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ literals.noItems }}</span>\n          </div>\n        }\n\n        <li\n          class=\"po-listbox-item\"\n          (click)=\"handleFooterActionListbox()\"\n          (keydown)=\"onKeyDown({ type: 'footerAction' }, $event)\"\n          cdkOption=\"footerActionListbox\"\n        >\n          <po-item-list [p-label]=\"literals.footerActionListbox\" p-separator [p-size]=\"size\" />\n        </li>\n      }\n    </ul>\n  } @else {\n    @if (!items.length && !isServerSearching && type !== 'action' && !footerActionListbox) {\n      <div class=\"po-listbox-container-no-data po-text-center\">\n        <span> {{ literals.noItems }}</span>\n      </div>\n    }\n  }\n\n  @if (listboxSubitems) {\n    <ul cdkListbox class=\"po-listbox-list po-listbox-dropdown\">\n      @if (!currentGroup) {\n        @for (item of currentItems; track item) {\n          <li\n            #listboxItem\n            [class.po-listbox-item]=\"visible\"\n            [cdkOption]=\"item[fieldLabel]\"\n            [cdkOptionDisabled]=\"returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false\"\n            [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n            (click)=\"onSelectItem(item, $event)\"\n            (keydown)=\"onKeyDown(item, $event)\"\n          >\n            @if (item.subItems?.length) {\n              <po-item-list\n                [p-label]=\"item.label\"\n                [p-item]=\"item\"\n                [p-separator]=\"item.separator || separator\"\n                [p-icon]=\"'po-icon-arrow-right'\"\n                [p-icon-position]=\"'right'\"\n              >\n              </po-item-list>\n            } @else if (!item.subItems?.length && returnBooleanValue(item, 'visible') !== false) {\n              <po-item-list\n                class=\"po-listbox-item-sub\"\n                [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n                [p-visible]=\"returnBooleanValue(item, 'visible')\"\n                [p-label]=\"item[fieldLabel]\"\n                [p-item]=\"item\"\n                [p-icon]=\"item.icon\"\n                [p-separator]=\"item.separator || separator\"\n                [p-danger]=\"item.type === 'danger'\"\n                [p-selected]=\"isSelectedItem(item) || item.selected\"\n              >\n              </po-item-list>\n            }\n          </li>\n        }\n      }\n\n      @if (currentGroup) {\n        <li\n          #listboxGroupHeader\n          class=\"po-listbox-group-header\"\n          [cdkOption]=\"'back-option'\"\n          [attr.aria-label]=\"literals?.backToPreviousGroup\"\n          (click)=\"goBack($event)\"\n          (keydown)=\"onKeydownGoBack($event)\"\n        >\n          <po-icon class=\"po-field-icon\" [p-icon]=\"'po-icon-arrow-left'\"></po-icon>\n          <po-tag [p-value]=\"currentGroup.label\"></po-tag>\n        </li>\n\n        @for (subItem of currentItems; track subItem.label) {\n          @if (subItem.subItems?.length) {\n            <li\n              [cdkOption]=\"subItem[fieldLabel]\"\n              (click)=\"onSelectItem(subItem, $event)\"\n              (keydown)=\"onKeyDown(subItem, $event)\"\n            >\n              <po-item-list\n                [p-label]=\"subItem.label\"\n                [p-item]=\"subItem\"\n                [p-separator]=\"subItem.separator || separator\"\n                [p-icon]=\"'po-icon-arrow-right'\"\n                [p-icon-position]=\"'right'\"\n              >\n              </po-item-list>\n            </li>\n          } @else if (!subItem.subItems?.length && returnBooleanValue(subItem, 'visible') !== false) {\n            <li\n              [cdkOption]=\"subItem[fieldLabel]\"\n              (click)=\"onSelectItem(subItem, $event)\"\n              (keydown)=\"onKeyDown(subItem, $event)\"\n            >\n              <po-item-list\n                class=\"po-listbox-item-sub\"\n                [p-disabled]=\"returnBooleanValue(subItem, 'disabled')\"\n                [p-visible]=\"returnBooleanValue(subItem, 'visible')\"\n                [p-label]=\"subItem[fieldLabel]\"\n                [p-item]=\"subItem\"\n                [p-icon]=\"subItem.icon\"\n                [p-separator]=\"subItem.separator || separator\"\n                [p-danger]=\"subItem.type === 'danger'\"\n                [p-selected]=\"isSelectedItem(subItem) || subItem.selected\"\n              >\n              </po-item-list>\n            </li>\n          }\n        }\n      }\n    </ul>\n  }\n\n  @if (isServerSearching && type !== 'action') {\n    <div [class.po-listbox-container-loading-default]=\"!infiniteLoading\">\n      <po-loading-overlay [p-size]=\"getSizeLoading()\" [p-text]=\"getTextLoading()\"></po-loading-overlay>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { listbox: [{
                 type: ViewChild,
                 args: ['listbox', { static: true }]
             }], listboxItemList: [{
                 type: ViewChild,
                 args: ['listboxItemList', { static: false }]
+            }], listboxGroupHeader: [{
+                type: ViewChild,
+                args: ['listboxGroupHeader']
             }], searchElement: [{
                 type: ViewChild,
                 args: ['searchElement']
             }], popupHeaderContainer: [{
                 type: ViewChild,
                 args: ['popupHeaderContainer']
+            }], listboxItems: [{
+                type: ViewChildren,
+                args: ['listboxItem']
             }] } });
 
 /**
@@ -8432,11 +8551,11 @@ class PoPopupComponent extends PoPopupBaseComponent {
     }
     onActionClick(popupAction) {
         const actionNoDisabled = popupAction && !this.returnBooleanValue(popupAction, 'disabled');
-        if (popupAction && popupAction.action && actionNoDisabled) {
+        if (popupAction?.action && actionNoDisabled) {
             this.close();
             popupAction.action(this.param || popupAction);
         }
-        if (popupAction && popupAction.url && actionNoDisabled) {
+        if (popupAction?.url && actionNoDisabled) {
             this.close();
             return this.openUrl(popupAction.url);
         }
@@ -8469,7 +8588,13 @@ class PoPopupComponent extends PoPopupBaseComponent {
         this.showPopup && this.oldTarget === this.target ? this.close() : this.open(param);
     }
     onClickItem(item) {
-        this.clickItem.emit(item);
+        if (!item.goBack) {
+            this.clickItem.emit(item);
+        }
+        if (item.subItems || item.goBack) {
+            this.changeDetector.detectChanges();
+            this.validateInitialContent();
+        }
     }
     checkAllActionIsInvisible() {
         if (this.actions.every(item => item.visible === false)) {
@@ -8549,11 +8674,11 @@ class PoPopupComponent extends PoPopupBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoPopupComponent, isStandalone: false, selector: "po-popup", providers: [PoControlPositionService], viewQueries: [{ propertyName: "popupRef", first: true, predicate: ["popupRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true, read: ElementRef }, { propertyName: "poListBoxRef", first: true, predicate: ["poListBoxRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (showPopup && actions.length && !checkAllActionIsInvisible()) {\n  <div #popupRef class=\"po-popup\">\n    @if (!hideArrow) {\n      <div class=\"po-popup-arrow po-arrow-{{ arrowDirection }}\"></div>\n    }\n    <div class=\"po-popup-container\">\n      <po-listbox\n        #listbox\n        #poListBoxRef\n        p-type=\"action\"\n        [p-items]=\"actions\"\n        [p-param]=\"param\"\n        [p-size]=\"size\"\n        (p-close)=\"close()\"\n        (p-click-item)=\"onClickItem($event)\"\n      >\n        <ng-content p-popup-header-template select=\"[p-popup-header-template]\"></ng-content>\n      </po-listbox>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: PoListBoxComponent, selector: "po-listbox" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoPopupComponent, isStandalone: false, selector: "po-popup", providers: [PoControlPositionService], viewQueries: [{ propertyName: "popupRef", first: true, predicate: ["popupRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true, read: ElementRef }, { propertyName: "poListBoxRef", first: true, predicate: ["poListBoxRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (showPopup && actions.length && !checkAllActionIsInvisible()) {\n  <div #popupRef class=\"po-popup\">\n    @if (!hideArrow) {\n      <div class=\"po-popup-arrow po-arrow-{{ arrowDirection }}\"></div>\n    }\n    <div class=\"po-popup-container\">\n      <po-listbox\n        #listbox\n        #poListBoxRef\n        p-type=\"action\"\n        [p-items]=\"actions\"\n        [p-param]=\"param\"\n        [p-size]=\"size\"\n        [p-listbox-subitems]=\"listboxSubitems\"\n        (p-close)=\"close()\"\n        (p-click-item)=\"onClickItem($event)\"\n      >\n        <ng-content p-popup-header-template select=\"[p-popup-header-template]\"></ng-content>\n      </po-listbox>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: PoListBoxComponent, selector: "po-listbox" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-popup', providers: [PoControlPositionService], standalone: false, template: "@if (showPopup && actions.length && !checkAllActionIsInvisible()) {\n  <div #popupRef class=\"po-popup\">\n    @if (!hideArrow) {\n      <div class=\"po-popup-arrow po-arrow-{{ arrowDirection }}\"></div>\n    }\n    <div class=\"po-popup-container\">\n      <po-listbox\n        #listbox\n        #poListBoxRef\n        p-type=\"action\"\n        [p-items]=\"actions\"\n        [p-param]=\"param\"\n        [p-size]=\"size\"\n        (p-close)=\"close()\"\n        (p-click-item)=\"onClickItem($event)\"\n      >\n        <ng-content p-popup-header-template select=\"[p-popup-header-template]\"></ng-content>\n      </po-listbox>\n    </div>\n  </div>\n}\n" }]
+            args: [{ selector: 'po-popup', providers: [PoControlPositionService], standalone: false, template: "@if (showPopup && actions.length && !checkAllActionIsInvisible()) {\n  <div #popupRef class=\"po-popup\">\n    @if (!hideArrow) {\n      <div class=\"po-popup-arrow po-arrow-{{ arrowDirection }}\"></div>\n    }\n    <div class=\"po-popup-container\">\n      <po-listbox\n        #listbox\n        #poListBoxRef\n        p-type=\"action\"\n        [p-items]=\"actions\"\n        [p-param]=\"param\"\n        [p-size]=\"size\"\n        [p-listbox-subitems]=\"listboxSubitems\"\n        (p-close)=\"close()\"\n        (p-click-item)=\"onClickItem($event)\"\n      >\n        <ng-content p-popup-header-template select=\"[p-popup-header-template]\"></ng-content>\n      </po-listbox>\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { popupRef: [{
                 type: ViewChild,
                 args: ['popupRef', { read: ElementRef }]
@@ -8946,15 +9071,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
 
 class PoListBoxModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoListBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: PoListBoxModule, declarations: [PoListBoxComponent, PoItemListComponent, PoSearchListComponent], imports: [CommonModule, PoCheckboxModule, PoIconModule, PoLoadingModule, CdkListboxModule], exports: [PoListBoxComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoListBoxModule, imports: [CommonModule, PoCheckboxModule, PoIconModule, PoLoadingModule, CdkListboxModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: PoListBoxModule, declarations: [PoListBoxComponent, PoItemListComponent, PoSearchListComponent], imports: [CommonModule, PoCheckboxModule, PoIconModule, PoLoadingModule, PoTagModule, CdkListboxModule], exports: [PoListBoxComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoListBoxModule, imports: [CommonModule, PoCheckboxModule, PoIconModule, PoLoadingModule, PoTagModule, CdkListboxModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoListBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [PoListBoxComponent, PoItemListComponent, PoSearchListComponent],
                     exports: [PoListBoxComponent],
-                    imports: [CommonModule, PoCheckboxModule, PoIconModule, PoLoadingModule, CdkListboxModule]
+                    imports: [CommonModule, PoCheckboxModule, PoIconModule, PoLoadingModule, PoTagModule, CdkListboxModule]
                 }]
         }] });
 
@@ -13204,6 +13329,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
  *  <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>
@@ -13230,7 +13360,7 @@ class PoDropdownComponent extends PoDropdownBaseComponent {
         this.dropdownRef && !this.open && !this.disabled ? this.showDropdown() : this.hideDropdown();
     }
     checkClickArea(event) {
-        return this.dropdownRef && this.dropdownRef.nativeElement.contains(event.target);
+        return this.dropdownRef?.nativeElement.contains(event.target);
     }
     hideDropdown() {
         this.icon = 'ICON_ARROW_DOWN';
@@ -13280,11 +13410,11 @@ class PoDropdownComponent extends PoDropdownBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.7", type: PoDropdownComponent, isStandalone: false, selector: "po-dropdown", viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "popupRef", first: true, predicate: ["popupRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #dropdownRef\n  class=\"po-dropdown\"\n  [class.po-dropdown-aa]=\"size === 'small'\"\n  [attr.disabled]=\"disabled\"\n  tabindex=\"{{ disabled ? -1 : 0 }}\"\n  (click)=\"toggleDropdown()\"\n  (keydown)=\"onKeyDown($event)\"\n>\n  <div\n    class=\"po-dropdown-button\"\n    [class.po-dropdown-button-aa]=\"size === 'small'\"\n    [ngClass]=\"{ 'po-dropdown-button-disabled': disabled, 'po-dropdown-button-open': open }\"\n  >\n    <span>{{ label }}</span>\n    <po-icon class=\"po-dropdown-icon\" [class.po-dropdown-icon-aa]=\"size === 'small'\" [p-icon]=\"icon\"></po-icon>\n  </div>\n</div>\n\n<po-popup\n  #popupRef\n  p-hide-arrow\n  p-is-corner-align\n  p-position=\"bottom-left\"\n  [p-actions]=\"actions\"\n  [p-custom-positions]=\"['bottom-left', 'top-left']\"\n  [p-size]=\"size\"\n  [p-target]=\"dropdownRef\"\n>\n</po-popup>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoPopupComponent, selector: "po-popup" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.7", type: PoDropdownComponent, isStandalone: false, selector: "po-dropdown", viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "popupRef", first: true, predicate: ["popupRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #dropdownRef\n  class=\"po-dropdown\"\n  [class.po-dropdown-aa]=\"size === 'small'\"\n  [attr.disabled]=\"disabled\"\n  tabindex=\"{{ disabled ? -1 : 0 }}\"\n  (click)=\"toggleDropdown()\"\n  (keydown)=\"onKeyDown($event)\"\n>\n  <div\n    class=\"po-dropdown-button\"\n    [class.po-dropdown-button-aa]=\"size === 'small'\"\n    [ngClass]=\"{ 'po-dropdown-button-disabled': disabled, 'po-dropdown-button-open': open }\"\n  >\n    <span>{{ label }}</span>\n    <po-icon class=\"po-dropdown-icon\" [class.po-dropdown-icon-aa]=\"size === 'small'\" [p-icon]=\"icon\"></po-icon>\n  </div>\n</div>\n\n<po-popup\n  #popupRef\n  p-hide-arrow\n  p-is-corner-align\n  p-position=\"bottom-left\"\n  [p-actions]=\"actions\"\n  [p-custom-positions]=\"['bottom-left', 'top-left']\"\n  [p-size]=\"size\"\n  [p-target]=\"dropdownRef\"\n  [p-listbox-subitems]=\"true\"\n>\n</po-popup>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoPopupComponent, selector: "po-popup" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  #dropdownRef\n  class=\"po-dropdown\"\n  [class.po-dropdown-aa]=\"size === 'small'\"\n  [attr.disabled]=\"disabled\"\n  tabindex=\"{{ disabled ? -1 : 0 }}\"\n  (click)=\"toggleDropdown()\"\n  (keydown)=\"onKeyDown($event)\"\n>\n  <div\n    class=\"po-dropdown-button\"\n    [class.po-dropdown-button-aa]=\"size === 'small'\"\n    [ngClass]=\"{ 'po-dropdown-button-disabled': disabled, 'po-dropdown-button-open': open }\"\n  >\n    <span>{{ label }}</span>\n    <po-icon class=\"po-dropdown-icon\" [class.po-dropdown-icon-aa]=\"size === 'small'\" [p-icon]=\"icon\"></po-icon>\n  </div>\n</div>\n\n<po-popup\n  #popupRef\n  p-hide-arrow\n  p-is-corner-align\n  p-position=\"bottom-left\"\n  [p-actions]=\"actions\"\n  [p-custom-positions]=\"['bottom-left', 'top-left']\"\n  [p-size]=\"size\"\n  [p-target]=\"dropdownRef\"\n>\n</po-popup>\n" }]
+            args: [{ selector: 'po-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  #dropdownRef\n  class=\"po-dropdown\"\n  [class.po-dropdown-aa]=\"size === 'small'\"\n  [attr.disabled]=\"disabled\"\n  tabindex=\"{{ disabled ? -1 : 0 }}\"\n  (click)=\"toggleDropdown()\"\n  (keydown)=\"onKeyDown($event)\"\n>\n  <div\n    class=\"po-dropdown-button\"\n    [class.po-dropdown-button-aa]=\"size === 'small'\"\n    [ngClass]=\"{ 'po-dropdown-button-disabled': disabled, 'po-dropdown-button-open': open }\"\n  >\n    <span>{{ label }}</span>\n    <po-icon class=\"po-dropdown-icon\" [class.po-dropdown-icon-aa]=\"size === 'small'\" [p-icon]=\"icon\"></po-icon>\n  </div>\n</div>\n\n<po-popup\n  #popupRef\n  p-hide-arrow\n  p-is-corner-align\n  p-position=\"bottom-left\"\n  [p-actions]=\"actions\"\n  [p-custom-positions]=\"['bottom-left', 'top-left']\"\n  [p-size]=\"size\"\n  [p-target]=\"dropdownRef\"\n  [p-listbox-subitems]=\"true\"\n>\n</po-popup>\n" }]
         }], propDecorators: { dropdownRef: [{
                 type: ViewChild,
                 args: ['dropdownRef', { read: ElementRef, static: true }]
@@ -19392,6 +19522,11 @@ const poThemeDefaultDarkValues = {
         /** SELECT */
         'po-select': {
             '--color-hover': 'var(--color-action-hover);'
+        },
+        /** DROPDOWN */
+        '.po-listbox-group-header .po-tag': {
+            'color': 'var(--color-neutral-light-00);',
+            'background-color': 'var(--color-action-default);'
         }
     },
     onRoot: {