@po-ui/ng-components 19.25.0 → 19.27.0

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

@@ -1,14 +1,15 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, InjectionToken, TemplateRef, Optional, Inject, Injectable, EventEmitter, Output, ElementRef, HostListener, inject, ViewChild, ChangeDetectorRef, ViewChildren, ContentChildren, HostBinding, forwardRef, Renderer2, IterableDiffers, input, ViewContainerRef, ContentChild, Pipe, Injector, provideAppInitializer } from '@angular/core';
+import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, InjectionToken, TemplateRef, Optional, Inject, Injectable, EventEmitter, Output, ElementRef, SecurityContext, HostListener, inject, ViewChild, ChangeDetectorRef, ViewChildren, ContentChildren, HostBinding, forwardRef, Renderer2, IterableDiffers, input, ViewContainerRef, ContentChild, Pipe, Injector, provideAppInitializer } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, CurrencyPipe, DecimalPipe, DOCUMENT, TitleCasePipe, DatePipe, NgOptimizedImage, Location } from '@angular/common';
+import * as i2 from '@angular/platform-browser';
+import { DomSanitizer, Title } from '@angular/platform-browser';
 import { trigger, transition, style, animate, group, query, animateChild, state, AnimationBuilder, keyframes } from '@angular/animations';
 import { Subject, filter, fromEvent, debounceTime, Subscription, switchMap, isObservable, of, ReplaySubject, timer, throwError, map as map$1, catchError as catchError$1, Observable, startWith, delay as delay$1 } from 'rxjs';
 import * as i1$1 from '@angular/router';
 import { Router, RouterModule, NavigationEnd, NavigationCancel } from '@angular/router';
-import * as i2 from '@angular/cdk/listbox';
+import * as i2$1 from '@angular/cdk/listbox';
 import { CdkListboxModule } from '@angular/cdk/listbox';
-import { DomSanitizer, Title } from '@angular/platform-browser';
 import * as i1$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS, Validators, NgControl, NgForm, ControlContainer } from '@angular/forms';
 import * as i1$3 from '@angular/common/http';
@@ -19,7 +20,7 @@ import { GraphicComponent, BrushComponent, DataZoomComponent, GridComponent, Leg
 import * as echarts from 'echarts/core';
 import { use } from 'echarts/core';
 import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
-import * as i2$1 from '@angular/cdk/overlay';
+import * as i2$2 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import * as i5 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
@@ -2493,6 +2494,7 @@ class PoTooltipDirective extends PoTooltipBaseDirective {
     elementRef;
     renderer;
     poControlPosition;
+    sanitizer;
     arrowDirection;
     divArrow;
     divContent;
@@ -2501,11 +2503,12 @@ class PoTooltipDirective extends PoTooltipBaseDirective {
     textContent;
     tooltipOffset = 8;
     eventListenerFunction;
-    constructor(elementRef, renderer, poControlPosition) {
+    constructor(elementRef, renderer, poControlPosition, sanitizer) {
         super();
         this.elementRef = elementRef;
         this.renderer = renderer;
         this.poControlPosition = poControlPosition;
+        this.sanitizer = sanitizer;
     }
     ngOnDestroy() {
         this.hideTooltip();
@@ -2597,7 +2600,8 @@ class PoTooltipDirective extends PoTooltipBaseDirective {
         this.textContent = this.renderer.createText(this.tooltip);
         if (this.innerHtml) {
             this.textContent = this.renderer.createText('');
-            this.renderer.setProperty(this.divContent, 'innerHTML', this.tooltip);
+            const securityContent = this.sanitizer.sanitize(SecurityContext.HTML, this.tooltip) || '';
+            this.renderer.setProperty(this.divContent, 'innerHTML', securityContent);
         }
         this.renderer.appendChild(this.divContent, this.textContent);
         this.renderer.appendChild(this.tooltipContent, this.divArrow);
@@ -2646,7 +2650,9 @@ class PoTooltipDirective extends PoTooltipBaseDirective {
             this.textContent = this.renderer.createText(this.tooltip);
             this.renderer.appendChild(this.divContent, this.textContent);
             if (this.innerHtml) {
-                this.renderer.setProperty(this.divContent, 'innerHTML', this.tooltip);
+                this.textContent = this.renderer.createText('');
+                const securityContent = this.sanitizer.sanitize(SecurityContext.HTML, this.tooltip) || '';
+                this.renderer.setProperty(this.divContent, 'innerHTML', securityContent);
             }
         }
     }
@@ -2662,7 +2668,7 @@ class PoTooltipDirective extends PoTooltipBaseDirective {
             this.renderer.setAttribute(this.elementRef.nativeElement.getElementsByTagName(targetElement)[0], 'aria-label', nativeTextContent + ' ' + this.tooltip);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: PoTooltipControlPositionService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: PoTooltipControlPositionService }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: PoTooltipDirective, isStandalone: false, selector: "[p-tooltip]", host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onMouseClick()", "focusout": "onFocusOut()", "focusin": "onFocusIn()", "keydown": "onKeyDown($event)" } }, providers: [PoTooltipControlPositionService], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTooltipDirective, decorators: [{
@@ -2672,7 +2678,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                     providers: [PoTooltipControlPositionService],
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: PoTooltipControlPositionService }], propDecorators: { onMouseEnter: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: PoTooltipControlPositionService }, { type: i2.DomSanitizer }], propDecorators: { onMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']
             }], onMouseLeave: [{
@@ -4725,17 +4731,27 @@ class PoListBoxBaseComponent {
     compareCache = false;
     comboService;
     containerWidth;
+    // Define os nomes das propriedades do objeto que serão exibidos como rótulos (labels) no `listbox`
+    keysLabel = [];
+    // Habilita a ação no rodapé do list box
+    footerActionListbox = false;
+    // Cria um item no listbox que será utilizado como um "placeholder"
+    placeholderListbox;
+    // Define se haverá ou não um separador entre todos os itens do listbox
+    separator = false;
     // Evento disparado quando uma tab é ativada
     activatedTab = new EventEmitter();
     // Evento disparado no click de uma aba do tabs
     clickTab = new EventEmitter();
     changeStateTabs = new EventEmitter();
     clickItem = new EventEmitter();
+    // Evento disparado ao clicar na ação do rodapé do listbox
+    footerActionListboxEvent = new EventEmitter();
     constructor(languageService) {
         this.language = languageService.getShortLanguage();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoListBoxBaseComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.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"] }, 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" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoListBoxBaseComponent, decorators: [{
             type: Directive
@@ -4853,6 +4869,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             }], containerWidth: [{
                 type: Input,
                 args: ['p-container-width']
+            }], keysLabel: [{
+                type: Input,
+                args: ['p-keys-label']
+            }], footerActionListbox: [{
+                type: Input,
+                args: ['p-footer-action-listbox']
+            }], placeholderListbox: [{
+                type: Input,
+                args: ['p-placeholder-listbox']
+            }], separator: [{
+                type: Input,
+                args: ['p-separator']
             }], activatedTab: [{
                 type: Output,
                 args: ['p-activated-tabs']
@@ -4865,6 +4893,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             }], clickItem: [{
                 type: Output,
                 args: ['p-click-item']
+            }], footerActionListboxEvent: [{
+                type: Output,
+                args: ['p-footer-action-listbox-event']
             }] } });
 
 const poLoadingOverlayLiteralsDefault = {
@@ -5375,13 +5406,15 @@ class PoItemListBaseComponent {
     get activeTabs() {
         return this._activeTabs;
     }
+    // Define os nomes das propriedades do objeto que serão exibidos como rótulos (labels)
+    keysLabel = [];
     emitActiveTabs(tab) {
         if (tab?.active) {
             this.activatedTab.emit(tab);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoItemListBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.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"] }, 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: "19.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoItemListBaseComponent, decorators: [{
             type: Directive
@@ -5478,6 +5511,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             }], activeTabs: [{
                 type: Input,
                 args: ['p-active-tabs']
+            }], keysLabel: [{
+                type: Input,
+                args: ['p-keys-label']
             }] } });
 
 /**
@@ -6298,11 +6334,11 @@ class PoItemListComponent extends PoItemListBaseComponent {
         return value.replace(/</g, '&lt;').replace(/>/g, '&gt;');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoItemListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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        [class.po-item-list-aa]=\"size === 'small'\"\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        [class.po-item-list-aa]=\"size === 'small'\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        (click)=\"onComboItem(item, $event)\"\n      >\n        @if (!template) {\n          <span class=\"po-item-list-label\" [innerHTML]=\"getLabelFormatted(label)\"></span>\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        [class.po-item-list-aa]=\"size === 'small'\"\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: "19.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        [class.po-item-list-aa]=\"size === 'small'\"\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        [class.po-item-list-aa]=\"size === 'small'\"\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        [class.po-item-list-aa]=\"size === 'small'\"\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: "19.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        [class.po-item-list-aa]=\"size === 'small'\"\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        [class.po-item-list-aa]=\"size === 'small'\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        (click)=\"onComboItem(item, $event)\"\n      >\n        @if (!template) {\n          <span class=\"po-item-list-label\" [innerHTML]=\"getLabelFormatted(label)\"></span>\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        [class.po-item-list-aa]=\"size === 'small'\"\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        [class.po-item-list-aa]=\"size === 'small'\"\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        [class.po-item-list-aa]=\"size === 'small'\"\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        [class.po-item-list-aa]=\"size === 'small'\"\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 }]
@@ -6469,6 +6505,16 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
     onKeyDown(itemListAction, event) {
         event.preventDefault();
         if ((event && event.code === 'Enter') || event.code === 'Space') {
+            if (itemListAction.type === 'footerAction') {
+                this.handleFooterActionListbox();
+                return;
+            }
+            // Cenário em que o `Po-Search` (com listbox) tem nos items ação ou url
+            if (this.type === 'option' && (itemListAction?.action || itemListAction?.url)) {
+                this.onSelectItem(itemListAction);
+                this.optionClicked(itemListAction);
+                return;
+            }
             switch (this.type) {
                 case 'check':
                     this.onSelectCheckBoxItem(itemListAction);
@@ -6560,6 +6606,9 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
         if (this.cache || this.infiniteScroll) {
             return this.items.length;
         }
+        else if (!this.items.length && this.footerActionListbox) {
+            return true;
+        }
         else {
             return !this.isServerSearching && this.items.length;
         }
@@ -6617,12 +6666,16 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
             }
         }
     }
+    handleFooterActionListbox() {
+        this.footerActionListboxEvent.emit();
+        this.closeEvent.emit();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoListBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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  [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\"\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            ></po-item-list>\n          }\n        </li>\n      }\n    </ul>\n  } @else {\n    @if (!items.length && !isServerSearching && type !== 'action') {\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.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i2.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: "19.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  [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\" [class.po-item-list-aa]=\"size === 'small'\" aria-hidden=\"true\">\n            <span>{{ placeholderListbox }}</span>\n          </div>\n        }\n\n        @if (!placeholderListbox && !items.length) {\n          <div class=\"po-item-list\" [class.po-item-list-aa]=\"size === 'small'\" 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.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  [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\"\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            ></po-item-list>\n          }\n        </li>\n      }\n    </ul>\n  } @else {\n    @if (!items.length && !isServerSearching && type !== 'action') {\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  [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\" [class.po-item-list-aa]=\"size === 'small'\" aria-hidden=\"true\">\n            <span>{{ placeholderListbox }}</span>\n          </div>\n        }\n\n        @if (!placeholderListbox && !items.length) {\n          <div class=\"po-item-list\" [class.po-item-list-aa]=\"size === 'small'\" 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" }]
         }], ctorParameters: () => [], propDecorators: { listbox: [{
                 type: ViewChild,
                 args: ['listbox', { static: true }]
@@ -10422,6 +10475,7 @@ class PoChartComponent extends PoChartBaseComponent {
         this.checkShowCEcharts();
     }
     ngOnDestroy() {
+        /* istanbul ignore next */
         if (this.resizeObserver?.disconnect) {
             this.resizeObserver?.disconnect();
         }
@@ -10483,10 +10537,16 @@ class PoChartComponent extends PoChartBaseComponent {
             this.chartInstance?.resize();
         });
     }
+    applyStringFormatter(template, context) {
+        return template
+            .replace('{name}', context.name)
+            .replace('{seriesName}', context.seriesName)
+            .replace('{value}', context.value);
+    }
     observeContainerResize() {
         if (!this.series?.length)
             return;
-        if (this.resizeObserver) {
+        if (this.resizeObserver?.disconnect) {
             this.resizeObserver.disconnect();
             this.resizeObserver = undefined;
         }
@@ -10604,6 +10664,33 @@ class PoChartComponent extends PoChartBaseComponent {
             this.poTooltip.last.toggleTooltipVisibility(false);
         });
     }
+    parseTooltipText(text) {
+        if (!text)
+            return text;
+        return text
+            .replace(/\n/g, '<br>')
+            .replace(/\*\*(.*?)\*\*/g, '<b>$1</b>')
+            .replace(/__(.*?)__/g, '<i>$1</i>');
+    }
+    resolveCustomTooltip(params, name, seriesName, valueLabel) {
+        let text;
+        const serie = params.seriesType === 'pie' ? this.series[params.dataIndex] : this.series[params.seriesIndex];
+        if (serie?.tooltip) {
+            if (typeof serie.tooltip === 'function') {
+                text = serie.tooltip(params);
+            }
+            else {
+                text = this.applyStringFormatter(serie.tooltip, { name, seriesName, value: valueLabel });
+            }
+        }
+        if (!text) {
+            text =
+                seriesName && !seriesName.includes('\u00000')
+                    ? `<b>${name}</b><br>${seriesName}: <b>${valueLabel}</b>`
+                    : `${name}: <b>${valueLabel}</b>`;
+        }
+        return this.parseTooltipText(text);
+    }
     setTooltipProperties(divTooltipElement, params) {
         const chartElement = this.el.nativeElement.querySelector('#chart-id');
         let valueLabel = params.value;
@@ -10613,21 +10700,7 @@ class PoChartComponent extends PoChartBaseComponent {
         }
         const name = params.name === ' ' ? this.literals.item : params.name;
         const seriesName = params.seriesName === ' ' ? this.literals.item : params.seriesName;
-        const customTooltipText = seriesName && !seriesName.includes('\u00000')
-            ? `<b>${name}</b><br>
-        ${seriesName}: <b>${valueLabel}</b>`
-            : `${name}: <b>${valueLabel}</b>`;
-        const isPie = params.seriesType === 'pie';
-        if (isPie) {
-            this.tooltipText = this.series[params.dataIndex].tooltip
-                ? this.series[params.dataIndex].tooltip
-                : customTooltipText;
-        }
-        else {
-            this.tooltipText = this.series[params.seriesIndex].tooltip
-                ? this.series[params.seriesIndex].tooltip
-                : customTooltipText;
-        }
+        this.tooltipText = this.resolveCustomTooltip(params, name, seriesName, valueLabel);
         divTooltipElement.style.left = `${params.event.offsetX + chartElement.offsetLeft + 3}px`;
         divTooltipElement.style.top = `${chartElement.offsetTop + params.event.offsetY - 2}px`;
         this.poTooltip.last.toggleTooltipVisibility(true);
@@ -15355,7 +15428,7 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
                 multi: true
             },
             PoControlPositionService
-        ], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, static: true }, { propertyName: "dialogPicker", first: true, predicate: ["dialogPicker"], descendants: true, read: ElementRef }, { propertyName: "iconDatepicker", first: true, predicate: ["iconDatepicker"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datepicker\"\n    >\n      <div class=\"po-field-container-input\">\n        <input\n          #inp\n          class=\"po-input po-datepicker\"\n          [class.po-input-icon-right]=\"clean && inp.value\"\n          [class.po-input-icon-right-aa]=\"clean && inp.value && size === 'small'\"\n          [class.po-input-aa]=\"size === 'small'\"\n          type=\"text\"\n          [attr.name]=\"name\"\n          [autocomplete]=\"autocomplete\"\n          [disabled]=\"disabled\"\n          [id]=\"id\"\n          [placeholder]=\"disabled ? '' : placeholder\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [attr.data-append-in-body]=\"appendBox\"\n          (blur)=\"eventOnBlur($event)\"\n          (click)=\"eventOnClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n        />\n        <div class=\"po-field-icon-container-right\">\n          @if (clean && !disabled && !readonly) {\n            <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear()\">\n            </po-clean>\n          }\n        </div>\n      </div>\n      <po-button\n        #iconDatepicker\n        class=\"po-datepicker-button\"\n        [class.po-datepicker-button-aa]=\"size === 'small'\"\n        p-icon=\"ICON_CALENDAR\"\n        p-kind=\"tertiary\"\n        [p-disabled]=\"disabled || readonly\"\n        [p-size]=\"size\"\n        (keydown)=\"onKeyPress($event)\"\n        (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n        (p-click)=\"togglePicker()\"\n      >\n      </po-button>\n    </div>\n\n    @if (appendBox) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n\n    <ng-template #sharedCalendarContent>\n      <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\">\n        @if (verifyMobile()) {\n          <div class=\"po-datepicker-calendar-overlay\"></div>\n        }\n        <po-calendar\n          #calendar\n          [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\n          [(ngModel)]=\"date\"\n          [p-max-date]=\"maxDate\"\n          [p-min-date]=\"minDate\"\n          [p-locale]=\"locale\"\n          (p-change)=\"dateSelected()\"\n          (keydown)=\"onCalendarKeyDown($event)\"\n        ></po-calendar>\n      </div>\n    </ng-template>\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-optional", "p-required", "p-show-required"] }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoCalendarComponent, selector: "po-calendar" }, { kind: "component", type: PoButtonComponent, selector: "po-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, static: true }, { propertyName: "dialogPicker", first: true, predicate: ["dialogPicker"], descendants: true, read: ElementRef }, { propertyName: "iconDatepicker", first: true, predicate: ["iconDatepicker"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div #outerContainer>\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-field-container-content-datepicker\"\n    >\n      <div class=\"po-field-container-input\">\n        <input\n          #inp\n          class=\"po-input po-datepicker\"\n          [class.po-input-icon-right]=\"clean && inp.value\"\n          [class.po-input-icon-right-aa]=\"clean && inp.value && size === 'small'\"\n          [class.po-input-aa]=\"size === 'small'\"\n          type=\"text\"\n          [attr.name]=\"name\"\n          [autocomplete]=\"autocomplete\"\n          [disabled]=\"disabled\"\n          [id]=\"id\"\n          [placeholder]=\"disabled ? '' : placeholder\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [attr.data-append-in-body]=\"appendBox\"\n          (blur)=\"eventOnBlur($event)\"\n          (click)=\"eventOnClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n        />\n        <div class=\"po-field-icon-container-right\">\n          @if (clean && !disabled && !readonly) {\n            <po-clean class=\"po-icon-input\" [p-element-ref]=\"inputEl\" [p-size]=\"size\" (p-change-event)=\"clear()\">\n            </po-clean>\n          }\n        </div>\n      </div>\n      <po-button\n        #iconDatepicker\n        class=\"po-datepicker-button\"\n        [class.po-datepicker-button-aa]=\"size === 'small'\"\n        p-icon=\"ICON_CALENDAR\"\n        p-kind=\"tertiary\"\n        [p-disabled]=\"disabled || readonly\"\n        [p-size]=\"size\"\n        (keydown)=\"onKeyPress($event)\"\n        (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n        (p-click)=\"togglePicker()\"\n      >\n      </po-button>\n    </div>\n\n    @if (appendBox) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"sharedCalendarContent\"></ng-container>\n    }\n\n    <ng-template #sharedCalendarContent>\n      <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\" tabindex=\"-1\">\n        @if (verifyMobile()) {\n          <div class=\"po-datepicker-calendar-overlay\"></div>\n        }\n        <po-calendar\n          #calendar\n          [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\n          [(ngModel)]=\"date\"\n          [p-max-date]=\"maxDate\"\n          [p-min-date]=\"minDate\"\n          [p-locale]=\"locale\"\n          (p-change)=\"dateSelected()\"\n          (keydown)=\"onCalendarKeyDown($event)\"\n        ></po-calendar>\n      </div>\n    </ng-template>\n  </div>\n\n  @if (!readonly) {\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  }\n</po-field-container>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-optional", "p-required", "p-show-required"] }, { kind: "directive", type: i2$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoCalendarComponent, selector: "po-calendar" }, { kind: "component", type: PoButtonComponent, selector: "po-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoDatepickerComponent, decorators: [{
             type: Component,
@@ -18999,7 +19072,7 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
         this.poControlPosition.setElements(this.popoverElement.nativeElement, popoverOffset, this.target);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoPopoverComponent, deps: [{ token: i0.Renderer2 }, { token: PoControlPositionService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: PoPopoverComponent, isStandalone: false, selector: "po-popover", providers: [PoControlPositionService], viewQueries: [{ propertyName: "popoverElement", first: true, predicate: ["popoverElement"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (appendBox) {\n  <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"target\" [cdkConnectedOverlayOpen]=\"true\">\n    <ng-container *ngTemplateOutlet=\"sharedPopoverContent\"></ng-container>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"sharedPopoverContent\"></ng-container>\n}\n\n<ng-template #sharedPopoverContent>\n  <div [hidden]=\"isHidden\" class=\"po-popover\" #popoverElement>\n    @if (!hideArrow) {\n      <div class=\"po-popover-arrow po-arrow-{{ arrowDirection }}\"></div>\n    }\n\n    <div class=\"po-popover-content\">\n      @if (title) {\n        <span class=\"po-popover-title\">{{ title }}</span>\n      }\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: PoPopoverComponent, isStandalone: false, selector: "po-popover", providers: [PoControlPositionService], viewQueries: [{ propertyName: "popoverElement", first: true, predicate: ["popoverElement"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (appendBox) {\n  <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"target\" [cdkConnectedOverlayOpen]=\"true\">\n    <ng-container *ngTemplateOutlet=\"sharedPopoverContent\"></ng-container>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"sharedPopoverContent\"></ng-container>\n}\n\n<ng-template #sharedPopoverContent>\n  <div [hidden]=\"isHidden\" class=\"po-popover\" #popoverElement>\n    @if (!hideArrow) {\n      <div class=\"po-popover-arrow po-arrow-{{ arrowDirection }}\"></div>\n    }\n\n    <div class=\"po-popover-content\">\n      @if (title) {\n        <span class=\"po-popover-title\">{{ title }}</span>\n      }\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoPopoverComponent, decorators: [{
             type: Component,
@@ -22755,7 +22828,9 @@ const poSearchLiteralsDefault = {
         of: 'of',
         next: 'Next result',
         previous: 'Previous result',
-        result: 'Result'
+        result: 'Result',
+        footerActionListbox: 'See all results',
+        placeholderListbox: 'Search'
     },
     es: {
         search: 'Buscar',
@@ -22764,7 +22839,9 @@ const poSearchLiteralsDefault = {
         of: 'de',
         next: 'Siguiente resultado',
         previous: 'Resultado anterior',
-        result: 'Resultado'
+        result: 'Resultado',
+        footerActionListbox: 'Ver todos los resultados',
+        placeholderListbox: 'Buscar'
     },
     pt: {
         search: 'Pesquisar',
@@ -22773,7 +22850,9 @@ const poSearchLiteralsDefault = {
         of: 'de',
         next: 'Próximo resultado',
         previous: 'Resultado anterior',
-        result: 'Resultado'
+        result: 'Resultado',
+        footerActionListbox: 'Ver todos os resultados',
+        placeholderListbox: 'Pesquisar'
     },
     ru: {
         search: 'Поиск',
@@ -22782,7 +22861,27 @@ const poSearchLiteralsDefault = {
         of: 'из',
         next: 'Следующий результат',
         previous: 'Предыдущий результат',
-        result: 'Результат'
+        result: 'Результат',
+        footerActionListbox: 'Посмотреть все результаты',
+        placeholderListbox: 'Поиск'
+    }
+};
+const poSearchLiteralsDefaultExecute = {
+    en: {
+        search: 'Search and Execute',
+        placeholderListbox: 'Search and Execute'
+    },
+    es: {
+        search: 'Buscar y ejecutar',
+        placeholderListbox: 'Buscar y ejecutar'
+    },
+    pt: {
+        search: 'Pesquisar e Executar ',
+        placeholderListbox: 'Pesquisar e Executar '
+    },
+    ru: {
+        search: 'Поиск и выполнение',
+        placeholderListbox: 'Поиск и выполнение'
     }
 };
 
@@ -22861,6 +22960,7 @@ class PoSearchBaseComponent {
     language;
     _filterSelect;
     _size = undefined;
+    _keysLabel = [];
     /**
      * @optional
      *
@@ -23021,15 +23121,22 @@ class PoSearchBaseComponent {
             this._literals = {
                 ...poSearchLiteralsDefault[poLocaleDefault],
                 ...poSearchLiteralsDefault[this.language],
+                ...(this.type === 'execute' ? poSearchLiteralsDefaultExecute[this.language] : {}),
                 ...value
             };
         }
         else {
-            this._literals = poSearchLiteralsDefault[this.language];
+            this._literals = {
+                ...poSearchLiteralsDefault[this.language],
+                ...(this.type === 'execute' ? poSearchLiteralsDefaultExecute[this.language] : {})
+            };
         }
     }
     get literals() {
-        return this._literals || poSearchLiteralsDefault[this.language];
+        return (this._literals || {
+            ...poSearchLiteralsDefault[this.language],
+            ...(this.type === 'execute' ? poSearchLiteralsDefaultExecute[this.language] : {})
+        });
     }
     /**
      * @optional
@@ -23055,6 +23162,8 @@ class PoSearchBaseComponent {
      * - `action`: Realiza a busca a cada caractere digitado.
      * - `trigger`: Realiza a busca ao pressionar `enter` ou clicar no ícone de busca.
      * - `locate`: Modo manual. Exibe botões e contador, mas não executa buscas — controle é do desenvolvedor.
+     * - `execute`: Executa uma ação ou realiza um redirecionamento ao selecionar um item no `listbox`.
+     *    Para este tipo, é necessário informar as propriedades `action` ou `url` nos itens definidos em `p-items`.
      *
      * @default `action`
      */
@@ -23092,6 +23201,32 @@ class PoSearchBaseComponent {
     get size() {
         return this._size ?? getDefaultSizeFn(PoFieldSize);
     }
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define os nomes das propriedades do objeto que serão exibidos como rótulos (labels) no `listbox` quando a propriedade
+     * `p-show-listbox` estiver habilitada.
+     *
+     * Deve ser informado um array de strings contendo até **3 propriedades**.
+     *
+     * Exemplo de uso:
+     * ```ts
+     * keysLabel: Array<string> = ['nome', 'email', 'country'];
+     * ```
+     */
+    set keysLabel(value) {
+        if (value && value.length > 3) {
+            this._keysLabel = value.slice(0, 3);
+        }
+        else {
+            this._keysLabel = value;
+        }
+    }
+    get keysLabel() {
+        return this._keysLabel;
+    }
     /**
      * @optional
      *
@@ -23158,6 +23293,15 @@ class PoSearchBaseComponent {
      * > Compatível com a propriedade `p-search-type` do tipo `locate`.
      */
     locatePrevious = new EventEmitter();
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado ao clicar no botão de ação exibido no rodapé do `listbox`.
+     * O texto exibido pode ser configurado por meio do literal `footerActionListbox`.
+     */
+    footerAction = new EventEmitter();
     constructor(languageService) {
         this.language = languageService.getShortLanguage();
     }
@@ -23166,7 +23310,7 @@ class PoSearchBaseComponent {
         return _values.map(value => (typeof value === 'object' ? value : { label: value, value }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoSearchBaseComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.7", type: PoSearchBaseComponent, isStandalone: true, inputs: { ariaLabel: ["p-aria-label", "ariaLabel"], disabled: ["p-disabled", "disabled", convertToBoolean], filterKeys: ["p-filter-keys", "filterKeys"], filterSelect: ["p-filter-select", "filterSelect"], filterType: ["p-filter-type", "filterType"], icon: ["p-icon", "icon"], items: ["p-items", "items"], literals: ["p-literals", "literals"], locateSummary: ["p-locate-summary", "locateSummary"], type: ["p-search-type", "type"], showListbox: ["p-show-listbox", "showListbox", convertToBoolean], size: ["p-size", "size"] }, outputs: { blur: "p-blur", changeModel: "p-change-model", filter: "p-filter", filteredItemsChange: "p-filtered-items-change", listboxOnClick: "p-listbox-onclick", locateNext: "p-locate-next", locatePrevious: "p-locate-previous" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.7", type: PoSearchBaseComponent, isStandalone: true, inputs: { ariaLabel: ["p-aria-label", "ariaLabel"], disabled: ["p-disabled", "disabled", convertToBoolean], filterKeys: ["p-filter-keys", "filterKeys"], filterSelect: ["p-filter-select", "filterSelect"], filterType: ["p-filter-type", "filterType"], icon: ["p-icon", "icon"], items: ["p-items", "items"], literals: ["p-literals", "literals"], locateSummary: ["p-locate-summary", "locateSummary"], type: ["p-search-type", "type"], showListbox: ["p-show-listbox", "showListbox", convertToBoolean], size: ["p-size", "size"], keysLabel: ["p-keys-label", "keysLabel"] }, outputs: { blur: "p-blur", changeModel: "p-change-model", filter: "p-filter", filteredItemsChange: "p-filtered-items-change", listboxOnClick: "p-listbox-onclick", locateNext: "p-locate-next", locatePrevious: "p-locate-previous", footerAction: "p-footer-action-listbox" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoSearchBaseComponent, decorators: [{
             type: Directive
@@ -23206,6 +23350,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             }], size: [{
                 type: Input,
                 args: ['p-size']
+            }], keysLabel: [{
+                type: Input,
+                args: ['p-keys-label']
             }], blur: [{
                 type: Output,
                 args: ['p-blur']
@@ -23227,10 +23374,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             }], locatePrevious: [{
                 type: Output,
                 args: ['p-locate-previous']
+            }], footerAction: [{
+                type: Output,
+                args: ['p-footer-action-listbox']
             }] } });
 
 const poSearchContainerOffset = 8;
 const poSearchContainerPositionDefault = 'bottom';
+const ID_SEARCH_BUTTON_CLEAN = 'search-button-clean';
 /**
  * @docsExtends PoSearchBaseComponent
  *
@@ -23264,6 +23415,11 @@ const poSearchContainerPositionDefault = 'bottom';
  *  <file name="sample-po-search-filter-select/sample-po-search-filter-select.component.ts"> </file>
  * </example>
  *
+ * <example name="po-search-execute" title="PO Search Form Fields with Execute">
+ *  <file name="sample-po-search-execute/sample-po-search-execute.component.html"> </file>
+ *  <file name="sample-po-search-execute/sample-po-search-execute.component.ts"> </file>
+ * </example>
+ *
  * <example name="po-search-fields-locate" title="PO Search Form Fields with Locate">
  *  <file name="sample-po-search-fields-locate/sample-po-search-fields-locate.component.html"> </file>
  *  <file name="sample-po-search-fields-locate/sample-po-search-fields-locate.component.ts"> </file>
@@ -23310,6 +23466,11 @@ class PoSearchComponent extends PoSearchBaseComponent {
     searchFilter = {};
     searchFilterSelectLabel;
     searchFilterSelectActions;
+    idSearchButtonClean = ID_SEARCH_BUTTON_CLEAN;
+    showFooterActionListbox = false;
+    showSeparator = false;
+    placeholderListbox;
+    modelSelected;
     constructor() {
         const languageService = inject(PoLanguageService);
         super(languageService);
@@ -23318,11 +23479,12 @@ class PoSearchComponent extends PoSearchBaseComponent {
     ngOnInit() {
         this.filteredItems = this.items;
         if (this.showListbox) {
-            this.listboxFilteredItems = this.listboxItems;
+            this.listboxFilteredItems = this.keysLabel.length === 0 ? this.listboxItems : this.items;
         }
         if (this.filterSelect) {
             this.createDropdownFilterSelect();
         }
+        this.showFooterActionListbox = this.footerAction.observed;
     }
     ngOnChanges(changes) {
         if (changes.filterSelect?.currentValue) {
@@ -23332,6 +23494,18 @@ class PoSearchComponent extends PoSearchBaseComponent {
             this.updateShowSearchLocateControls();
             this.updatePaddingRightLocate(true);
         }
+        if (changes.keysLabel) {
+            this.showSeparator = this.keysLabel.length > 1;
+        }
+        this.configureSearchModeExecute(changes);
+    }
+    configureSearchModeExecute(changes) {
+        if (changes.type?.currentValue === 'execute') {
+            this.showListbox = true;
+            if (!this.keysLabel.length && this.filterKeys?.length) {
+                this.keysLabel = [...this.filterKeys.slice(0, 3)];
+            }
+        }
     }
     ngOnDestroy() {
         this.removeListeners();
@@ -23342,8 +23516,11 @@ class PoSearchComponent extends PoSearchBaseComponent {
     clearSearch() {
         this.poSearchInput.nativeElement.value = '';
         this.onSearchChange('', true);
-        this.filteredItemsChange.emit(this.items);
-        this.onCloseListbox();
+        this.adjustContainerPosition();
+        this.changeDetector.detectChanges();
+        if (!this.showFooterActionListbox) {
+            this.onCloseListbox();
+        }
     }
     onCleanKeydown(event) {
         const isEsc = event.key === 'Escape';
@@ -23357,7 +23534,9 @@ class PoSearchComponent extends PoSearchBaseComponent {
     onEnterKey(event) {
         if (this.type !== 'locate') {
             if (this.listboxOpen) {
-                this.closeListbox();
+                if (!this.showFooterActionListbox) {
+                    this.closeListbox();
+                }
             }
             else {
                 this.onSearchChange(event.target.value, this.type === 'trigger', true);
@@ -23369,19 +23548,13 @@ class PoSearchComponent extends PoSearchBaseComponent {
         const searchTextInitial = searchText;
         if (this.type === 'locate' && this.changeModel.observed) {
             this.changeModel.emit(searchTextInitial);
+            this.modelSelected = searchTextInitial;
             return;
         }
         if (searchText !== undefined) {
             searchText = searchText.toLowerCase();
         }
         this.isFiltering = true;
-        if (this.showListbox && !buttonClick && searchText.length > 0) {
-            this.openListbox();
-            this.listboxFilteredItems = this.getListboxFilteredItems(searchText);
-        }
-        if (searchText.length === 0) {
-            this.listboxFilteredItems = this.listboxItems;
-        }
         if (activated && !this.listboxItemclicked) {
             this.updateFilteredItems(searchText);
             this.filteredItemsChange.emit(this.filteredItems);
@@ -23399,6 +23572,17 @@ class PoSearchComponent extends PoSearchBaseComponent {
             }
             this.filter.emit(this.searchFilter);
             this.changeModel.emit(searchText);
+            this.modelSelected = searchTextInitial;
+        }
+        if (this.showListbox && !buttonClick && (searchText.length > 0 || this.showFooterActionListbox)) {
+            this.openListbox();
+            this.listboxFilteredItems = this.getListboxFilteredItems(searchText);
+            this.handlerPlaceholderListbox();
+        }
+        else {
+            if (searchText.length === 0) {
+                this.listboxFilteredItems = this.keysLabel.length === 0 ? this.listboxItems : this.items;
+            }
         }
         if (this.listboxItemclicked) {
             this.listboxItemclicked = false;
@@ -23423,6 +23607,9 @@ class PoSearchComponent extends PoSearchBaseComponent {
         return valuesToSearch.some(value => this.filterValue(value, searchText));
     }
     getListboxFilteredItems(searchText) {
+        if (this.keysLabel.length > 0) {
+            return searchText.length ? this.filteredItems : [];
+        }
         return this.listboxItems.filter(item => this.filterValue(item.value, searchText));
     }
     filterValue(value, searchText) {
@@ -23457,12 +23644,19 @@ class PoSearchComponent extends PoSearchBaseComponent {
         if (!event || event.code === 'Enter') {
             this.listboxItemclicked = true;
         }
-        this.poSearchInput.nativeElement.value = option.value;
-        this.listboxOnClick.emit(option.value);
+        let value = option.value;
+        if (this.keysLabel.length) {
+            value = option[this.keysLabel[0]];
+        }
+        this.poSearchInput.nativeElement.value = value;
+        this.listboxOnClick.emit(value);
+        if (this.keysLabel.length) {
+            this.items.forEach(item => delete item.selected);
+        }
         this.onCloseListbox();
         if (this.type === 'action') {
             this.listboxItemclicked = false;
-            this.onSearchChange(option.value.toString(), true, true);
+            this.onSearchChange(value.toString(), true, true);
         }
     }
     onBlur() {
@@ -23474,7 +23668,7 @@ class PoSearchComponent extends PoSearchBaseComponent {
         if (this.blur.observed) {
             this.blur.emit();
         }
-        if (this.listboxOpen) {
+        if (this.listboxOpen && !this.showFooterActionListbox) {
             if (!this.poListbox.items.length) {
                 this.closeListbox();
             }
@@ -23489,6 +23683,7 @@ class PoSearchComponent extends PoSearchBaseComponent {
             this.updateShowSearchLocateControls();
             this.updatePaddingRightLocate(false);
         }
+        this.openListboxFooterAction();
     }
     onInputHandler(value) {
         if (this.type === 'locate') {
@@ -23498,7 +23693,9 @@ class PoSearchComponent extends PoSearchBaseComponent {
         }
         else {
             this.onSearchChange(value, false);
-            this.onSearchChange(value, this.type === 'action');
+            this.onSearchChange(value, ['action', 'execute'].includes(this.type));
+            this.adjustContainerPosition();
+            this.changeDetector.detectChanges();
         }
     }
     onKeyDown(event) {
@@ -23531,7 +23728,7 @@ class PoSearchComponent extends PoSearchBaseComponent {
         }
     }
     focusItem() {
-        const listboxItemList = document.querySelectorAll('.po-listbox-item');
+        const listboxItemList = this.poListboxElement?.nativeElement?.querySelectorAll('.po-listbox-item');
         setTimeout(() => {
             Array.from(listboxItemList).forEach((el) => {
                 el.tabIndex = -1;
@@ -23554,11 +23751,13 @@ class PoSearchComponent extends PoSearchBaseComponent {
         }
     }
     openListbox() {
-        this.listboxOpen = true;
-        this.changeDetector.detectChanges();
-        this.initializeListeners();
-        this.poSearchInput.nativeElement.focus();
-        this.setContainerPosition();
+        if (!this.listboxOpen) {
+            this.listboxOpen = true;
+            this.changeDetector.detectChanges();
+            this.initializeListeners();
+            this.poSearchInput.nativeElement.focus();
+            this.setContainerPosition();
+        }
     }
     closeListbox() {
         this.listboxOpen = false;
@@ -23568,7 +23767,8 @@ class PoSearchComponent extends PoSearchBaseComponent {
     clickedOutsideInput(event) {
         if (this.listboxOpen &&
             !this.poSearchInput?.nativeElement?.contains(event.target) &&
-            !this.poListboxElement?.nativeElement?.contains(event.target)) {
+            !this.poListboxElement?.nativeElement?.contains(event.target) &&
+            !(this.showFooterActionListbox && event.target.closest(`#${this.idSearchButtonClean}`))) {
             this.closeListbox();
         }
     }
@@ -23657,12 +23857,30 @@ class PoSearchComponent extends PoSearchBaseComponent {
             this.onSearchChange(this.getInputValue(), true);
         }
     }
+    handlerFooterActionListbox() {
+        this.footerAction.emit();
+        this.closeListbox();
+    }
+    openListboxFooterAction() {
+        if (this.showFooterActionListbox && this.showListbox && !this.modelSelected) {
+            this.listboxFilteredItems = [];
+            this.handlerPlaceholderListbox();
+            this.openListbox();
+        }
+    }
+    handlerPlaceholderListbox() {
+        if (this.showFooterActionListbox && !this.listboxFilteredItems.length && this.getInputValue().length == 0) {
+            this.placeholderListbox = this.literals.placeholderListbox;
+            return;
+        }
+        this.placeholderListbox = null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: PoSearchComponent, isStandalone: false, selector: "po-search", providers: [PoControlPositionService], viewQueries: [{ propertyName: "locateCounter", first: true, predicate: ["locateCounter"], descendants: true }, { propertyName: "poSearchInput", first: true, predicate: ["poSearchInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "poListboxContainerElement", first: true, predicate: ["poListboxContainerElement"], descendants: true, read: ElementRef }, { propertyName: "poListboxElement", first: true, predicate: ["poListboxElement"], descendants: true, read: ElementRef }, { propertyName: "poListbox", first: true, predicate: ["poListbox"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"po-search\"\n  [class.po-search-disabled]=\"disabled\"\n  [class.po-search-filter-locate]=\"type === 'locate'\"\n  [attr.p-search-type]=\"type === 'locate'\"\n  [attr.p-size]=\"size\"\n>\n  @if (filterSelect && type !== 'locate') {\n    <div class=\"po-search-select\">\n      <po-dropdown\n        [p-label]=\"searchFilterSelectLabel\"\n        [p-disabled]=\"disabled\"\n        [p-actions]=\"searchFilterSelectActions\"\n        [p-size]=\"size\"\n      >\n      </po-dropdown>\n    </div>\n  }\n\n  @if (type === 'action' || type === 'locate') {\n    <div class=\"po-search-icon\">\n      <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"></po-icon>\n    </div>\n  }\n\n  <input\n    #poSearchInput\n    class=\"po-search-input\"\n    type=\"text\"\n    [ariaLabel]=\"ariaLabel\"\n    [class.po-search-input-clean]=\"!!poSearchInput.value && !disabled && type !== 'locate'\"\n    [class.po-search-input-trigger]=\"type === 'trigger'\"\n    [style.padding-right.px]=\"dynamicPaddingRight\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"literals.search\"\n    (input)=\"onInputHandler($event.target.value)\"\n    (keyup.enter)=\"onEnterKey($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n  />\n\n  <div class=\"po-search-buttons\">\n    @if (type === 'locate' && poSearchInput.value && !disabled) {\n      <span\n        #locateCounter\n        class=\"po-search-locate-counter\"\n        id=\"summary\"\n        [attr.aria-label]=\"\n          literals.result +\n          ' ' +\n          (locateSummary?.currentIndex ?? 0) +\n          ' ' +\n          literals.of +\n          ' ' +\n          (locateSummary?.total ?? 0)\n        \"\n      >\n        {{ locateSummary?.currentIndex ?? 0 }}/{{ locateSummary?.total ?? 0 }}\n      </span>\n    }\n\n    @if (!!poSearchInput.value && !disabled) {\n      <button\n        class=\"po-search-button po-search-button-clean\"\n        type=\"button\"\n        [ariaLabel]=\"literals.clean\"\n        (click)=\"clearSearch()\"\n        (keydown.enter)=\"clearSearch()\"\n        (keydown)=\"onCleanKeydown($event)\"\n      >\n        <po-clean class=\"po-icon-input\" [p-size]=\"size\"></po-clean>\n      </button>\n    }\n\n    @if (type === 'trigger') {\n      <button\n        class=\"po-search-button po-search-button-trigger\"\n        type=\"button\"\n        [ariaLabel]=\"literals.search\"\n        [disabled]=\"disabled\"\n        (click)=\"onSearchChange(poSearchInput.value, true, true)\"\n        (keydown.enter)=\"onSearchChange(poSearchInput.value, true, true)\"\n      >\n        <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"> </po-icon>\n      </button>\n    }\n\n    @if (showSearchLocateControls) {\n      <div class=\"po-search-locate-controls\">\n        <div class=\"po-search-divider\"></div>\n        <button\n          name=\"btnArrowUp\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.next\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locateNext.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_DOWN\"> </po-icon>\n        </button>\n\n        <button\n          name=\"btnArrowDown\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.previous\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locatePrevious.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_UP\"> </po-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n@if (type !== 'locate') {\n  <div #poListboxContainerElement class=\"po-search-listbox-container\" [hidden]=\"!listboxOpen\">\n    <po-listbox\n      #poListbox\n      #poListboxElement\n      p-type=\"option\"\n      [p-items]=\"listboxFilteredItems\"\n      (p-selectcombo-item)=\"onListboxClick($event, $event.event)\"\n      [p-visible]=\"listboxOpen\"\n      [p-filter-mode]=\"filterType\"\n      [p-should-mark-letter]=\"shouldMarkLetters\"\n      [p-filtering]=\"isFiltering\"\n      [p-search-value]=\"getInputValue()\"\n      [p-size]=\"size\"\n      (p-close)=\"onCloseListbox()\"\n    ></po-listbox>\n  </div>\n}\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox" }, { kind: "component", type: PoDropdownComponent, selector: "po-dropdown" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: PoSearchComponent, isStandalone: false, selector: "po-search", providers: [PoControlPositionService], viewQueries: [{ propertyName: "locateCounter", first: true, predicate: ["locateCounter"], descendants: true }, { propertyName: "poSearchInput", first: true, predicate: ["poSearchInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "poListboxContainerElement", first: true, predicate: ["poListboxContainerElement"], descendants: true, read: ElementRef }, { propertyName: "poListboxElement", first: true, predicate: ["poListboxElement"], descendants: true, read: ElementRef }, { propertyName: "poListbox", first: true, predicate: ["poListbox"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"po-search\"\n  [class.po-search-disabled]=\"disabled\"\n  [class.po-search-filter-locate]=\"type === 'locate'\"\n  [attr.p-search-type]=\"type === 'locate'\"\n  [attr.p-size]=\"size\"\n>\n  @if (filterSelect && type !== 'locate') {\n    <div class=\"po-search-select\">\n      <po-dropdown\n        [p-label]=\"searchFilterSelectLabel\"\n        [p-disabled]=\"disabled\"\n        [p-actions]=\"searchFilterSelectActions\"\n        [p-size]=\"size\"\n      >\n      </po-dropdown>\n    </div>\n  }\n\n  @if (type === 'action' || type === 'locate' || type === 'execute') {\n    <div class=\"po-search-icon\">\n      <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"></po-icon>\n    </div>\n  }\n\n  <input\n    #poSearchInput\n    class=\"po-search-input\"\n    type=\"text\"\n    [ariaLabel]=\"ariaLabel\"\n    [class.po-search-input-clean]=\"!!poSearchInput.value && !disabled && type !== 'locate'\"\n    [class.po-search-input-trigger]=\"type === 'trigger'\"\n    [style.padding-right.px]=\"dynamicPaddingRight\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"literals.search\"\n    (input)=\"onInputHandler($event.target.value)\"\n    (keyup.enter)=\"onEnterKey($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n  />\n\n  <div class=\"po-search-buttons\">\n    @if (type === 'locate' && poSearchInput.value && !disabled) {\n      <span\n        #locateCounter\n        class=\"po-search-locate-counter\"\n        id=\"summary\"\n        [attr.aria-label]=\"\n          literals.result +\n          ' ' +\n          (locateSummary?.currentIndex ?? 0) +\n          ' ' +\n          literals.of +\n          ' ' +\n          (locateSummary?.total ?? 0)\n        \"\n      >\n        {{ locateSummary?.currentIndex ?? 0 }}/{{ locateSummary?.total ?? 0 }}\n      </span>\n    }\n\n    @if (!!poSearchInput.value && !disabled) {\n      <div [id]=\"idSearchButtonClean\">\n        <button\n          class=\"po-search-button po-search-button-clean\"\n          type=\"button\"\n          [ariaLabel]=\"literals.clean\"\n          (click)=\"clearSearch()\"\n          (keydown.enter)=\"clearSearch()\"\n          (keydown)=\"onCleanKeydown($event)\"\n        >\n          <po-clean class=\"po-icon-input\" [p-size]=\"size\"></po-clean>\n        </button>\n      </div>\n    }\n\n    @if (type === 'trigger') {\n      <button\n        class=\"po-search-button po-search-button-trigger\"\n        type=\"button\"\n        [ariaLabel]=\"literals.search\"\n        [disabled]=\"disabled\"\n        (click)=\"onSearchChange(poSearchInput.value, true, true)\"\n        (keydown.enter)=\"onSearchChange(poSearchInput.value, true, true)\"\n      >\n        <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"> </po-icon>\n      </button>\n    }\n\n    @if (showSearchLocateControls) {\n      <div class=\"po-search-locate-controls\">\n        <div class=\"po-search-divider\"></div>\n        <button\n          name=\"btnArrowUp\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.next\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locateNext.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_DOWN\"> </po-icon>\n        </button>\n\n        <button\n          name=\"btnArrowDown\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.previous\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locatePrevious.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_UP\"> </po-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n@if (type !== 'locate') {\n  <div #poListboxContainerElement class=\"po-search-listbox-container\" [hidden]=\"!listboxOpen\">\n    <po-listbox\n      #poListbox\n      #poListboxElement\n      p-type=\"option\"\n      [p-items]=\"listboxFilteredItems\"\n      (p-selectcombo-item)=\"onListboxClick($event, $event.event)\"\n      [p-visible]=\"listboxOpen\"\n      [p-filter-mode]=\"filterType\"\n      [p-should-mark-letter]=\"shouldMarkLetters\"\n      [p-filtering]=\"isFiltering\"\n      [p-search-value]=\"getInputValue()\"\n      [p-size]=\"size\"\n      (p-close)=\"onCloseListbox()\"\n      [p-literals]=\"literals\"\n      [p-separator]=\"showSeparator\"\n      [p-keys-label]=\"keysLabel\"\n      [p-footer-action-listbox]=\"showFooterActionListbox\"\n      (p-footer-action-listbox-event)=\"handlerFooterActionListbox()\"\n      [p-placeholder-listbox]=\"placeholderListbox\"\n    ></po-listbox>\n  </div>\n}\n", dependencies: [{ kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox" }, { kind: "component", type: PoDropdownComponent, selector: "po-dropdown" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-search', providers: [PoControlPositionService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  class=\"po-search\"\n  [class.po-search-disabled]=\"disabled\"\n  [class.po-search-filter-locate]=\"type === 'locate'\"\n  [attr.p-search-type]=\"type === 'locate'\"\n  [attr.p-size]=\"size\"\n>\n  @if (filterSelect && type !== 'locate') {\n    <div class=\"po-search-select\">\n      <po-dropdown\n        [p-label]=\"searchFilterSelectLabel\"\n        [p-disabled]=\"disabled\"\n        [p-actions]=\"searchFilterSelectActions\"\n        [p-size]=\"size\"\n      >\n      </po-dropdown>\n    </div>\n  }\n\n  @if (type === 'action' || type === 'locate') {\n    <div class=\"po-search-icon\">\n      <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"></po-icon>\n    </div>\n  }\n\n  <input\n    #poSearchInput\n    class=\"po-search-input\"\n    type=\"text\"\n    [ariaLabel]=\"ariaLabel\"\n    [class.po-search-input-clean]=\"!!poSearchInput.value && !disabled && type !== 'locate'\"\n    [class.po-search-input-trigger]=\"type === 'trigger'\"\n    [style.padding-right.px]=\"dynamicPaddingRight\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"literals.search\"\n    (input)=\"onInputHandler($event.target.value)\"\n    (keyup.enter)=\"onEnterKey($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n  />\n\n  <div class=\"po-search-buttons\">\n    @if (type === 'locate' && poSearchInput.value && !disabled) {\n      <span\n        #locateCounter\n        class=\"po-search-locate-counter\"\n        id=\"summary\"\n        [attr.aria-label]=\"\n          literals.result +\n          ' ' +\n          (locateSummary?.currentIndex ?? 0) +\n          ' ' +\n          literals.of +\n          ' ' +\n          (locateSummary?.total ?? 0)\n        \"\n      >\n        {{ locateSummary?.currentIndex ?? 0 }}/{{ locateSummary?.total ?? 0 }}\n      </span>\n    }\n\n    @if (!!poSearchInput.value && !disabled) {\n      <button\n        class=\"po-search-button po-search-button-clean\"\n        type=\"button\"\n        [ariaLabel]=\"literals.clean\"\n        (click)=\"clearSearch()\"\n        (keydown.enter)=\"clearSearch()\"\n        (keydown)=\"onCleanKeydown($event)\"\n      >\n        <po-clean class=\"po-icon-input\" [p-size]=\"size\"></po-clean>\n      </button>\n    }\n\n    @if (type === 'trigger') {\n      <button\n        class=\"po-search-button po-search-button-trigger\"\n        type=\"button\"\n        [ariaLabel]=\"literals.search\"\n        [disabled]=\"disabled\"\n        (click)=\"onSearchChange(poSearchInput.value, true, true)\"\n        (keydown.enter)=\"onSearchChange(poSearchInput.value, true, true)\"\n      >\n        <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"> </po-icon>\n      </button>\n    }\n\n    @if (showSearchLocateControls) {\n      <div class=\"po-search-locate-controls\">\n        <div class=\"po-search-divider\"></div>\n        <button\n          name=\"btnArrowUp\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.next\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locateNext.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_DOWN\"> </po-icon>\n        </button>\n\n        <button\n          name=\"btnArrowDown\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.previous\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locatePrevious.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_UP\"> </po-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n@if (type !== 'locate') {\n  <div #poListboxContainerElement class=\"po-search-listbox-container\" [hidden]=\"!listboxOpen\">\n    <po-listbox\n      #poListbox\n      #poListboxElement\n      p-type=\"option\"\n      [p-items]=\"listboxFilteredItems\"\n      (p-selectcombo-item)=\"onListboxClick($event, $event.event)\"\n      [p-visible]=\"listboxOpen\"\n      [p-filter-mode]=\"filterType\"\n      [p-should-mark-letter]=\"shouldMarkLetters\"\n      [p-filtering]=\"isFiltering\"\n      [p-search-value]=\"getInputValue()\"\n      [p-size]=\"size\"\n      (p-close)=\"onCloseListbox()\"\n    ></po-listbox>\n  </div>\n}\n" }]
+            args: [{ selector: 'po-search', providers: [PoControlPositionService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  class=\"po-search\"\n  [class.po-search-disabled]=\"disabled\"\n  [class.po-search-filter-locate]=\"type === 'locate'\"\n  [attr.p-search-type]=\"type === 'locate'\"\n  [attr.p-size]=\"size\"\n>\n  @if (filterSelect && type !== 'locate') {\n    <div class=\"po-search-select\">\n      <po-dropdown\n        [p-label]=\"searchFilterSelectLabel\"\n        [p-disabled]=\"disabled\"\n        [p-actions]=\"searchFilterSelectActions\"\n        [p-size]=\"size\"\n      >\n      </po-dropdown>\n    </div>\n  }\n\n  @if (type === 'action' || type === 'locate' || type === 'execute') {\n    <div class=\"po-search-icon\">\n      <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"></po-icon>\n    </div>\n  }\n\n  <input\n    #poSearchInput\n    class=\"po-search-input\"\n    type=\"text\"\n    [ariaLabel]=\"ariaLabel\"\n    [class.po-search-input-clean]=\"!!poSearchInput.value && !disabled && type !== 'locate'\"\n    [class.po-search-input-trigger]=\"type === 'trigger'\"\n    [style.padding-right.px]=\"dynamicPaddingRight\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"literals.search\"\n    (input)=\"onInputHandler($event.target.value)\"\n    (keyup.enter)=\"onEnterKey($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n  />\n\n  <div class=\"po-search-buttons\">\n    @if (type === 'locate' && poSearchInput.value && !disabled) {\n      <span\n        #locateCounter\n        class=\"po-search-locate-counter\"\n        id=\"summary\"\n        [attr.aria-label]=\"\n          literals.result +\n          ' ' +\n          (locateSummary?.currentIndex ?? 0) +\n          ' ' +\n          literals.of +\n          ' ' +\n          (locateSummary?.total ?? 0)\n        \"\n      >\n        {{ locateSummary?.currentIndex ?? 0 }}/{{ locateSummary?.total ?? 0 }}\n      </span>\n    }\n\n    @if (!!poSearchInput.value && !disabled) {\n      <div [id]=\"idSearchButtonClean\">\n        <button\n          class=\"po-search-button po-search-button-clean\"\n          type=\"button\"\n          [ariaLabel]=\"literals.clean\"\n          (click)=\"clearSearch()\"\n          (keydown.enter)=\"clearSearch()\"\n          (keydown)=\"onCleanKeydown($event)\"\n        >\n          <po-clean class=\"po-icon-input\" [p-size]=\"size\"></po-clean>\n        </button>\n      </div>\n    }\n\n    @if (type === 'trigger') {\n      <button\n        class=\"po-search-button po-search-button-trigger\"\n        type=\"button\"\n        [ariaLabel]=\"literals.search\"\n        [disabled]=\"disabled\"\n        (click)=\"onSearchChange(poSearchInput.value, true, true)\"\n        (keydown.enter)=\"onSearchChange(poSearchInput.value, true, true)\"\n      >\n        <po-icon [p-icon]=\"icon ? icon : 'ICON_SEARCH'\"> </po-icon>\n      </button>\n    }\n\n    @if (showSearchLocateControls) {\n      <div class=\"po-search-locate-controls\">\n        <div class=\"po-search-divider\"></div>\n        <button\n          name=\"btnArrowUp\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.next\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locateNext.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_DOWN\"> </po-icon>\n        </button>\n\n        <button\n          name=\"btnArrowDown\"\n          class=\"po-search-button\"\n          [ariaLabel]=\"literals.previous\"\n          [disabled]=\"disabled || !locateSummary?.total\"\n          (click)=\"locatePrevious.emit()\"\n        >\n          <po-icon p-icon=\"ICON_ARROW_UP\"> </po-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n\n@if (type !== 'locate') {\n  <div #poListboxContainerElement class=\"po-search-listbox-container\" [hidden]=\"!listboxOpen\">\n    <po-listbox\n      #poListbox\n      #poListboxElement\n      p-type=\"option\"\n      [p-items]=\"listboxFilteredItems\"\n      (p-selectcombo-item)=\"onListboxClick($event, $event.event)\"\n      [p-visible]=\"listboxOpen\"\n      [p-filter-mode]=\"filterType\"\n      [p-should-mark-letter]=\"shouldMarkLetters\"\n      [p-filtering]=\"isFiltering\"\n      [p-search-value]=\"getInputValue()\"\n      [p-size]=\"size\"\n      (p-close)=\"onCloseListbox()\"\n      [p-literals]=\"literals\"\n      [p-separator]=\"showSeparator\"\n      [p-keys-label]=\"keysLabel\"\n      [p-footer-action-listbox]=\"showFooterActionListbox\"\n      (p-footer-action-listbox-event)=\"handlerFooterActionListbox()\"\n      [p-placeholder-listbox]=\"placeholderListbox\"\n    ></po-listbox>\n  </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { locateCounter: [{
                 type: ViewChild,
                 args: ['locateCounter', { static: false }]
@@ -27035,7 +27253,7 @@ class PoComboComponent extends PoComboBaseComponent {
                 useExisting: forwardRef(() => PoComboComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "comboOptionTemplate", first: true, predicate: PoComboOptionTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "outerContainer", first: true, predicate: ["outerContainer "], descendants: true, read: ElementRef }, { propertyName: "containerElement", first: true, predicate: ["containerElement"], descendants: true, read: ElementRef }, { propertyName: "contentElement", first: true, predicate: ["contentElement"], descendants: true, read: ElementRef }, { propertyName: "iconElement", first: true, predicate: ["iconArrow"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "poListbox", first: true, predicate: ["poListbox"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #outerContainer>\n  <po-field-container\n    [p-disabled]=\"disabled\"\n    [p-id]=\"id\"\n    [p-label]=\"label\"\n    [p-optional]=\"optional\"\n    [p-required]=\"required\"\n    [p-show-required]=\"showRequired\"\n  >\n    <div\n      #searchContainer\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-combo-container-content\"\n    >\n      <div class=\"po-combo-container-wrapper\">\n        @if (icon) {\n          <div class=\"po-field-icon-container-left\">\n            <po-icon\n              class=\"po-field-icon po-icon-input\"\n              [class.po-field-icon-disabled]=\"disabled\"\n              [class.po-field-icon-aa]=\"size === 'small'\"\n              [p-icon]=\"icon\"\n            ></po-icon>\n          </div>\n        }\n\n        <input\n          #inp\n          class=\"po-combo-input\"\n          [ngClass]=\"\n            clean && inp.value\n              ? size === 'small'\n                ? 'po-input-double-icon-right-aa'\n                : 'po-input-double-icon-right'\n              : size === 'small'\n                ? 'po-input-icon-right-aa'\n                : 'po-input-icon-right'\n          \"\n          [class.po-combo-input-aa]=\"size === 'small'\"\n          [class.po-input-icon-left]=\"icon\"\n          [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n          autocomplete=\"off\"\n          type=\"text\"\n          [attr.name]=\"name\"\n          [disabled]=\"disabled\"\n          [id]=\"id\"\n          [placeholder]=\"disabled ? '' : placeholder\"\n          [required]=\"required\"\n          [attr.data-append-in-body]=\"appendBox\"\n          (click)=\"toggleComboVisibility()\"\n          (keyup)=\"onKeyUp($event)\"\n          (blur)=\"onBlur($event)\"\n          (keyup)=\"searchOnEnterOrArrow($event, $event.target.value)\"\n          (keydown)=\"onKeyDown($event)\"\n        />\n\n        <div class=\"po-field-icon-container-right\">\n          @if (isCleanVisible()) {\n            <po-clean\n              tabindex=\"0\"\n              role=\"button\"\n              [attr.aria-label]=\"literals.clean\"\n              class=\"po-combo-clean po-icon-input\"\n              [class.po-combo-clean-aa]=\"size === 'small'\"\n              [p-element-ref]=\"inputEl\"\n              [p-size]=\"size\"\n              (p-change-event)=\"clear($event)\"\n              (click)=\"clear(null); $event.preventDefault()\"\n              (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n              (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n            >\n            </po-clean>\n          }\n\n          <div\n            #iconArrow\n            class=\"po-combo-arrow po-field-icon\"\n            [class.po-field-icon-disabled]=\"disabled\"\n            [class.po-field-icon-disabled-aa]=\"disabled && size === 'small'\"\n            (click)=\"toggleComboVisibility(true)\"\n          >\n            <po-icon\n              [p-icon]=\"comboOpen ? 'ICON_ARROW_UP po-icon-input' : 'ICON_ARROW_DOWN po-icon-input'\"\n              [class.po-field-icon]=\"!disabled\"\n              [class.po-field-icon-aa]=\"size === 'small'\"\n              [class.po-combo-default-border]=\"!disabled && inp.value\"\n              [class.po-combo-background-arrow-up]=\"!disabled && comboOpen\"\n            ></po-icon>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    @if (appendBox) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n    }\n\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  </po-field-container>\n\n  <ng-template #dropdownListbox>\n    <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n      <po-listbox\n        #poListbox\n        #contentElement\n        p-type=\"option\"\n        [p-items]=\"visibleOptions\"\n        [p-field-value]=\"dynamicValue\"\n        [p-field-label]=\"dynamicLabel\"\n        [p-template]=\"comboOptionTemplate\"\n        [p-search-value]=\"getInputValue()\"\n        [p-infinite-loading]=\"infiniteLoading\"\n        [p-infinite-scroll]=\"infiniteScroll\"\n        [p-filtering]=\"isFiltering\"\n        [p-cache]=\"cache\"\n        [p-filter-mode]=\"filterMode\"\n        [p-visible]=\"comboOpen\"\n        [p-is-searching]=\"isServerSearching\"\n        [p-should-mark-letter]=\"shouldMarkLetters\"\n        [p-compare-cache]=\"compareObjects(cacheOptions, visibleOptions)\"\n        [p-combo-service]=\"service\"\n        [p-infinite-scroll-distance]=\"infiniteScrollDistance\"\n        [p-size]=\"size\"\n        [p-container-width]=\"containerWidth\"\n        (p-selectcombo-item)=\"onOptionClick($event, $event.event)\"\n        (p-update-infinite-scroll)=\"showMoreInfiniteScroll()\"\n        (p-close)=\"onCloseCombo()\"\n        (keydown)=\"onListboxKeyDown($event)\"\n      ></po-listbox>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-optional", "p-required", "p-show-required"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "comboOptionTemplate", first: true, predicate: PoComboOptionTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "outerContainer", first: true, predicate: ["outerContainer "], descendants: true, read: ElementRef }, { propertyName: "containerElement", first: true, predicate: ["containerElement"], descendants: true, read: ElementRef }, { propertyName: "contentElement", first: true, predicate: ["contentElement"], descendants: true, read: ElementRef }, { propertyName: "iconElement", first: true, predicate: ["iconArrow"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "poListbox", first: true, predicate: ["poListbox"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #outerContainer>\n  <po-field-container\n    [p-disabled]=\"disabled\"\n    [p-id]=\"id\"\n    [p-label]=\"label\"\n    [p-optional]=\"optional\"\n    [p-required]=\"required\"\n    [p-show-required]=\"showRequired\"\n  >\n    <div\n      #searchContainer\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content po-combo-container-content\"\n    >\n      <div class=\"po-combo-container-wrapper\">\n        @if (icon) {\n          <div class=\"po-field-icon-container-left\">\n            <po-icon\n              class=\"po-field-icon po-icon-input\"\n              [class.po-field-icon-disabled]=\"disabled\"\n              [class.po-field-icon-aa]=\"size === 'small'\"\n              [p-icon]=\"icon\"\n            ></po-icon>\n          </div>\n        }\n\n        <input\n          #inp\n          class=\"po-combo-input\"\n          [ngClass]=\"\n            clean && inp.value\n              ? size === 'small'\n                ? 'po-input-double-icon-right-aa'\n                : 'po-input-double-icon-right'\n              : size === 'small'\n                ? 'po-input-icon-right-aa'\n                : 'po-input-icon-right'\n          \"\n          [class.po-combo-input-aa]=\"size === 'small'\"\n          [class.po-input-icon-left]=\"icon\"\n          [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n          autocomplete=\"off\"\n          type=\"text\"\n          [attr.name]=\"name\"\n          [disabled]=\"disabled\"\n          [id]=\"id\"\n          [placeholder]=\"disabled ? '' : placeholder\"\n          [required]=\"required\"\n          [attr.data-append-in-body]=\"appendBox\"\n          (click)=\"toggleComboVisibility()\"\n          (keyup)=\"onKeyUp($event)\"\n          (blur)=\"onBlur($event)\"\n          (keyup)=\"searchOnEnterOrArrow($event, $event.target.value)\"\n          (keydown)=\"onKeyDown($event)\"\n        />\n\n        <div class=\"po-field-icon-container-right\">\n          @if (isCleanVisible()) {\n            <po-clean\n              tabindex=\"0\"\n              role=\"button\"\n              [attr.aria-label]=\"literals.clean\"\n              class=\"po-combo-clean po-icon-input\"\n              [class.po-combo-clean-aa]=\"size === 'small'\"\n              [p-element-ref]=\"inputEl\"\n              [p-size]=\"size\"\n              (p-change-event)=\"clear($event)\"\n              (click)=\"clear(null); $event.preventDefault()\"\n              (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n              (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n            >\n            </po-clean>\n          }\n\n          <div\n            #iconArrow\n            class=\"po-combo-arrow po-field-icon\"\n            [class.po-field-icon-disabled]=\"disabled\"\n            [class.po-field-icon-disabled-aa]=\"disabled && size === 'small'\"\n            (click)=\"toggleComboVisibility(true)\"\n          >\n            <po-icon\n              [p-icon]=\"comboOpen ? 'ICON_ARROW_UP po-icon-input' : 'ICON_ARROW_DOWN po-icon-input'\"\n              [class.po-field-icon]=\"!disabled\"\n              [class.po-field-icon-aa]=\"size === 'small'\"\n              [class.po-combo-default-border]=\"!disabled && inp.value\"\n              [class.po-combo-background-arrow-up]=\"!disabled && comboOpen\"\n            ></po-icon>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    @if (appendBox) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n    }\n\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  </po-field-container>\n\n  <ng-template #dropdownListbox>\n    <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n      <po-listbox\n        #poListbox\n        #contentElement\n        p-type=\"option\"\n        [p-items]=\"visibleOptions\"\n        [p-field-value]=\"dynamicValue\"\n        [p-field-label]=\"dynamicLabel\"\n        [p-template]=\"comboOptionTemplate\"\n        [p-search-value]=\"getInputValue()\"\n        [p-infinite-loading]=\"infiniteLoading\"\n        [p-infinite-scroll]=\"infiniteScroll\"\n        [p-filtering]=\"isFiltering\"\n        [p-cache]=\"cache\"\n        [p-filter-mode]=\"filterMode\"\n        [p-visible]=\"comboOpen\"\n        [p-is-searching]=\"isServerSearching\"\n        [p-should-mark-letter]=\"shouldMarkLetters\"\n        [p-compare-cache]=\"compareObjects(cacheOptions, visibleOptions)\"\n        [p-combo-service]=\"service\"\n        [p-infinite-scroll-distance]=\"infiniteScrollDistance\"\n        [p-size]=\"size\"\n        [p-container-width]=\"containerWidth\"\n        (p-selectcombo-item)=\"onOptionClick($event, $event.event)\"\n        (p-update-infinite-scroll)=\"showMoreInfiniteScroll()\"\n        (p-close)=\"onCloseCombo()\"\n        (keydown)=\"onListboxKeyDown($event)\"\n      ></po-listbox>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-optional", "p-required", "p-show-required"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoComboComponent, decorators: [{
             type: Component,
@@ -34204,7 +34422,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         this.adjustContainerPosition();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: PoMultiselectComponent, isStandalone: false, selector: "po-multiselect", providers: providers$1, queries: [{ propertyName: "multiselectOptionTemplate", first: true, predicate: PoMultiselectOptionTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true, read: ElementRef }, { propertyName: "dropdown", first: true, predicate: ["dropdownElement"], descendants: true }, { propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "outerContainer", first: true, predicate: ["outerContainer "], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #outerContainer>\n  <po-field-container\n    [p-disabled]=\"disabled\"\n    [p-label]=\"label\"\n    [p-optional]=\"optional\"\n    [p-required]=\"required\"\n    [p-show-required]=\"showRequired\"\n  >\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content\"\n      [class.po-multiselect-show]=\"dropdownOpen\"\n    >\n      <div\n        #inputElement\n        [tabindex]=\"disabled ? -1 : 0\"\n        [attr.disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        class=\"po-input-icon-right po-multiselect-input\"\n        [class.po-multiselect-input-auto]=\"autoHeight\"\n        [class.po-multiselect-input-static]=\"!autoHeight\"\n        [class.po-multiselect-input-disabled]=\"disabled\"\n        [class.po-multiselect-input-font]=\"!disabled && !visibleTags?.length\"\n        [class.po-multiselect-input-aa]=\"size === 'small'\"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"toggleDropdownVisibility()\"\n        (blur)=\"onBlur($event)\"\n      >\n        @if (!disabled && !visibleTags?.length) {\n          <span\n            class=\"po-multiselect-input-placeholder\"\n            [class.po-multiselect-input-placeholder-aa]=\"size === 'small'\"\n            ria-hidden=\"true\"\n          >\n            {{ placeholder ? placeholder : literals.selectItem }}\n          </span>\n        }\n\n        @for (tag of visibleTags; track tag; let i = $index) {\n          <po-tag\n            [p-value]=\"tag[fieldLabel]\"\n            [p-literals]=\"i + 1 === visibleTags.length && hasMoreTag ? literalsTag : undefined\"\n            [p-removable]=\"true\"\n            [class.po-clickable]=\"tag[fieldValue] === '' && !disabled\"\n            [p-disabled]=\"disabled\"\n            (p-close)=\"closeTag(tag[fieldValue], $event)\"\n            [p-append-in-body]=\"appendBox\"\n          ></po-tag>\n        }\n\n        <div class=\"po-field-icon-container-right\">\n          <po-icon\n            p-icon=\"{{ dropdownIcon }}\"\n            #iconElement\n            class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n          >\n          </po-icon>\n        </div>\n      </div>\n    </div>\n\n    @if (appendBox) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n    }\n\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  </po-field-container>\n\n  <ng-template #dropdownListbox>\n    <po-multiselect-dropdown\n      #dropdownElement\n      [p-searching]=\"isServerSearching\"\n      [p-hide-search]=\"hideSearch\"\n      [p-hide-select-all]=\"hideSelectAll\"\n      [p-literals]=\"literals\"\n      [p-options]=\"options\"\n      [p-visible-options]=\"visibleOptionsDropdown\"\n      [p-selected-options]=\"selectedOptions\"\n      [p-placeholder-search]=\"placeholderSearch\"\n      [p-field-value]=\"fieldValue\"\n      [p-field-label]=\"fieldLabel\"\n      [p-multiselect-template]=\"multiselectOptionTemplate\"\n      [p-size]=\"size\"\n      [p-container-width]=\"containerWidth\"\n      (p-change)=\"changeItems($event)\"\n      (p-change-search)=\"changeSearch($event)\"\n      (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n      (keydown)=\"onKeyDownDropdown($event, 0)\"\n    >\n    </po-multiselect-dropdown>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-optional", "p-required", "p-show-required"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoTagComponent, selector: "po-tag" }, { kind: "component", type: PoMultiselectDropdownComponent, selector: "po-multiselect-dropdown", inputs: ["p-searching", "p-hide-search", "p-literals", "p-placeholder-search", "p-selected-options", "p-options", "p-visible-options", "p-hide-select-all", "p-field-value", "p-field-label", "p-multiselect-template", "p-container-width", "p-size"], outputs: ["p-change-search", "p-change", "p-close-dropdown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: PoMultiselectComponent, isStandalone: false, selector: "po-multiselect", providers: providers$1, queries: [{ propertyName: "multiselectOptionTemplate", first: true, predicate: PoMultiselectOptionTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true, read: ElementRef }, { propertyName: "dropdown", first: true, predicate: ["dropdownElement"], descendants: true }, { propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "outerContainer", first: true, predicate: ["outerContainer "], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #outerContainer>\n  <po-field-container\n    [p-disabled]=\"disabled\"\n    [p-label]=\"label\"\n    [p-optional]=\"optional\"\n    [p-required]=\"required\"\n    [p-show-required]=\"showRequired\"\n  >\n    <div\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      class=\"po-field-container-content\"\n      [class.po-multiselect-show]=\"dropdownOpen\"\n    >\n      <div\n        #inputElement\n        [tabindex]=\"disabled ? -1 : 0\"\n        [attr.disabled]=\"disabled\"\n        [attr.aria-label]=\"label\"\n        class=\"po-input-icon-right po-multiselect-input\"\n        [class.po-multiselect-input-auto]=\"autoHeight\"\n        [class.po-multiselect-input-static]=\"!autoHeight\"\n        [class.po-multiselect-input-disabled]=\"disabled\"\n        [class.po-multiselect-input-font]=\"!disabled && !visibleTags?.length\"\n        [class.po-multiselect-input-aa]=\"size === 'small'\"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"toggleDropdownVisibility()\"\n        (blur)=\"onBlur($event)\"\n      >\n        @if (!disabled && !visibleTags?.length) {\n          <span\n            class=\"po-multiselect-input-placeholder\"\n            [class.po-multiselect-input-placeholder-aa]=\"size === 'small'\"\n            ria-hidden=\"true\"\n          >\n            {{ placeholder ? placeholder : literals.selectItem }}\n          </span>\n        }\n\n        @for (tag of visibleTags; track tag; let i = $index) {\n          <po-tag\n            [p-value]=\"tag[fieldLabel]\"\n            [p-literals]=\"i + 1 === visibleTags.length && hasMoreTag ? literalsTag : undefined\"\n            [p-removable]=\"true\"\n            [class.po-clickable]=\"tag[fieldValue] === '' && !disabled\"\n            [p-disabled]=\"disabled\"\n            (p-close)=\"closeTag(tag[fieldValue], $event)\"\n            [p-append-in-body]=\"appendBox\"\n          ></po-tag>\n        }\n\n        <div class=\"po-field-icon-container-right\">\n          <po-icon\n            p-icon=\"{{ dropdownIcon }}\"\n            #iconElement\n            class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n            [class.po-field-icon-aa]=\"size === 'small'\"\n            [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n          >\n          </po-icon>\n        </div>\n      </div>\n    </div>\n\n    @if (appendBox) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayDisableClose]=\"true\"\n      >\n        <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n    }\n\n    <po-field-container-bottom\n      [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n      [p-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"disabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-show-additional-help]=\"displayAdditionalHelp\"\n      [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n      (p-additional-help)=\"emitAdditionalHelp()\"\n    ></po-field-container-bottom>\n  </po-field-container>\n\n  <ng-template #dropdownListbox>\n    <po-multiselect-dropdown\n      #dropdownElement\n      [p-searching]=\"isServerSearching\"\n      [p-hide-search]=\"hideSearch\"\n      [p-hide-select-all]=\"hideSelectAll\"\n      [p-literals]=\"literals\"\n      [p-options]=\"options\"\n      [p-visible-options]=\"visibleOptionsDropdown\"\n      [p-selected-options]=\"selectedOptions\"\n      [p-placeholder-search]=\"placeholderSearch\"\n      [p-field-value]=\"fieldValue\"\n      [p-field-label]=\"fieldLabel\"\n      [p-multiselect-template]=\"multiselectOptionTemplate\"\n      [p-size]=\"size\"\n      [p-container-width]=\"containerWidth\"\n      (p-change)=\"changeItems($event)\"\n      (p-change-search)=\"changeSearch($event)\"\n      (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n      (keydown)=\"onKeyDownDropdown($event, 0)\"\n    >\n    </po-multiselect-dropdown>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-optional", "p-required", "p-show-required"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoTagComponent, selector: "po-tag" }, { kind: "component", type: PoMultiselectDropdownComponent, selector: "po-multiselect-dropdown", inputs: ["p-searching", "p-hide-search", "p-literals", "p-placeholder-search", "p-selected-options", "p-options", "p-visible-options", "p-hide-select-all", "p-field-value", "p-field-label", "p-multiselect-template", "p-container-width", "p-size"], outputs: ["p-change-search", "p-change", "p-close-dropdown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoMultiselectComponent, decorators: [{
             type: Component,
@@ -45765,6 +45983,8 @@ class PoNavbarBaseComponent {
     _shadow = false;
     language = poLocaleDefault;
     /**
+     * @deprecated v23.x.x
+     *
      * @optional
      *
      * @description
@@ -45778,6 +45998,8 @@ class PoNavbarBaseComponent {
         return this._iconActions;
     }
     /**
+     * @deprecated v23.x.x
+     *
      * @optional
      *
      * @description
@@ -45791,6 +46013,8 @@ class PoNavbarBaseComponent {
         return this._items;
     }
     /**
+     * @deprecated v23.x.x
+     *
      * @optional
      *
      * @description
@@ -45832,6 +46056,8 @@ class PoNavbarBaseComponent {
         return this._literals || poNavbarLiteralsDefault$1[this.language];
     }
     /**
+     * @deprecated v23.x.x
+     *
      * @optional
      *
      * @description
@@ -45848,6 +46074,8 @@ class PoNavbarBaseComponent {
         return this._logo;
     }
     /**
+     * @deprecated v23.x.x
+     *
      * @optional
      *
      * @description
@@ -45861,6 +46089,8 @@ class PoNavbarBaseComponent {
      */
     logoAlt;
     /**
+     * @deprecated v23.x.x
+     *
      * @optional
      *
      * @description
@@ -45908,6 +46138,8 @@ const poNavbarMenuMedia = 768;
 const poNavbarMatchMedia = `(max-width: ${poNavbarMenuMedia}px)`;
 const poNavbarTiming = '250ms ease';
 /**
+ * @deprecated v23.x.x use `po-header`
+ *
  * @docsExtends PoNavbarBaseComponent
  */
 class PoNavbarComponent extends PoNavbarBaseComponent {
@@ -46116,12 +46348,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             }] } });
 
 /**
+ * @deprecated v23.x.x use `po-header`
+ *
  * @description
  *
  * Módulo do componente `po-navbar`.
- *
+ * > Esse componente está **depreciado** e será removido na `v23.x.x`. Recomendamos utilizar o componente
+ * [po-header](https://po-ui.io/documentation/po-header), que oferece compatibilidade com todas as funcionalidades do
+ * `po-navbar`, além de maior flexibilidade, usabilidade e acessibilidade.
+ * >
  * > Para o correto funcionamento do componente `po-navbar`, deve ser importado o módulo `BrowserAnimationsModule` no
- * > módulo principal da sua aplicação.
+ * módulo principal da sua aplicação.
  *
  * Módulo da aplicação:
  * ```